「WoT」はごくごく簡単にいうと、既に普及しているHTMLやJavaScriptなどのWeb技術を使ってIoTの開発を標準化しよう、という考え方です。WebBluetooth APIやWebNFC APIなど、みなさんが慣れ親しんでいるWeb技術を使ってハードウェアを制御する方法も増えてきています。

今回は、WebページからPCに繋がれたUSBデバイスを制御することができる「WebUSB API」の概要とサンプルを紹介します。

HTMLと簡単なJavaScriptで試せる内容になっていますので、Webデザイナーやディレクターなどエンジニアではない方もぜひチャレンジしてみてください！

WebUSB APIとは

WebUSB APIはPCに接続された全てのUSBデバイスにウェブから直接アクセスすることができる技術です。USBデバイスの認識、読み出し、書き込みなどを行うことができます。

Googleの2人のエンジニアによって開発され、2017年9月にはChromeブラウザ（Google Chrome 61）で正式に採用されました。

WebUSB APIを利用するとただちにユーザのUSBデバイス全てにアクセスできる、というわけではなく、ユーザがWebページとUSBデバイスの相互通信を明示的に許可することで開始されます。

WebUSB APIのポリシーやセキュリティについては、Googleの開発者向けページで詳細に紹介されています。

⇒ Access USB Device on the Web（Google Developers）

WebUSB APIの活用シーン

WebUSB APIを活用することで、これまで事前にドライバやソフトウェアのインストールが必要だったUSBデバイスのセットアップが、サイトにアクセスして許可するだけで自動で行えるなどの連携が考えられそうです。

またデバイスの開発者サイドのメリットとしても、OSごとに異なっていたドライバ開発がJavaScript SDKを使ってクロスプラットフォームに構築できるそう。

webusb/arduinoなどの例を利用してArduinoなどのマイコンボードをWebから制御することも可能になりました。

詳細な仕様は開発者のドラフトを確認してみてください。

⇒ WebUSB API

本格利用はこれから

ただし、実際にWebUSB APIを導入するにはまだまだ課題がありそうです。

USBアクセスを求めるWebページを公開するために資格や証明が必要ということはなく、利用ユーザは「本当に信頼できるWebページか」ということを知る方法が今のところありません。

また開発者サイドも、USBデバイスの情報が新しくなったり変更されたりするたびにWebページを改修する必要がある可能性もあります。

利用には気をつけるべきポイントが多く、WebUSBはまだ開発中の段階と捉えたほうがよさそうです。安全面、実装面ともに改良され、より使いやすい機能となっていくことに期待ですね。

WebUSB APIを使ってログイン認証を実装してみよう

今回は「登録済みのUSBデバイスならログインする」というWebページを作ってみます。

用意するもの

• Chromeブラウザ
• 任意のUSBデバイス（筆者はiPhone7）

手順1：Chromeのバージョンを確認する

はじめに、ChromeブラウザがWebUSB APIに対応したバージョンになっているか確認します。

Chromeのツールバーから［Google Chromeについて］を選択します。

Chromeの情報ページが開くのでバージョンが62以上であることを確認します。

基本的には自動でアップデートされているはずですが、万が一されていない場合は下記を参考にアップデートしましょう。

⇒ Google Chromeを更新する（Google Chrome ヘルプ）

手順2：ログインページを作る

WebUSB APIを設置するWebページを作ります。今回はコード共有サービス「CodePen」からログインフォームのソースコードを利用しました。

Calm breeze login screen（CodePen）

［Export］からソースコードを取得しローカルに配置します。

今回は「Username」「Password」は不要なので、index.htmlのフォーム部分から消去しておきます。

<form class="form">
	<input type="text" placeholder="Username"> // この行を消去
	<input type="password" placeholder="Password"> // この行を消去
	<button type="submit" id="login-button">Login</button>
</form>

ログインのイベントを作成する

LoginボタンをクリックしたらWebUSB APIのイベントが発火するよう、Submitボタンを変更します。

auth()というfunctionを呼ぶようにし、記述用のJSファイルの呼び出しも追加しておきます。

<form class="form">
		<button type="button" onclick="auth()" id="login-button">Login</button>
	</form>
	<script src="js/webusb.js"></script>
</body>

ログイン成功時のイベント（デフォルトのJQuery）は名前つき関数にしておきます。

function login() {
  $('form').fadeOut(500);
  $('.wrapper').addClass('form-success');
}

USBデバイスにアクセスして識別情報を取得する

認証に使用するデバイスを識別するために、［Vendor ID］, ［Product ID］, [Serial Number]を調べてみます。

Macの方は［システム情報］->［USB］で確認できます。

Windowsの方はMicroSoftのusbviewなどを利用しましょう。 ※このシリアル番号は、iPhone自体のシリアル番号とは別です。

/jsフォルダの配下にwebusb.jsファイルを作成し、authfunctionを作成します。コード内には取得したVendor ID（製造元 ID）、Product ID（製品 ID）、Serial Number（シリアル番号）を追加します。

'use strict';

const auth = () => {
  const vendorId = XXXX; // ここにVendor ID
  const productId = XXXX; // ここにProduct ID
  const serialNumber = 'XXXXXXXX'; // ここにSerial Number
  navigator.usb.requestDevice({ 'filters': [
      { 'vendorId': vendorId, 'productId': productId }
    ]
  }).then(device => {
    if (device.serialNumber === serialNumber) {
      console.log('success!');
      login();
      return device.open;
    } else {
      console.log('false!');
      alert('認証に失敗しました');
    }
  }).catch(error => {
    console.log(error);
  });
}

今回は簡易的にJSファイルに直接認証情報を書いています。

ログイン機能を試してみよう

登録したUSBデバイス（今回はiPhone）で試してみます。
認証が成功しました。

登録していないiPhoneでも試してみます。
認証に失敗しました。

これでUSBデバイスを識別することができました！

まとめ

今回はUSB接続したスマートフォンを利用しましたが、マウス、キーボード、フラッシュメモリなどUSBデバイスならどんなものでも利用可能です。

またWeb USB以外にも、WebBluetooth APIやWebNFC APIなどWeb技術を使ってハードウェアにアクセスする方法は増えています。ぜひこれからの開発に利用してみてください！

こんにちは、編集長の白石です。

昨日（2015年8月27日）、「IoT / WoT」をテーマにした「第59回 HTML5とか勉強会」に参加してきました。 この記事では、イベントの模様や参加した感想をレポートしたいと思います。

ちなみに、「IoT」（Internet of Things）はバズワードなのでご存じの方も多いと思いますが、「WoT」というのは「Web of Things」の略です。「IoTのWeb版」と言えばわかりやすいでしょう。個人的には「WoT」という言葉にはどうも「IoTブームに乗ってやれ」という（何者かの）意図があるような気がしていて、ちょっと懐疑的でした。リソース食いだし、デバイスの機能を自由に使うこともできないWeb技術は、IoTとは相性悪いんじゃないか…と。

しかし、今回のイベントに参加して、そうした疑いは晴れました。「Web×デバイス」の勢い、まがい物ではなさそうです。そしてその勢いをさらに推し進める一員になりたいな…と思ったのも正直な気持ちです。それくらい、最先端では楽しいことが起きている。

では、前置きが長くなりましたが、イベントの内容を簡潔にご紹介していきたいと思います。 イベント自体の内容が盛りだくさんでしたので、今回のレポートでは前半の2セッションのみのご紹介となりますがご容赦ください。

また、講演資料はアップされたのを確認次第、追記していきます（現在のところ、2つ目のセッションに関する資料しか見当たりませんでした）。

「myThings開発者のMaker Faire Tokyo体験記」

1つ目のセッションは、ヤフー株式会社の河合将臣氏と畑元氏による 「myThings開発者のMaker Faire Tokyo体験記」でした。

「myThings」とは、2015年7月にヤフージャパンがリリースしたプロダクトです。 複数のWebサービスやデバイスを自由自在に繋いで、いろんなことをオートメーションさせられるサービス／モバイルアプリです。

と、この説明を聞くと「それってIFTTTと何が違うの？」と思ってしまうのが自然な流れ（？）。

このセッションでは、その疑問にもしっかり答えていました。いわく、

• 日本語対応
• Yahoo! Japanのサービスが使える。特に、通常API経由では利用できないサービスやデータを使えるのは強み
• 国内で展開されているサービスも利用できる。代表的なのははてなブックマーク。

だそうです。

また、IDCF Cloudというプラットフォームも用意されており、自作のガジェットとmyThingsをつなぐことも可能。MQTTやWebSocket、REST APIに対応しているそうで、Web技術者でも簡単に扱えそうなのが魅力。

セッションの後半では、Maker Faireにヤフーさんが出展された時の（もちろんmyThingsとIDCF Cloudを使った）デモアプリを、内部設計や作業工程も含めて情報共有していただきました。

Web技術者がハードウェアの設計・製造まで行ったということで、その過程で気づいたことを以下のようにわかりやすくまとめています。

「WebController for V-Sido CONNECT：WebRTCとWebGLで作る人型ロボット遠隔操縦システム」

２つ目のセッションは、株式会社アトモスデザインの児玉 哲彦さんによる「WebController for V-Sido CONNECT：WebRTCとWebGLで作る人型ロボット遠隔操縦システム」でした。

第59回 HTML5とか勉強会 ーIoT/WoT発表資料「Web Controller for V-Sido CONNECT：WebRTCとWebGLで作る人型ロボット遠隔操縦システム」

このセッションのウリは、とにかく「ホンモノのロボットをWebブラウザで動かせる！」という点。Google Chrome上で動作するWebアプリから、ロボットの手を動かしたり足を動かしたり、果ては怒らせたり。

「JavaScriptでロボットを動かす」なんて、数年前では考えられなかった事態に感動です。

そもそもV-Sido CONNECTというのは、人型ロボットを作るためのOS（そんなのがあったのか…）である「V-Sido OS」用のマイコンで、公式HPによると「シリアルサーボモーターをつなぐだけでロボットを作ることが可能です。」「V-Sidoの一部機能がマイコンに搭載されているので初心者でも簡単にロボットを動かすことができます」とのこと。

今回の児玉さんの発表は、この「V-Sido CONNECT」をWebブラウザ上から制御できるというプロダクトの紹介というわけです。 このWeb Controllerはどう動作しているかというと、Webアプリとスマホアプリを連動させ、スマホからBluetoothでロボットの制御信号を送っているとのこと。先ほどのmyThingsといい、スマホがIoTデバイスのハブになるという流れなのは間違いなさそうです。

また、Webアプリとスマホアプリの通信はWebRTC（及び、NTTコミュニケーションズのSkyway）を使用しているそう。WebRTCを使う決め手となったのは、映像や音声を扱うことができるから（ロボットのカメラから映像を受信したりできる）。

以下の比較表は中々興味深いです（写真ボケててすいません）。

WebRTCのおかげで、なんとドイツから日本のロボットを動かすといったような接続性を確保できたとのこと。地球狭い。

そして、Webエンジニアであれば気になるコーディング方法ですが、以下の表に示すように、非常に簡潔なAPIです。たったこれだけでロボットに複雑な制御を行わせることができるというのは、Web技術者にとってはありがたい限りです。

2000年代の「ユビキタスコンピューティング」に足りなかったものは今は揃っており、WoT時代の幕開けを感じさせてくれるセッションでした。

まとめ

今回紹介しなかった後半の内容（MozillaのFirefox OSベースのマイコン「CHIRIMEN」や、NTTコミュニケーションズ小松さんによるRaspberry PiとWebRTCを連動させた話）も非常に興味深かったので、気になる方はTwitterでイベントの様子を確認してみてください。

イベント全体の模様をを動画でご覧になりたい方はこちらからどうぞ。

このIoTブームの中、「Web技術者にできることを広げようとしている人たちが多く存在する」「Web技術者にできることはたくさんある」ということを実感させてくれる、非常にバリエーション豊かな内容でした。

IoT/WoTという言葉があちこちから聞かれるようになって久しいですが、最近は言葉だけではなくなってきた気がします。新しいマイコンボードや、XXセンサーのデータをクラウドに溜めて○○する商品などが続々と発売され、IoT/WoTのバックエンド専用のサービスまで登場してきています。

これから出てくるサービスやツールは、画面の中からの情報だけでなく、画面の外からの情報を使うことができそうです。逆に画面の外に影響を及ぼすようなことも可能になるかもしれません。解決できる課題の幅がグンと広がってきそうな予感がします。

加えて、先日の村岡さんの記事でも紹介されていたように、JavaScript等のWeb技術で開発できるマイコンボードも続々と登場し、IoT/WoTはWeb開発者にとっても身近なものになりつつあります。

今回はその中でもシンプルで扱いやすい、Espruino Boardを使い、JavaScriptでIoT/WoTに挑戦したいと思います。

ボードを購入するところから、温度センサの値を読み取る方法、Wifiに接続する方法について、ステップバイステップで解説していきます。「IoT/WoT、やってみたいけど敷居が高くてできない！」というWeb開発者の皆様に、一歩を踏み出すお手伝いができれば幸いです。

Espruino Boardとは

冒頭で紹介したとおり、Espruino Boardは、JavaScriptを利用してハードウェア制御ができるマイコンボードです。ざっくり言ってしまえば、ArduinoのJavaScript版のようなもので、まずはこの理解でいきましょう。

「とりあえずJSでハード制御してみる」を実現するには最も簡単で、かつ財布にも優しい選択肢とも言えるマイコンボードです。筆者もこれでIoT/WoTの第一歩を踏み出しました。

他の多くのマイコンボードと違い、自前でJavaScriptの実行環境を実装しているところも熱いポイントです。

また、Espruinoの今後の展開として注目されている、Espruino Picoについても触れておきます。Espruino Picoは、今回紹介するEspruino Boardよりもさらに小さい基盤(USBメモリサイズ)で、Espruino Board同様にJavaScriptでの制御が可能です。2015年春にプレオーダー分が出荷予定となっています。

どうしてJavaScript?

ただWeb開発者が知っている言語だから、というわけではなく、筆者はマイコン上でセンサー等のハードウェアを制御する言語として、JavaScriptは適した言語だと考えています。主な理由としては、イベントドリブンな記述がしやすいことと、setTimeoutやsetIntervalを使って、ループ処理を非同期に逃がすことができることが、挙げられます。

実際にマイコンボードを使ったサービスを運用してみると、マイコンボードにはやらなければならないことが意外とたくさんあることに気づきます。センサーの値を読みとってPOSTするだけでなく、センサー自体の死活監視のためのリクエストを投げるといった、運用のための処理や、Too Muchなリクエストの発生を避けるためにデータを間引いたりする処理がどうしても必要になります。

一例として、多くの言語がサポートする、無限ループを回しつつ、sleepで時間調整をする方法で、以下のような処理を実装することを考えてみましょう。

• 5秒に１回センサーの値を読み込む
• 1分に１回はマイコン自体の死活監視用にPingリクエストを投げる

普通に実装すると、5秒のスリープ処理の入った無限ループを作り、その中でセンサー値の読み取りを毎回実行します。Pingリクエストについてはカウンタ等を用意してIF分を切って実行有無を判定する、という実装になりそうです。やることが増えてくると、困りそうですね。

一方、JavaScriptでは2つのsetIntervalにそれぞれの処理を実装してしまえば事足ります。マイコンボードのようなpoorな環境でこれができるのは、Espruinoを始めとするJavaScriptで開発できるマイコンボードの強みであると筆者は考えています。

メインのテーマではないのでこの辺りで…

Espruinoを使い始める

では早速、Espruinoを使ってみましょう。 ボードを購入するところから、JavaScriptでLEDを光らせるところまでを、以下の流れで解説していきます。

• 必要物品を調達する
• Web IDEをインストールする
• ファームウェアをアップデートする
• JavaScriptコードを実行する

必要物品を調達する

IoT/WoTの”T”はThings、つまりモノです。何をするにもまずは物理的にモノを購入する必要があります。お金もかかる上に届くまでに時間もかかります。新しいツールをタダでダウンロードして、すぐに試せる環境に慣れ親しんだソフトウェア開発者にとっては、最初のハードルかもしれません。

でも大丈夫です。すぐに慣れて、いろいろ買いあさるようになると思います。

最低限必要になるのはコチラです。

• Espruinoボード
• マイクロUSBケーブル(Aタイプ オス/ マイクロBタイプ オス)

そしてWeb開発者であれば必ずWifiに繋ぎたくなるはずなので、以下も用意しておきます。

• CC3000 Wifi モジュール

Espruinoボードは国内販売されていないので、公式サイトにある販売サイトへのリンク一覧の中から何れかを選んで購入します。

オススメはEspruinoとCC3000の両方を取り扱っているAdfruitです。ここで一緒に買うことで、送料を節約することができます。

• Espruino
• CC3000 Wifi Module

ちなみに筆者はseed studioより購入しました(当時、AdfruitはEspruinoを取り扱っていませんでした）。送料に積む金額によって配送期間が変わるようです。無料だと2週間程度、30ドル払ったら4日で届きました。

補足 : 公式で推奨されているモジュールとは異なりますが、CC3000については国内販売されているコチラのモデルでも動作することを確認しています。筆者の手元での確認なので保証することはできませんが、国内で調達できるので、コチラを利用するのもアリです。

Web IDEのインストール

Espruinoの上で自分の書いたJavaScriptコードを実行するには、本家から提供されているWeb IDEを使用します。Espruinoとの接続や、ファームウェアのアップデート等もサポートしているので、まずはコレを導入します。Chrome Extensionとして提供されているので、Chrome Webストアからインストールしましょう。

EspruinoとPCを接続

EspruinoのマイクロUSB端子とPCのUSB端子を繋ぎ、WebIDEを立ち上げます。立ち上がったら、画面左上の接続ボタンをクリックします。

ダイアログが表示されるので、接続するシリアルポートを選択します。OSやマシンによって選択すべき項目が異なるため、下記を参考に選択します。

• Windowsの場合 : COM# のうち、数字が一番大きいもの
• Mac OSXの場合 : /dev/tty.usbmodem1234 (1234はマシン依存)
• Linuxの場合 : ttyACM0/ttyUSB0

Web IDEの左側のコンソールにConnectedと表示され、Espruinoのアスキーアートが表示されれば成功です。

ファームウェアのアップデート

JavaScriptのコードを書く前に、まずはEspruinoのファームウェアをアップデートしておきます。出荷時期によってこの作業の要否は分かれますが、自前でJavaScriptの実行環境を実装している関係上、ファームウェアが古いと思わぬエラーが発生したりもするので、アップデートしておくことをおすすめします。

• WebIDEの右上の歯車アイコンをクリックして、設定画面を開きます。
• 設定メニューのFLUSHERを選択し、Flush Firmwareボタンをクリックします。ダイアログが表示されます。

• ダイアログの指示通り、EspruinoのBTN1(USBコネクタから遠い方のボタン)を押しながら、RSTボタン(USBコネクタ寄りのボタン）を押します。
• ボード上の青色のLEDがゆっくり点滅するはずです。
• ダイアログのNEXTをクリックし、デバイスを選択します。
• ファームウェアの更新が始まり、ボード上のLEDが激しく点滅を繰り返します。
• 完了後、ダイアログのNEXTボタンをクリックした後、ボードのRSTボタンを押します。
• 再びWebIDE左上の接続ボタンをクリックして、Espruinoと接続します。

以上でファームウェアのアップデートは終了です。

JavaScriptコードを実行する

いよいよEspruino上でJavaScriptコードを実行します。 Espruinoボード上のLEDを光らせてみましょう。 WebIDEの左側のコンソールに、下記コードを打ち込んでEnterを押してみます。

LED1.write(true);

Espruinoボード上の赤いLEDが点灯しました。 続いて下記を入力してEnterを押します。

LED1.write(false);

予想通り、LEDを消灯することができます。簡単ですね。

こんな風に対話的にプログラムを実行することができるのは、Espruinoの一つの特徴と言えると思います。Webインスペクタのコンソールのような感覚でコードを動かして試すことができるので、デバックや開発途中のお試し実行に重宝しています。

さて、ここでプログラムについても少し解説をしておきます。

LED1.write(true);

Espruinoに備え付けられているLEDやGPIOのピンは、ビルトインのグローバルオブジェクトとして、あらかじめ登録されています。上記のコードで言うとLED1がそれにあたります。このオブジェクトに対して、書き込み(‘write’)や読み込み(`read’)の命令を投げることで、LEDやピンの入出力をコントロールすることができる、という仕組みです。

Espruinoで温度を計る

前項までで、Espruinoの上でJavaScriptを実行する準備が整いました。ここからはセンサ等と組み合わせてEspruinoを使う方法について解説します。まずは温度センサ「DS18B20」を使い、Espruinoで温度を計ってみましょう。

なお、この段階からはハンダ付け等の電子工作的な作業が必要になります。筆者が以前に書いた記事になりますが、以下を参考に、Espruinoをセンサー等のモジュールに繋げる準備を行います。（ピンヘッダを取り付ける、と聞いてピンとくる方は読み飛ばしてもらって問題ありません）

• Espruinoにセンサーとかをつなげるために必要な準備

また、ブレッドボードやワイヤー等、電子工作の基礎的な事柄については、以下の記事にて非常に丁寧にまとめられています。

• 初心者でもわかる・できる！Arduinoを使った初めての電子工作実践

調達

• 温度センサ「DS18B20」: おなじみ秋月電子さんより通販、店頭にて購入することができます
• 4.7kΩ抵抗 : 通販であればこちらも秋月電子さんより購入することができます。ただし、100本単位の購入になってしまうので、そこが気になるという方は千石電商秋葉原本店B1F等のバラ売りをしているお店で購入しましょう。

結線

温度センサ「DS18B20」には3つの端子がついています。それぞれの役割は、平らな面をこちらに向けて左から、GND、DATA、Vddとなります。GNDはグランドと結線するための端子、Vddは電源をとる端子です。温度のデータはDATA端子から読み取ることができます。

次のように結線してみましょう。

1. 温度センサのDATAとVddを4.7kΩの抵抗で繋ぐ。
2. 下記表の通り、Espruinoと温度センサを繋ぐ。

【写真だとこんな感じです】

プログラム

結線ができたら、次はプログラムです。先ほどはWeb IDEの左側のコンソールを使いましたが、今回は複数行のプログラムを実行する必要があるので、Web IDE右側のエディタを利用します。

以下のプログラムをWeb IEDの右側のエディタに記述してみましょう。温度センサから読み取った値を、1秒毎にコンソールに出力するプログラムです。

// センサーモジュールをセットアップ
var ow = new OneWire(A1);
var sensor = require("DS18B20").connect(ow);
// 1秒ごとに温度を表示
setInterval(function() {
  // getTemp メソッドで温度を取得
  console.log(sensor.getTemp());
}, 1000);

記述したプログラムを実行するには、書き込みボタンをクリックします。

温度センサの値がコンソールに出力されました。センサー部分を指で摘んだり、コタツの中にセンサを入れたりすることで、温度の変化を確認することができます。

ここでプログラムについて解説します。

ポイントは3行目のrequire("DS18B20")と7行目のsensor.getTemp()です。 7行目のsensor.getTemp()の命令一つで温度センサの値[℃]が取得できていることに注目してください。 本来、温度センサを始めとする電子部品から読み取れるのは、電圧の値です。ここから意味のある値、つまり温度を取得するには、センサの仕様を元に、電圧値に対して何らかの計算をしてやらなければなりません。 上記プログラムでは、最初にrequireしたDS18B20モジュールがこの辺りの計算を全て隠蔽してくれているので、末端のプログラムではgetTemp()の命令一つで温度値を取り出すことができるようになっています。下図のようなイメージです。

Espruinoでは各種ハードウェアに対応するモジュールが多数提供されており、電圧値等の生データを意識せずに、センサーの値を取得することができるようになっています(モジュール一覧)。

そしてこれらのモジュールはオープンソースとしてEspruinoDocsというリポジトリで管理されています。ここにプルリクエストを送ることで、誰でもモジュールを開発/公開することができます。筆者も最近、IoT向けプロトコルといわれているMQTTのクライアントモジュールに機能追加を行い、取り込んでもらいました。自分で自分の好きなプロダクトに手を加えられるのは、オープンソースの醍醐味ですね。

Web IDEについてもう少し

とりあえず温度センサの値を取得することに成功したので、ここでWeb IDEの使い方について、もう少し触れておきます。

コンソールとエディタの併用

例えば先ほどの温度センサのプログラム実行中に、コンソールにて下記プログラムを実行してみます。

clearInterval();

1秒毎に行われていた温度センサの値のコンソール出力が止まります。 続いて、温度を取得する命令を実行してみましょう。

sensor.getTemp();

温度が表示されました。

エディタで書き込んだコードに対して、自分の好きなタイミングで任意のコードを実行することができます。まさに、Webインスペクタのコンソール的な使い方ですね。

resetメソッド

画面左側のコンソールにてreset();を実行することにより、書き込んだプログラムの内容をリセットすることができます。コンソールにていろいろやりすぎてわけが分からなくなってしまったときや、単純にEspruino上で実行中のプログラムの動作を止めたい場合に使用します。

Wifiに接続する

いよいよEspruinoをインターネットに繋げます。 冒頭の「Espruinoを使い始める>必要物品を調達する」で紹介した、CC3000 Wifi Moduleを用意しましょう。こちらにもピンヘッダを付ける必要があります。

結線

ピンが多いですが、慌てずに落ち着いて結線しましょう。少なくとも、GNDとVBatだけは絶対に逆にしてはいけません（多分壊れます）。

プログラム

下記プログラムをWeb IDEのエディタに貼付け、wifiConfigのssidとkeyを、接続可能なWifiのSSIDとパスワードに編集します。

// wifi接続情報 ssidとパスワード
var wifiConfig = {
  ssid: "",
  key: ""
};

// コネクション確立時のコールバック
function onWifiConnect(s) {
  if (s=="dhcp") {
    // GETリクエストを投げる : 公式の Hello World! と返してくれるURL
    require("http").get("http://www.pur3.co.uk/hello.txt", function(res) {
      var data = "";
      res.on('data', function(chunk) {
        // 細切れのデータを変数に足し込む
        data += chunk;
      });
      res.on('close', function(){
        // レスポンスが全部返ってきたら溜め込んだデータをコンソールに出力
        console.log(data);
      });
    });
  }
}

// CC3000Wifiモジュールに繋ぐ
var wlan = require("CC3000").connect();
// wifiネットワークに繋いで、GetRequestを実行
wlan.connect( wifiConfig.ssid, wifiConfig.key, onWifiConnect);

書き込みボタンを押して、プログラムを実行します。Wifiに接続しに行くので、少し実行に時間がかかります。

コンソールに”Hello World!”と表示されました。この文字列は、Espruino本家がGetリクエスト用に用意しているURLから取得したものです。

しばらくWifiに接続していると、多少熱くなりますが大丈夫です。ただ、配線を悪い感じで間違った場合は、触った瞬間に尋常ではない熱さを感じることができます。すぐに電源を抜きましょう。当然ですが誤配線は故障やケガの原因になりますので、慎重に、落ち着いて結線することが大事です。

では、プログラムについて解説します。

26行目と28行目にて、Wifi接続処理を行っています。connectメソッドが2つ出てきているのが少しややこしいですが、26行目のrequire("CC3000").connect()のconnectメソッドはCC3000Wifiモジュールとの接続を意味し、28行目のwlan.connect()のconnectメソッドはWifiネットワークへの接続を意味しています。

後者28行目のWifiネットワークへのconnectメソッドは、SSIDとパスワード、そして接続完了後に実行されるコールバックを引数に取ります。今回のプログラムでは、onWifiConnectが呼び出され、このコールバックの中でGETリクエストが実行されます。

10行目でGetリクエストを実行しています。インターフェイスは、node.jsのhttpモジュールのgetメソッドと同様です。http://www.pur3.co.uk/hello.txtに対してGetリクエストを実行し、レスポンスをコンソールに表示しています。

今回のサンプルはGETリクエストでしたが、もちろんPOSTリクエストを投げたり、EspruinoをWebサーバとして動かすことも可能です。

参考

• POSTリクエストを投げる
• WEBサーバとして動かす

まとめ

駆け足でしたが、Espruinoを購入し、温度センサで温度を測り、Wifiに繋ぐところまでたどり着きました。 センサーとインターネットに繋がれば、とりあえずセンサー情報をクラウドに上げて、それをブラウザで面白おかしく表示するようなサービスは作れます。これを機に、とりあえず何でもよいから作ってみるのはいかがでしょうか。

筆者も会社のトイレの空き状況をブラウザで見れるサービスを作ったり、すだちの木に水を上げるとマスコットが喜ぶ玩具等々をEspruinoで作って運用しています。実際に作って運用してみると、本当にいろいろなことに気づきます。この手のサービスやシステムを設計するにあたっての勘所や注意すべきこと、開発当初は思いもよらなかったサービスの”効果”等、とにかくいろいろなことに気づかされます。もちろんハードウェアの専門家になることが目的ではないのですが、とても勉強になりますよ。

ちなみに、Espruinoは日本語ドキュメントが少ないことがネックです。なんとかできないものかと、去年ひっそりとEspruino Advent Calendar 2014なるものを作りました。（ところどころ挫折していますが）これらを参考に、一緒に面白いものを作っていけたらと思います。

最後に、Web開発者がIoT/WoTに挑戦してみる理由について、筆者の思うところを少しだけ。

これからはIoTだ！WoTだ！大きなビジネスチャンスだ！乗り遅れるな！……と、そういった現実的なものもよいとは思いますが、筆者個人としては、Web開発者がIoT/WoTに挑戦してみる理由は、「その方が面白いものが作れそうだから」で十分なのではと思っています（記事の冒頭ではえらそうなこと言っていますが）。

これまでのWebサービスは、人間にインプットしてもらった情報を収集して、それを便利で面白い形にしてアウトプットするものが多かったように思えます。紙でやっていたことをシステムに落としたようなものです。でも、たくさんのインプットがなければ面白くも便利にもならないし、面白くも便利でもなければ誰も情報をインプットをしてくれません。様々なサービス、システムがこんな鶏と卵のような悩みと戦ってきたのだと思います。

でも、インプットをするのが人だけでなく、モノが自ら語ってくれたら、少なくとも有益なインプットを作り出すことはできますよね。情報さえそろえば後はそれをどう見せるか、それは我々Web開発者の土俵です。面白いものが作りやすくなるのではないかと思っています。

で、面白いことをやっていたら、結果儲かっていた。となったら、ラッキーだなと。 エンジニアが勉強する理由なんてそんなものでよいのでは、と最近考えています。 (あ、でもこの辺の市場が拡大することは間違いないと思いますよw。実際、この手のサービスのお仕事のお話をいただく機会が増えてきています^^）

というわけでIoT/WoT。言葉自体は流行っていますが、取り組んでいる人はまだまだそう多くはありません。 これを機に、まずはEspruinoで、面白いモノを作っていきましょう。

JavaScriptではじめる組み込み系プログラミング

さまざまなデバイスがWebを介してつながるWeb of Things（WoT）。WoTの普及によってさまざまな分野からWeb上に新しいサービスがローンチされ、Webを利用するユーザーに新しい体験が提供されるタイミングが、すぐそこまできている感じがします。

一方で、WoTの普及はWebクリエイターにとっても、新しいビジネスチャンスかもしれません。ひと昔前まで、Web技術は、PCのWebブラウザ上でしか使われないものでした。しかし現在では、Firefox OSのようにモバイル・ネイティブで動作するようになりました。さらに最近では、マイコンなどの組み込み機器でも、直接JavaScriptなどのWeb技術が動作するものが出てきました。

ここ最近、海外でリリースされているデバイスの中には、JavaScriptなどのWeb技術を強くキャッチアップしている製品が増えてきています。今回はそれらJS Boardの中から、筆者がよく使っているのものを3つ紹介したいと思います。

Espruino

espruino.com

2013年にKickstarterで資金調達が開始され、目標額を大きく超える調達額を獲得し開発されたデバイスです。リファレンスボードであるEspruino Boardは、72MhzのCortex-M3でJavaScriptプログラムがコンパイルされ、動作する小さなマイコンです。

JavaScriptコードは、専用のEspruino IDEで編集し、EspruinoをPCとUSB接続すれば、IDEからEspruinoへ直接プログラムが転送できるようになっています。ArduinoのようにIDEが用意されているので、気軽に開発できるのがよいですね。

例えば、Espruinoに人感センサーをつないで人の動きを検知するサンプルコードは、このようになります。

setWatch(function() {
        LED2.write(1);
        setTimeout(function() {
        LED2.write(0);
    }, 3000);
}, A1, {repeat:true, edge:"rising"});

EspruinoのJavaScriptには、ハードウェアを制御するための専用APIが、搭載されています。上記のコードでは setWatch というsetIntervalに似た関数で、センサーの状態を取得するループ処理を行っています。

筆者はこのプログラムをもうちょっと作りこんで、ウチの猫のトイレに設置しています。猫ちゃんがトイレに入ったり出たりするのを検知して、クラウドにデータを送信し、スマートフォンにプッシュ通知するような仕組みをつくりました。猫のトイレがすぐに掃除できるようになったので、猫ちゃんのストレスが減りました（減ったにちがいないｗ）。この事例は日経テクノロジーオンラインで取り上げていただきました。

Espruinoに関する日本語の情報はあまり多くないですが、いまのところEspruino Advent Calendar 2014がよくまとまっていると思います。個人的にはJS Boardの中で一番気に入っているデバイスなので日本でももっとユーザーが増えてほしいところですね。

これからEspruinoを買おうと思っている方には、上記のEspruino Boardもいいんですが、現在開発中のEspruino Picoもオススメです。Espruino PicoはEspruino Boardよりもさらに小さいUSBメモリサイズの基盤です。とても小さな基盤なのでいろいろなケースに活用できるのではないでしょうか。Espruino Picoのプレオーダー分は、2015年春ごろに発送される予定のようです。

Tessel

tessle.io

DragonInnovationで資金調達されたプロジェクトで、Espruinoよりも少し大きなマイコンです。Wifiチップを搭載しているので、単独でWebにアクセスする機能を持っています。

Tesselの特長は、多くの専用モジュールが販売されていることです。加速度センサ、GPS、BLE、サーボコントローラー、NFCなど多くのモジュールが別売りで販売されていて、Tesselのポートに差し込むだけで利用できます。Espruinoに市販のセンサーを接続する場合は電子回路の知識が必要ですが、Tesselの場合は専用ポートに差し込むだけなので回路の知識は不要です。

TesselのJavaScript APIはnode.js互換な仕様になっています。例えば、加速度センサーモジュールを接続してデータを取得するサンプルコードは以下です。

var tessel = require('tessel');
var accel = require('accel-mma84').use(tessel.port['A']);

accel.on('ready', function () {
    accel.on('data', function (xyz) {
        console.log('x:', xyz[0].toFixed(2), 'y:', xyz[1].toFixed(2), 'z:', xyz[2].toFixed(2));
    });
});

accel.on('error', function(err){ console.log('Error:', err); });

JavaScriptらしいイベントドリブンな記述で、加速度センサーのデータがリアルタイムに受信できます。このコードでrequireしているtessel, accel-mma84といったnode.jsのモジュールライブラリはnpmでインストールできます。

Tesselは基本的に、4つのモジュール専用ポートに専用モジュールを接続して利用するスタイルですが、専用モジュール以外が利用できないかというと、そうではありません。Tesselには汎用的なGPIOポートも搭載されているので、秋月電子あたりで買ってきたセンサーをつなげることもできます。下図はTesselのGPIOポートでLEDを点滅させてみたところです。

　▲TesselのGPIOポートにLEDを接続してLEDを点滅させている

/*
* TesselのGPIOでLチカ
* LEDのアノードをTesselの TX/G1
* LEDのカソードをTesselの GND
* に接続する
*/
 
var tessel = require('tessel');
var gpio = tessel.port['GPIO'];
 
gpio.digital[0].write(0); // TX/G1
 
flag = true;

setInterval(function() {
  if(flag == true) {
    flag = false;
  } else {
    flag = true;
  }
  console.log(flag);
  if(flag) gpio.digital[0].write(1);
  if(!flag) gpio.digital[0].write(0);
}, 1000);

Tesselは今回紹介するデバイスで唯一国内販売されているデバイスです。スイッチサイエンスで購入できます。国内で買える、電子回路の知識が不要、node.js互換など、ハードウェアのない方でも入門しやすいデバイス、といえるのではないでしょうか。

Spark

spark.io

Sparkはマイコンというよりは、サーバーサイドを含めたオープンなIoTプラットフォームとして開発されています。昨年、Lion Wells Capital、O’Reilly AlphaTech Venturesなどから出資を受けて話題となりました。

Sparkから発売されている小型マイコンボード Spark Coreは、72 Mhz Cortex M3とCC3000 Wifi moduleを組み合わせた「マイコン付きWifiモジュール」と呼べるようなもので、Arduino互換な言語でプログラムを記述します。

EspruinoやTesselと違って、JavaScript使わへんやんけと思われるかもしれませんが、Spark Coreから取得したデータはすべてWeb APIで取得できるようになっており、Web APIをラップしたJavaScript SDKがnode.js、Webブラウザで利用できるよう提供されています。

Spark Coreへプログラムを転送する場合は、Espruino、Tesselと違って、PCとUSB接続をする必要がありません。クラウド上のIDE Spark Buildで編集したコードをFlashすると、ネットワークに接続されているSpark Coreにリモート転送され、実行される仕組みになっています。

下のコード例では、Spark Coreと人感センサーをつないでセンサーの値を detected 変数にバインドしています。（一部抜粋）

Spark.variable("detected", &detected, INT);
...
detected = motionDetect();

上記のようにバインドされた値は以下のようにアクセスすることで、クラウドからセンサーの値を同期的に取得することができます。

curl -G https://api.spark.io/v1/devices/[Device ID]/detected \
  -d access_token=[Access Token]

これをSparkのJavaScript SDKを利用して記述すると以下のようになります。

var spark = require('spark');
var ret = spark.login({"accessToken": "[Device Token]"});
device.getVariable('detected', function(err, data) {
  if (err) {
    console.log('An error occurred while getting attrs:', err);
  } else {
    console.log('Core attr retrieved successfully:', data);
  }
});

SparkはSDKの他にサーバー、デバイス間の通信プロトコルが、node.jsモジュールで実装されています。それを利用するモックアップサーバーもnode.jsコードで公開されているので、結構JS成分が多いです。SparkのプロトコルはCoAP+SSLで設計されていて、このあたりはWoTというよりはIoTなんですが、かなり興味深い実装です。

筆者がSpark Coreを使ってみた感覚では、長時間にわたる動作についてはTessel、Espruinoに比べて安定していると感じました。Tessel、Espruinoは実験や製品の試作レベルでカジュアルに利用できるデバイスですが、Sparkは、それらよりも一歩製品レベルに踏み込んでいるような印象があります。

現在販売されているデバイス Spark Core は39ドルで販売されていますが、次世代のSparkデバイスである PhotonとそのコアモジュールP0が2015年5月に発売予定となっており、現在プレオーダーが受け付けられています。価格はPhotonが19ドル、P0が10個で100ドル（1個あたり10ドル）となっており、IoT製品の量産に利用できるような価格帯となっています。

まとめ

個人的な話ですが、最近ハルロックの影響で電子工作にはまってます。仕事が終わってからハンダ付けをしたり、ブレッドボードで配線したりしてる今日この頃なんですが、マイコンのプログラミングはC++とかJavaとかでやるのはなんか負けた気がするので、JavaScriptでプログラミングできるものにこだわっています。

そういったWeb技術、特にJavaScriptを中心的に利用している組み込み機器を個人的に”JS Board”と呼んでいて、勉強会を開催したりしています。先日のHTML5 Conference 2015でも出展させていただきました。今後も勉強会などをやって、情報共有などをしていこうと思っています。

　▲HTML5 Conference 2015にJS Board勉強会が出展。さまざまなJS Boardデバイスが展示されている。

これからまだまだJavaScriptを活用するデバイスが続々と登場してきそうです。 JS Boardに興味を持った方々、ぜひ一緒に勉強していきましょう！

ArduinoやRaspberry piをはじめとした低価格のマイコンが登場し、ハードウェアの知識がなくても、手軽に電子工作が楽しめるようになってきました。HTML5 Experts.jp読者の皆さんも、こうしたIoTやWoTに関心を持ち始めた方も多いのではないでしょうか。

WebクリエイターがMakeするにあたって、Webで培った技術は役に立つのか・立たないのか、これから活躍の場はあるのか。白石俊平編集長を聞き手に、すでにモノづくりの世界に足を踏み入れ始めたエキスパート村岡正和さん、高岡大介さん、もうバリバリのハードウェアの人として活躍している岡島康憲さんにぶっちゃけトークを展開してもらいました。

　▲左から、白石俊平編集長、岡島康憲さん、高岡大介さん、村岡正和さん

IoTやハードウェアの世界に踏み込んだきっかけは？

白石：まずは、皆さんのIoTに対する取り組みを、教えてください。

村岡：僕はJavaScriptが得意なバリバリのWeb系エンジニアなんですが、最近IoTやWoTがIT業界で重要視されてきたので、ハードウェアの勉強を始めたところです。

でも、いまさら組込みの世界でJavaとかC++を始めてもかなわないし、そもそも自分はWebのエンジニアなんで、そっちに行ったら負けかなとも思ってるんです。僕のIoTへのこだわりは、ハードのアプリケーションやデバイスが動くWeb技術を取り入れていきたいってことなんですよね。

　▲村岡 正和さん（※今回はリモートで参戦）
神戸でシステム開発を行っているフリーランスのエンジニア。コミュニティ活動では、html5jのスタッフやマークアップ部部長、HTML5-WEST.jpの代表として関西でHTML5を中心としたWeb技術の普及に努めている。JS board勉強会や、「日本ウェアラブルデバイスユーザー会」を運営している。

JavaScriptで組込み機器を動かすというソリューションに注目していて、その技術を追っかけるために、「JS board勉強会」を立ち上げました。自分の家にも、JavaScriptを使った組込みボードで、猫の監視センサーを作ったりしています。

　▲猫の監視センサー　※詳しくはこちらの資料参照

Espruinoというマイコンボードをネコのトイレに設置して、猫が出たり入ったりすると検知して、僕のスマホに送ってくれるんですよ。焦電センサーを使って、マイコンとWifiのモジュールとつないでいるんです。僕が外出していても猫がトイレに行ったことがわかるし、家にいると、すぐトイレが掃除できるのは便利なんです。なんかスマートハウスぽいでしょ？(笑)。これはJavaScriptで操作します。Arduinoのようにセンサーをつけて、JavaScriptで動かせるので、僕みたいなWebエンジニアでも普通に使えます。

あと1つ、TesselもJavaScriptで操作できるものもあります。Espruinoよりももっと簡単に操作できる端末。Wifiが内蔵されているので、Intel Edisonに近いかんじです。Tesselの場合は、センサー類が別売りされている。簡単に装着することができるので、電子工作の知識がなくても使えます。スーパー簡単です。Espruinoはいろんな機能が使えるけど、電子工作の知識が必要ですね。

高岡：私は「先端IT活用推進コンソーシアム」で活動しているのですが、IT企業がIoTに対してどう取り組んでいくかを考えるために、2014年11月から月1回、一から勉強するIoT勉強会やハッカソンなどを主催しています。

　▲高岡 大介さん
外資系SIerでエンタープライズシステムの開発を経験した後、独法研究所にて形式手法やセマンティックWeb関連の研究に従事。ベンチャー企業などを経て現在はフリーランスとして、技術支援、開発、執筆、講演など様々な仕事に携わる。Build Insiderでオピニオンコラムを執筆中。Senchaユーザーグループや先端IT活用推進コンソーシアムで活動している。

例えばこのlittleBits（リトルビッツ）を使って、勉強会でデモをやったりしてます。Arduinoも試してみたんですが、Wifiシールドを付けないとインターネットにつながらないので、Intel Edisonを買ってつないだりします。

GROVE Systemとか、さっきのTesselとか組み合わせれば簡単にできるというのは、最近の流行ですね。littleBitsは磁石でつながるし、ショートしないようになっているから子供でも使える。間にセンサーにはさんだり、シンプルなボタンにラッチというモジュールを挟むだけでトグルスイッチにもなります。あとはcloudBit（クラウドビッツ）はインターネットにつながる秘密兵器なので、注目しています。IFTTTに対応したBitモジュールが便利なんですが、まだ日本では正式発売されていないんです。

こんなかんじでデバイスやセンサーのことは勉強してますが、自分はあくまでもアプリケーションレイヤーの部分で頑張りたいと思っています。だからデバイスはお手軽に組み合わせて、使えるものを選んで試しているかんじです。

岡島：私は、もともとはWebサービスの企画屋だったんです。2009年くらいから友人たちとハードウェアをいじり始めて、2011年に岩淵技術商事を起業。東京デバイセズ研究開発用製品を製造販売するメーカーを展開しています。それ以外にもABBALabでいうハードウェアスタートアップアクセラレータへのサポートを通じて、ハードウェアのスタートアップ支援や、アクセラレーションのプログラム提供などを行っているので、IoTに関わる機会は多いですね。

　▲岡島 康憲さん
岩淵技術商事株式会社 執行役員。インターネット関連企業・NECビッグローブにて、Webサービスの企画立案・運用やインターネット接続型ハードウェアの企画立案に6年間従事する。2011年7月、エネルギー関連ハードウェアや、Webサービスの企画開発を主業務とする岩淵技術商事株式会社を創業。研究開発用電子製品を開発・販売する「東京デバイセズ」を運営している。

友人たちと作った代表的なもの1つは、2009年にTwitterと脈拍のセンサーをつないで「死んだらツイートするデバイス」こと「秋月パルス」。毛細血管の赤外線吸収量から、血流の変化を検出し、Twitterに生命活動を投稿する自作デバイスです。Twitter APIを活用したハードウェアなんですが、同じように個人が開発したWebサービスと絡めたハードウェアで、PCなしで装置単体でネットもつながるのは当時はほとんどなかったと思います。海外のTechCrunchやEngadgetで取り上げられて、日本で話題になりましたね。

白石：へえ、すごいですね。ところで、ハードをいじり始めたきっかけは何だったんですか？

岡島：起業する前は、NECビッグローブで動画配信サービスなどWebサービスの企画運営をやってたんです。多くのWeb系企業が展開していたサービスの大半がPCや携帯電話向け中心だった状況に限界を感じて、上司と研究開発部を作って、今で言うChromecastのようなハードウェアプロトタイプをはじめ、いくつかのハードウェアの企画や試作をしました。また、Kickstarterのようなクラウドファンディングが普及し始めた時期に、個人間送金のようなかたちで投げ銭ができるサービスをリリースしたりしていました。

白石：東京デバイスセズは、販売代理店をやってるんですか？

岡島：いえ、全体の半分以上は自社製品です。複数人で製品開発を行う場合もありますが、大半のものは弊社の代表自身が開発しています。利用シーンやユーザーニーズををうまくとらえることで、少人数であっても魅力ある製品を作れるのではないかと考えています。

WebクリエイターがMakeする必要って、あるの？

白石：ではそろそろ本題に。そもそもWebクリエイターがMakeする必要性って、あると思いますか？

村岡：絶対やらないといけないということはない。jQueryと同じで使いたい人だけやればいいんじゃないかと。ただし、やったら絶対面白いと思いますね。これまでなかった新しいビジネスのチャンスにもなるし、勉強すればハードウェア業界に打って出れるチャンスでもある。

別にフリーランスだから新しい仕事を取りにいこうとか、自分で製品を作って売ろうとかも、今のところ考えてない。じゃあ、なんでかと言えば、答えはハードウェアの人と組んで仕事をするためには、最低限の知識が必要だと思っているから。これからはWebクリエイターもある程度のハードの知識は必要だと思うし、ハードウェア側の人も勉強しているはず。

お互いに共通言語で話せるくらいにならないと、いいものは作れないと思うんです。これからは絶対Makersみたいな仕事が増えていくし、ハードウェア屋さんの発想や知識だけではできないことを作りたいんですよね。Webクリエイターにしかできない新しいソリューションを生み出していきたい。ハード屋と仲良くなりたいから勉強しているし、自分のスキルアップや新たな分野にシフトチェンジするチャンスだと思ってます。

白石：なるほど。今の村岡さんの話には「IoTの仕事が増えていく」、「その中にWebクリエイターの仕事がある」という2つの仮説がありましたね。岡島さんは、どう思われますか？

岡島：IoTの仕事は実際、今も増えています。ここ2～3年は、「ネットとセンサーをつなげてこんなことができませんか？」といった問い合わせも多いですね。CES（Consumer Electronics Sh.ow）でもIoT系のデバイスやプロダクトも増えて、盛り上がっていた。大手メーカーやハードウェアベンチャーからこれまでインターネットと関係なかったデバイス屋さんからの相談も増えてます。

Webクリエイターの仕事チャンスはあると思います。僕自身もハードとソフトの中間の立場なので、バリバリのハードウェア業界の方々にはWebサービス界隈の人の顔をする。 「IFTTT（イフト）っていうのはなあ…」なんて話を偉そうにするし、逆にWebサービス業界の方々にはハードウェア界隈の人の顔をして「お前は知らないかも知らないけど、ハードウェアって超大変なんだぞ」って！

ハードウェア業界の方々の中には、Webサービスの可能性や実装に必要な技術を把握しきれていない人もいる。例えば、福島で放射能のセンサーを作ろうとしたときに、GPSとネットをデバイスにつなぐにはどうしたらいいの？って相談されたとします。通信は3Gならいけるな、Webサーバーを立てて、管理画面作らなきゃとか、Googleアカウント立ててみようかとか…。Web系のエンジニアが必要とされるところはたくさんあります。特にセンサー、デバイス周りの認証回りは、相性がいいと思いますね。

Web的な発想で企画提案する人や、管理画面が必要なのであれば、UIデザイナーも必要とされてくるはず。だから、その仮説は正しいんじゃないかと。

ハードウェアエンジニアとWebクリエイターの違い

村岡：さっきの話すごくわかりますね。最近、ハードウェア屋さんと話をすることが多くなって気づいたんですけど、彼らはソフトウェアやインターネットの知識が意外と少ない。ハードウェアは業務が高度に専門化しているから、設計者だけでは製造できないし、設計も業種が細かく細分化されている。何でもふんわり全部やるWeb業界の文化とは全然違うんですよね。でも、文化の違いを理解するだけでもずいぶん歩み寄れる。まずは業界・風土や仕事の理解ができてから、彼らと話がスムーズにできるというのがスタート地点。

そうなるとWebクリエイターはここからどういうソフトを作ったらいいか、サービスまで広げて考える。ソフトからサービスまで考えることがハード屋さんにはないから、新鮮に映るみたいです。デバイスを作る理由をサービスを作ることまでつなげてあげると驚かれるんです。これはやってみてわかったこと。ハード屋さんには刺激を与えられているし、面白いと言ってもらえる。本質的な新しいジャンルとのマッシュアップだと思っている。まだまだ可能性があるし、新しくて楽しい仕事が増えていくので、みんなも早くやったほうがいいと言いたい。

白石：僕は自分がハードを知らなさすぎるせいか、ハード屋さんがソフト屋さんになるほうが簡単じゃないのって思ったりします。ソフトウェア作りって、そんなに難しい気がしないっていうか…。

村岡：むこうも同じこと思ってますよ(笑)。電気回路を覚えるほうが、ソフトウェアやWebサービス考えるより簡単じゃないかって。

岡島：どういうレイヤーで作るかにもよりますけど、例えば銀行のシステムを作るのって個人レベルじゃ厳しいじゃないですか。PHPでちょいちょいとWebサイト作るのとは全然違う。

それと同じで、東京デバイセズは何千万の製品を完全なものを安定的に供給するのは無理だけど、ハッカブルな製品を毎月数台出すくらいなら問題ない。十分売り上げが立つんです。やること次第だし、比べることはあまり意味がない。

IoTの意味って、サービスのモノ化だと思っています。IoTはソフトのハード化なんだと。サービスを作るためにスマートフォンだけじゃ足りないからモノに手を出しているんだと。それが本質なんですね。僕がハードをいじりはじめた理由なんです。興味があったわけじゃないし、PCとガラケーでできることに限界を感じていたから。

大手メーカーが扱っていないモノを作ろうと思ったときに、画面の外に出たくてハードに手を出した。やりたいことに限界を感じたからハードを作り出したんです。ハード屋さんハードがあるからこそ、いわゆる従来型のハードウェアの企画開発フォーカスしてしまって、Webサービスによってハードウェア製品の価値を伸ばすことに検討の余地を残してしまっていると思います。

今後のIoTビジネスはどうなる？

村岡：サービスというのは「モノを売ってなんぼ」だけじゃない。ハード屋さんはモノを作って売る対価のやりかたに慣れすぎて、それに気づかないんです。クラウドを使うとか、ソフトばらまいて広告を売るとか、Webのマネタイズの話をすると、ハード屋さんに「思いもつきませんでした」と驚かれます。

高岡：今後のIoTビジネスの話は興味深いですね。IoT勉強会をやっていると大きく二つの流れがあるような気がします。Makersやデジタルファブリケーションの文脈のIoTと、IBMやインテル、シスコなどの大きいビジネスやスマートグリッドなどの文脈。これが両方が融合していない気がするんですよね。分断されてるというか。Webエンジニアがどっちの文脈でいくのがいいか悩みますね。

先日ガートナーは、ハードウェアスタートアップベンチャーはあと2～3年後で限界がくると指摘していましたね。スタートアップが大企業にとって食われて、やれることがなくなってくるというものでした。

白石：メイカームーブメントが終わるということ？

岡島：今の話で2つ面白いと思ったことがあります。1つはシスコやインテルのIoTと、スタートアップのIoTに乖離があるという点。シスコやインテルは、ネットに繋がるハードウェアをどういうプロトコルでつなぐといいかという点にフォーカスしている。そもそも考えている土俵が違うから、ずれがあるんですよね。理由はレイヤーが違うから。

ハードウェアスタートアップ限界説については、ハードウェアスタートアップがハードウェアを作るのはものすごく大変なので、実際今も起きている問題です。イニシャルコストが大きい、設計や試作も大変、サポートも大変と、ハードウェアはお金がかかるビジネスだから。

村岡：Kickstarterはバブルみたいなものだって、言われてますもんね。

岡島：僕は、ハードウェアを作るコストが下がってくれば、その構造が変わっていくと思っています。ガートナーの発表は製品を設計・製造・販売する環境が今と変わらない前提でのものだけど、製造コスト、サポートのハードルが下がれば、それぞれの枠組みが変わって、さらに多くハードウェアスタートアップが入ってくる。そうなると必然的に、ブレイクスルーが起きてくる。

それは、インターネット業界のスタートアップと仕組みは同じなんですよね。サーバーにはお金がかかるし、新しい技術の伝搬コストや情報共有するコミュニケーションコストもかかるから、大手しかできないと思われてたことが、今はサーバーも安くなったし、GitHubが出てきてベンチャーでも遜色なく作ることができる。

高岡：そこでまさに、私たちWebクリエイターの力が役立つ可能性が高いわけですよね。

岡島：インターネット業界では、例えばUberのように、物理的な不動産や動産に対してブレイクスルーを起こしてきた。それと同じことが起こればいいだけ。

白石：ハードウェアの製造コストが今は高いと思われているけど、ブレイクして、コストが下がれば、スタートアップは引き続き盛り上がるということですね。

岡島：もしハードウェアスタートアップのこの盛り上がりが落ち着くとしたら、潜在的な燃料がありそうなバイオ領域に関心が移ることじゃないかって思っています。大手の伸びに押されて尻つぼみになるシナリオはあんまりピンとこないですね。

村岡：ああ、確かにそれはありますね。

IoTの時代、Webクリエイターの仕事はどう変わる？

白石：IoTの時代が来るとして、僕らの仕事ってどう変わっていくのか意見を聞かせてください。

岡島：まず、Webのビジネスにどう関わっているかが、1つ大事な判断材料ですね。Webサービスの企画立案している人にとっては、企画の幅を広げるのにいいブーム。アタマのかたすみに考えておいたほうがいいと思います。サーバーサイドをやっている人は、IoTはセキュリティやプライバシーの問題とかで、ツッコミどころが多いから需要が増えると思います。

白石：TechCrunchでも、IoTのセキュリティとプライバシー問題は取り上げられてましたね。　

高岡：求められる人材としては、ハードウェアの知識もWebの知識もある人だけど、今はまだそうそういないですよね。私たちがハードウェアを理解したり、ハードウェアエンジニアがソフトを理解する必要がある。

白石：今は売り手市場だけど、ハードウェアエンジニアのニーズってどうなんですか？

岡島：ハード系のエンジニアも、めちゃくちゃ足りないって言われてますね。ハード系はフリーエンジニアはほとんどいないんです。大手メーカーがつぶれたら、数万人のエンジニアがが野に放たれる。エンジニアを解放してほしいって思ってます(笑)。

「DMM.make AKIBA」の施設運営やハードスタートアップ支援プログラムを小笠原という人間と一緒にやっているんですけど、いろいろなビジネスを通じた売上も重要である一方で、職業の枠をどれだけ増やすか、ハードウェアエンジニアの仕事をどれだけ楽しくできるかをよく話したりします。

ハードウェアビジネスに関わるためには大手メーカーに入るしか道がない、その状況を変えたい。これからは、想像もしないような職業が、新たなハードウェアニーズの隙間から出てくるはずなんです。そのためにもハードウェアのフリーエンジニアをどうやって増やすかを考えています。

白石：IT業界はゼネコン構造が多いですが、ハードウェア業界はどうなんですか？

岡島：見方によっては、今のハードウェア業界は20年前のインターネット業界に似ていると言われています。だが、大手しかできなかったことがより低コストでできるようになって、つまり「ハードウェアビジネスの民主化」が進むことで、個人でもビジネスでできるようになった。これからはもっと盛り上がっていくんじゃないでしょうか。

高岡：我々Webエンジニアがハードウェアビジネスに飛び込んで、成功する確率はあるのでしょうか？ IoTを勉強すれば、仕事の幅は広がるけど、ガチに参入したらどのくらい成功できるものなのか気になります。

岡島：インターネットのサービスの成功確率とほぼ変わらないと思います。0.00001％とか(笑)。Webのサービスも、生き残る確率は限りなくゼロに近いですよね。

白石：大半がつぶれるってことですか？

岡島：生まれてつぶれていくのが認識できないくらいですね(笑)。今はまだ母集団が少ないから、目立っているけど。ただ認識しないといけないのは、きちんとバリューが提供できるサービスなのかどうか、お客さんに価値を与えることができるのかどうか、自分達でないとできないサービスなのかということ。ハードもソフトも、そこを設計してサービスを考えられる人は生存確率が高い。

生粋のハードウェア屋よりも、そういう意味ではWebクリエイターの方が成功できるはず。みんな、はてブの「成功するための○○の法則」とか大好きじゃないですか。そいう思想に慣れているのが、Web系エンジニアの強みですよね。

だから、WebクリエイターもMakeしよう！

白石：では、最後にWebクリエイターとしてのメッセージを一言！

村岡：Webクリエイターもハードウェア知識も身に付けるべき、ということですね。ソフトとハードエンジニアの垣根がなくなってきたし、フルスタックエンジニアもハードの設計ができることが求められるようになると思います。

5年くらい前にHTML5の時代がくるって言われたけど、実際にHTML5が勧告されてから勉強し始めてたんでは、すでに遅い。たぶんそれと同じことが起こるんじゃないかと。「Arduinoとかできますよね？」って聞かれて、普通に「はい、やれます」と答えるような人が給料もらえるようになるんじゃないでしょうか。

高岡：なんだかんだ言っても、現実のものが動くのは楽しい。スクリーンを出て「現実をハックしよう！」ってことです。

岡島：画面の中だけに満足できなければ、ハードをやればいい。ただし、自分が興味があるものをやればいいし、世間にまどわされなくていい。受け身じゃなくて、好奇心をもってやるべき。時代の先端にいた人たちは、今に満足できなくて、踏み出した人たちなだけなんですから。

ここ数年、モノのインターネット: Internet of Things（IoT）が盛り上がってきています。今年のCES 2015（世界最大級のIT＆家電見本市）でも IoTが大きなテーマとなったようですね。具体的なプロダクトやサービスも数多くローンチされ、今年はIoT元年ともいわれています。

「IoTとは何なのか」「なぜ今注目を集めるのか」「Web of Thingsとは」について解説します。そこから今後のIoTと、我々Webクリエイターがどう関わるのか、についても考えてみましょう。

モノのインターネットとは？ IoTの本質を考える

Internet of Thingsとは、さまざまなモノがインターネットに接続され、センサーなどによりデータを測定したりコントロール可能にする概念だと言われています。モノがインターネットに繋がっていろいろできるということですが、その実体はなんなのでしょう。単にいろんなモノがインターネットに繋がることでしょうか。例えば、冷蔵庫がインターネットに繋がってレシピが見られるようになったら、それはIoTでしょうか。

それもIoTだという人もいるかも知れません。しかし、それだけでは少し物足りないと私は考えています。誤解を恐れずに言うと、IoTの本質はセンサーデータとサービスの融合です。モノの状態やその場の状況を測定し、その情報をネットワークを通じてサーバーに送り、そのデータを分析・解析し、適切なサービスを提供する。それまでやってこそIoTの本領が発揮されるのです。

先の例だと 単にモニタを付けただけの冷蔵庫ですよね。冷蔵庫内の温度、湿度、内容量、内部の空気の状態、カメラ画像などを取得し、そのデータをクラウドへ送り、分析することによって冷蔵庫内の食品の状態を管理しユーザーへ適切な情報を提示する。さらに各家庭の冷蔵庫の使われ方を横断的に分析すればいろんな可能性が考えられます。

このように、センサーとビッグデータによるサービスが新しいビジネスを生み出すと期待されています。

IoTの対象分野: すべてがインターネットにつながる

分かりやすく冷蔵庫の例で説明しましたが、IoTの対象はもちろん家電だけではありません。いわゆるスマート家電といったものや、それらを統合したスマートホームの実例も出てきています。

ヘルスケア業界も機器メーカだけでなく、Nikeのようなメーカーや、スタートアップも多く参入しています。もちろん医療分野でも、センサーを埋め込んだカプセルを飲み込んで消化器系を検査する内視鏡のような新しい検査や治療が期待されています。

生活に関わる場だけでなく、むしろそれ以上に産業界でも大きな変革をもたらすとも言われています。建機や産業機械、工場やビルに取り付けたセンサー群によって状態をリアルタイムで管理し、作業の効率化や故障の事前検知によってダウンタイムをゼロにすることを目指す取り組みもあります。

車産業ではコネクテッドカーと自動運転を実現するキーとしてIoTが注目を浴びています。他にも、農業、エネルギー、教育、公共、福祉などの幅広い分野での活躍が期待が大きく膨らんでいます。その市場規模は 2020年には 3兆400億ドルとも言われます。（※ 世界IoT（Internet of Things）市場予測を発表）

なぜ今IoTなのか: IoT時代の幕開け

モノにセンサーを付け、データを集めて処理をするという概念は昔からありました。Internet of Thingsという言葉も1999年に論文で出てきます。以前からあるものがなぜ今注目されているのでしょう。いくつかの要因がありますが、大きなポイントは3つあると考えます。

小型で安価なセンサーの普及

ハードウェアの進化によりセンサーやチップの小型化、省電力化が進みました。また量産性も上がり、安価に作れるようになってきました。 これによりIoTデバイス自体の小型化や低価化はもちろんのこと、センサーを多数搭載したデバイスや、大量にセンサーを環境に配置するなど、従来コスト的に厳しかったことが実現可能になってきました。

クラウドやビッグデータ基盤の成熟

ここ数年のクラウドとビッグデータの発展は、言うまでもありません。センサーから送られる大量のデータをクラウドのストレージに格納し、ビッグデータ分析により高パフォーマンスの解析が簡単に安価に可能になりました。またそれらを活用したサービスを立ち上げるコストも格段に下がってきています。

メイカームーブメント

ハードウェアとソフトウェアの発展により、シンプルなIoTデバイスであれば簡単に作れる土壌ができてきました。そこにメイカームーブメントとデジタルファブリケーションの波が起こり、大きな潮流となっています。Makerの祭典である「Maker Faire」は、世界中で開催され毎年規模を拡大しています。開発者が増えることでツールやライブラリが充実し、さらに開発者が参加しやすい環境が生まれています。

ハードウェア（モノ）とソフトウェア（サービス）、それに開発者（人）が揃ってきている今、まさにIoT時代の幕開けですね。

Web of Things: すべてがWebにつながる

IoTの一つの側面として、Web of Things:WoTといわれるものがあります。インターネットとWebの関係のように、IoTをセンサー類のネットワーク層と考えたとき、WoTは上位のアプリケーション層として位置付け、そこにWeb技術を利用する構想です。端的に言ってしまうと、なんでもWebに繋げよう、ということですね。

Webに繋げるということは、広く普及しているWeb技術を活用できるということです。開発者数の多いWebエンジニアがIoTに参加することが可能になります。開発者の増加は産業の発展にもつながり、IoT/WoTはますます進化のスピードをあげていくでしょう。

Web標準化団体W3CでもWoTコミュニティの設立やワークショップが開催され始めました。WoTで必要なものを整理し標準化することで、より活発な開発が期待されます。まだまだ議論中ですが、現在のところ4つの層が提案されています (以下は多少専門的な内容／用語を含みますので、「これからのIoT」の節まで飛ばしてくださっても構いません)。

Accessibility Layer

Web APIを使ってモノに接続し、操作・プログラミング可能にするWoTのコアレイヤーです。RESTful APIを使うことで、既存のWeb（HTML、JavaScriptなど）とシームレスに接続可能にします。

一方IoTではHTTPのリクエスト/レスポンスパターンよりも、MQTTやCoAPといったPublish/Subscribe（出版-購読）モデルのプロトコルが使われることも多くあります。そのような場合、WebSocketを使用してプロトコルを変換し、REST APIを補完します。

シンプルなセンサーや小型デバイスでは、パフォーマンスやバッテリーの問題でZigBeeやBLE（Bluetooth Low Energy）を使うことも多く、直接HTTPアクセスが難しいことがあります。非IP層とWebを繋ぐスマートゲートウェイを利用することで、その問題を解決します。スマートゲートウェイを使えば、ネットワーク層以下を隠蔽し、先ほどのプロトコル変換なども行えます。

Findability Layer

接続可能なモノがあるのか、また場所はどこなのか、を見つけるための層です。今後、センサーが環境に大量に増えた場合などに必要になってきます。このレイヤーではセマンティックWebの考えが使われます。MicrodataやRDF/RDFa、JSON-LDなどでモノがどういうサービスと接続可能なのか、どういうAPIがあるのかなどを定義し、それらを検索可能にします。

Sharing Layer

Web of Things は個人情報を含むビッグデータを扱うことも多くあります。そのため、サービス間でデータを連携する場合、どのモノの情報をどのサービスが使用できるのか効率的に安全に共有する必要があります。そういった情報をソーシャルネットワークで解決できないか、というSocial Web of Thingsというアプローチもいくつかあります。

Composition Layer

最後のレイヤーでは、モノと連携したアプリケーションを簡単に作成するために、サービスとモノのデータを高いレベルで統合することを担います。Web2.0の時代のサービスを統合するマッシュアップに影響を受け、物理的なモノとサービスを統合するフィジカルマッシュアップを行うための基盤や仕組みを提供します。例えば IFTTT のように誰でも簡単にプログラムのスキルを必要とせずとも統合できるようなツールやアプリケーションがいくつか提案されています。

他に面白い動きとして、Web of Thingsのある種究極ともいえる Physical WebというGoogleが立ち上げたプロジェクトがあります。 全てのモノにURLを与え、専用アプリではなくWebだけで、ワンタップでアクセス可能にする構想です。仕様・設計はオープンにし、WoTの標準を目指しています。中央集権的なハブを介さず、網目状にURLでリンクするというのがまさにWebらしい考えですね。

これからのIoT: 僕らがこれからできること

グーグルのエリック・シュミット会長が、「インターネットは近い将来、生活のあらゆる面に浸透し事実上『姿を消す』だろう。『センサー類や機器が世の中にあふれ、全く気にならないほど身の周りのいたる所に存在するようになる』と語ったと話題になりました。

そこまで進んだとき、IoTはどうなっているでしょうか。最初にIoTの本質はセンサーデータとサービスだと言いました。センサーが当たり前になった将来、IoTはモノがインターネットに繋がるというレベルを超えて、これまで関係がなかったような事業、産業同士が繋がり、新しいサービスの萌芽が数多く見られるようになるでしょう。

そんな時代に、Webクリエイターだからこそ活躍できることがあると思っています。Web業界は日々新しいビジネスモデルのサービスにチャレンジしています。その業界に身を置く我々は、まずサービスから考えることに長けています。また、UXDのようなユーザー体験を重視したサービス設計も行われ、サービスに対して真摯に向き合っています。それはこれからのIoT時代において、非常にアドバンテージとなるでしょう。

そこに加えて、今後僕たちWebクリエイターに必要なスキルは、境界を越えるスキルではないかと思っています。ハードウェア/ソフトウェアの境界はもちろん、デザイン、企画、営業、経営などの職種を越え、異なる事業/産業の境界をも越えたところに、新しい可能性が広がっているように思います。そのあたりの詳細は、別途行った対談でまとめられるかと思いますのでお楽しみに。

おわりに

IoTの定義は非常に曖昧で、各社各団体が様々なことを言っています。今回の私のまとめ方も全ての人が納得がいくものではないかもしれません。しかし、正確な定義はあまり重要ではないと考えています。例えば、クラウドの正確な定義より、そこで何ができるのかが重要ですよね。IoTも同様で、IoTを使って何ができるのか、どんなサービスが実現できるのか、を考えることが重要です。

さて、この記事では「IoTとは何か」について長々と説明してきました。しかし、IoTの楽しさは、言葉では表現しきれません。自分が思うとおりに、実際にモノが動くことはクリエイターなら誰しも感動するはずです。子供の頃のワクワクする感情が沸き上がってくること請け合いです。もしまだIoTを体験されてない方は、ぜひスクリーンから飛び出して、リアルをハックしてみてください。