<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:series="http://organizeseries.com/"
	>

<channel>
	<title>JS Board &#8211; HTML5Experts.jp</title>
	<atom:link href="/tag/js-board/feed/" rel="self" type="application/rss+xml" />
	<link>https://html5experts.jp</link>
	<description>日本に、もっとエキスパートを。</description>
	<lastBuildDate>Sat, 07 Jul 2018 03:14:05 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.7.19</generator>
	<item>
		<title>EspruinoではじめるWeb開発者のWoT</title>
		<link>/rockymanobi/13648/</link>
		<pubDate>Mon, 16 Mar 2015 00:00:06 +0000</pubDate>
		<dc:creator><![CDATA[興梠敬典]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[IoT]]></category>
		<category><![CDATA[JS Board]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[WoT]]></category>

		<guid isPermaLink="false">/?p=13648</guid>
		<description><![CDATA[連載： IoTxWeb (8)IoT/WoTという言葉があちこちから聞かれるようになって久しいですが、最近は言葉だけではなくなってきた気がします。新しいマイコンボードや、XXセンサーのデータをクラウドに溜めて○○する商品...]]></description>
				<content:encoded><![CDATA[<div class="seriesmeta">連載： <a href="https://html5experts.jp/series/iot_web/" class="series-240" title="IoTxWeb" data-wpel-link="internal">IoTxWeb</a> (8)</div><p>IoT/WoTという言葉があちこちから聞かれるようになって久しいですが、最近は言葉だけではなくなってきた気がします。新しいマイコンボードや、XXセンサーのデータをクラウドに溜めて○○する商品などが続々と発売され、IoT/WoTのバックエンド専用のサービスまで登場してきています。</p>

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

<p>加えて、先日の<a href="https://html5experts.jp/bathtimefish/13109/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">村岡さんの記事</a>でも紹介されていたように、JavaScript等のWeb技術で開発できるマイコンボードも続々と登場し、IoT/WoTはWeb開発者にとっても身近なものになりつつあります。</p>

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

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

<h2>Espruino Boardとは</h2>

<p>冒頭で紹介したとおり、<a href="http://www.espruino.com/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Espruino Board</a>は、JavaScriptを利用してハードウェア制御ができるマイコンボードです。ざっくり言ってしまえば、<a href="http://www.arduino.cc/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Arduino</a>のJavaScript版のようなもので、まずはこの理解でいきましょう。</p>

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

<p><img src="http://www.espruino.com/img/ESPRUINOBOARD.jpg" width="200" alt="Espruino" class="alignnone" /></p>

<p>他の多くのマイコンボードと違い、<a href="https://github.com/espruino/Espruino" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">自前でJavaScriptの実行環境を実装</a>しているところも熱いポイントです。</p>

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

<p><img src="http://www.espruino.com/images/pico.jpg" width="600" height="267" alt="Espruino Pico" class="alignnone" /></p>

<h3>どうしてJavaScript?</h3>

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

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

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

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

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

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

<p>メインのテーマではないのでこの辺りで…</p>

<h2>Espruinoを使い始める</h2>

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

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

<h3>必要物品を調達する</h3>

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

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

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

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

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

<ul>
<li>CC3000 Wifi モジュール</li>
</ul>

<p>Espruinoボードは国内販売されていないので、<a href="http://www.espruino.com/Order#distributors" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">公式サイト</a>にある販売サイトへのリンク一覧の中から何れかを選んで購入します。</p>

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

<ul>
<li><a href="https://www.adafruit.com/products/1887" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Espruino</a></li>
<li><a href="https://www.adafruit.com/products/1469" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">CC3000 Wifi Module</a></li>
</ul>

<p>ちなみに筆者は<a href="http://www.seeedstudio.com/depot/Espruino-board-p-1715.html?cPath=6_12" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">seed studio</a>より購入しました(当時、AdfruitはEspruinoを取り扱っていませんでした）。送料に積む金額によって配送期間が変わるようです。無料だと2週間程度、30ドル払ったら4日で届きました。</p>

<p>補足 : 公式で推奨されているモジュールとは異なりますが、CC3000については国内販売されている<a href="http://strawberry-linux.com/catalog/items?code=18253" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">コチラのモデル</a>でも動作することを確認しています。筆者の手元での確認なので保証することはできませんが、国内で調達できるので、コチラを利用するのもアリです。</p>

<h3>Web IDEのインストール</h3>

<p>Espruinoの上で自分の書いたJavaScriptコードを実行するには、本家から提供されているWeb IDEを使用します。Espruinoとの接続や、ファームウェアのアップデート等もサポートしているので、まずはコレを導入します。Chrome Extensionとして提供されているので、<a href="https://chrome.google.com/webstore/detail/espruino-web-ide/bleoifhkdalbjfbobjackfdifdneehpo" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Chrome Webストア</a>からインストールしましょう。</p>

<h4>EspruinoとPCを接続</h4>

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

<p><img src="https://qiita-image-store.s3.amazonaws.com/0/51384/f8c8e693-21a1-3f93-50c8-63df11dbd26c.png" alt="image" /></p>

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

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

<p><img src="https://qiita-image-store.s3.amazonaws.com/0/51384/0e6e19e3-9a03-d1d9-6912-6bd93343d233.png" alt="image" /></p>

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

<h4>ファームウェアのアップデート</h4>

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

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

<p><img src="https://qiita-image-store.s3.amazonaws.com/0/51384/5942abcc-0474-8f93-d16a-4a659c61f6e3.png" alt="image" /></p>

<ul>
<li>ダイアログの指示通り、EspruinoのBTN1(USBコネクタから遠い方のボタン)を押しながら、RSTボタン(USBコネクタ寄りのボタン）を押します。</li>
<li>ボード上の青色のLEDがゆっくり点滅するはずです。
<img src="https://qiita-image-store.s3.amazonaws.com/0/51384/334aeaa8-6020-71e4-8749-d387b27aa552.png" alt="image" /></li>
<li>ダイアログのNEXTをクリックし、デバイスを選択します。</li>
<li>ファームウェアの更新が始まり、ボード上のLEDが激しく点滅を繰り返します。</li>
<li>完了後、ダイアログのNEXTボタンをクリックした後、ボードのRSTボタンを押します。</li>
<li>再びWebIDE左上の接続ボタンをクリックして、Espruinoと接続します。</li>
</ul>

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

<h3>JavaScriptコードを実行する</h3>

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

<p></p><pre class="crayon-plain-tag">LED1.write(true);</pre><p></p>

<p><img src="https://qiita-image-store.s3.amazonaws.com/0/51384/e5838ac4-837a-c373-b024-7d75660b9b17.png" alt="image" /></p>

<p><img src="https://qiita-image-store.s3.amazonaws.com/0/51384/2b94ae62-0248-9787-99e8-b8b9694710a3.png" alt="image" /></p>

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

<p></p><pre class="crayon-plain-tag">LED1.write(false);</pre><p></p>

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

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

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

<p></p><pre class="crayon-plain-tag">LED1.write(true);</pre><p></p>

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

<h2>Espruinoで温度を計る</h2>

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

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

<ul>
<li><a href="http://rocky-manobi.com/blog/?p=224" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Espruinoにセンサーとかをつなげるために必要な準備</a></li>
</ul>

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

<ul>
<li><a href="https://html5experts.jp/youtoy/12029/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">初心者でもわかる・できる！Arduinoを使った初めての電子工作実践</a></li>
</ul>

<h3>調達</h3>

<ul>
<li>温度センサ「DS18B20」: おなじみ<a href="http://akizukidenshi.com/catalog/g/gI-05276/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">秋月電子</a>さんより通販、店頭にて購入することができます</li>
<li>4.7kΩ抵抗 : 通販であればこちらも<a href="http://akizukidenshi.com/catalog/g/gR-25472/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">秋月電子</a>さんより購入することができます。ただし、100本単位の購入になってしまうので、そこが気になるという方は<a href="http://www.sengoku.co.jp/shop_01.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">千石電商秋葉原本店B1F</a>等のバラ売りをしているお店で購入しましょう。</li>
</ul>

<h3>結線</h3>

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

<p>次のように結線してみましょう。</p>

<ol>
<li>温度センサのDATAとVddを4.7kΩの抵抗で繋ぐ。</li>
<li>下記表の通り、Espruinoと温度センサを繋ぐ。</li>
</ol>

<table>
<thead>
<tr>
  <th>Espruinoのピン</th>
  <th>温度センサの端子</th>
</tr>
</thead>
<tbody>
<tr>
  <td>GND</td>
  <td>GND</td>
</tr>
<tr>
  <td>A1</td>
  <td>DATA</td>
</tr>
<tr>
  <td>3.3v</td>
  <td>Vdd</td>
</tr>
</tbody>
</table>

<p><img src="https://qiita-image-store.s3.amazonaws.com/0/51384/04801128-2618-ab2f-bfdf-3039e4b56850.png" alt="image" /></p>

<p>【写真だとこんな感じです】</p>

<p><img src="https://qiita-image-store.s3.amazonaws.com/0/51384/3366c7cf-f02f-9f81-34aa-6ae13171ec75.png" alt="image" /></p>

<h3>プログラム</h3>

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

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

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

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

<p><img src="https://qiita-image-store.s3.amazonaws.com/0/51384/7f65ff42-3a83-f2bd-aee3-3ee159c4837c.png" alt="image" /></p>

<p><img src="https://qiita-image-store.s3.amazonaws.com/0/51384/33ef5c82-e498-ad31-1eea-e608c8ba0178.png" alt="image" /></p>

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

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

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

<p><img src="https://qiita-image-store.s3.amazonaws.com/0/51384/c789ed26-209f-aea8-5d9a-51a5145495b1.png" alt="image" /></p>

<p>Espruinoでは各種ハードウェアに対応するモジュールが多数提供されており、電圧値等の生データを意識せずに、センサーの値を取得することができるようになっています(<a href="http://www.espruino.com/Modules" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">モジュール一覧</a>)。</p>

<p>そしてこれらのモジュールはオープンソースとして<a href="https://github.com/espruino/EspruinoDocs" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">EspruinoDocs</a>というリポジトリで管理されています。ここにプルリクエストを送ることで、誰でもモジュールを開発/公開することができます。筆者も最近、IoT向けプロトコルといわれている<a href="http://www.espruino.com/MQTT" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">MQTTのクライアントモジュール</a>に機能追加を行い、取り込んでもらいました。自分で自分の好きなプロダクトに手を加えられるのは、オープンソースの醍醐味ですね。</p>

<h3>Web IDEについてもう少し</h3>

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

<h4>コンソールとエディタの併用</h4>

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

<p></p><pre class="crayon-plain-tag">clearInterval();</pre><p></p>

<p><img src="https://qiita-image-store.s3.amazonaws.com/0/51384/2efee643-ed4e-776e-aacb-77d154e9f6d2.png" alt="image" /></p>

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

<p></p><pre class="crayon-plain-tag">sensor.getTemp();</pre><p></p>

<p><img src="https://qiita-image-store.s3.amazonaws.com/0/51384/243dc0ad-34d9-9715-e5a6-b9917471880d.png" alt="image" /></p>

<p>温度が表示されました。</p>

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

<h4>resetメソッド</h4>

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

<p><img src="https://qiita-image-store.s3.amazonaws.com/0/51384/ed971ec7-ff43-fa8b-eaab-f2cfc527bb3d.png" alt="image" /></p>

<h2>Wifiに接続する</h2>

<p>いよいよEspruinoをインターネットに繋げます。
冒頭の「Espruinoを使い始める&gt;必要物品を調達する」で紹介した、<a href="https://www.adafruit.com/products/1469" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">CC3000 Wifi Module</a>を用意しましょう。こちらにもピンヘッダを付ける必要があります。</p>

<h3>結線</h3>

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

<table>
<thead>
<tr>
  <th>Espruinoのピン</th>
  <th>CC3000のピン</th>
</tr>
</thead>
<tbody>
<tr>
  <td>GND</td>
  <td>GND</td>
</tr>
<tr>
  <td>VBat</td>
  <td>VIN</td>
</tr>
<tr>
  <td>B3</td>
  <td>IRQ</td>
</tr>
<tr>
  <td>B4</td>
  <td>VBEN(CS)</td>
</tr>
<tr>
  <td>B5</td>
  <td>CS</td>
</tr>
<tr>
  <td>B6</td>
  <td>MOSI(DIN)</td>
</tr>
<tr>
  <td>B7</td>
  <td>MISO(DOUT)</td>
</tr>
<tr>
  <td>B8</td>
  <td>CLK(SCK)</td>
</tr>
</tbody>
</table>

<p><img src="https://qiita-image-store.s3.amazonaws.com/0/51384/10f6cb5e-a48c-96ca-4b13-18250e5963c3.png" alt="image" /></p>

<h3>プログラム</h3>

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

<p></p><pre class="crayon-plain-tag">// 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);</pre><p></p>

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

<p><a href="https://html5experts.jp/wp-content/uploads/2015/03/4a5e6bafc154f962f9ad5d061f17435e.png" data-wpel-link="internal"><img src="/wp-content/uploads/2015/03/4a5e6bafc154f962f9ad5d061f17435e.png" alt="スクリーンショット 2015-03-10 3.33.54" width="598" height="480" class="alignnone size-full wp-image-13659" srcset="/wp-content/uploads/2015/03/4a5e6bafc154f962f9ad5d061f17435e.png 598w, /wp-content/uploads/2015/03/4a5e6bafc154f962f9ad5d061f17435e-300x241.png 300w, /wp-content/uploads/2015/03/4a5e6bafc154f962f9ad5d061f17435e-207x166.png 207w" sizes="(max-width: 598px) 100vw, 598px" /></a></p>

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

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

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

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

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

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

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

<p><strong>参考</strong></p>

<ul>
<li><a href="http://qiita.com/rockymanobi/items/d50fcaf26cb59afb586b" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">POSTリクエストを投げる</a></li>
<li><a href="http://qiita.com/rockymanobi/items/e85a57408fa07da6b29c" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">WEBサーバとして動かす</a></li>
</ul>

<h1>まとめ</h1>

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

<p>筆者も<strong>会社のトイレの空き状況をブラウザで見れるサービス</strong>を作ったり、<strong><a href="http://rocky-manobi.com/blog/?p=232" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">すだちの木に水を上げるとマスコットが喜ぶ玩具</a></strong>等々をEspruinoで作って運用しています。実際に作って運用してみると、本当にいろいろなことに気づきます。この手のサービスやシステムを設計するにあたっての勘所や注意すべきこと、開発当初は思いもよらなかったサービスの&#8221;効果&#8221;等、とにかくいろいろなことに気づかされます。もちろんハードウェアの専門家になることが目的ではないのですが、とても勉強になりますよ。</p>

<p>ちなみに、Espruinoは日本語ドキュメントが少ないことがネックです。なんとかできないものかと、去年ひっそりと<a href="http://qiita.com/advent-calendar/2014/espruino" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Espruino Advent Calendar 2014</a>なるものを作りました。（ところどころ挫折していますが）これらを参考に、一緒に面白いものを作っていけたらと思います。</p>

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

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

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

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

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

<p>というわけでIoT/WoT。言葉自体は流行っていますが、取り組んでいる人はまだまだそう多くはありません。
これを機に、まずはEspruinoで、面白いモノを作っていきましょう。</p>
]]></content:encoded>
		
		<series:name><![CDATA[IoTxWeb]]></series:name>
	</item>
		<item>
		<title>WoTはここからはじめる！？JavaScriptで開発できる3つのJS Boardデバイス</title>
		<link>/bathtimefish/13109/</link>
		<pubDate>Mon, 02 Mar 2015 00:00:16 +0000</pubDate>
		<dc:creator><![CDATA[村岡 正和]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[IoT]]></category>
		<category><![CDATA[JS Board]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[WoT]]></category>

		<guid isPermaLink="false">/?p=13109</guid>
		<description><![CDATA[連載： IoTxWeb (6)JavaScriptではじめる組み込み系プログラミング さまざまなデバイスがWebを介してつながるWeb of Things（WoT）。WoTの普及によってさまざまな分野からWeb上に新しい...]]></description>
				<content:encoded><![CDATA[<div class="seriesmeta">連載： <a href="https://html5experts.jp/series/iot_web/" class="series-240" title="IoTxWeb" data-wpel-link="internal">IoTxWeb</a> (6)</div><h2>JavaScriptではじめる組み込み系プログラミング</h2>

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

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

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

<h2>Espruino</h2>

<p><a href="https://tessel.io/espruino.com/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">espruino.com</a></p>

<p>2013年に<a href="https://www.kickstarter.com/projects/gfw/espruino-javascript-for-things" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Kickstarterで資金調達が開始</a>され、目標額を大きく超える調達額を獲得し開発されたデバイスです。リファレンスボードであるEspruino Boardは、72MhzのCortex-M3でJavaScriptプログラムがコンパイルされ、動作する小さなマイコンです。</p>

<p><img src="http://www.espruino.com/img/ESPRUINOBOARD.jpg" alt="Espruino Board" width="280" height="440"></p>

<p>JavaScriptコードは、専用の<a href="https://chrome.google.com/webstore/detail/espruino-web-ide/bleoifhkdalbjfbobjackfdifdneehpo" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Espruino IDE</a>で編集し、EspruinoをPCとUSB接続すれば、IDEからEspruinoへ直接プログラムが転送できるようになっています。ArduinoのようにIDEが用意されているので、気軽に開発できるのがよいですね。</p>

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

<p></p><pre class="crayon-plain-tag">setWatch(function() {
        LED2.write(1);
        setTimeout(function() {
        LED2.write(0);
    }, 3000);
}, A1, {repeat:true, edge:"rising"});</pre><p></p>

<p>EspruinoのJavaScriptには、ハードウェアを制御するための専用APIが、搭載されています。上記のコードでは <a href="http://www.espruino.com/Reference#l__global_setWatch" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">setWatch</a> というsetIntervalに似た関数で、センサーの状態を取得するループ処理を行っています。</p>

<p><img src="/wp-content/uploads/2015/02/IMG_20150222_153543-640x480.jpg" alt="Espruinoで人感センサーが動作しているようす" width="640" height="480" class="alignnone size-large wp-image-13116" srcset="/wp-content/uploads/2015/02/IMG_20150222_153543.jpg 640w, /wp-content/uploads/2015/02/IMG_20150222_153543-300x225.jpg 300w, /wp-content/uploads/2015/02/IMG_20150222_153543-207x155.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>筆者はこのプログラムをもうちょっと作りこんで、ウチの猫のトイレに設置しています。猫ちゃんがトイレに入ったり出たりするのを検知して、クラウドにデータを送信し、スマートフォンにプッシュ通知するような仕組みをつくりました。猫のトイレがすぐに掃除できるようになったので、猫ちゃんのストレスが減りました（減ったにちがいないｗ）。この事例は<a href="http://special.nikkeibp.co.jp/ts/article/ad0h/172223/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">日経テクノロジーオンライン</a>で取り上げていただきました。</p>

<p><img src="/wp-content/uploads/2015/02/IMG_20140612_183305-480x640.jpg" alt="Espruino猫トイレセンサーを猫トイレに設置している" width="359" height="500" class="alignnone size-large wp-image-13117" /></p>

<p>Espruinoに関する日本語の情報はあまり多くないですが、いまのところ<a href="http://qiita.com/advent-calendar/2014/espruino" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Espruino Advent Calendar 2014</a>がよくまとまっていると思います。個人的にはJS Boardの中で一番気に入っているデバイスなので日本でももっとユーザーが増えてほしいところですね。</p>

<p>これからEspruinoを買おうと思っている方には、上記のEspruino Boardもいいんですが、現在開発中の<a href="https://www.kickstarter.com/projects/gfw/espruino-pico-javascript-on-a-usb-stick" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Espruino Pico</a>もオススメです。Espruino PicoはEspruino Boardよりもさらに小さいUSBメモリサイズの基盤です。とても小さな基盤なのでいろいろなケースに活用できるのではないでしょうか。Espruino Picoのプレオーダー分は、2015年春ごろに発送される予定のようです。</p>

<h2>Tessel</h2>

<p><a href="https://tessel.io/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">tessle.io</a></p>

<p><a href="https://www.dragoninnovation.com/projects/22-tessel" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">DragonInnovationで資金調達された</a>プロジェクトで、Espruinoよりも少し大きなマイコンです。Wifiチップを搭載しているので、単独でWebにアクセスする機能を持っています。</p>

<p><img src="https://s3.amazonaws.com/technicalmachine-assets/technical-io/tessel-red-usb.jpg" alt="Tessel main board" width="280" height="440"></p>

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

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

<p></p><pre class="crayon-plain-tag">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); });</pre><p></p>

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

<p><img src="/wp-content/uploads/2015/02/IMG_20150222_133033-640x480.jpg" alt="Tesselで加速度センサーのデータを取得している。デバイスを傾けると、値が変化する" width="640" height="480" class="alignnone size-large wp-image-13118" srcset="/wp-content/uploads/2015/02/IMG_20150222_133033.jpg 640w, /wp-content/uploads/2015/02/IMG_20150222_133033-300x225.jpg 300w, /wp-content/uploads/2015/02/IMG_20150222_133033-207x155.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>Tesselは基本的に、4つのモジュール専用ポートに専用モジュールを接続して利用するスタイルですが、専用モジュール以外が利用できないかというと、そうではありません。Tesselには汎用的なGPIOポートも搭載されているので、<a href="http://akizukidenshi.com/catalog/top.aspx" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">秋月電子</a>あたりで買ってきたセンサーをつなげることもできます。下図はTesselのGPIOポートでLEDを点滅させてみたところです。</p>

<p><img src="/wp-content/uploads/2015/02/IMG_20150222_132105-640x4801.jpg" alt="TesselのGPIOポートにLEDを接続してLEDを点滅させている" width="640" height="423" class="size-full wp-image-13146" srcset="/wp-content/uploads/2015/02/IMG_20150222_132105-640x4801.jpg 640w, /wp-content/uploads/2015/02/IMG_20150222_132105-640x4801-300x198.jpg 300w, /wp-content/uploads/2015/02/IMG_20150222_132105-640x4801-207x137.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" />　▲TesselのGPIOポートにLEDを接続してLEDを点滅させている</p>

<p></p><pre class="crayon-plain-tag">/*
* 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);</pre><p></p>

<p>Tesselは今回紹介するデバイスで唯一国内販売されているデバイスです。<a href="https://www.switch-science.com/catalog/list/563/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">スイッチサイエンス</a>で購入できます。国内で買える、電子回路の知識が不要、node.js互換など、ハードウェアのない方でも入門しやすいデバイス、といえるのではないでしょうか。</p>

<h2>Spark</h2>

<p><a href="https://www.spark.io/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">spark.io</a></p>

<p>Sparkはマイコンというよりは、サーバーサイドを含めたオープンなIoTプラットフォームとして開発されています。<a href="http://makezine.jp/blog/2014/07/spark-lands-4-9-million-in-funding-launches-new-cloud-based-operating-system.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">昨年、Lion Wells Capital、O’Reilly AlphaTech Venturesなどから出資を受けて話題</a>となりました。</p>

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

<p><img src="https://store.spark.io/assets/core-a6fcc2b47e235d529ab58fe0a1124588.png" alt="Spark Core" width="280" height="440"></p>

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

<p>Spark Coreへプログラムを転送する場合は、Espruino、Tesselと違って、PCとUSB接続をする必要がありません。クラウド上のIDE <a href="https://www.spark.io/build" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Spark Build</a>で編集したコードをFlashすると、ネットワークに接続されているSpark Coreにリモート転送され、実行される仕組みになっています。</p>

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

<p></p><pre class="crayon-plain-tag">Spark.variable("detected", &amp;detected, INT);
...
detected = motionDetect();</pre><p></p>

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

<p></p><pre class="crayon-plain-tag">curl -G https://api.spark.io/v1/devices/[Device ID]/detected \
  -d access_token=[Access Token]</pre><p></p>

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

<p></p><pre class="crayon-plain-tag">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);
  }
});</pre><p></p>

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

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

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

<h2>まとめ</h2>

<p>個人的な話ですが、最近<a href="http://morning.moae.jp/lineup/362" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">ハルロック</a>の影響で電子工作にはまってます。仕事が終わってからハンダ付けをしたり、ブレッドボードで配線したりしてる今日この頃なんですが、マイコンのプログラミングはC++とかJavaとかでやるのはなんか負けた気がするので、JavaScriptでプログラミングできるものにこだわっています。</p>

<p>そういったWeb技術、特にJavaScriptを中心的に利用している組み込み機器を個人的に”JS Board”と呼んでいて、<a href="https://atnd.org/events/57672" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">勉強会</a>を開催したりしています。先日のHTML5 Conference 2015でも出展させていただきました。今後も勉強会などをやって、情報共有などをしていこうと思っています。</p>

<p><img src="/wp-content/uploads/2015/02/IMG_20150125_155111-640x4801.jpg" alt="" width="640" height="441" class="alignnone size-full wp-image-13150" srcset="/wp-content/uploads/2015/02/IMG_20150125_155111-640x4801.jpg 640w, /wp-content/uploads/2015/02/IMG_20150125_155111-640x4801-300x207.jpg 300w, /wp-content/uploads/2015/02/IMG_20150125_155111-640x4801-207x143.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" />　▲HTML5 Conference 2015にJS Board勉強会が出展。さまざまなJS Boardデバイスが展示されている。</p>

<p>これからまだまだJavaScriptを活用するデバイスが続々と登場してきそうです。
JS Boardに興味を持った方々、ぜひ一緒に勉強していきましょう！</p>
]]></content:encoded>
		
		<series:name><![CDATA[IoTxWeb]]></series:name>
	</item>
	</channel>
</rss>
