JavaScriptでHTMLリンクのクリックトゥコール（tel:）対応を検出する方法

クリックトゥコール（Click-to-Call）とは、Webページ上の電話番号リンクをタップするだけで、そのまま通話を開始できる便利な機能です。この機能を実現するのが「tel:」プロトコルであり、モバイルサイトやレスポンシブデザインのサイトでは欠かせない要素となっています。

tel:プロトコルのサポート状況

現在、「tel:」プロトコルはほぼすべてのモバイルデバイスでサポートされています。具体的には、以下のようなブラウザ・環境が該当します。

• iOS の Safari
• Android 標準ブラウザ / Chrome
• Opera Mini
• Symbian ブラウザなどのレガシー環境

つまり、現代の主要なスマートフォンであれば、特別な処理を加えなくても「tel:」リンクから直接発信できます。

一部のデバイスでのwtai:プロトコルへの置き換え

ただし、古い一部の端末（例：特定のHTC製端末）では、「tel:」ではなく「wtai:」プロトコルを使用する必要がある場合があります。こうしたケースでは、ユーザーエージェントを判定して、リンクのhref属性を動的に書き換えることで対応できます。

if (/(HTC825)/i.test(navigator.userAgent)){
    $("a[href^='tel:']").each(function(){
        this.href = this.href.replace("tel:", "wtai://wp/mc;");
    });
}

コードの解説

このコードでは、まず navigator.userAgent を正規表現で判定し、対象デバイス（HTC825）かどうかを確認しています。該当する場合、ページ内の「tel:」で始まるすべてのアンカータグを走査し、href属性の「tel:」を「wtai://wp/mc;」に置き換えています。これにより、WAP端末でもクリックトゥコールが正しく動作するようになります。

まとめ

現代のモバイル環境では「tel:」プロトコルが広くサポートされているため、特別な対応はほとんど不要です。ただし、レガシーデバイスへの互換性が必要な場合は、上記のようにユーザーエージェント判定とhref属性の書き換えを組み合わせることで、より幅広い端末でクリックトゥコール機能を提供できます。