○×トラッカーを作った話(超シンプルな習慣記録ツール)
📌 記事の取り扱いについて(公開当時の内容を含みます — タップで詳細)
本記事は公開当時の体験・気づきをまとめたものです。現在のツール数・プラン数・対象年齢・記事数・仕様とは異なる場合があります。最新の内容は各ツールページをご確認ください。ツールや外部サービスの仕様・料金は変更されることがあるため、利用前には各公式情報も併せてご確認ください。記載に誤りを見つけられた場合はお問い合わせフォームよりご連絡いただけると助かります。
「今日の習慣、できた?できなかった?」それだけを○か×で記録したいとき、既存のアプリはどれも機能が多すぎると感じていました。薬を飲んだか、運動したか、歯磨きしたか…そういうシンプルなYES/NOの記録ができれば十分なのに。
というわけで、作りました。
何ができるツールか
- カレンダー1ヶ月の枠で、その日のマスをタップして○/×を入れるだけ
- イベント名(例: ミルクを飲んだ)を自由に設定
- 中身は同じまま、開いたURLによって2つのモード: 公開デモ版はブラウザの中だけに保存(他人と共有なし)/個人版はネット上(KV)に保存して複数端末で同じ記録を見られます(端末を替えた直後は反映に少し時間がかかることがあります)
公開版デモ → maru-batsu.tool-koubou.com (デモはブラウザ内のみ保存、自分のデータとは別)
実際の使い道:ミルクの準備管理
このツールを作った本当のきっかけは、「ミルクの準備、どうしよう?」という日常のちょっとした悩みでした。
- 寝る前にミルクを 準備したか を記録(○/×)
- そのミルクを 飲んだか/飲まずに無駄になったか を記録(○/×)
この2つのイベントを 1つのカレンダーに重ねて シンプルにまとめました。並べて見るだけで、
- 「寝る前に準備したほうが効率的か」「準備しないほうが無駄が少ないか」
- 「これまでに無駄になったのが何回くらいあったか」
が、計算もグラフもなしに、カレンダーの○×の並びを眺めるだけで判断できます。
複雑な統計機能は要らない。○と×の並びを見れば一目でわかる ──そのシンプルさが欲しくて、自分で作りました。
作り方
AIに一言:
「カレンダー1ヶ月分を表示して、各日付をタップしたら○×が切り替わって、サーバーに自動保存する、シンプルなウェブアプリ作って」
これだけで、10分ほどで動くプロトタイプ ができました。
- Cloudflare Workers(サイトの裏側で動く仕組み): 1つの
worker.jsに、画面の表示も保存の処理もまとめて入れています - Cloudflare KV(ネット上の小さなメモ帳): 記録の保存先。1つのキー(メモに付けた名前)にまとめて入れています
- 画面のつくり: スマホでもパソコンでも見やすい表示にしています
学んだこと
「シンプルを保つ」難しさ
「カレンダー表示だけ」のつもりが、途中で「月移動もしたい」「イベントごとに別カレンダーで管理したい」「記録数のグラフ見たい」など色々欲しくなります。しかし 追加すればするほどシンプルさが失われる。結果として、私の用途に合わせて、2イベントを1カレンダーに重ねて表示・月表示のみ の超シンプル版に留めました。
公開版とプライベート版の分離
最初は記録を共通の保存場所に置く作りだったので、公開したままでは訪問者どうしで同じデータを見てしまう、と公開後に気づきました。そこで、開かれたURL(ホスト名)を見て、
- 公開URL: デモモード(localStorage=そのブラウザの中だけに保存。他人と共有なし)
- プライベートURL: 個人データ(KV保存、複数端末同期)
と自動で切り替わる仕組みに改良しました。
ちなみにプライベート版は 「URLを知られないことに頼る、かなり弱い秘匿性」 だけで、URLを知っている人なら誰でも見られる状態です。私自身の用途では問題が起きていませんが、お子さんの生活記録など他人に知られたくない情報を入れるなら、Cloudflare Access や Basic 認証など 本格的な認証の追加を検討 した方が安全です。
収益化
特にしていません。個人用途がメインなので、「他の人がちょっと試せるデモ版」として置いてあります。
← 他の制作記を見る | トップ | お問い合わせ