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の技術を使って魔法の世界を作った話など / HTML...
Search
you(@youtoy)
PRO
October 26, 2024
Technology
0
110
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you(@youtoy)
PRO
October 26, 2024
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
130
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
59
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
180
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
110
ChatGPT からモックサーバー宛(Beeceptor宛)の HTTPリクエストを試す / IoTLT 202504
you
PRO
0
100
デモをまじえつつの生成AIの話題 / 横須賀プログラミング“夢”アカデミー発表会(2025年3月)
you
PRO
0
53
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
57
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
240
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
2.6k
Other Decks in Technology
See All in Technology
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
200
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
160
Model Mondays S2E04: AI Developer Experiences
nitya
0
120
OPENLOGI Company Profile for engineer
hr01
1
34k
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
10
4.4k
ビギナーであり続ける/beginning
ikuodanaka
3
760
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
280
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.6k
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
380
Lazy application authentication with Tailscale
bluehatbrit
0
210
MobileActOsaka_250704.pdf
akaitadaaki
0
120
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
Statistics for Hackers
jakevdp
799
220k
Become a Pro
speakerdeck
PRO
29
5.4k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
YesSQL, Process and Tooling at Scale
rocio
173
14k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Documentation Writing (for coders)
carmenintech
72
4.9k
Transcript
2024年10月27日 (日) HTML5 10th Anniversary @オンライン 豊田陽介( ) @youtoy "かわいい"
がテーマのハッカソンで Webの技術を使って魔法の世界を作った話など
自己紹介 豊田陽介( ) @youtoy ▶ IT系イベント主催、 登壇や運営なども ▶ 機械学習・IoT関連
の書籍を出版 ▶ モノ作りの活動(作品制作、展示) ▶ 子ども向けのIT関連活動 プライベートでの活動 ▶ ガジェット ▶ 描画系/IoT/AI・機械学習系 ▶ ビジュアルプログラミング ▶ JavaScript 好きな技術など
スライドは公開しますので 発表中は記載の詳細などを メモしなくても大丈夫です
これまで登壇して話したトピック(過去3年) 9th Anniversary: 石巻ハッカソンで作ったもの (ブラウザで機械学習、センサー・無線通信利用) 7th・8th Anniversary: ブラウザで 機械学習やデバイス制御という話
今回の話でも 石巻ハッカソンの話や デバイス制御が出てくる
石巻ハッカソンについて ・2012年から毎年開催されて いる恒例のハッカソン ・各地から多くの参加者が集う ・アイデアピッチ・チーム作り から始まり、開発後には作品 の展示を行う流れ ⇒ 今年のテーマ「かわいい」
チームで作った作品の概要 ・3台のPC、2台のタブレットを使った体験型の作品 ・コンセプトは「魔法の国のお姫様」に関する内容 ・以下の流れを体験してもらえる 1)悪い魔法使いがお姫様を魔法で本に閉じ込める というアニメーション 2)聖なる魔法でお姫様を助け出す演出 3)助け出されたお姫様が物語を語ってくれる
体験の流れ ①導入 アニメーション するお姫様 ②封印 悪い魔法使いが お姫様を封印 ③救出 封印を解除して お姫様を助ける
④エンディング 擬似ホログラム でお姫様を投影 4つの内容を順番に体験してもらう
チームで開発した作品の体験の流れ①〜③
チームで開発した作品の体験の流れ④
全体構成(ローカルネットワーク内で連携) ①導入 ②封印 ③救出 ④エンディング テザリング等 ローカル ネットワーク Webサーバー兼 表示用機器
表示用機器 表示用機器 表示用機器
自分が担当した部分 ・3台のPC、2台のタブレットを使った体験型の作品 ・コンセプトは魔法の国のお姫様に関する内容 ・以下の流れを体験してもらえる 1)悪い魔法使いがお姫様を魔法で本に閉じ込める というアニメーション 2)聖なる魔法でお姫様を助け出す演出 3)助け出されたお姫様が物語を語ってくれる
主に自分が作った部分のデモ動画 手で触れると光り出す魔法陣が刻まれたボックス
主に自分が作った部分に関わる動作の流れなど ・外装は100均のクリアボックスに、魔法陣を 切り抜いた黒い工作用紙などを組み合わせたもの ・動作の流れ 1)魔法陣の上に手を触れてもらう(押し込む感じ) 2)魔法陣が光り出し、効果音が鳴る 3)別に用意されたPC・タブレット上で、お姫様が 助け出されるアニメーションが再生される ※ 魔法陣のデザインやそれを切り抜く作業は、チームメンバーによる
自分が作ったところで使った主な技術 • ブラウザ関連(Web の技術) ・「魔法陣に手を触れた」イベントを小型デバイス から PC へ伝える = Web
Serial API ・魔法発動の演出時に効果音を鳴らす = Web Audio API(howler.js) ・魔法発動の完了を別PC・タブレットに伝える = WebSocket • ブラウザ関連以外 ・「魔法陣に手を触れた」のを検知・フルカラー LEDテープを発光させる = micro:bit、他
LEDテープを光らせていたところの開発 ・ブラウザで開発やデバイスへの書き込みができる ⇒ Microsoft MakeCode for micro:bit
光る魔法陣の中の仕組み
余談: 自分達のチームでも他でも 生成AI が多く登場していた印象
シェーダーの話
実例 〜 その1 〜 ブラウザ上でカメラ入力に対してフィルタ処理
実例 〜 その2 〜 画像・動画素材を使わず複雑な見た目の描画処理
Webの技術の話では • 以下が関係するもの ・3D描画が扱える「WebGL」 ・「GLSL:Graphics Library Shader Language」 ⇒ 計算に特化した設計の言語(C言語の構文がベース)
⇒ 慣れるまでハードル高いが、複雑な計算を高速に行える (あと、シェーダーのサンプルは世界中の人がたくさん 公開されていて参考になる:「shadertoy.com 等」)
話題をもう1つ: ブラウザで作る体験型展示
太鼓コントローラー・100均のポンプを入力に
• 太鼓の達人用コントローラーを使う ・ゲームパッドの入力を扱う = Gamepad API (太鼓型コントローラーを叩く = ボタン押下と同じ) •
100均の空気ポンプを入力にする ・マイクの音量をとる、周波数変換する = Web Audio API(p5.sound + p5.js) (空気の吹き出し口にマイクをセットする構成) ・小型ロボット toio を動かす = Web Bluetooth API(p5.toio + p5.js) 作成にあたって使った技術:ブラウザ関連
那須の図書館併設の場所での展示イベント
ブラウザ(Webの技術) で実現できる楽しいことは 盛りだくさん!
終わり!