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
90
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you(@youtoy)
PRO
October 26, 2024
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
デモをまじえつつの生成AIの話題 / 横須賀プログラミング“夢”アカデミー発表会(2025年3月)
you
PRO
0
35
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
38
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
200
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
2.5k
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
110
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
640
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
2.4k
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
5.1k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
1
2.7k
Other Decks in Technology
See All in Technology
AWS のポリシー言語 Cedar を活用した高速かつスケーラブルな認可技術の探求 #phperkaigi / PHPerKaigi 2025
ytaka23
7
1.5k
チームの性質によって変わる ADR との向き合い方と、生成 AI 時代のこれから / How to deal with ADR depends on the characteristics of the team
mh4gf
4
330
React Server Componentは 何を解決し何を解決しないのか / What do React Server Components solve, and what do they not solve?
kaminashi
6
1.2k
コード品質向上で得られる効果と実践的取り組み
ham0215
2
200
ClineにNext.jsのプロジェクト改善をお願いしてみた / 20250321_reacttokyo_LT
optim
1
1.3k
Tirez profit de Messenger pour améliorer votre architecture
tucksaun
1
130
セマンティックレイヤー入門
ikkimiyazaki
8
2.7k
頻繁リリース × 高品質 = 無理ゲー? いや、できます!/20250306 Shoki Hyo
shift_evolve
0
150
Go の analysis パッケージで自作するリファクタリングツール
kworkdev
PRO
1
410
Proxmox VE超入門 〜 無料で作れるご自宅仮想化プラットフォームブックマークする
devops_vtj
0
120
数百台のオンプレミスのサーバーをEKSに移行した話
yukiteraoka
0
640
グループポリシー再確認
murachiakira
0
160
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
31
4.7k
BBQ
matthewcrist
88
9.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Code Review Best Practice
trishagee
67
18k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
Visualization
eitanlees
146
15k
Fireside Chat
paigeccino
37
3.3k
Producing Creativity
orderedlist
PRO
344
40k
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の技術) で実現できる楽しいことは 盛りだくさん!
終わり!