2017-02-04

Javascriptでブラウザ判定するやつをちょっと改造

はじめに

Web制作をしていると、どうあがいても立ちはだかるのがCSSのブラウザ対応状況。便利なCSSのプロパティはたくさんありますが、便利だからといって使っていると、古いブラウザーではレイアウトが大崩壊なんてこともあります。私は最近「flexbox」をよく使うようになったのですが、これを使用するとIE9以下のブラウザに対応できなくなってしまいます。仕事だったら完全にアウトですね。

今、個人的なサイトの作成をしていて、flexboxを使用しています。問答無用でIE9以下は切り捨てる予定なので良いのですが、「最新状態にしてください」といった警告くらいは出しておこうと思ったので、ブラウザ判定をJavascriptで行うことにしました。

Javascriptを使用してブラウザ判定する

検索すれば、すぐ自分の遥か先を行く人たちが作ったJavscriptを使用したブラウザ判定関数が出てくるので、改めて作成する必要もありません。とりあえず検索してトップに出てきたjavaScriptで対応ブラウザ判定 - Qiitaのソースを使用してみます。ちゃんと判定してくれるのですが、このままだと該当のブラウザでなくてもalertでポップアップが出てくるので、ちょっと組み替えることにしました。

IE9以下のラウザの時だけ警告を表示する

変数「getBrowser」に中身を詰め込む部分は、警告画面にそのまま詰め込んだブラウザ名を表示させるようにしたいので、「IE9」などの表記を「InternetExplorer9」と表記だけを変えておきます。そして、実際に変数の中身を判定して警告画面を表示させるのは以下のようにしました。

説明するまでもありませんが、「getBrowser」の中身を判定にかけて、マッチすればalertを出しています。ただそれだけ。これでIE9以下以外のブラウザでのアクセスの場合は何も表示されません。

さいごに

もっとスマートにできるのかもしれませんが、とりあえずこれでちゃんと動いてくれているので、何事もなければブラウザ判定はこれでいきます。ブラウザ判定して警告ではなく、ブラウザに応じて表示を変えるとかの方が良いのかもしれませんが、いつまでも古いブラウザを使用するユーザーを甘やかすほうが後々面倒なので、WEB業界の人は団結して古いブラウザを駆逐する方針で頑張って欲しいですね。



コメントする(※は必須項目です)













画像認証