Webの技術でできる様々なこと（機械学習・物理演算・デバイス連携など） / HTML5 7th Anniversary

by you（@youtoy）

Slide 1

Slide 1 text

Webの技術でできる様々なこと（機械学習・物理演算・デバイス連携など） 2021年11月6日 (土) HTML5 7th Anniversary @オンライン　　豊田陽介 ( @youtoy )

Slide 2

Slide 2 text

豊田陽介（@youtoy）自己紹介普段は、某通信会社勤務 Microsoft MVP （2021年10月より）ガジェット好きその他 IT系イベント主催、運営や登壇なども子ども向けの活動いろいろ（IT系以外も）プライベートでの活動ビジュアルプログラミング・ IoTに関するコミュニティなど

Slide 3

Slide 3 text

今日の話題

Slide 4

Slide 4 text

Webの技術で様々な仕組みを扱う話（ブラウザ上で動きます）

Slide 5

Slide 5 text

画像の機械学習音の機械学習 VTuber的なこと物理演算エンジン WebXR IoT系ガジェット系

Slide 6

Slide 6 text

ガジェットを扱う＋音の機械学習

Slide 7

Slide 7 text

ブラウザで音の認識とガジェットの制御 Teachable Machine（音を対象）＋ Web Bluetooth API

Slide 8

Slide 8 text

構成・仕組みの概要機械学習で音に反応する仕組み＋ BLEによる無線通信 PC （Chromo・　内蔵マイク） BLE HTML + JavaScript

Slide 9

Slide 9 text

構成・仕組みの概要機械学習で音に反応する仕組み＋ BLEによる無線通信 PC （Chromo・　内蔵マイク） toio＋専用マット BLE ハンドベル・卓上ベル・声音・声 Web Bluetooth API Teachable Machine （音の機械学習） HTML + JavaScript

Slide 10

Slide 10 text

【技術の部分1】音の機械学習モデル作成＋推論

Slide 11

Slide 11 text

Teachable Machine（画像・音声・ポーズ） Googleさんがオンラインで提供している仕組み ⇒ ブラウザ上の操作で学習ができて推論のお試しも

Slide 12

Slide 12 text

Webサイト上の操作で音を録音して学習マイクボタンを押す録音ボタンを押し、2秒の間に声・音を録音ここに録音データが並べばOK （現状、データ数が不足　⇒ 8秒分以上必要）

Slide 13

Slide 13 text

Webサイト上で音を聞き分ける処理の確認も声・音をだすと、画面右下の部分でリアルタイムの結果表示

Slide 14

Slide 14 text

ブラウザ上で機械学習モデルが作れる！？裏側の仕組みは TensorFlow.js で実装

Slide 15

Slide 15 text

去年・今年と小中学生向けにコンテストも Teachable Machine の機械学習モデルが扱える、独自拡張版の Scratch を使ってなど画像を対象にした機械学習や、 micro:bit での電子工作の組み合わせも参照元： https://www.watch.impress.co.jp/kodomo_it/news/1362765.html

Slide 16

Slide 16 text

音を覚えさせる ↓ 作成した機械学習モデルを JavaScript用に出力

Slide 17

Slide 17 text

【技術の部分2】無線通信によるガジェットの制御

Slide 18

Slide 18 text

Web Bluetooth API による無線通信の例・ブラウザから BLE 対応デバイスを制御 ⇒ toio・M5Stack・micro:bit 等に対して使った例手の動きに連動した 6台の toio の同時制御 toio の姿勢角（ロール・ピッチ・　ヨー）のグラフ化 M5Stack Core2 へ文字送信・表示、画面の色変更

Slide 19

Slide 19 text

デバイス系のAPIについてはこんな話も ●Appleがプライバシ上の理由から、NFC、Bluetooth、他14のWeb APIの実装を拒否　https://www.infoq.com/jp/news/2020/07/apple-ﬁngerprinting-privacy/ ●Mozilla Speciﬁcation Positions 　https://mozilla.github.io/standards-positions/ 自分に閉じて使うパターンではない場合、特に注意！（ユーザが許可する操作なしに利用できないものには　なっていますが...）

Slide 20

Slide 20 text

ガジェットを扱う別事例

Slide 21

Slide 21 text

ブラウザとガジェットとの間の有線通信

Slide 22

Slide 22 text

有線でのデータ取得（シリアル通信の例）ブラウザ上で実行可能

Slide 23

Slide 23 text

【技術の部分】シリアル通信を扱う

Slide 24

Slide 24 text

シリアル通信のための下準備ブラウザ上で動く開発環境で micro:bit のプログラムを作成して、micro:bit を PC との間で USB で通信

Slide 25

Slide 25 text

JavaScript でセンサーの値の受信処理などを Web Serial API（＋グラフ描画）

Slide 26

Slide 26 text

グラフ描画はライブラリを使って

Slide 27

Slide 27 text

学習済み機械学習モデルを使った画像認識

Slide 28

Slide 28 text

ブラウザ上で両手の認識（＋3D描画） MediaPipe Hands（両手の認識）＋ p5.js（WebGLベースの3D描画）

Slide 29

Slide 29 text

ブラウザ上の処理でVTuber的なこと MediaPipe Holistic（人の顔や姿勢の認識）＋ p5.js（画像表示系の処理）

Slide 30

Slide 30 text

【技術の部分の話】人を対象にした画像認識

Slide 31

Slide 31 text

MediaPipe ・Googleさんが提供している機械学習を使った仕組み・Python用やスマホ用、C++用などが提供されている・MediaPipe の JavaScript版（TensorFlow.jsベース）　・Face Mesh 　・Face Detection 　・Hands 　・Holistic 　・Pose 　・Selﬁe Segmentation 　　など...

Slide 32

Slide 32 text

認識できる対象の例（一部抜粋） Hands Face Mesh 参照元： https://google.github.io/mediapipe/

Slide 33

Slide 33 text

認識できる対象の例（一部抜粋） Holistic Selﬁe Segmentation 参照元： https://google.github.io/mediapipe/

Slide 34

Slide 34 text

JavaScript版を使うとブラウザ上で処理が可能に

Slide 35

Slide 35 text

【技術の部分の話】 2D・3D描画

Slide 36

Slide 36 text

複数の画像を切り替えて表示 3Dの立方体を描画（＋サイズ・位置の変更等）

Slide 37

Slide 37 text

p5.js メディアアート系などで有名な Processing の JavaScript版 ●home | p5.js 　https://p5js.org/

Slide 38

Slide 38 text

●p5.js Web Editor 　https://editor.p5js.org/ ●OpenProcessing 　https://openprocessing.org/ オンラインで開発できる環境も

Slide 39

Slide 39 text

ブラウザ上で物理シミュレーション

Slide 40

Slide 40 text

重力や衝突・摩擦などを計算してくれるドラッグ操作を行うと軌跡の上で円が生成される

Slide 41

Slide 41 text

【技術の部分】物理演算を行う

Slide 42

Slide 42 text

ブラウザ上で使える物理演算エンジンの1つ Matter.js https://brm.io/matter-js/ 物体の衝突・加速度・摩擦などといった要素を、良い感じに扱ってくれる

Slide 43

Slide 43 text

サンプルでたくさんの例が見られる Matter.js Demo https://brm.io/matter-js/demo/

Slide 44

Slide 44 text

物理シミュレーションに画像認識などを組み合わせる

Slide 45

Slide 45 text

物理演算エンジンエンジン＋手の認識

Slide 46

Slide 46 text

手の認識はMediaPipeではない別のもので Handtrack.js https://github.com/victordibia/handtrack.js/ 「手を開いた/閉じた」というのを認識する処理が最初から入っている

Slide 47

Slide 47 text

Webの技術を使ってブラウザ上で様々な処理を扱って楽しめる！

Slide 48

Slide 48 text

終わり！