qrac / ie-buster Goto Github PK

View Code? Open in Web Editor NEW

73.0 3.0 5.0 1.37 MB

Save web creators with Chrome link popup for IE.

Home Page: https://ie-buster.qranoko.jp

License: MIT License

JavaScript 77.67% HTML 22.33%

javascript ie ie11 japanese

ie-buster's People

Contributors

Stargazers

Watchers

Forkers

acid-chicken sho-yamane sysadmin-furuel taiyme imasanari

ie-buster's Issues

Netlifyでの使い方

最も簡単なのは、デプロイ設定のSnippet injectionでCDNリンクを </body> 前に差し込む方法。

Nuxt.jsでの使い方

nuxt.config.js

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

とりあえず、これでいける？

npm installとかではなくて？

外部リソース - Nuxt.js

専用のライブラリ化・プラグイン化とか必要？

WordPressプラグイン制作

妻からの提案。まだ、プラグインの作り方も公式リポジトリへの上げ方も知らず。

IE検出コードのアップデート

UAは偽装も可能らしく、ブラウザの機能で判定可能とのご意見をいただいたので検証する。コードも短くできそう。

たかもそ＠CSS本執筆さんのツイート: "クラクさんのIEバスターいいですねw。ただ個人的にはUAは偽装可能なので、添付画像のような感じでFeature Detectionの方が好きですね〜。 / https://t.co/eP5tb3gsnQ… "

IE8・IE9で表示させる？

Autoprefixerの設定がIE11になっていたからか、IE9以下で動作していない。なんとかする？

IE Buster - Test Version 2

class化に関して

以下、動作非検証ですが、classで書いてbabelで変換みたいな感じです。IE8でも頑張れば行けるようですが、そこまで頑張るかは要判断ですねｗ

https://qiita.com/k_ui/items/bd728f059f868b8ee528

一応以下コード置いときます。確認して適当にcloseお願いします。

class ieBuster {
  constructor(message) {
    this.message = message
    this.ieBusterTarget = document.getElementsByTagName('body')[0]
    this.ieBusterApp = document.createElement('div')
  }
  ieBusterUserAgentCheck() {
    const ieBusterUserAgent = window.navigator.userAgent.toLowerCase()
    if (
      ~ieBusterUserAgent.indexOf('msie') ||
      ~ieBusterUserAgent.indexOf('trident')
    )
      return true
  }
  main() {
    if (this.ieBusterUserAgentCheck()) {
      this.ieBusterApp.innerHTML =
        '<div style="position: fixed; top: 0px; left: 0; width: 100%; padding: 16px; box-sizing: border-box; z-index: 999999;">' +
        '<div style="width: 100%; max-width:866px; margin: 0 auto; padding: 16px 20px; background-color: #fff; box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px 0px; box-sizing: border-box; font-family: SegoeUI, Meiryo, sans-serif;">' +
        '<p style="display: block; float: left; width: 100%; max-width: 664px; margin: 0; color: #000; font-size: 14px; font-weight: 400; line-height: 1.5;">' +
        this.message +
        '</p>' +
        '<a style="display: block; float: right; height: 36px; width: 154px; padding: 0 16px; background-color: rgb(0, 120, 212); box-sizing: border-box; color: #fff; font-size: 12px; font-weight: 400; line-height: 36px; text-align: center; text-decoration: none; white-space: nowrap;" href="https://www.google.com/chrome/" target="_blank" rel="noopener noreferrer">ダウンロードページへ</a>' +
        '<div style="clear: both;"></div>' +
        '</div>' +
        '</div>'
      this.ieBusterTarget.appendChild(this.ieBusterApp)      
    }
  }
}

window.onload = () => {
  const ieBuster = new ieBuster(
    'ご利用のインターネットブラウザは推奨環境ではありません。セキュリティリスクが高い状態ですので、最新の Google Chrome をご利用ください。'
  )
  ieBuster.main()
}

Divタグの調整

最初の div にスタイルを当てれば1つ省略できる。また、利用者のカスタマイズ性を上げるためにIDを付与する。IE8で動くか要確認。

ieBusterApp.id = 'ie-buster-app'
ieBusterApp.setAttribute(
  'style',
  'position: fixed; top: 0px; left: 0; width: 100%; padding: 16px; box-sizing: border-box; z-index: 999999;'
)

コードの軽量化・IE8〜対応

制作のしやすさからWebpack+SCSSで作っているものの、AutoprefixerやBabelが気を使ってくれてビルド時に旧ブラウザ用のコードを吐いていることだろうと思う。

現状は10.1 KBだけど、そもそも旧式の書き方をすればもっと削れるのではないだろうか。極限まで容量を削って気軽に導入できるようにする。Webpackなどのコードを変換するツールはすべて省く。

イメージイラスト作成

妻に依頼中。8月はどちらも忙しいので9月にでも。

デモサイトの制作

CodePen以外のデモを作成。

デフォルトテキストを動作保証の内容に修正

ブラウザの種類を認知されていない層にはセキュリティリスクの訴求が刺さりやすいものの、サポートが続いているバージョンのIEに関してはセキュリティアップデートが行われているため、文言が必ずしも的確でない状態になっている。

逆に「JavaScriptが動かない・CSSが適応されない」という事実は今後もアップデートされることはなく、Microsoftも動作保証の観点から別のブラウザへの乗り換えを推奨している。

Internet Explorer の今後について – Japan IE Support Team Blog

そこで、IE Busterで表示されるデフォルトテキストもセキュリティリスクの訴求から動作保証に関する文言に修正する。

ファイルアクセスのためにpackage.jsonのexportsを削除

package.json の exports 定義を使うと他のファイルにアクセスできなくなるようで、ドキュメントサイトへのバージョン表記などに支障が出たため、一旦削除。

"exports" を定義することで、パッケージのサブパスはすべて隠蔽されます。"exports" に記載のないパスを指定して import しようとすると、ERR_PACKAGE_PATH_NOT_EXPORTED エラーが発生するようになります。これはユーザーに本来使われることを意図していないファイルを隠蔽するのに役立ちます。

package.json の imports / exports フィールド - 別にしんどくないブログ

使いこなせばwebpackの動作に貢献できそうだった。main と module 書いてるし、無くしても大丈夫かなと。

Node.js Dual Packages (CommonJS/ES Modules) に対応した npm パッケージの開発 - Cybozu Inside Out | サイボウズエンジニアのブログ

exports がnpmの内部モジュールを参照できないようになったという話も見かけたが、この件とは関係ない？そもそも、npmのドキュメントに exports の項目が無くよくわからない。

npm v7の主な変更点まとめ – watilde's blog

npm Blog Archive: npm v7 Series - Beta Release! And: SemVer-Major Changes in npm v7

モダンブラウザではスクリプトを読み込まないようにしたい

v2を開発中とのことで、表題の件をご提案いたします。
<script nomodule> を利用した場合、モダンブラウザではそのスクリプトを読み込みません。これを利用して、IEを含むレガシーなブラウザでのみ IE Buster を読み込ませることで、実質的に軽量化となります。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/script#attr-nomodule
https://caniuse.com/mdn-html_elements_script_nomodule

下記の通り懸念点もありますが、ご検討いただけますでしょうか。

使用方法

<script nomodule src="ie-buster.js"></script>

importなどで組み込むと効果がないので、CDNを利用するのがベストだと思います。

懸念点

モダンブラウザの場合、スクリプトが読み込まれず ieBuster 関数は存在しません。なので、Option設定時の方法を変更する必要があります。

<!-- 案1: 存在チェック -->
<script nomodule src="ie-buster.js"></script>
<script>
  typeof ieBuster === 'function' && ieBuster({
    mainText: "...",
    linkText: "...",
    linkUrl: "..."
  })
</script>

<!-- 案2: html内で記述するよう変更する -->
<script
  nomodule
  src="ie-buster.js"
  id="ie-buster-script"
  data-main-text="..."
  data-link-text="..."
  data-link-url="..."
></script>

案2の方は、下記に仮実装がありますので、ご参考になれば幸いです。
https://github.com/iMasanari/ie-buster/blob/use-nomodule/src/app/ie-buster.js

オプション：テキスト・URLのカスタマイズ

日本語のみ
ブラウザがChromeのみ
セキュリティリスクってほんとにいいのかな？

とかが気になったので、もしよろしければ動的に文言が書き換えられるようになったらいいなと思ってます。

開発ロードマップ v2

最後のIE対応

開発機運の高まりを感じ、2年半振りにIE Busterを書き直してみることに。

MicrosoftはIE非推奨を打ち出し、Edgeへの転送を開始。この情勢の変化もあってか、仕事でIE対応することはほぼなくなったので、IE Busterのv2アップデートを最後のIE対応にしたいところ。

アップデート内容

フロントエンド開発向けに設計を一新💥

対象ブラウザをIE11に限定
任意のタイミングで実行できる設計に変更
JSメソッドを追加（実行・IE検出・表示・削除）
オプションを強化（ID・挿入先・別タブ・CSS）
Edgeで開くdeep linkに対応
配布ファイルの形式を多様化（umd・cjs・es）
TypeScriptに対応
テクニカルドキュメントを追加
バグ修正・セキュリティ改善

対象ブラウザをIE11に限定

2018.01-02 （v1リリース当時）	2021.01-02 （v2リリース予定）

日本のブラウザシェアでも直近でIE8〜10が使われている様子はないので、対象ブラウザをIE11に限定した書き方に変更（そもそもIE8〜10で検証する環境自体用意できない...）。動作環境をIE11に限定することで、見送ってしまった書き方が可能に。

IE検出コードの改善

IE検出コードのアップデート · Issue #1 · qrac/ie-buster

CSSにFlexBoxを使用

Floatと差し替え。

Class(Babel)を使用

class化に関して · Issue #16 · qrac/ie-buster ※Babel前提

Object Assign(Babel) を使用

ユーザーオプションとのマージを効率化。

任意のタイミングで実行できる設計に変更

JavaScriptを読み込んだ時点で window.onload 実行していたが、カスタマイズや実行タイミングの調整などを考え設計を変更。任意のタイミングで初期化して呼び出せるようにした。

ieBuster.init()

JSメソッドを追加

// 通常の実行：IE検出をしてポップアップ表示
ieBuster.init()

// IE検出のみ：付随する処理を同時に行う場合に使う
ieBuster.check()

// ポップアップ表示のみ：IE検出を含まない
ieBuster.create()

// ポップアップの削除
ieBuster.clear()

オプションを強化

付与するID、挿入先のセレクター、別タブで開くかどうか、付与するCSSの設定をオプションに渡して反映させられるよう強化。CSSはオブジェクトで必要な変更点を指定することでデフォルトスタイルとマージして表示可能。

ieBuster.init({
  appId: "your-custom-id",
  mainText: "ご利用の Internet Explorer は推奨環境ではありません。最新の Firefox を推奨します。",
  linkText: "Download",
  linkUrl: "https://www.mozilla.org/ja/firefox/new/",
  linkNewTab: false,
  appStyles: { top: "auto", bottom: "0" },
  cardStyles: { maxWidth: "540px", borderRadius: "8px" },
  textStyles: { fontWeight: "700" },
  linkStyles: { background: "purple", borderRadius: "4px" },
})

Edgeで開くdeep linkに対応

// ※別タブで開く設定は強制的にオフとなる
ieBuster.init(
  {
    linkUrl: "microsoft-edge:https://example.com"
  }
)

IE BusterのWordPressプラグイン版で「インストール済みのEdgeで開かせたい」という要望があり対応。その際、target="_blank" では空白タブが生まれて良くない状態だったため、URLのプロトコルをチェックして target="_self" に切り替わるようにした。JS版にも同様の機能を付与。

配布ファイルの形式を多様化

ブラウザ：UMD形式（dist/ie-buster.js）
ブラウザ：UMD形式圧縮版（dist/ie-buster.min.js）
npm：CommonJS形式（dist/ie-buster.common.js）
ES Modules形式（dist/ie-buster.es.js）

TypeScriptに対応

TypeScriptプロジェクトで npm install した場合に型定義を提供。

テクニカルドキュメントを追加

モダンブラウザでCDNを読み込ませない

モダンブラウザではスクリプトを読み込まないようにしたい · Issue #28 · qrac/ie-buster

バグ修正・セキュリティ改善

データの挿入にエスケープ処理等を追加

テキストは innerHTML ではなく innerText で挿入するよう変更
URLは innerHTML ではなく encodeURI で挿入するよう変更
インラインスタイルの値にURLは使えません

Headで使えない不具合を修正

<head>
  <script src="ie-buster.min.js"></script>
  <script>
    window.onload = function () {
      ieBuster.init()
    }
  </script>
</head>

開発ブランチ

~~dev-v2 にて開発。~~ master にマージ。

容量PRの1.5KBを軽量に変更

容量がバージョンを重ねるごとに1〜2KBで上下している。v1.1.0では1.7KBになりそうだが、書き方によっては軽くなるだろう。

どちらにせよ軽量なことには変わりなく、新機能・改善・見通しの良いコードの採用を容量基準で判断したくはない（5KBを超えるようであれば太り過ぎだと思うけど...）。

数字を提示することは軽量さを伝える上で有効ではあるものの、アップデートの多い現段階では単純に「軽量」としておきたい。

Pタグのマージンをリセット

WordPressのデフォルトテーマ twenty~ 系は、素の <p> タグに margin-bottom を付与しているため、ポップアップ内に変な余白ができる。

対処としては、<p> のマージンをインラインCSSで打ち消すか、<div> や <span> タグなどに変更するか。後者はマークアップとして若干気持ち悪いのと、すべての環境でマージンが当たっていないという保証もないため、インラインCSSでのマージン打ち消しを行っておきたい。

z-indexの修正

ポップアップがabsoluteな要素の下に潜り込んでいる。

z-index忘れではなく、ポップアップウィンドウに書いていたので効いていない。