CHIRIMENとherokuを使って20分でIoTを始める方法

知ってる人は知っているCHIRIMENボードと、web屋さんには有名なherokuを使って20分でIoT（WoT）をはじめる方法を書きます。

#CHIRIMENとは
純粋なwebアプリでGPIOとかI2Cを制御でき、巷に売っている電子部品を扱えてしまう素敵なシングルボードコンピューターです。2016年10月現在、スイッチサイエンスさんで[販売](https://www.switch-science.com/catalog/2833/)されており、Boot to Gecko(B2G)のイメージが[配布](https://github.com/chirimen-oh/release/releases/tag/CMN2015-1_B2GOS-20160808)されています。

詳しくは[CHIRIMENページ](https://chirimen.org/)や[クイックスタート](https://chirimen.org/docs/ja/quickStart.html)をご覧下さい。

#herokuとは
数回のコマンド実行でwebサービスをデプロイできてしまう素敵なPaaSです。herokuについては世の中にたくさん記事があるので説明は割愛します。記事を書くにあたり特に[こちら](http://developers.mobage.jp/blog/how-to-use-for-beginners-heroku)とかを参考にさせていただきました。


#CHIRIMEN+herokuでIoTをはじめる方法
それではCHIRIMENとherokuを使ってIoTをはじめる方法に入っていきます。ざっくり言うと、webブラウザでURLアクセスするだけでGPIO,I2Cが使えてしまうCHIRIMENを利用して、Lチカするwebサービスをherokuでデプロイし、CHIRIMEN上のブラウザからアクセスします。重要なのはwebクライアント側なので、サーバー側はなんでもいいのですが、今回はNode.jsを使っています。

##1. herokuアカウントの作成
まずはherokuのアカウントを作成します。[heroku](https://www.heroku.com/)のSign upページへアクセスして、メールアドレス等の入力を行いアカウントを作成してください。
<img width="1091" alt="スクリーンショット 2016-10-04 15.09.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/19359/76853f24-15ba-c818-8bf0-bbdf80d7bb76.png">


##2. heroku CLIのインストール
各環境に合わせたherokuのコマンドラインインターフェース（CLI）をダウンロードしてインストールします。

<img width="995" alt="スクリーンショット 2016-10-04 15.23.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/19359/b90f7796-2afc-a39a-d365-1069a9cde541.png">

##3. herokuコマンドからログイン
heroku CLIがインストールできたら、heroku loginコマンドを使用して、先ほど作成したアカウントへログインします。

```
$ heroku login
Enter your Heroku credentials.
Email: name@example.com
Password:
```

##4. Lチカアプリの準備
Lチカサンプルアプリをクローンし、heroku createコマンドを使用してheroku上にアプリを作ります。

```
$ git clone https://github.com/naokisekiguchi/gpio-on-the-web.git
$ cd gpio-on-the-web
$ heroku create
```

##5. Lチカアプリのデプロイ
heroku上のrepositoryにpushしてLチカアプリをデプロイします。git pushが完了したら、heroku openでデプロイを確認することができます。PC上のブラウザでは"GPIO TEST"という文字が赤と青に点滅していればデプロイ成功です。

```
$ git push heroku master
$ heroku open
```

<img width="432" alt="スクリーンショット 2016-10-04 16.05.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/19359/a8fbebd5-dfb2-63b6-12c9-dc4179b3013a.png">

##6. CHIRIMEN起動
ここからはCHIRIMENを使った作業になります。

インターネットアクセスとGUI操作があるので、CHIRIMENのfullUSB端子に対して、USBハブを介してWiFiドングルとUSBマウスを接続します。あとはHDMI端子とAC電源を接続してCHIRIMENを起動させます。

![IMG_2259.jpg](https://qiita-image-store.s3.amazonaws.com/0/19359/03304f26-d67b-9804-890f-4dc1342f6d05.jpeg)


##7. WiFi設定
CHIRIMENの起動が完了したらSettingsアプリからWiFi接続の設定を行います。設定が終わったらホーム画面へ戻ります。（意外と知られていないですが、マウスの右クリックがホームボタンの役割を担っています。）

![IMG_2256.jpg](https://qiita-image-store.s3.amazonaws.com/0/19359/3e7fb622-c1b1-563f-1a3c-0eedd4df7d84.jpeg)

##8. LEDの接続
チカらせるためのLEDを接続します。LEDの陰極をGND(CN1-1)へ陽極をGPIO198(CN1-9)へ繋いでください。（my CHIRIMENはピンヘッダを生やしてますが、販売品はスルーホールで売られています。[スルーホール用のテストワイヤ](https://www.amazon.co.jp/%E3%82%B5%E3%83%B3%E3%83%8F%E3%83%A4%E3%83%88-TTW-200-%E3%82%B9%E3%83%AB%E3%83%9B%E3%83%BC%E3%83%AB%E7%94%A8%E3%83%86%E3%82%B9%E3%83%88%E3%83%AF%E3%82%A4%E3%83%A4/dp/B00J7LFHVU)などを使うと便利です。）

![IMG_2261.jpg](https://qiita-image-store.s3.amazonaws.com/0/19359/fbbd9c6d-4866-6b1d-8cff-a8512f594564.jpeg)

##9. Lチカアプリへのアクセス
あとはブラウザを開いて、herokuでデプロイしたURLにアクセスするだけです！"GPIO TEST"の点滅と同じように1秒間隔でLEDが点滅する様子が確認できるはずです。（うまくLEDが点滅しない場合、何度かリロードしてみてください）

![IMG_2264.jpg](https://qiita-image-store.s3.amazonaws.com/0/19359/2e04aa3c-5a13-0815-3224-d73bc1ccf2e7.jpeg)

##10. いろいろいじってみる
Lチカアプリをいろいろいじってみたい方はpublicディレクトリ以下を書き換えてください。例えば、点滅間隔を変更したい場合は[main.jsの16行目](https://github.com/naokisekiguchi/gpio-on-the-web/blob/master/public/js/main.js#L16)とかをいじればできます。いじった後はgit add、git commit、git push heroku masterを行ってCHIRIMENのブラウザをリロードすれば動作確認完了です!

```main.js
'use strict';

window.addEventListener('load', function (){

// WebGPIO LED Blink
  navigator.requestGPIOAccess()
    .then(gpioAccess=>{
      var port = gpioAccess.ports.get(198);
      var v = 0;
      return port.export("out").then(()=>{
        setInterval(function(){
          v = v ? 0 : 1;
          port.write(v);
          if(v){document.querySelector("h2").className = "on";}
          else{document.querySelector("h2").className = "off";}
        },1000);
      });
  });
}, false);
```

#まとめ
今回、herokuを使ってデプロイしたwebサービスをもとに、CHIRIMEN上でLチカさせる方法をご紹介しました。CHIRIMENアプリはwebデプロイしなくても、Firefoxブラウザに搭載されているwebIDEで開発・インストールすることができるのですが、webアプリって言ったらやはりURLでアクセスしたくなるものです。

特にIoT、WoTの場合、ボードコンピュータを複雑なハードウェアの内部に組み込んでしまったり、開発PCから直接接続することが難しい場合があると思います。そんな時に、既存のwebサービスと同じようにアプリを開発・デプロイすることができるCHIRIMENはラピッドプロトタイピングに最適なツールだと思います。

現状、URLにアクセスするだけでGPIO,I2Cの制御をできるようなブラウザはCHIRIMENだけですが、Web標準にしていくために[ドラフト](https://rawgit.com/browserobo/WebGPIO/master/index.html)を作ったりといった活動もしてます。

興味のある方は是非[Facebookグループ](https://www.facebook.com/groups/chirimen/)、[github](https://github.com/chirimen-oh)などなどから活動に参加していただければと思います。