家族全員が愛用する、手描きイラストによる Home Assistant ダッシュボードの実装記

暖炉の揺らめく炎や庭園ライトの輝き、寝室のエアコンの風など、自宅を手書きのイラストとして可視化することで、ついに家族全員が喜んで利用するスマートホームダッシュボードを完成させました。

課題：自動化だけでは不完全な現実

「誰にも触らなくても勝手に動く」ことを最優先に設定しましたが、以下の点で人による操作が必要となりました。

• 庭園ライトの制御
  • メーカーアプリまたは Home Assistant アプリのみからオン・オフできる機器です。
  • 自動タイマー設定により一定時間後に消灯されますが、残り時間が少なくなると瞬きして「延長してください」と表示されるため、家族が使いたがりませんでした。
• 噴水装置の運用
  • 物理スイッチで操作すると、庭園から出る前に体が濡れるなどの失敗が起きやすいです。

これらを解決するためには、**「誰もが使いたくなるほど素敵なダッシュボード」**を制作する必要があると判断しました。

開発プロセス：3D とピクセルアートから空間デザインへ

多くのダッシュボード事例を検討した結果、家の平面図を模したインタラクティブな地図を採用することになりましたが、スタイルの選定には苦労しました。

• 採用に至らなかった案
  • 3D グラフィック系: モデル自体は静止画で、インタラクティブ性はアイコンレイヤーの上に重ねて実装されており、深みが感じられませんでした。
  • ピクセルアートスタイル: 魅力的でしたが、自作するかスプライトを逐一配置する必要がありましたが、アーティストのスケジュール調整や技術要件への理解が難しかったです。
• 最終決定：空間デザインアーティストとの協業
  • 美しい空間ポートフォリオを持つアーティストと協力することで、自然とピクセルアートの方向性は見直されました。
  • 渡された資料パッケージ
    • 家具のない建築計画図（注釈付きで家具位置を指定）。
    • 各部屋の参考写真。
    • 参考文献としてインターネット上のイラストレーションや既存ダッシュボード例。
    • 技術仕様: ファイル形式、昼・夜・機器ごとの状態分け、共有キャンバス統一のルールなど。
    • 塗料の色コード（必要に応じて）。

アートワークの要件

• 画像形式: 透明背景の PNG または WebP（アニメーション用）。
• バージョン管理: 昼間・夜間の 2 バージョン、そして「機器オフ/オン」の状態ごとのレイヤー分離。
  • オフ状態：静止画。
  • オン状態：数フレームループの短いアニメーション。
• 庭園特例: 昼・夜・照明点灯時（夜間）の計 3 バージョンを対応。

重要ポイント: アニメーションは最初から WebP で依頼するか、後工程で変換する準備が必須です。また、全てのファイルを同じサイズの「共有キャンバス」上に統一してエクスポートしてもらうことで、後続のレイアウト作業を劇的に削減できました。

Home Assistant での実装技術

イラストレーションが完成した後、Home Assistant に統合する段階に入ります。主に以下のカードと技術を駆使しています。

• 使用するカード:

  picture-elements

  • 背景にイラスト（Image）を設定し、機器の状態や表示要素を上に重ねて配置します。
  • 機器の状態反映: エアコンがオフなら静止画、オンなら WebP アニメーションを表示（ブラウザの自動再生機能を使用）。
• 昼・夜モードの切り替え
  • ヘルパーを作成し、日没・日出で自動切り替え。手動切り替えも可能。
  • 夜間の要素を

    conditional

    で昼間レイヤーの上に重ね表示します。
• 機器制御の工夫
  • 一般機器:

    tap_action

    を設定し、タップ時に Home Assistant の標準制御ダイアログを表示。
  • 複雑な機器（庭園灌漑システム）: 単一アイコンで管理するが、背後に複数のバルブやタイマーがあるため、標準ダイアログでは不十分でした。HACS インテグレーション

    Browser Mod

    を利用し、独自ポップアップを表示しています。
• メディアホストの設定
  • 画像をローカルパス（例：

    /local/floorplan/...

    ）で参照するため、HA ボックスの

    /config/www

    フォルダにファイルを配置します。

テレビ（TV）での表示環境構築

TV ブラウザ単体での運用は以下の理由から断念し、HAOS Kiosk Display アドオンによる別入力方式を採用しました。

• WebP の互換性問題: LG webOS ブラウザが WebP をサポートしないと謳われていましたが、実際にはフォトビューアなど特定の機能のみ制限ありで、ダッシュボード表示には対応可能でした。
• 起動摩擦の排除: TV ブラウザをスクリーンセーバーに設定できないため、リモコン操作で開く手間が発生しました。これを解消するために、HA ボックスと HDMI を繋ぎ、**キオスクモード（常時オン）**を実現しました。

ユーザーインターフェースとレイアウト戦略

「全階と庭園を見られるビュー」と「個別階のビュー」を両立させるため、以下の工夫を行いました。

• 共有キャンバスの活用:
  • 各階と庭園はそれぞれ独立した画像として存在しますが、フルビューでは元の位置に戻し、画像エディタのように整列させました。
  • この結果、庭園が地面に接しつつ、家がわずかに浮いて見える「分解されたような」自然なレイアウトが実現しました。
• 設定ファイルの共有（YAML モードへの切り替え）:
  • ビジュアルエディタではカード間での要素共有ができないため、YAML モードに変更し、各階のエレメント定義を個別ファイルに集約しました。
  • 1 回の編集で全ビュー（階用・フルビュー）に反映され、ブラウザリロードのみで更新可能となりました。
• フルビューの構築:

  • picture-elements

    カードは内包できないため、

    vertical-stack

    で重ね、

    card-mod

    プラグインで CSS を使って位置調整を行いました。

成果と運用現状

完成したダッシュボードは、家族からの評価が高く、運用状況は以下の通りです。

• 表示時間: 朝と夕方の数時間のみ（TV は HA から制御可能なので自動化設定済み）。
• キオスクモード: HACS アドオンで TV メニューを非表示にし、純粋なダッシュボード体験を提供しています。
• デバイス間の使い分け
  • TV: 全体像の確認用（リモコンからの操作は不可だが、見ることには最適）。
  • スマートフォン/PC: 個別の階ビューやフルビューでの詳細操作・制御用。
• 学習効果:
  • 当初「アプリを使いたがらない」という課題に対し、美しいダッシュボードを TV で表示することで関心を惹き、現在ではスマホアプリも積極的に利用するようになりました。

この構成により、「全体像の確認は TV で」「詳細操作は端末で」という理想的なスマートホーム運用を実現しました。

イラストレーション制作: Owen Yeconiel 氏