スマートフォンのWebブラウザのときだけtelスキームのa要素を出す（SSI使用）

Tweet

企業の所在地をmicroformatsのhCardで記述する、ていうのは現段階ではほとんどないけれども（なので自社サイトのみでやっている）、その際、電話番号のところっていうのはa要素のhref属性でtelスキームで書いちゃうことができますよね。

しかし、telスキームは携帯電話や、スマートフォンなどでしか取り扱えない。WindowsにスマートフォンをつなぐとWindowsからスマートフォンで電話をかけることができるのに、Webブラウザとは接続されていないのですね。

ということは、PCのブラウザで見たときは、a要素をださず、スマートフォンで見たときは、a要素を出せばいい、ということになりますよね。

というわけで、スマートフォン（Android・iPhone）のWebブラウザで見たときだけ電話番号の個所をリンクにするやり方。

道具としては、いつものように、SSIを使います。

<p class="vcard">
  <span class="fn org">株式会社○○製作所</span>
  TEL:
  <!--#if expr="$HTTP_USER_AGENT == /Safari/
     && $HTTP_USER_AGENT == /Mobile/ "
  --><a href="tel:000-000-0000"><!--#endif
  --><span class="tel">000-000-0000</span
  ><!--#if expr="$HTTP_USER_AGENT == /Safari/
      && $HTTP_USER_AGENT == /Mobile/ "
  --></a><!--#endif
  -->
</p>

実行例：

株式会社○○製作所 TEL: 000-000-0000

これで、スマートフォンのWebブラウザで見たときだけ、telスキームのリンクが付けられます。

HT-03Aでリンク先に行ったときは、そのまま電話がかけられる一歩手前の状態になり、iPadの場合は、連絡先に追加ができます。

この判定方法だと、User-AgentにMobileとSafariを持っていないとだめ、っていうことになります。今後の課題ですね。

2011.01.24 02:35 投稿　大野 義貴 [Web] | 固定リンク |