スマホのみ電話番号をリンクにするJavaScript

2019年11月25日2021年11月27日

スマホのみ電話番号をリンクにするJavaScriptの書き方の紹介です。PCページに電話リンクがあると邪魔になるケースのほうが多いと思います。

電話リンクを付けていても、PC時（スマホ以外）では無効化されるようにしておくと、ちょっとだけ親切なサイトになるかもしれません。

はにわまん

ユーザーエージェントで判定しています！

ユーザーエージェントをチェックして条件を分ける

JavaScriptではnavigator.userAgentでユーザーエージェントを取得することが可能です。この値によって、AndroindもしくはiPhoneからアクセスされているかどうかを判定して電話にリンクを設置するという方法になります。

Androidの場合

let ua = navigator.userAgent;
if (ua.indexOf("Android") >= 0) {
	console.log( 'Androind' );
}

Androind端末からconsole.log( navigator.userAgent );すると、以下のような値になります。

Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Mobile Safari/537.36

上の文字列の中に「Android」の文字があるかどうかをindexOf("Android")で調べています。文字列が見つからなければ-1となり、見つかれば見つかった位置の数字を返すため、値が0以上であれば「Android」という文字が存在するという判定です。

iPhoneの場合

iPhoneの場合もAndroindと同様です。ユーザーエージェントから「iPhone」の文字があるかどうかの判定を行います。

let ua = navigator.userAgent;
if (ua.indexOf("iPhone") >= 0) {
	console.log( 'iPhoneの場合' );
}

iPhone端末からconsole.log( navigator.userAgent );すると、以下のような値になります。

Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1

上の文字列の中に「iPhone」の文字があるかどうかをindexOf("Android")で調べています。文字列が見つからなければ-1となり、見つかれば見つかった位置の数字を返すため、値が0以上であれば「iPhone」という文字が存在するという判定です。

iPadの場合

AndroindとiPhoneの説明を見た方なら、もはや説明不要かと思いますが、一応iPadの場合も見てみましょう。

let ua = navigator.userAgent;
if (ua.indexOf("iPad") >= 0 ) {
	console.log( 'iPadの場合' );
}

iPadでアクセスした時のユーザーエージェントは以下のような感じで、「iPad」の文字を探しています。

Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1

AndroidとiPhoneだけ電話リンクを有効にする

HTML上では、電話リンク（aタグ）がついている状態です。なので正確には、AndroidとiPhoneだけ電話リンクを有効にするというよりは、AndroidとiPhone以外では電話リンクを無効にする、という表現の正しいかもしれません…

let ua = navigator.userAgent;
if (ua.indexOf("iPhone") === -1 && ua.indexOf("Android") === -1) {
	jQuery('a[href^="tel:"]')
		.css("cursor", "default")
		.on("click", function(e) {
			e.preventDefault();
		});
}

条件判定については既に解説しました。中の処理としては、すべての電話リンク（a[href^="tel:"]）を対象に、まずはカーソルを標準のものに変更してクリックイベント無効（クリックしても反応させない）という処理を行っています。

とりあえず、これでクリックしても反応はしなくなりますが、もし他にクリック対象っぽい装飾がCSSでされている場合は、適宜無効にしてあげる必要はあるかもしれません。

（おまけ）ブラウザ判定も可能

スマホ時のみ電話リンクを機能させる処理は以上になるのですが、ユーザーエージェントの値を取得できるとブラウザの判定もできるようになるので、こちらもついでに見ていきましょう！

まずは、それぞれのブラウザで取得できるユーザーエージェントの値は以下のような感じです。

Chrome	Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36
Firefox	Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:69.0) Gecko/20100101 Firefox/69.0
Safari	Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.2 Safari/605.1.15
IE11	Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Tablet PC 2.0; rv:11.0) like Gecko
Edge	Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18362

ブラウザ判定をまとめると

先ほどの結果を元にブラウザ判定をまとめると、以下のような感じです。ブラウザごとに微調整を加えたい時は以下の判定を使って調整することもできます。

let ua = navigator.userAgent;
if (ua.indexOf("Edge") > 0) {
	console.log( 'Edgeの場合' );
} else if (ua.indexOf("Chrome") > 0) {
	console.log( 'Chromeの場合' );
} else if (ua.indexOf("Safari") > 0) {
	console.log( 'Safariの場合' );
} else if (ua.indexOf("Firefox") > 0) {
	console.log( 'Firefoxの場合' );
} else if (ua.indexOf("Trident/7") > 0) {
	console.log( 'IE11の場合' );
} else {
	console.log( 'その他のブラウザ' );
}