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

1. Webの技術でできる様々なこと （機械学習・物理演算・デバイス連携など） 2021年11月6日 (土) HTML5 7th Anniversary @オンライン 　　豊田 陽介 ( @youtoy )
2. 豊田陽介（@youtoy） 自己紹介 普段は、某通信会社勤務 Microsoft MVP （2021年10月より ） ガジェット好き その他 IT系イベント主催、運営や登壇なども 子ども向けの活動いろいろ（IT系以外も） プライベートでの活動 ビジュアルプログラミング・ IoTに関するコミュニティなど
3. 今日の話題
4. Webの技術で 様々な仕組みを扱う話 （ブラウザ上で動きます）
5. 画像の機械学習 音の機械学習 VTuber的なこと 物理演算エンジン WebXR IoT系 ガジェット系
6. ガジェットを扱う ＋ 音の機械学習
7. ブラウザで音の認識とガジェットの制御 Teachable Machine（音を対象） ＋ Web Bluetooth API
8. 構成・仕組みの概要 機械学習で音に反応する仕組み ＋ BLEによる無線通信 PC （Chromo・ 　内蔵マイク） BLE HTML + JavaScript
9. 構成・仕組みの概要 機械学習で音に反応する仕組み ＋ BLEによる無線通信 PC （Chromo・ 　内蔵マイク） toio＋専用マット BLE ハンドベル・ 卓上ベル・声 音・声 Web Bluetooth API Teachable Machine （音の機械学習） HTML + JavaScript
10. 【技術の部分1】 音の機械学習モデル作成 ＋推論
11. Teachable Machine（画像・音声・ポーズ） Googleさんがオンラインで提供している仕組み ⇒ ブラウザ上の操作で学習ができて推論のお試しも
12. Webサイト上の操作で音を録音して学習 マイクボタン を押す 録音ボタンを 押し、2秒の間に 声・音を録音 ここに録音データ が並べばOK （現状、データ数が不足 　⇒ 8秒分以上必要）
13. Webサイト上で音を聞き分ける処理の確認も 声・音をだすと、画面右下の 部分でリアルタイムの結果表示
14. ブラウザ上で機械学習モデルが作れる！？ 裏側の仕組みは TensorFlow.js で 実装
15. 去年・今年と小中学生向けにコンテストも Teachable Machine の機械学習 モデルが扱える、独自拡張版の Scratch を使ってなど 画像を対象にした機械学習や、 micro:bit での電子工作の 組み合わせも 参照元： https://www.watch.impress.co.jp/kodomo_it/news/1362765.html
16. 音を覚えさせる ↓ 作成した機械学習モデルを JavaScript用に出力
17. 【技術の部分2】 無線通信による ガジェットの制御
18. Web Bluetooth API による無線通信の例 ・ブラウザから BLE 対応デバイスを制御 ⇒ toio・M5Stack・micro:bit 等に対して使った例 手の動きに連動した 6台の toio の同時制御 toio の姿勢角 （ロール・ピッチ・ 　ヨー）のグラフ化 M5Stack Core2 へ 文字送信・表示、 画面の色変更
19. デバイス系のAPIについてはこんな話も •Appleがプライバシ上の理由から、NFC、Bluetooth、他14のWeb APIの実装を拒否 　https://www.infoq.com/jp/news/2020/07/apple-fingerprinting-privacy/ •Mozilla Specification Positions 　https://mozilla.github.io/standards-positions/ 自分に閉じて使うパターンではない場合、特に注意！ （ユーザが許可する操作なしに利用できないものには 　なっていますが...）
20. ガジェットを扱う 別事例
21. ブラウザとガジェット との間の有線通信
22. 有線でのデータ取得（シリアル通信の例） ブラウザ上で実行可能
23. 【技術の部分】 シリアル通信を扱う
24. シリアル通信のための下準備 ブラウザ上で動く開発環境で micro:bit のプログラムを作成 して、micro:bit を PC との間 で USB で通信
25. JavaScript でセンサーの値の受信処理などを Web Serial API（＋グラフ描画）
26. グラフ描画はライブラリを使って
27. 学習済み機械学習モデル を使った画像認識
28. ブラウザ上で両手の認識（＋3D描画） MediaPipe Hands（両手の認識） ＋ p5.js（WebGLベースの3D描画）
29. ブラウザ上の処理でVTuber的なこと MediaPipe Holistic（人の顔や 姿勢の認識） ＋ p5.js（画像表示系の処理）
30. 【技術の部分の話】 人を対象にした画像認識
31. MediaPipe ・Googleさんが提供している機械学習を使った仕組み ・Python用やスマホ用、C++用などが提供されている ・MediaPipe の JavaScript版（TensorFlow.jsベース） 　・Face Mesh 　・Face Detection 　・Hands 　・Holistic 　・Pose 　・Selfie Segmentation 　　など...
32. 認識できる対象の例（一部抜粋） Hands Face Mesh 参照元： https://google.github.io/mediapipe/
33. 認識できる対象の例（一部抜粋） Holistic Selfie Segmentation 参照元： https://google.github.io/mediapipe/
34. JavaScript版を使うと ブラウザ上で処理が可能に
35. 【技術の部分の話】 2D・3D描画
36. 複数の画像を切り替えて表示 3Dの立方体を描画 （＋サイズ・位置の変更等）
37. p5.js メディアアート系などで有名な Processing の JavaScript版 •home | p5.js 　https://p5js.org/
38. •p5.js Web Editor 　https://editor.p5js.org/ •OpenProcessing 　https://openprocessing.org/ オンラインで開発 できる環境も
39. ブラウザ上で 物理シミュレーション
40. 重力や衝突・摩擦などを計算してくれる ドラッグ操作を行うと軌跡 の上で円が生成される
41. 【技術の部分】 物理演算を行う
42. ブラウザ上で使える物理演算エンジンの1つ Matter.js https://brm.io/matter-js/ 物体の衝突・加速度・摩擦 などといった要素を、良い 感じに扱ってくれる
43. サンプルでたくさんの例が見られる Matter.js Demo https://brm.io/matter-js/demo/
44. 物理シミュレーション に画像認識などを組み合わせる
45. 物理演算エンジンエンジン＋手の認識
46. 手の認識はMediaPipeではない別のもので Handtrack.js https://github.com/victordibia/handtrack.js/ 「手を開いた/閉じた」という のを認識する処理が最初から 入っている
47. Webの技術を使って ブラウザ上で様々な処理を 扱って楽しめる！
48. 終わり！