Raspberry PiとNode-redで、Hueブリッジ(Zigbee Hub)を作ってみた(スマホ&Alexa操作対応)[3/3]

スマートホーム
スポンサーリンク
このエントリーをはてなブックマークに追加

はじめに

前回は、zigbee2mqttサーバをインストールし、zigbee機器とペアリングして、Node-redからzigbee機器を操作できるようにしてみました。今回は、スマホとAmazon Alexa用のインタフェースを作って、スマホや音声でZigbee機器を操作できるようにします。

 ■実現に向けた連載
  第1回:CC2531とRaspberry PIの準備
  第2回:zigbee2mqttサーバのインストールとzigbee機器の接続
  第3回:スマホ&Alexaインタフェースの実装  <–この記事

第3回:スマホ&Alexaインタフェースの実装

スマホ用インタフェースの実装

まずは、スマホ用のインタフェースを作っていきます。スマホ用の画面はHTMLで作り、HTML上のボタンが押された時にNode-redのWebAPIを呼び出すことで実現します。

①HTMLの作成

スマホに表示する以下のようなindex.htmlを「/home/pi/node-red-static/」に作成します。

HTMLなので特に説明は不要かと思いますが、8行目から15行目のJavaScriptの部分で、HTML上のボタンが押された時にnode-redのWebAPI「http://<Raspberry PiのIPアドレス>:1880/red/zigbee?id=番号”」を呼び出す処理を行っています。

②CSSの作成

index.htmlから読み込まれるstyle.cssも作成します。CSSでボタンがクリックされた時の動き(凹んだように見える)を定義しておくと、分かりやすいボタンになります。

ご参考までに、私が作成したindex.html+style.css+画像などもダウンロードできるように置いておきます。

③HTMLの確認

index.htmlとstyle.cssができたら、スマホのWebブラウザから「http://<Raspberry PiのIPアドレス>:1880/」にアクセスして、HTMLを確認してみて下さい。

④http inノードの追加

次に、HTMLから呼び出されるWebAPIを作っていきます。PCのWebブラウザでNode-redの画面を表示し、「http in」ノードをフローに追加します。ノードを追加したら、URL欄に「zigbee」と入力して、「完了」ボタンをクリックします。

このURL欄に入れるものは、上のindex.htmlのWebAPI呼び出し部分に記載した「/red/」の後の部分に合わせる必要があります。

⑤switchノードの追加

次に「switch」ノードをフローに追加し、プロパティ欄に「req.query.id」と入力します。また、値の欄にも「1」を入力します。

このように設定することで、WebAPI呼び出しのパラメータ「id」の値が1だった場合に、switchノードの右側の一番上の接続点に処理が振り分けられます。

⑥http responseノードの追加

スマホからのWebAPIのリクエストに対して、応答を返すために「http response」ノードをフローに追加します。特に、ノードの設定を変更する必要はありませんので、ただノードを追加するだけでOKです。

⑦ノードの接続

次に、各ノードを以下の図のように接続し、「デプロイ」ボタンをクリックします。

⑧動作テスト

それでは、スマホで「http://<Raspberry PiのIPアドレス>:1880/」にアクセスし、表示された「電球」のボタンをタップしてみてください。タップに合わせて、電球がオン/オフすればOKです‼️

Alexa用インタフェースの実装

ここからは、node-redにAmazon Alexa用のインタフェースを追加し、zigbee機器を音声で操作できるようにします。

①node-red実行ユーザの変更

Alexa用のインタフェースを追加するためには、node-redがroot権限で実行されている必要があります。そこで、node-redの実行ユーザを変更します。

まず、rootで「/etc/systemd/system/multi-user.target.wants」にある「nodered.service」をバックアップして、テキストエディタで開きます。

次に「nodered.service」のUserの行を「pi」から「root」に書き換えます。また、以下のように「Environment=”NODE_RED_OPTIONS=–userDir /home/pi/.node-red/”」の行を追加します。

「nodered.service」の変更ができたら、以下のようにsystemdの定義の再読み込みを行い、node-redを再起動します。

②node-red-contrib-amazon-echoのインストール

次に、Node-redにnode-red-contrib-amazon-echoをインストールします。Node-redの画面の右上にある「三」アイコンから「パレットの管理」をクリックします。

パレットの管理画面で「ノードを追加」タブを選択し、検索欄に「amazon-echo」と入力して検索します。検索結果に出てきたnode-red-contrib-amazon-echoの「ノード追加」ボタンをクリックします。

インストールが完了すると「amazon echo hub」と「amazon echo device」の2つのノードがパレットに追加されます。

③echo hubノードの追加

左側のパレットから「amazon echo hub」ノードをドラッグしてフローに追加します。ノード設定は不要なので、追加するだけでOKです。

※「amazon echo hub」は、Raspberry Piの80番ポートを利用します。既にApacheなどで80番ポートを利用している場合には、以下などを参考に設定して下さい。なお「amazon echo hub」のポート番号を変更してしまうと、Amazon Echoからデバイスが検出できません。

④echo deviceノードの追加

次に「amazon echo device」ノードをフローに追加し、編集画面のName欄に名前を入力します。なお、日本語名だと文字化けしてしまうので、英語名にすることをお勧めします。

⑤ノードの接続とデプロイ

最後に、以下のようにノードを接続して「デプロイ」ボタンをクリックします。これだけで、Alexa用のインタフェースの完成です。

⑥デバイスの検出

次に、Alexaにデバイスを追加します。スマホのAlexaアプリを開き、画面右下「デバイス」→画面右上「+」→「デバイスを追加」→「その他」の順にタップします。

次に「デバイスを検出」ボタンをタップし、1分ほど待ちます。すると、新しいデバイスとして先ほど設定した「light」が検出されます。「light」が検出されたら「デバイスをセットアップ」→「スキップ」とタップしていきます。

⑦デバイスの動作確認

デバイス一覧の画面に戻ったら、1台の照明を検出しましたの右の「表示」をタップし、「light」を選択します。すると電源アイコンが出てくるのでタップしてみましょう‼️電球がオン/オフしたらOKです。

⑧デバイス名の変更

「light」のままだと言いづらいので、デバイスの名前を日本語名に変更します。画面右上の設定アイコン→「名前を編集」とタップし、新しい名前を入力します。

⑨デバイスの動作確認

それでは、Amazon Echoに向かって「アレクサ、電球をつけて」と言って見ましょう!!
ちゃんと、電球はオン/オフしましたか?

これで、全ての設定は完了です!

おわりに

今回は、スマホ用のHTML画面を作成しzigbee機器をスマホからアクセスできるよにしました。また、Amazon Alexaから操作できるようにnode-red-contrib-amazon-echoの設定を行いました。

この記事では、IKEAのスマートライトを例に紹介しましたが、その他のzigbee機器でも同様にスマホやAlexaから操作できます。さらに、温度センサーからの温度データを元に異なる機器を動作させたりなどの、連携動作もメーカを問わず実現できます。

以上で3回の連載「Raspberry PiとNode-redで、Hueブリッジ(Zigbee Hub)を作ってみた(スマホ&Alexa操作対応)」は完了です。

 第1回:CC2531とRaspberry Piの準備
 第2回:zigbee2mqttサーバのインストールとzigbee機器の接続
 第3回:スマホ&Alexaインタフェースの実装  <–この記事

関連記事

記事が参考になったら、ブログランキングに協力(クリック)して貰えると嬉しいです。
スポンサーリンク
naka-kazz

昼間はIT企業に勤めてますが、プライベートでは「育児×家事×IoT」をテーマに家のスマートホーム化に取り組んでいます。Androidアプリも作っているので使って下さい。質問・コメントは、↓のコメント蘭でもFacebookメッセンジャーでもどちらでも大丈夫です。
E-mail:naka.kazz.d@gmail.com

naka-kazzをフォローする
スマートホーム 開発者向け
naka-kazzをフォローする
育児×家事×IoT

コメント

タイトルとURLをコピーしました