スマートフォンサイトでよくあるリクエストとして、「電話番号の書いてあるバナーをタップしたら電話をかけられるようにしたい」というのがあります。
既にウェブ上に幾つか記事がありますが、より簡単（？）な方法。

スポンサーリンク

環境によって変える必要がないならこう書ける

スマホでもPCでも動くようにフツーに書くと、具体的には以下の通り。

<a href="tel:09012345678"><img src="tel.png"></a>

これだけです。
「09012345678」の部分が電話番号ということになります。リンクをタップすると通話アプリが自動で立ち上がって、電話番号が自動で入力されるので、あとは通話開始ボタンを押せば電話がかかっちゃう、というステキな機能です。
私の経験上は、090-1234-5678みたいにハイフンとか入れてしまうと正常に動かない環境があるっぽいので、数字だけ並べるのがよさそうです。

スマートフォンでだけ動作させたい

ただこの方法だと、当然PCでもクリックできてしまうし、実際にクリックするとブラウザーが困ってしまって何のソフトで開くか確認するダイアログを出しちゃうんですよね。
いきなり「どのソフトで開きますか？」と聞かれてもむしろどのソフトで開けるのかこっちが訊きたいよといったところですよ。
ということで、「スマートフォンでだけ電話がかかるようにして、PCでクリックしてもうんともすんとも言わないようにしたい」という発想が出てくるわけです。

スポンサーリンク

方法

基本的には以下の様な感じ。まずHTMLはaタグではなくspanを使います。まあ実際はdivでもaddressでも何でもいいんですが、

<span class="jump" data-href="tel:09012345678"><img src="tel.png"></span>

こう。aタグがspanタグになって、spanタグにdata-hrefという属性が書かれてます。

そして追加するJavaScript(jQuery)はこちら。

document.ready(function(){
  $(".jump").click(function(){
    if(is_smartphone()){
      window.href=$(this).attr("data-href");
    }
  });
});

function is_smartphone(){
  //スマートフォンならtrue、そうでないならfalseを返す関数
}

クラス.jumpが設定された要素をクリック（タップ）すると、スマートフォンかどうかをリアルタイムに判定して、スマートフォンだったらdata-hrefに指定した場所に移動する、という単純なスクリプトです。

ここではdata-hrefにtel:09012345678が設定されているので、電話をかけるというアクションになります。
（需要はともかく）普通にdata-href=”http://www.example.com/”とか書いてれば、スマートフォンの時だけ example.com に移動する、という動作になるわけです。

ちなみに「data-hogehoge」というのは、HTML5から正式にOKになった書き方で、「独自データ属性」といいます。JavaScriptから利用したりする値を見てる側に見えないように埋め込むことができる、というもの。data-の後は小文字の英数字ならなんでもいい。

is_smartphone 関数の中身

横幅で判別する

いわゆるレスポンシブデザインというもの。
下の例では表示領域が480px以下ならスマホと判定。

function is_smartphone(){
  return ($(window).width()<480);
}

CSSの記述により「スマホの時だけ #pc_nav は display:none になる」という場合は、こういう方法もあります。
こうすれば幅に関する記述がcssだけですみます。

function is_smartphone(){
  return ($("#pc_nav").css("display")=="none");
}

UserAgentで判別

ブラウザーが持っている識別情報を調べることでも判別はできますが、
・書くのが面倒
・現存のUserAgentをひと通り調べないといけない
・新しいUserAgentが出てくる可能性がある
という点から、私はあんまり使いません。最近はもっぱらレスポンシブです。ということで省略しますごめんなさい。

スポンサーリンク

おわりに

実際に tel: で始まるリンクはPCでもSkype等で開いて直接電話ができたりするんだと思いますが、需要があるかといえばなんとも……なので、やっぱりスマホの時だけ、というのが今のところベストなのかなぁという気がします。参考までにどうぞ。

あとどうでもいいですけど、「tel:」があるんだから、ページを丸ごとFAXするための「fax:」があってもいいのにね。あってもいいけどあったらあったでみんな使わないからきっとないんでしょうけどね。以上です。