2011年3月 9日 22:06

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

スポンサードリンク

以前、スマートフォンでアクセスしたときだけ、電話番号のところを、tel:03-xxxx-xxxx で表現されるtel URIのリンクを、SSIで付ける、というやつをやりました。

M.C.P.C.: スマートフォンのWebブラウザのときだけURIスキームのtel URIを使ったa要素を出す（SSI使用）

んで、実際やってみるとソースが汚くなるんです。SSIの宿命ですが。

そんで、よく考えてみたらスマートフォンってJavaScriptが有効な状態でブラウズされているよね、ということに気付きまして、んであれば、SSIでやらずに、JavaScriptでリンクつければいいよね、と思って作ってみました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
$(function() {
  $('.tel').each( function(){
      if ( !navigator.userAgent.match(/Safari/)
        || !navigator.userAgent.match(/Mobile/) ) {
        return;
      }
      var text = $(this).find('img').attr('alt');
      if (
           typeof text != 'undefined'
        && text.replace(/[\x00-\x1f\x7f\s]/,'')
               .match(/^tel:(\+?\d[\d\-]+[\d\w;=\+\.\-]+)/)
      ) {
        text = RegExp.$1;
      }
      else {
        text = $(this).text()
                      .replace(/[\x00-\x1f\x7f\s]/g,'');
      }
      if ( text != '' ) {
        $(this).wrapInner('<a href="tel:' + text
                          + '" title="電話をかけます。"></a>'
               )
               .click(
                 function(){
                   return confirm(
                     text + 'へ電話をかけます。\n'
                          + '（スマートフォンのみ）'
                   );
                 }
               );
      }
  });
});
    </script>
  </head>
  <body>
    <p>
      電話番号に、class="tel"を付けた要素で囲ってあげると、電話をかけるリンクを付けます。<br />
      <strong class="tel">0990-513-006</strong>
    </p>
    <p>
      class="tel"を付けた要素の中身にimgがある場合は、img要素のalt属性を見て、tel URIになっていればそれを使い、電話をかけるリンクを付けます。
    </p>
    <p class="tel">
      <img src="dora.png" width="100" height="100" alt="tel:0990-513-006" />
    </p>
  </body>
</html>

実行例（判定部いじってPCで見たときもリンクつけるようにしています）

電話番号に、class="tel"を付けた要素で囲ってあげると、電話をかけるリンクを付けます。
0990-513-006

class="tel"を付けた要素の中身にimgがある場合は、img要素のalt属性を見て、tel URIになっていればそれを使い、電話をかけるリンクを付けます。

tel:0990-513-006