ここでは、ホームページ作成のスキルを独学で身につける方法をシリーズでご紹介します。今回は番外編としてホームページに載せた自社の電話番号などをスマートフォンでタップした時に、その電話番号に電話をかけることができるように設定する方法をご紹介します。
なお、この記事は「できるだけ分かりやすくシンプルに目的を実現する」をコンセプトとしています。プログラミングの専門家の方からすると、いくらか物足りない気がするかもしれませんがご了承ください。
システムの概要
近年、ホームページをパソコンからではなくスマートフォンから閲覧するユーザーが、ますます増えてきています。スマートフォンでホームページに載っている電話番号をタップした時に、そのまま電話をかけることができれば便利ですよね。
ご存知かもしれませんが、iPhoneやiPadに搭載されているインターネットブラウザーであるsafariにはもともと、ホームページ内にある電話番号らしき文字列を自動的に認識して、タップした時に電話をかけることができる機能が搭載されています。
しかし、スマートフォンのユーザーが必ずしもsafariでページを閲覧するとは限りませんし、電話番号ではない文字列を電話番号として認識してしまうという事態も生じえます。
それで、以下の方法で
- どのブラウザで表示してもスマートフォンであれば、電話をかけることができるようにする。
- パソコンなどスマートフォン以外の端末で表示したときには、従来通りの表示とする。
設定を見ていきましょう。 うまく設定できれば、スマートフォンで電話番号をタップした際に以下のように表示されるはずです。基本的にはコピー＆ペーストで使用できますので、ご活用ください。
手順① safari 搭載の電話番号の自動認識機能を無効化
まず、safari だけで動いてしまう機能を停止させましょう。これで、どのブラウザで閲覧しても動作方法を統一できます。下のコードをHTMLファイル の head 部分に追記しましょう。
<meta name="format-detection" content="telephone=no">
手順② 電話番号にリンクをはる
次に、電話番号をタップした時に電話をかけてくれるように、電話番号を表示させたいHTMLファイル のbody 内のふさわしい場所に以下のコードを張り付けてください。（以下の場合、電話は03-1234-1234にかかります。この番号の部分はご自分の電話番号に書き換えてください）
<span data-action="call" data-tel="0312341234">03-1234-1234</span>
ちなみに、タグで囲まれた 03-1234-1234 の部分は、ページ上に実際に表示される文字列ですので、電話番号以外でもかまいません。例えば、「電話をかける」や、「こちらから電話でご相談承ります」などもよいと思います。
ただ、一点注意していただきたのは、ユーザー側はこの文字列しか見ていないので、表記の仕方によっては「自分は電話をかけるつもりなどないのに、タップしたら電話がかかってしまった」というようにユーザーの意図に反して動いてしまうことにもなりかねません。
表示する文字列はユーザーにとってわかりやすい表示にしましょう。
手順③ JavaScript でスマートフォン使用時のみ動くようにする
最後に、HTMLのhead部分に以下のコードを張り付けてください。これで、完成したファイルをサーバーにアップすれば、スマートフォンで閲覧したときに、ご希望の動作を実現できているはずです。
<script type="text/javascript">
$(function() {
if (!isPhone())
return;
$('span[data-action=call]').each(function() {
var $ele = $(this);
$ele.wrap('<a href="tel:' + $ele.data('tel') + '"></a>');
});
});
function isPhone() {
return (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0);
}
</script>
ちなみに、以上の機能を動かすためにはjQueryが必要です。もし、jQueryを現時点で使用してない場合には、「jQueryとはなんぞや」というのはひとまず置いておいて、以下のコードもHTMLファイルのhead内に張り付けてください。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
まとめ
これまで取り上げた3つの手順で最速で架電（タップすると電話をかけることができる）機能を搭載できます。もちろん、ほかにもいろいろな方法があるようですが、全部を突き詰めていくと泥沼にはまっていきますので、まずはシンプルな方法で目的を達成しましょう。その後、興味があれば他の方法についても調べることができると思います。
方法によっては、ページの読み込み速度などにも影響を与えるようですので、関心のある方はぜひ取り組まれてみてください。