Labs: iPhoneサイトを作る(4) リンクの処理

検索結果からレストランを決めた後に、できる操作として４つボタンを作ることにしました。それぞれ単にリンクなんですが、使いやすくする工夫をいくつか書いておきます。

値段や口コミなどいくつかの情報を元にお店を決定したら、マップを開いて場所を確認します。友達にお店の場所を教えるためにメールします。もう少しお店のことを詳しく知りたくなったので食べログの携帯サイトも見てみます。念のため席を予約したくなったのでお店に電話します。こんな流れを想定してボタンを作成。

地図を見る

• 下記のURLへリンクするだけで「マップ」が起動します。
  http://maps.google.com/maps?q=●●
• 住所文字列が不安なので、緯度経度で検索。通常座標なら「ll=」というパラメータを使用しますが、その場合ピンが立ちません。そのため「q=」に緯度経度を渡すとピンが立ち、しかも続けて半角括弧にテキストを入れると説明まで追加されます（参考：緯度と経度で検索する)。
• 地図を開く前にダイアログを表示。aタグ内のonclickに下記を記述します。
  if(!confirm(‘警告’)) return false;

店をメールで教える

• これも通常通り下記のようなリンク。
  mailto:?subject=●●&body=●●
• リンク先は、食べログの携帯サイトとGoogle Mapsの緯度経度URL。携帯で受け取った人もおよその場所は確認できるはず。
• メール作成画面からページに戻ることは簡単なのでダイアログはなし。

食べログ携帯サイトを開く

• これも単純にサイトへのリンク。新しいウィンドウで開きます。
• パケ代をできるだけ抑えるために携帯サイトへのリンク。これでも結構無駄な情報が多い。
• サイトを開く前にダイアログを表示。地図同様、aタグ内のonclickに下記を記述します。
  if(!confirm(‘警告’)) return false;

店に電話をかける

• 電話の場合は下記のようにリンク。
  tel:●●
• これは予めダイアログが出るように設定されているので、本当にこれだけ。

これでおよそ完成。
小出しにしすぎなこの一連の記事、実はサイトもおよそできてるんですが、自ら使い勝手をチェック中です。次回公開。つづく。