Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

Click to Call

電話機能を備えた端末では、ユーザーは広告に表示された電話番号をタップするだけで、簡単に広告主に電話をかけることができます。この機能は一般に Click to Call 呼ばれます。

TL;DR

  • tel: スキームを使用して、すべての電話番号にハイパーリンクを設定します。
  • 必ず国際電話番号の形式を使用します。

電話番号にリンクを設定して Click to Call 機能を有効にする

最新のモバイル ブラウザの多くは、電話番号を自動的に検出してリンクに変換しますが、この処理を直接コードで行うことをお勧めします。手動で各電話番号にタグを付けると、確実に電話番号に対して Click to Call 機能を有効にすることができ、サイトに合ったスタイル設定が可能になります。

電話番号をリンクとして指定するには、tel: スキームを使用します。構文は単純です。

NIST Telephone Time-of-Day Service 
<a href="tel:+1-303-499-7111">+1 (303) 499-7111</a>

この構文はブラウザ上で次のように表示されます。

NIST Telephone Time-of-Day Service +1 (303) 499-7111

Click to Call の例

通常、電話機能を備えた端末では、実際に発信する前に確認画面が表示されます。この仕組みにより、ユーザーが誤って高額な長距離通話やプレミアム電話番号に発信をすることを防いでいます。端末が電話機能をサポートしていない場合、メニューが表示されて、ブラウザが数字をどのように処理するかをユーザーが選択できるようになっています。

音声通話に対応していないデスクトップ ブラウザでは、Google Voice や Microsoft Communicator など、コンピュータのデフォルトの電話アプリを起動します。

国際電話の形式を使用する

電話番号は、必ず国際電話番号の形式に従って、プラス記号(+)、国コード、エリアコード、番号の順に記載してください。 必須ではありませんが、番号の各セグメントをハイフン(-)で区切り、読みやすく、自動検出を容易にすることをお勧めします。

ハイフンで区切られた国際電話の形式を使用すると、ユーザーが数百メートル離れているときでも数千キロメートル離れているときでも、発信場所にかかわらず電話がつながります。

必要に応じて自動検出を無効にする

最新のモバイル ブラウザは、電話番号を自動的に検出して Click to Call 機能を有効にします。 Mobile Safari は電話番号をリンクに自動的に変換し、関連付けられているハイパーリンクのスタイルにします。 Chrome for Android では、自動的に電話番号を検出して Click to Call 機能を有効にしますが、電話番号へのハイパーリンク設定や、特別なスタイル設定を行うことはありません。

Mobile Safari で自動的に電話番号を検出しないようにするには、ページの先頭に次のメタタグを追加します。

<meta name="format-detection" content="telephone=no">

その他の Click to Call 機能

tel: スキーマに加えて、最近のモバイル ブラウザの一部は、sms:mms: スキーマもサポートしています。ただし、サポートに一貫性はなく、メッセージ本文の設定などの一部の機能が動作しない場合があります。