"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary

Transcript

1. 2024年10月27日 (日) HTML5 10th Anniversary @オンライン 豊田陽介（ ） @youtoy "かわいい" がテーマのハッカソンで Webの技術を使って魔法の世界を作った話など
2. 自己紹介 豊田陽介（ ） @youtoy ▶ IT系イベント主催、 　 登壇や運営なども ▶ 機械学習・IoT関連 　 の書籍を出版 ▶ モノ作りの活動（作品制作、展示） ▶ 子ども向けのIT関連活動 プライベートでの活動 ▶ ガジェット ▶ 描画系／IoT／AI・機械学習系 ▶ ビジュアルプログラミング ▶ JavaScript 好きな技術など
3. スライドは公開しますので 発表中は記載の詳細などを メモしなくても大丈夫です
4. これまで登壇して話したトピック（過去3年） 9th Anniversary： 石巻ハッカソンで作ったもの （ブラウザで機械学習、センサー・無線通信利用） 7th・8th Anniversary： ブラウザで 機械学習やデバイス制御という話
5. 今回の話でも 石巻ハッカソンの話や デバイス制御が出てくる
6. 石巻ハッカソンについて ・2012年から毎年開催されて 　いる恒例のハッカソン ・各地から多くの参加者が集う ・アイデアピッチ・チーム作り 　から始まり、開発後には作品 　の展示を行う流れ ⇒ 今年のテーマ「かわいい」
7. チームで作った作品の概要 ・3台のPC、2台のタブレットを使った体験型の作品 ・コンセプトは「魔法の国のお姫様」に関する内容 ・以下の流れを体験してもらえる 　1）悪い魔法使いがお姫様を魔法で本に閉じ込める 　　　というアニメーション 　2）聖なる魔法でお姫様を助け出す演出 　3）助け出されたお姫様が物語を語ってくれる
8. 体験の流れ ①導入 アニメーション するお姫様 ②封印 悪い魔法使いが お姫様を封印 ③救出 封印を解除して お姫様を助ける ④エンディング 擬似ホログラム でお姫様を投影 4つの内容を順番に体験してもらう
9. チームで開発した作品の体験の流れ①〜③
10. チームで開発した作品の体験の流れ④
11. 全体構成（ローカルネットワーク内で連携） ①導入 ②封印 ③救出 ④エンディング テザリング等 ローカル ネットワーク Webサーバー兼 表示用機器 表示用機器 表示用機器 表示用機器
12. 自分が担当した部分 ・3台のPC、2台のタブレットを使った体験型の作品 ・コンセプトは魔法の国のお姫様に関する内容 ・以下の流れを体験してもらえる 　1）悪い魔法使いがお姫様を魔法で本に閉じ込める 　　　というアニメーション 　2）聖なる魔法でお姫様を助け出す演出 　3）助け出されたお姫様が物語を語ってくれる
13. 主に自分が作った部分のデモ動画 手で触れると光り出す魔法陣が刻まれたボックス
14. 主に自分が作った部分に関わる動作の流れなど ・外装は100均のクリアボックスに、魔法陣を 　切り抜いた黒い工作用紙などを組み合わせたもの ・動作の流れ 　1）魔法陣の上に手を触れてもらう（押し込む感じ） 　2）魔法陣が光り出し、効果音が鳴る 　3）別に用意されたPC・タブレット上で、お姫様が 　　　助け出されるアニメーションが再生される ※ 魔法陣のデザインやそれを切り抜く作業は、チームメンバーによる
15. 自分が作ったところで使った主な技術 • ブラウザ関連（Web の技術） 　・「魔法陣に手を触れた」イベントを小型デバイス 　　から PC へ伝える ＝ Web Serial API 　・魔法発動の演出時に効果音を鳴らす 　　＝ Web Audio API（howler.js） 　・魔法発動の完了を別PC・タブレットに伝える 　　＝ WebSocket • ブラウザ関連以外 　・「魔法陣に手を触れた」のを検知・フルカラー 　　　LEDテープを発光させる ＝ micro:bit、他
16. LEDテープを光らせていたところの開発 ・ブラウザで開発やデバイスへの書き込みができる 　⇒ Microsoft MakeCode for micro:bit
17. 光る魔法陣の中の仕組み
18. 余談： 自分達のチームでも他でも 生成AI が多く登場していた印象
19. シェーダーの話
20. 実例 〜 その1 〜 ブラウザ上でカメラ入力に対してフィルタ処理
21. 実例 〜 その2 〜 画像・動画素材を使わず複雑な見た目の描画処理
22. Webの技術の話では • 以下が関係するもの 　・3D描画が扱える「WebGL」 　・「GLSL：Graphics Library Shader Language」 　　⇒ 計算に特化した設計の言語（C言語の構文がベース） ⇒ 慣れるまでハードル高いが、複雑な計算を高速に行える 　（あと、シェーダーのサンプルは世界中の人がたくさん 　　公開されていて参考になる：「shadertoy.com 等」）
23. 話題をもう1つ： ブラウザで作る体験型展示
24. 太鼓コントローラー・100均のポンプを入力に
25. • 太鼓の達人用コントローラーを使う 　・ゲームパッドの入力を扱う ＝ Gamepad API 　　（太鼓型コントローラーを叩く ＝ ボタン押下と同じ） • 100均の空気ポンプを入力にする 　・マイクの音量をとる、周波数変換する 　　＝ Web Audio API（p5.sound ＋ p5.js） 　　（空気の吹き出し口にマイクをセットする構成） 　・小型ロボット toio を動かす 　　＝ Web Bluetooth API（p5.toio ＋ p5.js） 作成にあたって使った技術：ブラウザ関連
26. 那須の図書館併設の場所での展示イベント
27. ブラウザ（Webの技術） で実現できる楽しいことは 盛りだくさん！
28. 終わり！