TypeScript+CRA+Material-ui+redux-toolkit+Web Worker APIでReact App作成
注: 趣味グラマーです。
質は保証しかねます。
作りたいもの
既にTypescriptで作成済の重たい計算を行うライブラリがあります。
この計算の入力の作成、実行、出力の表示のすべてをフロントエンドで行えるPWAを作りたい・・・
以下のライブラリ等を利用して作成します。
- 本体: CRA
- 入出力の管理: Redux（redux-toolkit）
- UI: Material-UI
- 出力のグラフ化: Victory
- 重たい計算: Web Worker API
- ホスティング: Netlify
情報ソース
TypeScript+Material UI v4
バージョン4の書き方のお手本
TypeScript + Material-UI v4 のスタイル付きコンポーネント作成ガイド - Qiita
redux-toolkit (Javascript)
reduxの基本からredux-toolkitの使い方まで
HookとRedux ToolkitでReact Reduxに入門する | Hypertext Candy
Typescript + redux-toolkit
redux-toolkit公式
Usage With TypeScript | Redux Toolkit
CRA+Web Worker
workerize-loaderを導入する方法です。
ejectしなくてもいけちゃいます。
Integration with Create React App · Issue #5 · developit/workerize-loader · GitHub
React + TypeScriptで開発するときのコツ
型が分からない問題の具体的な解決策など。
https://www.youtube.com/watch?v=Z5iWr6Srsj8
Redux関連で発生した問題と解決策
storeを作ってProviderで渡すところまでは、2つめの情報ソースでTypeScriptだろうと関係なくできました。
その後に発生した問題です。
useSelectorのところでstoreの型が不明
3つめ情報ソースであるredux-toolkit公式ドキュメントの一番上に書いてありました。
// sliceを定義しているファイル const counterSlice = createSlice({ name: "counter", initialState: 0, reducers: { // ... } }); export default counterSlice; // reducerを定義しているファイル import counterSlice from '上のファイル'; const rootReducer = combineReducers({ counter: counterSlice.reducer, // ... }); export type RootState = ReturnType<typeof rootReducer>; // useSelectorするファイル（comsumer） import { RootState } from '上のファイル'; const YourComponent = () => { const count = useSelector((state: RootState) => state.counter); return <div>{count}</div> }
独自定義型のstateを持つsliceのreducerがコンパイルエラー
slice内でinitalStateをきちんと型定義しておくと、reducerではかなり型推論がきき、全く型を書く必要がなくなりました。
type Aaa = { bbb: number, ccc: string } const initalState = { bbb: 5, ccc: "f*ck" } const aaaSlice = { name: "aaa", initialState, reducers: { actionA: (state, action) => { return {...state, bbb: action.payload} } } }
actionの型をきちんと定義したい
独自の型のPayloadを渡すとき、コンパイルが通らなくなります。
PayloadAction型を使います。
こちらもredux-toolkit公式ドキュメントがソースです。
import { createSlice, PayloadAction } from "@reduxjs/toolkit"; type Aaa = { bbb: number, ccc: string } const initalState = { bbb: 5, ccc: "f*ck" } const aaaSlice = { name: "aaa", initialState, reducers: { setAll: (state, action: PayloadAction<Aaa>) => { return action.payload } } }
Web Worker関連
かなり大変でした。
CRAでworker-loaderは将来的にサポートされる予定ですが、どんどん先延ばしにされて行っています。
https://github.com/facebook/create-react-app/pull/5886
サポートされていない以上、CRAのお庭の外に出て（ejectして）戦うしかありません。
正直Webpackは勉強したくないし、事故ったっときに解決できる気がしないので、ejectは眼中にありませんでした。
水辺でパチャパチャしてるくらいが今の私には丁度いいのです。
そんな中で上記のソースをみつけ、一瞬で実装できました。
sampleWorker.worker.ts内のfooの下に自分が使う関数を定義しただけです。
使い方もComponent.tsxとほぼ同じです（async/awaitを使っただけ）。
HomeAssistant[4] Hass.io on docker on Raspbian
HomeAssistant[0] インストール - 週末はいつも晴れでは、Hass OSをRaspberry Piにインストールしましたが、やっぱりRaspbian OS上からdockerでHass.ioを起動する方法に切り替えました。
以下の理由です。
- HassOSがクソ過ぎる
- Pi holeを使ってみたかった
dockerのインストールまでは以下のリンク等を参考にさせていただいています。
Raspbianのインストール
Installing operating system images - Raspberry Pi Documentation
Raspbianの設定（ユーザ変更など）
初心者向！Raspberry Pi 最低限のセキュリティ設定【所要時間 30分】 - Qiita
docker
Raspberry Piにdockerをインストールする - Qiita
Hass.io on dockerのインストール方法
こちらを参考にします。
www.smarthomebeginner.com
まとめ
これだけでインストールは完了します。
# 必要なパッケージのインストール（dockerなのになぜ必要なのか？よく分からない） sudo apt-get install bash jq curl avahi-daemon dbus software-properties-common apparmor-utils # rootユーザになる sudo su # Hass.ioのインストールから実行まで curl -sL https://raw.githubusercontent.com/home-assistant/hassio-installer/master/hassio_install.sh | bash -s --
インストールスクリプトの中身
なぞのshell scriptでインストールしているのが気になりますね。rootで実行してるし。
中身は以下のリンクから確認できます。
serviceを何個か登録してますね。Raspberryp Pi再起動時もこれなら安心（？）です。
github.com
スクリプトを全部読むのは大変なので、とりあえずdockerプロセスを確認してみます。
$ docker ps -a CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 4eba4fdd1874 homeassistant/raspberrypi3-homeassistant:0.103.0 "/bin/entry.sh pytho…" 2 hours ago Up 2 hours homeassistant 6eb41928248b homeassistant/armv7-hassio-dns:1 "coredns -conf /conf…" 7 days ago Up 7 days hassio_dns 810f6017c496 homeassistant/armv7-hassio-supervisor "/bin/entry.sh pytho…" 10 days ago Up 7 days hassio_supervisor
1つじゃないですね。nameを見ると、
- homeassistant
- hassio_supervisor
- hassio_dns
上記2つの関係は以下のリンクの図が分かりやすいです。
developers.home-assistant.io
さらに、Hass.ioアドオンを追加すると、dockerプロセスとして追加されることがわかります。
段々と全容が見えてきました。
homeassistantのconfigディレクトリはどこにあるのか
/usr/share/hassio/homeassistantでした。
レタスの水耕栽培と徒長
はまっています。
IoTと組み合わせて遊んでます。
しかし、この時期のためか徒長（ひょろひょろ成長）してしまっています。
1. 徒長の原因
徒長の原因は4つあるそうです。
徒長の原因を知ることで、対策を練ることができます| PHYTOCHROME WEB Site HOME
- 日当たり不足
- 水遣り過多
- 風の不足
- 窒素肥料過多
以下でそれぞれの対策を考えていきます。
2. 日当たり不足対策
部屋内で育成しているため、これが主要因と思われます。
窓際に置いているので、日光だけではどうしようもない状態です。
そこで、人工光を与えることにしました。
人口光としては電気代が少なくて済むLEDライトを使用します。
では、LEDライトはどのように選べばいいのでしょう。
選択の条件（スペック）として、波長と消費電力があります。
2.1 LEDライトの波長
IoTされている方はArduino等でおなじみのLEDですが、赤色だけでなく様々な色があることをご存じでしょうか。
LED半導体の化合物組成によって、多様な発色が可能となっているようです。
LEDの発光原理 | LEDの基礎知識 | LED照明 | パナソニックのLED | 照明器具 | Panasonic
いくつかWebサイトを見ましたが、青色と赤色の可視光が植物の成長に重要なようです。
文部省の情報なのだし、自分で実験することもできないので鵜呑みにしてしまいます。
光合成にはクロロフィル（葉緑素）という色素が関わっているが、これは図2に示すような吸収スペクトルを持っている。これを見ると、赤色（660nm近辺）と青色（450nm近辺）に二つの吸光合収ピークがあり、この波長が光合成に特に有効であることがわかる。白色光が葉に当たると赤と青が吸収されて、残りの光は緑が多くなるので葉は緑色に見えるのである。筆者らの実験によると植物の健全な生育にはこの赤色光と青色光がバランスよく配合されていることが大切で、後に述べる光量子束密度の単位でR／B比（赤と青の比率）が10：1あるいは5：1が適切なようである。
第2章 豊かなくらしに寄与する光 2 光と植物－植物工場：文部科学省
以上から、赤色LED（660nm）と青色LED（450nm）が10:1~5:1の範囲のものを検討することとします。
2.2 LEDライトの消費電力
2.2.1 植物に必要な光
植物に必要なものは照度[lx]で決まるようです。
- 光合成で生成されるエネルギーは照度に比例するが、飽和する点（光飽和点）がある
- （植物の成長に使われるエネルギー）＝（光合成で生成されるエネルギー）ー（呼吸で消費されるエネルギー）
- 植物の成長に使われるエネルギーが0となる照度が光補償点と呼ばれている
1969年のデータですが、レタスの光補償点は1.5～2[klx]、光飽和点は25[klx]です。
しかし、この値は自然光（太陽光）スペクトルをベースに算出されていることに注意しなければなりません。
上記の通り、LEDライトは植物の成長に抜群な波長の光のみを放出しています。
同じ照度[lx]でも、自然光とLEDでは成長の度合いは大きく異なることが予想されます。
つまり、LEDライトにおける光補償点、光飽和点は上記の値よりも小さくなります。
どのくらい小さくなるのか、はかなり難しい問題だと思います。
それぞれのスペクトルに対してエネルギー応答の重み及び葉緑素の応答の重みを乗じ、和をとって比とします。
上記のうち、エネルギー応答だけは波長に反比例するので、簡単に求められます。
葉緑素の応答は上記リンクのグラフから読み取るしかなさそうです。
自然光スペクトルはどこかで手に入れることができるかもしれません。
LEDのスペクトルは・・・自分で測定するしかないですかね(-_-;)
2.2.2 LEDライトの照度
LED電球が広く使われるようになり、ルーメンの記載が義務付けられるようになったらしいので、ルーメンが分かっているものとします。
まず、ルクス[lx]とルーメン[lm]とカンデラ[cd]の定義を読みました。
ルクス - Wikipedia
ルーメン - Wikipedia
カンデラ - Wikipedia
| 用語 | 単位* | 定義 |
|---|---|---|
| 光度 | cd | 単色光(540 THz)の光源からの放射強度が1/683[W/Sr]となる光度 |
| 光束 | lm | 1カンデラの光源から1ステラジアン内に放射される光束 |
| 照度 | lx | 1平方メートルの面が1ルーメンの光束で照らされるときの照度 |
光束[lm]が分かれば、位置関係から照度[lx]は求まりそうです。
LED電球には指向性があるものとして、電球を中心とした下方向半球の範囲に光があたるとします。
電球とレタスが50cm離れていると、照射面積は
]
となります。
さらに光が集中的にレタスに当たるようなLEDライトとすれば、照射面積は小さくなり、効率的になります（同じ光束でも照度が高くなります）。
2.3 自然光や時間を考慮する
自然光（太陽光）の照度は当然ですが時間的に変化しています。
LEDライトも私が部屋にいる間は付けたくないので、運転時間が決まっています。
このため、時間積分（または時間平均）を考慮した計算が必要となります。
パラメータを整理しておきます。
2.3.1 LEDライトの計算
参考のため以下のライトを使用するとします（現時点で購入はしていません）。
本当かどうか分かりませんが、このライトの光束は1300~1500[lm]と記載されています。ここでは1500[lm]とします。
このライトは平板形ですが、先ほどの議論と同じように50cm離れた場所で下方向半球に光が広がるとします（若干厳しい仮定かも知れません）。
このとき、レタスの位置における照度は となります。
レタスの光飽和点25,000[lx]には遠く及ばないため、LEDライトの光が無駄になることはありません。
2.3.2 自然光の計算
簡単のため、太陽が出ている8時間の自然光が一定で2000[lx]であるとします。
その他の16時間はすべて暗闇で、0[lx]であるとします。
このとき、自然光の一日の時間積分は16,000[lx h]となります。
2.3.3 植物の育成に必要な照度の時間積分
光補償点は2,000[lx]ですが、補償点では成長に回す栄養が無いので3,000[lx]必要であるとします。
一日で必要な照度の時間積分は [lx h] となります。
2.3.4 LEDライトの点灯時間
植物の育成に必要な照度時間積分から、自然光の照度時間積分を差し引きます。
この時間積分だけLEDライトを当てる必要があります。
[lx h]
LEDライトの照度は1000[lx]なので、一日で必要な点灯時間は以下の通り求まります。
時間
・・・
一日より長いじゃねえか！
ということで、ここまで一日あたりをベースに考えてきましたが、スパンを広げた時間積分を考える必要がありそうです。
極端に日照が少ない期間が含まれると危なさそうなこと、レタスの生育期間が半年程度であることを考えると、1週間や2週間を目安に照度の計算を行うべきでしょうか。・・・。分かりません。
また、ここではLEDライトスペクトルの優位性を考慮していませんでした。
太陽光スペクトルに比べ、2倍、3倍効率的であれば、必要な点灯時間は1/2、1/3となりますので、現実的になるかもしれません。
農家の方が天気に苦労される理由が少しわかった気がします。
HomeAssistant[3] Merossスマートプラグを使う
こちらのMerossスマートプラグを購入しました！
サイバーマンデーセールで3,984円／4個でした。
4個もいらなかったかな？
とりあえず植物育成ライトのOn/Offに使用します。
スマートプラグをWifiに接続する
ここは専用アプリを使うしか無さそうです。
Merossアプリをインストール。
アカウントを登録します。
メールアドレスに何も届かないのがちょっと不安。
スマートプラグWifiにiPhoneを接続・経由させ、家のWifiにスマートプラグを接続します。
プラグ名は分かりやすい半角英数字がいいと思います。
私は4つあるのでPlug01としました。
特につまるところは無し。
ここでMerossアプリからOn/Offできることを確認しています。
リレー切り替えのパチパチ音が結構しますね。
Home Assisatantとスマートプラグを接続する
Home Assistant内のToggleスイッチとしてスマートプラグが使えるように設定します。
Hass.ioのアドオンにMeross製品は含まれていません。
自分で設定することにします。
LAN内から直接スマートプラグを操作するのが最も低遅延になると思われますが難航しそうです。
それほど時間にシビアな要求では無いので、IFTTTを経由させることにします。
IFTTTアカウントは取得済みであるとします。
IFTTTアップレットの作成
まず、Webhookに対してスマートプラグが応答するアップレットを作成します。
ホーム画面のGet moreから作成画面へ。
＋ボタンでscratchから作成します。
ThisとしてWebhooksを選択。
Receive a web requestを選択。
Event NameはMerossPlug01Onとしておきます。
今回はプラグをOnにするアップレットです。
ThatはMerossを選択。
Merossと連携します（Merossアプリと同じメールアドレス／パスワード）。
Turn onというそれっぽいものがあるので選択。
自分の環境ではDevice一覧に、今回登録した名前（Plug01）が表示されるのに時間がかかりました。
そして完成！
動作確認とWebhookアドレスの確認
なぜかは分かりませんが、アプリバージョンではdocumentationへのリンクが無いです。
ブラウザから以下のリンクにアクセスし、Documentationをクリックします。
https://ifttt.com/maker_webhooks
Webhookのテストページが表示されます。
{event}に今回のイベント名MerrosPlug01Onを入力し、実行します。
下の方のJSONは今回は使いません。
Test itをクリックし、動作確認を行いました。
ラグがけっこうありますが、正常に作動しています！
一番下にあるcurlコマンドが、今回のWebhookコマンドになります。
コピーしておきます。
configuration.yamlの編集
以下はIFTTTアップレットをON同様にOFFも作成したものとして進めます。
Home Assistantにswitchとして登録するため、configuration.yamlを編集します。
登録後、Home Assistantを再起動します。
switch: - platform: command_line switches: meross_plug01: # ここは好きな名前で結構です。 command_on: "curl -X POST https://maker.ifttt.com/trigger/MerossPlug01On/with/key/XXXXXXXXXXXXXXXXXXXXXX" command_off: "curl -X POST https://maker.ifttt.com/trigger/MerossPlug01Off/with/key/XXXXXXXXXXXXXXXXXXXXXX"
command_onとcommand_offには先ほどのcurlコマンドを入力します。
将来的にgitでconfigを管理することを考えると、イベント名やkeyのべた書きは避けたいですね。
環境変数等から読み込めるようにしていきたいです。
スイッチカードの登録
Overview（状況）にカードを登録します。
左上の：=>Configure UIでOverviewを編集可能な状態にし、オレンジ色の＋ボタンをクリックします。
Entityを選択し、先ほど登録したswitch.meross_plug01を選択します。
登録すると、カードが表示されるようになりました！
相変わらずラグがありますが、On/Offできるようになってます！
Automation設定
本当は照度センサーの値を元にOn/Offさせたいところですが、今回は天気予報を使うことにします。
On/Offの条件（Trigger）は以下とします。
- スイッチをOnにする条件：9:00AMの時点でスイッチがオフかつ今日の天気が晴れでない
- スイッチをOffにする条件：5:00PMの時点
Onが結構複雑ですね。
Offから作っていくことにします。
switchのstateとは
条件（Trigger）を設定するにあたり、Entityの取り得るstateを知る必要があります。
少なくとも現在の状態については、
左側のメニュー => Developer tools => STATESから確認できます。
switch.meross_plug01はoffとなっていました。
天気については、weather.homeを見ると、cloudyとなっていました。
予報（forecast）を見ると、partlycloudyやsunnyが見つかりました。
Automation Editor
左側のメニュー => configuration => Automationと進み、オレンジ色の＋ボタンをクリックします。
この画面はAutomation Editorと呼ばれていて、Automation作成の補助をしてくれるようです。
以下の通り入力しました。
Trigger typeやEntity等、選択式のところは迷わないと思いますが、AtやStateは自由入力なので不安になりますね。
保存してautomation.yamlを確認すると、下記の設定が書き込まれていました。
- id: '1575884198258' alias: Turn off the LED grow light description: '' trigger: - at: '17:00' platform: time condition: [] action: - condition: state entity_id: switch.meross_plug01 state: 'off'
公式のexamplesを見てみると、時間は秒まで指定しているようです。
- at: '17:00:00'に修正しました。
次にOnにするAutomationについて。
こちらは結果だけお伝えします。
- id: '1575886426842' alias: Turn on the LED grow light description: '' trigger: - at: 09:00:00 platform: time condition: - condition: state entity_id: switch.meross_plug01 state: 'off' - condition: template value_template: "{{ not is_state('weather.home', 'sunny') }}" action: - condition: state entity_id: switch.meross_plug01 state: 'on'
not sunnyの設定方法が分からなかったので、こちらを参考にしました。
Automation coding for 'not state' - Configuration - Home Assistant Community
templateについては、左側のメニュー => Developer tools => TEMPLATEで遊びながら勉強できます。
参考までに。
HomeAssistant[2] 用語集
前回はFeaturedアドオンのインストールを行いました。
今回は予備知識として知っておくべき用語をまとめました。
下記のリンクを翻訳しています。一部混乱させる表現があるので、意訳している個所もあります。
www.home-assistant.io
- Action
- Automation
- Binary sensor
- Component
- Condition
- Cookbook
- Cover
- Device
- Device Tracker
- Discovery
- Entity
- Event
- Frontend
- Group
- Hass.io
- Integration
- Light
- Lovelace
- Notification
- Packages
- Platform
- Scene
- Script
- Switch
- TTS
- Template
- Trigger
- Zone
- hass
すべての用語は記事内リンクされています。
「アプリ画面」という用語をHome Assistant UIの代わりに使っています。
Automation
Automationを使うことで、Triggerの条件が満たされたときに、Eventを自動的に起動することができます。例えば日の入り（Trigger）に対して、蛍光灯をつけるイベント（Event）を自動化できます。
Binary sensor
Binary sensorは2つの状態しか持たないセンサーです。例えばライトのON/OFFです。
Component
Integrationと同じです。
Condition
ConditionはAutomationに使用するオプションの1つで、Action実行の条件です。
Cookbook
CookbookにはHome Assistantの設定例があります（特に自動化）。
Device
Deviceは物理的な実体を表し、何かを実行したり、何かを測定したりするためのものです。
Device Tracker
Device TrackerはDeviceの有無や座標をトラッキングするために使われます。
Event
何かが起こること。
Hass.io
Hass.ioはOSであり（？）、Home Assistanのインストールやアップデートの面倒を見る。Hass.ioはアプリ画面から操作可能であり、設定のスナップショットを作成したり、元に戻したり、容易に拡張させることができる。
Integration
IntegrationはHome Assistantの機能の論理的なコアを提供する。例えばビルトインIntegrationのnotifyは通知を送る機能を提供する。
Notification
Integrationの1つであるnotifyを使うことで、メッセージや写真等をDeviceに送る（通知する）ことができる。
Packages
いくつかのIntegrationをひとまとめにすること。
Platform
ソフトウェアやハードウェアプラットフォームとの接続を行うこと。例えばpushbulletPlatformを使うことで、pushbullet.comの通知送信サービスと連携することができる。
Switch
ライトのON/OFFのように2つの状態から1つを選択すること。
TTS
text to speechの略語で、文字列をHome Assistantにしゃべらせること。
Template
Templateは変数を含むAutomationのこと。変数としてActionやTrigger等を割り当てられる。Automationを動的に生成することも可能となる。
Trigger
Automationの引き金となるPlatformの値や状態。
Zone
Device等の有無を検知するためのエリア範囲
hass
Home Assistantの略語としてよく使われる。hassというコマンドライン用のコマンドもあるので注意。
HomeAssistant[1] アドオンのインストール
前回はRaspberry PiにHass OSをインストールしました。
今回はこちらのFeaturedアドオンを試してみました。
www.home-assistant.io
DuckDNS
現在のHome Assistantは、ローカルネットワーク内で閲覧することはできますが、外出先では見れない状態です。
外出先でスマートフォン等から確認するには、Home Assistantをインターネットに公開する必要があります。
これを実現する方法の1つがDuckDNSです。
このアドオンでは、さらにLet's Encryptを利用したSSL証明書の発行も自動的に行ってくれる仕組みとなっています。
DuckDNSはDDNSと呼ばれるサービスの1つで、ご自宅のネット回線によっては使えない可能性があります。
私の住んでいるクソマンションは上流のルータからプライベートIPが割り振られているます。上流ルータの設定ができないため、DDNSが使えません（グローバルIPが割り当てられるのは上流ルータ）。
ネットワークは詳しくないのですが、tracerouteコマンドを使うと、確実に経由しているサーバがわかります。
$ traceroute www.google.co.jp traceroute to www.google.co.jp (***.***.***.***), 30 hops max, 38byte packets 1 私の部屋のルータ(***.***.***.***) 0.361 ms 0.554ms 0.240ms 2 マンションの上流ルータ(***.***.***.***) 3.582 ms 3.545 ms 3.709 ms 3 KDDIのルータ(***.***.***.***) ... 14 Googleのサーバ？(***.***.***.***)
おとなしくngrokを使うことにします。
Google Assistant
Google AssistantのAIと会話ができるようになります。
Raspberry Piに接続するマイクやスピーカが必要になります。
私の場合はすでにGoogle Homeがあり、インテグレーションから簡単に利用できそうなので、このアドオンの導入は見送ることにします。
HASS Configurator
Home Assistantを設定するにはconfiguration.yamlというファイルを編集する必要があります。
がっつり編集する場合は、パソコンでキーボードからゴリゴリ編集することになると思いますが、on/off等の多少な変更のために、毎回パソコンを開くのは面倒です。外出先からの編集もできません。
HASS Configuratorはアプリケーション画面からconfiguration.yaml等の設定ファイルを編集することができるようになります。
早速インストールしてみます。
左側のサイドバーから、Hass.io => ADD-ON STOREと移動します。
Official add-onsからConfiguratorをクリックします。
INSTALLボタンをクリックしてインストールします。
インストールが終わったら、STARTボタンをクリックします。
Show in sidebarを有効にしておきます。
すべて終わると、Configuratorのadd-on画面はこのような状態になります。
せっかくなので、設定ファイルconfiguration.yamlを使って、アプリ画面のテーマを編集してみることにします。
サイドバーからConfiguratorをクリックします。
左上のフォルダマークをクリックし、configuration.yamlを選択します。
私の場合は以下のように入力されていました。
# Configure a default setup of Home Assistant (frontend, api, etc) default_config: # Uncomment this if you are using SSL/TLS, running in Docker container, etc. # http: # base_url: example.duckdns.org:8123 # Text to speech tts: - platform: google_translate group: !include groups.yaml automation: !include automations.yaml script: !include scripts.yaml scene: !include scenes.yaml
以下の公式リンクを参考にし、テーマの定義を追加します。
Frontend - Home Assistant
# define theme frontend: themes: happy: primary-color: pink sad: primary-color: blue
入力し終わったら、上側に表示される赤色の保存ボタンをクリックします。
以上の入力で、2種類のテーマhappyとsadが定義されました。
次に、変更されたconfiguration.yamlをHome Assistantに再読み込みさせる必要があります。
サイドバーからConfigurations => Server Controlsに移動します。
RESTARTボタンを押すと、Home Assistantが再起動します（Raspberry Pi本体は再起動しません）。
再起動時にconfiguration.yamlが再読み込みされます。
再起動後、サイドバーのユーザプロフィールに移動します。
ここでテーマ（Theme）の変更ができます。以下のようにhappyとsadが選択可能になっています。
テーマの変更については、今後の記事で取り上げようと思います。
SSH Server
Hass OSにSSH接続できるようになります。ただし、root権限はHass.ioで制限されているため、パッケージのインストール等を行うことはできません。
このアドオンでは、公開鍵認証によるSSH接続を行うため、接続元のパソコンで鍵を生成しておく必要があります。
今回はMacから接続することとします。
$ ssh-keygen -t rsa $ cat ~/.ssh/id_rsa.pub
cat で表示されたものを"authorized_keys"に入れると、ssh接続できました。
$ ssh root@hassio.local _ _ _ | | | | (_) | |__| | __ _ ___ ___ _ ___ | __ |/ _` / __/ __| | |/ _ \ | | | | (_| \__ \__ \_| | (_) | |_| |_|\__,_|___/___(_)_|\___/ Our Cli: $ hassio help core-ssh:~#
hassioコマンドがが使えるようになっており、ログやハードウェアの情報が確認できるようになっています。
www.home-assistant.io
Samba share
このアドオンを使用すると、Sambaがセットアップされ、Hass.io内のファイルに共有フォルダとしてアクセスできるようになります。
同一LAN内ならばWindowsやMacはもちろんのこと、スマートフォンからも共有フォルダにアクセスできるようになります。
Configurator同様に左側のサイドバーから、Hass.io => ADD-ON STORE => Official add-ons => Samba shareを選択し、INSTALLボタンを押します。
Samba shareは少し設定が必要になります。
add-on画面の一番下まで移動すると、Configが見つかります。
ここで、共有フォルダにアクセスするためのユーザ名usernameとパスワードpasswordを設定します。
最後にadd-on画面上部のSTARTボタンをクリックして起動します。
設定したユーザ名とパスワードで共有フォルダにアクセスできるようになったはずです。
HomeAssistant[0] インストール
自宅をスマートホーム化してみたかった。
その足掛かりとして。
いろいろ調べたことをまとめました。
使うもの
- Raspberry Pi 3 model B+ ←Raspberry Pi 4 Model B（メモリ2GB）推奨
- micro SDカード（32GB） ←32GB以上推奨
- ACアダプタ（5V/3A） ←2.5A以上推奨
- パソコン（私の場合はMac OS）
Home Assistantとは
Home Assistantとは、スマートホーム実現のためのハブアプリケーションです。
以下のデモをご覧いただければと思います。
スマート家具やセンサー、スマートスピーカー等を、ブラウザやスマホアプリから一元管理できます。
demo.home-assistant.io
予備知識
最初に知っておくべきなのが、Home AssistantとHass.ioの区別です。
Home Assistant vs. Hass.io - Home Assistant
さらに、Hass.ioが載っているRaspberry Pi用のOSとしてHassOSやHassbianがあります。
HomeAssistant for newcomers: What it is, what is hassio, hassos, hassbian, 101 and cookies - Home Assistant Community
Home Assistantとは
Home Assistantの実態は単なるPythonライブラリであり、ソフトウェアです。
Python環境さえあれば、どんなプラットホームでも簡単に使うことができます。
私はRaspbian OSやMac OS上で試しました。
$ pip install homeassistant
$ hass # => http://localhost:8123にアクセス
Hass.ioとは
Hass.ioの実態はDockerバージョンのHome Assistantです。
Home Assistantを含む様々なツール群をまとめ、Raspberry Pi等のプラットホームで簡単に使えるようにしたものになります。
重要なのが、Hass.ioのアドオンはHome Assistant単体では使えないということです。
私は自作のアドオンを作成したかったので、Hass.ioをインストールしました。
Hassbianとは
HassbianはRaspbery Pi用のOS RaspbianにHome Assistantを載せたものです。少し時代遅れだそうです。
HassOSとは
HassOSはDockerやHass.ioが動くのに必要最小限な環境が含まれるLinux OSです。
Hass.ioのインストール
かなりたくさんのインストール方法があります。
www.home-assistant.io
私のRaspberry PiにはRaspbian OSがインストールされています。
現状、Raspberry Pi上にインストールする方法は2つありそうです。
- Raspbian上のdockerを使ってHass.ioをインストールする
- Raspbianを消去してHass OSをインストールする
1つめは日本語の情報が結構見つかります（参考1、参考2）。
2つめの方法は上記リンク中の最も推奨される方法です。
せっかくなので正攻法の2つめの方法を試すことにします。
（Hass OSが最小構成というところに惹かれました）
1. Raspberry Piモデルに合わせたOSイメージをダウンロードする
私の場合はRaspberry Pi 3 Model B+ 64bitでした。
上記リンクからダウンロードしました。
2. OSイメージをmicro SDに書き込む
まずはmicro SDカードをFAT32形式でフォーマット（消去）しました。
私のパソコンはMac OSなので、「ディスクユーティリティ」を使用しています。
その後、上記リンクの通りにbalenaEtcherという書き込みアプリケーションでmicro SDに書き込みました。
3. Wifiと固定IPアドレスの設定をする
有線かつDHCPで自動的に割り当てでいい場合はスキップ可能です。
Wifi接続や固定IPアドレスとしたい場合は下記リンクを参考に前準備しておきます。
hassos/network.md at dev · home-assistant/hassos · GitHub
私の場合はWifiで固定IPアドレスとしたいので、下記の設定となります。
[connection] id=my-network type=802-11-wireless [802-11-wireless] mode=infrastructure ssid=MY_WIFI_SSID [802-11-wireless-security] auth-alg=open key-mgmt=wpa-psk psk=MY_WIFI_PASSWORD [ipv4] method=manual address=MY_IPADDRESS;MY_GATEWAY_ADDRESS dns=8.8.8.8;8.8.4.4; [ipv6] addr-gen-mode=stable-privacy method=auto
上記をmicro SDカード内の/hassio-boot/CONFIG/network/my-networkに書き込みます。
または、別途準備した空のUSBメモリに書き込むことでもネットワーク設定が可能です（試していません）。
OSインストール後もnmcliで固定IPアドレスは設定できるようです。
4. micro SDカードをRaspberry Piに差し込む
そのままです。
5. Raspberry Piを起動する
初回起動時は最新版Home Assistantのダウンロードに時間がかかります。
起動後は同一ローカルネットワーク上（Wifiにつないだスマートフォン等）で以下のアドレスからアクセスできるようになります。
http://hassio.local:8123
ダウンロード中にアクセスすると、以下の画面が表示されました。
6. Hass.ioにアクセスする
下記のような画面が表示されれば成功です。おめでとうございます！
ここでユーザ登録や位置情報の登録等の初期設定を行います。
後から変更できますので、ミスっても大丈夫です。
最後に
とりあえずインストールがおわりました。
次回以降にセットアップ方法やFeaturedアドオンについてみていきます。