ロケスマ × スマート店舗検索

ホームページへの「ロケスマ」ボタンの設置手順

店舗運営者さまのホームページに「ロケスマ」ボタンを設置して機能させるために必要な手順は以下のとおりです。

1.店舗のKMLファイルを作成する

既存の店舗一覧から、ロケスマが読み込み可能なKMLファイルを作成します。KMLファイルについては、「KMLファイルについて」を参照してください。

2.ピンの画像を作成する

ロケスマのマップ上で、店舗位置に表示されるピンの画像を作成します。サイズは任意ですが、あまり大きくしすぎると、地図が隠れてに見にくくなります。上下(天地)のサイズは84ピクセルにしてください。ピン画像の下端、中央部が店舗の場所となります。ピンの背景は透明にして、PNG形式として保存してください。

3.マップ一覧用バナーの画像を作成する

マップをロケスマにインストールしたときに一覧に表示されるビットマップです。上下(天地)のサイズは84ピクセルにします。左右のサイズは決まっていませんが、あまり大きくすると、マップ名が隠れてしまうので、200ピクセル以内に収めることをお勧めします。このバナーもPNGファイルとして保存します。

4.Webページに表示する「ロケスマ」ボタンを作成する

店舗運営者のホームページに表示する「ロケスマ」ボタンのビットマップです。このボタンは、スマートフォンのブラウザでページを表示したときだけ現れます。通常のPCなどで表示しても現れません。

ボタンのサイズをどのくらいにするかは、ボタンを設置するページの状態によります。ページがすでにスマートフォン対応になっている場合には、横幅は300~320ピクセル程度にするのがよいでしょう。

ページがPC版のみの場合、スマートフォンではページが縮小されて表示されますので、ボタンのサイズはある程度大きくしないといけません。たとえばページの左右幅が1000ピクセルなら、ボタンも1000ピクセル程度にして、横幅いっぱいに表示する必要があるでしょう。巨大なボタンになりますが、これはスマートフォンでしか表示されませんので問題はありません。

画像イメージは自由ですが、ユーザーがロケスマボタンをタップすると、「ロケスマアプリをインストール済みか?」と問い合わせられ、まだの場合はインストールを促すことになるので、「ロケスマ」という文字やロゴは表示していただいたほうがよいでしょう。ロゴなどの素材についてはデジタルアドバンテージからご提供いたします。

他の画像ファイルと同じく、こちらもPNG形式で保存します。

5.画像ファイルをWebサーバーで公開する

2.で作成したピン画像、3.で作成したバナー画像、4.で作成したロケスマボタンの画像を、それぞれ店舗運営者のWebサーバーで公開します。

6.KMLファイルを編集する

KMLファイルの冒頭部分に、マップ一覧用バナーやピン画像のURLを参照する部分があります。このURL部分を5.で公開したURLにそれぞれ変更します。KMLファイルについては、「KMLファイルについて」を参照してください。

7.KMLファイルを公開する

KMLファイルが完成したら、Webサーバで公開します。

8.Webページにロケスマボタンを設置する

Webページを編集し、ロケスマボタンを設置します。具体的な方法については、「Webページへの「ロケスマ」ボタンの設置方法」を参照してください。APIを呼び出す際のパラメータとして、ロケスマボタン画像のURL、KMLファイルを公開したURLが必要になります。

9.機能テストを実施する

8.で設置したロケスマボタンを実際にタップして、マップがロケスマに正しくダウンロードされるか、店舗のピンが正しく表示されるかを確認します。

10.ロケスマボタンを含むページを公開する

9.のテストで問題がなければ、8.で制作したページを公開してください。この時点から、ユーザーは貴社のマップデータをダウンロードして利用できるようになります。

11.KMLのURLをデジタルアドバンテージ社に連絡する

KMLファイルの更新状況は、デジタルアドバンテージ社のサーバで定期的にチェックしています(更新したKMLファイルの更新通知について)。これには、公開されたKMLファイルのURLが必要です。一連の作業が完了しましたら、KMLファイルのURLをデジタルアドバンテージの担当者にお知らせください。