案件で[Knockout.js](http://knockoutjs.com/)を触って感触が良かったので何か公開できるものを考えました。

以前、東京メトロAPIのアプリコンテストに応募して残念ながら落選したのですが、API自体はありがたいことに継続して運用されているので、現在地や出先の住所から一番近い東京メトロの出入口を検索するアプリを作ることにしました。

[Dokokara.info どこから（東京メトロの駅に）入るのが近いかわかるアプリ](http://dokokara.info/)

<div class="content-holder">
  <figure>
    <a href="https://www.flickr.com/photos/20720251@N04/17711890779" title="dokokara.info by YUJI ITOH, on Flickr"><img src="https://c2.staticflickr.com/6/5443/17711890779_6f618819e6_n.jpg" width="180" height="320" alt="dokokara.info"></a>
    <figcaption>イントロダクション</figcaption>
  </figure>
  <figure>
    <a href="https://www.flickr.com/photos/20720251@N04/17898694711" title="dokokara.info - find exit of Tokyo Metro by YUJI ITOH, on Flickr"><img src="https://c2.staticflickr.com/6/5467/17898694711_a8a6714596_n.jpg" width="180" height="320" alt="dokokara.info - find exit of Tokyo Metro"></a>
    <figcaption>出入口検索</figcaption>
  </figure>
  <figure>
   <a href="https://www.flickr.com/photos/20720251@N04/17275754304" title="dokokara.info - find route by YUJI ITOH, on Flickr"><img src="https://c1.staticflickr.com/9/8806/17275754304_3ec5744a23_n.jpg" width="180" height="320" alt="dokokara.info - find route"></a>
    <figcaption>ルート検索</figcaption>
  </figure>
</div>



<div class="content-holder">
  <figure>
   <a href="https://www.flickr.com/photos/20720251@N04/17710748328" title="dokokara.info PC by YUJI ITOH, on Flickr"><img src="https://c2.staticflickr.com/6/5336/17710748328_784d9f44c0.jpg" width="500" height="375" alt="dokokara.info PC"></a>
    <figcaption>PC版</figcaption>
  </figure>
</div>

# 使用API

- 東京メトロAPI
- Google Maps API
- Google Geocoding API（住所⇄緯度経度検索）
- Google Directions API（ルート検索）

# 機能

- Geolocation APIで現在地を取得して東京メトロの出入口を検索
- 住所から東京メトロの出入口を検索
- 住所入力時に随時緯度経度検索を行い、候補を表示
- 検索結果のマップ表示
- マップ表示で徒歩ルート検索

Knockout.jsのおかげで入出力まわりはかなり楽に書けました。

Geocoding APIは絞り込みが弱いと複数の検索結果を吐くので、どうやって選択させるかという問題が発生したのですが、よくある候補表示などもわりと簡単に実現できました。全部自分で書こうとしたら大変なことになるでしょう。

Archive for 2015.05

Knockout.jsと東京メトロAPIで出入口検索アプリを作りました