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
89
"かわいい" がテーマのハッカソンで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
31
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
37
ブラウザで 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
630
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
コンテナ上シェル悪用の話とPure Bashでcurlが作れた話
ryotosaito
2
390
プラクティスの名前は言わない方がいい / Not to mention the name of the practice
3l4l5
8
3.4k
Cursorで学ぶAIエディター / understand-ai-editor-by-cursor
shuzon
0
860
技術を育てる組織・組織を育てる技術 / technology and organization
motemen
11
4.2k
OPENLOGI Company Profile
hr01
0
61k
コード品質向上で得られる効果と実践的取り組み
ham0215
0
130
Alpine.js を活用した Laravel MPA フロントエンド最適化戦略 / Alpine.js MPA
tzmfreedom
1
580
RubyKaigi で得た課題解決法・美意識・モチベーション
morihirok
0
180
組織に持ち込む脅威モデリング
nikinusu
3
680
株式会社イングリウッド_中途エンジニア採用会社説明資料
ig_umemotoryo
0
150
入社半年で PTE に! 元海外在住者が語る Google Cloud × G-genで 成長する秘訣
risatube
PRO
0
140
【ServiceNow SNUG Meetup LT deck】ServiceNow「検索性の進化」ZingからNow Assistまで
niwato
1
270
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Become a Pro
speakerdeck
PRO
26
5.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
12
1.4k
A Philosophy of Restraint
colly
203
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Building an army of robots
kneath
303
45k
For a Future-Friendly Web
brad_frost
176
9.6k
A Modern Web Designer's Workflow
chriscoyier
693
190k
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の技術) で実現できる楽しいことは 盛りだくさん!
終わり!