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で、面白いモノを作っていきましょう。

2015年はIoT元年と言われるくらい、IoTやWoTという単語がバズワード化してきました。2014年頃からArduinoやRaspberryPi、Galileo、Edisonといったマイコンボードが急激に人気になってきましたね。Web開発者がハードウェア領域に進出しやすくなりました。ただ、センサーの利用など応用的なことをしようとすると、GPIOや電流などの知識をある程度は知っておく必要があります。

今回は、Webの知識だけでほぼ操作でき、初心者向けのTesselというマイコンボードを紹介します。具体的には、Tesselの開発環境整備から環境センサを扱うところまでを紹介したいと思います。Webエンジニア向けに説明を書きましたが、Webデザイナーやディレクターなど、非エンジニアの方でもチャレンジしていただけたら幸いです。

Web制作者向けマイコンボードTesselとは

• 参考リンク 次世代マイコン「Tessel」はJavaScriptとNode.jsをサポートし、Wi-Fiからアップデート可能
• 参考リンク JavaScript（Node.js）で色々なハードウェアモジュールが動くマイコンボードTesselを手に入れたので詳しく調べてみた

>「Tessel は、Node.jsベースのJavaScript環境を利用してハードウェア制御可能なマイコンボードです。 スタンドアロンで WiFi接続可能で、USBによる電源供給のみで動作します。 本体にはモジュール拡張用に4つのポートがついており、ここにSDカード読み込みモジュールやオーディオ入出力モジュール、加速度や温度・照度などのセンサモジュールなどの様々なモジュールを差し込むことで拡張が可能です。

そしてこの一つひとつのハードウェアモジュールを操作するためのNodeモジュールがnpmで公開されており、バグ修正も含めて Node.js のプラットフォームの上に乗っかっている形でトキメキます」

※この説明はhecomiさんのサイトより抜粋です。

JavaScript(Node.js)で開発可能

TesselはJavaScript(Node.js)で操作可能なプログラムを書けるマイコンボードです。JavaScriptで記述できるので、Web制作者でも比較的とっつきやすい仕様となっています。Webエンジニアやデザイナーにとっては慣れ親しんでいる言語を使って開発ができるので、数分でセンサーを扱うことができるようになります。

センサーの使いやすさも抜群

またセンサーを使った拡張も簡単で、専用モジュールを購入し、パズルのように組み立てるだけでセンサーを扱うことができます。GPIOや電流は全く意識しなくていいので、初めてマイコンボードを使ってセンサーを扱う人にはオススメです。

• 公式サイト https://tessel.io/
• 公式チュートリアル http://start.tessel.io/install
• 公式チュートリアル日本語 http://start.tessel.io/ja/install

Tesselの購入

Tesselはスイッチサイエンスのサイトから購入できます。
今回は本体と一緒に環境センサの購入もしました。ArduinoやRaspberryPiと比べると比較的値段は高めですが、迷わずに作業できるため時間はかからないと思います。入門にはぴったりです。

• Tessel メインボード 9,720円(2015年3月時点)…Tesselの本体です。
• Tessel 環境センサ 3,240円(2015年3月時点)…明るさや音の大きさを感知します。

注文してから2~3日で届きました。 本体、USBケーブル、Tesselのシールが1セットです。今回は環境センサも注文したので別の袋に入って環境センサが届きました。

本体は結構小さいです。名刺の2/3〜3/4くらいの大きさです。

環境センサはさらに小さいです。

開発環境準備

今回はMac(Yosemite)での開発をしていきます。MacとTesselをUSBケーブルで接続して、Macで書いたプログラムをTesselで実行することができます。まずは、開発環境を整えましょう。

バージョン

• Mac OS X 10.10 Yosemite
• Node.js 0.12
• Tessel CLI v0.3.21

Node.jsのインストール

すでにNode.jsが利用できる環境の方は、読み飛ばしてください。

Node.jsのインストールはこちらの記事を参考にしましょう。 いまアツいJavaScript！ゼロから始めるNode.js入門〜5分で環境構築編〜

NVMが利用可能になったら

$ nvm install v0.12

とするとNode.jsの0.12をインストールできます。

$ node -v
v0.12.0

Node.jsのバージョンが、最新の0.12になっていることを確認できました。

Tessel CLI(コマンドラインインターフェイス)のインストール

Node.jsをインストールすると、NPM (Node Package Manager)コマンドが使えるようになります。 NPMはNode.jsのいろいろなモジュールの依存関係を解決して、簡単に利用できるようにしてくれるNode.jsのパッケージマネージャーです。

Tesselの開発環境であるTessel CLIは、NPMでインストールすることができます。

上記の手順でNode.jsをインストールした時点で、NPMは利用可能になっているはずです。以下のコマンドを実行しましょう。

$ npm install -g tessel

特にエラーがなければ、tesselコマンドが使えるようになります。tesselと入力するとコマンド一覧を見ることができます。

$ tessel

Tessel CLI
Usage:
   tessel list
   tessel logs
   tessel run  [args...]
          run a script temporarily without writing it to flash
          -s push the specified file only (rather than associated files and modules)
   tessel push  [options]
          see 'tessel push --help' for options list
   tessel erase
          erases saved usercode (JavaScript) on Tessel
   tessel repl
          interactive JavaScript shell
   tessel wifi -n  -p  -s 
   tessel wifi -n 
          connects to a wifi network without a password
   tessel wifi -l
          see current wifi status
   tessel stop
          stop the current script
   tessel check 
          dumps the tessel binary code
   tessel blink
          uploads test blinky script
   tessel update [--list]
          updates tessel to the newest released firmware. Optionally can list all builds/revert to older builds.
   tessel debug [script]
          runs through debug script and uploads logs
   tessel version [--board]
          show version of tessel cli. If --board is specified, shows version of the connected Tessel

例えば、Tessel CLIのバージョン確認をするときはtessel versionとなります。

$ tessel version
INFO v0.3.21

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

これもコマンド一つで実行できます。tessel updateコマンドでTesselのファームウェアを更新しましょう。ファームウェアの更新がMac経由で簡単に行えるのはいいですね。

ここからTesselとMacをUSBケーブルで接続しての作業になります。

$ tessel update

TESSEL! Connected to TM-00-04-f000da30-006a434c-328965c2.
INFO Checking for latest firmware...
INFO Wifi version is also outdated.
INFO Downloading remote file https://builds.tessel.io/wifi/1.28.bin
INFO Wifi patch uploaded... waiting for it to apply (10s)
INFO ...
INFO ...
INFO ...
INFO ...
INFO ...
INFO ...
INFO
INFO Downloading remote file https://builds.tessel.io/firmware/tessel-firmware-current.bin
INFO Updating firmware... please wait. Tessel will reset itself after the update
INFO Complete  1175988 /1175988

何はともあれ、Hello World(Lチカ)

プログラミングの最初は、Hello Worldですね。 電子工作界隈だとHello WorldにあたるのがLチカ(LEDをチカチカさせること)です。

まずは公式サイトの手順を実行してみましょう。

まずプロジェクトフォルダを作成します。

$ mkdir tessel-code
$ cd tessel-code

package.jsonを作成します。いろいろと質問が出てきますが、とりあえず今回は全てEnterで大丈夫です。

$ npm init

$  cat package.json

{
  "name": "tessel-code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

では実際にblinky.jsを描いてみたいと思います。エディタは慣れ親しんだものを使いましょう。 JavaScriptのコードなので、大抵のエディタがシンタックスハイライトしてくれるはずです。 ちなみに、私は最近Atomで書いています。

$ atom blinky.js

以下のコードをコピペして、blinky.jsを作成しましょう。

// Import the interface to Tessel hardware
var tessel = require('tessel');

// Set the led pins as outputs with initial states
// Truthy initial state sets the pin high
// Falsy sets it low.
var led1 = tessel.led[0].output(1);
var led2 = tessel.led[1].output(0);

setInterval(function () {
    console.log("I'm blinking! (Press CTRL + C to stop)");
    // Toggle the led states
    led1.toggle();
    led2.toggle();
}, 100);

実行

↑のjsファイルを作成したら、同じフォルダ内で以下のコマンドを実行しましょう。

$ tessel run blinky.js

MacからTesselにプログラムが送られて、Tessel内で実行されます。成功するとLEDがチカチカ光ります。

ちなみにLEDはTesselのモジュールの中でもハードウェアモジュールに位置付けられていて、ドキュメントが他のモジュールとは別のページになっているので注意しましょう。 https://tessel.io/docs/hardwareAPI#tessel

エラーが出ても焦らずに対応しましょう。その１

筆者が開発中に遭遇したエラーを簡単にまとめてみます。

ファームウェアアップデートをしていない状態で実行

ちなみに、私はtessel updateを行わずに実行しようとしたら、以下のエラーが出ました。

$ tessel run blinky.js

TESSEL! Connected to TM-00-04-f000da30-006a434c-328965c2.
WARN There is a newer version of firmware available. You should run "tessel update".
INFO Bundling directory /Users/sugawara_nobisuke/n0bisuke/lab/tessel-code
INFO Deploying bundle (4.50 KB)...
INFO Running script...
/app/blinky.js:9: attempt to index field '?' (a nil value)

tessel updateコマンドを実行したら解消されましたが、参考までに載せておきます。

環境センサー(Ambient)で音と光を取得

Lチカが終わったら、次はいよいよセンサーを使ってみたいと思います。今回は汎用的に使えていろいろと応用が効きそうな環境センサー(Ambient)を使います。

環境センサーを使うことで音の大きさと明るさの値を取得することができます。 環境センサーの使い方は こちらのページに書いてあります。また、Tesselのセンサーモジュールは別売りになっているので注意しましょう。

開発にあたりモジュールを追加します。

$ npm install --save ambient-attx4

環境センサーをポートに差し込みましょう。

画像の向きにTesselを置いた時の左下が、ポートAになります。ポートはA,B,C,Dがあり、どのポートに差し込んでも動作しますが、プログラムでポートを指定する際は適宜接続しているポート名に変更して下さい。

以下の写真は、ポートAに環境センサーをポートBにオーディオモジュール(別売り)を接続した例です。

blinky.jsの時と同様に、以下のコードをコピペしてambient.jsを作成しましょう。

var tessel = require('tessel');
var ambientlib = require('ambient-attx4’); //ドキュメントのコードから書き換え

var ambient = ambientlib.use(tessel.port['A']); //ポートBにセンサーを取り付ける場合はBを指定

ambient.on('ready', function () {
  // Get points of light and sound data.
  setInterval( function () {
    ambient.getLightLevel( function(err, ldata) {
      ambient.getSoundLevel( function(err, sdata) {
        console.log("Light level:", ldata.toFixed(8), " ", "Sound Level:", sdata.toFixed(8));
      });
    })
  }, 500); // The readings will happen every .5 seconds unless the trigger is hit

  ambient.setLightTrigger(0.5);

  // Set a light level trigger
  // The trigger is a float between 0 and 1
  ambient.on('light-trigger', function(data) {
    console.log("Our light trigger was hit:", data);

    // Clear the trigger so it stops firing
    ambient.clearLightTrigger();
    //After 1.5 seconds reset light trigger
    setTimeout(function () {
      ambient.setLightTrigger(0.5);
    },1500);
  });

  // Set a sound level trigger
  // The trigger is a float between 0 and 1
  ambient.setSoundTrigger(0.1);

  ambient.on('sound-trigger', function(data) {
    console.log("Something happened with sound: ", data);
    // Clear it
    ambient.clearSoundTrigger();
    //After 1.5 seconds reset sound trigger
    setTimeout(function () {
      ambient.setSoundTrigger(0.1);
    },1500);
  });
});

ambient.on('error', function (err) {
  console.log(err)
});

実行してみます。

$ tessel run ambient.js

TESSEL! Connected to TM-00-04-f000da30-006a434c-328965c2.
INFO Bundling directory /Users/sugawara_nobisuke/n0bisuke/lab/tessel-code
INFO Deploying bundle (439.50 KB)...
INFO Running script...
Old module firmware detected. Updating...
Uploading new firmware...
Update finished!
Light level: 0.08105469   Sound Level: 0.02148438
Light level: 0.08105469   Sound Level: 0.01660156
・
・
・

センサーが取得した明るさと、音の大きさがコンソールに表示されます。試しに、センサの上に手をかざして暗くしてみたり、指ぱっちんなどで音を立ててみて、値が変化するのを確認してみましょう。

Ambientの詳細なメソッドはこちらになります。

先ほどのLEDと組み合わせれば、夜になって暗くなったらLEDを自動的に光らせるといったことも簡単にできそうですね。

エラーが出ても焦らずに対応しましょう。その2

この時点で、筆者が開発中に遭遇したエラーを簡単にまとめてみます。

実行はnodeコマンドではなくtessel run

いつものくせでnodeコマンドで実行しようとするとこうなります

これはNode.jsでの開発を普段行っている人にありがちな現象かもしれません。通常Node.jsではnodeコマンドでプログラムを実行しますが、Tesselではtessel runコマンドを使います。 間違えると、以下のようなエラーに遭遇しますので注意しましょう。

$ node ambient.js

module.js:338
    throw err;
          ^
Error: Cannot find module 'tessel'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object. (/Users/sugawara_nobisuke/n0bisuke/lab/tessel-code/ambient.js:10:14)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)

モジュールの接続が不安定な時もあります。

特に問題なくコードを書いていても、実行時にこんなエラーが起きることがあります。

$ tessel run ambient.js

Error: Improperly specified Tessel port.
...es/ambient-attx4/node_modules/attiny-common/lib/index.js:24: attempt to index local 'hardware' (a nil value)

これはどうやらモジュールが上手く接続できてなかったみたいです。 センサモジュールを繋ぎ直して再実行したら、うまくいきました。

Tessel 2

この記事執筆途中でTessel 2がアナウンスされました。 Tessel 2ではNode.jsだけではなく、PythonやRustでも処理を記述できるようになったみたいです。USBポートやEthernetポートが新設されたり、Wifiやその他モジュールも一新されているみたいです。現時点でプレオーダーできるみたいなので、興味のある方は注文してみてはいかがでしょうか？

まとめ

いかがでしたでしょうか？ 想像以上に簡単にセンサーを扱うことができたのではないかと思います。

TesselはWeb開発者にとってIoTの入り口になってくれるデバイスなので、Web開発者でハードウェア知識はないけどIoT領域に触れてみたいと考えている方々にはぴったりなのではないでしょうか。

今回はIoTと言いつつも、I(Internet)の部分には全く触れませんでした。次回はTesselをWifiネットワークに接続してWebサービスと連携して応用的なものを作ってみようと考えています。

興味を持った方は、ぜひTesselを使った開発にチャレンジしてみましょう！

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とかできますよね？」って聞かれて、普通に「はい、やれます」と答えるような人が給料もらえるようになるんじゃないでしょうか。

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

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

Arduinoなどのマイコンのおかげで、ハードウェア開発、特にプロトタイプづくりに関するハードルはだいぶ下がりました。自分（白石）のような人間でも、LEDをチカチカさせるくらいのことはやってみたことがあり、「こんなに簡単にハードを制御できるなんて！」と感動したのを覚えています。ただ、プロトタイプを一度作ってみると、更なる大きな疑問がわいてきます…身の回りにあるハードと、自分の作ったプロトタイプの落差に驚愕するのです。

自作したプロトタイプを、カッコいい量産ハードウェアに持っていくためには、どんな作業が必要なの？ 今回はそんな素朴な疑問に答えてもらうべく、Cerevoさんにお邪魔してプロダクトマネージャーの國舛さんにお話を聞いてきました。

Cerevoといえば「LiveShell」などのハードウェア制作で有名なハードウェアスタートアップ。先日のCESでは「Top Tech of CES」を受賞されたりと、その快進撃は止まりません。今回インタビューに答えていただいた國舛さんは、現在はCerevoのプロダクトマネージャーを務めていらっしゃいます。が、「SmartTrigger」という製品を手がける前までは、ハードウェア開発の経験を持たないWebエンジニアでした（僕らと一緒ですね！）。

　▲株式会社Cerevo プロダクトマネージャー　國舛等志さん

そんな國舛さんに、「量産ハードウェアの作り方」をわかりやすく語っていただきました。では、お楽しみください！

SmartTriggerの説明

白石: 今回は、國舛さんがはじめて中心となって手がけられた量産型ハードウェア、「SmartTrigger」を題材に、ハードウェア開発の実際についていろいろ伺いたいと思っています。どうぞ、よろしくお願いします。

國舛: よろしくお願いします。ではまず、SmartTriggerとはどんな製品かを簡単に説明したあと、開発のお話をしましょうか。

こちらがSmartTriggerです。簡単に言うと、カメラとこのデバイスをつないでおくことで、スマホからリモートでカメラを操作できる、という製品ですね。 シャッターを押すのはもちろん、連写やタイマー撮影もできます。

　▲聞き手：HTML5 Experts.jp編集長　白石俊平

白石: おもしろいですねー。SmartTriggerが、スマホから送られてくる命令に従って、カメラを操作するという感じなんですね。

國舛: そのとおりです。タイムラプス動画（時間をかけて連続撮影した写真を動画のように高速再生するテクニック。時間を圧縮したような感覚の動画を得られる）も、間隔や秒数などのパラメータをセットしたら、あとはSmartTriggerが勝手にやってくれます。その間、スマホでは別の操作をしていても全然構いません。

白石: カメラとSmartTrigger、スマホはどういう風に通信するんですか？

國舛: SmartTriggerとスマホの間はBluetoothで無線通信します。SmartTriggerとカメラはケーブルで有線接続。メーカーの違いはケーブルで吸収していますので、国内メーカーのカメラはほとんどサポートできています。

白石: なるほど、手持ちのカメラに合うケーブルも同時に購入する、というかんじなんですね。
では本日は、この「SmartTrigger」を制作するにあたってのいろいろなお話を伺いつつ、「Webエンジニアが量産品のハードウェアを作るまで」をお聞きしたいと思います。

元々はWebエンジニアが趣味で始めたプロジェクト

白石: 國舛さんは以前はWebエンジニアだったとお聞きしていますが、そんな國舛さんがSmartTriggerを作るようになった経緯と製作過程を教えて下さい。

國舛: はい、元々私はJavaで業務系のアプリを作っているエンジニアだったのですが、数年前にCerevoに転職しました。この会社では、最初はPythonでサーバサイドのプログラミングを担当していて、そこからiOSのアプリエンジニアにシフトしていきました。

SmartTriggerについては、最初は趣味でやっていたんです。テレビを見ていたら「タイムラプス」という表現方法があることを知り、それをキレイに撮れるようなデバイスはないかと探していました。

でもその当時の製品は割と高くてかっこよくなかったんです。買おうかどうか迷って、ネットで情報を収集しているうちに、「どうやら自分でもプロトタイプなら作れるんじゃないか」と思うようになりまして。同じようなものを作っている方の情報を参考にしながら、同じようにやったらとりあえずできた。

でもそこで自己満足してしまって、その後はしばらくほっといてたんですよ。その後会社でアイデアを出す場があったので、そこでこのアイデアを提案したことが、仕事になったきっかけですね。

白石: なるほど、会社の仕事とも関係なく、純粋に個人的なプロジェクトとして始められたんですね。

國舛: そうなんです。全然仕事にするつもりはなかった。

白石: ちなみに結論を先取りしてしまうと、結局これが量産ハードウェアづくりにつながるわけですが、その時点で量産ハードウェア開発の知識とかはあったんですか？

國舛: いえいえ、それが全然…。周りに助けられながら、なんとかやり遂げた感じです。

白石: それはソフトウェアしか触ったことのないぼくのようなエンジニアからすると、朗報です。いい仲間さえいれば、なんとかなるもんなんですね！

まずはプロトタイピング

白石: では、SmartTrigger開発がどのように進んだのかをお聞かせください。最初のプロトタイプってどんな感じだったんですか？

國舛: 最初はAndroidとArduino、あとカメラを全部有線でつないだようなものでしたね。ネットの情報を見ながら、「Androidで操作したらカメラのシャッターが切れる」というところまで作りました。 プロトタイプは3つくらい作りましたね。

まず最初のプロトタイプは、そもそものコンセプトが実現できるかどうかを、形や大きさを気にせず試してみました。

SmartTrigger最初のプロトタイプ

SmartTrigger2番目のプロトタイプ

SmartTrigger3番目のプロトタイプ

量産に至る過程

白石: ちょっとそこ、詳しくお聞きしてもいいですか？Arduinoとかを使ったプロトタイピングまではまだイメージできるんですが、そこから最終製品を量産するというところまでのイメージがさっぱりわかなくて…

國舛: ぼくの場合はまず、リリース時期を決めてしまいます。例えばクリスマス商戦に間に合わせるぞ、とかですね。そこから逆算して、各工程にかけられる時間を見積もります。

そうして今度は、量産を前提とした試作を行っていきます。試作は毎回、明確な目標を定めて行うようにします。

まず必要なのは基板の設計と製品のデザインですね。それぞれ専門の方に担当していただき、まずは荒くてもいいから動くものを作ります。で、ここでトラブルがたくさん起きる。

それを受けて次の試作では、1度目の試作で出たトラブルに対処しつつ、信頼性の検証を行いました。 例えば静電気が発生しても壊れないとか、ボタンを何回押しても壊れないとか。

こんな感じで、次に何をやるかをイメージしながら、どんどん試作を改良していくイメージです。

白石: デザインはどんどん変化していくんですか？

國舛: いえ、デザインは最初のほうでしっかり固めなくてはなりません。ハードウェアは、デザイン修正のコストが大きいので。そこがWebとは大きく違うところですね。 でも最近は3Dプリンタで簡単に出力できるのがありがたいです。基板が入るかどうかとか、ボタンが押せるかどうかとか、そういったことを確認するためには3Dプリンタで作った試作品がとても役に立ちます。

白石: なるほど。そして、何度か試作を行って完成度を高めたら、いよいよ量産に向けて動き始めるんですよね。

國舛: はい、そうですね。量産するにあたっては、部品を購入したり、工場を決めたりということが必要になってきます。
部品も、物によっては中々入手できなかったりするので、どこからどうやって調達するかを考えなくてはなりません。ぼくらは中国の工場を使ったのですが、部品を現地で調達したほうがいいのか、こちら（日本）で入手したり作ったりしてから送ったほうがいいのかとか、いろいろとトレードオフがあります。

また工場を決定するにあたっては、実際に現地の工場に足を運んで、設備や品質管理のレベルを確認します。スタッフの熟練度は非常に重要で、実際にサンプルを作ってもらって、クオリティを確認する必要があります。 そうして選んだ基板工場や金型工場、組み立て工場に3Dデータや回路図を渡し、量産を依頼するわけです。

白石: 工場に量産をお願いしたら、あとはスムーズに製品ができ上がるんですか？

國舛: それが理想なんですが、実際にはよくトラブルが起きてしまうんですよね。 あらかじめテスト項目を用意しておくんですが、テストにパスしないものが多く出てくると「不良率が高い」ということになって、なかなか出荷したい台数に届かないということになります。

量産するにあたっては、「量産試作」という工程があって、実際の工員さんを使って量産ラインを流してみます。 例えばそこで100台とか、多めの数を流して検証してみて、組立方法を変更して時間を短縮したり、製品に不具合がないかどうかを検証して調整します。 そうして問題が出なくなったら、あとはどばっと流すかんじですね。

ハードウェア開発の体制と工程

白石: 量産に至るまでの流れが、少しイメージできるようになりました。これも聞きたいんですが、ハードウェアを作るとなると、実際にはどういうスキルを持った人が必要になるんでしょうか？

國舛: 大きく分けると4つくらいの職種が共同で作業に当たる感じですね。

まずは電気設計。基板づくりを担当します。

デザイナー。製品の見た目はもちろん、ボタンの押し心地などの機構も考えます。他にはパッケージや製品アクセサリのデザインもするし、場合によってはWebサイトのデザインも行ったりします。

組み込みエンジニア。ハードウェアに搭載する組み込みのソフトウェアを担当します。

そして一般的なアプリエンジニアです。

他にもサーバインフラのエンジニアやプロジェクトマネージャーなどもいたりしますが、基本的には先程申し上げた4つの職種がメインになります。

白石: あと、工程や期間についても、少し具体的に教えていただけますか？

國舛: 原理試作、EVT、DVT、そして量産と言った流れですね。

量産型ハードウェア開発プロセス（一例）

「とにかく作ってみる！」それが大事！

白石: ではそろそろインタビューを終えたいと思いますが、これまでソフトウェア開発しかしたことがないエンジニアに向けて、一言いただけますでしょうか？

國舛: 「とにかく作ってみる」それが重要ですね。最近は3Dプリンタもあるし、マイコンも流行っているので、ハードウェアを触るのもずいぶん敷居が下がりました。エンジニアは、どうしても「小さく」「カッコよく」を目指してしまいがちなんですが、最初はそんなのどうでもいい。とにかくやってみることが重要です。あとは、最近はイベントとかもよくやっているので、そういうのにも参加してみてはいかがでしょうか。

白石: 本日は、実際にハードウェア製品をリリースするまでの過程を詳しくお話いただき、ありがとうございました！とてもためになりました。

ちなみに、國舛さんが「ハードウェアスタートアップでアプリエンジニアは何をしているか」というテーマでブログを書かれています。こちらも合わせてお読みいただくと、より理解が深まると思います！

• ハードウェアスタートアップでアプリエンジニアは何をしているか | Cerevo TechBlog

IoTの時代、それはモノのデザインとWebのデザインが交錯する時代と言えます。 そんな時代に必要とされるデザイン思考とはなんでしょう？モノのデザインとWebのデザイン、そこにある違いは、そして共通するものは何でしょう？

この記事ではそんな疑問の答えを探るべく、この記事では、プロダクトデザインとWebデザインのプロフェッショナル2人を引き会わせて、デザインについて、デザイナーについて、UXについて、Webについて、IoTについて、気になることを全部語っていただきました。

プロダクトデザインとWebデザイン、その境界線から見える景色を、それぞれの分野のエキスパートが語ります。

久下玄（くげはじめ）: デザイナー／エンジニア／ストラテジスト。東京造形大学卒業。家電メーカーのプロダクトデザイナーを経て、2009年にtsug,LLC創業。事業戦略、技術開発、製品デザインまで手がける。統合型デザインで、国内外の企業のイノベーションプロジェクトに携わる。並行して2012年Coiney,inc創業に参加し、以後プロダクト開発を担う。2010~2013年まで慶応大学SFC研究所にて、研究員として通信とデザインの研究および教育に携わる。近作に脳波ヘッドフォンmico（neurowear）やスマホ決済サービスCoiney（コイニー）など。受賞多数。近著は「リアルアノニマスデザイン」（学芸出版社・2013年・共著）。

秋葉秀樹（あきばひでき）: 株式会社ツクロア（tuqulore）代表取締役／デザイナー。HTML5 Experts.jp公認エキスパートNo.16。 本業はデザイナー。DTP・グラフィックデザイン・Webフロントエンド全般・Flashゲーム開発・3DCGと幅広く携わる。主な作品は海遊館やサンシャイン水族館とコラボしたAndroid／iPhoneアプリ「Ikesu」。NFC技術を世界で初めて水族館で利用して魚をスマートフォン内に持ち帰られる体験を提供し、2ヶ月足らずで一万人が利用、人の集まる場所に私たちのデザインがどうビジネスに貢献するかをテーマに仕事をしている。近著に『Firefox OSアプリ開発ガイド』（リックテレコム）。その他、共著として『10倍ラクするIllustrator仕事術』（技術評論社）や『すべての人に知っておいてほしい HTML5+CSS3の基本原則』（MdN）など多数。2013年4月に株式会社ツクロアを設立。

聞き手: 白石俊平（しらいししゅんぺい）: HTML5 Experts.jp編集長

Webデザイナーの制約、そしてアドバンテージ

白石: まずは、簡単な自己紹介からお願いできますか？

久下: Coineyではプロダクトの統括を担当しています。Web、モバイル、ハードウェアなど様々な分野のデザイナー、エンジニアたちをまとめているという立場ですね。

久下玄さん

秋葉秀樹さん

久下: なるほど。最近は秋葉さんのように、「Webサイトを作るだけ」っていう取り組み方にフラストレーションを貯めているWebデザイナーも多そうですよね。今までWebデザイナーって、「スクリーンの中だけ」というかなりきつい制約の中だけで戦ってきてるわけじゃないですか。

秋葉: そうなんですよね。ぼくもWebデザイナーという職種からは一歩踏み出してしまったな、と感じているところです。

久下: とは言え、Webデザイナーという職種にはすごいアドバンテージもあるな、とは思います。というのは、「目の前にお客さんがいない状況で、その行動を推測する」ということに長けているわけですからね。

「もの」のデザインっていうのは、人がその「もの」を使っているところをこの眼で確かめることができる。一方Webは、お客さんがほとんど見えないんですよね。それを、推測だけでグロース（サービスを成長）させていくってことを、これまでもずっとやってきているわけじゃないですか。

もちろん今は、トラッキングツールも増えてきていますけど、根本的にはスクリーンに対する反応しか確かめられない。ユーザーの操作を追うことはできますが、そのときユーザーがどんな感情だったか、どんな表情をしているかといったところは結局わかりません。

そういうところを類推しながら作っていくというのが、Webの人たち独特のカルチャーでありスキルだな、とは思いますね。プロダクトやモノの世界には、そういうことはほとんどありませんね。利用シーンを目にするのは簡単なので、そんなことをしてたら怒られますからね。「お前、客のところいけよ」と(笑)。

秋葉: 確かにそういうところはありますね。それがアドバンテージであるというのは、言われてみるまで気づきませんでした。

デザインの根拠、目的、成果物

秋葉: ただ、「推測」に頼る度合いが大きい分、デザインに対する根拠が薄弱であるというところはあるかもしれません。デザインを何案か提出して、お客さんがその中から一つ選ぶ。でも、それを選んだ根拠は何なんだ、と(笑) 。そもそもそのデザインが正解かどうかなんて、納品の時点では絶対にわからないはずなんです。

久下: そもそも新しく何かを作るときに正解なんてわかるわけないですよね(笑)。特にWebサービスとかって「ローンチしてみないとわからない」ってのがホントのところじゃないですか？対象となるお客さんも多いし、多様だし。

秋葉: そうなんですよ。なので、最初に全てをデザインしようとするというのはなんか違うな、と思うようになって。

久下: 最初からそんなに大きなコストを払っても、リリースしてみないと当たるかどうかわからない。というか、ほぼ外れるじゃないですか(笑)。大きな賭けですよね。

久下: 僕がやっている別のデザイン会社の方でも、「納品物体がある前提」をやめてもらえるようにしたんです。目的ベースで考える。例えば、「このサービスのお客さんを増やしたい」とかそういう目的。そのために、リソースを何ヶ月使えます…という仕事のかたちにしたんですね。

なんでそういうふうにしたかというと、通常の納期ありきの仕事だと、「納期に間に合わせること」が目的になってしまうんです。「納期が残り3週間しかない、じゃあ、3週間の中でできることをやろう」というふうに、目的が変わってしまうんですよね。

秋葉: ミッションが変わってしまうんですよね。

久下: コンペとかについても同じようなことが言えます。僕が仲良くしていただいてる、尊敬するデザイナーで西澤明洋さんという方がいて、コエドビールとかのデザインを手がけられた方なんですが、彼が言うには「コンペは誰も幸せにならない」と。

なぜかと言うと、クライアントはいろんなものを見たいという目的でコンペを主催するのですが、それを受ける側は「コンペに通るため」のアイデアを出そうとしちゃうんですよね。そもそも持っている課題に対するアイデアは出てこない。

「A社はこうくるだろう、B社はこうくるかな、じゃあうちはこういこう…」ってな感じで、そもそものお客さんが関係なくなっちゃうんですよね。だから、コンペに参加するのは一切やめたと言っていました。

秋葉: 僕もコンペは参加しないことに決めてます。っていうのはですね、最後にコンペに参加した時に他のチームの人が「とりあえずプレゼンの時だけいいものを作って、実際に制作する段階で無理が判明したら言い訳すればいい」ってことを言っていて、それがショックで。僕は「コンペで印象深いものを作る」ということを目的にはしたくなかったので、やめちゃいました。

久下: でも、そういう問題って至るところにあるんですよね。自社でプロダクトを作っているCoineyでも、似たようなことはありました。十分な検討がなされずに納期だけが先に決まっちゃってて、そこまでに作らなくてはならない…みたいな状況ですね。ビジネス側からの無理な要求が開発に負荷をかけてしまうようなことが往々にしてあって、そうなるとクオリティが上がらなかったり、あとでサポートとかバグフィックスとかにコストがかかってしまったりして。

今回のインタビューはCoiney社に伺いました。

IoT時代のデザイン思考

秋葉: ただ、そういうスタイルに変えていくのは一筋縄でいかないのが、最近悩みの種でもあります。従来の一括納品というかたちではなく、デザインもエンジニアリングもお客さんと一体になって、サービスを少しずつ成長させていく。そういう関係にしていきたいのですが、どうすればそこに辿り着けるのか、と。

久下: 作る側だけじゃなく、お客さんにも学んでいただく必要があるかもしれませんね。幸い今は、そういう考え方での成功事例がたくさんありますし。デザインとエンジニアリング、プランニングといった言葉がすごく近いというか、ほぼ一緒になってきているような事例が増えてきていますよね。アップルがその典型的な成功例だと思いますが。

秋葉: そういう事例が増えていく中、「デザインそのものに対する考え方を見直そう」と考える人たちもやはりすごく多くなってきている感覚があります。仕事の進め方もそうですし、IoTの時代と言われている中で、PCやスマートフォンのスクリーンの中だけで終わらせようとすることも見直されつつある。「果たしてそれでいいのか」と考える人が増えています。

久下: 僕も、そういう意識の変化には賛成です。スクリーンの外のものも、すべて統合して考えるべきだと思います。そういう点で言うと、「UXデザイン」ってぼくはすごくいい言葉だと思うんですよね。だって、いろんなことをUXデザインって言葉で表すことが可能じゃないですか。「世の中に対して、体験そのものをどう作るか」っていうところから、全体を統合して考えようとする姿勢をよく表せる言葉だと思います。

で、体験を作るにあたっては、結局のところ「人の気持ちがわかる」っていうのが勘所になってくる。

秋葉: わかります。いろんなデザインがあるけど、必ずその先に人がいて、その人の生活や感情がある。

久下: そういう勘所が分かる人っていうのは、デザインという領域の中においても、だいたい何をやらせてもうまいんですよね。スキルの分野とは関係なく。

例えば工業デザインだったら、モノを作るために加工法や素材への精通、3DCADや量産設計等のいろんなスキルが必要になります。Webだったらフロントエンドの知識から、サーバサイドどうするかなどの知識やスキルが必要になる。ただ、そういうスキルって後からいくらでも習得可能なものじゃないですか。特に最近は、スキルを身に付けるスピードがみんなすごく早い。それはなぜかというと、スキルって当たり前ですけど人のために作られているので、ちゃんとした材料とフローさえ踏めば、だれでも割と学べちゃうんです。

それよりも、そういうスキルを使って何を作るか、どういう体験を作るかという点が重要です。みんなここを簡単だと思っているけども、実はここが一番難しい。逆にここの勘所を掴んだ人は、あとからスキルはいくらでも身につけていける。だからWebだとかモバイルアプリだとか、そういう区切り方自体もはやナンセンスで、必要に応じて学んでいけばいいものだと思っています。

秋葉: ハードウェアとソフトウェアとかで区切るのも、もはやナンセンス、ということですね。

久下: そうです。例えば、僕がすごく尊敬するインタラクションデザイナーで中村勇吾さんという方がいるんですけど、東大建築科を卒業した後に橋梁設計の仕事をやりつつ、Webもはじめた…というおもしろいキャリアをお持ちなんです。その後Flashで、2Dのビットマップ画像でアニメーションさせるのが全盛だったような時代に、アルゴリズムと無機質な描画だけで不思議な気持ちよさを出すというカルチャーを作り、それがインタラクションデザインの分野に多大な影響をもたらしました。

中村さんは、「構造」とか「気持ちよさ」っていうものに対するフェチなんだそうです。あの「気持ちよさ」って概念は、今のユーザインタフェースデザインにおける基礎の基礎だと思う。でも彼は元々Webの人でもなんでもない。気持ちよければメディアなんて何でもいいじゃん、と。まさに今の時代に求められる典型的な先輩みたいな人だと思うのですが、ああいう人が今後もっともっと増えていくんだろうなあ、と思っています。

近いところで言えば、Webの人がモバイルアプリケーション作るなんてのも、もう珍しくないじゃないですか。それくらいのスキルコンバートは今や普通だし、WebディレクターとかWebデザイナーとかWebエンジニアとか全部やってるよ、なんて人も普通にいたりする。今は電子工作がブームになっているので、これまでソフトウェアしか作ったことない人が、ハードウェアをプロトタイプレベルで作るというのも増えてきている。たぶん10年も経ったら、「肩書きを書きたくても書けない」って人がほとんどじゃないでしょうか。

秋葉: 僕も、「UIデザイナー」とか肩書きに付けたくないなあ…って気持ち、正直言うとありますね。

久下: 肩書きのせいで、勝手に狭く解釈されちゃいますよね。

Webデザイナー／エンジニアの仕事は変わる？なくなる？

秋葉: 最近ぼくも、電子工作にチャレンジしているんです。例えば最近、猫の自動餌やり機を作ってみたんです。そしたら、猫がその機械を攻撃するわけですよ。「ここから餌が出てくる」と学習しちゃって、餌欲しさに機械を壊そうとするんです。なんでそんな当たり前のことを、先に気づかなかったんだろう…って。 新しいことにチャレンジすると、「やってみなければわからない」ということだらけなのを実感しますね。

久下: チャレンジ、重要ですよね。一方でチャレンジ自体を否定する人たちもいます。何事も最初からうまくいくわけないのに、失敗を恐れてチャレンジしなかったり、人がチャレンジした成果をバカにしたりするのはカッコ悪いと思う。

今、ハードウェアスタートアップと呼ばれる企業が増えていますが、今はまともなものを作っている会社だって、昔はショボいものしか出せてなかったんです。でも、そうやってチャレンジすることで学びがあり、仲間ができ、だんだんいいものを作れるようになってくる。最初にクソプロダクト(笑)を出す、というステップを踏まないとそうはなれないわけで。

秋葉: チャレンジを否定することは、自分の可能性も閉ざしちゃうことにも繋がりますよね。

久下: だから、思い切って踏み出してみるというのは、とても大事ですよね。

僕はハードもソフトも扱うサービスをやっているおかげで、両方のカルチャーを行き来する立場なのですが、最近のIoTブームが面白い現象を引き起こしているな、と思っています。

というのは、ハードの人もソフトの人も「自分の仕事がなくなっちゃうんじゃないか」と危惧してるんですよ(笑)。ハードの人たちは「ソフトの人たちがハードを扱うようになる」、ソフトの人たちは「ハードの人たちがソフトを扱うようになる」って。

僕から見ると、Webの人たちは「情報」を扱うのがすごく得意ですが、モノを扱う人たちはそれが苦手だったりするので、お互いの得意不得意を補い合う関係になるだろうと思っています。

残念ながら、単発の技術的スキルで面白いものを作れる時代は終わってしまいました。でも僕は、「そういう時代がやっときた」という気持ちです。みんなで手を取り合って面白いものを作れるぞ、と。

プロダクトデザイナーという仕事

白石: 最後にお聞きしたいのですが「プロダクトデザイン」という仕事は、具体的にはどんなことをされているのでしょうか？

久下: 「プロダクトデザイン」という言葉は、実際にはとても広い意味を持つ言葉です。ただ一般的に言われている「プロダクトデザイン」というのは、多分「インダストリアル（工業、産業）デザイン」のことを指していると思うので、そういう前提でお話しますね。

とは言え、インダストリアルデザイナーの仕事もどんどん変わってきているんです。
90年代くらいまでは、基本的にはハードウェアエンジニアが作ったものを「スタイリングする」「お化粧する」という仕事が中心でした。そういう仕事は、依然として重要な仕事として存在してはいますけどね。

その次に、「その道具がどうあるべきか」「道具の内部構造がどうあるべきか」を考えるという時代が来て、エンジニアリングの領域もカバーするようになりました。今、大きなメーカーのデザイナーとかはこのフェーズにいると思います。


そして最近は、「そもそもデザインやエンジニアリングがどう使われるか」という統合的なストーリーを考えて、そのストーリーを実現までプロデューサーのように走らせるのが、今の若い世代のインダストリアルデザイナーの仕事です。

久下: 昔…90年代後半とかは、ストーリーを考えてスケッチを描き、モノとして成り立つかを確かめるためにモデルを作ったり…といった、「動かないもの」でデザインを説明するのが工業デザインの仕事でした。
最近はそもそも動くハードウェア – ホットモックと言ったりするのですけど – を用意して、それを組み替えたりしながら小さくしていくことで、エンジニアリングと一体になりながら「モノの形はどうあるべきか」を探っていくというやり方になっています。

中身と形を分けずに、そもそもひとつの体験としてどうあるべきかを探る。例えば素材を考えるといったところから、どうやったら理想的な形に加工できるかという「製法」を考えたり、どこで作ってもらうべきか、値段はコミットできるのか…といったところを総合的に考えながら、物質的な人とのインターフェースを考えていくのが、今の工業デザイナーの仕事なのかなと思います。

白石: 例えばCoineyでいうと、どんな仕事をされているイメージですか？

久下: まずCoineyは、定期的にモノがはけていくビジネスモデルです。カードリーダーを無料で配布するので、ユーザーが増えれば増えるほど部材を調達しなくてはなりません。
ただ、部品の調達ってかなり時間が必要で、平気で数ヶ月かかったりするんですね。だから、全体のリードタイムをきちんと見るということはやってますね。
僕らのサービスはリーダーが常に適切な量で生産されないと、顧客を獲得するという活動にも影響が出てしまう。なので、ユーザーの増加ペースに合わせて、工場の生産ラインを調整しています。

Coiney (コイニー)はモバイル決済サービス。専用リーダーをモバイルデバイスのイヤホンジャックに指すと、デバイスがカード決済端末に早変わりする

白石: 管理するという作業が主ですか？例えばCADでモデリングしたり…という作業はもう手がけられていない？

久下: いや、やってます。狭い意味でのデザインも、基本的には全部手がけていますよ。Webやモバイルのデザインについても、UXプロトタイプレベルまではぼくとデザイナーチームの方で作ります。ハードだけじゃなくて、ソフトも一丸になってやってかないとクオリティ高いものにならないので。僕の仕事は、Coineyというプロダクトにおけるユーザ体験のデザイン全体を引き上げることなんです。

白石: 実に広いですね。すごい。

久下: やはり物理的なオブジェクトを扱うサービスのデザイナーなので、オブジェクトに関わるデザインとエンジニアリングは基本全部手がける、って感じですね。会社のオフィスもデザインしましたよ。今いるこの会議室も、僕とFLOOATという仲良くしていただいてるデザイン会社でデザインしたんです。

久下さんがデザインされた会議室。「外国人がイメージする和室」をテーマにしたとのこと。黒く見える床も実は畳敷き。

おわりに

白石: では最後に、「IoT時代のデザイン思考」という記事の締めくくりとして、読者の皆様に対してお二人からメッセージをいただけますでしょうか？

久下: IoTの時代は、ハードウェアもソフトウェアも一緒くたになった、みんなが力を合わせて製品づくりをしていく時代です。個人的には、「やっとそういう時代が来たか」という感慨もひとしおです。せっかく、「いろんなジャンルの人が手を取り合って作る」というのが違和感のない時代になったのだから、みんな一緒になってどんどんモノづくりしていきましょう！

秋葉: これから、Webデザイナーも新しいことにどんどんチャレンジしていかなくてはなりませんね。そういう過程では、失敗事例もどんどん出てくると思いますが、みんながチャレンジしてみんなが失敗するのだから、それも許されるというのがIoTの時代だと思います。Just Do It!ですね。

この記事では、「IoT」という言葉には少し関心があるけど、ハードウェアを作るなんてハードルが高そう…と感じていらっしゃる方々（特にWebデザイナー／エンジニア）に向けて、低価格で簡単にハードウェア制御を学べる「Arduino」（アルデュイーノ）という電子工作キットの使い方をお伝えします。

電子工作でできること

ではそもそも「電子工作」とは何でしょうか？
インターネットで検索すると「電子部品を使った工作のこと」、「様々な部品で電子回路を作ること」などとでてきます。でも、「電子部品って何？」「電子回路？」と疑問が増えていきます。Wikipediaで電子部品の項目を見てみると「電子部品とは、電気製品に使用される部品のことである」と書いてあり、難しそうな部品の名前が書かれています。

はじめから詳細に踏み込むと難しそうなので、まずは、電子部品を使うとどのようなことが実現できるかを、具体例で見てみましょう。

センサーライトなどの機能の例

自分でスイッチのON／OFFを行わなくても、人の出入りに合わせて点灯／消灯するライトがあります。ライトが必要なときのみにONになり、省エネにも効果的です。
この仕組みを実現するためには「センサーで人が近づいたことを検知する」、「ライトのON／OFFを制御する」という機能が必要です。この「人を検知するセンサー部品」や「ライトを制御するプログラムを処理する」といった部分が、電子部品を組み合わせることによって実現されています。

他に、「部屋の温度を自動的に設定温度どおりに維持する」というエアコンの機能を考えてみましょう。センサーライトの例のセンサーや制御の部分が、「センサーで温度を測る」、「エアコンの冷風／温風の温度を制御する」と置き換わると実現できそうです。

Arduinoでできること

先ほどの例と似たようなことを、一から自分で試してみようとすると大変です。センサーなどの部品をつなげるだけでなく、「センサーで検知した内容に合わせて、何か制御を行う」という、プログラムを処理する部分や、プログラムを書き込む方法の用意などノウハウが必要です。

このように気軽には試せなかった「電子部品を使った工作」を、より身近にしてくれるものが「Arduino」です。Arduino には「センサーなどの部品をつなげる部分」や、「プログラムを開発し、部品へ書き込むための開発用ソフトウェア」などが用意されています。PCとArduino、そして、ちょっとした部品があれば電子工作を試すことができ、工作を始める際の敷居が大幅に下がります。

ところで、Arduinoを使うとどんなものを作ることができるのか、工作例を見てみましょう。

• Arduinoの工作例（Youtube・Vimeo の動画へのリンク）
  • 郵便受けに手紙が届いたら携帯電話へお知らせ
  • ゼリーを触って演奏するユニークな楽器
  • Twitterで特定のつぶやきがあったらお知らせ：サルのぬいぐるみ

これらは、先ほどの例にあった「センサーによる検知、検知した内容にあわせた制御」を、Arduinoと部品を使って実現しています。Arduinoでは、例えば下記のような機能を実現できます。

• 光や温度、音、物との距離など周囲の状態を知る
• 光や音をだす、モーターなどの部品や他の機械を動かす、他の機械に情報を送る

最初の一歩：Lチカ

部品を組み合わせるといろいろなことができるArduinoですが、まずは基本的な内容を試すことにしましょう。Arduinoを試す最初の一歩に「Lチカ（LEDを点滅させるプログラム）」があります。この Lチカに必要な部品、部品のつなぎ方、LEDの制御方法などを説明していきます。

手軽に部品を揃える

Lチカに必要な部品がいくつかありますが、自分で個別に揃えるのは大変です。部品の種類が複数あり「どれを組み合わせれば良いかが分からない」ということがおこりえます。
そのため、最初は、基本的な部品がセットになった「キット」を利用することをオススメします。インターネットで「Arduino　キット」とキーワード検索するといくつかでてきますが、4000円程度のものを一例として挙げておきます。

• キットの例（2015年1月現在）
  • Arduinoエントリーキット（⇒テックシェアの販売ページ）
  • Arduinoをはじめようキット（⇒スイッチサイエンスの販売ページ）

　※ Amazon.co.jpでも購入が可能です

また、キットには説明書が付属されていないため、部品のつなぎ方は自分で調べる必要があります。インターネットで調べてもよいですが、調べるのが大変という方は書籍を購入することで手間を省けます。前述の2つのキットに関しては、販売ページの商品説明に、オススメの書籍の例がそれぞれ記載されています。

Lチカのための部品

部品をつないでみる前に、Lチカでに必要になるもの一式を紹介します。各部品の説明は後述していきます。

Arduinoボードはいくつか種類がありますが、この記事では、前述のキットでも同梱されている「Arduino Uno R3」を利用します。
抵抗もいくつか種類がありますが、今回は利用するLEDに合わせて330Ω（オーム）のものを使います。抵抗の種類については、後で補足します。 なお、キットを購入すると、よく利用する複数の種類の抵抗が付属されています。そして、キットに対応する書籍を購入していると、組み合わせるべき部品と抵抗の種類の情報が記載されているため、 Lチカやそれ以外の工作を楽に進めることができます。

【USBケーブルに関する補足】

PCとArduinoボードをつなぐ USBケーブルですが、ケーブルの種類が「USBケーブル A-Bタイプ」などと呼ばれるものになります。接続部分の形が下の写真のようなものになります。スマートフォンの充電に使うケーブルなどとは異なりますので注意しましょう。

【Arduinoボードに関する補足】

Arduinoボード上の接続部などについて、一部補足します。 今回のLチカでは、下の写真の上部にある接続部を使います。今の時点では、接続部の横に0〜13番までの番号や GND と記載があることを確認しておいてください。 下側にある接続部は上部にある接続部と異なる役割を持っていますが、詳細は割愛します。 また、写真で示したLEDを見ることで、Arduinoボードに電源供給がされているかを確認できます。

部品をつなぐ

それでは、Lチカ用の部品をつないでみましょう。

手順1）ブレッドボードにLEDと抵抗を差し込む

上の写真の赤矢印で示した部分のように、LEDと抵抗を、ブレッドボードに差し込んでいきます。
ブレッドボードとは、部品を差し込むための穴がたくさん空いた板状のものです。LEDやセンサーなどの部品のつなぎ替えを、簡単に行うことができるようになり、試行錯誤をする段階では非常に便利です。

まずは、以下の手順でブレッドボードにLEDと抵抗を差し込んでみましょう。

LEDは電気が流れる方向が決まっています。写真にあるように、方向は足の長さの違いで区別します。つなぐ方向を逆にしないように注意しましょう。なお、抵抗はつなぐ際の方向は関係ありません。

【ブレッドボードに関する補足】

ブレッドボードにLEDと抵抗を差し込みましたが、部品はどのようにつながっているのでしょうか？それを理解するために、ブレッドボードの中身について補足します。
ブレッドボードのそれぞれの穴は、一部が中でつながっています。下の写真で、緑の線を描いた部分が、内部でつながっている穴になります。

このため、先ほどつないだ部品は、LEDのマイナス側と抵抗の片側とが接続された状態になっています。

【抵抗に関する補足】

LEDなどの部品には流してもよい電流の大きさが決められており、過剰に電流を流すと部品が壊れてしまします。それを防ぐために使うのが抵抗です。抵抗を組み込むことで、部品に流れる電流を抑えられます。ここで、抵抗の種類などについて少し補足します。

今回、330Ωの抵抗を使いましたが、抵抗には種類があります。

上の写真にあるように、抵抗についている色の並びが、抵抗の大きさを示しています。計算方法はここでは割愛しますが、最初のうちはよく利用するものはある程度限られます。そのため主なものの「抵抗値と色の並び」をメモしておくとよいでしょう。

抵抗にはいくつか種類があることを説明しましたが、どの抵抗を使えばよいのでしょうか？ それには、オームの法則を使って計算します。学校の授業で習った覚えがあったりするのではないでしょうか？ 計算には、部品がどのようにつながっているかも考慮する必要があります。そのため、最初は書籍やインターネットで情報を調べるなどして、自分が試したい内容に関して「どの種類の部品と抵抗を、どのようにつなげばよいか」を参照したほうが楽に行えます。

それでは、今回の Lチカのつなぎ方の場合で、使う抵抗の大きさを計算してみます。計算式は
　（「電源の電圧」 – 「LEDの順電圧」）÷ 「LEDに流す電流」
となります。 LEDの順電圧というのは LEDによって決まっているものです。赤色のLEDの場合 2 V（ボルト）前後であることが多いようです。また、電源の電圧というのは、この場合は Arduinoボードの電圧になりますが、0～13番の接続部でかかる電圧は5Vです。LEDに流す電流は、LEDの順電圧と同様に LEDに決められた流してよい電流の最大値でひとまず計算します。これが10mA（ミリアンペア）の場合、抵抗値の計算は下記になります。
　(5 – 2) ÷ 0.01 = 300
この場合、利用する抵抗の大きさは300Ω（オーム）となりましたが、同じ大きさの抵抗があるとは限りません。その場合は、計算結果より大きく数字が近いものを選びます。そうすると、流れる電流が少し小さめになり、LEDに流してよい電流の最大値を超えることはありません。

手順2）Arduinoボードとつなぐ

先ほどの部品とArduinoボードをつなぎます。Arduinoボードを使う際、ボードの裏側は金属部分がそのままでているため、金属などの電気を通す素材の上に置くのは避けてください。
では、下の写真にあるように、Arduinoボードとブレッドボードの間を、ジャンバーワイヤーでつないでみましょう。LEDのプラス側のほうが11番の接続部に、マイナス側のほうが抵抗を通じて GNDの接続部につながれる形になります。

ジャンパーワイヤーは、Arduinoボードやブレッドボードへつなぐためのピンが、導線でつながれたものです。抵抗と同じで、つなぐ方向は特に関係ありません。

プログラム（スケッチ）を書き込む準備

部品の準備は整いました。次に、PCからArduinoボードへプログラムを書き込むための準備を進めていきましょう。Arduinoでは、プログラムのことを「スケッチ」と言いますが、本記事では「プログラム」と記載しています。
今回は、LEDを点滅させるためのプログラムを書き込みます。

手順3）PCで開発環境「Arduino IDE」を準備する

「Arduino用プログラムを扱う専用ソフトウェアの Arduino IDE」を準備します。お使いのPCに合わせて、最新のWindows用／Mac用などのファイルを「Arduino IDEのページ」からダウンロードしてください（※2015年1月3日時点では、最新バージョンは1.0.6）。

Windowsの場合はドライバのインストールも必要ですが、インストーラを使えば、Arduino IDE と一緒にドライバもインストールされます。Macの場合は、ZIPファイルを解凍するとArduino.appが展開されます。

これで開発環境の準備ができました。

手順4）PCとArduinoボードをつなぐ

ArduinoボードをPCにUSBケーブルでつないでみましょう。 USBケーブルをつなぐと、PCからArduinoボードに電気が供給されるため、Arduinoボード上の小さなLEDが点灯します。Arduinoボードには電源スイッチがないため、動作を止めたい場合は USBケーブルを抜いて電気の供給を止めることになります。

そして、手順3）で準備したArduino IDEを起動してください。そうすると、下の写真のようなウィンドウが表示されると思います（※以下、基本的にはMac版の画面で説明を進めます）。

ここで、つないだArduinoボードの設定と、シリアルポートの設定を行います。シリアルポートの詳細の説明は、今の時点では割愛します。ひとまず、ArduinoボードをPCに認識させるために必要な設定、と覚えておきましょう。

メニューの「ツール」⇒「マイコンボード」の中の「Arduino Uno」を選択します。

次にシリアルポートの設定です。Macに関しては、メニューの「ツール」⇒「シリアルポート」の中の「/dev/tty.usbmodemという名前が含まれる項目」を選択すればOKです。

Windowsの場合、「COMという名前が含まれる項目」を選択するのですが、それが複数表示されている場合があります。そのため、Arduinoボードに該当するものを確認する方法を記載します。
「スタートメニュー」から、「コントロールパネル」⇒「ハードウェアとサウンド」⇒「デバイスマネージャー」とたどります。そして、デバイスマネージャーの中の「ポート（COMとLTP）」をクリックし、その中で「Arduino Uno を名前に含む項目」を見ます。下の画像の例では「COM6」が Arduinoボードのシリアルポートになります。

これで、PCとArduinoボードの接続と設定は完了です。

手順5）Lチカのプログラムを試す

これでLチカの準備が整いました。早速、Lチカを試してみましょう。
Arduino IDEに下記のプログラムを入力してみてください。

void setup() {                
  pinMode(11, OUTPUT);     
}

void loop() {
  digitalWrite(11, HIGH);
  delay(500);
  digitalWrite(11, LOW);
  delay(500);
}

そして、下の画像で示したボタンを押してみましょう。

この操作で、Arduinoボードにプログラムが書き込まれます。 問題なく書き込みが行われれば、Arduino IDEの下部に「マイコンボードへの書き込みが完了しました」というメッセージが表示され、ブレッドボードにつないだLEDが点滅します。

もし、下の画像のようなエラーが表示された状態になった場合は、プログラムの入力ミスがないかを確認してみてください。

プログラムについて補足します。

void setup() { ... }

pinMode(11, OUTPUT)

void loop() { ... }

digitalWrite(11, HIGH)

digitalWrite(11, LOW)

delay(500)

今回、USBケーブルが Arduinoボードに電気を供給する部分になっているため、USBケーブルを抜くと ArduinoボードやLEDに電流は流れなくなります。Arduinoボードに書き込んだプログラムはそのまま残っているので、再度USBケーブルをつなぐなど電気を供給した際には、今回書き込んだプログラムが実行される状態になっています。

おわりに

Arduinoを使った電子工作はいかがだったでしょうか？
LEDを点滅させる以外にも、センサーの情報を取得したり、モーターを制御したりなど、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を体験されてない方は、ぜひスクリーンから飛び出して、リアルをハックしてみてください。