EC-CUBE で店舗や在庫場所の位置座標を登録して Google Map の中心から近い順番に表示する方法


[初回公開] 2007年12月19日

EC-CUBE はインターネットショップを立ち上げるためのツールで地図や位置座標は関係しないと思われがちだが、カスタマイズして位置座標を取り扱うことで実店舗や在庫の場所を Google Map や Mapbox など地図サービスと組み合わせて視覚的に表示する方法について解説する。

EC-CUBE で店舗や在庫場所の位置座標を登録して Google Map の中心から近い順番に表示する方法




1.EC-CUBE のカスタマイズの幅





EC-CUBE は簡単にインターネットショップを立ち上げることができるオープンソースであるが、プログラムとデータベースのカスタマイズは運営者で行うことができるので EC-CUBE の利用用途はインターネットショップ以外にも活用できる。
例えば商品登録する機能は通常の EC-CUBE の利用であれば商品に関する情報を登録管理するところを情報をデータベースに登録できる点に着目して「商品」ではなく「記事(コンテンツ)」と見立ててて Wordpress や MovableType といった CMS と同じような使い方をすることができる。
また、会員登録機能は通常の EC-CUBE であれば購入時の配送先等の入力を軽減させる役割と購入履歴を参照するものだが、そのログイン機能に着目して利用者が質問して運営者がそれに回答する会員制のサポートサイトとして利用することもできる。

2.位置座標の活用シーン


位置座標を地図サービスを利用してウェブサイトに公開する場合の例

位置座標とは「緯度, 経度」での数値で表される情報で、GPS を利用した車のナビゲーションシステムやスマートフォンの地図アプリや位置情報を使ったゲームも動作の裏ではこの位置座標を用いられている。
ウェブサイトで位置座標をよく利用するのは Google Map や Mapbox など地図サービス上に店舗や営業所の場所を示すアクセスマップとして公開する場合が多く、上図のように地図上に任意に指定する位置座標にマーカーを立てるものである。

このように Google Map など地図サービスを利用するものは店舗や営業所に限らず、イベントや観光などでスタンプラリーのスタンプを配置している場所を位置座標を使って示したり、AED がある場所を位置座標で指定して緊急時に有効活用してもらったり、災害時に備えて避難所をウェブサイト上で公開するのに活用することができる。

3.EC-CUBE で位置座標を取り扱うのに必要なもの





EC-CUBE で位置座標を取り扱うのに必要なものは PHP を動かすことができ、データベースを操作することができるサーバと Google Map や Mapbox など地図サービスがあればよい。
前者のサーバについては EC-CUBE を動作させるためには必要不可欠なので EC-CUBE が動作するのが判明していれば問題ない。
後者の地図サービスは無料の会員登録を行えば利用することができるのですぐに用意はできるが、無料枠の制限があり一定回数を超えて地図を表示するとそれ以降は翌月にならないと地図サービスが利用できなくなるので注意が必要である。

4.ある地点から近い順に表示する方法


Google Map など地図サービスを利用して登録している位置座標を元にマーカーを表示させるのは Google Map など各地図サービスのマニュアルを参照すれば可能だが、ある地点から近い順に登録している位置座標を表示させるのは地図サービスだけでは実現することができず、位置座標と取得範囲の概念を知った上でデータベースに一手間加える必要がある。

取得範囲内に入る位置座標の取得の仕方


まずは位置座標と取得範囲の概念として、ある地点からの取得範囲を示したものが上図となる。
上図の左側の四角形において左上の頂点座標を (A, B) とし、右下の頂点座標を (C, D) と仮定してこの枠線内に含まれる位置座標を取得する場合は、座標の内、緯度は A から C の間、経度は B から D の間に該当するものだけ抽出すればよいので座標値の比較、または SQL の通常の SELECT 文でも取得可能で実装は簡単であるが、中心場所から近い順に登録している位置座標を並び替えることはできない。

対して上図の右側は中心位置から一定範囲内に含まれる位置座標を取得するイメージ図だが前述したような緯度と経度の計算だけでは取得できず、postgreSQL などデータベースにある空間情報を取り扱う機能を利用すると実装することができる。
postgreSQL でテーブルを作成する際の指定など技術的な知識を要することになり難易度は上がるが、中心場所から近い順に登録している位置座標を並び替えができるなど便利な面もある。

ここでは後者の postgreSQL の空間情報を取り扱う機能(geometry)の使い方を以下に紹介する。

まず postgreSQL で空間情報を取り扱うためには位置座標を格納するカラムを用意する必要があり、次のようにカラムの型を geometry として CREATE TABLE を実行する。
この時、geometry は MyISAM でしか利用できないため、InnoDB は指定しないうようにする。

CREATE TABLE {任意のテーブル名} ({任意のカラム名} geometry);


今回は geometry を利用したが、他にもいくつか指定できる型が存在している。
 ・geography:地理座標(基礎が球面)
 ・geometry:平面座標(基礎が平面)
 ・geometry_dump:geomとpathを持つ空間データ型
 ・geomval:geomとvalを持つ空間データ型

テーブルの作成を終えれば次は実際の位置座標となるレコードを挿入するが、この時も通常の INSERT 文ではなく下記のように座標となる (緯度, 経度) だけでなく GeomFromText を指定して位置情報用の挿入が必要となる。



INSERT INTO {任意のテーブル名} ( {任意のカラム名} )
VALUES ( GeomFromText('POINT(緯度座標,経度座標)') );


ここまでで空間情報に対応した位置座標を登録することができたので、実際にある地点から一定範囲に含まれる位置座標を取得するために下記の SQL 文を実行する。

SELECT * FROM {任意のテーブル名} WHERE {任意のカラム名} @ circle ( point( 中心の緯度座標 , 中心の経度座標 ) , 距離数);


上記の距離数は 0.01 で約 1km 分の距離数となり、SELECT 文で指定する中心の座標から半径 1km 以内に該当する位置座標を近い順に postgreSQL が返してくれる。

5.EC-CUBE に位置座標の情報を組み合わせる方法


実際に EC-CUBE に位置座標の情報を取り扱うサイトを構築するためには次のカスタマイズが必要となる。

(1)空間情報を取り扱えるようにデータベースを設置する。
(2)位置座標を入力するフォームを EC-CUBE にカスタマイズする。
(3)位置座標を登録する。
(4)登録した位置座標を表示するように EC-CUBE をカスタマイズする。
(5)位置座標が表示されるか確認する。

(1)に関しては前述したように postgreSQL の geometry の型でカラムを作成する。

EC-CUBE に位置座標を登録するフォームを追加する


(2)は上図のように(1)で作成したテーブルに情報が格納できるように EC-CUBE の管理画面に入力欄を追加したもので、最低でも緯度と経度を入力する欄があるとよい。
緯度と経度を取得する方法は Google Map や Mapbox に表示した地図の中心座標を JavaScript などに表示する機能があり、上図の地図を移動させるとその中心の座標がテキストボックスに自動入力されるようにカスタマイズしている。

(3)は(2)でカスタマイズした座標を入力欄より位置座標をデータベースに登録するもので、カスタマイズできていればブラウザ上からキーボードとマウス操作で登録することができる。
もし(2)のカスタマイズができていなくても、前述のように INSERT 文を利用して直接データベースに格納することができるので決して(2)が必要ではない。

(4)はデータベースに格納された位置座標を SELECT 文を利用して取得し、その結果の座標を Goole Map など地図サービス上に表示されるように HTML として出力させるようにする。

カスタマイズした EC-CUBE に位置座標を利用した情報を表示する


ここまででカスタマイズした EC-CUBE に位置座標を利用した情報を表示する準備が整い、実際に表示させたものが上図である。
位置情報を取得したい中心位置を大阪駅にし、半径 1km 以内に該当する情報を表示するようにしており、図の右部の一覧にある通り大阪駅を中心に近い順に施設名が表示されているのがわかる。

関連記事