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

はじめに
第３回：スマホ&Alexaインタフェースの実装
1. スマホ用インタフェースの実装
2. Alexa用インタフェースの実装
おわりに
関連記事

はじめに

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

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

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

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

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

①HTMLの作成

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

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Smart Home Controller</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <script type="text/javascript" language="javascript">
    function zigbeeControl(cmd)
    {
      var xhttp = new XMLHttpRequest();
      xhttp.open("GET", "http://＜Raspberry PiのIPアドレス＞:1880/red/zigbee?id="+cmd, true);
      xhttp.send();
    }
  </script>
  <div class="main">
    <h1>Living room</h1>
      <div class="button" onclick="zigbeeControl('1')">
        <div class="icon">
          <img src="light_on.png">
        </div>
        <div class="title">
          電球 On
        </div>
      </div>
    </div>
  </div>
</body>
</html>

<head>

<title>Smart Home Controller</title>

</head>

<body>

function zigbeeControl(cmd)

{

var xhttp = new XMLHttpRequest();

xhttp.open("GET", "http://＜Raspberry PiのIPアドレス＞:1880/red/zigbee?id="+cmd, true);

xhttp.send();

}

</script>

<h1>Living room</h1>

</div>

電球 On

</div>

</body>

</html>

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

②CSSの作成

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

body {
  background-image: url("back.jpg");
  background-size: cover;
}
.main{
  padding: 0px 10px 10px 10px;
}
h1{
  font: 20px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
  font-weight: 800;
  color: #ffffff;
  border-bottom: 3px solid #ffffff;
}
.button{
  width: 120px;
  height: 120px;
  margin: 0px 0px 10px 10px;
  border-radius: 5px;
  display: inline-block;
  background: rgba(102,102,102,0.8);
  box-shadow: 2px 2px 2px rgba(255,255,255,0.4);
  font: 18px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
  font-weight: 800;
  color: #ffffff;
}
.button:active{
  background: rgba(240,240,240,0.8);
  box-shadow: 2px 2px 2px rgba(102,102,102,0.4) inset;
  color: rgba(102,102,102);
}
.icon{
  width: 120px;
  height: 80px;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
}
.title{
  text-align: center;
  vertical-align: middle;
}

body {

background-image: url("back.jpg");

background-size: cover;

}

.main{

padding: 0px 10px 10px 10px;

}

h1{

font: 20px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;

font-weight: 800;

color: #ffffff;

border-bottom: 3px solid #ffffff;

}

.button{

width: 120px;

height: 120px;

margin: 0px 0px 10px 10px;

border-radius: 5px;

display: inline-block;

background: rgba(102,102,102,0.8);

box-shadow: 2px 2px 2px rgba(255,255,255,0.4);

font: 18px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;

font-weight: 800;

color: #ffffff;

}

.button:active{

background: rgba(240,240,240,0.8);

box-shadow: 2px 2px 2px rgba(102,102,102,0.4) inset;

color: rgba(102,102,102);

}

.icon{

width: 120px;

height: 80px;

display:table-cell;

text-align:center;

vertical-align:middle;

}

.title{

text-align: center;

vertical-align: middle;

}

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

HTMLサンプルダウンロード

③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」の値が１だった場合に、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」をバックアップして、テキストエディタで開きます。

pi@raspberrypi:~ $ su
root@raspberrypi:/home/pi# cd /etc/systemd/system/multi-user.target.wants/
root@raspberrypi:/etc/systemd/system/multi-user.target.wants# cp nodered.service nodered.service.org
root@raspberrypi:/etc/systemd/system/multi-user.target.wants# vi nodered.service

pi@raspberrypi:~ $ su

root@raspberrypi:/home/pi# cd /etc/systemd/system/multi-user.target.wants/

root@raspberrypi:/etc/systemd/system/multi-user.target.wants# cp nodered.service nodered.service.org

root@raspberrypi:/etc/systemd/system/multi-user.target.wants# vi nodered.service

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

# Run as normal pi user - change to the user name you wish to run Node-RED as
User=root <--ここを書き換え
Group=pi
WorkingDirectory=/home/pi

Nice=5
Environment="NODE_RED_OPTIONS=--userDir /home/pi/.node-red/" <--この行を追加
Environment="NODE_OPTIONS=--max_old_space_size=512"

# Run as normal pi user - change to the user name you wish to run Node-RED as

User=root <--ここを書き換え

Group=pi

WorkingDirectory=/home/pi

Nice=5

Environment="NODE_RED_OPTIONS=--userDir /home/pi/.node-red/" <--この行を追加

Environment="NODE_OPTIONS=--max_old_space_size=512"

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

root@raspberrypi:/etc/systemd/system/multi-user.target.wants# systemctl daemon-reload
root@raspberrypi:/etc/systemd/system/multi-user.target.wants# systemctl restart nodered.service

1 2	root@raspberrypi:/etc/systemd/system/multi-user.target.wants# systemctl daemon-reload root@raspberrypi:/etc/systemd/system/multi-user.target.wants# systemctl restart nodered.service

②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」の２つのノードがパレットに追加されます。

③echo hubノードの追加

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

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