Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ハッカソンでWebの技術を使った作品を作ってみた 〜ブラウザで機械学習やデバイス制御など〜 /...
Search
you(@youtoy)
PRO
October 29, 2023
Technology
0
160
ハッカソンでWebの技術を使った作品を作ってみた 〜ブラウザで機械学習やデバイス制御など〜 / HTML5 9th Anniversary
you(@youtoy)
PRO
October 29, 2023
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
100
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
240
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
56
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
450
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
220
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
2.4k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
420
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.5k
AI・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI、機械学習 / 20231201
you
PRO
3
2.5k
Other Decks in Technology
See All in Technology
AWSの初級者向けAI・ML資格『AWS Certified AI Practitioner』の傾向と対策/So You Want To Pass AWS Certified AI Practitioner
quiver
0
910
データ分析基盤のためにS3を深堀りする~アーキテクチャ設計の考え方のヒントに~
nrinetcom
PRO
1
740
入社半年(合計1年)でGoogle Cloud 認定を全冠した秘訣🤫
risatube
1
270
複数の外部サービスデータの統合と変換を実現する Railsのインポートアーキテクチャ / Rails import architecture for integration and transformation of multiple external service data
aiandrox
0
190
新入社員 オンボーディング改善プロジェクト - シンプルな仕組みで変革のきっかけを
enpipi
0
370
Applied NLP with LLMs: Beyond Black-Box Monoliths
inesmontani
PRO
0
180
寒冷地稲作の歴史にみるコミュニティ
miu_crescent
2
130
WSUSが非推奨に!? Windowsの更新管理を改めて勉強する!
ebibibi
0
550
とある事業会社にとっての Kaggler の魅力
hakubishin3
7
1.5k
本番のトラフィック量でHudiを検証して見えてきた課題
joker1007
2
240
AWS Lambda と Amazon SQS で「わかった気になれる」FreeRTOS 入門
soracom
PRO
2
140
ゼロからはじめる生成AI〜AWS認定とハンズオンで学ぶ初心者の道〜
kenichinakamura
0
130
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.9k
Navigating Team Friction
lara
183
14k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Rails Girls Zürich Keynote
gr2m
93
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Become a Pro
speakerdeck
PRO
24
4.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.7k
Automating Front-end Workflow
addyosmani
1365
200k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Transcript
2023年10月29日 (日) HTML5 9th Anniversary @オンライン 豊田陽介( ) @youtoy ハッカソンでWebの技術を使った作品を作ってみた
〜ブラウザで機械学習やデバイス制御など〜
自己紹介 豊田陽介( ) @youtoy ・IT系イベント主催、登壇や運営なども ・機械学習・IoTの書籍を出版 ・子ども向けの活動いろいろ ・ Microsoft MVP(2021/10
から) プライベートでの活動 ・ガジェット大好き ・ビジュアルプログラミング/JavaScript とガジェットの組み合わせをよくやって いたり、AI・機械学習系の内容も使って みていたり 好きなこと、他
過去のイベントでは こんな話で登壇してました
一昨年と昨年の登壇タイトル 7th Anniversary 「Webの技術でできる様々なこと(機械学習・ 物理演算・デバイス連携など )」 8th Anniversary 「続・Webの技術でできる様々なこと 〜ブラウザで機械学習やデバイス制御など〜」
【余談】AI・機械学習と Webの技術で試作した 作品の一部を紹介
透明マント/光学迷彩的なエフェクト
ボールを使ったジャグリングっぽいもの?
「作って楽しい」 「やってみて面白い」 という方向が多め
今回は石巻で行われた ハッカソンに参加した際に 開発した作品の話
石巻ハッカソンについて ・2012年から毎年開催されて いる恒例のハッカソン ・各地から多くの参加者が集う ・アイデアピッチ・チーム作り から始まり、開発後には作品 の展示を行う流れ
余談:海の幸が美味しい!
自分が参加したチームについてなど ・今年のテーマは「未来」 ・「未来の屋台」を作るという コンセプトのチームに入って 工作・開発 ・手作り屋台とWebの技術を 使った作品2つを展示
Webの技術を使って 作った作品のうちの1つ
バーチャルなポップコーン作り
作品の体験の流れ ① テーブルの特定の 箇所に触れる (カメラ映像で手が 特定の位置にくる ようにする)
② PC画面に火が燃え さかる演出 (BGMの再生開始)
作品の体験の流れ ③ フライパンを一定 時間振り続ける (何かがはじける ような効果音も) ④ BGMがテンポアップ、
その後、成功を知らせる 効果音再生+紙吹雪演出
仕組みの話をざっくりと ① テーブルの特定の 箇所に触れる (カメラ映像で手が 特定の位置にくる ようにする)
② PC画面に火が燃え さかる演出 (BGMの再生開始) AI・機械学習 (画像認識) 画像合成、 音の制御
仕組みの話をざっくりと ③ フライパンを一定 時間振り続ける (何かがはじける ような効果音も) ④ BGMがテンポアップ、
その後、成功を知らせる 効果音再生+紙吹雪演出 BLEでデバイス制御、 音の制御 アニメーション 描画、音の制御
使っている技術など(細かな部分) ・ブラウザでの処理 ・描画の主な部分: p5.js(Canvas API) ・締めの演出の描画:Canvas Confetti(Canvas API) ・音の制御: p5.sound(Web
Audio API) ・AI・機械学習: ml5.js(TensorFlow.jsベース) ・BLEでデバイス制御: p5.toio(Web Bluetooth API) ・物理の部分 ・デバイス: toio ・他: 100均のフライパン
使っている Webの技術について 一部をさらに補足
AI・機械学習による画像認識(手の認識) ライブラリ「ml5.js」を利用 手のキーポイントの 位置(複数)を画像 から検出
p5.jsによる画像合成 ≠ 単純な重ね合わせ p5.js の「blendMode()」 単純な 重畳 ADD SCREEN ※
Canvas の「globalCompositeOperation」 という API による Adobe Photoshopなどにもある 画像合成の仕組み
エフェクト用動画をカメラ映像に合成
Web Bluetooth API ・ただし、caniuse.com を見てみると対応ブラウザは限定的 ・Bluetooth をブラウザから利用し、BLE対応デバイスとの間で 情報の読み書きをする機能等を提供してくれるAPI
ガジェットとPCとの間での通信 デバイスで検出したシェイクイベントをBLEによりPCへ PC (Chrome) toio+フライパン HTML + JavaScript BLE Web
Bluetooth API
あと物理的な 工作をした部分
力技でフライパンにデバイスを固定 ダンボールとテープ でくるんだものを、 紐でぐるぐる巻きに
展示で体験いただいた方の反応や 作品を作ってみての感想
嬉しいくらいの驚き・笑顔などの反応をもらえた ・炎の演出の部分 ・テーブルに触れたら火がつく!? ・フライパンを振るところ ・横から盛り上げる ⇒ 全力でフライパンを振る ⇒ フライパンを振る動作、音の演出などを
楽しんでもらえた ・体験後のおまけも ・小分けにしたポップコーン(本物)をプレゼント
Webの技術でできることは幅広い! 今後も楽しく利用していきたい!
余談:Meta Quest 3でのWebXRが気になってる ・カラーパススルー機能:ゴーグルのカメラ映像を利用できる ・WebXRのサンプルで床や壁の検出などができるのは確認済み 今月10/10の 発売日にゲット
終わり!