Google Map活用 / 位置連動のiPhoneアプリ「日本交通タクシー配車」

このエントリーをはてなブックマークに追加

今回はアプリ経由で驚異の売り上げ1億円超を記録した、日本交通株式会社のiPhoneアプリ「日本交通タクシー配車」を分析します。

日本交通タクシー配車

日本交通タクシー配車

J-CAST 会社ウォッチでの解説はこちら。スマホ経由の売り上げ1億円超 タクシー利用者向け無料アプリ

今回の日本交通タクシー配車はスマートフォンの特徴であるGPS機能をうまく利用しています。

技術的に要素を分解すると、以下のようになります。

1)google mapを表示させる

2)特定の位置にピンをドロップさせる

3)現在地を表示させる

4)現在地とピンの距離を算出する

日本交通タクシー配車は、ネイティブアプリで実現していました。

しかし今回は、ブラウザでも再生可能なHTML5でこれらを実現する方法を紹介していきます。

参考程度ですが、コードも交えて解説していきます。

1)google mapを表示させる 〜 2)特定の位置にピンをドロップさせる

google mapのAPIを使って表示させていきます。

APIの詳細は以下で解説されています。

逆引きGoogle Maps APIリファレンス ver 3

Google Maps JavaScript API V3 サービス

以下の括弧内で緯度・経度を指定します。

new google.maps.LatLng(35.689160610317174, 139.70083951950073)

・コードサンプル

var map = new google.maps.Map(

document.getElementById(“gmap”),{

zoom : 8,

center : new google.maps.LatLng(35.689160610317174, 139.70083951950073),

mapTypeId : google.maps.MapTypeId.ROADMAP

}

);

以下のサイトが参考になりました。

jQuery MobileでGoogle Mapsの表示からお問い合わせフォームの作成まで「jQuery Mobile」でスマホサイトを作ってみよう【実践編】

また、表示させる地図にはいくつか種類があります。

・ROADMAP:デフォルトの道路地図。2Dタイル。

・SATELLITE:Google Earthの航空写真。写真タイル。

・HYBRID:デフォルト+航空写真の組合せ。

・TERRAIN:起伏、高度、山、河川など地形情報に基づいて物理的なマップタイルを表示。

以下のサイトが参考になりました。

Google Maps API v3について

3)現在地を表示させる

続いて、ユーザーの現在値を表示させる仕組みを紹介します。

Geolocation APIを使って現在値を取得します以下の命令で、現在値が取得出来ます。

navigator.geolocation.getCurrentPosition()

注:AndrioidではGoogle GearsというAPIを使う必要があります。以下の参考リンクをご覧ください。

もし、住所を表示させたい場合は、Google Map APIを使って取得された位置情報を住所に変換(逆ジオコーディング)します。

google.maps.ClientGeocoder の getLocationsを使います。

以下のサイトが参考になりました。

[html5][JavaScript] Geolocation API を使った現在地の取得 – Google Map API 利用

HTML5+JavaScriptで現在地の地図を表示する実験(iPhone対応)

4)現在地とピンの距離を算出する

APIから取得される情報は緯度・経度なのでここから、

・方角

・距離

を算出する必要があります。

以下のサイトが参考になります。

緯度・経度から二点間の距離を計算する

[HTML5][iPhone][JavaScript] HTML5で位置情報取得 / HTML5をiPhoneのWebViewで表示させる簡易アプリ作成方法

緯度経度から距離と方位を求めるプログラム

都道府県を現在地に近い順に表示

会員登録不要、必要最低限の操作でタクシー配車が成立するスマートフォンアプリ。自社の魅力を発信するのではなく、ユーザーがタクシー配車に求めているものを追求した結果が、驚異の売り上げにつながったといえます。

このエントリーをはてなブックマークに追加

This entry was posted in blog. Bookmark the permalink. Trackbacks are closed, but you can post a comment.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

トップ | tadashiku, Incについて | 製品・サービス | 実績のご紹介 | ニュース | ブログ | パートナーシッププロジェクト | お問い合わせ