駅とれを作ったのでちょっと詳しく書く

最近駅とれという駅メモの補助ツールを作りました。

駅とれ

どういうツールかというと、経路探索やユーザー自身にポリラインを描いてもらい、そのルートから取れる駅を求めるというもの。

Google Directions APIを用いているので、経路探索もばっちし。車で駅を回収する時に事前にこのルートだとなんの駅が取れるのかなと調べることができます。

開発構成は以下のような感じ。

フロントエンド React + TypeScript + Sass

バックエンド(APIサーバー) PHP7 + Slim3 + SQLite(駅データ)

インフラ Vultrの$5鯖 + CloudFlare(趣味なのでケチり構成です。許してください)

開発期間は構想含めて2日ぐらい。久しぶりに趣味でアプリ作ってるぜえ!って感じがして楽しかったです。

仕組み

仕組み自体はすごく単純で、

駅のボロノイ図(ポリゴン)上をポリラインが通るかどうかを調べています。

日本国内のみしか対応していないのは、ボロノイ図はあらかじめ計算されていて、かつ日本国内の範囲でクリッピングされているからです。なんでクリッピングされているのかというと駅ろけで使ってるデータをそのまま流用しているからです。完。

今の所ボロノイ図は駅ろけの簡易(駅メモ仕様)を使っていますが、これを差し替えることで駅奪取仕様にすることもできるはずです。やるかどうかは微妙なところですが…

苦労したこと

当初、路線のルートも探索できるようにしようと思ったのですが、Google Directions APIが「日本のみ」公共交通機関でのルート探索をサポートしておらず、泣きながら他のAPIを当たったのですが全滅。結局車のルートのみ対応という形にしました。

乗り換え案内のAPIは大体法人向けで、個人で使えるものがほとんどなく、やっと使えそうなAPIを見つけてドキュメントを見るとクッソ辛そうな仕様がずらずらずら…と地獄でした。勘弁してくれや。

実装の方は、バックエンドよりフロントの方が苦労しました。今回iOS10マップっぽく下部バーを出して2画面操作できるようにしたのですが、その結果、Safariで確認するとマップがバウンスしちゃったりバグ踏んでスクロールした後数秒間フリーズしたり…

いや〜〜〜Webサイコーーーーーーってなりましたよマジで(真顔

結論

iOSアプリ書いてた方が気が楽