web-dev-qa-db-ja.com

電話番号をマークアップする方法

HTML文書で電話番号を呼び出し可能なリンクとしてマークアップしたいです。 マイクロフォーマットのアプローチ を読んだことがあります、そしてtel:スキームは標準的なものになるでしょうが、文字通りどこにも実装されていません。

Skypeは、私の知る限りではskype:とcallto:を定義しています。後者はある程度人気があります。私は、他の会社が他の計画を持っているか、あるいはcallto:トレインに飛び乗ったと思います。

できるだけ多くの人々がVoIPソフトウェアを使って電話をかけることができるように、電話番号をマークアップするためのベストプラクティスは何でしょうか。

ボーナス質問：米国の911やドイツの110のような緊急電話番号の合併症について誰かが知っていますか？

乾杯、

更新： Microsoft NetMeetingは、WinXPでcallto:スキームを使用します。 この質問 は、Microsoft Office Communicatorはtel:スキームを処理するがcallto:スキームは処理しないことを示唆しています。レドモンド、素晴らしい！

更新2： 2年半後になりました。それはあなたがその数でやりたいことにゆだねているようです。モバイルの文脈では、tel:がその道です。デスクトップをターゲットにしているのは、ユーザーがより多くのSkypeユーザー（callto:）であるか、Google Voice（tel:）のようなものがインストールされている可能性が高い場合は、あなた次第です。私の個人的な意見は、疑わしいときはtel:を使うことです（@Sidniciousの答えに沿って）。

アップデート3： User @ rybo111は、ChromeのSkypeがその間にtel:バンドワゴンに飛び乗ったことを指摘した。私はこれを検証することはできません。両方のマシンが手元にあるわけではありませんが、それが真実であれば、ついにここで勝者になりました。

                                        tel:
htmlmarkupurl-schemephone-number
445
Boldewyn

tel:スキームは 1990年代後半に使用 であり、2000年初めには RFC 2806 （2004年にはもっと徹底的な{ RFC 3966 で廃止されました）で文書化されました。 改善され続けている 。 iPhoneでtel:をサポートすることは恣意的な決断ではありませんでした。

callto:は、Skypeでサポートされていますが、 は標準的な ではないため、Skypeユーザーを特にターゲットにしていない限り、避けるべきです。

私？私はちょうどあなたのページに正しい形式のtel: URIを含め（ユーザエージェントを詮索することなく）始めて、世界の他の電話が追いつくのを待つでしょう:).

例 ：

<a href="tel:+18475555555">1-847-555-5555</a>
462
s4y

私のテスト結果：

へ電話する：

  • ノキアブラウザ：何も起こらない
  • Google Chrome：電話をかけるためにskypeを実行するように要求する
  • Firefox：番号に電話をかけるプログラムを選択するよう要求する
  • IEの：番号を呼び出すためにスカイプを実行するように求めます

電話番号：

  • ノキアブラウザ：働く
  • Google Chrome：何も起こりません
  • Firefox： "FirefoxはこのURLを開く方法を知りません"
  • IE：URLが見つかりませんでした
73
Murat

最善の策は、すべての携帯電話で機能するtel：から始めることです。

次に、このコードを入力します。これはデスクトップ上でリンクがクリックされたときにのみ実行されます。

私は http://detectmobilebrowsers.com/ を使用してモバイルブラウザを検出します、あなたはあなたが好きな方法を使用することができます

if (!jQuery.browser.mobile) {
    jQuery('body').on('click', 'a[href^="tel:"]', function() {
            jQuery(this).attr('href', 
                jQuery(this).attr('href').replace(/^tel:/, 'callto:'));
    });
}

だから基本的にあなたはすべてのあなたの基地をカバーします。

tel：すべての電話で番号を使ってダイヤラを開くように動作します。

callto：Firefox、ChromeからSkypeに接続するためにあなたのコンピュータ上で動作します。

44
mordy

予想されるように、WebKitのtel:のサポートは、Androidモバイルブラウザにも適用されます - FYI

21
rymo

私は「歴史的な」目的のためにこの答えを取っていますが、もうそれをお勧めしません。上の@Sidniciousの答えと私のアップデート2を見てください。

それはcalltoとtelの間の引き分けのように見えるので、私はあなたの意見が光の道に戻ってくることを期待して可能な解決策を投げたいです;-)

ほとんどのデスクトップクライアントがそれを処理するので、callto:を使用します。

<a href="callto:0123456789">call me</a>

次に、クライアントがiPhoneの場合は、リンクを置き換えます。

window.onload = function () {
  if (navigator.userAgent.match (/iPhone/i)) {
    var a = document.getElementsByTagName ("a");
    for (var i = 0; i < a.length; i++) {
      if (a[i].getAttribute ('href').search (/callto:/i) === 0) {
        a[i].setAttribute ('href', a[i].getAttribute ('href').replace (/^callto:/, "tel:"));
      }
    }
  }
};

この解決策に対する異議はありますか？できればtel:から始めるべきですか？

10
Boldewyn

Mobile Safari（iPhoneとiPod Touch）はtel:スキームを使います。

iPhoneのWebページから電話番号をダイヤルするにはどうすればよいですか。

8
Jan Aagaard

これは私のために働いた：

1.規格準拠のリンクを作成します。

         <a href="tel:1500100900">

2. Skypeの場合、モバイルブラウザが検出されない場合は交換します。

$("a.phone")
    .each(function()
{ 
  this.href = this.href.replace(/^tel/, 
     "callto");
});

クラスを介して置き換えるリンクを選択する方が効率的です。もちろんそれは.phoneクラスを持つアンカーに対してのみ機能します。

デスクトップブラウザを検出したときにだけトリガされるように、私はそれを関数if( !isMobile() ) { ...に入れました。しかし、これはおそらく時代遅れです...

function isMobile() {
    return (
        ( navigator.userAgent.indexOf( "iPhone" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "iPod" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "iPad" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "Android" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "webOS" ) > -1 )
    );
}
3
devein

RFC3966 は電話番号のためのIETF標準URI、すなわち「tel：」URIを定義します。それが標準です。 'callto：'を指定する同じような標準はありません。これは、プラットフォーム上のSkypeがURIハンドラーを登録してサポートできるようにするための特定の規則です。

3
Leroy Jenkins

私はtel:を使うでしょう（推奨）。しかし、より良いフォールバック/エラーページを表示しないようにするには、（jqueryを使って）このようなものを使います。

// enhance tel-links
$("a[href^='tel:']").each(function() {
    var target = "call-" + this.href.replace(/[^a-z0-9]*/gi, "");
    var link = this;

    // load in iframe to supress potential errors when protocol is not available
    $("body").append("<iframe name=\"" + target + "\" style=\"display: none\"></iframe>");
    link.target = target;

    // replace tel with callto on desktop browsers for skype fallback
    if (!navigator.userAgent.match(/(mobile)/gi)) {
        link.href = link.href.replace(/^tel:/, "callto:");
    }
});

前提は、userAgent-stringにモバイルスタンプがあるモバイルブラウザはtel:プロトコルをサポートしているということです。それ以外の場合は、リンクをcallto:プロトコルに置き換えて、利用可能な場合はSkypeにフォールバックします。

サポートされていないプロトコルのエラーページを抑制するために、リンクは新しい隠されたiframeをターゲットにしています。

残念ながら、URLがiframeに正常にロードされたかどうかを確認することは不可能です。エラーイベントは発生していないようです。

2
jonas_jonas

私は自分のプロジェクトにtel:を使いました。

それは私のソニーエリクソンのスマートフォンのChrome、Firefox、IE9と8、Chromeモバイルとモバイルブラウザで動作しました。

しかし、callto:はモバイルブラウザでは動作しませんでした。

2
fuma

callto:は（Skype設定で設定された）skypeによってデフォルトでサポートされています、そして他の人もそれをサポートしているので、私はcallto:よりskype:を使うことを勧めます。

1
awe

AppleはMobile Safariのドキュメントでtel:を推奨していますが、現在（iOS 4.3）は同じようにcallto:を受け入れています。したがって、SkypeとiPhoneの両方で動作するため、汎用のWebサイトでcallto:を使用することをお勧めします。また、Android電話でも動作することを期待しています。

更新（2013年6月）

これは、Webページに何を提供するかを決定する問題です。私のウェブサイトでは、tel:とcallto:の両方のリンク（後者はSkype用としてラベル付けされています）を提供します。これは、Macのデスクトップブラウザーはtel:リンクを使用せず、モバイルAndroidはcallto:リンクを使用しないためです。 Googleトークプラグインを使用するGoogle Chromeでも、tel:リンクに応答しません。それでも、誰かがtel:リンクを自分のコンピューターで動作させるのに苦労した場合に備えて、デスクトップで両方のリンクを提供することを好みます。

サイトのデザインでリンクを1つだけ提供するように指定されている場合は、デスクトップブラウザーでtel:に変更しようとするcallto:リンクを使用します。

1
Old Pro

JQueryを使用して、ページ上のすべての米国の電話番号を適切なcallto:またはtel:スキームに置き換えます。

// create a hidden iframe to receive failed schemes
$('body').append('<iframe name="blackhole" style="display:none"></iframe>');

// decide which scheme to use
var scheme = (navigator.userAgent.match(/mobile/gi) ? 'tel:' : 'callto:');

// replace all on the page
$('article').each(function (i, article) {
    findAndReplaceDOMText(article, {
        find:/\b(\d\d\d-\d\d\d-\d\d\d\d)\b/g,
        replace:function (portion) {
            var a = document.createElement('a');
            a.className = 'telephone';
            a.href = scheme + portion.text.replace(/\D/g, '');
            a.textContent = portion.text;
            a.target = 'blackhole';
            return a;
        }
    });
});

アイデアをくれた@jonas_jonasに感謝します。優れた findAndReplaceDOMText関数 が必要です。

0
bishop