【脱IE】Internet Explorer のサポート終了が与えるレガシーな社内 Web システムへの影響と対策
はじめに
先日、 Microsoft から Internet Explorer デスクトップアプリ (以下「IE」と称する) のサポート終了が発表され、一部の Windows OS のバージョンを除き、 2022 年 6 月 15 日 (水) をもって IE はその長い歴史に幕を閉じることになりました。
IE のサポート終了の流れは既に数年前から始まっていて、主要な Windows OS においては 2016 年 1 月に IE11 以外のバージョンのサポートを終了しており、それから 5 年以上の年月を経て、ようやくの IE 終了に歓喜する Web エンジニアも少なくないと思います。
直近 5 年間の国内外の Web ブラウザシェアの推移を見ると、 IE の全体に占める割合は一桁台で減少の一途を辿っており、人によって見方は変わると思いますが、モダンブラウザへの移行は概ね順調であると言えます。
しかし、この話題でよく問題になるのは、 IE 独自の機能拡張 *1 に依存した処理が至る所に実装された、昔から存在する企業内の業務用社内 Web システムです。
Web エンジニアにはお馴染みですが、 IE は Microsoft によって独自の機能拡張が施されており、 Web 標準に準拠していない IE でしか使用できない機能が存在します。
これらが多用されたレガシーな Web システムをモダンブラウザに対応させるための工数は少なくなく、特に社内向け Web システムは利益に直結しないケースも多いことから、開発が先送りされてきたのが現状だと思います。
ということで今回は、レガシーな社内 Web システムでよく使用されている IE 独自の主だった機能拡張 *2 とその代替手段、そして IE からモダンブラウザへの移行時に合わせて検討した方がいいと思われることを独断と偏見でまとめてみました。
モダンブラウザでは使用できない IE 独自の機能
IE 独自の機能拡張については、 Windows Blog に Windows 10 の標準ブラウザである Microsoft Edge でサポートされない IE の機能や API がまとめられており、 Microsoft Edge でサポートされない ≒ Web 標準でない ≒ IE 独自の機能拡張 と理解しても、大きく間違ってはいないと思います。
これらの中から私の経験を踏まえて、おそらく多くの現場で使われているであろう技術とその代替手段を取り上げていきます。 (完全に独断と偏見です)
ActiveX
ActiveX は Microsoft が開発したインターネット関連技術群の総称で、初っ端からですが、もしかしたらこれが一番厄介かもしれない機能です。
IE の JavaScript エンジンである Chakra (jscript9.dll) では、細かいことをすっ飛ばすと、 ActiveXObject を使用することで Windows 上のファイル操作やコマンドが実行できるという、今となってはとんでもない機能が用意されています。
もちろん、これを使用するためには IE の設定でセキュリティレベルを下げるなどの明示的な対応が必要なため、一般的には安全だと思われるイントラネット内での社内 Web システムだからこその機能であると言えます。
よくある例
var fso = new ActiveXObject('Scripting.FileSystemObject'); fso.DeleteFile('ファイルパス', true); // 悪用厳禁
代替手段
ActiveXObject を使用すればある程度何でもできてしまうので社内向け Web システムでは意外と多く使用されてきたと思いますが、当然セキュリティはガバガバになるわけで、モダンブラウザにおいてはこんな操作ができるわけがなく、 Web 標準や ECMAScript にもこれに代わる機能は存在しません。
モダンブラウザでサポートされる WebAssembly でも、将来的にどうなるかは分かりませんが、現時点ではセキュリティ上の制約からローカルファイルへのアクセスは難しそうです。
基本的には設計を見直すか、何かしらのファイルをダウンロードしてローカル PC 上で手動で実行してもらうなどの方法を取らざるを得ないため、確実に仕様を変える必要が出てきます。
一番厄介と書いた理由は、これを決裁権を持つ偉い人に説明して納得してもらうのが難しい可能性があるからです…
これを説明しなければならない担当者の方には、大変ですねとしか言えません…
VBScript (Web クライアントスクリプト処理)
VBScript には、 IE で実行される Web クライアントスクリプト処理と Internet Information Service (IIS) で実行される Web サーバスクリプト処理 (Acrive Server Pages (ASP)) があり、今回対象となるのは IE で実行される Web クライアントスクリプト処理になります。
※ IIS で実行される Web サーバスクリプト処理はブラウザには依存しないため、 IE のサポート終了による影響を受けません。 (IIS 10.0 のサポート終了日は 2027 年となっているので、まだまだ VBScript 自体は健在のようです…)
Windows Blog で言及されていますが、既に IE11 では VBScript の実行が非推奨となっており、既定の設定では VBScript は実行されません。
ただし、後述する Document mode による互換表示設定を行うことで VBScript の実行が可能になるため、 VBScript を使用している社内 Web システムでは、 IE の設定や HTML の meta 要素などで互換表示設定を行っているケースが多いと思います。
よくある例
<script language="VBScript"> MsgBox( "モダンブラウザへ移行してよろしいですか？", vbOkCancel + vbQuestion, "モダンブラウザ移行" ) </script>
代替手段
VBScript に関しては、基本的には JavaScript への書き換えが可能です。
VBScript の組み込み関数のすべてが JavaScript の標準組み込みオブジェクトでカバーできるわけではありませんし、もちろん VBScript で書かれたコードを解析して JavaScript に書き換えるという手間は発生しますが、大きな問題にはならないはずです。
"基本的に" と書いたのは、 VBScript の組み込み関数で用意されている CreateObject 関数が問題で、これを使用すれば COM オブジェクト (ActiveX オブジェクト) への参照が取得でき、前述の ActiveX で書いたこととと同様のことができてしまいます。
Dim Fso Set Fso = CreateObject("Scripting.FileSystemObject") Fso.DeleteFile("ファイルパス") ' やっぱり消せちゃう
やはりこれに対しても前述した通り、設計を見直すなどの対応が必要となり、偉い人へ説明する担当者の方は (ry
Document modes (互換表示)
Web 標準は W3C (World Wide Web Consortium) 、 JavaScript の規格である ECMAScript は ECMA International のもとでそれぞれ標準化が進められており、その時々のニーズに沿った新しい仕様・規格が活発に議論されています。
各モダンブラウザは基本的にこれらの標準化された仕様に準拠するよう実装され、新機能の先行実装や非推奨になった機能の削除など、比較的頻繁にアップデートが行われています。
IE もバージョンが上がる度に徐々に Web 標準への移行が進み、最終バージョンである IE11 では比較的モダンブラウザに近いレンダリングや動作をしますが、 IE8 やそれ以前のバージョンはかなり癖があると言っても過言ではありません。
こうした癖のある古い Web ページや Web システムを動作させるため、 Microsoft が IE の後方互換性を維持するために実装した機能が Document modes です。
Document modes が使えなくなるということは、前述した二つ (ActiveX や VBScript)) も含め、 IE の過去バージョンでのエミュレート (互換表示) ができなくなることを意味するため、モダンブラウザへ移行するためには Web 標準や ECMAScript に準拠したコードへの修正が必要になります。
よくある例
<!-- Document modes でエミュレートするバージョンを指定 --> <meta http-equiv="X-UA-Compatible" content="IE=5">
<script> // attachEvent() は IE8 以前でしか動かない // showModalDialog() は多くのモダンブラウザで廃止済み document.getElementById('button') .attachEvent('onclick', function () { window.showModalDialog('modal.html'); }); </script>
<frameset cols="30%, *"> <frame src="side_menu.html" name="side_menu"> <frame src="main.html"> name="main"> <noframes> 現在ご利用のブラウザは frameset に対応していません。 </noframes> </frameset>
代替手段
Web 標準の HTML / CSS を書こう！
そして、 ECMAScript に準拠した JavaScript を書こう！
これに尽きます。
とは言っても、先にも述べた通り社内 Web システムではなるべく工数を抑えたいという事情があるので、 JavaScript については attachEvent や showModalDialog といったキーワードで検索して必要な箇所のみ修正を行い、レイアウト (HTML / CSS) については非常に面倒ではありますが、実際にモダンブラウザで表示させながら修正を加えていくしかないのかなと思います。
もちろん、 frameset などの分かりやすいものであれば、キーワードで検索して修正するのも一つの方法です。
特に古い quirks mode については Microsoft Docs で確認することができますが、これを一つ一つ検索して対応するのは至難の業です…
こうした対応をするにあたって、ここであえて社内 Web システムの良いところを挙げるならば、エンドユーザが社内の人であることが多いので、多少の不具合は何とかなるということでしょうか。
ただし、これもまた担当者の立場が外注や派遣だったりすると (ry
モダンブラウザ移行時に対応したいこと
ここからは、 IE からモダンブラウザへ移行する際、合わせて検討してもいいと思うことを挙げていきます。
ちなみに、どうせモダンブラウザへ移行するなら、 Angular や Vue.js で SPA 化したら？というのは無しの方向でお願いします。
あくまでも基本的な路線はなるべく工数をかけずに、でも、どうせやるなら一緒に対応できることは合わせてやってしまいたいという目線で考えてみました。
jQuery
IE を使用する社内 Web システムでは、 jQuery を使用しているケースが多いと思います。 (hrgm 調べ)
jQuery は 2021 年 6 月現在で 3.6.0 が最新バージョンとなっていますが、 IE で使用できる jQuery のバージョンは大きく二つに分類されます。
| IE | jQuery |
|---|---|
| ～ 8 | 1.n |
| 9 ～ | 2.n, 3.n |
IE8 と IE9 の間を境にして、 IE8 以前はバージョン 1.n 、 IE9 以降はバージョン 2.n と 3.n の jQuery が使用可能で、 jQuery のバージョンが上がれば使用できるメソッドなどに若干の違いが出ますが、バージョンアップにより軽量化やパフォーマンス向上の恩恵が受けられます。
また、各モダンブラウザについては、基本的に最新版とその一つ前のバージョンへの対応が明記されています。
もしモダンブラウザへの移行を考えているのであれば、合わせて jQuery の最新化も検討してみてはいかがでしょうか。
ただし、 jQuery のバージョンアップには少ないながらもいくつか破壊的な変更が含まれており、元々非推奨だったメソッドの削除などが行われているため、移行には多少注意が必要です。
jQuery 公式から提供されている移行用ライブラリを使用するか、もしくは社内 Web システム内で使用している jQuery の機能には一定の傾向があると思うので、例えば load メソッドなど多用している場合はキーワード検索で修正箇所を特定するなど、ピンポイントの対応でもいいかもしれません。
Bootstrap
Bootstrap も比較的使用されていることが多いと思いますが、つい最近 Bootstrap 5 がリリースされ、このバージョンから jQuery が不要になるなどの大きな変化がありました。
Bootstrap も jQuery と同じく、せっかくモダンブラウザへ移行するならバージョンアップを検討してもいいと思いますし、もし将来的に IE だけでなく jQuery からの脱却も視野に入れているならば、このタイミングで Bootstrap 5 へ移行してしまうのもアリかと思います。
かなり端折った Bootstrap の各バージョンとブラウザへの対応状況は以下の通りですが、 Bootstrap はバージョンが変わるとデザインや書き方も多少変わるため、 jQuery と同じくコードの修正やターゲットブラウザでの確認が必要になります。
| Bootstrap | jQuery | Browser |
|---|---|---|
| 3 | 要 (※) | IE8 ～, 各モダンブラウザ |
| 4 | 要 (※) | IE10 ～, 各モダンブラウザ |
| 5 | 不要 | IE 非対応, 各モダンブラウザ |
※ Bootstrap で用意されている Components を使用しない場合、 jQuery は必須ではない。
Bootstrap 3 のサポートは既に終了していますが、 Bootstrap 4 以降は基本的に jQuery と同様に各モダンブラウザの最新版とその一つ前のバージョンがサポートされます。
Bootstrap のマイグレーションについては公式ドキュメントにも記載があるので、これを見ながら対応すれば大丈夫だと思います。 (簡単だとは言ってない)
その他のライブラリについて
jQuery や Bootstrap といった有名なライブラリだけでなく、中にはあまり知られていないライブラリを使用していることもあると思います。
これらは既に開発が止まってしまっているケースも多く、今まで述べてきたような IE に依存する実装が内部でなされている場合は、別のライブラリへ切り替えるか自前で実装を行わなければいけません。
運良く開発が続いていてモダンブラウザへの対応がされていたり、何もしなくてもそのままモダンブラウザで動けばラッキーくらいに考えておき、基本的には対応が必要になると思っていた方が無難かもしれません。
社内 Web システムでは外部のライブラリを使用するために許可が必要だったりするので、あまり無いことだとは思いますが、過去または現在の担当者が勝手にライブラリを入れていたりすると、なかなか面倒なことになったりします…
IE を使い続けることはできないか
Microsoft による IE のサポートは終了しますが、アプリ自体が使えなくなるわけではないはずなので、おそらく継続して IE を使用することはできると思います。
ただし、サポートが終了するということはセキュリティアップデートも当然行われないため、特に企業内での既定ブラウザとして IE を使い続けることはお勧めできません。
それではモダンブラウザへの移行に伴い、これまで使用してきた社内 Web システムを必ず改修しなければいけないかと聞かれたら、そういうわけでもありません。
Microsoft Edge の Internet Explorer モード
ここまで色々書きましたが、 IE の後継ブラウザである Microsoft Edge には IE モードが搭載されており、実はこの機能を使用すれば、これまで取り上げた ActiveX コントロールや Document mode などをそのまま使用することができます。
もちろん、この IE モードにもサポート期限は存在しますが、現時点においては少なくとも 2029 年までのサポートが明言されています。
これはつまり、 2022 年 6 月に IE のアプリとしてのサポートは終了するものの、使用する Web ブラウザを Microsoft Edge へ移行してしまえば、さらにあと 7 ～ 8 年は今まで同様にレガシーな Web システムが利用可能ということを意味します。
各企業の方針にもよるとは思いますが、基本的に機能追加などを改修をほとんど行わない場合は Microsoft Edge への移行のみを行い、 Web システム自体には手を加えずに IE モードのサポート期限ギリギリまで粘るということも不可能ではありません。
しかし、機能追加や改修を頻繁に行うような Web システムになると、対応を先送りすればするほど IE モードのサポート終了まで技術的な負債を積み上げることになるので、やはりどこかのタイミングで Web 標準への対応を行った方が、長い目で見れば工数が少なくて済むという見方もできます。
この辺りは社内 Web システムの開発頻度や使用状況、モダンブラウザ対応を行うにあたってかけられる工数や費用によって変わってくるので、担当部門や各ステークホルダーと要相談になるかと思います。
おわりに
現在のブラウザシェアでは一桁台となりましたが、 IE はこれまで長きに渡り Web ブラウザのデファクトスタンダードの地位を守ってきました。
それ故にバージョンアップやサポート終了による影響力は甚大で、ここまでずっと Microsoft によって後方互換性が維持されてきたのも頷けます。
IE のサポートが終了すると言っても、前述した通り Microsoft Edge では引続き IE モードによって既存の Web サイトや Web システムを使用することができるため、一番取り残されているであろう社内 Web システムの Web 標準への対応はまだ先になるかと思います。
ただ、アプリとしての IE が無くなり、社内の既定ブラウザが Microsoft Edge を含むモダンブラウザへ移行することには大きな意味があると考えます。
それは、もし今後新規で Web システムを構築する場合、何の気兼ねもなく最新の Web 関連技術を使用することができるからです。
今はまだ涙をこらえて秀丸でコードを書いて IE を手動でリロードしながら開発をしていても (数年前の僕です) 、 Visual Studio Code でコードを書いて CLI でタスクランナーを走らせながらブラウザをライブリロードするなんて未来がやってくるかもしれません！ (適当)
でもこれ、偉い人が理解して許可してくれるかどうかは…おっと、長くなったので今日はここまで。
それでは、社内 Web システム開発に関わるすべての Web エンジニアに幸多からんことを (*˘人˘*)
