○×トラッカーを「お試し用」と「自分用」で分けた話
○×トラッカーを公開したあとで、少し困ったことがありました。
それは、「みんなが試せるデモ」と「自分が本気で使う記録」をどう分けるか、という問題です。
デモは誰でも自由に触れるようにしたい。 でも、自分の記録は自宅のMacでも職場のMacでも見たい。
最初は別々のツールとして作るしかないのかなと思っていましたが、Claude Codeに相談すると、「同じ中身のまま、URLによって動きを変える方法がある」と教えてくれました。
デモは「そのブラウザの中だけ」、自分用は「ネット上のメモ帳」
○×トラッカーは、カレンダーの日付に○か×をつけていくだけのシンプルな習慣記録ツールです。
公開したURL（デモ）は、訪れた人が自由に試せる状態にしておきたいので、入力した記録はそのブラウザの中だけに残るようにしてあります。同じパソコンの同じブラウザで開けば続きから使えるけれど、別のパソコンや別のブラウザからは見えない、という仕組みです。
ところが私が個人的に使うとなると、これでは足りません。自宅のMacで「今日は走った（○）」とつけたら、翌日職場のMacからも同じ記録を見たい。そうなると、ネット上のどこかに記録を置いておく場所が必要になります。
最初は「別々のツールを2つ作るしかないのかな」と思いました。でも、同じ中身を2つ管理するのは、後から手直しするときに2回同じ作業をすることになって面倒です。直し忘れて片方だけ古いまま、なんて未来も簡単に想像できました。
「URLで動きを切り替える」というアイデア
そこで Claude に相談してみました。
返ってきたのは、「どのURLから来たかを見て、動き方を切り替えることができますよ」という提案でした。
ウェブのページを開くとき、裏側では「どのURLに向かってアクセスしてきたか」という情報がついて回ります。それを見て、
- デモ用のURLに来た人 → そのブラウザの中だけに記録する
- 自分用のURLに来た人（自分） → ネット上のメモ帳に記録する
と仕分けてあげればいい、ということです。
中身のコード（仕組み）は1つだけ。入り口で「どっちから来た？」と聞いて、そのあとの動きを変えるだけ。これなら何か直すときも一度直せば両方に反映されます。
ハマった点：手元で試したときに動きがおかしい
実装そのものはわりとあっさり動きました。ところが、自分のMacの中でテストしてみたら、思ったとおりに動きません。
理由は、手元のテスト環境では、さっきの「どのURLから来たか」の情報が、本番のURLとは違う値になっていたからでした。デモ用URLでも自分用URLでもない、ローカル専用の値になってしまうため、「どっちのモードか？」の判定がうまく効かなかったのです。
これも Claude に状況を説明したら、「手元で試すときは仮にこちらのモード扱いにしておきましょう」という逃げ道を提案してくれて、それでスッと動くようになりました。
このとき、「本番のサイトと自分の手元では、同じコードでも違う動きをすることがある」というのを、実感として学びました。エンジニアの方には当たり前なのかもしれませんが、私にはちょっとした発見でした。
動かしてみての感想
実際にこの仕組みで動かしてみると、なかなか快適です。
デモ用URLは誰でもアクセスして試せて、操作がそのブラウザの中で完結する。自分用URLは自分だけが知っていて、自宅でも職場でも同じデータを引き継げる。中身が共通なので、何か直したいとき一度直せば両方に反映される。
「URLによって動きを変える」というやり方は、たぶん他のツールにも使い回せる気がしています。
ひとつだけ正直に書いておきたいこと
自分用URLには、本格的なログイン画面を入れていません。そのURLを知っている人ならアクセスできる状態です。
私自身の使い方では問題ない範囲ですが、たとえば子どもの生活記録、健康情報、家族の予定など、他人に見られたくない情報を入れる場合は、このまま使うべきではありません。その場合はちゃんとしたログインの仕組みを足す必要があります。「URLが知られなければ大丈夫」というのは、かなり弱い守り方なので、そこは正直に書いておきます。
「コードを2つに分けるのが面倒だな」というズボラ心から、結果として面白い作り方を教えてもらえました。困ったことを Claude に話してみたら、自分では思いつかなかった選択肢が出てくる──個人開発でいちばん助かっているのは、たぶんこういう瞬間です。
← 他の制作記を見る ｜ トップ ｜ お問い合わせ