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

Webページへの「ロケスマ」ボタンの設置方法

店舗運営者のWebサーバの店舗検索ページに「ロケスマ」ボタンを設置するには、ボタンを設置したいWebページのHTMLデータに以下の2つのパートを追加します。

以下は、サンプルページのHTMLデータです。赤枠の部分が追加するパートです。

上側のパート(<!-- ロケスマ×スマート店舗検索用追加 1/2 -->の部分)は、ロケスマボタンを呼び出せるようにするための宣言です。こちらは以下のテキストをそのままHTMLデータに貼り付けてください。

<script type="text/javascript" src="http://locationsmart.org/locasma.js" charset="UTF-8"></script>

実際にロケスマボタンを表示するのが下側のパートです。これが記述された部分にロケスマボタンが表示されますので、適切な位置に配置してください。

ここでは、3つのパラメータを指定して、Locasma関数を呼び出します。Locasma関数の各パラメータの意味は以下のとおりです。

Locasma ( 'マップをダウンロードする際の表示テキスト', 'KMLファイルのURL', 'ボタンイメージのURL' );

パラメータに指定されたデータは、以下のように使われます。

第3パラメータ:ボタンイメージのURL

第3パラメータは、ページに表示するボタンイメージのURLです。ボタンのイメージは、Webページのデザインに合わせて自由に制作することができます。制作したボタンビットマップをWebサーバで公開し、そのURLを第3パラメータに指定します。URLは「http://」で始まる形式で記述してください。

ボタンをどのようなデザインにするかは自由ですが、ボタンをタップしたときには、上の画面のようにロケスマがすでにインストールされているかが問い合わせられ、まだインストールしていないときにはApp Storeに行ってロケスマをインストールすることになりますので、ボタンには「ロケスマというアプリが起動される」という挙動が予想できるような内容にする必要があります。

第1パラメータ:マップをダウンロードする際の表示テキスト

第1パラメータで指定したテキストは、マップをダウンロードするときに、画面の下部に表示されます。ダウンロード後のマップの名称などは、KMLファイル内の情報が使われますが、KMLファイルを開く前にこの表示を行う必要があるため、パラメータで指定するようになっています。通常ここには、KML内のマップ名と同じ文字列を指定すればよいでしょう。この文字列が表示されるのはこのときだけで、マップのインストール後は使われません。

第2パラメータ:KMLファイルのURL

第2パラメータには、Webサーバで公開したKMLファイルのURLを指定します。URLは「http://」で始まる形式で記述してください。

上のサンプルは、以下のリンクから実際にアクセスできます。挙動を確認したり、HTMLデータを確認したりするのにお使いください。ただし、ロケスマボタンはiPhoneのSafariでページを表示したときしか現れません。

サンプル社店舗検索ページ

http://locationsmart.org/help/200lssmartsearch/999.html