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

Slide 1

Slide 1 text

2024年10月27日 (日) HTML5 10th Anniversary @オンライン豊田陽介（） @youtoy "かわいい" がテーマのハッカソンで Webの技術を使って魔法の世界を作った話など

Slide 2

Slide 2 text

自己紹介豊田陽介（） @youtoy ▶ IT系イベント主催、　登壇や運営なども ▶ 機械学習・IoT関連　の書籍を出版 ▶ モノ作りの活動（作品制作、展示） ▶ 子ども向けのIT関連活動プライベートでの活動 ▶ ガジェット ▶ 描画系／IoT／AI・機械学習系 ▶ ビジュアルプログラミング ▶ JavaScript 好きな技術など

Slide 3

Slide 3 text

スライドは公開しますので発表中は記載の詳細などをメモしなくても大丈夫です

Slide 4

Slide 4 text

これまで登壇して話したトピック（過去3年） 9th Anniversary：石巻ハッカソンで作ったもの（ブラウザで機械学習、センサー・無線通信利用） 7th・8th Anniversary：ブラウザで機械学習やデバイス制御という話

Slide 5

Slide 5 text

今回の話でも石巻ハッカソンの話やデバイス制御が出てくる

Slide 6

Slide 6 text

石巻ハッカソンについて・2012年から毎年開催されて　いる恒例のハッカソン・各地から多くの参加者が集う・アイデアピッチ・チーム作り　から始まり、開発後には作品　の展示を行う流れ ⇒ 今年のテーマ「かわいい」

Slide 7

Slide 7 text

チームで作った作品の概要・3台のPC、2台のタブレットを使った体験型の作品・コンセプトは「魔法の国のお姫様」に関する内容・以下の流れを体験してもらえる　1）悪い魔法使いがお姫様を魔法で本に閉じ込める　　　というアニメーション　2）聖なる魔法でお姫様を助け出す演出　3）助け出されたお姫様が物語を語ってくれる

Slide 8

Slide 8 text

体験の流れ ①導入アニメーションするお姫様 ②封印悪い魔法使いがお姫様を封印 ③救出封印を解除してお姫様を助ける ④エンディング擬似ホログラムでお姫様を投影 4つの内容を順番に体験してもらう

Slide 9

Slide 9 text

チームで開発した作品の体験の流れ①〜③

Slide 10

Slide 10 text

チームで開発した作品の体験の流れ④

Slide 11

Slide 11 text

全体構成（ローカルネットワーク内で連携） ①導入 ②封印 ③救出 ④エンディングテザリング等ローカルネットワーク Webサーバー兼表示用機器表示用機器表示用機器表示用機器

Slide 12

Slide 12 text

自分が担当した部分・3台のPC、2台のタブレットを使った体験型の作品・コンセプトは魔法の国のお姫様に関する内容・以下の流れを体験してもらえる　1）悪い魔法使いがお姫様を魔法で本に閉じ込める　　　というアニメーション　2）聖なる魔法でお姫様を助け出す演出　3）助け出されたお姫様が物語を語ってくれる

Slide 13

Slide 13 text

主に自分が作った部分のデモ動画手で触れると光り出す魔法陣が刻まれたボックス

Slide 14

Slide 14 text

主に自分が作った部分に関わる動作の流れなど・外装は100均のクリアボックスに、魔法陣を　切り抜いた黒い工作用紙などを組み合わせたもの・動作の流れ　1）魔法陣の上に手を触れてもらう（押し込む感じ）　2）魔法陣が光り出し、効果音が鳴る　3）別に用意されたPC・タブレット上で、お姫様が　　　助け出されるアニメーションが再生される ※ 魔法陣のデザインやそれを切り抜く作業は、チームメンバーによる

Slide 15

Slide 15 text

自分が作ったところで使った主な技術 ● ブラウザ関連（Web の技術）　・「魔法陣に手を触れた」イベントを小型デバイス　　から PC へ伝える＝ Web Serial API 　・魔法発動の演出時に効果音を鳴らす　　＝ Web Audio API（howler.js）　・魔法発動の完了を別PC・タブレットに伝える　　＝ WebSocket ● ブラウザ関連以外　・「魔法陣に手を触れた」のを検知・フルカラー　　　LEDテープを発光させる＝ micro:bit、他

Slide 16

Slide 16 text

LEDテープを光らせていたところの開発・ブラウザで開発やデバイスへの書き込みができる　⇒ Microsoft MakeCode for micro:bit

Slide 17

Slide 17 text

光る魔法陣の中の仕組み

Slide 18

Slide 18 text

余談：自分達のチームでも他でも生成AI が多く登場していた印象

Slide 19

Slide 19 text

シェーダーの話

Slide 20

Slide 20 text

実例〜その1 〜ブラウザ上でカメラ入力に対してフィルタ処理

Slide 21

Slide 21 text

実例〜その2 〜画像・動画素材を使わず複雑な見た目の描画処理

Slide 22

Slide 22 text

Webの技術の話では ● 以下が関係するもの　・3D描画が扱える「WebGL」　・「GLSL：Graphics Library Shader Language」　　⇒ 計算に特化した設計の言語（C言語の構文がベース） ⇒ 慣れるまでハードル高いが、複雑な計算を高速に行える　（あと、シェーダーのサンプルは世界中の人がたくさん　　公開されていて参考になる：「shadertoy.com 等」）

Slide 23

Slide 23 text

話題をもう1つ：ブラウザで作る体験型展示

Slide 24

Slide 24 text

太鼓コントローラー・100均のポンプを入力に

Slide 25

Slide 25 text

● 太鼓の達人用コントローラーを使う　・ゲームパッドの入力を扱う＝ Gamepad API 　　（太鼓型コントローラーを叩く＝ボタン押下と同じ） ● 100均の空気ポンプを入力にする　・マイクの音量をとる、周波数変換する　　＝ Web Audio API（p5.sound ＋ p5.js）　　（空気の吹き出し口にマイクをセットする構成）　・小型ロボット toio を動かす　　＝ Web Bluetooth API（p5.toio ＋ p5.js）作成にあたって使った技術：ブラウザ関連

Slide 26

Slide 26 text

那須の図書館併設の場所での展示イベント

Slide 27

Slide 27 text

ブラウザ（Webの技術）で実現できる楽しいことは盛りだくさん！

Slide 28

Slide 28 text

終わり！