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
110
ハッカソンでWebの技術を使った作品を作ってみた 〜ブラウザで機械学習やデバイス制御など〜 / HTML5 9th Anniversary
you(@youtoy)
PRO
October 29, 2023
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
56
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
120
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
1.6k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
170
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.4k
AI・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI、機械学習 / 20231201
you
PRO
2
2.1k
p5.js・p5playを使った体験イベントに参加した子達が手を動かすこと・考えることを楽しんでくれた話 / p5.js勉強会(第九回) / 20231126
you
PRO
0
53
LINEでのコミュニケーションにマスコットキーホルダーを使ってみる / LINEを使ったLT大会 #5
you
PRO
0
2.3k
イベントで大活躍の電子ペーパー名札 〜M5PaperとUIFlow+α〜 / #ヒーローズリーグ 2023 予選 in 第二部
you
PRO
0
96
Other Decks in Technology
See All in Technology
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
390
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
170
MapLibreとAmazon Location Service
dayjournal
1
160
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
180
いつか使うかも貯金してたらめちゃめちゃ機能が増えてた話
riyaamemiya
0
450
One engineer company with Ruby on Rails
rstankov
2
320
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
230
require(ESM)とECMAScript仕様
uhyo
4
860
いいたいことちゃんという
tkengo
0
110
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
400
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
320
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
260
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
Bash Introduction
62gerente
604
210k
How GitHub (no longer) Works
holman
304
140k
Done Done
chrislema
178
15k
Testing 201, or: Great Expectations
jmmastey
28
6.4k
Agile that works and the tools we love
rasmusluckow
325
20k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
In The Pink: A Labor of Love
frogandcode
138
21k
YesSQL, Process and Tooling at Scale
rocio
164
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
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の 発売日にゲット
終わり!