【非エンジニアの個人開発】旅行先でのランニング距離が分からない問題を解決する地図アプリを作った話

青と緑を基調とした都市の広範囲の衛星画像。建物、道路、緑地、水域が衛星視点で捉えられている。
目次

はじめに

こんにちは。普段は非エンジニアですが、今回、ランニングや散歩のルート・距離を簡単に測定できる地図アプリ「R_Search_Navigator」を個人開発しました。

    現在、「本当に自分以外のランナーや散歩好きの方に需要があるのか?」を検証するため、1週間限定で公開テストを行っています。

    まずはぜひ、こちらから触ってみてください!

    なぜ作ったのか?(開発のきっかけ)

    開発のきっかけは、地方や旅行先など「知らない土地」で新しいランニングコースを開拓しようとした時の不便さでした。

      「ここからあの海辺まで走って戻ってきたら何キロだろう?」と思っても、パッと距離を調べる良い方法がありませんでした。

      そこで、Google Mapsベースで直感的に経路や距離を調べられるアプリを作ろうと思い立ちました。ガチのランナーだけでなく、旅行先での散歩ルート作りや、ちょっとした地図代わりにも使えるシンプルなものを目指しました。

      mapの抽象的な表示とリアルな表示のスプリット表示。アプリではどちらのモードも対応している。
      mapの抽象的な表示とリアルな表示のスプリット表示。アプリではどちらのモードも対応している。

      ここにこだわった!3つの推し機能

      単なる地図アプリではなく、ランナーや散歩好きに嬉しい機能を盛り込みました。

      主要機能
      • 直線モードでのルート測定
        • 道なりだけでなく、公園の中や道なき道を通る想定の「直線距離」もサクサク測れます。
      • 半径(円)表示による「折り返し地点」の可視化
        • 「今日は5km走りたいから、半径2.5kmの円のあたりで折り返せばいいな」という目安が視覚的にパッと分かります。
      • 標高チャートの表示(プロ機能)
        • ルートの高低差もグラフで確認できるようにしました。坂道トレーニングをしたい時や、逆に平坦な道を走りたい時に便利です。
      • PWAでモバイルアプリにできる
        • webベースのサービスになっていますが、モバイルアプリにして使う事も可能になっています。
        東京のmapとアプリの半径機能
        東京のmapとアプリの半径可視化機能

        技術スタック

        非エンジニアながら、モダンな構成にチャレンジしました。

          • Frontend: Next.js
          • Backend/Hosting: Firebase App Hosting

          開発で一番苦労した「APIの不正利用対策」

          今回、一番高い壁だったのはコードを書くこと以上に「セキュリティ」でした。
          Google Maps APIを使用しているため、「もしAPIキーが流出して不正利用されたら、とんでもない請求が来てしまうのでは…」という恐怖がありました。

            非エンジニアの個人開発者にとって、この辺りのセキュリティベストプラクティスを理解して実装するのは本当に難しかったです。

            基本的なクライアント側にAPIキーを表示させない事やGCPのSecret Managerで登録しました。
            さらにもし漏洩した場合にも「APIキーのリファラー制限」をかけてURLでの制限した。

            東京、皇居周辺を結ぶ道路網と距離を示す地図。交通やナビゲーションに関する地理情報。
            東京、皇居周辺の移動距離5.34kmを示す地図。都市間のルートを確認できます。

            おわりに(1週間限定で需要検証中!)

            冒頭にも書きましたが、このアプリは現在1週間!
            限定でテスト公開しています。

            もし一定のアクセスやフィードバックがあれば本格稼働を検討しますが、利用者がいなければ「自分専用のローカルアプリ」としてひっそり運用していく予定です。

            ランナーの方、旅行・散歩好きの方、あるいは「非エンジニアの個人開発」に興味がある方、ぜひ一度アプリを触ってみていただき、X(旧Twitter)などでフィードバックをいただけると本当に嬉しいです!

            よかったらシェアしてね!
            • URLをコピーしました!
            • URLをコピーしました!

            この記事を書いた人

            始めまして。このブログを運営するTomoyaです。
            未経験個人開発者。AI×個人開発(Vibe Cording)で学習して参入してくれる人が増えて広がっていくと良いなと思って始めました。

            実際に作成→デプロイ(公開)→運営を行ってそれについての問題や疑問を記録していきます。
            また行っていく上で内容(セキュリティ・制限など)にもこだわっていきたいなと思っています。

            コメント

            コメントする

            目次