ふたりの毎日を、ひとつの部屋に。

2026.03 – 個人制作。企画・設計・検証を担当。実装には AI エージェントを活用。

電球の光が落ちる木のテーブルに置かれた 2 台のスマートフォンと、奥で眠る猫
生成した画像によるイメージです。
猫のいる部屋の画面家具を集めるガチャの画面

couple-sync

トップへ戻る

予定も記録も、猫のいる部屋から。

離れて暮らすふたりのために開発した共有アプリです。

予定の確認も日々の記録も猫のいる部屋から始められます。暮らしに必要な機能とふたりで楽しめる遊びをひとつにまとめました。

猫のいる部屋を入口にしたデザインへ更新しました。従来の一覧型の画面にも切り替えられます。デモでも両方のデザインを試せます。

猫のいる部屋から各機能を開く画面
切り替えて使える一覧型の画面

ふたりのカレンダー

それぞれの予定をひとつのカレンダーで確認できます。デートの計画や記念日も一緒に管理できます。

ふたりの予定を同じ日付で確認できるカレンダー画面
壁のカレンダーから予定を開きます。

共有ノート

一緒にやってみたいことや忘れたくないことをノートに残せます。体調や食事の記録も別の画面にまとめています。

ふたりで書き込めるノート画面
テーブルのノートから記録を開きます。

ガチャと模様替え

集めたコインでガチャを回すと家具が手に入ります。好きな家具を飾って部屋の雰囲気を変えられます。

部屋には猫が暮らしています。ごはんをあげることもできます。ミニゲームも用意しているので予定がない日にも楽しめます。

コインを使って家具を集められるガチャの画面
ガチャで集めた家具を部屋に飾れます。
睡眠時間と食事を記録する画面
体調と食事。睡眠や食事を記録できます。
写真と出来事を並べた記念日の画面
記念日と思い出。写真と一緒に思い出を残せます。
おもちゃ箱から選べるミニゲームの画面
ミニゲーム。部屋のおもちゃ箱から遊べます。

通信が切れても、使い続けられる。

記録は端末内に保存し、送信待ちの列を通して Supabase と同期します。通信が切れても使い続けられ、戻ったら追いつきます。猫の部屋の画面は three.js で描いています。

couple-sync の同期の路線図自分の端末の画面と IndexedDB から送信待ちの列を通って Supabase へ行き、通知と差分の取得で相手の端末へ届く。通信が切れている間は送信待ちの列で待つ。画面部屋のものを開くIndexedDBまず端末に書く送信待ちの列消えずに残るここで待つ通信が切れている間Supabase関数を通して書き込むRealtime変更を知らせる差分の取得サーバーの通し番号でIndexedDB相手の画面
couple-sync の同期の路線図自分の端末の画面と IndexedDB から送信待ちの列を通って Supabase へ行き、通知と差分の取得で相手の端末へ届く。通信が切れている間は送信待ちの列で待つ。画面部屋のものを開くIndexedDBまず端末に書く送信待ちの列消えずに残るここで待つ通信が切れている間Supabase関数を通して書き込むRealtime変更を知らせる差分の取得サーバーの通し番号でIndexedDB相手の画面
点線は、通信が切れている間に変更が待つ場所です。

作りの要点

項目ごとに新しい方を残す
ふたりが同じ記録を同時に直したときは、項目ごとに新しい方を残す構成です。差分の取得にはサーバーが振る通し番号を使い、端末の時計のずれに依存しないようにしています。
送信が詰まる不具合を潰す
同じ記録の変更が重なると送信待ちが詰まる不具合を、再現して直しました。8 並列の書き込みで、待ちが 8 件たまっていたのを 1 件にまとめています。
引き直しの起きないガチャ
抽選はサーバー側で行い、1 回ごとに識別子を付けています。再読み込みや二度押しをしても、同じ結果が返るだけです。
止まらない 3D 演出
Blender で作った家具を three.js で表示します。WebGL が使えない端末では、静止画の演出に切り替えます。
14種
ミニゲーム
16点
ガチャの家具
29
データベースの表

公開デモには架空の記録を使っています。変更はこのブラウザ内に保存されます。外部サービスとの通信は行いません。AIの返答もデモ用の内容です。

画面
React 19 TypeScript Vite three.js
保存と同期
IndexedDB(idb) Supabase Realtime
配布
PWA(Service Worker)
3D 素材
Blender(GLB)