GPSと経路検索コンテンツ

投稿者: | 2018年7月23日

経路検索は便利で汎用的

数ヶ月前、東京で部屋を探すために不動産店に足繁く通っていました。そこでよく見かけたのがgoogle mapの経路検索です。物件資料にも地図は付いていますが、不動産店からの道順が書かれているわけではないので、どの店でも利用して効率的に移動していたことが印象に残っていたのです。
今回の件とは関係ありませんが、どこもカーシェアを活用していたのも印象的でした。

東京に引っ越してからも意図的に利用するようにしていて、やはり便利で何かコンテンツを作りながら覚えようと思っていました。不満点は交通量を鑑みた提案をしてくれないところ。距離的にはベストでも混雑のせいで時間がかかってしまうことが良くあった。ん?すでに交通量も反映しているっぽい、有料版だけ?

0722
 

Lunch navi

というわけで作りました。いつもランチは自転車で遠出するのでランチ検索にしました。東京はサラダバーの店が多くて良いね。サラダのおかわり自由ってのもサラダバーに含まれてるけど。

絞り込みは4種類(休日ランチ/14時以降のランチ/サラダバー/ランチバイキング)で、休日または14時を選択すると通常のランチ店は候補から外すようにしています。
休日や14時過ぎているのに通常のランチ店を紹介したらダメでしょ?

Lunch navi : ランチナビ

GPSと経路検索のモックアップ。現在地から500m圏内のランチ点のリストを表示し、googleの経路検索に繋ぐテスト

経路検索のスタート地点はGPSが取得する現在地のため、GPSを搭載していないPCなどでは正しく機能しません。スマホのGPS機能も使ってみたかったのです、経路検索には必須だと思うので。
ソースは最小化せずにコメントも付けてあるので、学びたい方は見ていってください。GPSと経路検索は意外とシンプルな仕組みになっています(ゴチャゴチャしているのはぐるなびのデータを成形している部分)。

経路検索無料版の限界?

google mapは以下のようにdir階層に特定の情報をget通信で送ると経路を表示してくれます。
https://www.google.co.jp/maps/dir/スタート緯度,スタート経度/ゴール緯度,ゴール経度/@表示緯度,表示経度,拡大率?言語

そのためスタート位置は固定(リアルタイムで現在地を変更できない)なので、いわゆるナビとは異なります。URLが固定なのでリロードしても意味がありません。現在地を更新するためにはGPSで位置を取得しているランチナビに戻り、再び検索してからGoogleMapを開く必要があります…

しかしiframe内にgoogleMapを表示しておき、親frameから一定時間おきにgpsで取得した情報を元にリロードし続ければ可能な気はします。ちなみにgoogle mapには有料版(200ドル分までは無料)のgoogle map platformというapiが用意されており、こちらは色々な機能が利用できます(たぶん)。

GPSについて

スマホのGPSを利用する仕組みはすでにモダンブラウザに搭載されています。
→参考:MdN – Geolocation API

注意すべきはSSL化された場所でしか機能しない点です(つまりURLがhttpsで始まっている場所)。この仕様により位置データが悪意ある第3者に渡ることを防いでいます。
とはいえサービス提供者が「位置情報をユーザーに提示した目的とは別のことに利用する」可能性は否めません(データをサーバーに送って行動を分析したりなど)。私のアプリはソースを公開しているので悪用していないことが確認できると思います。

あとGPS機能にアクセスする前に下図のようにダイアログを表示しますが、これはブラウザの仕様です。ページに入ったときに表示するのではなく、ユーザーが機能を利用するタイミングで表示することを推奨しているので、このアプリではserchボタンをタップしたタイミングで表示するようにしました。

0723

次回はVue.jsについて

このアプリはvue.jsを利用して作成しました。webアプリの制作に興味がでてきたので、仮想DOM系のjavaScriptフレームワークを学んでおきたかったのです。

仮想DOM系フレームワークは他にも色々ありますが、Vue.jsは習得が比較的容易でページの一部分だけに利用することも可能なため、デザイナーにも使いやすいと聞いていたので選択しました。

ということで次回はVue.jsを利用して感じたことを記事にしたいと思います。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Time limit is exhausted. Please reload the CAPTCHA.