Slide 1

Slide 1 text

toio と Web Bluetooth API と 開発者向けマット(仮) 2020年7月20日 (月) toioで作ってみた!友の会(非公式)第5回LT会 @オンライン   豊田 陽介 ( @youtoy )

Slide 2

Slide 2 text

豊田陽介(@youtoy) 自己紹介 ● 職場: 某通信会社の研究所 ● プライベートでの活動: IT系イベント主催・登壇・運営、多数参加 子ども向けの活動いろいろ(IT系以外も) ● その他: ガジェット好き toioで作ってみた!友の会(非公式)第5回LT会 @オンライン 話題のものが、たぶん だいたい自宅にある 「toioで作ってみた!友の会 (非公式)」以外にも、 ビジュアルプログラミング IoTLT など複数のコミュニ ティを単独・共同で主催

Slide 3

Slide 3 text

自宅にある toio 【当初購入したセット】 ・バリューパック(トイオ・コレクション  同梱版) ・ゲズンロイド 【追加購入1・2】 ・トイオ・コレクション 拡張パック ・コア キューブ(2台) ・コア キューブ専用充電器 toioで作ってみた!友の会(非公式)第5回LT会 @オンライン

Slide 4

Slide 4 text

イベントでも活用! (2019年度)

Slide 5

Slide 5 text

【利用事例1】子ども向けの活動にて リング型のコントローラーを使ったバトルなど

Slide 6

Slide 6 text

【利用事例2】toio のコミュニティで出展 Tsukuba Mini Maker Faire 2020 にて音の機械学習 (Teachable Machine)等を使った作品を展示 出展ブースと 出展メンバー toioで作ってみた!友の会(非公式)第5回LT会 @オンライン

Slide 7

Slide 7 text

出展した作品の試作段階 Teachable Machine による機械学習 + Web Bluetooth API toioで作ってみた!友の会(非公式)第5回LT会 @オンライン

Slide 8

Slide 8 text

【利用事例2】toio のコミュニティで出展 小さいお子さんにも楽しんでもらえました! toioで作ってみた!友の会(非公式)第5回LT会 @オンライン

Slide 9

Slide 9 text

使った技術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会 @オンライン

Slide 10

Slide 10 text

使った技術2:ブラウザからの制御 【Web Bluetooth API】 ・Bluetooth をブラウザから利用し、BLE対応デバイスとの間で  情報の読み書きをする機能等を提供してくれるAPI toioで作ってみた!友の会(非公式)第5回LT会 @オンライン ただし caniuse.com を 見てみると、対応ブラウザ は限られる

Slide 11

Slide 11 text

それぞれを選んだ理由 Teachable Machine ⇒ブラウザで簡単に機械学習ができる仕組みを使ってみたかった  (使ってみてから、toio との連携を試してみた流れ) toioで作ってみた!友の会(非公式)第5回LT会 @オンライン Web Bluetooth API ⇒ブラウザ上で使える API を使ってみたかった(ブラウザが  あれば、特殊な環境の準備は不用)            +  Teachable Machine のサンプルと簡単に組み合わせられる

Slide 12

Slide 12 text

【他に試したこと】 入手当初や 最近のキャンペーン関連

Slide 13

Slide 13 text

Node.js での開発(+スマートスピーカー) toio.js による制御 + Voiceflow を使った Alexaスキル開発 toioで作ってみた!友の会(非公式)第5回LT会 @オンライン ビジュアルプログラミング で開発できるもの 他には、micro:bit との 組み合わせを試したり

Slide 14

Slide 14 text

ビジュアルプログラミングでの開発 移動先の目標となる座標指定を複数準備 + ランダムな選択 キャンペーンで入手した 開発者向けマット(仮)

Slide 15

Slide 15 text

タイトルにあった 3つを組み合わせた話へ

Slide 16

Slide 16 text

開発者向けマット(仮)+α をゲット! やりたかったけど、手をだせてなかったことに着手 toioで作ってみた!友の会(非公式)第5回LT会 @オンライン ●【JavaScript作例集】キューブがぐるぐる回るデモ解説|toio™公式  https://note.toio.io/n/n615e5ed8552b

Slide 17

Slide 17 text

追加入手分を含めた 4台でやりたい! (まずは2台から)

Slide 18

Slide 18 text

以前の作品 + 開発者向けマット(仮) 専用マット上での2台の追跡の動作を音や声で制御 toioで作ってみた!友の会(非公式)第5回LT会 @オンライン

Slide 19

Slide 19 text

以前の作品の別バージョン 音や声による制御の部分を、スマートスピーカー連携に変更 toioで作ってみた!友の会(非公式)第5回LT会 @オンライン

Slide 20

Slide 20 text

Mac+ ブラウザだと なぜか 3台までしか・・・ 台数を増やすのには Node.js?

Slide 21

Slide 21 text

今後は、 10月に向けて作品作り! Maker Faire Tokyo 2020 への出展に向けて

Slide 22

Slide 22 text

終わり!