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
130
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you(@youtoy)
PRO
October 26, 2024
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
ブラウザで CircuitPython の開発:公式の「CircuitPython Code Editor」を試した / 【屋形船開催】IoT縛りの勉強会! IoTLT vol.126 @東京湾
you
PRO
0
100
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
2.4k
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
140
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
2.4k
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
160
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
290
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
230
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
130
ChatGPT からモックサーバー宛(Beeceptor宛)の HTTPリクエストを試す / IoTLT 202504
you
PRO
0
120
Other Decks in Technology
See All in Technology
衝突して強くなる! BLUE GIANTと アジャイルチームの共通点とは ― いきいきと活気に満ちたグルーヴあるチームを作るコツ ― / BLUE GIANT and Agile Teams
naitosatoshi
0
290
AWSで推進するデータマネジメント
kawanago
0
810
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
4
2k
実践AIガバナンス
asei
3
290
Grafana MCPサーバーによるAIエージェント経由でのGrafanaダッシュボード動的生成
hamadakoji
1
1k
実践アプリケーション設計 ③ドメイン駆動設計
recruitengineers
PRO
13
4k
AWS環境のリソース調査を Claude Code で効率化 / aws investigate with cc devio2025
masahirokawahara
2
1k
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
250
Snowflakeの生成AI機能を活用したデータ分析アプリの作成 〜Cortex AnalystとCortex Searchの活用とStreamlitアプリでの利用〜
nayuts
0
140
個人CLAUDE.md紹介と設定から学んだこと/introduce-my-claude-md
shibayu36
0
160
コスト削減の基本の「キ」~ コスト消費3大リソースへの対策 ~
smt7174
2
320
Bye-Bye Query Spaghetti: Write Queries You'll Actually Understand Using Pipelined SQL Syntax
tobiaslampertlotum
0
120
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6.1k
Navigating Team Friction
lara
189
15k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Six Lessons from altMBA
skipperchong
28
4k
Fireside Chat
paigeccino
39
3.6k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
For a Future-Friendly Web
brad_frost
179
9.9k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Balancing Empowerment & Direction
lara
3
610
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の技術) で実現できる楽しいことは 盛りだくさん!
終わり!