長年さくらのVPS上で運用してきたブログが、クレジットカード紛失による停止処理、からの支払い情報再設定の忘却により跡形もなくなくなってしまった関係で、またはてなに戻ってきました。というわけで一から再出発です。

性懲りもなくJavaScript Board

Nextremer高知AIラボで働いているのでAIネタを書きたいなと思っていましたが、お世話になっている村岡氏とお寿司を食べていたらPuck.jsを託されてしまったので、2年前のコレのノリよろしくGordon Williams氏並びにEspruinoプロジェクトの援護射撃をしてみたいと思います。

やること

Puck.jsのボタンを押したらブラウザでAlertが出る！それだけだ。 f:id:rocky_manobi:20161223211724g:plain

Puck.js とは

Puck.js - the JavaScript Bluetooth Beacon

さらっと紹介します。

JavaScrpitで制御できる、いや、JavaScriptでしか制御できないIoT向けマイコン Espruinoシリーズの最新作（2016.12.22時点）。ボード本体だけでなく、BLE(Bluetooth 5.0)、NFCの通信機構や、光、温度、磁気などを測定するセンサー、そしてなんと耐水の筐体までが標準で装備された、脱DIYモデル（なのか？）。ボードの大きさは直径35mmでコイン電池(CR2032)で動作するというのもすぐに何かに使えそう感を醸し出している。

開発もワイヤレスで行うことが前提で作られていて、初期から使っている身としては驚くばかり。もちろんGPIOも6個あるので、これまでのような開発も可能。 Kickstarter価格は1個28ポンド（3000円くらい？）。ちなみに今は日本でも購入できますが、、、高い。

Web BluetoothのためのMacとChromeの準備

いつもながら丁寧な公式チュートリアルを参考にすれば迷うことなくセットアップができると思いますが、以下の二つだけは押さえておきましょう。

MacでBLEが有効かどうかを確認する
- このMacについて > システムレポート > ハードウェア > Bluetooth とたどって、BlueTooth Low Energyが有効になっていればOK
- 2,3年以内に買ったMacならほぼ大丈夫でしょう。
ChromeでWeb Bluetoothを有効にする
- アドレスバーにchrome://flags/#enable-web-bluetoothと打ち込めば、あとはお分かりいただけると思います。

上記手順後、Chromeを再起動したのちに、Espruino Web IDEを起動します。最近ではchrome extension版ではなく、オンラインのやつもあるそうです。デバイス接続ボタンを押して、選択肢にWeb Bluetoothが表示されればPC側の設定はOKです。Espruino Web IDE がわからない方はこちらをどうぞ。

接続ができたら、コンソールにLED1.write(true)とでも打ち込んでみましょう。赤色LEDが光ってくれるはずです。

Puck.jsのボタンでブラウザを操作

それではいよいよボタンでブラウザを操作してみます。実際に動くDEMOはgithubページ に置いてあるので、Puck.jsをお持ちの方は使ってみましょう。

ソースコードはこちらです。

github.com

ポイント

Web Bluetoothを用いて、といっても実際に直でAPIを叩くことはありません。デバイスとの通信の細かいところをWrapしてくれているpuck.jsを使います。ものすごくシンプルです。

puck.jsを読み込む

  <script src="https://www.puck-js.com/puck.js"></script>

ボタンの状態をリスニングする処理**

Listener的なやり方があればと思ったのですが、見つけられなかったので定期的にボタンの状態を読み込む処理を実行することで実現しています。UARTを直接触って、puck.js側もちゃんとプログラミングしてやればもちろん可能ですが、今回は手軽さ重視で。

// 0.5 sec 毎にボタンの状態をチェックする
function startListening(){
    setInterval( function(){
      Puck.eval("BTN.read()",function(x) {
        console.log(x);
        if( x ) {
          // ボタンを押したらやってほしいことを書く
          alert("ボタンを押したな！！！？")
        }
      }); 
    },500);
}

ボタン情報取得を開始するボタン

このWeb Bluetooth、Chromeの実装ではセキュリティの関係で、ユーザ操作なしにBLE通信を開始することはできません。よって、制御開始ボタンを配置して、クリック時に制御処理が走るようにします。ボタンだらけですね。

<button onclick="startListening()">ボタン制御を開始</button>

おわりに

日本で決してスケールすることなく、初期からのコアなファンだけが使い続けているEspruinoシリーズ。いよいよエンジニア向けDIYきっととしてではなく、何かの製品に紛れ込んできても良いのでは？という期待をせざるをえませんね！

おまけ：せっかくなので音声認識STARTボタンとして

何かのプロダクトに使われるかもしれない、と言いましたがその最初の一つは弊社の対話プロダクト、MINARAIかもしれません。試しにCEATEC JAPAN2016でも展示した、高知県の観光案内を音声対話でやってくれる「ザキオとぶらり」に組み込んでみました。

ボタンを押したら音声認識をスタートさせる、の図

www.youtube.com

騒音ガヤガヤの中でも僕の質問を聞き取ってくれていますね。

騒音のある環境下における音声認識の大きな課題は、実はノイズよりも「どこからどこまでが答えるべきユーザ発話なのか」をハンドリングするところにあります。例えば近くで人が雑談していたり、館内放送が流れていたりすると、その声を認識してしゃべり始めてしまうわけです。現状弊社は、タッチパネルでボタンを押してから音声認識を開始したり、音声認識は動きっぱなしにしておいて、ボタン付きマイクのボタンを押している間以外は音量が０になるように制御したりして、この問題を避けています（もちろん研究レベルでは正面から戦っていますが...）。

ただ、タッチパネルは通常のディスプレイに比べて、現場に設置した場合の耐久性に難があることが、ボタン付きマイクは設置場所やマイクの形状などに制限が出てしまうことがデメリットになっています。と、いうわけで、こういった手軽に使えるIoTデバイスを用いたボタン&ソフト的アプローチは良い解決策になるかもしれません。

もしかしたら今後の弊社の展示物にこんなボタンがついたものが出てくるかも。。。。

rocky-manobi's blog

Puck.js で遊ぶ - Web Bluetoothを使って、ボタンでブラウザを操作する