HomeAssistantでスマートホームコントローラを作ってみる[5/6]

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

はじめに

6ヶ月間の育児休業を取って、育児&家事に専念しているnaka-kazzです。今年になって、スマートリモコン・各種IoTセンサー・スマートスピーカが手軽に手に入るようになってきて「2019年はスマートホーム元年」だったかなーと今年一年を振り返りながら記事を書いています。
ただ、家の中にIoT機器が増えてくると、スマートリモコンを操作する時はスマホのリモコンアプリ、太陽光発電の発電状況を見るにはHEMSのパネルなど・・・情報や操作がバラバラで使いづらいなと感じています。そこで、今回は家の中のIoT機器を一元管理できるようにしてみたいと思います。

やりたいこと

最終的にやりたいことは、家の中のセンサー情報を一括で表示したり、各種家電の操作を行える「かっこいいスマートホームコントローラ」を作っていきたいと思います。今回は、このスマートホームコントローラを、Home Assistant(Hass.io)で作っていきます。

実現に向けた連載

やりたいことを実現するために、以下のように少しずつに記事を書いていきます(予定)。
 1回目:Home Assistantのインストール
 2回目:アドインのインストール
 3回目:温度・湿度・照度センサーの追加
 4回目:家電操作スイッチの追加
 5回目:コントロールパネルの設定 ←この記事
 6回目:Picture Elementsの設定

5回目:コントロールパネルの設定

前回は、Home Assistantにスイッチを追加して、家の中の家電を操作できるようにしてみました。今回は、HOME ASSISTANT CONTROL PANEL(HACP)を使って、Home Assistantの画面をかっこいいコントロールパネル風にしていきたいと思います。

HACPのダウンロードと準備

まずは、HACPのhtmlファイルをサイトからダウンロードして準備を行います。

①HACPのダウンロード

HOME ASSISTANT CONTROL PANELのサイトにアクセスして、1/3ぐらいスクロールしたところにある「DOWNLOAD」のボタンからHACPのhtmlファイルをダウンロードします。

②hass.htmlの編集

実はHACPはちょっと古く、現在は更新がされていません。そして、Ver0.98以降のHome AssistantではHACPが認証に利用しているLegacy API Password auth providerが利用不可になってしまいました。そこで、HACPのコードを編集して、現在のHome Assistantが推奨している「Authorization」ヘッダーを用いた認証に変更します。htmlファイルの修正箇所は以下通りです。

1527行目をコメントアウトし、1528行目を追加。

1535行目にheadersの行を追加。

1718行目をコメントアウトし、1729行目を追加

2060行目をコメントアウトし、2061行目を追加

2077行目をコメントアウトし、2078行目を追加

編集内容は「api_password」パラメータでパスワードを渡している箇所を「Authorization」ヘッダで渡すように変更しています。

上記の編集のDiff結果も載せておきます。

③アクセストークンの発行

次にHome Assistantの左メニューのユーザ名クリックし、一番下にある「CREATE TOKEN」をクリックします。

④アクセストークン名の入力

トークンの名前を求められるので、適当なトークン名を入力して「OK」をクリックします。

⑤アクセストークンの取得

画面に表示されたトークンをメモ帳などにコピーしておきましょう。

これでHACPのインストール準備は完了です。

HACPのインストール

ここからは、HACPをHome Assistantに配置しインストールしていきます。

①ディレクトリの作成

Home Assistantの左メニューから「Configurator」を開き、「/config」でディレクトリの作成ボタンをクリックします。

②ディレクトリ名の入力

ディレクトリ名の入力画面で「www」と入力し「OK」ボタンをクリックします。この名称はなんでも良い分けではないので必ず「www」と入力しましょう。

③wwwディレクトリへの移動

ディレクトリ一覧にwwwディレクトリが作成されていると思いますので、クリックして移動します。

④hass.htmlのアップロード

それでは、先ほど編集した「hass.html」を「/config/www/」にアップロードボタンを押してアップロードしましょう。

⑤Home Assistantの再起動

最後にHome Assistantを再起動しましょう。

HACPの設定

ここからはHACPに実際にアクセスして、各種設定を行っていきます。

①HACPへアクセス

Webブラウザで「http://<IPアドレス>:8123/local/hass.html」にアクセスしてください。アクセスすると以下のようなWelcome画面になりますので「Manual Setup」を選択します。

②ホスト名とAPIパスワードの入力

ホスト名とAPIパスワードを入力する画面が表示されるので、以下のように入力して「CONNECT」ボタンをクリックします。
 ・ホスト名:http://<IPアドレス>:8123
 ・APIパスワード:上でメモしたアクセストークン

③HACP画面の表示

うまく行くと以下のように、HACPの初期画面が表示されるはずです!

④HACP画面の設定

画面右下の歯車アイコンをクリックして、設定画面を表示させます。

⑤背景の設定

画面左側の「Background」メニューをクリックして、好きな背景画像を選択します。

⑥温度の設定

画面左側の「Weather」メニューをクリックして、Temperature Entity欄で「sensor.temperature」を選択します。

⑦設定モードの設定

画面左側の「Settings」メニューを選択し「Edit Mode」をオンにします。

⑧設定の保存

最後に、画面左側の「Save」をクリックし、次に「Close」を押して設定画面を閉じます。

⑨アイコンの追加

Edit Modeの画面では、画面右下の「+」ボタンからグループの追加が、各グループ内の「+」ボタンからボタンの追加ができるので、ボタンを追加していきます。

こんな感じです。

⑩Edit Modeの終了

好みのボタンが追加できたら画面右下の歯車アイコンから設定画面に入り「Edit Mode」のスイッチをOffにして、「Save」→「Close」とクリックしましょう!!

最終的には、いろいろなセンサーやスイッチを追加して、こんな形にしました。

以上でHACPの基本的な設定は完了です。当然スイッチのボタンを押せば、家電を操作することが可能です。

おわりに

今回はHome AssistantにHOME ASSISTANT CONTROL PANEL(HACP)をインストールして設定してみました。スマホやタブレットにHACPの画面を表示させれば、持ち歩き可能なスマートホームコントローラの完成です!!
次回は、Picture Elementsを使って、家の間取りに各種スイッチやセンサー情報を表示させてみます。

連載記事

 1回目:Home Assistantのインストール
 2回目:アドインのインストール
 3回目:温度・湿度・照度センサーの追加
 4回目:家電操作スイッチの追加
 5回目:コントロールパネルの設定
 6回目:Picture Elementsの設定    ←次回はこれ

関連記事

Alexaをしゃべらせる(Node-red編)
やりたいことNode-redでnode-red-contrib-amazon-echoやnode-red-contrib-alexa-home-skillのパレットを使うと、Alexaに音声で話しかけることをトリガーにNode-redの処理
自分のGoogleカレンダーにJWTを使って予定を追加してみる
今回は、JWT(JSON Web Token)を使って、ブラウザからのログイン操作なしで特定のGoogleカレンダーに予定を追加することをやってみます。
Alexaに通知を送る(Node-red編)
今回は、Alexaに「通知」を送ることをやってみたいと思います。ちなみに、この通知を送る機能は「プロアクティブイベントAPI」という物を利用しますが、少々実装が面倒なのが難点です。
Node-redでスマートハウス-LG製テレビを操作してみる(1/5)
はじめに我が家にも有機ELテレビがやってきました。国産メーカのテレビも、有機ELパネルはほとんどがLG製のパネルを利用しているらしく「同じパネルなら安い方がいいんじゃない?」という事でOLED 55C7Pを購入!このLG製のテレビ、内部はw
Node-redでスマートハウス-Gravioで子供用プリキュアボタン
今回は、Gravioのボタンセンサーを使って、2歳の子供でもテレビのアプリをyoutubeにして、プリキュアの動画を再生できる「プリキュアボタン」を作りたいと思います。
Gravioでミルク&オムツ交換記録をGoogleカレンダにつけてみる
子育てをしていると両手が塞がっていたり、手が汚かったりすることが本当多いんです。なので、スマホを手に取って、ロック解除して、記録アプリを開いて、時間・種類などをいちいち入力することはホント面倒です。今回は「赤ちゃんボタン」を作って、ボタンを押すだけでミルク&おむつ交換の記録がワンプッシュで記録することをやってみます。
Node-redだけで簡易Alexaアプリを作ってみる「アレクサ、雨雲きてる?」
今回はASKを使わずNode-redだけを使って、自分用の簡易Alexaアプリを作ることをやってみたいと思います。

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

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

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

コメント

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