a要素のhref属性にtel:～と設定すると、電話発信することができます。
この機能はスマートフォンでは便利ですが、電話発信ができないパソコンなどの環境ではリンクされていない方がよい場合があります。
ここではJavaScriptを使って、スマートフォンのときには電話発信するリンクにして、それ以外ではテキスト表示のままにする機能を実装してみましょう。
処理の流れ
他のスクリプトの変数に影響しないようにするため、このスクリプトを即時関数で定義します。
ブラウザのユーザーエージェントを取得して、スマートフォン（iPhone, Android）かどうかを判定する関数式を定義します。
querySelectorAll()メソッドを使って、電話番号を内包している要素を取得して、その要素のテキストをa要素で囲んで、innerHTMLプロパティに設定します。
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の解説を参照してください。
STEP2 スマートフォンかどうかを判定する無名関数式を定義
今回はスマートフォンであるかどうかを判定するために、無名関数式で判定する処理を書きます。
※無名関数式については、MDNの解説を参照してください。
無名関数式を宣言
まず、無名関数式isSmartPhoneを宣言します。
var isSmartPhone = function() {
};ユーザーエージェントを取得先について
ユーザーエージェントは、navigatorオブジェクトのuserAgentプロパティから取得できます。
window.navigator.userAgenttoLowerCaseメソッドで小文字に変換
userAgentプロパティのテキストをそのまま使用しても良いのですが、ここでは取得したテキストをtoLowerCaseメソッドですべて英字を小文字にします。
変換したユーザーエージェントのテキストを変数uaに格納します。
var isSmartPhone = function() {
var ua = window.navigator.userAgent.toLowerCase();
}※toLowerCaseメソッドについては、MDNの解説を参照してください。
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の解説を参照してください。
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」に切り替えると、電話番号にリンクが設定されます。
まとめ
今回の実装方法では、電話番号にclass属性の付いたspan要素が必要になりますので、どうしても指定する手間がかかります。
その代わり、必要なところだけを切り替えることができるので、制作者がコントロールしやすいメリットもあります。
要件によっては効率良く機能実装できると思いますので、使ってみてください。
コメント