#toio を Alexa や micro:bit から操作する 〜概要編〜（JavaScriptライブラリを使ってみた）

この記事は、[toio（トイオ）のJavaScriptライブラリ](https://github.com/toio/toio.js/)が公開されたのを受けて、micro:bit や Alexa を使った toio の操作を行ってみた話の概要です。

まずは概要を書いたこの記事を書いて、詳細は別記事に分けようと思っています。

## はじめに
### toio（トイオ）とは

[toio（トイオ）](https://toio.io/about.html)は、ソニー・インタラクティブエンタテインメントさんが提供しているロボットトイです。
　
概要は、下記の公式ページなどをご覧ください。。
●小さなキューブ型ロボットトイ・toio（トイオ）
　https://toio.io/

### toio のJavaScriptライブラリについて

元々、上記の動画にあるような使い方をするものでしたが、最近、この toio のJavaScriptライブラリが公開されたことにより、テキストプログラミングで制御できるようになりました。

 ●toio/toio.js: Library for controlling toio™Core Cube
 　https://github.com/toio/toio.js/

node.js の他のライブラリ等と組み合わせると、色々なことができそうだったので、とりあえず3つほど試してみました。

## toio のJavaScriptライブラリで試したこと

### toio のキーボード操作を行うサンプル

最初は、3つある公式サンプル（※2019年6月のライブラリ公開時点）のうちの1つ「[keyboard-control](https://github.com/toio/toio.js/tree/master/examples/keyboard-control)」です。
導入手順は、[JavaScriptライブラリの公式ページ](https://github.com/toio/toio.js/)に記載があるとおり「gitでのリポジトリのクローン、yarnによるインストール・ビルド」といった流れです。

それらを試した結果は以下のとおりです。

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> の JavaScriptライブラリの<br>キーボードコントロールのサンプルを少し書きかえ。<br><br>スピードの値を減らして動かしてみました。 <a href="https://t.co/tBB0GOgivI">pic.twitter.com/tBB0GOgivI</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1139566156090466306?ref_src=twsrc%5Etfw">2019年6月14日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

プログラムを実行すると、toio と PC が接続され、PCのキーボードの矢印キーを押すと、toio がそれに連動して動きます。
このとき、公式サンプルのスピードのパラメータを、少し調整したりしてみました。

### micro:bit のボタン押下で toio を操作

次に、何か別のデバイスとの連携をしてみたいと思い、micro:bit をコントローラにするようなものを作ってみました。
それを試したときの様子が、以下の動画です。

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> のJavaScriptライブラリを試したやつの3つ目。<br>micro:bit と組み合わせてみました。<br><br>micro:bit の Aボタンで前進、Bボタンで後退します。 <a href="https://t.co/GZsPt60r9M">pic.twitter.com/GZsPt60r9M</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1139581242435751936?ref_src=twsrc%5Etfw">2019年6月14日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

micro:bit についている2つのボタン（A・Bボタン）を押すと、toio が前進したり後退したりします。

micro:bit のボタン押下を toio ヘと伝えている部分は、シリアル通信です。
node.js のプログラムの中では「[serialport](https://www.npmjs.com/package/serialport)」を利用しており、micro:bit と PC との間はUSB接続での通信です。
micro:bit 側のプログラムは、[MakeCodeエディター](https://makecode.microbit.org/)を使って、以下のような非常にシンプルな仕組みを作っています。

<img width="438" alt="micro:bitでのシリアル通信" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/fdf5477c-89aa-0b06-2bd6-1bb6ef04333b.jpeg">

これにより、miciro:bit 上のボタン押下によって異なる文字列が、シリアル通信で PC に送られることになります。これを受け取る部分と、上記で試した公式サンプル「[keyboard-control](https://github.com/toio/toio.js/tree/master/examples/keyboard-control)」の toio を動かす部分を組み合わせて、micro:bit を使った toio の操作を実現しました。

### Alexa を使った声での toio の操作

次に、Amazon の AIアシスタントである Alexa と組み合わせてみました。
Alexaスキル（スマホでいうアプリ的なもの）を作り、それと公式サンプル「[keyboard-control](https://github.com/toio/toio.js/tree/master/examples/keyboard-control)」の toio を動かす部分を組み合わせました。

まずは作ってみたものをご覧ください。

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">ここ最近試した２つを組み合わせ。<br><br>組み合わせたのは、<a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> のJavaScriptライブラリと、<a href="https://twitter.com/hashtag/voiceflow?src=hash&amp;ref_src=twsrc%5Etfw">#voiceflow</a> （Alexaスキル）です。<br><br>声で toio を動かしてみました！<a href="https://twitter.com/hashtag/voicedg?src=hash&amp;ref_src=twsrc%5Etfw">#voicedg</a> <a href="https://t.co/GHXTxq0Lnv">pic.twitter.com/GHXTxq0Lnv</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1140976786429247490?ref_src=twsrc%5Etfw">2019年6月18日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Amazon の画面付スマートスピーカー Echo Spot で Alexa を動作させています。
最初に、今回用に作った Alexaスキルを呼び出し、その後、声で「前進・後退・右回転」といった動作を指示して、toio を動かしています。

ここで利用した仕組みなどを、以下で簡単に記載していきます。

### voiceflow（GUIベースでのAlexaスキル開発）

Alexaスキルは、node.js や Python で開発できますが、今回は、GUIベースでスキル開発が行える「voiceflow」を利用しています。以下のツイートにあるような、様々な機能を持ったブロックを配置して、それらに設定を付与し、ブロック間を線でつないでいく流れで開発します。

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/voiceflow?src=hash&amp;ref_src=twsrc%5Etfw">#voiceflow</a> で、Alexaスキルからのライン通知を作ったやつ。<br>こんな構成で、オレンジで囲った部分が、LINE通知用です。<br>（※ LEDを光らせる、とかある部分は別の実験用です）<a href="https://twitter.com/hashtag/voicedg?src=hash&amp;ref_src=twsrc%5Etfw">#voicedg</a> <a href="https://t.co/EjbZ4ZXObE">pic.twitter.com/EjbZ4ZXObE</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1140411477360123904?ref_src=twsrc%5Etfw">2019年6月17日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

余談ですが、この voiceflow にある外部APIとの連携の仕組み（自分が使ったのは HTTPリクエストの POSTメソッドの利用）で、Alexa から LINE に通知を送ったり、Wio NODE というデバイスにつないだ LED のテープを光らせたり消したり、というものを簡単に作れたりしました。

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">昨日のイベントで初めて使った <a href="https://twitter.com/hashtag/voiceflow?src=hash&amp;ref_src=twsrc%5Etfw">#voiceflow</a> 。<br><br>イベントで講師をされていた <a href="https://twitter.com/mochan_tk?ref_src=twsrc%5Etfw">@mochan_tk</a> さんに、外部API 連携に使うやつがメニュー内のどれなのか、だけは聞いてたけど、<br>自宅で詳細を見て試したら、あっさりと、IFTTT経由でLINEアプリへの通知が作れてしまった（Webhook＋LINE Notify）。<a href="https://twitter.com/hashtag/voicedg?src=hash&amp;ref_src=twsrc%5Etfw">#voicedg</a> <a href="https://t.co/3IPNKZqom7">pic.twitter.com/3IPNKZqom7</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1140399479801012226?ref_src=twsrc%5Etfw">2019年6月16日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">また、 <a href="https://twitter.com/hashtag/voiceflow?src=hash&amp;ref_src=twsrc%5Etfw">#voiceflow</a> のお試しスキルで、外部APIを使うものを作ってみました。<br><br>この前のものは、IFTTT経由でのLINEアプリへの通知（Webhook＋LINE Notify）をやるものでしたが、<br>今回は、Wio NODE につながった LEDテープを、インターネット経由で光らせたり、消したり、というものです。<a href="https://twitter.com/hashtag/voicedg?src=hash&amp;ref_src=twsrc%5Etfw">#voicedg</a> <a href="https://t.co/uMjaO0XApv">pic.twitter.com/uMjaO0XApv</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1140606060719304704?ref_src=twsrc%5Etfw">2019年6月17日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

今回も、この HTTPリクエストを送る機能を含んだ Alexaスキルを作りました。

### ngrok（自分の PC内で立ち上げたローカルサーバに外部からアクセス）

Alexaスキルからの HTTPリクエストを受け取り、それを toio に伝える仕組みが必要です。
とりあえず簡単に試す、というのを主目的として「[ngrok](https://ngrok.com/)」を使いました。これを使うと、自分のローカルPC内で動作させたサーバに、外部からアクセスさせることができるようになります。

今回は、Alexaスキルからの HTTPリクエストを、自分の PC内で立ち上げたローカルサーバで受信できるようにします。そのローカルサーバを node.js を使って動作させ、また、それと合わせて自分の PC から toio を操作するプログラムも node.js で動かし、これらを組み合わせました。

## おわりに
今回、toio の JavaScriptライブラリの公式サンプルの1つを流用して、micro:bit や Alexa を toio と組み合わせてみました。
他のサンプル2つで使われている仕組みや、toio を動かす仕組み以外のものは試せていないため、それらも試してみようと思います。

また、今回は試した内容の概要のみを記載していて、プログラムの詳細などを一部省略しているので、そのあたりの補足も別途行えればと思います。