← 制作記一覧へ

○×トラッカーを作った話(超シンプルな習慣記録ツール)

公開: 2026-04-19 · #1 / 最終更新: 2026-06-01 習慣トラッカーCloudflare WorkersKV

📌 記事の取り扱いについて:本記事は公開当時の体験・気づきをまとめたものです。現在のツール数・プラン数・対象年齢・記事数・仕様とは異なる場合があります。最新の内容は各ツールページをご確認ください。ツールや外部サービスの仕様・料金は変更されることがあるため、利用前には各公式情報も併せてご確認ください。記載に誤りを見つけられた場合はお問い合わせフォームよりご連絡いただけると助かります。

「今日の習慣、できた?できなかった?」それだけを○か×で記録したいとき、既存のアプリはどれも機能が多すぎると感じていました。薬を飲んだか、運動したか、歯磨きしたか…そういうシンプルな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 認証など 本格的な認証の追加を検討 した方が安全です。

収益化

特にしていません。個人用途がメインなので、「他の人がちょっと試せるデモ版」として置いてあります。


← 他の制作記を見るトップお問い合わせ