Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

IE Buster

IE Buster Logo Illustration

Site

https://ie-buster.qranoko.jp

Quick Test

https://codepen.io/qrac/full/gdPNXN/

About

IE Buster Image

IE Buster(アイイーバスター)は、IE ユーザーに Chrome を促す軽量なポップアップ JS です。Web 制作者みんなを救うために開発しました。

多くの場合、IE ユーザーはブラウザの種類を認識していません。IE を強烈に否定しても「IE?なんのこっちゃ?」と暖簾に腕押し状態となってしまうので、もっと自然な移行シーンを増やそうと考えました。そこで、開発したのが IE Buster です。

ie-buster.js を読み込んだページに IE8〜11 でアクセスすると、自動的に Chrome ダウンロードを促すポップアップが表示されます(オプションで文言やリンクの調整が可能)。UI は Microsoft の Fabric 風でオフィシャル感を意識。

閉じるボタンはありません。推奨環境でないブラウザで閲覧を続けられては困るからです。真っ当な提案を、できるだけ礼儀正しく IE ユーザーに届けます。

ネーミング程の破壊力はないかもしれませんが、IE Buster が Web 制作者を救う一手になれば幸いです。

How To Use

CDN

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

HTML 内に CDN のリンクを貼るだけで、ポップアップを表示できます。

npm

$ npm i -D ie-buster

npm install も利用可能です。

Vue.js

npm でインストール後、 App.vue に下記を追記します。

import 'ie-buster/dist/ie-buster.min.js'

Nuxt.js

npm でインストール後、plugins で読み込むだけで利用できます。IE Buster は JavaScript 内でwindowを使用しているので、Nuxt.js では SSR を迂回する記述で呼び出します。

// nuxt.config.js
module.exports = {
  plugins: [
    { src: "~plugins/ie-buster.js", mode: "client" }
  ]
}
// plugins/ie-buster.js
import ieBuster from "ie-buster"

nuxt.config.js に CDN のスクリプトタグを記述する方法でも使用可能です。

module.exports = {
  head: {
    script: [
      {
        src:
          'https://cdn.jsdelivr.net/npm/ie-buster@1.1.0/dist/ie-buster.min.js'
      }
    ]
  }
}

Netlify

Netlify にサイトをデプロイしている場合は、Snippet injection で CDN リンク挿入 → 再デプロイするだけで IE Buster が導入できます。

Netlify Snippet Injection Image

WordPress Plugin

WP IE Buster としてWordPress 公式プラグインディレクトリに追加されました。ie buster などで検索・インストール後、有効化するだけで WordPress サイトにポップアップを表示できます。管理画面の設定から、テキストやリンクの編集が可能です。

WP IE Buster Install Image

Options

ie-buster.js を読み込んだ後に、オプションを使ってテキストやリンクを差し替えられます。デフォルトでは以下の内容が設定されています。差し替える場合は、文言とリンク内容に齟齬がでないよう気をつけてください。

<script src="js/ie-buster.js"></script>
<script>
  ieBuster({
    mainText: "ご利用のインターネットブラウザは推奨環境ではありません。Webサイトの動作が保証できませんので、最新の Google Chrome をご利用ください。",
    linkText: "ダウンロードページへ",
    linkUrl: "https://www.google.com/chrome/"
  })
</script>

Support

  • IE 8
  • IE 9
  • IE 10
  • IE 11

License

  • MIT

Credit

You can’t perform that action at this time.