DIYスマートホームファミリーカレンダー（Skylightクローン）

📖 はじめに

妻は最近、スマートホームカレンダー（Skylight、Cozyla、Hearth）の広告にSNSで頻繁にさらされ、300ドル以上を使う準備ができていました。許可を出す前に、私に調査のチャンスをくれました。

ほとんどが似た機能を提供していることに気づきましたが、価格には大きな違いがありました。最も重要なのは、Home Assistantで実装できない優れた機能を見つけられなかったことです。

目標： 妻が受け入れやすい（WAF承認済み）、カウンタートップに置けるタッチスクリーンカレンダーで、月額料金なしでスマートホームに深く統合されること。

💡 なぜDIY？

Home Assistantを使ったDIYを選んだ理由は、Skylight/Hearthディスプレイを購入するよりも多くの利点があったからです。

• 月額料金なし： 「プレミアム」機能のサブスクリプションを回避。
• シームレスな統合： 照明、家事（Grocy）、在宅センサーと連携。
• 古いハードウェアの再利用： ミニPCと標準モニターを再利用。
• プライバシー： ベンダーロックインやサービス停止のリスクなし。

🛠 ハードウェアの選択

現在は任意のHD（1920x1080）ディスプレイでダッシュボードを表示するように構築しています。

私の場合は、Skylightのように見え、タッチスクリーンでカウンタートップに置け、異なる場所に移動可能なことが要求でした。したがって、以下に説明するハードウェアを選びました。 ただし、用途により異なる場合があり、例えばタブレットで表示したい場合などは調整が必要です。

私が元々使用したハードウェアは上記の要件に基づき、さらにウェブカメラ、スピーカー、マイクを使って機能拡張できることを期待して選びました。現在は、これらの追加ハードウェアのアイデアにまだ対応できていないため、振り返ると別の構成にすると思います。

• モニター： HP Engage 15インチタッチスクリーン。一般的なポータブルモニターよりこれを選んだ理由は、内蔵のスピーカー、ウェブカメラ、マイクがあり、将来的な音声制御やビデオ通話に対応可能なためです。
• コンピューター： Windows/Linuxのキオスクモードで動作する古いミニPC（NUC/Tiny PC）またはRaspberry Pi 4。~~

✨ 機能

• 家族全体・個別ビュー： 特定の家族メンバーのカレンダーの表示を切り替え可能。
• 双方向同期： 画面上またはスマホ（Googleカレンダー）でイベントを編集可能。
• 「イベント追加」ポップアップ： 画面から特定のカレンダーに直接イベントを追加できるカスタムUI。
• 天気と日付: 美しく一目でわかるヘッダー。
• レスポンシブ: 画面幅（モバイルとデスクトップ）に応じて日数を自動調整。

⚙️ インストールガイド

注: このセットアップは、必要なヘルパー、スクリプト、変数を自動生成するYAMLパッケージを使用します。手動で作成する必要はありません。

1. 前提条件 (HACS)

HACSがインストールされている必要があります。以下のフロントエンド統合をインストールしてください:

• week-planner-card
• bubble-card
• config-template-card
• card-mod
• better-moment-card
• weather-card
• browser_mod（ポップアップの動作に必要）
• layout-card（セクションビューに必要）
• button-card（イベント追加用ポップアップに必要）

2. バックエンド（頭脳部分）

• Home Assistantのconfiguration.yamlファイルを開きます。
• パッケージを有効にするために、homeassistant:の下に次の行が追加されていることを確認してください:

   homeassistant:
     packages: !include_dir_named packages
   ``
HAの設定ディレクトリにpackagesというフォルダを作成します（まだない場合）。

このリポジトリからpackages/family_calendar.yamlをダウンロードします。
ファイルをpackages/フォルダ内に配置します。

Home Assistantを再起動します。
3. カレンダー
Googleカレンダーまたはローカルカレンダーを使用できます。
#### オプションA: ローカルカレンダー（最も簡単）
これは未検証です。私はGoogleカレンダーのみを使用しているためです。
設定 > デバイスとサービス に移動します。

ローカルカレンダーの統合を追加します。
正確に次の名前のカレンダーを作成します：Alice、Bob、Charlie、Daisy、Family。

    
 これらの名前を使うと、コードはすぐに動作します！*
#### オプションB: Googleカレンダー
packages/family_calendar.yamlを開きます。

add_google_calendar_eventスクリプトまでスクロールします。

calendar_mapをあなたの実際のGoogleエンティティに更新します：

    
`yaml
    calendar_map:
      "Alice": "calendar.alice_gmail_com"
      "Bob": "calendar.bob_work_account"
    `
#### 休日の設定
Home Assistantのアップデートにより、休日はUIから追加するようになりました：
設定 > デバイスとサービス > インテグレーションを追加 > Holiday に移動します。
国を選択します。
エンティティID（例：calendar.holidays）を確認します。デフォルトと異なる場合は、ダッシュボードのYAMLで更新してください。
4. ダッシュボード（見た目）
新しいダッシュボードビューを作成します（ビュータイプをセクションに設定）。

dashboard.yamlからコードをコピーします。
カスタマイズ：
   
検索と置換： person.alice を実際の家族メンバーのエンティティに置き換えます。

   
天気： weather.home をご利用の天気提供元に置き換えます。

   
背景： yamlの一番下の画像URLを更新します。
ステップ5：テーマ（オプション）
特定のフォント（Ovo）を使用するには：
configuration.yaml の frontend: の下にこの行があることを確認してください。
   
`yaml
   frontend:
     themes: !include_dir_merge_named themes
   `
configディレクトリ内に themes という名前のフォルダを作成します。  

themes/skylight.yaml をダウンロードし、そのフォルダに配置します。  
Home Assistantを再起動します。  
プロフィール（左下のユーザーアイコン）に移動し、テーマ を Skylight に変更します。  

注意：テーマは完全なものではないため、その点を考慮してください。  
---  
📐 仕組み（内部動作）  
フィルターのロジック  
week-planner-card は特定のカレンダーを動的に非表示にする機能をネイティブにはサポートしていません。これを解決するために、正規表現フィルターとして機能する Input Texts を使用しています。  
 人物のボタンをクリックすると、そのフィルターが .（すべて表示）と ^$（何も表示しない）を切り替えます。  
config-template-card がこれらの変数をカレンダーカードに動的に注入します。  
イベント作成スクリプト  
「イベント追加」ポップアップは、複数の人物およびイベントタイプ（終日イベントと時間指定イベント）のロジックを処理する単一のスクリプトを使用しています。

注意事項

私の元の投稿は、どのように行うかの大まかな概要を示し、人々が自分の特定のシナリオで動作するようにコードを調整できるようにすることでした。

特にこれは、すべてのディスプレイやニーズが異なるために行いました。すべての潜在的なサイズのディスプレイやダッシュボードのために開発することはできません。したがって、私が述べたディスプレイや任意の（1920x1080）で動作するように構築されていますが、他のものにも編集可能なはずです。

ディスプレイについて話すと、私は元々それを提案したのは、Wootでセール中であり、その時点でタッチスクリーンディスプレイを入手する非常に経済的な方法だったからです。これは今では当てはまらないかもしれませんので、自分に合ったディスプレイを使用してください。タブレット、タッチスクリーン、携帯電話、何でも構いません。主に編集が必要なのはダッシュボードです。

--- Tranlated By Open Ai Tx | Last indexed: 2026-01-06 ---