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
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
140
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
140
ビギナーであり続ける/beginning
ikuodanaka
3
760
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
50
19k
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
120
Geminiとv0による高速プロトタイピング
shinya337
1
270
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
350
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
220
What’s new in Android development tools
yanzm
0
310
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
250
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Building Adaptive Systems
keathley
43
2.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
How GitHub (no longer) Works
holman
314
140k
Scaling GitHub
holman
460
140k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
A better future with KSS
kneath
238
17k
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の技術) で実現できる楽しいことは 盛りだくさん!
終わり!