ハッカソンでWebの技術を使った作品を作ってみた 〜ブラウザで機械学習やデバイス制御など〜 / HTML5 9th Anniversary

Transcript

1. 2023年10月29日 (日) HTML5 9th Anniversary @オンライン 豊田陽介（ ） @youtoy ハッカソンでWebの技術を使った作品を作ってみた 〜ブラウザで機械学習やデバイス制御など〜
2. 自己紹介 豊田陽介（ ） @youtoy ・IT系イベント主催、登壇や運営なども ・機械学習・IoTの書籍を出版 ・子ども向けの活動いろいろ ・ Microsoft MVP（2021/10 から） プライベートでの活動 ・ガジェット大好き ・ビジュアルプログラミング／JavaScript 　とガジェットの組み合わせをよくやって 　いたり、AI・機械学習系の内容も使って 　みていたり 好きなこと、他
3. 過去のイベントでは こんな話で登壇してました
4. 一昨年と昨年の登壇タイトル 7th Anniversary 「Webの技術でできる様々なこと(機械学習・ 　物理演算・デバイス連携など )」 8th Anniversary 「続・Webの技術でできる様々なこと 　〜ブラウザで機械学習やデバイス制御など〜」
5. 【余談】AI・機械学習と Webの技術で試作した 作品の一部を紹介
6. 透明マント／光学迷彩的なエフェクト
7. ボールを使ったジャグリングっぽいもの？
8. 「作って楽しい」 「やってみて面白い」 という方向が多め
9. 今回は石巻で行われた ハッカソンに参加した際に 開発した作品の話
10. 石巻ハッカソンについて ・2012年から毎年開催されて 　いる恒例のハッカソン ・各地から多くの参加者が集う ・アイデアピッチ・チーム作り 　から始まり、開発後には作品 　の展示を行う流れ
11. 余談：海の幸が美味しい！
12. 自分が参加したチームについてなど ・今年のテーマは「未来」 ・「未来の屋台」を作るという 　コンセプトのチームに入って 　工作・開発 ・手作り屋台とWebの技術を 　使った作品2つを展示
13. Webの技術を使って 作った作品のうちの1つ
14. バーチャルなポップコーン作り
15. 作品の体験の流れ ① テーブルの特定の 　 箇所に触れる （カメラ映像で手が 　 特定の位置にくる 　 ようにする） ② PC画面に火が燃え 　 さかる演出 　 （BGMの再生開始）
16. 作品の体験の流れ ③ フライパンを一定 　 時間振り続ける 　（何かがはじける 　　ような効果音も） ④ BGMがテンポアップ、 　 その後、成功を知らせる 　 効果音再生＋紙吹雪演出
17. 仕組みの話をざっくりと ① テーブルの特定の 　 箇所に触れる （カメラ映像で手が 　 特定の位置にくる 　 ようにする） ② PC画面に火が燃え 　 さかる演出 　 （BGMの再生開始） AI・機械学習 （画像認識） 画像合成、 音の制御
18. 仕組みの話をざっくりと ③ フライパンを一定 　 時間振り続ける 　（何かがはじける 　　ような効果音も） ④ BGMがテンポアップ、 　 その後、成功を知らせる 　 効果音再生＋紙吹雪演出 BLEでデバイス制御、 音の制御 アニメーション 描画、音の制御
19. 使っている技術など（細かな部分） ・ブラウザでの処理 ・描画の主な部分： 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均のフライパン
20. 使っている Webの技術について 一部をさらに補足
21. AI・機械学習による画像認識（手の認識） ライブラリ「ml5.js」を利用 手のキーポイントの 位置（複数）を画像 から検出
22. p5.jsによる画像合成 ≠ 単純な重ね合わせ p5.js の「blendMode()」 単純な 重畳 ADD SCREEN ※ Canvas の「globalCompositeOperation」 　 という API による Adobe Photoshopなどにもある 画像合成の仕組み
23. エフェクト用動画をカメラ映像に合成
24. Web Bluetooth API ・ただし、caniuse.com を見てみると対応ブラウザは限定的 ・Bluetooth をブラウザから利用し、BLE対応デバイスとの間で 　情報の読み書きをする機能等を提供してくれるAPI
25. ガジェットとPCとの間での通信 デバイスで検出したシェイクイベントをBLEによりPCへ PC （Chrome） toio＋フライパン HTML + JavaScript BLE Web Bluetooth API
26. あと物理的な 工作をした部分
27. 力技でフライパンにデバイスを固定 ダンボールとテープ でくるんだものを、 紐でぐるぐる巻きに
28. 展示で体験いただいた方の反応や 作品を作ってみての感想
29. 嬉しいくらいの驚き・笑顔などの反応をもらえた ・炎の演出の部分 ・テーブルに触れたら火がつく！？ ・フライパンを振るところ ・横から盛り上げる ⇒ 全力でフライパンを振る 　　⇒ フライパンを振る動作、音の演出などを 　　　 楽しんでもらえた ・体験後のおまけも ・小分けにしたポップコーン（本物）をプレゼント
30. Webの技術でできることは幅広い！ 今後も楽しく利用していきたい！
31. 余談：Meta Quest 3でのWebXRが気になってる ・カラーパススルー機能：ゴーグルのカメラ映像を利用できる ・WebXRのサンプルで床や壁の検出などができるのは確認済み 今月10/10の 発売日にゲット
32. 終わり！