はじめに

今回お招きしたのは、dotstudio株式会社（ドットスタジオ）のCEO 菅原のびすけ氏（@n0bisuke）です。のびすけ氏は、2014年にLIG INC.に入社、IoT関連に興味を持ち、「IoT縛りの勉強会! IoTLT」などの勉強会を主催してきました。その後、IoT事業に集中するために独立し、2016年7月にdotstudioを設立しています。

今回の記事では、のびすけ氏とピクセルグリッドのフロントエンド・エンジニアが、JavaScriptとハードウェアのこれからについて考えました。

JavaScriptでハードウェアを制御するAPI

——今日はどうぞよろしくお願いします。さっそくですが、JavaScript、つまりWebブラウザからハードウェアを制御するためのAPI全般というのは、今どのような状況なんでしょうか。

のびすけ：まず、JavaScriptという言語でできることの流れをざっくり追っていくと、昔はJavaScriptはWebブラウザだけのものだったんですよね。でも、そこそこ前に、Node.jsなどが登場してサーバーサイドでも動くようになったり、Titanium MobileやPhoneGap（Cordova）を使ったスマートフォンアプリ開発や、Electronによるデスクトップアプリなんかも作れるようになってきました。そして、最近はJavaScriptでも、低レベルなAPIをいじれるようになってきて、ハードウェアの制御もできるようになってきたわけです。

——できることが、ブラウザの枠を超えてきた、ということでしょうか。

のびすけ：そうですね。そんな中で、JavaScriptからのハードウェアの制御としては、Web GPIO APIとWeb I2C APIというAPI*が、今W3Cのドラフトとして進んでいます。これはそもそも、日本から発信されているんですよね。

ハードウェアAPIを試すマイコンボード

——なるほど、APIの整備は少しずつ進んできているんですね。となると、今度は対応できるハードウェアは、ということになりそうですが。

のびすけ：まずはパソコンにマイコンボードをつないで、それにそれぞれセンサーを刺したりします。そのマイコンボードを、JavaScriptによって制御ができるわけです。マイコンボードにもいろいろな種類があるんですが、僕が今おもしろいと思っているのが、この「CHIRIMEN」（チリメン）。Web GPIO APIとWeb I2C APIも、これで試すことができます。

——これは……このボードの名前がCHIRIMEN、ですか？

のびすけ：CHIRIMENはこのハードウェアの名前でもあり、コミュニティの名前でもありますね。CHIRIMEN Open Hardwareというオープンソースプロジェクトです。Mozilla界隈の人が元となって運営しているプロジェクトで、オープンソースハードウェアになっています。設計図なども公開されていているので、あとは工場に発注するスキルさえあれば、だれでもこれを使ったデバイスが作れるというわけです。

小山田：こういったデバイスって、日本にはあまり入ってきていないですよね。わりと最近ですか？

のびすけ：そうですね。実は日本では法律的な部分でハードウェアがなかなか作れなかったりするんです。よく言われるのは電波法ですね。たとえば、Tessel（テッセル）というNode.jsベースのJavaScript環境で動くマイコンボードがあるんですが、これはスタンドアローンでWi-Fi接続できて、電源はUSBから取れます。

このTesselの1が出たときに、国内では少し盛り上がったんですよね。でも、1万円ぐらいしてちょっと高いなと。それでもうちょっと安くなればということで2に期待していたんですけど、海外で2が出てもなかなか日本に入ってこない。それはWi-Fiが搭載されているので、おそらく電波法*の関係なんだろうなあと。

小山田：Tesselは拡張できるんですよね。

のびすけ：そうです。センサーは、ブロックみたいなモジュールなんですよ。パズルのように組み立てて、拡張できます。たとえば気温のセンサーモジュールを足して、npm installで気温拡張のモジュールをNode.js側も入れてあげると、その機能が使えるようになるんです。

小山田：ハードウェアとソフトウェアがモジュールになっているんですね。

のびすけ：そうそう、そうなんです。そこがすごくおもしろいなあと。それぞれの機能がnpmで管理されていて、それに対応したモジュールが別売りであるという。

ハードウェアも一つのプラットフォーム

——どのあたりのエンジニアの方が盛り上がっているんでしょうか。

のびすけ：やっぱりNode.js界隈かなあって気がしますね。これは海外に行ってきた人から聞いた話ですが、海外のNode.jsやっている人たちってWebサーバー立てるとかそういったことにはもう飽きていて、だいたいハードウェアを使って何かやっている、というのが去年ぐらいからで、それが今年になっても同じように続いているって聞きますね。

彼らから見ると、ハードウェアもプラットフォームの一つという考え方をしている気がします。Node.jsで制御できそうだし、それならやってみたい、というモチベーションが高まってきた。その流れと、IoTというワードが盛り上がっているというのがリンクしているのかなあと思っていて。

——JavaScriptで、ということなんですね。

のびすけ：サーバーサイドの言語って、よっぽど限定的な使い方以外は、わりと何でもいいんじゃないかな、ということはあると思うんですよね。Python好きだったらPythonを使えばいいし、Ruby好きならRubyを使えばいいし。でも、ブラウザ側って、やっぱりJavaScriptじゃないですか。そこがやっぱり、でかいのかなと思っています。ブラウザ側はJavaScriptで書くわけだから、だったら両方JSで書いたほうが楽だよね、っていうかんじですよね。

坂巻：そう、JavaScriptで動くのはすごくラク。僕も開発合宿でデバイス操作を試したことがあったんですけど、ほんと大変でした。

のびすけ：どんなことを試したんですか？

坂巻：以前の開発合宿で、Arduino UnoやMicroViewを使って、物理ボタンを押したら自分のTwitterのタイムラインの最新のツイートをお気に入りに入れるものを作ったり、Wiiのヌンチャクを使ってブラウザ上のページを操作するものを作ったりしました。

開発の際に、C++風のArduino言語を書く必要があるのですが、慣れない言語にとまどいながら開発していました。慣れているJavaScriptですべて開発できれば楽でした……。

——Node.jsで動かすというのは、すでに試みているコミュニティがあるんですか？

のびすけ：はい、NodeBotsっていう、JavaScriptでハードウェアを動かそうというコミュニティがあります。別にNode.jsに絞っているわけじゃなくて、フロントのJavaScriptなら全然いいよ、というスタンスです。

実践、Node.jsで「Lチカ」

のびすけ：じゃあ、ちょっと今試してみますか？ Lチカ*をやってみましょうか。

中村：りぃさん（杉浦）、お願いできる（笑）？

のびすけ：では、このArduino（アルディーノ）というマイコンボードを、Node.jsのライブラリJohnny-Fiveで動かしてみましょう。ArduinoをMacにつないで、ArduinoとLEDをつなげます。

中村：これ、つないだら即認識するもんなんですか？

のびすけ：再起動が必要な場合もあるかもしれないです。……まず、npm installでJohonny-Fiveをインストールしますね。

npm install johnny-five

杉浦：ええっと、コードはJohonny-Fiveのサイトにある、Hello Worldのコードをコピペするといいですかね。

var five = require("johnny-five");
var board = new five.Board();

board.on("ready", function() {

  // Create a standard `led` component instance
  var led = new five.Led(13);

  // "blink" the led in 500ms
  // on-off phase periods
  led.blink(500);
});

のびすけ：そうです、そうです。これは13番ピンにどうのこうのする、というコードですね。たとえば、13のところを9に変えてみてください。

杉浦：ここのvar led = new five.Led(13);のところですね。

のびすけ：それで、こっちのボード側もLEDを9番ピンに……。で、ボード側は、マイナスとプラスを繋いであげると、電流はマイナスからプラスに流れて一周するわけです。そうすると……。

杉浦：点滅しましたね。

中村：配線を間違って、壊れたりはしないんですか？

のびすけ：あります、あります。友達がArduino、焦がしていましたね。ショートしたようです。最初ってみんなわからないからびびりながらやるから大丈夫なんですけど、慣れてくるとあります（笑）。

中村：このへんだろうって適当に刺したら、煙が出たりするわけですね（笑）。

のびすけ：そうです（笑）。コードのled.blink(500);で点滅の速さを変えているので、ここを変えてあげると、速くなったり、遅くなったりします。

Johnny-Fiveはコードを見てもわかりやすかなと思いますね。コードの中にboard.onというところがあるんですけど、あれがそもそものボードに対してのアクセスの準備ができたよ、というものなんです。board.onのコールバックの中にすべてを書いていくというスタイルなんですよ。

小山田：わかりやすい。

のびすけ：そうなんですよね。でも逆に、サンプルコードだけを見ているとコールバック地獄感が出てくるわけですが（笑）。

中村：Webの人は慣れているから大丈夫です（笑）。それくらいは。

——ほかにも、APIの規格は出てきているんですか。

のびすけ：少しユースケースが違ってくるんですけど、WebUSB APIと、省電力のBluetooth Low Energyを扱えるWeb BluetoothといったAPIがあって、個人的にはこれが実用的になってくると、もっとIoT関連も熱くなるんだろうなというところですね。どちらもまだブラウザやデバイスに制限があるんですが。今、プレビュー版ぐらいなかんじです。

IoTの話になってくると、いかに電力消費を抑えるかということは重要なんです。Wi-Fiのチップだと、けっこう消費電力がでかいらしいんですね。では、どういった形で通信させるのかとなると、省電力のBluetooth Low Energyを使うのが主流になってくるんじゃないかなあと。

JavaScriptで制御の背景

のびすけ：Webブラウザからハードウェアを制御するっていうのが盛り上がってきたのは、ここ2、3年というところですが、最初にブラウザからいじろうと思った人は、すごいなと思いますね（笑）。

中村：でも、GoogleやMozillaはOSを作っていたので、そうするとOSとしてはハードウェア制御も含めて全部一通りできないといけないでしょ、というのはあると思いますね。 Firefox OSだって、テレビに入っているし。そうするとBluetoothなんかも使いたくなるでしょうしね。

のびすけ：そういった背景はあるんでしょうね。そもそも、パソコンのブラウザだけじゃなくなってきた。プラットフォームの拡張という。

中村：ブラウザをプラットフォームに、みたいなことをし始めたら、ハードウェア制御も必要になってきたんですよ。

Webサービスとハードウェア販売の違い

——さて、これからJavaScriptでハードウェア、というのは製品化されたりするんでしょうか。

のびすけ：全体的に言えるんですけど、まだどれもプロトタイピングモードみたいなかんじで、WebブラウザのJavaScript APIからハードウェアセンサーとかを動かすというのを試したいという段階なんですよね、今は。商品とか量産するところのデバイスに組み込むかというと、そうではなくて一歩、いや、もっと手前なんですよ。

たとえば、この部屋の温度を測ってWebに持っていくみたいなものをスタンドアローンで作るとしますよね。温度センサーで値を取って、定期的にサーバーに飛ばすみたいなものを作ればいいので、1日もかからずにできると思います。でも、それを製品化するとなると、実際問題、じゃあ電源どうするのとか、あとはサイズどうするのとか、いろいろ考えなくてはいけない問題が出てくるわけです。まあ、温度を定期的に送るぐらいならいいかもしれないけど。

僕らがこれまでやってきたWebサービスって、エンジニアがコード書いてグローバルな世界に置いてしまえば、まあ最悪ユーザーに届けることはできますよね。

——言ってしまえば、サイトを公開してしまえばいいわけですよね。

のびすけ：でも、ハードウェアって、エンジニアの仕事だけじゃなく、量産するときにどの工場にするかとか、量産が終わってもどの流通網に載せるとか、どの店舗に置いてもらうかとか、売れるようになるまでにいろんな人が関わってくるというのがあって。

坂巻：Webと比べものにならないくらい、関わる人も多いですよね。

新しいアイディアが生まれる可能性

小山田：とはいえ、Web側の僕らでも誰でも、まず気軽に試せるというのがおもしろいですよね。

のびすけ：そうですね、今そこの過渡期というか。これまでは「何ができるのか知りたい」という時期で、だんだん「何ができるかやってみよう」というタイミングになってきたんじゃないかな。そういった意味で、CHIRIMENみたいなボードというのは、教育用とか学習用として有用ですよね。

こういうデバイスが出てくることによって、Webの世界の人たちがこっち側（IoT）に入っていける可能性が出てきているし、実際入っていっている。その中でいろいろできそうですよね。

今までハードウェア側の人って、なかなかWebにナレッジを出すみたいな文化はなかったんですよね。どっちかというと、企業に属していて、それが企業秘密みたいな。外に知見を出すというのは、競合がいる中で、リスクでしかない。でも、Webの人たちってそうじゃないから、ビジネス的な観点ではそこはよくないかもしれないけど（笑）。

小山田：そうですよねえ（笑）。なんでもかんでも共有しちゃう。

のびすけ：でも、そういうWebの考え方の人たちが入っていくと、ちょっと変わっていくような気がして。たとえば、センサーパーツにはデータシートが添付されていて、そのセンサーの仕様が確認できます。そういうドキュメントには、普通馴染みがないじゃないですか。しかも共通な規格ってなくて、パーツの会社ごとに書き方が違う。

中村：昔のパーツメーカーは、そういった対応でも「わかるだろ」的なところがありましたよね。

のびすけ：そうなんです。でも、Webの人たちが始めようとすると、そういうときに、「このセンサーのデータシート読み方わからないよね。もっと共通化されたやり方で書いてくれよ」みたいなことになっていく。ここ1、2年で、Web系のエンジニアの人のブログに「この線はこれだから、Arduinoだったらここにつなごう」というのを書いている人が出てきたりとか。それに、だんだんとセンサー類の仕様もオープンになってきていて。

小山田：のびすけさんが新しく作られた会社でも、こういった情報を含めたIoT関連の製品を発信しているんですよね。

のびすけ：そうですね。IoTをやるときの、「まずはじめに何を買えばいいのかわからない」を解消したいと思って、ブログなどで詳しいチュートリアルも発信しています。

坂巻：僕も、自分でこういうデバイス操作を試したときは、すごい調べて……ずーっと調べていて。ちょいちょい情報はあるんだけど、電子工作の知見とかを元にしなくちゃ、情報がない。考える、わからない、また調べる、の繰り返しでしたね。たとえば、スイッチとか、ボタンを押されたというのを検知するのがすごくめんどくさくて、ライブラリかなんか探してやりました。標準ではないんですよね。

のびすけ：スイッチ、初見だとなにがなんだかわからないですよねえ。でもスイッチって、ボタンを押したということからなにかが起こると考えると、イベント駆動なのでJavaScriptはいいんじゃないかと。リアルJavaScript。センサーの値が閾値にいったらなにかしたいわけじゃないですか。ボタンを押して、そこでイベントが発火して……というのはJavaScriptですよね（笑）。

一同：（笑）

JavaScriptのミライ

小山田：たとえば、今スマートフォンのGPSを使ってピザの宅配なんかもできるようになっているけど、それって一昔前のWebだったら考えられないような連携ですよね。今はそういう表現方法が生まれているわけで。今日話したような、ハードウェアとの連携を考えると、Webもただ読むだけじゃなくて、もっと使えるものに変わっていくのかなあと思いますね。

のびすけ：基本的にWebってテキストですもんね。最初のティム・バーナーズ＝リーの提唱したHTMLとかWebの世界と、なんか一周したかどうかはわからないですけど。

小山田：もっと、Webはなんでもできそうな気がする。その、なんでもできる中で、すでに知見としてあるJavaScriptのコードのプログラミングでできるなら、それはそれで僕らは入りやすいし。おもしろいな。

のびすけ：入っていきやすいですよね、Webの人たちのほうがアイディアあるんじゃないかなって思うところはあって。家の中で使っているセンサー類とかって、家電の開発側の人からすると、当たり前の技術になっているからそこから新しいことって、なかなか生まれてこないじゃないかと思うんですけど。でも、僕らからすると、それが使えるようになった、というのが新しい。それが一つの表現に取り込めると、新しいサービスを考えられたりもするかなと思ったり。

小山田：うん、うん。

のびすけ：あったら便利だなというところで人間の生活が便利になる、そういったアイディアを作るときとかに、JavaScriptでWebにつなぎたいというアイディアだと、いいんじゃないかなと。

——これから先のJavaScriptが、もっと楽しくなってきそうですね。本日はありがとうございました。