ha-dashboard

Home Assistant ダッシュボードスキル

Home Assistant の Lovelace ダッシュボード、カード、ビュー、テーマを設定します。

はじめに

このスキルは、よくある5つのエラーを防ぎ、トークンを約40％節約します。

指標	スキルなし	スキルあり
セットアップ時間	30分以上	10分
よくあるエラー	5	0
トークン使用量	約8000	約4800

このスキルで防げる既知の問題

1. YAML のインデントエラー（スペース2つを使用し、タブは使わないでください）
2. 無効なエンティティ ID 形式（domain.entity_name の形式にする必要があります）
3. 必須カードプロパティの不足（例：ボタンカードの entity）
4. ビュータイプの設定ミス
5. テーマ変数の構文ミス

クイックスタート

ステップ1：YAML モードを有効にする（任意）

# configuration.yaml
lovelace:
  mode: yaml

重要な理由： YAML モードを使うと、ダッシュボード設定を完全に制御でき、バージョン管理も可能になります。

ステップ2：基本的なダッシュボード構造を作成する

# ui-lovelace.yaml or dashboards.yaml
title: My Home
views:
  - title: Home
    path: home
    cards:
      - type: markdown
        content: Welcome to your dashboard!

重要な理由： この最小限の構造で、複雑な設定を追加する前に YAML の設定を検証できます。

ステップ3：ビューにカードを追加する

views:
  - title: Living Room
    path: living-room
    cards:
      - type: entities
        title: Lights
        entities:
          - light.living_room
          - light.kitchen
      - type: weather-forecast
        entity: weather.home
        forecast_type: daily

重要な理由： カードはダッシュボードの基本要素です。複雑なカードに進む前に、シンプルなカードから始めましょう。

重要なルール

必ず行うこと

• インデントには常にスペース2つを使用する
• エンティティ ID は domain.entity_name 形式を使用する（例：light.living_room）
• 再読み込みの前に YAML を検証する（オンラインの YAML バリデーターを使用）
• インタラクティブカードには tap_action を定義する
• モバイルデバイスでテストする

絶対に行わないこと

• インデントにタブを使う
• 変更される可能性のあるエンティティ名をハードコードする
• 20個以上のカードを含むビューを作成する（複数のビューに分ける）
• 天気予報カードで forecast_type を設定し忘れる（2023年以降必須）
• モードを理解せずに、UI 管理のダッシュボードと YAML 管理のダッシュボードを混在させる

よくある間違い

誤り：

type: button
entity:light.living_room
  tap_action:
    action: toggle

正しい例：

type: button
entity: light.living_room
tap_action:
  action: toggle

理由： コロンの後のスペース不足とインデントの誤りは、最もよくある YAML エラーです。

既知の問題を防ぐ

問題	根本原因	解決策
「不明なカードタイプ」	カスタムカードリソースの不足	lovelace.resources に追加する
カードが更新されない	ブラウザーキャッシュ	強制再読み込みを行う（Ctrl+Shift+R）
テーマが適用されない	変数名の誤り	テーマ変数のスペルを確認する
ダッシュボードが空白	YAML 構文エラー	YAML を検証し、ログを確認する
エンティティが利用不可	エンティティ ID の誤り	Developer Tools > States でエンティティを確認する

設定リファレンス

ダッシュボード設定（configuration.yaml）

lovelace:
  mode: yaml                    # or 'storage' for UI mode
  resources:
    - url: /local/card.js       # Custom card resources
      type: module
  dashboards:
    lovelace-custom:
      mode: yaml
      title: Custom
      icon: mdi:view-dashboard
      show_in_sidebar: true
      filename: custom-dashboard.yaml

主な設定：

• mode：手動で制御する場合は yaml、UI で編集する場合は storage
• resources：カスタムカード／CSS を読み込む（YAML モードのみ）
• dashboards：追加のダッシュボードを定義する

ビューの設定

views:
  - title: View Name           # Tab title
    path: view-path            # URL path (/lovelace/view-path)
    icon: mdi:home             # Tab icon (optional)
    type: masonry              # masonry, panel, sections, sidebar
    theme: dark-mode           # Apply specific theme
    subview: false             # Hide from navigation
    cards: []                  # Card list

よく使うパターン

ボタンの横並びスタック

type: horizontal-stack
cards:
  - type: button
    entity: light.living_room
    name: Living
    tap_action:
      action: toggle
  - type: button
    entity: light.bedroom
    name: Bedroom
    tap_action:
      action: toggle

条件に応じたカード表示

type: conditional
conditions:
  - condition: state
    entity: binary_sensor.home_occupied
    state: "on"
card:
  type: entities
  title: Home Controls
  entities:
    - light.living_room
    - climate.thermostat

同梱リソース

リファレンス

references/ にあります：

• card-reference.md - YAML の例付きで、すべての組み込みカードタイプを解説
• view-types.md - ビューレイアウトの比較と選択ガイド
• theme-variables.md - テーマ設定用の CSS 変数
• common-patterns.md - 条件付き表示、スタック、エンティティ行

注： 特定のトピックを詳しく調べるには、上記のリファレンスファイルを参照してください。

アセット

assets/ にあります：

• dashboard-template.yaml - ダッシュボード設定のスターターテンプレート
• card-snippets.yaml - コピーして使えるカードの例

これらのテンプレートをコピーし、実装の出発点として使用してください。

Context7 ドキュメント

最新のドキュメントについては、次の Context7 ライブラリ ID を使用してください。

ライブラリ ID	用途
/home-assistant/home-assistant.io	ユーザードキュメント — ダッシュボード、カード、ビュー、テーマ
/home-assistant/developers.home-assistant	開発者向けドキュメント — カスタムカードの開発
/hacs/documentation	HACS フロントエンドカード

公式ドキュメント

• ダッシュボードの概要
• カードの種類
• ビュー
• テーマ
• カスタムカード（開発者向け）

トラブルシューティング

ダッシュボードが空白になる

症状： ダッシュボードは読み込まれますが、何も表示されないか、エラーが表示されます。

解決策：

# Check Home Assistant logs
ha core logs | grep -i lovelace

# Validate YAML online or locally
python -c "import yaml; yaml.safe_load(open('ui-lovelace.yaml'))"

カスタムカードが読み込まれない

症状： 「Custom element doesn't exist」エラーが表示されます。

解決策：

# Ensure resource is loaded
lovelace:
  resources:
    - url: /local/my-card.js
      type: module  # or 'js' for non-module

# Check file exists at /config/www/my-card.js

セットアップチェックリスト

このスキルを使用する前に、次の項目を確認してください。

• Home Assistant が実行中である（2023.1+）
• 設定ファイルにアクセスできる（File Editor または VS Code アドオン）
• エンティティ ID を把握している（開発者ツール > 状態で確認）
• ダッシュボード管理に YAML モードと UI モードのどちらを使うか決めている