自分が行った場所を地図上に記録する個人用ツールを作った

行った場所を記録して、それを地図上で閲覧できるツールを作りました。
nabeliwo が行った場所

ログインなしでそのまま見られるので、良かったら見てください！

機能としては、僕だけがログインできるようになっていて、ログインすると施設の登録ができます。
その際に、軽いメモを書いたり、外のブログのリンクを登録したり、画像のパスを渡したりすることができます。登録された施設にピンが立って、地図上からそのピンを選択すると画像だったりブログの OGP の情報が展開されます。
ログインしないと閲覧のみのモードになっていて、登録されている施設を検索したり、ピンを眺めたりする機能だけがある、という感じです。

この記事の一番上に貼っている画像がその展開したところで、森美術館のピンを開くと「ロン・ミュエク展に行った」という記事の OGP が出てくるようになっています。

まだ作り立てなので、とりあえず先週行った場所をいくつか登録しただけの状態です。これから過去に遡って追加していこうと思ってます。
自分で触ってみて、ピンが増えていくのがなかなか楽しいです。大量のピンで埋め尽くされたときにそれを眺めるのもめっちゃ楽しそう。たくさん登録して数年後に家族で振り返りたくなってきますね。

作った目的

記録厨なので、日報・週報・月報を欠かさずやっていたり、やったゲーム・読んだ本・見た映画・見たアニメも全部記録していて、そうなると次は行った場所だな、と気付いてしまったので作りました。
Google Maps を使うのでも良かったのですが、立てたピンに対して画像とかブログとかを柔軟に設定して、OGP 画像を展開してぱっと見で楽しくなれるようにしたり、詳しく書いた別の記事にすぐに飛べたらいいなって思ったら、作っちゃった方が良さそうだったので。

最近はもうほしいと思ったものを一瞬で作れる時代なので自作のハードルがとても下がっていますね。多分以前までだったら Google Maps を活用していたと思います。

あとは、普段触ってない技術にも触れたかったので、あえて経験が少ないフレームワークなどを使って実装して、コードを眺めて勉強する、みたいなことも裏目的としてありました。

技術スタック

ということで技術スタックは以下のように選びました。

普段は Next.js + Rails API で開発することが多いので、なかなか新鮮でした。
登録・更新処理は僕だけが行うアプリケーションなので、DB を使うとしてもランニングコストを無料に収めるのは守りたかったところです。Cloudflare Workers / D1 の無料枠、Google Places の SKU 単位の無料枠にすべて収まるようにできたのは良かったです。

Cloudflare の関連ツールは以前から色々触ってはいましたが D1 は触ったことがなかったので選びました。Cloudflare は最近新しいツールをどんどん出していて本当に素晴らしいなと思っています。
TanStack Start にしたのは特に大きな理由はないですが、Next.js 以外で扱いやすいものを考えると最初に思い浮かぶかなと。

あとマップ系のツールは、無料に抑えようとすると自然と行き着く感じの選定になってる気がします。
地図タイルの OpenFreeMap は OpenStreetMap のデータをホスティングして無料で公開してくれているサービスで、positron はその中の白っぽくて落ち着いたスタイルです。無料でこのレベルの地図を作れるのは本当にすごい。
施設を検索するのに、最初は Geoapify (OpenStreetMap ベース) という無料枠が多めのサービスを使っていましたが、登録されている施設が少なかったり、個人経営の店を登録しようとしたら検索に出てこなかったり、特定の名前で検索すると公園・駐輪場・サービスセンターが同名で3件返ってきたりと、微妙に使い勝手が悪かったので、途中で Google Places に乗り換えました。ただ Google Places の無料枠はあまり多くないので、コストを抑えるために(Claude Code が)いろいろ工夫をしています。

おわり

使ったことのない技術の勉強という裏目的は、正直このやり方だと叶えられていない気がしています。
出されたコードを読みつつ Claude Code に解説してもらっても、ふむふむとは思うけれど特に記憶に残らないし身につかないなと。

まあ長期的に改善を続けてその度に解説してもらったらもしかして記憶に定着していくかもしれないので、一応このやり方は続けつつ、使ってる中で不便に感じたところを都度直していこうと思います。
とりあえずどんどん行った場所を登録していってこの地図を充実させていきたい。

こういう自分のためだけのツールをシュッと作れるっていうのが、本当に良い時代になったなあと感じます。
作るのに時間がかかるとこういう系のやつはどこかでモチベーションが消え去ったりしますからね…。Claude Code に感謝🙏