RaspberryPiでスマートホーム 〜JavascriptでMQTTを使って指令を送る〜

前回AWS IoTを使いMQTTでJSONデータをラズパイ側で受信、USB赤外線リモートアドバンスを使って照明の操作ができるようになりました。今度はJSONデータを組み立てて送信する側を作成したいと思います。

いろんなデバイスから送信したいので、HTMLとJavascriptを使って送信することにしました。これならWebSocketに対応したブラウザがあればどの端末からでも操作できるようになります。

IAMユーザーの作成

まず事前に今回のアプリ(送信側)専用のIAMユーザーを作成しておきます。

”ユーザーを追加”ボタンを押します。

”ユーザー名”はここでは”mqtt-test”としています。今回はJavascriptからの送信に使うので”プログラムによるアクセス”にチェックを入れます。

”既存のポリシーを直接アタッチ”を選択し、ポリシーは”AWSIoTDataAccess”を選択します。

”ユーザーの作成”ボタンを押すと完了です。

”アクセスキーID”と”シークレットアクセスキー”はJavascriptからの呼び出し時に使用するのでコピーしておきます。

JavascriptでAWS IoTに接続

AWSを呼び出す場合はURLを署名する必要があり、以下を参考にします。

”ウェブアプリケーションでの WebSocket プロトコルの使用”に書かれているコードを”SigV4Utils.js”という名前で保存して呼び出して使えるようにしておきます。以下のコードです。

これを使ってアクセス先のURLを組み立て署名、そこへWebSocketで接続、JSONを送信という流れになります。

以下のスクリプトを”homeapp.js”という名前で保存します。

(アクセスキー)、(シークレットキー)、(エンドポイント)、(リージョン)は自分のものに置き換えておきます。

(アクセスキー)、(シークレットキー)は先ほどIAMでユーザーを作成したときに最後に表示された”アクセスキーID”と”シークレットアクセスキー”です。

(エンドポイント)は前回ラズパイを登録したときに指定されたものです。

AWSのサービス一覧で”iot”で検索、”IoT Core”選択

IoT Coreの画面で”管理”をクリック。

”モノ”をクリック、登録したラズパイを選択。

”操作”をクリック、表示されたHTTPSがエンドポイントになります。

(リージョン)は東京なら”ap-northeast-1”になります。

あと画面を作っておきます。

AWS IoTのJavascript用SDKと前回も使用したPaho MQTTのJavascript版を使用します。いずれもCDN経由で使ってます。また先ほど保存した2つのスクリプトも読み込ませます。

とりあえずこんな感じです。何も飾ってないのでデザインはちょっとださいですが…

各コンポーネントがクリックされた時に送信するようにしています。

テスト

上記3つのファイル

  • SigV4Utils.js
  • homeapp.js
  • homeapp.html

を同じフォルダに入れ、homeapp.htmlを読み込ませてテストします。ローカルでJavascriptを動かせない場合はapacheでも使ってローカルにWebサーバーを立てましょう。

照明をつけて見ます。つきました!

前回使ったAWSのテスト用ページも使うと便利です。トピックに接続して監視しておくとメッセージがくれば表示されるはずです。

もしメッセージが来なければ送信側の問題、メッセージが来てるのに照明がつかなければメッセージが間違っている、もしくはラズパイ側の問題、と原因の切り分けが簡単になります。

レンタルサーバーに置けば外からでも…

これでブラウザから家の電気やエアコンを操作できるようになりました。

このHTMLとスクリプトをレンタルサーバーにでも置いてアクセスできるようにしておけばどこからでも操作できるようになります。もちろんBasic認証などパスワードかけとかないとやばいですけど…

ただ、外からだと本当に照明がついたかどうかはわからないんですよね…赤外線リモコンだと命令送るだけでステータスが取れません。WEBカメラで見れるようにするとかしないといけないですね。

あとページを表示したままの場合スリープするとWebSocketの接続が切れるので、ページをリロードしてやる必要があります。

追記

 PCの電源のオン・オフができるようになりました。