こんな感じのサービスつくりました。
嘘です。ほんとはこっち
（事情があり、記事内でサービスURLを紹介することは控えます。理由は後述します）
作ったもの紹介
①調べたい駅名を入力して検索
②結果が表示されます
③複数の結果を見比べることができます
- 周辺の施設数に応じて、検索キーワードの表示サイズが変わるようになってます。東京駅とかヤバい。
- 色々試してみた結果、暮らし系の割合が多いほどファミリーっぽくて、グルメ系の割合が多いほど遊びに行く場所だったり一人暮らしするっぽい街な傾向があるなあというのがわかってきました。
- （上位200件を取得していますが並び順はYahooのおすすめ順なので、ちょっと恣意性があるかも？）
- Geocodingとのやりとりがうまくいかずエラーになることが多いです…。キーワード変えたりリロードしたりする必要がある。
でもGoogleのAPIめっちゃ高くて手が出ない
ちなみに
所属している株式会社mofmofの「水曜日の個人開発」ってやつで捻り出た時間で作りました。毎週水曜日の日中は個人開発しなければいけない制度です。楽しい。
https://indie-dev.mof-mof.co.jp/
技術面
-
Next.js
- フロントだけでやれるかなって思ってたけど素振りしたらcorsで引っ掛かったからAPI Routes使おうと思って選定。SSRとかはしない。
- 手癖でChakraUIいれた。もう超便利。
- グラフ描画はrecharts。
- /api/citiesに、キーワード受け取っていい感じにするのを生やした。
-
Yahoo!ローカルサーチAPI
- https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/localsearch.html
- 駅の周辺情報を取得するのに利用。緯度経度を受け取って調べるって役割。
- 別途キーワード→緯度経度してくれるAPIが必要だったのでGeocoding.jpにお世話になってます。
- yahooのジオコーダAPIはキーワードから駅をピンポイントで取ってくるというのができなかったので不採用
- こんな感じのを使ってる。レスポンスのResultInfoに件数、Featureに各施設の詳細が入ってる。
https://map.yahooapis.jp/search/local/V1/localSearch?appid=${api_key}&dist=2&output=json&lat=${lat}&lon=${lng}&sort=hybrid&results=100
-
Geocoding.jp
- https://www.geocoding.jp/
- キーワードを渡すと緯度経度を返してくれる。
-
https://www.geocoding.jp/api/?q=${pointName}って具合でキーワードを渡すだけ。- xmlで返ってくるので、
xml2jsでparseして使う。
- xmlで返ってくるので、
- 検索頻度が高いとこちらのサービス様に迷惑がかかってしまうので、今回の開発物のURLは本記事には掲載しません。ご了承ください。もし触ってみたいなって方いらっしゃったらTwitterまでリプライかDMください 🙏
- こちら https://twitter.com/yubachiri
以上
社内でちまちま使って遊んでワイワイするにとどまってしまっていますが、キーワード→緯度経度代を出してくれる人が出てきたら機能拡充したりUXもっと整えたりしてちゃんと公開したいなあと思ってます。