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
210
ハッカソンでWebの技術を使った作品を作ってみた 〜ブラウザで機械学習やデバイス制御など〜 / HTML5 9th Anniversary
you(@youtoy)
PRO
October 29, 2023
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
110
ブラウザで CircuitPython の開発:公式の「CircuitPython Code Editor」を試した / 【屋形船開催】IoT縛りの勉強会! IoTLT vol.126 @東京湾
you
PRO
0
110
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
2.6k
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
140
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
2.5k
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
170
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
310
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
230
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
130
Other Decks in Technology
See All in Technology
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.2k
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
160
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
170
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
220
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
210
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
1
390
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1k
20250913_JAWS_sysad_kobe
takuyay0ne
2
180
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
180
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
240
Practical Agentic AI in Software Engineering
uzyn
0
110
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.8k
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
525
40k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Designing Experiences People Love
moore
142
24k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Designing for Performance
lara
610
69k
Faster Mobile Websites
deanohume
309
31k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
The Pragmatic Product Professional
lauravandoore
36
6.9k
It's Worth the Effort
3n
187
28k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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の 発売日にゲット
終わり!