jQuery:電話番号リンクの有効・無効をUAで切り替える方法

  • Posted on
  • Category : Tips
jQuery:電話番号リンクの有効・無効をUAで切り替える方法

備忘録。スマートフォン専用で制作されたものはそのままで問題ないと思いますが、レスポンシブで制作した場合などにPC上では電話番号リンクは無効にしたいということがあります。そこでjQueryとユーザーエージェントを用いて、スマートフォンからアクセスされている時のみ電話番号のリンクを有効化するようにします。

電話番号をリンクで設定する際は<a href="tel:0312345678">03-1234-5678</a>という感じで記述し、これをスマートフォンやガラケーで閲覧している場合は、クリックしている際に記述してある電話へ発信ができるという動きになります。
ただ、このように記述をするとPCのブラウザで表示されている場合も同じように電話番号としてリンクされており、例えばFirefoxの場合はクリックすると「アドレスのプロトコルが不明です」という表示が出てしまったり、他のブラウザの場合でもクリックしても何も起きないというような状態になります。

以前であれば基本的にスマートフォンサイトは専用サイトというのが多かったのですが、最近はレスポンシブでワンソースで制作することがかなり多くなり、PCで見ている時にはこのリンクを無効にできないかという要望をもらったので、jQueryを使用してPCで見ている時はただの文字列を表示し、スマートフォンで見ている時は電話番号リンクとして表示されるようにします。

まず、電話番号のリンクを表示をするHTMLは以下のように記述をします。

HTML

<p><span class="tel">03-1234-5678</span></p>

上記のようにaは使用せずにspanで記述し、PCで閲覧した場合はただの文字列で表示されるようになります。
スマートフォンの場合はこのような数字の文字列に関しては自動的に電話番号という認識でリンクを設定してくれるというのもあるんですが、例えばiPhoneのSafariは数字の文字列(郵便番号など)であれば意図しない箇所にも自動的にリンクが設定されてしまうことから、それを無効化するために<meta name="format-detection" content="telephone=no">という記述をしている場合が多いと思うので、その場合はやはりPCと同じくただの文字列として表示されます。

※全ての機種を自分の目で確認したわけではないので断言はできませんが、format-detectionの記述があってもAndoridの場合やiPhoneでもブラウザによってリンク設定されてしまう場合もあるようです。

そこで、jQueryを使用して特定のクラスが指定してあるspanを電話番号のリンクが指定されたaに置き換えます。
実装にはjQueryを使用するので予め読み込ませおき、以下のコードをhead内に記述、もしくは外部ファイルに記述して読み込ませます。

jQuery

$(document).ready(function() {
	var ua = navigator.userAgent;
	if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0) {
		$('.tel').each(function() {
			var txt = $(this).text();
			$(this).parent().html($('<a>').attr('href', 'tel:' + txt.replace(/-/g, '')).append(txt + '</a>'));
		});
	}
});

上記コードは、まずユーザーエージェントを使用して閲覧デバイスを判別し、iPhoneやAndoridだった場合はclass="tel"が指定してある要素を電話番号のリンクが設定されたaに置き換えるというものになります。
赤字部分はHTMLで指定するクラスやIDに合わせて任意で変更してください。

上記を記述後にそれぞれのデバイスで確認すると、PCではそのまま数字の文字列として表示されていますが、スマートフォンではspan要素だったものがa要素に変更されるので、クリック(タップ)して電話発信ができるという動きになり、今回サンプルで使用した<p><span class="tel">03-1234-5678</span></p>の場合、下記のような記述に置き換わって表示されます。

HTML

<p><a href="tel:0312345678">03-1234-5678</a></p>

わざわざタグを置き換えなくてもMedia Queriespointer-eventsあたりを使ってCSSのみでそれっぽい動きというのも考えたんですが、pointer-eventsは特にIEのこととか考えるとまだまだ気にせず使える感じではないし、今回は無難にjQueryを使ってタグを置き換える方法を使いました。
上記方法以外でもっとシンプル且つスマートにできる方法とかあれば教えてください。

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。