HibiSyncは、家族の朝に必要な情報を一画面にまとめるために作っている個人用ダッシュボードです。 天気、時間割、持ち物、お知らせを見やすく並べるだけでなく、そこに AIアシスタント、音声入力、おたよりOCR、マスコット表示、予定データの永続化 も重ねています。
家のタブレットに置いて、朝の確認を減らす。 それがHibiSyncの一番の目的です。
HibiSyncでできること
HibiSyncは、家族向けの「今日の確認板」として使うことを想定しています。 朝に必要な情報をまとめて表示し、必要なときは声やおたより画像から予定作成を補助できるようにしています。
- 天気データをJMAベースに変更
- AMeDASの観測値を使った気温表示を追加
- 今日の服装アドバイスを表示
- マスコットが画面上で動くように
- Geminiを使った音声会話を追加
- おたより画像から予定候補を作るOCR機能を追加
- 予定、持ち物、お知らせをローカル保存とSupabase同期に対応
- Google Calendarは外部カレンダーとして読み取り中心に整理
- 管理画面だけを認証対象にし、ダッシュボードは表示しやすく調整
目指しているのは、機能を増やして複雑にすることではありません。 朝に「今日は何がいる？」「雨は大丈夫？」「学校からのお知らせは？」を、家族がすぐ確認できる状態にすることです。
天気をJMAベースに変更
天気まわりは、Open-MeteoからJMAの予報データとAMeDASの観測データを使う構成に変えました。 日本の家庭向けに使うなら、地域の予報と実測値に寄せた方が画面の納得感が出ます。
HibiSyncでは、現在の天気、降水確率、朝・昼・夕方の予報を一画面に並べています。 さらに、気温や天候から「今日は羽織るものがあると安心」といった服装アドバイスも出すようにしました。
服装は細かい正解を出すというより、朝の判断を少し短くするための目安です。 傘、上着、暑さ寒さの感覚を、子どもが見ても分かるようにアイコンと短い言葉で出す方向にしています。
日付の扱いも、タイムゾーンでずれないように東京基準へ寄せました。 サーバーの実行環境に引っ張られて曜日がずれると、朝の画面としては致命的なので、ここは地味ですが大事な修正です。
おーちゃんが画面を歩く
HibiSyncには、マスコットの おーちゃん（娘が命名）を追加しました。 画面の上で動きながら、今日の天気や地域の話題に合わせて一言添えてくれます。
プロジェクトのイメージからマスコットの画像を生成してもらって、OpenAIが公開しているペット作成Skill（hatch pet）でフレーム画を生成して動かしてます。
おーちゃんのコメントは、毎回Geminiへ投げ続けるのではなく、日次更新とキャッシュを組み合わせています。 家庭用の常設画面なので、API利用量を抑えつつ、同じ言葉ばかりにならないようにする必要がありました。
地域情報も広げすぎず、徳島市周辺の話題に寄せています。 「地域のことを少し知っている家族の掲示板」のような距離感にしたいからです。
声で話しかける
画面左下には、音声会話ボタンを置きました。 マイクを押して話すと、音声を録音してGemini側で処理し、HibiSyncの状態や天気を踏まえた返答を返す流れです。
子供たちはアレクサによく話しかけるので、もっと汎用的に応答してくれるGeminiと会話できるよう簡単な音声会話機能を追加しました。
音声会話では、録音中、処理中、返答中、エラーといった状態が分かるようにしています。 マイク権限が取れないときのメッセージや、ボタンの視認性も調整しました。
会話ログはずっと残すのではなく、一定時間で自然に隠れるようにしています。 タブレット常設画面では、ログが画面を占有し続けるより、必要なときだけ見える方が使いやすいと感じたためです。
モデルは軽めのGemini音声モデルを使う構成にし、失敗時にはフォールバックも持たせています。 家の中で毎日触る機能なので、反応の軽さと失敗時の分かりやすさを優先しています。
おたよりOCRで予定候補を作る
学校のおたよりは、家庭内の予定管理で一番手間が出やすいところです。 紙や画像の中に、日付、持ち物、早帰り、行事、締切が混ざっているからです。
HibiSyncでは、Geminiを使っておたより画像から予定候補を作るAPIを追加しました。 画像を読み取り、予定、持ち物、お知らせとして扱えそうな情報を構造化します。
ここで大事にしているのは、完全自動登録にしすぎないことです。 学校のお知らせは読み間違いがあると困るので、まず候補を作り、最後は人が確認して反映する形にしています。
AIは「全部任せる相手」ではなく、「入力の面倒を減らす補助」として使う方が、家庭用アプリには合っていると感じています。
予定データの持ち方
予定の扱いは、HibiSync内の予定と外部カレンダーを分けて考えています。
HibiSyncで作った予定、持ち物、お知らせは、まず端末のローカルストレージに保存します。 Supabaseの設定がある場合は、そこへ同期できる構成です。
一方、Google Calendarなどの外部カレンダーは、読み取り中心のソースとして扱います。 外部カレンダーの内容をHibiSyncの画面に取り込みつつ、HibiSync側から勝手に外部予定を書き換えない方針です。
この分け方にした理由は、家庭の予定管理では「どこが正本か」が曖昧になると運用が崩れやすいからです。 HibiSyncで作ったものはHibiSyncのイベントとして持つ。 外部カレンダーは外部の予定として読む。 その方が、後から見ても安全です。
管理画面からは、予定、持ち物、お知らせを作成できます。 Google Calendarへ入れたい場合は、直接書き込むのではなく、事前入力済みの登録画面を開く形に寄せています。
管理画面は保護し、ダッシュボードは見やすく
認証まわりも調整しました。 家の中で常時表示するダッシュボードは、タブレットで開きやすいことが大事です。 一方で、時間割や予定を編集する管理画面は、誰でも触れる状態にしたくありません。
そこで、認証の対象を管理系ルートへ絞りました。 表示用のダッシュボードは指定パスで開きやすくし、編集や設定変更は管理画面側で守る構成です。
タブレット表示向けには、余白や倍率の調整も残しています。 Androidの通知バー、下部ナビゲーション、Fully Kiosk Browserの表示差で画面が欠けることがあるため、実機に合わせて微調整できるようにしています。
使っている技術
現在のHibiSyncは、Next.jsを中心にしたWebアプリです。 主な構成は次の通りです。
| 技術 | 役割 |
|---|---|
| Next.js 16 | ルーティング、サーバー処理、APIルート |
| React 19 | ダッシュボードと管理画面のUI |
| TypeScript | 天気、予定、時間割データの型管理 |
| Tailwind CSS 4 | UIスタイル |
| JMA Forecast / AMeDAS | 天気予報、観測気温、降水確率 |
| Gemini API | 音声会話、マスコットコメント、おたよりOCR |
| Supabase | HibiSyncイベントの任意同期先 |
| Google Calendar API | 外部カレンダーの読み取り |
| localStorage | 端末内の予定、表示設定、マスコット状態の保存 |
| Vercel | ホスティング |
実装としては、天気、カレンダー、ローカルイベントをサーバー側でまとめ、ダッシュボードに必要な形へ整えています。 ブラウザ側では、音声入力、マスコット表示、端末固有の表示調整など、タブレット上で動く部分を担当します。
これから調整したいこと
HibiSyncは、実際に家で使いながらまだ調整していきます。
- 音声会話の返答をもっと短く、朝向けにする
- おたよりOCRの候補精度を上げる
- 予定候補を確認して登録する流れをさらに軽くする
- スリアの動きと言葉のバリエーションを増やす
- タブレット常設時の見切れや押しやすさを詰める
- Supabase同期の運用を安定させる
家族向けのアプリは、派手な機能よりも「毎日、何も考えずに使えること」が大事です。 HibiSyncも、朝の確認を少し軽くする道具として、生活の中で使いながら育てていきます。