旧ブラウザやその他特定の使用環境に合わせてアラートを表示させるプラグイン

Web制作を行っている際の一番の悩み・・・それは

ホームページを制作するにあたり、旧ブラウザ環境を使用している人のためにクロスブラウザ対策をどこまで行うかということです。

クロスブラウザとは、ホームページ制作に使われる技術(HTML・CSS・Javascript)などによる挙動や表示結果が、各Webブラウザ間で違いが出ないようにすることです。

Webブラウザというものはそれぞれ仕様や完成度が違うため、同じコードを読み込んでもその挙動や表示が違ってきたりしてしまいます。
そこで、Web制作者は各ブラウザ間での挙動や表示の違いを打ち消すために、ブラウザごとに違う処理をしたりして挙動や表示結果の違いを回避させる実装を行い対策を立てます。

FIRSTSTEP様より抜粋

実はWindowsの標準ブラウザであるInternetExplorerは他のブラウザと比べ癖が強く、旧バージョンになればなるほどホームページの見え方も変わってきます。最悪サイト崩れを起こす場合もあります。

参考までに弊社のホームページはInternetExplorer９以下での環境下ではサイト崩れを起こします。

これは、InternetExplorer９以下で回覧するユーザーが少ない（3～4％前後）ということと、2016年01月12日以降より、IE9以降のバージョンのサポートを打ち切ることから、更に減少すると予想され、弊社では対策を省略しております。

そのような中でもお客様でIE6や7のブラウザに対応してほしいという要望もたまにあります。その場合、全ブラウザバージョンのチェックを行いつつ修正を行う必要があり、時間も手間もかかることからクロスブラウザ対策費用をいただく場合もあります。

もちろん最初の時点でクライアントと取り決めを行いつつ制作に入るわけですが、そもそも推奨バージョン以外のブラウザで表示が崩れる原因は回覧ユーザーの使用環境によるものがほとんどで、回覧ユーザは「自分のブラウザ環境が古いことで起こる不具合」だと認識している人は残念ながら皆無というのが現状です。

また、旧ブラウザに対応していないということは、古いブラウザを使用しているユーザーを切り捨てすることとなるため、何も知らないユーザは最悪ホームページを利用できない場合が出てくるということになります。更にブラウザが古い状態で使用することはセキュリティリスクの危険性もあることから、アップデートは必須となります。

弊社の中で切り捨てという選択肢は非常に心苦しい決断であり、せめて、旧ブラウザを使用している人に対し、ブラウザのアップデートを促す通知を行えなるような仕組みを作ることで制作者、管理者、回覧ユーザーの三者にとって一番の解決策に繋がるのではと思い上記を実現させるWordPressプラグインBrowser Alertを開発しました。

Browser Alertはユーザーの環境を判断し、個別に動作させるための条件を細かく設定・制御ができます。

Browser Alertは特定のブラウザや環境やパソコン環境に応じてサイトを閲覧した際にアラートを表示するプラグインであり、主に下記のような際に動作を行うことができます。

回覧環境で判定

デスクトップ環境、モバイル環境を判別した際に、動作します。

ブラウザ種別、バージョンで判定

InternetExplorer、FireFox、GoogleChromeなどのブラウザバージョンを判別した際に、動作します。

レンダリングエンジンで判定

InternetExplorer、MicrosoftEdge、Mozilla、Webkit、Opera等のレンダリングエンジンを判別した際に、動作します。

オペレーティングシステムで判定

Windows、Mac、Linux、Android、BlackBerryなどのOS環境を判別した際に、動作します。

ハードウェアで判定

iPad、Iphone、iPod、Kindleなどのハードウェアを判別した際に、動作します。

ブラウザ判別を使用した使用例

推奨環境ブラウザでサイトを表示している場合

通常状態での表示となります。

旧ブラウザでサイトを表示した場合

ブラウザバージョンを判別し、それ以前のバージョンの場合は警告を発するなどの制御を行えます。

このような使用方法ができます

• 古いブラウザ環境で見ているユーザーに対して最新ブラウザアップデートを促す
• ＰＣサイトとスマホサイトのURLが分かれており、ユーザが誤ってスマホでＰＣサイトを訪れた場合（もしくは逆の場合）の誘導リンクを表示
• スマートフォンでの回覧のお客様のみ、キャンペーンを行う

その他皆様のアイデアで色々なことができるようになります。

もうじきリリースいたしますのでもうしばらくお待ちください。