Diary Stamps

作った理由

旅行中にチャットへメモを送り続け、最後に「まとめて」と頼んで日記にする使い方を自分でしていました。毎回手作業でやるのが面倒だったので、記録する部分だけをアプリにしました。

日記の文章を生成する機能は作っていません。アプリの役割は、時系列に並べた記録とプロンプトを出力して、Claude に渡すところまでです。

技術的な判断

日記の文章の生成は Claude に任せました。プロンプトを自分で作り込むより、Claude に渡すデータの形式を整えることに時間を使ったほうが、少ない工数で使えるものになると考えたためです。

出力した内容は URL に含め、Claude の画面を開いて渡しています。ただし日本語は URL エンコードすると1文字が「%E3%81%82」のような9文字になるため、記録が長いと URL の長さの上限を超えます。エンコード後の URL が16,000文字を超えた場合は、Markdown ファイルをダウンロードして Claude に添付する方式へ自動で切り替えます。3日・50スタンプ程度の旅行なら URL のまま渡せます。

Places API のキーはブラウザに置いていません。アプリを配信している Cloudflare Workers が検索リクエストを中継し、キーは Worker のシークレットにだけ保存しています。キーを隠すために新しいサーバーを追加する必要はありませんでした。

データは端末内の IndexedDB に保存し、記録と編集はオフラインでもできます（場所の検索だけはオンライン接続が必要です）。アプリ内に地図は表示していませんが、記録時に取得できた座標は保存し、カードから Google マップを開くときのフォールバックに使っています。地図の表示は後から追加できますが、座標は記録した時点で保存しておかないと後から取得できないためです。

技術スタック

言語

TypeScript

フレームワーク

React

UI

Tailwind CSSRadix UIVaulLucide

データ

DexieIndexedDBZustandZod

外部API

Google Places API (New)Geolocation API

ビルド・配布

Vitevite-plugin-pwa@cloudflare/vite-plugin

テスト・品質

VitestPlaywrightBiome

インフラ

Cloudflare Workers