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


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

EC-CUBE はインターネットショップのツールで地図や位置座標は関係しないと思われがちだが、カスタマイズして店舗や在庫の場所を位置座標として登録することで Google Map や Mapbox など地図サービスと組み合わせて視覚的に表示するとともに、地図の中心から近い順番に表示する方法について紹介する。

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

1.EC-CUBE で位置情報を登録するメリット

EC-CUBE で位置情報を登録するメリットとしては、複数の店舗や在庫の位置を地図でわかりやすく表示することができる。
Google や MapBox などインターネット上で利用できる地図サービスは緯度と経度で示される位置座標と組み合わすことで簡単にマーカーと吹き出しを立てられる。

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


位置座標は GPS を利用した車のナビゲーションシステムやスマートフォンの地図アプリや位置情報を使ったゲームでも用いられており、EC-CUBE と組み合すと利用者の現在位置から最寄りの店舗へ案内しやすくなる。

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

2.EC-CUBE をカスタマイズすることで広がる機能

EC-CUBE はインターネットで通販サイトを公開するためのツールだが、カスタマイズすることで通販サイト以外でも活用することができる。

例えば商品登録する機能は通常の EC-CUBE の利用であれば商品に関する情報を登録管理するが、情報をデータベースに登録できる点に着目して「商品」ではなく「記事(コンテンツ)」と見立ててて WordPress や MovableType といった CMS と同じような使い方をすることができる。

また、会員登録機能は購入時に配送先を事前に入力することで次回以降の買い物で簡単に購入できる役割と購入履歴を参照するものだが、そのログイン機能に着目して利用者が質問してウェブサイトの運営者がそれに回答する会員制のサポートサイトとして利用することもできる。

EC-CUBE は無料で配布されているオープンソースなのでウェブサイトの運営者がプログラムとデータベースのカスタマイズが自由に行えるのがメリットである。

3.EC-CUBE で位置情報を登録するために必要なもの

EC-CUBE で位置情報を登録するために必要なものは、「EC-CUBE が動作するサーバ」と「Google Map や Mapbox など地図サービスのアカウント」である。



EC-CUBE が動作するサーバはプログラム(PHP)が使えて、データを保存するデータベースが利用できるのが必要条件となる。

地図サービスのアカウントは無料の会員登録を行えばすぐに利用することができる。
ただし、Google Map においては無料でできる範囲が決められており、一定回数を超えて地図を表示するとそれ以降は翌月にならないと利用できなくなるので注意が必要である。

4.ある地点から近い順に表示するための考え方

ある地点から近い順に表示するための考え方としては、一定距離内にある座標を空間情報を取り扱う機能を用いて並び替えを行うことにある。
まずは位置座標と取得範囲の概念として、ある地点からの取得範囲を示したものが下図となる。

取得範囲内に入る位置座標の取得の違い

上図の左側は中心地点から上下左右に一定方向の距離を保つ四角形での位置情報の取得方法である。
左上の頂点座標を (A, B) とし、右下の頂点座標を (C, D) と仮定すると、この枠線内に含まれる位置座標は、緯度は A から C の間、経度は B から D の間に該当するものだけ抽出するとよい。

そのため、枠線内に含まれる位置を取得する場合はプログラムで計算するか SQL の SELECT 文でも取得可能である。
ただし、中心地点から近い順での並び替えは距離と座標だけでは導くことができない。

次に上図の右側は中心地点から一定範囲内に含まれる位置座標を取得するものだが、この場合は postgreSQL などデータベースにある空間情報を取り扱う機能を利用する。
postgreSQL には空間情報を取り扱う機能として geometry が用意されており、テーブルのカラムの型を下記のように geometry として CREATE TABLE を実行する。
この時、geometry は MyISAM でしか利用できないため、InnoDB は指定しないようにする。

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



今回は geometry を利用したが、他にも postgreSQL には空間情報を取り扱ういくつかの型が存在している。

  • geography:地理座標(基礎が球面)
  • geometry:平面座標(基礎が平面)
  • geometry_dump:geomとpathを持つ空間データ型
  • geomval:geomとvalを持つ空間データ型
  • geometry を利用してテーブルの作成を終えれば、次は実際の位置座標をレコードとして挿入する。
    この時も通常の INSERT 文ではなく下記のように座標となる (緯度, 経度) に加えて GeomFromText を指定して位置情報用の挿入が必要となる。

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

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

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

    上記の距離数は 0.01 を指定すると約 1km 分の距離数となるため必要な距離を任意で指定する。
    仮に距離数を 0.01 にした場合、SQL を実行すると中心の座標から半径 1km 以内に該当する位置座標を近い順に postgreSQL が返してくれる。

    5.EC-CUBE に位置情報を登録して地図情報の中心から近い順に表示する方法

    EC-CUBE に位置情報を登録して地図情報の中心から近い順に表示する方法としては、位置情報が保存できるようにデータベースを作成した後に、位置座標を登録するフォームと登録した情報を地図上に表示するプログラムを用意する。

    5-1.空間情報を取り扱えるようにデータベースを作成する

    EC-CUBE で位置座標を取り扱うために、まず最初に空間情報に対応したデータベースを作成する
    実店舗を登録するのであれば新たに店舗用のテーブルを用意し、その中のカラムを geometry 型で作成する。

    また、既に EC-CUBE にある商品を登録するテーブルに新たに位置情報を加える場合でも追加するカラムに geometry 型を指定するだけでよい。

    5-2.位置座標を入力するフォームを EC-CUBE でカスタマイズする

    次に、位置座標を入力するフォームを EC-CUBE の管理画面にカスタマイズする。
    下図は geometry 型で作成したカラムに情報が格納できるように EC-CUBE の管理画面に入力欄を追加したものである。
    位置座標は緯度と経度が必要となるため、入力フォームも 2 つ用意している。

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


    緯度と経度を取得するためには Google Map や Mapbox など地図サービスの機能を利用する。
    地図サービスには表示した地図の中心座標を JavaScript で取得する機能があり、上図の地図を移動させるとその中心の座標がテキストボックスに自動入力されるようにカスタマイズしている。

    5-3.位置座標を登録する

    取得できた緯度と経度の位置座標は、geometry 型のカラム登録するように EC-CUBE をカスタマイズする。
    商品を登録した際に読み出されるクラスファイルに geometry 型で作成したカラムにも登録するようにプログラムを追記する。

    この時、前述のように GeomFromText() で緯度と経度を取り扱うことに注意が必要である。

    5-4.登録した位置座標を表示するように EC-CUBE をカスタマイズする

    最後にデータベースに格納した位置座標を SELECT 文を利用して取得する。
    データベースから返る値は登録時と同じく緯度と経度の情報なので、その情報を Goole Map など地図サービス上に表示するように HTML がある EC-CUBE のテンプレートファイルをカスタマイズする。

    5-5.位置座標が表示されるか確認する

    実際にデータベースに位置情報を登録してブラウザで表示したものが下図となる。
    図では中心位置を大阪駅にし、半径 1km 以内に該当する情報を表示するようにしている

    EC-CUBE で位置情報がある地点から近い順で表示される様子

    地図上には座標に基づきマーカーを立てるとともに、地図の右側には大阪駅を中心に近い順に施設名が表示されるようにしている。

    関連記事

コメントを残す