読者です 読者をやめる 読者になる 読者になる

Ola Kae Tode Tai

すべてのエンジニアに、追い風を祈る。

Electric ImpでLEDを遠隔操作する 〜WebUIを追加する〜

プログラミング

この投稿は Electric Imp Advent Calendar 2015 の7日目の記事です。

f:id:kironono:20151201001226p:plain

Webアプリを書く

Electric ImpでリモートからLEDを操作する方法をみてきました。最後に超簡易ではありますが、WebUIを追加してLEDチカチカマッシーンを完成させます。

ola.kironono.com

ola.kironono.com

ola.kironono.com

cURLで動作を確認してるので、同様のリクエストをするようなJavaScriptを書けばOKです。

var api_url = "https://agent.electricimp.com/XXXXX";

この部分をエージェントのURLに書き換えます。

CORS (Cross-Origin Resource Sharing)

上記のJavaScriptでは、jsdo.itからエージェント(agent.electricimp.com)をajaxで呼び出していますので、オリジン以外のリソースを読み込んでいることになりますが、正常に通信できています。

実はRockyがデフォルトで以下のヘッダーを送出しています。

Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept
Access-Control-Allow-Methods: POST, PUT, GET, OPTIONS
Access-Control-Allow-Origin: *

すべてのオリジンからのリソースのアクセスを許可しています。もし、このようなヘッダーを送出したくない場合のRockyのコードは以下のようになります。

app <- Rocky({"accessControl": false});

まとめ

これでElectric ImpのGPIOを使ってLEDを制御するデバイス。デバイスを遠隔操作するためのエージェント。エージェントを呼び出すWebUIとしてのWebアプリまでを一通り作ってみました。

今回利用したRocky以外にもElectric Impには便利なライブラリが揃っています。どのようなライブラリがあるかは、

electricimp.com

ここから一覧できます。

では!