IEより凶悪なブラウザ

※この記事は6年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

どうも、繁忙期を越えても、やっぱり忙しいみやびです。
修正やら、改善やらでなかなか抜けれない・・・。
（おまえが修正必要なの書いてるからだヨ）

さて、今日は、愚痴90%な記事です。
表記の話だが、みなさんもご存知Internet Explorerと言えば、
言わずと知れた、凶悪ブラウザです。
僕ら年代のコーダーは、散々苦しめられました。特にIE6な。
それでも、最近は、Microsoftさんが、空気読んで強制アップデートをかけてくれたおかげで、
IE9以下はほとんど気にしなくても済むようになりました。
（みやびの勤める会社も、IE9以下は、ほぼほぼサポート外にしてる）
やっと平和が訪れたか・・・、と思うのも束の間、
もっと凶悪なブラウザがこの世に出現したんですよ。

Android標準ブラウザだ。

これは、Android OS4.X系に標準搭載されている、ブラウザ。
もう何世代も前のOSの搭載なので、だいぶユーザーは少なくなってきたが、
根強く残ってるんですよ、これが・・・。
このブラウザの嫌なところといえば、
CSS3の大半がサポートされていないこと。
スマホなのにだよ！？
CSS3なんて、今の時代、IEでさえ、だいぶサポートしてんのに（IE11は割とまともにサポートしてくれてる）、
時代遅れもいいとこです。
そして、Googleもサポート切っちゃってるしね。
改善は今後絶対行われない。
ただ、お客様にそんなこと強要はできないし、
ネットリテラシーがあまり高くないユーザーを無視するわけにはいかない。

というわけで、いろいろ調べて、
ユーザーエージェントで判別して、
Android OS4.4以下かつ、標準ブラウザを使ってたら、サポート外だぜ、的なアラートを出すという結論に至った。

$(function() {

var $usedUA = navigator.userAgent;

if ($usedUA.indexOf('Android') != -1) {
  // Androidである

  //Android Version取得
  var androidPos = $usedUA.indexOf('Android') + 8;
  var aVersion = $usedUA.slice(androidPos, androidPos + 5);
  var aVersionArr = aVersion.split('.');

  // OSのバージョンが低い
  var $lowBrowserFlg = parseInt(aVersionArr[0]) <= 4 && parseInt(aVersionArr[1]) <= 4;
  // 標準ブラウザかの取得
  var $defaultFlg = ($usedUA.indexOf('Android') != -1 && $usedUA.indexOf('Linux; U;') != -1 && $usedUA.indexOf('Chrome') == -1) || ($usedUA.indexOf('Android') != -1 && $usedUA.indexOf('Chrome') != -1 && $usedUA.indexOf('Version') != -1);

  if ($defaultFlg && $lowBrowserFlg) {
    //標準ブラウザかつバージョンが低い
    //アラートを出すなどの処理
  }

}
});

これで、Android OS4.4以下かつ標準ブラウザを対象に処理ができるようになった。
アラートを出すなりなんなりすればいい。

これでAndroidは大丈夫だろう。

そう思ったのも束の間。

そう、本エントリーは、こっからが本題。（前置きなg以下ry）
Android標準ブラウザよりもっと凶悪で強烈なブラウザがいた。

Yahoo!ブラウザー（Android版）である。

何を隠そう、このブラウザ、
Chromeなどの大手ブラウザと違い、
その機種に搭載されている、デフォルトブラウザと同じ表示をしやがるのだ。
ということは、古いAndroid OSの機種は当然、
標準ブラウザと同じ表示となる。
（新しいOSで、Chromeが標準搭載の機種は、Chromeと同じ表示）
おそらくアプリのWebビューという技術を使っている。そう考えれば標準ブラウザと同じ表示になるのはうなづける。
ふざけんなって。
せっかく標準ブラウザを排除したと思ったら、今度は、表示は一緒なのに、ユーザーエージェントが違うブラウザが存在したってわけだ。
つまり、新たなユーザーエージェントの分岐をする必要があるってこった。
コーダー泣かせもいいところだ。

というわけで、先ほどのJSに、Yahooブラウザの処理も合わせたのが、こちら。

$(function() {

var $usedUA = navigator.userAgent;

if ($usedUA.indexOf('Android') != -1) {
  // Androidである

  //Android Version取得
  var androidPos = $usedUA.indexOf('Android') + 8;
  var aVersion = $usedUA.slice(androidPos, androidPos + 5);
  var aVersionArr = aVersion.split('.');

  // OSのバージョンが低い
  var $lowBrowserFlg = parseInt(aVersionArr[0]) <= 4 && parseInt(aVersionArr[1]) <= 4;
  // 標準ブラウザかの取得
  var $defaultFlg = ($usedUA.indexOf('Android') != -1 && $usedUA.indexOf('Linux; U;') != -1 && $usedUA.indexOf('Chrome') == -1) || ($usedUA.indexOf('Android') != -1 && $usedUA.indexOf('Chrome') != -1 && $usedUA.indexOf('Version') != -1);
  // Yahoo！ブラウザかどうか
  var $yahooFlg = $usedUA.indexOf('YJApp-ANDROID') != -1;

  if ($lowBrowserFlg && ($defaultFlg || $yahooFlg)) {
    //バージョンが低いかつ、標準ブラウザかYahooブラウザである
    //アラートを出すなどの処理
  }

}
});

対象は、Android OS4.4以下かつ、Yahoo!ブラウザー、または、Android OS4.4以下かつ標準ブラウザー
って感じ。

Yahoo!ブラウザの質が悪いのは、表示だけでなく、
なまじ大手プロバイダの名を冠してるので、
ユーザー数が意外に多いことだ。
（どうせ広告とかでいっぱい出してんでしょ）
また、いろいろな便利機能があるためか、評判も割といいってのも質が悪い。

だけどさぁ、
だったら、表示なんとかしろよ！
せめて、Chrome並みになるようによ！！！

というわけで、愚痴90％なエントリーでした。