Q&A
ありがとうございます。
ユーザーエージェントという言葉を始めて聞きました。
なのでcss3のメディアクエリで絞ろうかと思います。
ビジョン
携帯（ipone,android）からは<a tel>をクリックして使用できるようにしたい。
それ以外の機種（pcなど）からはクリックさせたくない。
現状
携帯から発信できて、
pcでクリックするとアプリ（スカイプ、もしくはそれ以外）を開こうとする。
ソースコード
javascript
1<head> 2<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 3<script> 4var ua = navigator.userAgent.toLowerCase(); 5var isMobile = /iphone/.test(ua)||/android(.+)?mobile/.test(ua); 6if (!isMobile) { 7 $('a[href^="tel:"]').on('click', function(e) { 8 e.preventDefault(); 9 }); 10} 11</script> 12</head>
<a href="tel:0000000000">0000-00-0000</a>
参考にしたサイト
「qiita」
質問
どこがおかしいですか？
ec-cube3で使用します。
ちなみにサーバーはさくらです。
どうかお願いします。
追記
問題になっているのはこれです。
このポップアップが開いてＰＣ上の他のアプリを起動しようとするのが嫌なので、正確には今のＰＣではスカイプとかの前ですね。
回答2件
0
ブラウザにSkypeのアドオンとかエクステンションを入れていると、WebサイトやGoogleの検索結果の電話番号が勝手にSkype用の起動ボタンに置換されるみたいです。(推測するに、この現象なのかなと)
なので、それを防ぐには↓こいつを<head></head>内に入れればよいみたいです。
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />もしくは、ハイフン入れても防げるみたいです。
※こちらで検証はしていないのであくまで参考情報としてご覧ください。
※もし利用する場合は、スマホにも適用されるので出し分けの工夫が必要かと思います。
あと、上記以外の方法としては、いっそのこと置換してしまう！(ご提示のリンク先の意向を無視してしまいますが。。)
var ua = navigator.userAgent.toLowerCase(); var isMobile = /iphone/.test(ua)||/android(.+)?mobile/.test(ua); if (!isMobile) { $('a[href^="tel:"]').replaceWith(function() { $(this).replaceWith("<span>" + $(this).text() + "</span>"); }); }
投稿2016/04/08 03:49
総合スコア349
0
ベストアンサー
ユーザーエージェントを使う方法は実用的ではありません
以下の方法を使った方法のほうがよろしいかと…
キャリアを使う方法
何らかの方法でキャリア(すべて)で振り分ければ(キャリアのどれかに当てはまるか当てはまらないかで判断)分けれるのでは？
ファイルを二つ作る必要がありますが。
追記
方法はphp .htaccess
サイズで判断
サイズによって出すか出さないかを決める
投稿2016/04/08 02:45
編集2016/04/08 02:52
退会済みユーザー
総合スコア0
「ユーザーエージェントを判別」とqiita.com/shouchida/items/a057a869003e4e2eb009には書いてあったので
> ユーザーエージェントを判別し、スマートフォン端末以外の場合には tel: リンククリック時のイベントを無効化します。
確かに書いてありました。
すみません、読み飛ばしていました。
yamk4054 さん
横から失礼します。
自分の運営しているサイトで、ユーザエージェントを元に振り分けを行っている箇所があるため、気になりコメントしております。
ユーザーエージェントを使う方法が実用的出ない理由がよくわからないのですが、どのような点で実用的でないのでしょうか？
te2jiさん
遅すぎてすみません。気付きませんでした。忘れてしまっているかもしれませんが
ユーザーエージェントはたまに違うことがあるためです。(ほとんどが開発者ですが)
PCのなかでの振り分けはどうしようもないのですが、
キャリア・サイズはモバイルの場合、違うことがないので確実だということです。
こちらは別で質問を立てました。
https://teratail.com/questions/31825
頂いた回答から、実用上の問題はないと判断して、自サイトではUAでの判別で振り分けることを継続しています。
こちらの質問の場合、UAの間違いが開発者に対してのものであれば、実用的な振り分けになると思います。
また、画面サイズでの判別は、iPhone と iPad の判別が難しくなるため、逆に現実的ではない気がします。
キャリアに関しては、格安SIMの普及やWi-fi接続、逆にPCからモバイル回線を使うテザリングがあるため、こちらも実用的ではない気がします。
これらに対して何かうまい方法があるのでしょうか？
よろしくお願いします。
iphoneとipadはほとんど区別はいらないのでは？
それぞれがダメなところがあるのであれば両方使えばいいのでは?
<a tel> なので必須かと。
二度目ですが、それぞれがダメなところがあるのであれば両方使えばいいのでは?
両方というのはなにとなにですか？
UAでの識別を主とするということでしょうか？
複数の識別を行えば良いということです
・キャリアによる判断 → 実用的ではない
・画面サイズでの判断 → 実用的ではない
と記述したとおり、複数使うメリットが見いだせないのですが、どのような点で複数使う意味があるのでしょうか？UAのみの選定が一番実用的に思えます。
問題は一部ですよね?(´･ω･`)
ちょっと理解できないのですが、複数使う意味があるということですね？
その辺りを教えていただきたいのですが。
ならばこのことは気にしなければいいのでは？
makoto-nさん、騒がしくてすみません。
いいえ私も勉強になりました。
今までのやり取りで何もわからないのですが、私の理解は以下のとおりです。
・UAのみ
UA偽装に対して有効でない。ただし、一般的には十分実用的。意図どおりに表示されないのは、開発者等のUAを偽装してくるアクセスのみ。iPhone、iPadの区別は可能であるが、android等のタブレットを判別するのは難しそう。
・UA＋画面サイズ
実用性においてUAでの振り分け以上の精度は得られない。ただし、画面サイズの細かいフィルタにより、機種判定をより厳密化できるかも？タブレットの判定も可能かも。
・UA＋キャリア
キャリア判定=通信するIPアドレスで振り分ける方法の前提で、wifi経由のアクセスをフィルタしてしまうので、スマホでもwifi経由だと反応しなくなり、実用性に問題が発生する。
・画面サイズ＋キャリア
wifi経由アクセスの問題が残る。
・UA＋画面サイズ＋キャリア
wifi経由アクセスの問題が残る。
＊キャリア判定のみは今の時代にあっておらず、実用的ではない。
＊画面サイズのみの場合、調べてみると iPhone、iPad の判別は可能そう。ただし、android等が絡むと、やはり電話判別は無理っぽい。
UAのみ、または UA ＋ 画面サイズでの判定が現実的な案になるかと理解しているのですが、UA利用が実用的でないという判断には至りません。
どのようなアクセスを想定して、実用的ではないと判断しているのでしょうか？
あとUA偽装プラグイン利用者は開発者とは完全には言い切れません
Custom User-Agent Listの場合ユーザー数が約1,130,000(世界)人いる中でどのくらい開発者かはわかりませんが開発者以外もいるでしょう
tel: に限って言うなら PC とスマホを判別しなければならない理由はありません。PC でも使える環境はあります。それを切り捨てるのは良いデザインとは言えません。使えない PC でクリックしても何の不利益もありません。
見た目の問題なら画面サイズ一択でしょう。
偽装した UA に対応する必要はありません。むしろ騙された方が双方にとって利益となります。
UA のうち、自らがモバイルであると知らせたいものは「mobile」などの文字が含まれています。
そうでないものは PC として扱って欲しいと言う意図があります。
> Zuishin さん
<a tel:> の使用可否の判定って、なんかイイ方法ありますかね？
maisumakun さんから「Feature Detection」をするとイイとアドバイスもらってるんですが、実装方法が分からなくて＾＾；
方法はないと思います。
tel: が使えるかどうかはキャリアや端末によって決まっているのではなく、そのようなアプリが入っているかどうかです。
携帯電話なら当然入っているでしょうが、無効にされている場合もあるでしょう。
PC でもそれを使うものがあります。
そのようなアプリが入っているかどうかを調べるのは無理だと思いますし、調べなくてもどうということはありません。
tel: が使えるのに使えないと判断されるのは使える環境の人にとって迷惑ですが、使えないのにリンクが有効でも全く問題ないと思います。
UA検出、IP検出が抱える問題はどちらも同じで「既知のUA/IPしか検出できない事」にあります。
例えば、キャリア検出の場合、次の問題があります。
- 日本の携帯3キャリア(docomo/au/softbank)のIPを検出したが、WiMAXには対応してなかった(事前調査で漏れがあった)
- 新しく参加したC社のキャリアに対応していなかった(新しくキャリアが増える度に更新しなければならない)
- 海外のキャリアに対応していなかった(海外のキャリアを全て網羅するのは現実的に不可能)
そもそも論として「携帯回線を使用している === 携帯端末で通信している」とは限りません。
テザリングでPCから閲覧しているユーザに対しては意図せず、携帯サイトへ遷移されるリスクがあります。
(今は携帯回線も十分な速度があるので、緊急回避的にテザリングを利用しているユーザはそれなりにいます)
総合的にいえば、「UA検出」は「キャリア検出」に比べてリスクが低いと思います。
全てを解決する方法として「機能検出」がありますが、Zuishin さんが指摘されたように今回の目的自体がユーザの利便性を損なうものなので「何もしない」が平和な解決法だと思います。
クライアントの意向であれば仕方ありませんが、UA検出した上でPCサイトへのリンクを貼る等、ユーザに選択の余地を与える配慮は欲しいところです。
特定スキームの利用可否を調べる方法はiOS端末でありましたが、対策されたと耳にした記憶があります。
場合によってはクライアント上でアプリのインストール有無を調べる事が可能なので「調べられない」が正ですし、調べてはいけない部類だと思います。
think49 さんの主張を以下のように理解しました。
【厳密なデバイスの判定】をするのにUAのみで実施するのは実用的ではない。
他にキャリアのIPアドレス判定とデバイスの画面サイズ判定を入れ精度を上げたほうが良い。
その前提で、コメントでのやり取りを整理すると以下になるかと。
---
＊そもそもの話として、tel: に限って言うなら PC とスマホを判別しなければならない理由はなく、PC でも使える環境はある。それを（ipone,android）のみに制限する場合に対しての提案であるので、各手法のメリット、デメリットを理解して使用する必要がある。
＊「機能検出」による判定が理想であるが、tel:に対する機能検出は出来ない。
（ipone,android）のみを判定する方法は以下の3手法がある。
1.UA判定
メリット：iPhone、iPadの区別まで出来る。制限リスクは一番低い。
デメリット：UAを偽装する層がそれなりに存在するので、それらに対して誤判定してしまう。UAに依存するため、UAの動向を確認しておく必要がある。
2.画面サイズ判定
メリット：画面レイアウトに起因する振り分けであれば、この方法が一番。また、デバイスごとの細かい条件付けをすれば、より厳密な判定が可能。
デメリット：デバイス判定を画面サイズで行うのであれば、かなり細かく条件付けする必要がある。また、新たなデバイス毎に条件追記が必要。
3.キャリアIPアドレス判定
「携帯回線を使用している === 携帯端末で電話できる」という考え方。
メリット：電話機能を有していないデバイスの多くをフィルタすることが可能。
デメリット：電話機能を有していても、wifiで接続するとフィルタされる。逆にテザリング接続のPCも電話機能ありと判定してしまう。キャリアIPアドレスの更新も必須。
総合的にいえば「UA判定」が有利だが、わざわざフィルタを行うくらいなので、画面サイズ判定、キャリア判定で制限を厳しくみては？
---
こんな感じかと思いますが、どうでしょうか？
> tel: が使えるかどうかはキャリアや端末によって決まっているのではなく、そのようなアプリが入っているかどうかです。
なるほどです。
さすがに別室を立てられてはいかがでしょうか？
To: te2ji さん
本来、それらは目的が違うので比較対象になりません。
目的が複数あれば複合的に利用することもありえます。
- Media Queries (解像度別の振り分け)
- UA検出 (端末別の振り分け)
- IP検出 (回線別に振り分け)
- 機能検出 (機能別の振り分け)
元々の質問は「PCからの訪問者がtel:をクリッカブルにしないようにしたい」でした。
これは「端末別に処理を変えたい」という要望なので普通に考えればUA検出が最適解です。
IP検出は回線を特定するだけで端末を特定しないので手段と目的が一致していません。
しかし、質問された機能が実装された場合、PCでtel:をクリックしてSkypeを立ち上げたいユーザが不利益を被ります。
何らかの機能を制限する機能は基本的には避けるべきだと私は思います。
私も別に質問スレッドをたてた方が良いと思います。
確かに、長くなりすぎました＾＾；
ストレートに言いますね。
私は、think49さんの回答の「ユーザーエージェントを使う方法は実用的ではありません」に納得していません。しかし、こちらの質問の回答としてベストアンサーがついています。【<a tel:>】で検索するとこの質問が上位に表示されるので、今後こちらの質問を参考にされる方が多くいるものと推測されます。
そのため、こちらの回答の主旨なり主張なりがどのような背景や制限があるのか整理しておく必要があると思いました。他の質問にしては意味がありません。
確認ですが、「ユーザーエージェントを使う方法は実用的ではありません」という回答は正しいですか？ソフトランディングを狙ったのですが、長くなりすぎました。。。
間違った回答や理解度の低い回答者の回答にベストアンサーがつくのはよくあることです。この回答がそうだとは言いませんが、つけられたスコアを見て判断していただくしかないでしょう。
To: te2ji さん
> 私は、think49さんの回答の「ユーザーエージェントを使う方法は実用的ではありません」に納得していません。
読み返してみても私の投稿で「実用的」の文言が見つからないのですが…。
> そのため、こちらの回答の主旨なり主張なりがどのような背景や制限があるのか整理しておく必要があると思いました。他の質問にしては意味がありません。
ご自身で更に注目される質問をして、このスレッドからリンクを貼れば良いと思います。
便乗質問を長々と続けてもほとんどの人は読みません。
本質問で是正を求めるなら質問者に直接問い合わせてベストアンサーを選びなおして貰うのが筋だと思います。
「ユーザーエージェントを使う方法は実用的ではありません」でページ内を検索してみてください。回答にそのままの文章が含まれています。
> 是正を求めるなら質問者に直接問い合わせてベストアンサーを選びなおして貰うのが筋だと思います。
その前に、こちらの回答の主旨/主張がどのような背景や制限において正しくなるのか確認したかったので、色々と聞きました。
To: te2ji さん
> 「ユーザーエージェントを使う方法は実用的ではありません」でページ内を検索してみてください
引用文を除けば、yamk4054 さんの回答がHITしました。
> その前に、こちらの回答の主旨/主張がどのような背景や制限において正しくなるのか確認したかったので、色々と聞きました。
それならば、別個に質問を立てて結論を得た後に本質問者に是正を求めるのが筋だと思います。
> think49 さん
恥ずかしいｗ失礼しました。
途中で、think49 さんに変わっているのに気が付きませんでした。
主張がブレてるなぁとは思っていたのですが、勘違いしてました。
質問としてはすでに別で立てています。
https://teratail.com/questions/31825
そちらでの回答を見ても、UAでの判別を実用的としない根拠が理解できず、久しぶりにこちらで反応があったため、どのような背景や制限において正しくなるのか確認したかった。というところです。
> ビジョン
> 携帯（ipone,android）からは<a tel>をクリックして使用できるようにしたい。
> それ以外の機種（pcなど）からはクリックさせたくない。
私的にはhttps://teratail.com/questions/32027と
学校などで体系的に学んでいないためこちらの回答でベストだったのですが、いけませんか？
それにプログラムというものでは最初から完全なものは存在しないように思っているのですが、違いますか？
Facebookだって乗っ取られたでしょう？
> makoto-n さん
こちらの質問と、リンク先の質問しか見てませんが、デバイス判断をするのにメディアクエリを使用するのは間違いです。メディアクエリは表示のためのコントロールであり、デバイス判断には使えません。デバイス判断を画面サイズで行うのであれば、javascript でモニタ画面の解像度を取得する方法になると思います。ただし、このコメント欄でも書きましたが、かなり細かい振り分けをしなければならないので、実用的ではないです。更新もしんどいし。
そう考えるとUA一択です。
というのが私の主張です。
リンクされた質問を見る限り、makoto-n の判断は合理的でないと言い切れるのですが、
yamk4054 さんの主張は特定の背景や制限において正しくなる可能性があるので確かめておきたいです。
ちなみに、リンク先に私の質問も読まれたように記載があったのですが、どのような判断からUAを使用しない判断に至ったのですか？
私の質問についた回答では、UAを否定するものはなかったのですが。。。
わからないからです。
以上。
> makoto-n さん
私には判断基準を開示したくないということですかねぇ。。。
とりあえず、こちらの回答は、makoto-n さんの判断を誤らせる回答であったと思います。
ただ、それに対して yamk4054 さんから回答があると嬉しいです。
学校などで体系的に学んでいないためこちらの回答でベストだったのですが、いけませんか？
それにプログラムというものでは最初から完全なものは存在しないように思っているのですが、違いますか？
話を聞け
答え聞くだけで自分は答えなのか
読解力低くないか
一部の環境のためにやめたほうが良いと言ってしまい、makoto-nさん、混乱させてすみません。
think49さん、勉強になりました。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。