こちらの記事では、電話番号をクリックで電話を発信させる方法についてサンプルコード付きで分かりやすくまとめています。
CSSやJavaScript(jQuery含み)などを使ったスマホのみ電話発信させる方法など、応用テクニックも紹介してるのでぜひ参考にしてください。
- HTMLとCSSの基本が体系的に学べる
- Webデザインの基本が学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
電話発信するコードの書き方
<a href="tel:000-1234-5678">000-1234-5678</a>電話発信させるにはaタグを使用します。一般的なaタグの使用方法はhref属性に遷移先のURLを設定しますが、電話番号を設定することでクリックした時に電話発信させることができます。
先輩くんaタグ内にimgタグを入れることで、画像をクリックした時に電話発信させることもできるよ！
国際電話に対応させる場合の書き方
<a href="tel:+81-00-1234-5678">000-1234-5678</a>グローバルなサイトの場合、日本以外から電話をかけた場合でも電話発信させる必要があります。
その場合は設定する電話番号の頭の数字を入力せず、『tel:+81』を追記します。
+81は国際電話で日本の番号を表す国番号です。 日本国内での番号表記にするには「+81」を「0」に置き換える必要があるためaタグに設定する電話番号も頭文字を入力しません。
- 080-1234-5678→+81-80-1234-5678
- 03-1234-5678→+81-3-1234-5678
スマホのみ電話発信させる方法
CSSのブレイクポイントを使う
@media(min-width: 768px){
a[href^="tel:"]{
pointer-events: none;
}
}CSSのブレイクポイントで768px以上の場合にのみ、aタグのhref属性にtel:を使用しているものに対しpointer-events: none;を付与する記述をします。
すると、デバイス幅が768px未満には電話発信することができ、768px以上のデバイスでは電話発信ができないようにすることができます。
JavaScriptのブラウザ判定を使う
/*** JavaScript ***/
const phone = document.querySelectorAll('[href^="tel:"]');
if (!navigator.userAgent.match(/iPhone|Android.+Mobile/)) {
for(let i = 0; i < phone.length; i++){
phone[i].addEventListener('click',function(e){
e.preventDefault();
})
}
}
/*** jQuery ***/
const $phone = $('a[href^="tel:"]');
if (!navigator.userAgent.match(/iPhone|Android.+Mobile/)) {
$($phone).on('click',function(e){
e.preventDefault();
})
}JavaScriptやjQueryを使う場合は、ユーザーエージェントでアクセスしてきたデバイスがスマホなのかPCなのかを判定します。
アクセスしてきたデバイスがスマホの場合は、処理を行わずPCでアクセスしてきた場合にのみe.preventDefault()を使ってイベントをキャンセルします。
まとめ
今回は電話番号をクリックで電話を発信させる方法について解説しました。
重要なポイントを忘れないようおさらいを兼ねて下記にまとめました。
- aタグにhref属性に『tel:電話番号』を設定することで電話発信できる
- 国際電話に対応させるには『tel:+81-頭文字を抜いた電話番号』を設定する
- スマホのみ電話発信させるにはCSSまたはJavaScriptを使うことで実現することができる
先輩くん電話発信に関する記事を他にも掲載しているので、気になる方ぜひご覧ください！
