○×トラッカーを作った話(超シンプルな習慣記録ツール)
「今日の習慣、できた?できなかった?」それだけを○か×で記録したいとき、既存のアプリはどれも機能が多すぎると感じていました。薬を飲んだか、運動したか、歯磨きしたか…そういうシンプルなYES/NOの記録ができれば十分なのに。
というわけで、作りました。
何ができるツールか
- カレンダー1ヶ月の枠に ○ か × をタップで切り替えるだけ
- イベント名(例: ミルクを飲んだ)を自由に設定
- 同じURLでも 2つのモード: 公開デモ版はブラウザ内のみ保存(他人と共有なし)/個人版はサーバー保存(KV)で複数端末同期
公開版デモ → maru-batsu.tool-koubou.com (デモはブラウザ内のみ保存、自分のデータとは別)
実際の使い道:ミルクの準備管理
このツールを作った本当のきっかけは、「ミルクの準備、どうしよう?」という日常のちょっとした悩みでした。
- 寝る前にミルクを 準備したか を記録(○/×)
- そのミルクを 飲んだか/飲まずに無駄になったか を記録(○/×)
この2つのイベントを 1つのカレンダーに重ねて シンプルにまとめました。並べて見るだけで、
- 「寝る前に準備したほうが効率的か」「準備しないほうが無駄が少ないか」
- 「これまでに無駄にしたミルクの量は合計どのくらいか」
が、計算もグラフもなしに、カレンダーの○×の並びを眺めるだけで判断できます。
複雑な統計機能は要らない。○と×の並びを見れば一目でわかる ──そのシンプルさが欲しくて、自分で作りました。
作り方
AIに一言:
「カレンダー1ヶ月分を表示して、各日付をタップしたら○×が切り替わって、サーバーに自動保存する、シンプルなウェブアプリ作って」
これだけで、10分ほどで動くプロトタイプ ができました。
- Cloudflare Workers: 1つの
worker.jsに HTML+JS+サーバーロジックすべて集約 - Cloudflare KV: データ保存(1つのキーで全データ管理)
- レスポンシブデザイン: スマホ・PCどちらでも使いやすい
学んだこと
「シンプルを保つ」難しさ
「カレンダー表示だけ」のつもりが、途中で「月移動もしたい」「イベントごとに別カレンダーで管理したい」「記録数のグラフ見たい」など色々欲しくなります。しかし 追加すればするほどシンプルさが失われる。結果として、私の用途に合わせて、2イベントを1カレンダーに重ねて表示・月表示のみ の超シンプル版に留めました。
公開版とプライベート版の分離
公開すると、訪問者全員が同じデータを見ることになってしまいました(データ共有型で作ったため)。そこで、Worker側でホスト名を判別して、
- 公開URL: デモモード(localStorage のみ、他人と共有なし)
- プライベートURL: 個人データ(KV保存、複数端末同期)
と自動で切り替わる仕組みに改良しました。
ちなみにプライベート版は 「URLを知られないことに頼る、かなり弱い秘匿性」 だけで、URLを知っている人なら誰でも見られる状態です。私自身の用途では問題が起きていませんが、お子さんの生活記録など他人に知られたくない情報を入れるなら、Cloudflare Access や Basic 認証など 本格的な認証の追加を検討 した方が安全です。
収益化
特にしていません。個人用途がメインなので、「他の人がちょっと試せるデモ版」として置いてあります。
← 他の制作記を見る | トップ | お問い合わせ