← 制作記一覧へ

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

公開: 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 に、画面の表示も保存の処理もまとめて入れています
  • Cloudflare KV(ネット上の小さなメモ帳): 記録の保存先。1つのキー(メモに付けた名前)にまとめて入れています
  • 画面のつくり: スマホでもパソコンでも見やすい表示にしています

学んだこと

「シンプルを保つ」難しさ

「カレンダー表示だけ」のつもりが、途中で「月移動もしたい」「イベントごとに別カレンダーで管理したい」「記録数のグラフ見たい」など色々欲しくなります。しかし 追加すればするほどシンプルさが失われる。結果として、私の用途に合わせて、2イベントを1カレンダーに重ねて表示・月表示のみ の超シンプル版に留めました。

公開版とプライベート版の分離

最初は記録を共通の保存場所に置く作りだったので、公開したままでは訪問者どうしで同じデータを見てしまう、と公開後に気づきました。そこで、開かれたURL(ホスト名)を見て、

  • 公開URL: デモモード(localStorage=そのブラウザの中だけに保存。他人と共有なし)
  • プライベートURL: 個人データ(KV保存、複数端末同期)

と自動で切り替わる仕組みに改良しました。

ちなみにプライベート版は 「URLを知られないことに頼る、かなり弱い秘匿性」 だけで、URLを知っている人なら誰でも見られる状態です。私自身の用途では問題が起きていませんが、お子さんの生活記録など他人に知られたくない情報を入れるなら、Cloudflare Access や Basic 認証など 本格的な認証の追加を検討 した方が安全です。

収益化

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


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