Tweet

最近、「レスポンシブ」の見積もりが特に増えてます。
個人的にはPCとスマホと別デザインが好きなんですが、その話はまた別の機会に。

レスポンシブデザインのコーディング依頼の場合、特別な指示がない限り、普通にレスポンシブなコーディングして、レスポンシブなサイトに仕上がるわけなんですが、時々「ここタップしたら電話かかるようにしてほしい」というお願いがあるわけです。

そもそもスマートフォンに搭載されているブラウザは有能なので、いちいち「ここ電話番号ですよ」って指定しなくても、勝手にアンカーついて、タップすれば電話発信できるようになっているんですけどね。

ただ、そういう依頼が来る場合は、たいがい「フリーダイヤル」を持っているお客さんが多い傾向にあります。

そんな時、どう対応するかというお話。

目次

1. telタグについて
2. 基本的に何もしなくてOK
3. 絶対発信させたくない
4. 特定の電話番号から電話させたい
5. パソコンとモバイルと振り分けたい
6. まとめ

telタグについて

telタグってご存じですか？
携帯向けのサイト、いわゆるガラケーサイトを作ってた方にはおなじみなタグじゃないですかね。
個人的にはその時には結構使ってたけど、ガラケー案件が減ってしまって、最近めっきり使わなくなったタグです。

「HTML5/テキスト/a要素 電話発信用のリンクを設定する – TAG index」から引用

a要素に href=”tel:電話番号” を指定すると、電話発信用のリンクを設定することができます。

最近はスマートフォン案件が増えてきたこともあって、また使用回数が増えてきてる…というか、「あ、そういえばあったね」というタグです。

基本的に何もしなくてOK

ただし、最初に言ってるように、スマートフォンブラウザさんは有能なので、勝手に電話番号にリンクしてくれるんですよね。
ほんと便利。

ただし、注意しないといけない部分があります。
あまりにも有能すぎて、それっぽいもの全てにリンクを貼っちゃうんですよね。

例えばIPアドレス。
まぁ、IPアドレスをサイトに載せることがどれくらいあるかって考えると、そうそうない事例ではあるんですが。

そんな数字の羅列には勝手にアンカーはられてしまいますね。

全部発信させたくない

では、たまたまIPアドレスを載せるサイトを作る必要があった。
いやいや、電話番号じゃなくて例えばFAX番号もそうですね。
いや、それよりもスマホサイトから電話受け付けてません。というサイトの場合、タップして発信させたくないわけです。

でも勝手にブラウザがリンク貼っちゃうし…。

スマホサイトには一切番号を載せない！という手もありかと思いますが、レスポンシブでいちいち電話番号を非表示とかめんどくさい。

そんな時には、内に

<meta name="format-detection" content="telephone=no">

この、たった一行書くだけで、タップできなくしてくれます。
便利ですよね。

特定の電話番号から電話させたい

FAX番号からは電話できなくしたいけど、電話番号からは問い合わせがほしい。
電話番号じゃなくて、スマホ専用のフリーダイヤルを用意したから、普通の電話番号からは電話させなくて、フリーダイヤルのみ電話させたい。ということもあるかと思います。

そんな時には「telタグ」と3のmetaタグの併用ですよ。

まず内に

<meta name="format-detection" content="telephone=no">

を記述します。

これで、とりあえずタップして電話されることはなくなりましたね。

次に、電話してほしい番号にアンカーをつけます。

&lt;a tel:012345****">012345****</a>

これで完了。

たったこれだけで、電話してほしい番号からのみ電話してもらえる仕組みが出来上がりました。

パソコンとモバイルと振り分けたい

さて、これで万事OKかと思いましたが、一つ問題点が。
レスポンシブの場合、このままではPCで閲覧した人にもアンカーがついてしまってるわけです。当たり前ですけど。

でも、skypeいれて設定してたら別ですが、そうでない人には電話番号をタップしても電話できないわけです。
ってか不要なわけです。

PCで閲覧している人には通常の電話番号に。
スマホから閲覧している人にはタップして電話できるように。
というのが理想ですよね。

そこで、javascriptを使いましょう。

まずはサンプルHTML

<dl class="contact">
<dt>お問い合わせ先</dt>
<dd><a href="tel:012345****"><span class="telno">012-345-****</span></a></dd>
</dl>

こんな感じで簡単な電話お問い合わせを用意します。
で、とりあえず電話番号をspanで囲んでますけど、なんでもいいです。

$(function() {
  //USER AGENT取得
  var ua = navigator.userAgent;
  //uaにiPhoneかAndroidがない→つまりPCと判断
  if(ua.indexOf('iPhone') < 0 || ua.indexOf('Android') < 0) {
    $('a .telno').each(function() {
      //telnoの親要素（aタグ）を削除
      $(this).unwrap();
    });
  }
});

ちょっと長ったらしいですが、これでPC版の時のみアンカーが削除されます。
unwrap()で親要素を削除できます。
参考：unwrap() – jQuery API 日本語リファレンス

これで、PC版とスマホ版との切り分けができましたね。

まとめ

上のJavascriptが正解かどうかわかりませんが、もともとアンカーを付けてないなくて、スマホ版の時につけるという逆の方法もあります。

個人的にはスマホ版はWi-Fi接続していないことを想定して作るべきだと思っているので、PCとスマホと別の動きをするためにJavascriptが必要な場合は、デフォルトがスマホ版になるように考えて作っています。

今回の場合だとデフォルトが電話リンクあり。ってことです。
PCだったらなんとかなるだろう。ということですね。

もしかするともっといい方法が出てくるかもしれませんが、今のところこれで対応しているというお話でした。

もっとスマートなJavascriptだったり、実装方法あればおしえてください。
そいぎ～

Tweet

関連してそうな記事:

いろんなサービスで使い回ししないけど、覚えやすいパスワード考えてみた WordPressでプラグイン使わず簡単にキーワードとディスクリプションを設定する方法 テキストエディタとビジュアルエディタを行き来するとspanが消える 【コピペで】WordPressの新着記事にNEWをつける