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の技術を使った作品を作ってみた 〜ブラウザで機械学習やデバイス制御など〜 / HTML5 9th Anniversary
Search
you(@youtoy)
PRO
October 29, 2023
Technology
0
140
ハッカソンでWebの技術を使った作品を作ってみた 〜ブラウザで機械学習やデバイス制御など〜 / HTML5 9th Anniversary
you(@youtoy)
PRO
October 29, 2023
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
31
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
340
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
180
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
2k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
300
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.5k
AI・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI、機械学習 / 20231201
you
PRO
3
2.3k
p5.js・p5playを使った体験イベントに参加した子達が手を動かすこと・考えることを楽しんでくれた話 / p5.js勉強会(第九回) / 20231126
you
PRO
0
90
LINEでのコミュニケーションにマスコットキーホルダーを使ってみる / LINEを使ったLT大会 #5
you
PRO
0
2.4k
Other Decks in Technology
See All in Technology
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
簡単に始めるSnowflakeの機械学習
nayuts
1
190
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
190
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
960
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
210
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
GraphQLとの向き合い方2022年版
quramy
36
13k
Statistics for Hackers
jakevdp
792
220k
Into the Great Unknown - MozCon
thekraken
20
1.3k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
The World Runs on Bad Software
bkeepers
PRO
63
11k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
Transcript
2023年10月29日 (日) HTML5 9th Anniversary @オンライン 豊田陽介( ) @youtoy ハッカソンでWebの技術を使った作品を作ってみた
〜ブラウザで機械学習やデバイス制御など〜
自己紹介 豊田陽介( ) @youtoy ・IT系イベント主催、登壇や運営なども ・機械学習・IoTの書籍を出版 ・子ども向けの活動いろいろ ・ Microsoft MVP(2021/10
から) プライベートでの活動 ・ガジェット大好き ・ビジュアルプログラミング/JavaScript とガジェットの組み合わせをよくやって いたり、AI・機械学習系の内容も使って みていたり 好きなこと、他
過去のイベントでは こんな話で登壇してました
一昨年と昨年の登壇タイトル 7th Anniversary 「Webの技術でできる様々なこと(機械学習・ 物理演算・デバイス連携など )」 8th Anniversary 「続・Webの技術でできる様々なこと 〜ブラウザで機械学習やデバイス制御など〜」
【余談】AI・機械学習と Webの技術で試作した 作品の一部を紹介
透明マント/光学迷彩的なエフェクト
ボールを使ったジャグリングっぽいもの?
「作って楽しい」 「やってみて面白い」 という方向が多め
今回は石巻で行われた ハッカソンに参加した際に 開発した作品の話
石巻ハッカソンについて ・2012年から毎年開催されて いる恒例のハッカソン ・各地から多くの参加者が集う ・アイデアピッチ・チーム作り から始まり、開発後には作品 の展示を行う流れ
余談:海の幸が美味しい!
自分が参加したチームについてなど ・今年のテーマは「未来」 ・「未来の屋台」を作るという コンセプトのチームに入って 工作・開発 ・手作り屋台とWebの技術を 使った作品2つを展示
Webの技術を使って 作った作品のうちの1つ
バーチャルなポップコーン作り
作品の体験の流れ ① テーブルの特定の 箇所に触れる (カメラ映像で手が 特定の位置にくる ようにする)
② PC画面に火が燃え さかる演出 (BGMの再生開始)
作品の体験の流れ ③ フライパンを一定 時間振り続ける (何かがはじける ような効果音も) ④ BGMがテンポアップ、
その後、成功を知らせる 効果音再生+紙吹雪演出
仕組みの話をざっくりと ① テーブルの特定の 箇所に触れる (カメラ映像で手が 特定の位置にくる ようにする)
② PC画面に火が燃え さかる演出 (BGMの再生開始) AI・機械学習 (画像認識) 画像合成、 音の制御
仕組みの話をざっくりと ③ フライパンを一定 時間振り続ける (何かがはじける ような効果音も) ④ BGMがテンポアップ、
その後、成功を知らせる 効果音再生+紙吹雪演出 BLEでデバイス制御、 音の制御 アニメーション 描画、音の制御
使っている技術など(細かな部分) ・ブラウザでの処理 ・描画の主な部分: p5.js(Canvas API) ・締めの演出の描画:Canvas Confetti(Canvas API) ・音の制御: p5.sound(Web
Audio API) ・AI・機械学習: ml5.js(TensorFlow.jsベース) ・BLEでデバイス制御: p5.toio(Web Bluetooth API) ・物理の部分 ・デバイス: toio ・他: 100均のフライパン
使っている Webの技術について 一部をさらに補足
AI・機械学習による画像認識(手の認識) ライブラリ「ml5.js」を利用 手のキーポイントの 位置(複数)を画像 から検出
p5.jsによる画像合成 ≠ 単純な重ね合わせ p5.js の「blendMode()」 単純な 重畳 ADD SCREEN ※
Canvas の「globalCompositeOperation」 という API による Adobe Photoshopなどにもある 画像合成の仕組み
エフェクト用動画をカメラ映像に合成
Web Bluetooth API ・ただし、caniuse.com を見てみると対応ブラウザは限定的 ・Bluetooth をブラウザから利用し、BLE対応デバイスとの間で 情報の読み書きをする機能等を提供してくれるAPI
ガジェットとPCとの間での通信 デバイスで検出したシェイクイベントをBLEによりPCへ PC (Chrome) toio+フライパン HTML + JavaScript BLE Web
Bluetooth API
あと物理的な 工作をした部分
力技でフライパンにデバイスを固定 ダンボールとテープ でくるんだものを、 紐でぐるぐる巻きに
展示で体験いただいた方の反応や 作品を作ってみての感想
嬉しいくらいの驚き・笑顔などの反応をもらえた ・炎の演出の部分 ・テーブルに触れたら火がつく!? ・フライパンを振るところ ・横から盛り上げる ⇒ 全力でフライパンを振る ⇒ フライパンを振る動作、音の演出などを
楽しんでもらえた ・体験後のおまけも ・小分けにしたポップコーン(本物)をプレゼント
Webの技術でできることは幅広い! 今後も楽しく利用していきたい!
余談:Meta Quest 3でのWebXRが気になってる ・カラーパススルー機能:ゴーグルのカメラ映像を利用できる ・WebXRのサンプルで床や壁の検出などができるのは確認済み 今月10/10の 発売日にゲット
終わり!