アークウェブのブログ

今回作ったもの

今回作った「お近くのショップを探す」は、 PCかスマホのブラウザでアクセスすると、最初に位置情報の取得の許可を求める画面が表示されます。 許可すると、現在位置から一定圏内にあるお店を近い順に一覧表示する、というシンプルなものです。

一定圏内と言いましたが、5km圏内に10件分見つからない場合は、10km圏内に範囲を広げて探し、それでも足らなければ15km圏内を探すという風に指定条件内でレンジを広げる探し方ができて少しだけお利口さんです。

実現方法

次のような手法を使っています。

• ユーザの現在地は、GeolocationAPIで取得する
• MTのコンテンツタイプでショップ情報を管理する。
• MTでショップ詳細ページ、検索ページと、検索で使うJSONファイルを出力する。
• MTのプラグインSearchLocation（今回開発）は、現在地（緯度・経度）をパラメータとして渡すと、Nkm圏内にあるショップのIDを近い順のリストで返すAPIを提供する。
• JSでユーザの現在地を取得する。現在地をSearchLocationプラグインに渡して問い合わせ、得られた結果から検索結果ページを表示する。

位置情報の取得（JS）

• JSでブラウザから位置情報を取得します。GeolocationAPIについては次の文献を参考にしました。
  • 位置情報 API - Web API | MDN
  • 位置情報 API ブラウザ対応状況 MDN
• ユーザに位置情報の利用の許可を求めるダイアログが表示されます。ユーザが許可して初めて位置情報を取得でき るようになります。

SearchLocationプラグインの説明

前述の通り、このプラグインは目的の緯度・経度を与えると、Nkm圏内にある店舗のidを近い順のリストで返すAPIを提供します。

【データの持ち方】
ショップ各店の緯度・経度はGeometry型でDBに格納します。Geometry型は検索すると与えた緯度経度に近い順に取れる仕組みがあるのでこれを利用します。

MTのコンテンツデータが直接 Geometory型で登録できれば理想的なのですが、あいにくMT::Objectは Geometry型に非対応なようでした。そのため GeometrySearchLocationプラグインでは専用のテーブルを追加し、コンテンツデータIDと緯度経度データ（Geometry型）のセットを登録しています。 ※専用テーブルの追加が必要なため、MTクラウド環境では使えません。

【プラグイン設定画面】
MT側のどのコンテンツタイプと紐づけるかや、結果件数、検索レンジ（NKm件内から探すか）などを設定します。

【データ登録タイミング】
MT側でショップのコンテンツデータを投稿・更新すると、保存時にフックしてContentID、緯度、経度 を専用テーブルに登録します。

【エンドポイント】
https://yourdomain/mt/plugins/SearchLocation/search_location.cgi?lat=xxxx&lng=xxxx

【検索結果】
例えばプラグイン設定画面で、結果件数を「10」検索レンジを「5,10,15」に設定すると、5km圏内に10件分見つからない場合は、10km圏内に範囲を広げて探し、それでも足らなければ15km圏内を探す、という探し方をします。
東京中心部と、地方でクルマ移動が普通な地域とでは求める結果が異なるだろうなと考えこのような仕様にしました。

結果はこんな感じのJSONで返ります。

{
"result" : "success",
"data" : [
{
"blog_id" : "1",
"cd_id" : "1",
"lat" : "139.766247",
"lng" : "35.681298",
"range" : "100"
},
{
"blog_id" : "1",
"cd_id" : "2",
"lat" : "139.766247",
"lng" : "35.681298",
"range" : "100"
},
...
]
}

検索結果の描画部分（JS）

• JSはSearchLocationが返す店舗idのリストと、手元のJSONファイル（ショップ名や画像、住所、URLなど）とから検索結果の一覧を表示します。
• 今回ショップ情報の参照にあらかじめ静的に生成したJSONファイルを使いましたが、この部分は MTのData APIで動的に取得する実装でもいいと思います。
• 発展させれば 現在地とショップをマップにプロットしたり色々できると思います。

以上、緯度経度で検索するプラグイン を開発して、MTで「現在地から探す」「お近くのショップを探す」機能を実装したお話でした。

SearchLocationプラグイン はまだ出来立てで一般公開していないのですが、もしご興味がある方がいらしたらフォームからお気軽にお問い合わせください。 では、ハッピーなクリスマスを！