株式会社LIGLIGならできるおもしろいこと。ロボット(機械工学)シェアこんにちは、ガジェット好きなエンジニアののびすけです。ファン待望の続編が昨年12月18日に全世界で封切りされてから、ものすごい盛り上がりを見せましたよね。最近やっと熱気が落ち着いてきた気がします。僕も12月に見てきましたが、かなり面白かったです。ネタバレは良くないので本編の内容は書きません!(笑)前段はこれくらいにして、今日はJavaScriptを使い、エピソード7に新しく登場したドロイド「BB-8」をプログラムから制御してみたいと思います。BB-8とは?BB-8は『スター・ウォーズ/フォースの覚醒(エピソード7)』で初登場したドロイド(ロボット)です。従来の『スター・ウォーズ』シリーズで登場するドロイドといえば、C-3POやR2-D2が代表的でした。エピソード7では心機一転して新型ドロイドのBB-8が登場し、その可愛らしい姿からかなりの人気を博しています。そんなBB-8ですが、なんとAmazonで購入することができます。http://amzn.to/1UFyP8v劇中のBB-8は人間の膝上ほどのサイズですが、販売されているBB-8は手の平サイズの小型でになっています。スマートフォンと連携して操作できるので、ラジコンのような感覚で扱うことができるんです。一時は3万円くらいの値段でしたが、最近は2万円弱まで値下がりしたようです。BB-8はどうやって作られたの?『スター・ウォーズ』の世界から離れて現実世界の話に移ります。Japanが販売しているロボティクスボール「Sphero」というプロダクトが元となっています。ロボティクスボール「Sphero」とは「Sphero」とは、Sphero社が販売しているロボティクスボールです。ロボティクスボールが何なのかと言われると実は明確な答えがないのですが、スマホで操作可能なボール型のおもちゃという認識を持ってもらえれば大丈夫です。こちらの「Sphero」の紹介動画を見ると雰囲気をつかみやすいかと思います!http://www.sphero.jp/つまり、BB-8はSpheroなの?スターウォーズに登場するBB-8はSpheroと同じ機構を採用していて、実際に映画内で登場するBB-8も原点を辿るとSpheroなんだそうです。確かに、改めて見てみると、Spheroに頭が付くとBB-8になるのが分かりますね。Robotics」という言葉が最近流行ってきています。Node.jsからさまざまなハードウェアを制御できるライブラリとして有名です。余談ですが、僕も過去にJavaScriptがだいすきな男たちが集まるイベント「JSオジサン」で「Cylon.js」について発表しているので、よかったら上記スライドをご覧になってみてください。概要がつかめるかと思います。Cylon.jsはSphero対応しているCylon.jsはさまざまなガジェットやマイコンボードの制御に対応しているのですが、今回の記事に登場した「Sphero」にも対応しています。BB-8はSpheroが元になっているという話を先ほどしましたが、発売時からBB-8をCylon.jsで動かせないかなと思っていました。実際に手元に届いてから試そうとしたところ、通信方式の違いでBB-8には非対応になっていました。ところが先月(2016年1月)に対応されて、Node.jsからBB-8を制御することができるようになったんです。https://github.com/orbotix/sphero.js/issues/26Githubではこんなissueも立っていて、みんな待ち望んでいたと分かります。僕が毎月主催しているイベント「#IoTLT」のvol.11で話をしてきたので、そのときLTしてきた資料も掲載します。タイミングから考えておそらくBB-8をJavaScriptで動かしたLTをしたのは日本で初めてだったと思います。BB-8をブラウザから動かしてみよう!さてさて話が長くなりましたが、BB-8はJavaScript制御ができるんです。Enegy)でスマートフォンと連携しています。今回はMac上のNode.js+Cylon.jsでBLEを使いBB-8を制御した上で、Milkcocoaを使いブラウザとの連携もしてみようと思います。最終的にはブラウザからBB-8を動かせるようにします。動作しないときの参考にしてみて下さい。(インストールは過去記事を参考にしましょう)下準備BB-8の制御にはBLEを使う必要があるのですが、BLEはけっこう難しいので全てを覚える必要はありません。参考までに僕が作成したスライドを載せます。cylon-bleまずUUIDというデバイスの識別番号のようなIDを調べる必要があります。cylon-bleというパッケージをnpm経由でグローバルインストールしましょう。cylon-sphero-bleまた、SpheroやBB-8を扱うためにcylon-sphero-bleをインストールしておきます。使えるようになります。sudoで管理者権限としてコマンドを実行する必要があります。・Macがある場所を中心に周辺のデバイスが持っているUUIDが一覧として表示されます。ここで表示されるNameには製品名が入ってくることが多いので、Nameの値でデバイスを判断すると良いです。BB-XXXXのような名前を見つけたら、その下のUUIDを探します。xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxと書いたところが、今回の目当てのBB-8のUUIDになります。サンプルコードを動かしてみるこちらにBB-8向けのサンプルコードが掲載されています。Spheroとは若干書き方が異なるので注意しましょう。}}).start();MacとBB-8のコネクションが確立した後に、workで定義しているメソッドが実行されます。このサンプルコードだと、水色に光らせた後に1秒後に赤になり3秒後に移動......のような流れになります。動きましたね!Cylon.jsとMilkcocoa連携その次に、Cylon.jsとMilkcocoaを連携させてみましょう。https://mlkcca.com/Milkcocoaはリアルタイム通信やIoTデバイスとの連携を簡単に実装できるサービス・ライブラリです。Milkcocoaのサイトからユーザー登録とアプリ登録をすればアプリIDを取得できます。基本的に無料で利用可能です。MilkcocoaのSDKを追加してみましょう。milkcocoa先ほどのapp.jsにMilkcocoaに送られてくるデータとCylon.jsを連携させて書いてみます。Milkcocoaでは一つのクライアントがsendメソッドを用いてMilkcocoaのサーバーにデータを送ることで、待ち受けしている別のクライアントにリアルタイムに情報を共有することができます。ds.on('send')と書くことで待ち受けすることができます。});}vというキーに対してredという値が送られてきたらmy.bb8.color(0xFF0000);でライトを赤くする、といった処理になります。Milkcocoa連携したブラウザ側のコントローラを作ってみるこれでBB-8側の準備はOKです。次はブラウザ側のコントローラを作ってみましょう。SkyBlueというCSSフレームワークを使ってみます。こんな雰囲気のコントローラを作りました。ブラウザ側のJavaScriptコードはこうなっています。});});jQuery周りのコードの説明は割愛します。・(省略)・Milkcocoaの使い方はds.send({v:'forward'}でvのキーに対して'forward'という値を送ることができます。・(省略)・Node.js側ではforwardを受け取ったことを検知してBB-8へ命令を送ります。ブラウザからBB-8を動かす!説明はこんなところで、実際に動かしてみましょう。これでブラウザからBB-8を制御することができました!!まとめ『スター・ウォーズ』ファンなら、BB-8がプログラミング制御できるなんてかなり胸アツですよね。Cylon.jsでBLEデバイス制御をしてMilkcocoaでWebとつなげる組み合わせはいろいろなデバイスに応用できると思います。ハードウェアをWebエンジニアがJavaScriptで制御する敷居もだんだん下がってきた気がしますね。一度試してみて下さい。それでは!おまけBB-8とSpheroを同時に動かしてみました。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。