Electric ImpでLEDを遠隔操作する 〜WebUIを追加する〜
この投稿は Electric Imp Advent Calendar 2015 の7日目の記事です。
Webアプリを書く
Electric ImpでリモートからLEDを操作する方法をみてきました。最後に超簡易ではありますが、WebUIを追加してLEDチカチカマッシーンを完成させます。
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には便利なライブラリが揃っています。どのようなライブラリがあるかは、
ここから一覧できます。
では！
