AI自動整形スポットマッピングサービス「Dokoda」を開発しました
個人開発で住所リストのマッピングサービス「Dokoda」をリリースしました。
開発の動機や技術スタックなどをご紹介します。
これは何だ
このサービスは、入力した住所、施設名、土地名などのスポット情報を Google Maps 上にマッピングするサービスです。
テキストによる住所や施設名、土地名のリストでは、それらの位置関係がわからないということが多々あります。自分から一番近いところを探したり、ルートを考えたりですね。
こういったとき、手軽にスポット情報の位置関係を視覚化することができるサービスになっています。
開発の動機
住所のリストから地図上にマッピングする機能などは Google Maps にも標準でありますが、一度ファイルに保存しなくてはなりません。
もっと簡単にコピー&ペーストでさくっとできるような環境を目指して作成しました。入力する内容は冒頭の画像のように住所でも施設名、土地名でも Google Maps がスポット情報と判断できるものであればなんでも大丈夫です。
AIによる入力値整形機能
簡単にコピペで入力できることは魅力ですが、きちんとリストになっていなかったり、表記揺れがあったり、そもそも入力値が文章形式であったりすると前処理が必要になってきます。
それらの処理をAIにまかせることで、入力の手間を大幅に軽減させました。
スポット情報と判断できないような文言は排除したり、文章からスポット情報を抽出して自動でリスト化してくれます。
例えば、東京都内で運転免許の更新ができる指定警察署を調べるとだと、警視庁のページでは以下のように表示されています。これをガバっとコピーして Dokoda に入力すると何も整形せずともマッピングしてくれます。
更新手続の場所 警視庁 より
また、以下のようにスポット情報が含まれた文章でもそのまま入力してOKです。
もちろん、パーフェクトに分析できるわけではないので使用しないように機能を OFF にできるようにしています。
技術スタック
いたってシンプルです。
フロントエンド
- Next.js (App Router)
- React 19
- Tailwind CSS & Preline UI
- Google Maps API
バックエンド / API連携
- OpenAI API
ホスティング・デプロイ
- Firebase App Hosting
- GitHub
シークレット管理
- Google Cloud Secret Manager
Google Maps API
Dokoda はメンテナイスされていない @googlemaps/react-wrapper
で開発してしまったので、移行先としてガイドされている @vis.gl/react-google-maps に移行する必要はあります。
Google Maps API は 2025 年 3 月中から新しい地図スタイルに移行するようですので、このあたりの情報も追って対応が必要のようです。
また、React アプリに Google Maps を追加するための学習資材は公式の Gooele Codelab でも公開されているので参考になります（完全に開発が終わってから見つけました…）。
Firebase App Hosting
Firebase App Hosting は現時点（2025/2/27）で公開プレビュー版ですが、特に不便を感じませんでした（あまり他のサービスを利用したことがないので比較はできませんが…）。GitHub 連携も組み込みの機能で簡単に設定可能です。
ホスティング用のファイル群の生成は Firebase CLI で行いましたが、それ以外は全て Firebase コンソール画面上で簡単に操作できました。
その他お役立ちツール
OGPの確認
OGP（Open Graph Protocol）は Web ページや SNS にリンクを貼ったときに表示されるリッチオブジェクトですが、ローカル環境では通常確認できないため、以下のツールを使用し確認しました。
Localhost Open Graph Debugger はブラウザ拡張機能であり、一時的に Open Graph メタタグをデプロイし確認用のリンクを発行してくれます。リンクは手動で削除できますし、15分で自動削除もされます。
一時リンクの発行ができたら、各種ツールに貼り付けて確認してもよいですが、以下のサイトを利用することで、各種サービスに貼り付けた際のプレビューが確認できるので便利です。
Faviconの作成
Favicon の作成は favicon.ico を準備するだけ、かと思いきやいろいろと考慮することがあります。ブラウザだけでなく、iOS、Android、デスクトップ（Webサイトへのショートカット）などいろいろなアイコンを準備する必要がります。
以下のサイトはこれらのアイコンを一括で生成してくれて便利です。Favicon を理解するための解説も充実していて読み応えありです。
学べたこと
もともと React の勉強がてら始めましたが、サービスの公開までやったことはなかったので、SEO や OGP、 などひと通り公開まで触れてよかったです。といっても各種サービス類で機能やガイドが充実していて、開発以外ではそれほど詰まることはありませんでした。
今回はかなりシンプルなサービスなので、ストレージや認証周り、スケーリングやマネタイズまで考えるとまだまだなので、今後いろいろ触ってみようと思います。
まとめ
今回は React の学習と AI を使ったサービスを作ってみたいと思い開発しました。現在はこのサービス画面上で完結してしまっているので、今後は、Google Mpas のマイマップへインポートする機能や（今は無理のようだ）シェア機能などを展開できればより良いかなと思っています。
ぜひ利用してみて下さい！
Discussion