HACS と Catppuccin で画面をカスタマイズ

最終更新:

はじめに

Home Assistant は、オープンソースのホームオートメーションと IoT プラットフォームです。HACS (Home Assistant Community Store) では、コミュニティが保守するカスタム連携、ダッシュボード部品、テーマを導入し、機能や画面を拡張できます。

前のチュートリアルでは、reComputer RK3576 に Home Assistant Container を導入し、Modbus TCP の温湿度ダッシュボードを作成しました。今回は同じデバイスに HACS を導入し、Catppuccin Theme で画面を変更して、既存の監視ページが引き続き使えることを確認します。

Container には Home Assistant OS / Supervised の Apps（旧 Add-ons） 管理機能がありませんが、HACS は使用できます。HACS は Apps ストアではなく、Supervisor を追加しません。ここでは SSH と Docker コマンドで設定を管理します。

準備

ハードウェア

  • ネットワーク接続が使える ARM64 Linux を実行する reComputer RK3576 1 台。
  • SSH とブラウザーで操作する Windows、macOS、または Linux コンピューター。
  • GitHub と HACS ダウンロードサイトへのネットワーク接続。

ソフトウェア

項目検証環境
ボードreComputer RK3576
OSArmbian (Debian 12 Bookworm, ARM64)
Home Assistant の導入方式Home Assistant Container (Docker)
Docker コンテナ名homeassistant
設定ディレクトリ/home/seeed/homeassistant/config/
HACS2.0.5
Catppuccin Themev2.1.3
Web アクセスhttp://<RK3576_IP>:8123

まず、reComputer RK3576 に Home Assistant をインストールするの Docker 導入と初期設定を完了してください。温湿度ダッシュボードを表示する場合は、Home Assistant に Modbus TCP を統合するも完了できます。このチュートリアルに Modbus は必須ではありません。

/home/seeed/homeassistant/config/ は例のユーザー seeed の設定パスです。ユーザー名やマウント先が異なる場合は、実際のパスを使用してください。

RK3576 の端末でコンテナを確認します。

bash
sudo docker ps --filter name=homeassistant

homeassistant コンテナの状態が Up であることを確認します。

任意：現在の設定のバックアップ

カスタム部品を追加する前に、設定とダッシュボードデータをバックアップします。次のコマンドは整合性のあるバックアップを作成するため、一時的に Home Assistant を停止します。

bash
sudo docker stop homeassistant
sudo tar -czf "$HOME/homeassistant-config-backup.tar.gz" -C "$HOME/homeassistant" config
sudo docker start homeassistant
ls -lh "$HOME/homeassistant-config-backup.tar.gz"

アーカイブに含まれるのは Home Assistant の設定ディレクトリです。別の場所にある Modbus シミュレータースクリプトなどは含まれません。RK3576 だけに保存せず、コンピューターや外部ストレージにコピーしてください。Web 画面の暗号化バックアップを使う場合は、暗号化キーも安全に保管します。

Home Assistant Container に HACS を導入

手順 1：Docker コンテナに入る

SSH で RK3576 に接続して実行します。

bash
sudo docker exec -it homeassistant bash

コンテナ内の設定パスを確認します。

bash
pwd

作業ディレクトリは通常 /config です。

手順 2：HACS 公式インストールスクリプトを実行

コンテナ内で実行します。

bash
set -o pipefail
wget -O - https://get.hacs.xyz | bash -

スクリプトは Home Assistant のカスタム連携ディレクトリに HACS をダウンロードします。コマンドは公式 Container 導入手順に基づきます。実行前に、ダウンロード先ドメインとネットワークを信頼できることを確認してください。

導入後にファイルを確認します。

bash
ls -l /config/custom_components/hacs/manifest.json

manifest.json があれば、連携ファイルが設定ディレクトリに書き込まれています。ファイルの存在だけでは Web 認証の完了を確認できません。連携の設定を続けてください。

手順 3：Home Assistant を再起動

コンテナから退出します。

bash
exit

RK3576 ホストの端末で実行します。

bash
sudo docker restart homeassistant

起動したら、ブラウザーで開きます。

text
http://<RK3576_IP>:8123

Web 画面で HACS を設定

手順 4：HACS 連携を追加

  1. Settings → Devices & services を開きます。
  2. 右下の Add integration を選びます。
  3. HACS を検索して連携を選びます。表示されなければ、ブラウザーを強制再読み込みし、コンテナの再起動を確認します。
  4. 最初の HACS 確認画面で、ログ、Add-ons がないこと、第三者部品の互換性、問題解決に関する 4 項目を読みます。理解したら確認を入れ、Submit を選びます。

HACS 連携を追加

手順 5：GitHub で認証

HACS は GitHub のデバイス認証でコミュニティリポジトリに接続します。

  1. Home Assistant に Waiting for device activation と XXXX-XXXX 形式のコードが表示されます。
  2. 画面を開いたまま、別のページで https://github.com/login/device を開きます。
  3. 自分の GitHub アカウントでログインし、コードを入力して Continue を選びます。
  4. GitHub の案内に従い Authorize HACS を選びます。
  5. Home Assistant に戻って認証完了を待ち、地域選択などが表示された場合は完了します。

コードは今回のデバイス認証専用です。コード、アクセストークン、バックアップキーを Wiki の画像に公開しないでください。期限切れの場合は HACS 設定を再開して新しいコードを取得します。

GitHub で HACS を認証

手順 6：HACS の導入を確認

Settings → Devices & services → Integrations → HACS で設定済みの連携を確認します。

設定後の HACS ページで、コミュニティリポジトリやダウンロード済みの部品を参照できます。

HACS の導入を確認

Home Assistant を再読み込みすると、通常はサイドバーに HACS が表示されます。

HACS で Catppuccin テーマを導入

手順 7：テーマ設定の確認

SSH で RK3576 ホスト上で実行します。

bash
sudo nano /home/seeed/homeassistant/config/configuration.yaml

次の設定を確認します。

yaml
frontend:
  themes: !include_dir_merge_named themes

frontend: がある場合、別の frontend: を追加しないでください。既存の項目の下に themes: を追加または保持します。Container 導入時の設定にすでに含まれている場合があります。

保存後に公式の設定チェックを実行します。

bash
sudo docker exec homeassistant python -m homeassistant --script check_config --config /config

configuration.yaml のテーマディレクトリを初めて追加、または変更した場合のみ再起動します。

bash
sudo docker restart homeassistant

手順 8：Catppuccin Theme をダウンロード

  1. サイドバーの HACS を選びます。
  2. Catppuccin を検索して Catppuccin Theme を選びます。
  3. Download でバージョン確認画面を開きます。
  4. 推奨の既定バージョン（今回の検証では v2.1.3）のまま、右下の DOWNLOAD を選びます。

検証時に表示された保存先は次のとおりです。

text
/config/themes/catppuccin/catppuccin.yaml

HACS で Catppuccin Theme をダウンロード

“Need a different version?” は別のバージョンを選ぶための項目です。初回導入では通常、古いバージョンを手動選択する必要はありません。

手順 9：テーマを再読み込み

ダウンロード後に次を開きます。

Settings → Tools → Actions

次のアクションを実行します。

text
frontend.reload_themes

コンテナを再起動せずにテーマを読み込めます。アクションが表示されなければ、sudo docker restart homeassistant を実行してブラウザーを再読み込みします。

手順 10：Catppuccin Mocha を選択

  1. 左下のユーザーアイコンから Profile を開きます。
  2. Theme のドロップダウンを開きます。
  3. Catppuccin Mocha を選びます。
  4. 通常、画面は直ちにダークテーマになります。

テーマのスタイルは次のとおりです。

テーマスタイル
Catppuccin Latte明るい環境向けのライトテーマ
Catppuccin Frappé柔らかなグレーブルーのダーク配色
Catppuccin Macchiato濃いグレーブルーの配色
Catppuccin Mocha監視画面に適した濃い紫と青の配色
Catppuccin Auto Latte Mocha明暗モードに応じて対応するスタイルに切り替え

実行結果

RK3576 に Catppuccin Mocha を適用すると、既存の Modbus TCP 監視ダッシュボードがダーク配色になります。温湿度の Gauge と履歴グラフも引き続き表示されます。

reComputer RK3576 の Catppuccin Mocha ダークテーマ

Modbus TCP チュートリアルを完了した場合は、サイドバーの RK3576 Modbus Monitoring で新しいテーマの監視画面を確認できます。テーマ変更は画面のスタイルだけを変更し、レジスターアドレスやデータ収集処理は変更しません。

次のデモはテーマ変更前の Modbus TCP ダッシュボードです。既存機能の参考用であり、ダークテーマの表示ではありません。

テーマ変更前の Modbus TCP 監視デモ

よくある質問

ダウンロード後も個人設定に Catppuccin が表示されない

  1. configuration.yaml に正しい YAML インデントで frontend: themes: !include_dir_merge_named themes があることを確認します。
  2. /config/themes/catppuccin/catppuccin.yaml を確認します。HACS に表示された実際のパスを使用してください。
  3. frontend.reload_themes を実行し、必要ならコンテナを再起動してブラウザーを再読み込みします。

まとめ

このチュートリアルでは、RK3576 の Home Assistant Container で HACS 導入、GitHub 認証、コミュニティテーマのダウンロード、ダークテーマ選択を行います。RK3576 は Modbus TCP 監視ノードと、拡張可能な Web 画面を持つローカル AIoT 管理基盤として使えます。

さらに拡張する場合は、使用中の Home Assistant と互換性のある HACS カード、または照明やカメラなどの標準連携を利用できます。第三者部品の保守状況と互換性を確認してください。

参考資料