第8章　ダッシュボードの作成

第7章までで、世界各都市の時刻と気温を表示するためのデータ準備が整いました。

いよいよ本章では、これらの情報を実際の画面に配置し、**「Home Assistant World Clock & Weather Dashboard」**を完成させます。

ここでは、Home Assistantの標準的なダッシュボード編集機能を基本とし、

ビュー → Panelカード → Gridカード → Button Card

という構成で作成します。

最初に1都市分のカードを完成させ、その後16都市へ展開する方法を採用します。

8.1　完成するダッシュボード
1. 操作
8.6.1　Button Cardを配置する
Version 1.3 完成

8.1　完成するダッシュボード

本章で作成する画面は、1920×1080程度のディスプレイでの表示を想定しています。

最終的には、16都市を4列×4行に配置します。

例えば、画面上には次のような情報が並びます。

┌─────────────────────────────────────────────────────────────┐
│                                                             │
│                    世界の時刻と気温                          │
│                                                             │
│  🇯🇵 東京          🇬🇧 ロンドン       🇫🇷 パリ          🇺🇸 ニューヨーク │
│  10:15　28℃       02:15　17℃       03:15　19℃       22:15　25℃      │
│                                                             │
│  🇺🇸 ロサンゼルス   🇩🇪 ベルリン       🇷🇺 モスクワ       🇸🇬 シンガポール │
│  19:15　21℃       03:15　18℃       05:15　20℃       10:15　30℃      │
│                                                             │
│                  ……                                        │
│                                                             │
└─────────────────────────────────────────────────────────────┘

※時刻・気温は説明用の例です。実際には各都市の現在値が表示されます。

この段階では、Version 1.3の目的を

「世界の各都市について、現在時刻と現在気温を一覧表示する」

ことに絞ります。

8.2　ダッシュボードの構造

今回のダッシュボードは、次のような階層になります。

ダッシュボード
└─ ビュー「世界の時刻と気温」
   └─ Panelカード
      └─ Gridカード
         ├─ 東京 Button Card
         ├─ ロンドン Button Card
         ├─ パリ Button Card
         ├─ ニューヨーク Button Card
         ├─ …
         └─ デリー Button Card

この構造を理解しておくことが重要です。

**Gridカードが16都市のカードを並べる「枠」**であり、
**Button Cardが各都市の情報を表示する「1枚のカード」**になります。

8.3　「世界の時刻と気温」ビューを用意する

まず、ダッシュボードを編集モードにします。

操作

Home Assistantを開く
対象のダッシュボードを開く
右上のメニューから **「ダッシュボードを編集」**を選択
ビューとして

「世界の時刻と気温」

を用意します。

すでにVersion 1.3のダッシュボードを使用している場合は、このビューをそのまま利用できます。

8.4　Panelカードを使用する

今回のレイアウトでは、ビューの中に1つのPanelカードを配置します。

Panelカードは、ビューの中でカードを大きく使うためのものです。

その中にGridカードを配置します。

ビュー
  ↓
Panel
  ↓
Grid

この方法にすると、1920×1080程度の画面を利用して、16都市をまとまりよく表示できます。

8.5　Gridカードを作成する

Panelカードの中にGridカードを配置します。

Gridカードでは、

type: grid

を基本として、16個のButton Cardを並べます。

今回の重要な設定は、

columns: 4

です。

これによって、

4列 × 4行

のレイアウトになります。

また、

square: false

として、カードを正方形に固定しないようにします。

基本部分は次のようになります。

square: false
type: grid
columns: 4
cards:
  # ここに16都市のButton Cardを配置

8.6　まず東京のカードを作る

いきなり16都市分を作成するのではなく、最初に東京のカード1枚を完成させます。

これが今回のポイントです。

東京のカードが正しく表示できたら、そのカードを基準に他の都市を作成します。

8.6.1　Button Cardを配置する

Button Cardを使用するには、HACSから導入済みの

custom:button-card

を利用します。

東京のカードは次のような構成にします。

type: custom:button-card
name: 🇯🇵 東京
entity: sensor.asia_tokyo
show_name: true
show_state: false
show_icon: false
show_label: true

ここで重要なのは、Home Assistant World Clock & Weather Dashboard 第７章

entity: sensor.asia_tokyo

です。

これは東京の現在時刻を提供するWorld Clockのエンティティです。

一方、気温については、

sensor.weather_tokyo

を使用します。

つまり1枚のカードの中で、

時刻 → World Clock
気温 → Template Sensor

という2種類の情報を組み合わせます。

8.7　時刻と気温を1行に表示する

今回のダッシュボードでは、

10:15　　28℃

のように、時刻と気温を同じ行に表示します。

そのため、Button CardのlabelにJavaScriptを使用します。

東京の場合は次のようになります。

label: |
  [[[
    var clk = states[entity.entity_id];
    var tmp = states['sensor.weather_tokyo'];

    var time = clk ? clk.state : '--:--';
    var temp = tmp ? Math.round(Number(tmp.state)) + '℃' : '--℃';

    return time + '　　' + temp;
  ]]]

ここでは2つのエンティティを利用しています。

時刻

var clk = states[entity.entity_id];

現在のButton Cardに設定されているWorld Clockエンティティから時刻を取得します。

気温

var tmp = states['sensor.weather_tokyo'];

第7章で作成したTemplate Sensorから気温を取得します。

気温を整数にする

Math.round(Number(tmp.state))

によって、小数点以下を四捨五入します。

例えば、

27.6

なら、

28℃

と表示されます。

8.8　カードのデザインを設定する

Version 1.2から引き継いだデザインをVersion 1.3でも使用します。

styles:
  card:
    - background-color: "#1a2035"
    - border-radius: 12px
    - padding: 20px 16px

  name:
    - font-size: 22px
    - color: "#7090b8"
    - text-align: left

  label:
    - font-size: 28px
    - color: "#e8f4ff"
    - font-weight: bold
    - text-align: left

  state:
    - display: none

これによって、

カード背景を濃い色にする
カードの角を丸くする
都市名を左寄せにする
時刻と気温を大きく表示する
通常のState表示を使用しない

というデザインになります。

8.9　東京カードの完成形

ここまでをまとめると、東京のButton Cardは次のようになります。

- type: custom:button-card
  name: 🇯🇵 東京
  entity: sensor.asia_tokyo

  tap_action:
    action: more-info
    entity: sensor.weather_tokyo

  show_name: true
  show_state: false
  show_icon: false
  show_label: true

  label: |
    [[[
      var clk = states[entity.entity_id];
      var tmp = states['sensor.weather_tokyo'];

      var time = clk ? clk.state : '--:--';
      var temp = tmp ? Math.round(Number(tmp.state)) + '℃' : '--℃';

      return time + '　　' + temp;
    ]]]

  styles:
    card:
      - background-color: "#1a2035"
      - border-radius: 12px
      - padding: 20px 16px

    name:
      - font-size: 22px
      - color: "#7090b8"
      - text-align: left

    label:
      - font-size: 28px
      - color: "#e8f4ff"
      - font-weight: bold
      - text-align: left

    state:
      - display: none

これを保存して、ダッシュボードを確認します。

8.10　東京カードを確認する

ここで一度立ち止まって確認します。

画面に、

🇯🇵 東京

10:15　　28℃

のように表示されれば成功です。

確認する項目は次の4つです。

確認項目	確認内容
都市名	🇯🇵 東京
時刻	World Clockの現在時刻
気温	Template Sensorの現在気温
デザイン	背景・文字サイズ・配置

この1枚が正しく表示されてから、残りの都市を追加します。

8.11　カードを16都市へ展開する

東京カードが完成したら、同じ構造を各都市に展開します。

変更するのは主に、

国旗・都市名
World Clockエンティティ
Template Sensorエンティティ

の3箇所です。

例えばロンドンなら、

name: 🇬🇧 ロンドン
entity: sensor.europe_london

気温は、

var tmp = states['sensor.weather_london'];

とします。

パリなら、

name: 🇫🇷 パリ
entity: sensor.europe_paris

そして、

var tmp = states['sensor.weather_paris'];

となります。

8.12　16都市の対応

Version 1.3では次の16都市を使用します。

#	都市	World Clock	気温
1	🇯🇵 東京	`sensor.asia_tokyo`	`sensor.weather_tokyo`
2	🇬🇧 ロンドン	`sensor.europe_london`	`sensor.weather_london`
3	🇫🇷 パリ	`sensor.europe_paris`	`sensor.weather_paris`
4	🇺🇸 ニューヨーク	`sensor.america_new_york`	`sensor.weather_new_york`
5	🇺🇸 ロサンゼルス	`sensor.america_los_angeles`	`sensor.weather_los_angeles`
6	🇩🇪 ベルリン	`sensor.europe_berlin`	`sensor.weather_berlin`
7	🇷🇺 モスクワ	`sensor.europe_moscow`	`sensor.weather_moscow`
8	🇸🇬 シンガポール	`sensor.asia_singapore`	`sensor.weather_singapore`
9	🇦🇺 シドニー	`sensor.australia_sydney`	`sensor.weather_sydney`
10	🇨🇳 北京	`sensor.asia_shanghai`	`sensor.weather_beijing`
11	🇿🇦 ケープタウン	`sensor.africa_johannesburg`	`sensor.weather_cape_town`
12	🇦🇪 ドバイ	`sensor.asia_dubai`	`sensor.weather_dubai`
13	🇧🇷 サンパウロ	`sensor.america_sao_paulo`	`sensor.weather_sao_paulo`
14	🇺🇸 ダラス	World Clockで設定したエンティティ	`sensor.weather_dallas`
15	🇳🇴 オスロ	World Clockで設定したエンティティ	`sensor.weather_oslo`
16	🇮🇳 デリー	World Clockで設定したエンティティ	`sensor.weather_delhi`

注意

World Clockのエンティティ名は、必ず実際のHome Assistant環境で確認したものを使用します。

例えば北京は都市名と同じ名前ではなく、

sensor.asia_shanghai

となっています。

これはWorld Clock側のタイムゾーン名称によるものです。

「都市名」と「エンティティIDが同じとは限らない」

という点は、今後都市を追加するときにも重要です。

8.13　Gridを4列にする

16都市を追加したら、Gridカードの設定を確認します。

columns: 4

これによって、

1列目   2列目   3列目   4列目
────────────────────────────
都市1   都市2   都市3   都市4
都市5   都市6   都市7   都市8
都市9   都市10  都市11  都市12
都市13  都市14  都市15  都市16

という配置になります。

1920×1080の画面では、4列表示にすることで各カードを十分な大きさで表示できます。

8.14　カードをクリックしたときの動作

各カードには、

tap_action:
  action: more-info
  entity: sensor.weather_tokyo

のような設定を入れます。

東京なら、

sensor.weather_tokyo

を対象にします。

ロンドンなら、

sensor.weather_london

です。

つまり、

表示に使っている気温センサーをクリック時の対象にもする

という構成です。

これによってカードをクリックすると、その都市の気温センサーに関するHome Assistantの詳細画面を開くことができます。

「現在値の表示」と「履歴の確認」は別の機能

ここはVersion 1.3で重要なポイントです。

カード上では、

現在時刻　現在気温

を表示します。

カードをクリックすると、

気温センサーのmore-info

が開きます。

その画面から履歴グラフを確認できます。

したがって、

カード
  ↓
現在の時刻・気温を見る

カードをクリック
  ↓
気温センサーの詳細
  ↓
履歴を確認

という役割分担になります。

8.15　完成したGridカード

最終的なGridカードは、概念的には次の構造になります。

square: false
type: grid
cards:

  - type: custom:button-card
    # 東京

  - type: custom:button-card
    # ロンドン

  - type: custom:button-card
    # パリ

  - type: custom:button-card
    # ニューヨーク

  - type: custom:button-card
    # ロサンゼルス

  - type: custom:button-card
    # ベルリン

  - type: custom:button-card
    # モスクワ

  - type: custom:button-card
    # シンガポール

  - type: custom:button-card
    # シドニー

  - type: custom:button-card
    # 北京

  - type: custom:button-card
    # ケープタウン

  - type: custom:button-card
    # ドバイ

  - type: custom:button-card
    # サンパウロ

  - type: custom:button-card
    # ダラス

  - type: custom:button-card
    # オスロ

  - type: custom:button-card
    # デリー

columns: 4

実際のコードでは、それぞれの都市について8.9節のButton Cardを展開します。

8.16　完成画面の確認

16都市すべてを追加して保存したら、ダッシュボードを通常表示に戻します。

ここで、いよいよVersion 1.3で作ってきたものが一つの画面になります。

確認するポイントは次の通りです。

表示

16都市が表示されている
4列×4行になっている
都市名が日本語になっている
国旗が表示されている
各都市の時刻が表示されている
各都市の気温が表示されている
気温が℃で表示されている

動作

時刻が現在時刻になっている
気温が現在値になっている
時間が経過すると時刻が更新される
気温も更新される
カードをクリックすると対象の気温センサーの詳細が開く
履歴グラフを確認できる

構成

古いRESTセンサーを表示用に使用していない
sensor.weather_xxx_2 のような不要なエンティティを使用していない
各カードが正しいTemplate Sensorを参照している
World Clockと気温のエンティティを取り違えていない

8.17　Version 1.3の完成

ここまでの作業によって、最初に掲げたVersion 1.3の目標が完成しました。

構成を振り返ると、

             Home Assistant
                    │
       ┌────────────┴────────────┐
       │                         │
   World Clock                Open-Meteo
       │                         │
       │                    weather.xxx
       │                         │
       │                    Template Sensor
       │                         │
       └────────────┬────────────┘
                    │
               Dashboard
                    │
             Grid Card
                    │
       ┌────────────┼────────────┐
       │            │            │
    Button Card  Button Card  Button Card
       │            │            │
       └──────── 16都市 ────────┘

という形になっています。

これは単に「時刻と気温を表示した」というだけではありません。

Version 1.3では、

時刻の取得

↓

気象データの取得

↓

Template Sensorによるデータ整理

↓

Dashboardでの表示

という、Home Assistantでデータを扱う基本的な流れを一通り構築しました。

8.18　今後の拡張

Version 1.3では、表示内容をあえて

都市名＋現在時刻＋現在気温

に絞りました。

しかし、この構造を維持したまま、今後さらに情報を追加できます。

例えばVersion 1.4以降では、

🇯🇵 東京
10:15　　28℃
最高 31℃　最低 24℃
湿度 65%
風速 3.2 m/s
☀️
日の出 05:24
日の入り 17:48

のような表示へ発展させることができます。

また、都市を増やす場合も、基本的な考え方は変わりません。

World Clock
     +
weather.xxx
     ↓
Template Sensor
     ↓
Button Card
     ↓
Grid

という構造を維持できます。

これは、当初の目標であった20～30都市程度への拡張にもつながります。

8.19　第8章まとめ

本章では、これまで準備してきたデータを実際のダッシュボードとして表示しました。

今回の構成は、

World Clockで各都市の時刻を取得
Open-Meteoのweather.xxxから現在気温を取得
Template Sensorで気温を扱いやすいセンサーにする
Button Cardで都市ごとの情報を表示
Grid Cardで16都市を4列に配置
Panel Cardで画面全体を構成

というものです。

そして最終的に、

世界の各都市の現在時刻と現在気温を、一つの画面で確認できるダッシュボード

が完成しました。

Version 1.3 完成

ここまでで、

「Home Assistant World Clock & Weather Dashboard Version 1.3」

は完成です。

Version 1.0～1.2で作ってきた世界時計を基礎として、Version 1.3では気温表示の仕組みを整理し、16都市を対象とした現在時刻・現在気温ダッシュボードへ発展させました。

そして、このVersion 1.3を土台として、次のVersion 1.4では**「時刻と気温を見る」から「各都市の天気をより詳しく見る」**方向へ発展させることができます。

ここから先は、このダッシュボードをどのように発展させていくかが楽しみなところです。

※ChatGPT により作成。

第8章 ダッシュボードの作成

8.1 完成するダッシュボード

8.2 ダッシュボードの構造

8.3 「世界の時刻と気温」ビューを用意する

操作

8.4 Panelカードを使用する

8.5 Gridカードを作成する

8.6 まず東京のカードを作る

8.6.1 Button Cardを配置する

8.7 時刻と気温を1行に表示する

時刻

気温

気温を整数にする

8.8 カードのデザインを設定する

8.9 東京カードの完成形

8.10 東京カードを確認する

8.11 カードを16都市へ展開する

8.12 16都市の対応

注意

8.13 Gridを4列にする

8.14 カードをクリックしたときの動作

「現在値の表示」と「履歴の確認」は別の機能

8.15 完成したGridカード

8.16 完成画面の確認

表示

動作

構成

8.17 Version 1.3の完成

8.18 今後の拡張

8.19 第8章まとめ

Version 1.3 完成

第8章　ダッシュボードの作成

8.1　完成するダッシュボード

8.2　ダッシュボードの構造

8.3　「世界の時刻と気温」ビューを用意する

8.4　Panelカードを使用する

8.5　Gridカードを作成する

8.6　まず東京のカードを作る

8.6.1　Button Cardを配置する

8.7　時刻と気温を1行に表示する

8.8　カードのデザインを設定する

8.9　東京カードの完成形

8.10　東京カードを確認する

8.11　カードを16都市へ展開する

8.12　16都市の対応

8.13　Gridを4列にする

8.14　カードをクリックしたときの動作

8.15　完成したGridカード

8.16　完成画面の確認

8.17　Version 1.3の完成

8.18　今後の拡張

8.19　第8章まとめ