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の技術を使った作品を作ってみた 〜ブラウザで機械学習やデバイス制御など〜 /...
Search
you(@youtoy)
PRO
October 29, 2023
Technology
0
160
ハッカソンでWebの技術を使った作品を作ってみた 〜ブラウザで機械学習やデバイス制御など〜 / HTML5 9th Anniversary
you(@youtoy)
PRO
October 29, 2023
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
51
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
120
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
250
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
56
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
470
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
220
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
2.4k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
430
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.5k
Other Decks in Technology
See All in Technology
バクラクにおける可観測性向上の取り組み
yuu26
2
280
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
140
What's in a Postgres major release? An analysis of contributions in the v17 timeframe | Claire Giordano | PGConf EU 2024
clairegiordano
1
700
Nix入門パラダイム編
asa1984
2
170
Jamstack でリニューアルするグリーグループのメディア
gree_tech
PRO
2
230
Creating Intuitive Developer Tool in Swift
giginet
PRO
0
600
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
120
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
110
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
17
2.9k
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
21
6k
CI/CDやテスト自動化の開発プロジェクトへの適用
megascus
3
680
いまならこう作りたい AWSコンテナ[本格]入門ハンズオン 〜2024年版 ハンズオンの構想〜
horsewin
3
390
Featured
See All Featured
Statistics for Hackers
jakevdp
796
220k
How STYLIGHT went responsive
nonsquared
95
5.1k
Building Adaptive Systems
keathley
38
2.2k
Typedesign – Prime Four
hannesfritz
39
2.4k
YesSQL, Process and Tooling at Scale
rocio
167
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
4 Signs Your Business is Dying
shpigford
180
21k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
The Cult of Friendly URLs
andyhume
78
6k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
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の 発売日にゲット
終わり!