デベロッパー センター

店舗検索(一覧)ページへの「ロケスマ」ボタンの設置方法

iPhoneのブラウザ(Safari)には、ほかのアプリを直接起動する機能があります。この機能を利用して、店舗検索(店舗一覧)のページに「ロケスマ」ボタンを設置し、ここからロケスマ・アプリを起動し店舗一覧の地図を表示して、訪問者に最寄りの店舗を素早く検索してもらうことができます。

ここでは店舗検索(店舗一覧)ページに ボタンを設置し、それがタップされたときに、ロケスマを起動して、店舗一覧の地図(以下「店舗地図」)を表示する設定方法について解説します。

1.準備

最初に、ロケスマが起動されたときに表示される店舗地図のKMLファイルを作成します。このKMLファイルは、店舗ごとの店舗名や位置情報などを含んだデータです。KMLファイルを準備したら、インターネット上のWebサーバにファイルを配置して、外部からアクセスできる状態にします。

ここでは例として、次のURLにKMLファイルを準備したとします(以下のURLには、実際にアップルストアのKMLファイルがあります。リンクをクリックすると、KMLファイルをPCにダウンロードして、内容を確かめることができます)。

http://locationsmart.org/kml/original/apple.kml

2.ソースの読み込み

「ロケスマ」ボタンは、Java Scriptのコードで記述されています。このコードを店舗検索のページに記述することで、ページ内にボタンを表示し、機能させることができるようになります。

まずはこのJava Scriptコードを読み込めるようにするために、HTMLファイルの先頭部分にある<head>要素の中に次の1行を追加し、「http//locationsmart.org/locasma.js」を読み込めるようにします。

<head>
  ……
  <script src="http://locationsmart.org/locasma.js" charset="UTF-8"></script>
  ……
</head>

3.ボタンの記述

続いて、ボタンを表示したいHTML内の場所に、次のような1行を記述します。

<script>Locasma1('アップルストア', 'http://locationsmart.org/kml/original/apple.kml');</script>

これは、上記2.で読み込んだソース内に定義されているLocasma1関数を呼び出しています。Locasma1関数の第1パラメータには、地図の任意の名称を指定します。第2パラメータには、上記1.で準備した店舗地図のURL(http://~)を指定します(地図の名称は、ロケスマへの地図のインストール時にのみ使用されます)。

なお、このLocasma1関数により表示されるボタンは、iPhone、iPod、iPad上でのみ表示され、それ以外のブラウザ(PCのブラウザやAndroidのブラウザなど)で開いた場合には表示されないようになっています。つまり、「ロケスマ」ボタンを押しても動作できない環境では、ボタン自体が表示されませんから、ユーザーが誤操作することはないということです。

※現状は1種類だけですが、ボタンの色やサイズなど、さまざまなパターンを増やす予定です。少々お待ちください。

4.記述例

HTMLページの記述例を以下に示します

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="content-language" content="ja-jp">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

  <script src="http://locationsmart-work.org/locasma.js" charset="UTF-8"></script>
</head>

<body>
  <h2>ロケスマボタンの設置例</h2>

  <p>ロケスマボタンは、iPhone、iPod、iPadでのみ表示されます。</p>

  <h3>例1</h3>

  ↓↓にボタンが表示されます。<br>

  <script>Locasma1('アップルストア', 'http://locationsmart.org/kml/original/apple.kml');</script>

  <br>
  ↑↑にボタンが表示されます。<br>

  <h3>例2</h3>

  ボタンの位置合わせなどは<div>タグなどをお使いください。<br>
  <br>

  ↓↓にボタンが表示されます。<br>

  <div style="text-align:center">
    <script>Locasma1('アップルストア', 'http://locationsmart.org/kml/original/apple.kml');</script>
  </div>

  <br>
  ↑↑にボタンが表示されます。<br>

</body>
</html>

上記のHTMLファイルは以下にあります。

http://locationsmart.org/tool/sample.html

まずは、前記のページをiPhoneのSafariで表示してみます。次のように、HTML内に記述した「ロケスマ」ボタンが表示されます。ボタンをタップすると、ロケスマが起動して、アップルストアの店舗地図が表示されます。

一方、PCのブラウザで同じURLを表示してみたのが次の画面です。

ボタンを記述した位置にボタンが表示されていません。ロケスマが正しく機能できる環境でのみ、ボタンが表示され、誤操作を防止します。