16
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-10-04

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

#CHIRIMENとは
純粋なwebアプリでGPIOとかI2Cを制御でき、巷に売っている電子部品を扱えてしまう素敵なシングルボードコンピューターです。2016年10月現在、スイッチサイエンスさんで販売されており、Boot to Gecko(B2G)のイメージが配布されています。

詳しくはCHIRIMENページクイックスタートをご覧下さい。

#herokuとは
数回のコマンド実行でwebサービスをデプロイできてしまう素敵なPaaSです。herokuについては世の中にたくさん記事があるので説明は割愛します。記事を書くにあたり特にこちらとかを参考にさせていただきました。

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

##1. herokuアカウントの作成
まずはherokuのアカウントを作成します。herokuのSign upページへアクセスして、メールアドレス等の入力を行いアカウントを作成してください。
スクリーンショット 2016-10-04 15.09.16.png

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

スクリーンショット 2016-10-04 15.23.32.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
スクリーンショット 2016-10-04 16.05.41.png

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

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

IMG_2259.jpg

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

IMG_2256.jpg

##8. LEDの接続
チカらせるためのLEDを接続します。LEDの陰極をGND(CN1-1)へ陽極をGPIO198(CN1-9)へ繋いでください。(my CHIRIMENはピンヘッダを生やしてますが、販売品はスルーホールで売られています。スルーホール用のテストワイヤなどを使うと便利です。)

IMG_2261.jpg

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

IMG_2264.jpg

##10. いろいろいじってみる
Lチカアプリをいろいろいじってみたい方はpublicディレクトリ以下を書き換えてください。例えば、点滅間隔を変更したい場合はmain.jsの16行目とかをいじればできます。いじった後は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標準にしていくためにドラフトを作ったりといった活動もしてます。

興味のある方は是非Facebookグループgithubなどなどから活動に参加していただければと思います。

16
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?