スマホページで画像バナーをタップで、電話発信させる方法
リンクや画像をタップするだけで電話をかけることができる機能がある。
SafariやSkypeをインストールしている場合、普通の電話番号をリンクにする機能がある。
この機能には色々と問題点があるので、それをクリアしていこう。
従来の方法の問題点
01-0000-0000
と、リンクにしておくと、タップ（クリックすると）
こんな感じのダイアログが出てきて通話ができる機能だ。
しかし、このリンクをPCでクリックしてしまうと、
こんな感じのエラーが出てきて嫌な感じになる。
これを解決する方法はいくつがあるが、iPhoneだけでなくAndroidにも対応する方法を紹介する。
<span>を使って、PCの時にリンクにならないようにする方法
まず、HTMLファイルの電話のリンクにしたい部分を
と記述する。
これは、span なので、当然リンクにならない。PCでクリックしても何も起こらない。
スマホの時にこれをリンクに書き換える必要があるので、
jsファイルに
と書いておく。
分からなければ、ここから右クリックして「リンク先を保存(言葉違う可能性あり)」tel-link.jsをダウンロードしよう。
あと、jQueryが必要なので。こちらもダウンロードしておこう。既に導入済みの場合は新たにアップロードする必用はない。
jquery-1.11.3.min.js
HTMLファイルにjsファイルを読み込ませる記述
という感じで、と記述したHTMLファイルのheadの間に記述。
jsファイルをアップロードして搭載
jquery-1.11.3.min.js
tel-link.js
HTMLファイル
上記3つをサーバーにアップロードする。
完了。