とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

webサイトにIEでアクセスしてきたユーザには別のブラウザを推奨しよう

webサイトにIEでアクセスしてきたユーザには別のブラウザを推奨しよう

いまだにはびこるIEユーザ。

webサイトの進化をさまたげる害悪ブラウザは、

使わないようにユーザに別のブラウザを案内しましょう。

 

ie-buster.qranoko.jp

 

IE Busterは上記のとおり、ユーザにChromeを

促すJSです。導入はめちゃくちゃ簡単。

HTML内にCDNのJSを読み込むだけでOK。

 

<script src="https://cdn.jsdelivr.net/npm/ie-buster@1.1.0/dist/ie-buster.min.js"></script>

 

見た目はこんなかんじ。

IE Buster導入イメージ(https://ie-buster.qranoko.jp/)

IE Buster導入イメージ(https://ie-buster.qranoko.jp/

 

 

CDNで読み込みたくない場合は、

IEコメントを利用して、IEだけにメッセージを表示するJSを

HTML内に記述するie6nomreもあります。

 

IE 6 Mo More

https://www.ie6nomore.com/

 

これはIE6と古めの設定になっています。

IE10以降は条件付きコメントが使えないので、

IE11以下全部を対象とする場合は、

PHPでIEかどうかを判定し、メッセージを表示するかたちが

よいですね。その場合の記述はこちら。

 

<?php
  $user_agent = $_SERVER['HTTP_USER_AGENT'];
  if (strstr($user_agent, 'Trident') || strstr($user_agent, 'MSIE')) {
?>
<div class="oldBrowser"><p><strong>お客様が現在ご利用のブラウザでは閲覧できないページがございます。</strong></p>
<p>当サイトでは旧式ブラウザには対応しておりません。ご不便をおかけして大変申し訳ございません。旧式のブラウザはセキュリティ面での脆弱性が報告されています。継続利用するとお使いのコンピュータからデータを盗まれたり情報漏えいする危険性があります。より安全、快適にインターネットをご利用して頂くために、最新のブラウザへのアップデートを強くおすすめします。以下のアイコンをクリックして最新のブラウザをダウンロードしてご利用ください。</p><ul>|<li><a href="http://www.google.com/chrome?hl=ja" target="_blank">Chrome</a></li>|<li><a href="http://www.mozilla.jp" target="_blank">Firefox</a></li>|<li><a href="https://www.microsoft.com/ja-jp/windows/microsoft-edge" target="_blank">Microsoft Edge</a></li>|</ul><style>.oldBrowser {padding:6px;text-align:center;;margin:0 auto auto;background:#FEEFDA;border-bottom:}.oldBrowser em {font-weight:bold; font-style:normal}.body {padding-top:100px !important;} .oldBrowser strong {background-color: #ffccbc;border: solid 2px #ffab91;padding: 8px;display:block;font-weight:bold;font-size: 18px;} .oldBrowser li {padding:6px; font-size: 16px; display:inline-block;}.oldBrowser p, .oldBrowser ul {margin:10px 0 0;}</style></div>
<?php } ?>
 
CSSはお好みでカスタマイズしてください。
上記ソースをHTMLに記述すると、見た目はこんなかんじ。

PHPで判定してIEだけメッセージを表示

 
上記ソースの仕組みは、

http://hiroki-tkg.com/?p=918

ブラウザがIEの場合、HTTP_USER_AGENT には、「MSIE」の記述が入るのですが、IE11の場合は「MSIE」が含まれないため、「Trident」という文字列を拾うと良いらしいです。

ということなので、USER_AGENTでの判定でIEかそれ以外、

という出し分けをしています。

 

<?php
  $user_agent = $_SERVER['HTTP_USER_AGENT'];
  if (strstr($user_agent, 'Trident') || strstr($user_agent, 'MSIE')) {
?>
 ここにIEで表示するHTMLを記述
<?php }else{ ?>
 それ以外(Chrome, Safari, Firefoxなど)のHTMLを記述
<?php } ?>
 
(「それ以外」 はあえて書く必要がなければ else は必要ありません。)