エンジニアの副業は週1からでも可能？副業の例や探し方も解説
- ITエンジニア
- 副業
【超簡単】スマホサイトの電話番号をタップするだけで直接電話できる!? タップコールの導入方法を解説【JavaScript】
インターネットが普及し、やり取りの多くがメールやSNSで完結する昨今。簡単な業務連絡やユーザーのサポートまでやり取りのほとんどを、ディスプレイ越しで行なうようになりました。
とはいえ電話を使ったサポートも、飲食や不動産といった業界ではまだまだ需要があります。
そこで今回は、スマホサイトに掲載されている電話番号をタップするだけで電話問い合わせができる「タップコール」の導入方法をご紹介します。スマホサイトからスムーズに電話をかけられる仕組みを作りたい方は、ぜひ本記事を読み導入を検討してください。
電話番号の文字列をタップするだけで電話をかけられるようにする方法
やり方はいたって簡単です。
使用するのはHTMLファイル。追加するのは以下の一文です。
✅index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タップコール</title>
</head>
<body>
<a href="tel:0000000000">0000000000</a>
</body>
</html>
ここでのポイントは、aタグで電話番号にハイパーリンクを付与するとき、tel:～で続ける形で表記するところ。通常はaタグでハイパーリンクを付与する際、「<a href=”URL”>ここに文字を入れる</a>」という形で表記しますが、今回は数字列が電話番号の数字であるということをプログラムに認識させるため、aタグ内でtel:という表記を使います。
実際に実装するとこのとおり。電話番号をタップするだけで電話アプリを起動できました。
スマホ閲覧時にのみ電話をかけられるようにする方法
ひととおり、電話番号をタップするだけで電話をかけられるように調整できました。しかしこのままだと、PC画面からでも電話をかけられる状態になってしまいます。
PCからも電話をかけられるようにしておいたほうが便利に思えるかもしれませんが、ブラウザによってはエラーが起こってしまい、読者を混乱させてしまう可能性があります。
以下でスマートフォンからのみ電話をかけられるようにする方法をご紹介します。
実際の作り方
※コードを書き直す必要があるので、先ほどHTMLファイルに書いたコードは消しましょう
使用するのは「ユーザーエージェント」という技術。ユーザーエージェントを使うことで、特定のデバイス（スマホ／PC／タブレットなど）やブラウザごとにプログラムの動きを割り振れます。
今回はユーザーエージェントを使って、スマートフォンでWebサイトを閲覧している時だけ電話をコールできるように設定を調整します。
手順は以下のとおり。
- HTMLファイル（index.html）に電話番号とJavaScriptファイルの内容を読み込むのに必要なフック（class）を割り振る。
- JavaScriptファイル（script.js）に「iPhone／iPod／Androidにだけ」「フックとなるclassに電話番号を挿入する」という命令をそれぞれ記述する。
✅index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タップコール</title>
</head>
<body>
<span class="telep">000-0000-0000</span>
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
http://script.js
</body>
</html>
まずはHTMLファイルで電話番号とJavaScriptファイルを読み込むのに必要なフック（ここでは「telep」）を割り振ります。これでHTMLファイルは完成です。
✅script.js
(function() {
jQuery(document).ready(function($) {
//スマホ（iPhone/Android/iPod）閲覧時にTEL番号のリンクが挿入されるようにする(タブレット閲覧時はPC同様にするため除外)
var device = window.navigator.userAgent;
if((device.indexOf('iPhone') > 0 && device.indexOf('iPad') == -1) || device.indexOf('iPod') > 0 || device.indexOf('Android') > 0){
$(".telep").wrap('<a href="tel:00000000000"></a>');
}
});
次にJavaScriptファイルで「iPhone／iPod／Androidにだけ」「フックとなるclass（telep）に電話番号を挿入する」という命令をそれぞれ記述します。これでJavaScriptファイルは完成です。
ちなみにここでポイントとなるのが、プログラムの割り振り方。
プログラム上で電話をコールするかしないかを判断させるため、数字をフックとしてプログラムの内容をそれぞれ割り振っていきます。処理の内容としては「0」と表記したものは「電話番号をタップすることでコールするプログラムを実行」し、「-1」と表記したものは「電話番号をタップしてもコールするプログラムは実行しない」というもの。
これにより「0」と表記されたスマートフォン上では、電話番号をタップすることで電話をコールでき、逆に「-1」と表記されたタブレットやPC上では、電話番号をタップしても何も変化は起こらないという状況を作れます。
実際に実装するとこの通り。PC画面上ではリンクが消えましたね。
今回の例以外でも、ユーザーエージェントの技術を使えばブラウザごとにプログラムの実行を操作できます。「プログラムの処理をデバイスやブラウザごとに分別して設定したい！」というときはぜひ使ってみてください。
おわりに
今回はスマホサイトの電話番号をタップするだけで直接電話をかけられる「タップコール」の導入・実装方法について解説しました。
簡単に実装できるにもかかわらず、コーポレートサイトのお問い合わせページ内やペライチのLP（ランディングページ）にも実装できるなど、かゆいところに手が届く優れモノです。
電話でのお問い合わせをご希望されるお客様のために、より良いUI実装を考えている方はぜひ導入をご検討ください。
人気のフリーランス・副業求人
IoTの開発プロジェクト！ヘルスケア・医療データの処理、分析、解析、データマイニングを得意とするインフラエンジニア募集！
- #スタートアップ
職種：バックエンドエンジニア
時給：2,500円 〜
働き方：どちらでも可
エリア：東京都
Web制作をリードするフロントエンド構築、WordPress実装が可能なエンジニア募集！
職種：フロントエンドエンジニア
時給：2,500円 〜
働き方：リモート希望
エリア：東京都
【リモート可】音楽、エンタメ × ITでイノベーションを！API開発をするサーバーサイドエンジニア募集！
- #土日週末OK
- #急募
職種：バックエンドエンジニア
時給：4,000円 〜
働き方：どちらでも可
エリア：東京都
サイト運営が趣味なWeb制作系ライターとして活動中。最近はライター業と並行してサイト運営・時報の拡張機能の開発をやっています。
