2012の5日目の記事です。href="tel:0120-0000-0000">お問い合わせはこちら</a>というように利用することで、ブラウザ上でタップして電話をかけることができるようになる。これをデスクトップブラウザで実装してしまうと、クリックした時に不明なプロトコルとしてエラーとなってしまう。これが問題となる可能性があるのは、いわゆるレスポンシブ・ウェブデザイン的なアプローチで、モバイルブラウザとデスクトップブラウザでHTMLを一本化してしまうような場合だ。※問題とはいってもデスクトップユーザーが電話番号を見て、クリックして電話をかける、というアクションをするかどうかというのは置いといて。カスタムデータ属性を使ったアプローチ前提として下記のようなマークアップをおこなう。data-tel="0120-8888-8888">ポイントはdata-tel属性。この中にコール先の番号をセットしておく。これをjQueryっぽく書いてみる。});};こんな感じ。data()メソッドは?せっかくカスタムデータ属性をつかっているので、よりjQueryっぽくという意味ではdata()メソッドを使う方法もある。});});が、これには罠がある。data()メソッドを使うと、0からはじまる文字列が数字として扱われるので、今回のような例だと危うい。data-tel="012099999999">お電話</span>ただこれが起きるのはjQuery1.8以前で、1.8からはdata()メソッドをつかっても型は変換されない。実際にこちらのデモ上で、左のパネルからjQueryのバージョンを変えてRunしてみるとわかる。その他、カスタムデータ属性の参照の仕方などについては、こちらも参照するといいかも。考えてみるとDetectionが正直微妙で、本来ならばtel:が有効な端末でっていうのが正しいので、単純にUAとかでみるのは微妙。touchも含まれる。このコードではスマートフォンブラウザのときに実行される前提になってるが、非力なスマートフォンブラウザ環境よりも、むしろデスクトップブラウザで実行されるようなスクリプトの方がいいだろう。href="tel:0120-9999-9999">お電話</a>これを標準とし、デスクトップブラウザのときに下記のようなコードを実行する。});});これも雑な感じではあるが、このようにすれば<a>を<span>に変えることで、リンクを無効化できる。ちなみに一応知らない人がいたら、ということで補足すると、$("a[href^=tel]")は属性セレクタで、href属性がtelからはじまるa要素、というセレクタ。この例ではtel:から始まるものというはブレないので、このようにしてみた。※この属性セレクタの話は、同アドベントカレンダーの別記事として後日書く予定。タグは差し替えず、event.preventDefaultでリンクを無効化しても良いかもしれないが、この場合にはCSSもマウスポインタがリンク時のポインタにならないようにしておきたい。アドベントカレンダーは続く次はハムの人ですね、よろしくおねがいします。SpeakerBY-NC-SA。