toio と Web Bluetooth API と 開発者向けマット（仮） / toiotomo vol5

「toioで作ってみた！友の会（非公式）第5回LT会」でのLT資料です。
　https://toiotomo.connpass.com/event/180408/

Transcript

1. toio と Web Bluetooth API と 開発者向けマット（仮） 2020年7月20日 (月) toioで作ってみた！友の会（非公式）第5回LT会 @オンライン 　　豊田 陽介 ( @youtoy )
2. 豊田陽介（@youtoy） 自己紹介 • 職場： 某通信会社の研究所 • プライベートでの活動： IT系イベント主催・登壇・運営、多数参加 子ども向けの活動いろいろ（IT系以外も） • その他： ガジェット好き toioで作ってみた！友の会（非公式）第5回LT会 @オンライン 話題のものが、たぶん だいたい自宅にある 「toioで作ってみた！友の会 （非公式）」以外にも、 ビジュアルプログラミング IoTLT など複数のコミュニ ティを単独・共同で主催
3. 自宅にある toio 【当初購入したセット】 ・バリューパック（トイオ・コレクション 　同梱版） ・ゲズンロイド 【追加購入1・2】 ・トイオ・コレクション 拡張パック ・コア キューブ（2台） ・コア キューブ専用充電器 toioで作ってみた！友の会（非公式）第5回LT会 @オンライン
4. イベントでも活用！ （2019年度）
5. 【利用事例1】子ども向けの活動にて リング型のコントローラーを使ったバトルなど
6. 【利用事例2】toio のコミュニティで出展 Tsukuba Mini Maker Faire 2020 にて音の機械学習 （Teachable Machine）等を使った作品を展示 出展ブースと 出展メンバー toioで作ってみた！友の会（非公式）第5回LT会 @オンライン
7. 出展した作品の試作段階 Teachable Machine による機械学習 ＋ Web Bluetooth API toioで作ってみた！友の会（非公式）第5回LT会 @オンライン
8. 【利用事例2】toio のコミュニティで出展 小さいお子さんにも楽しんでもらえました！ toioで作ってみた！友の会（非公式）第5回LT会 @オンライン
9. 使った技術1：音や声をトリガーにした制御 ・詳細は Qiita の記事へ 　•Teachable Machine を使った音声からの任意のキーワードの検出 　　（ブラウザ上で機械学習） - Qiita 　　https://qiita.com/youtoy/items/9096836e5d77274500ea 　•toio を音で制御してみた（Audio用の Teachable Machine で 　　ベルやタンバリンの音を機械学習） - Qiita 　　https://qiita.com/youtoy/items/37f70bb4ce630e6cbd92 ・Googleさん提供、ブラウザ上で機械学習ができる仕組み 　「Teachable Machine」 toioで作ってみた！友の会（非公式）第5回LT会 @オンライン
10. 使った技術2：ブラウザからの制御 【Web Bluetooth API】 ・Bluetooth をブラウザから利用し、BLE対応デバイスとの間で 　情報の読み書きをする機能等を提供してくれるAPI toioで作ってみた！友の会（非公式）第5回LT会 @オンライン ただし caniuse.com を 見てみると、対応ブラウザ は限られる
11. それぞれを選んだ理由 Teachable Machine ⇒ブラウザで簡単に機械学習ができる仕組みを使ってみたかった 　（使ってみてから、toio との連携を試してみた流れ） toioで作ってみた！友の会（非公式）第5回LT会 @オンライン Web Bluetooth API ⇒ブラウザ上で使える API を使ってみたかった（ブラウザが 　あれば、特殊な環境の準備は不用） 　　　　　　　　　　　＋ 　Teachable Machine のサンプルと簡単に組み合わせられる
12. 【他に試したこと】 入手当初や 最近のキャンペーン関連
13. Node.js での開発（＋スマートスピーカー） toio.js による制御 ＋ Voiceflow を使った Alexaスキル開発 toioで作ってみた！友の会（非公式）第5回LT会 @オンライン ビジュアルプログラミング で開発できるもの 他には、micro:bit との 組み合わせを試したり
14. ビジュアルプログラミングでの開発 移動先の目標となる座標指定を複数準備 ＋ ランダムな選択 キャンペーンで入手した 開発者向けマット（仮）
15. タイトルにあった 3つを組み合わせた話へ
16. 開発者向けマット（仮）＋α をゲット！ やりたかったけど、手をだせてなかったことに着手 toioで作ってみた！友の会（非公式）第5回LT会 @オンライン •【JavaScript作例集】キューブがぐるぐる回るデモ解説｜toio™公式 　https://note.toio.io/n/n615e5ed8552b
17. 追加入手分を含めた 4台でやりたい！ （まずは2台から）
18. 以前の作品 ＋ 開発者向けマット（仮） 専用マット上での2台の追跡の動作を音や声で制御 toioで作ってみた！友の会（非公式）第5回LT会 @オンライン
19. 以前の作品の別バージョン 音や声による制御の部分を、スマートスピーカー連携に変更 toioで作ってみた！友の会（非公式）第5回LT会 @オンライン
20. Mac＋ ブラウザだと なぜか 3台までしか・・・ 台数を増やすのには Node.js？
21. 今後は、 10月に向けて作品作り！ Maker Faire Tokyo 2020 への出展に向けて
22. 終わり！