「toio」の紹介とブラウザからの制御 〜Web Bluetooth API〜 / IoTLT vol.63

Transcript

1. 「toio」の紹介とブラウザからの制御 〜Web Bluetooth API〜 2020年5月19日 (火) IoTLT vol.63 @オンライン 　　豊田 陽介 ( @youtoy )
2. 豊田陽介（@youtoy） 自己紹介 • 職場： 某通信会社の研究所 • プライベートでの活動： IT系イベント主催・登壇・運営、多数参加 子ども向けの活動いろいろ（IT系以外も） • その他： ガジェット好き IoTLT vol.63 @オンライン 4/1〜4/30 での イベント参加数 　「37回」 （主催・スタッフ 　も多数含め）
3. コミュニティ活動関連など（2019年） IoTLT vol.63 @オンライン ▼ イベント主催・運営： 36回 　（月3回ペース） 　　主催 18回、運営 18回 ▼ 登壇・講師等： 31回（月2.5回ペース） 　　講師・ロングセッション等 16回、 　　 LT 13回 ▼ Qiita・ブログ等の記事： 58記事（月5記事ペース） 　　Qiita 25、note 25、ブログ 8 ▼ 子ども向けプログラミングサポート活動等： 51回（月4回ペース） ▼ イベント参加総数：（省略： たくさん） ▼ ガジェット購入数：（省略： たくさん） 【主な主催コミュニティ】 ・toio™で作ってみた！友の会（非公式） ・ビジュアルプログラミングIoTLT ・ビジュアルプログラミング交流会 ・ゆるメカトロ ・会社での業務外のIoTコミュニティ うち半分ほど（30記事）は アドベントカレンダー用で 12月中に書いたもの
4. ガジェット好き ↑とあるイベントにガジェット 　を持ち込んだ際の様子 （持っているもののごく一部） 話題のものがだいたい自宅にある 3Dプリンタ＠自宅 IoTLT vol.63 @オンライン ↑今日の話に出てくる toio Wio Terminal
5. toio の話へ
6. toio について IoTLT vol.63 @オンライン 【概要】 ・ソニー・インタラクティブエンタテインメント 　から発売 ・コア キューブ、コントローラー、コンソール、 　カートリッジ等がある 【（開発者ではない）ユーザとして】 ・タイトルをかえて様々楽しめる ⇒ カートリッジを差し替えてタイトルを変更 ⇒ コントローラーで操作、工作との組み合わせ、 　　PC を使わないプログラミング的なこと等 ⇒ LEGO とも組み合わせられる
7. 【利用事例】子ども向けの活動にて IoTLT vol.63 @オンライン リング型のコントローラーを使ったバトルなど
8. 【利用事例】toio のコミュニティで出展 IoTLT vol.63 @オンライン Tsukuba Mini Maker Faire 2020 にて タイトルスライドの動画の仕組みの作品を展示 出展ブースと 出展メンバー
9. 【利用事例】toio のコミュニティで出展 IoTLT vol.63 @オンライン 小さいお子さんにも楽しんでもらえました！
10. 開発関連の情報など IoTLT vol.63 @オンライン 専用マット（位置座標利用） ビジュアルプログラミング 公式ライブラリ「toio.js」 仕様公開 ・Scratch 3.0 をベースにした環境 ・詳細は、この後のLTにて（？） ・特殊な印刷がされた専用マット、 　toio の底面のセンサで読み取り ・絶対位置座標・向きが取得でき、 　位置指定で移動も可能 ・複数台の toio の位置関係を使った 　処理も書ける ・toio コア キューブの技術仕様は 　公開されている ・通信仕様を見て公式ライブラリ 　以外での実装も可能（BLE利用） ・node.js のパッケージ ・通信部分やハードウェア制御部分 　の実装を助けてくれる その他 ・細やかな動きができる ・LEGOをくっつけられる
11. 専用マット＋ビジュアルプログラミング IoTLT vol.63 @オンライン 移動先の目標となる座標指定を複数準備 ＋ ランダムな選択
12. 公式ライブラリ＋スマートスピーカー IoTLT vol.63 @オンライン Voiceflow を使った Alexaスキル開発 ＋ toio.js による制御
13. 今回の本題へ
14. 作ったもの： 音や声で toio を制御 IoTLT vol.63 @オンライン Teachable Machine による機械学習 ＋ Web Bluetooth API
15. 仕組みの部分
16. 音や声をトリガーにした制御 IoTLT vol.63 @オンライン ・詳細は Qiita の記事へ 　•Teachable Machine を使った音声からの任意のキーワードの検出　 （ブラウザ上で機械学習） - Qiita 　　https://qiita.com/youtoy/items/9096836e5d77274500ea ・Googleさん提供、ブラウザ上で機械学習ができる仕組み 　「Teachable Machine」
17. Web Bluetooth API IoTLT vol.63 @オンライン ・ただし、caniuse.com を見てみると対応ブラウザは限られる ・Bluetooth をブラウザから利用し、BLE対応デバイスとの間で 　情報の読み書きをする機能等を提供してくれるAPI
18. ココロキットでも使われてる IoTLT vol.63 @オンライン ・という話が 　「ビジュアルプログラミングIoTLT vol2」で話されてました
19. いろいろと出てくる用語・・・ IoTLT vol.63 @オンライン UUID GATT Characteristic Service
20. Web Bluetooth API での 3つの処理 IoTLT vol.63 @オンライン ・Read、Write、Notification Read Write Notification センサーの値を任意の タイミングで読み取る LED・モーターなどの 制御情報を送る デバイスから通知され る値を読み取る 定期的な送信や状態変 化の際に送信される等 •Web Bluetooth 　https://webbluetoothcg.github.io/web-bluetooth/ •DataView - JavaScript | MDN　 https://developer.mozilla.org/ja /docs/Web/JavaScript/Referenc e/Global_Objects/DataView •BufferSource - Web API | MDN 　 https://developer.mozilla.org/ja/docs/We b/API/BufferSource DataView ビューは ArrayBuffer の多様 な数値型を、プラットフォームのエンディ アンに関係なく読み書きするための低水準 インターフェイスを提供します。 BufferSource は、 ArrayBuffer または、 ArrayBufferView を提供する TypedArray の どちらかのオブジェクトを表現するために用 いられる typedef です。
21. Web Bluetooth API で処理をするサンプル IoTLT vol.63 @オンライン ・toio 用のコピペで動くサンプルがこちらに •toio を Web Bluetooth API で制御（「通知・読み出し・書き込み」を行う） - Qiita 　https://qiita.com/youtoy/items/791905964d871ac987d6 書き込みを行った事例 （LEDの点灯）
22. toio のコミュニティ IoTLT vol.63 @オンライン toioで作ってみた！友の会（非公式） Facebook https://www.facebook.com/groups/toiotomo/about/ connpass https://toiotomo.connpass.com/ https://bit.ly/fb_toiotomo https://bit.ly/cp_toiotomo
23. 終わり！