スマートフォン向けに電話番号をリンクにJavaScriptで変更しよう

2021 8/10

2021.08.06 2021.08.10

a要素のhref属性にtel:～と設定すると、電話発信することができます。
この機能はスマートフォンでは便利ですが、電話発信ができないパソコンなどの環境ではリンクされていない方がよい場合があります。

ここではJavaScriptを使って、スマートフォンのときには電話発信するリンクにして、それ以外ではテキスト表示のままにする機能を実装してみましょう。

処理の流れ

STEP

即時関数を定義

他のスクリプトの変数に影響しないようにするため、このスクリプトを即時関数で定義します。

STEP

スマートフォンかどうかを判定する無名関数式を定義

ブラウザのユーザーエージェントを取得して、スマートフォン（iPhone, Android）かどうかを判定する関数式を定義します。

STEP

対象となる要素を取得して、a要素を入れる関数を定義

querySelectorAll()メソッドを使って、電話番号を内包している要素を取得して、その要素のテキストをa要素で囲んで、innerHTMLプロパティに設定します。

STEP

HTMLの読み込みが完了してから処理を実行

addEventListener()メソッドで、DOMContentLoadedイベントが通知されたときに処理が実行されるようにします。

HTMLについて

今回、電話発信したい電話番号はspan要素でマークアップして、JavaScriptで取得しやすくするため、class属性に.telLinkを設定します。

以下のようなHTMLで動作確認します。

<ul>
  <li><span class="telLink">086-255-1101</span></li>
  <li><span class="telLink">086-255-1101</span></li>
  <li><span class="telLink">086-255-1101</span></li>
</ul>

<p>お問い合わせは<span class="telLink">086-255-1101</span>までお電話ください。</p>

処理の説明

それでは、ステップごとに説明していきます。

STEP1 即時関数を定義

まず、他のスクリプトの変数に影響しないようにするため、このスクリプトを即時関数で定義します。

(function () {

})();

即時関数については、MDNの解説を参照してください。

MDN Web Docs

IIFE (即時実行関数式) – MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN IIFE (Immediately Invoked Function Expression; 即時実行関数式) は定義されるとすぐに実行される JavaScript の関数です。

STEP2 スマートフォンかどうかを判定する無名関数式を定義

今回はスマートフォンであるかどうかを判定するために、無名関数式で判定する処理を書きます。

※無名関数式については、MDNの解説を参照してください。

MDN Web Docs

関数式 – JavaScript | MDN function キーワードは、式の中で関数を定義するために使用されます。

無名関数式を宣言

まず、無名関数式isSmartPhoneを宣言します。

var isSmartPhone = function() {
};

ユーザーエージェントを取得先について

ユーザーエージェントは、navigatorオブジェクトのuserAgentプロパティから取得できます。

window.navigator.userAgent

toLowerCaseメソッドで小文字に変換

userAgentプロパティのテキストをそのまま使用しても良いのですが、ここでは取得したテキストをtoLowerCaseメソッドですべて英字を小文字にします。
変換したユーザーエージェントのテキストを変数uaに格納します。

var isSmartPhone = function() {
  var ua = window.navigator.userAgent.toLowerCase();
}

※toLowerCaseメソッドについては、MDNの解説を参照してください。

MDN Web Docs

String.prototype.toLowerCase() – JavaScript | MDN toLowerCase() メソッドは、呼び出す文字列の値を小文字に変換して返します。

matchメソッドでスマートフォンかどうか判定する

次にmatch()メソッドを使って、ユーザーエージェントの中に、iPhoneやAndroidを表すテキストが含まれているか判定します。

変数uaに格納したテキストの中にiPhoneを表すiphone、または、Androidスマートフォンを表すandroidとmobileが含まれていれば、matchメソッドはtrueを返します。

ifでmatchメソッドの返り値を判定して、trueならreturnでtrueを返し、falseならreturnでfalseを返して、isSmartPhoneを判定用のメソッドにします。

var isSmartPhone = function() {
  var ua = window.navigator.userAgent.toLowerCase();

  if (ua.match(/iphone|Android.+Mobile/)) {
    return true;
  } else {
    return false;
  }
};

※matchメソッドについては、MDNの解説を参照してください。

MDN Web Docs

String.prototype.match() – JavaScript | MDN match() は String 値のメソッドで、この文字列の正規表現に対する照合結果を受け取ります。

STEP3 対象となる要素を取得して、a要素を入れる関数を定義

関数を定義

まず、関数を定義します。
ここでは、関数名をsetTelLinkとします。

function setTelLink() {
}

querySelectorAll()メソッドで要素を取得

querySelectorAll()メソッドを使って、リンクを設定したい要素を取得します。
要素はclass属性でtelLinkを設定していますので、これを目印に取得します。

querySelectorAll()メソッドで取得した場合、NodeListオブジェクトとして受け取れるので、itemsに格納します。

function setTelLink() {
  var items = document.querySelectorAll('.telLink');
}

取得した要素をループ処理

NodeListオブジェクトは、配列のようにforを使って順次処理ができます。
itemsの各要素を順番に処理していきます。

コードが書きやすいように、ループ処理の中でitemを宣言して、itemsの要素を格納します。

function setTelLink() {
  var items = document.querySelectorAll('.telLink');

  for (var i = 0; i < items.length; i += 1) {
    var item = items[i];
  }
}

要素のテキストをa要素で囲む

textContentプロパティで要素のテキスト取得して、a要素となる文字列を組み立てます。

'<a href="tel:' + item.textContent + '">' + item.textContent + '</a>';

組み立てた文字列をinnerHTMLプロパティに設定して、文字列をa要素にします。

item.innerHTML = '<a href="tel:' + item.textContent + '">' + item.textContent + '</a>';

ループ処理に追加すると以下のようになります。

function setTelLink() {
  var items = document.querySelectorAll('.telLink');

  for (var i = 0; i < items.length; i += 1) {
    var item = items[i];
    item.innerHTML = '<a href="tel:' + item.textContent + '">' + item.textContent + '</a>';
  }
}

スマートフォンのときだけ処理を実行するようにする

前述のループ処理だと、スマートフォン以外のときも処理が実行されて、電話番号にリンクが設定されてしまいます。
そこでif文を追加して、作成したisSmartPhoneでスマートフォンのときだけループ処理が実行されるようにします。

function setTelLink() {
  var items = document.querySelectorAll('.telLink');

  if (isSmartPhone()) {
    for (var i = 0; i < items.length; i += 1) {
      var item = items[i];
      item.innerHTML = '<a href="tel:' + item.textContent + '">' + item.textContent + '</a>';
    }
  }
}

STEP4 HTMLの読み込みが完了してから処理を開始

addEventListener()メソッドで、HTMLが読み込み完了したときに処理が実行されるようにします。

document.addEventListener('DOMContentLoaded', setTelLink, false);

実行結果

完成したJavaScriptのコードは以下のようになります。

(function () {

  var isSmartPhone = function() {
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/iphone|Android.+Mobile/)) {
      return true;
    } else {
      return false;
    }
  };

  function setTelLink() {
    var items = document.querySelectorAll('.telLink');

    if (isSmartPhone()) {
      for (var i = 0; i < items.length; i += 1) {
        var item = items[i];
        item.innerHTML = '<a href="tel:' + item.textContent + '">' + item.textContent + '</a>';
      }
    }
  }

  document.addEventListener('DOMContentLoaded', setTelLink, false);

})();

このコードを実行すると、スマートフォンのときにはリンクが設定されるようになります。

以下はFirefoxの開発ツールで動作確認をしている様子です。
シミュレーターで「iPhone」に切り替えると、電話番号にリンクが設定されます。