どう作る? Microsoft Edge に対応した相互運用性の高い Web コンテンツとは


Windows 10 が正式にリリースされて一カ月と少し経ちました。

私もふくめ Windows Insider Preview にご加入いただき、初期の Technical Preview からお使いの皆さんにとっては、まだそんなものか?、という感じかもしれません。

普及のスピードはどうかというと、本社の Windows and Devices Group の Vice President Yusuf Mehdi の 8 月 26 日の Tweet によれば、その時点で Windows 10 は 7,500万以上のデバイスで動作しているということのことでした。

公開 4 週間で 7,500 万台といういう数字は、控えめに言ってもけっして悪い数字ではないでしょう。少なくとも 3 年以内に 10 億代のデバイスで Windows 10 を動作させるという目標の 7.5% を一カ月足らずで達成したことなります。

この Windows 10 の普及のスピードは、Windows 10 の既定の Web ブラウザーである Edge の普及のスピードであるともいえます。

もともと日本は Internet Explorer 11 のシェアが高いこともあるので、この割合は今後 11 カ月足らずで (※ Windows 10 の無償アップグレードが 12 カ月であるため) その大部分は Edge へと置き換わることでしょう、たぶん。

StatCounter-browser-JP-monthly-201408-201508 

そこで今回の記事では、Internet Explorer 11 が Edge で置き換わる 10 数カ月後の未来を見据え、Edge に対応した Web コンテンツを作成する際の注意点について紹介したいと思います。

 

Microsoft Edge に対応した Web コンテンツを作成するには?

Microsoft Edge に対応した Web コンテンツを作成するために、なにか特別なことをする必要はありません。

Web 標準にしたがってコンテンツを記述すればそれが Edge に対応しているということになります。

逆に、いままで Internet Explorer との相互運用性を確保するためにしていた付け焼き刃的な対応は不要になるため、そういったものの実装を今後は取りやめる必要があります。

具体的には以下の 5 つの点です。

  1. ドキュメントモードの指定を行わない
  2. 新しい JS ライブラリ/フレームワークを使用する
  3. ブラウザープラグインを使用しない
  4. CSS ベンダープレフィックスを使用しない
  5. ブラウザーの検出を使用しない

ここからは、モダンブラウザの相互運用性のために意識すべきこの 5 つの点について紹介していきます。

 

1. ドキュメントモードの指定を行わない

ドキュメントモードとは、旧バージョンの Internet Explorer 向けに作られた Web コンテンツを、新しい Internet Explorer で閲覧した際に表示が崩れないようにレンダリングルールのバージョンを指定する機能です。たとえば、Web コンテンツの meta タグに以下のような指定があると Internet Explorer は IE7 のレンダリングルールを使用して描画を行います。

image

繰り返しになりますが、この機能はあくまでも古い Internet Explorer をターゲットとした Web コンテンツが、新しい Internet Explorer でもそれまでどおり描画が行われるように指定するものなので新しく作成する Web コンテンツには必要ないはずの指定です。

また以下は、IE5 から IE9 まで機能が提供されていた「条件付きコメント」と呼ばれる Internet Explorer のバージョンによる処理の分岐を可能にするための記述です。

image

さらに Internet Explorer を判断するためには、以下のような「CSS ハック」と呼ばれる、Internet Explorer の不具合を利用したものもありました。

image

これらの設定は、Edge を含む、Internet Explorer 以外の Web ブラウザーでは無視されますので、既存の Web コンテンツを Edge 向けに改修する場合は削除してください。もし、誰かに実装することを指示されたら断固として拒否することをお勧めします。

<参考>

 

2. 新しい JS ライブラリ/フレームワークを使用する

HTML5 が普及する以前の JavaScript のライブラリやフレームワークには、古い時代の Web ブラウザーをターゲットに作成されていて現在のモダンブラウザーでの仕様にそぐわないものがあります。また実際に、動作しない機能などもあります。

これから新規に Web コンテンツを作成する際には、最新の Stable (安定版) なバージョンを使用するようにしてください。

以下は、HTML5 が登場する以前から一般的に使用されている JavaScript のフレームワークと Internet Explorer 9 でサポートされているそれらのバージョンですが、可能な限り最新のものを使用するようにしてください。

フレームワーク Internet Explorer 9 で動作するバージョン
Cufon 1.09i+
jQuery 1.5.1+
jQuery UI 1.6.8+
MooTools 1.3+
Prototype 1.7+

<参考>

追記 : オンライン状態の Web コンテンツの JS ライブラリを手元で入れ替えて検証を行う方法について記事をアップしました。この方法を使用すると、手元にソースを用意しないでもバージョンの異なる JS ライブラリを入れ替えてテストを行うことができます。

 

3. プラグインを使用しない

現在の Edge はプラグインをサポートしていません。将来的に新しい JavaScript モデルの拡張機能や、Chrome や Firefox のプラグインが動作するようになるとのことですが、とはいえ、これから ActiveX コントロールや BHO が再びサポートされることはないでしょう。Java アプレットや SilverlightWindows メディアコントロールには別れを告げ、HTML5 の機能を存分に利用して同様の機能を実装しましょう。

image

以下は Web ブラウザーで一般的に使用されていたプラグインと、Web 標準技術である HTML5 の機能の対応表です。

機能 プラグイン ベース
テクノロジの例
標準ベースの
同等テクノロジ
詳細

ビデオとオーディオ

Flash、Apple QuickTime、Silverlight

HTML5 ビデオ および
オーディオ

ビデオオーディオ

グラフィックス Flash、Apple QuickTime、Silverlight、
Java アプレット

HTML5 キャンバス
スケーラブル ベクター グラフィックス (SVG)カスケード スタイル シート レベル 3 (CSS3) 切り替え およびアニメーションCSS 変換WebGL

キャンバスSVG切り替えアニメーション切り替えWebGL

オフライン記憶域

Flash、Java アプレット、
Google Gears

Web StorageFile APIIndexedDBアプリケーション キャッシュ API

Web StorageFile APIIndexedDBアプリケーション キャッシュ API

ネットワーク通信、リソース共有、
ファイル アップロード
Flash、Java アプレット HTML5 Web メッセージングCross-origin resource sharing (CORS) チャネル メッセージングXMLHttpRequest

 

さらに、現代には jQuery UI に代表されるリッチな UI コントロールライブラリもありますし、有償のコントロールともなれば、ActiveX 顔負けの高機能を実装しているものもあります。とくに以下の 2 社は、提供しているコントロールの高機能さに加え、過去に ActiveX のコントロールも商品として提供していたことから ActiveX から HTML5 への移行についての造詣も深いので、ActiveX から HTML5 への移行でお悩みの方は問いあわせてみても良いでしょう。

 

Flash コンテンツとPDF

Edge は、前述のとおりプラグインをサポートしていませんが、Flash コンテンツや PDF ドキュメントは、Edge そのものがプレイヤーとしての機能をもっているため再生することができます。そのため Edge では、艦隊これくしょん などもプラグインなしでお楽しみいただくことができます。

<参考>

 

4. CSS ベンダープレフィックスを使用しない

今からほんの少しだけむかし、またHTML5 が正式勧告される以前、各ベンダーの Web ブラウザーで早期実装された CSS3 の機能を使用する際には、ベンダープレフィックスという接頭辞を付ける必要がありました。これはブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、 それが拡張機能であることを明示するために付けていました。

しかし、現在では、CSS3 は正式勧告となっており、ブラウザーもベンダープレフィックスを使用なくても処理が行えるようになっているので、これらは使用しないようにしてください。

また、使い方によっては意図しない動作の原因となります。たとえば以下のように CSS の指定に –moz- という接頭辞を付けた場合、その書式は Firefox でしか適用されません。

image 

 

5. ブラウザーの検出を使用しない

前述の Internet Explorer 固有の機能である条件付きコメントや、User-Agent から取得した文字列でブラウザーを判断し、使用する機能を別ける処理は実装しないでください。たとえば、以下のコードは Web ブラウザーの返す User-Agent から文字列 “MSIE” を探し、見つかった場合はバージョンを返すようにしています。しかし、Internet Explorer の User-Agent に “MSIE” という文字列が含まれるのは IE10 までなので、IE11 以降はこのコードでは Internet Explorer を判別できません。

image 

ブラウザーの種別で実装されている機能を判別すべきでない理由

User-Agent に含まれる文字列からブラウザーを識別し、実装されている機能を判別する方法では、検出の対象となるすべての Web ブラウザーのリストを用意する必要があり、どの Web ブラウザーがどのような機能をサポートしているかもきちんと把握しておく必要があります。

しかし、現在のように PC だけなく、さまざまなモバイル機器の Web ブラウザーが溢れており、かつ Web ブラウザーの機能も頻繁にアップデートされる状況においては、新しい Web ブラウザーのリリースや、検出対象となっている Web ブラウザーの機能がアップデートされるたびに処理内容を書き換える必要があるため現実的ではありません。また、現在の Web ブラウザーの多くは User-Agent を偽装する機能を持っているため、そういった機能を使用された場合には正しい機能を割り当てられません。

 

これからの Web ブラウザーの機能判別

Web ブラウザーのサポートしている機能を判別する際には、Web ブラウザーの種別ではなく、機能そのものを検出するようにしてください。

JavaScript では if 文を使用することで、実装されているオブジェクトや関数の有無を判断できます。

たとえば、以下のコードでは getContext 関数の有無を調べ、Canvas がサポートされているかどうか判断しています。

image 

また、HTML5 関連の機能については、Polifill などの使用される modernizr を使用すると、さらに簡単に機能を検出することができます。

image

<参考>

 

相互運用性を確認するためのチェックツール

前述の 5 つの項目は、Microsoft Edge 対応の Web コンテンツを作成するためのものであるということはもちろん、他のモダンブラウザーとの相互運用性の高い Web ページを作成するたるめのものでもあります。

これらがきちんと実装されているかどうか確認するためのツールが Edge の開発者むけポータルサイトである dev.modern.ie に用意されています。

このツールにアクセスするには以下の URLにアクセスし、ページ内にある 「Quick-scan a site for common coding issues」とキャプションのあるテキストボックスに対象の URL を入力し、虫眼鏡ボタンをクリックするとページのスキャンが行われます。

image

前述の 5 つのポイントは、検出結果の 「Modern web interoperability」の項目に表示されます。

以下のものすべてに ! (エクスクラメーション) マークがついていなければ Edge 対応がされており、相互運用性が高い Web ページと言えます。

  1. Render Mode (ドキュメントモードの指定)
  2. Legacy plug-ins and features (プラグイン使用の有無)
  3. Frameworks & libraries (古い JavaScript ライブラリ使用の有無)
  4. Browser Detection (ブラウザー検出)
  5. CSS Prefixes (CSS ベンダープレフィックス使用の有無)

なお、このチェックツールは GitHub でソースコードが公開されており、これを使用してローカル環境に Site Scan ツールをホストすることができます。

Site Scan をローカル環境にホストするための具体的な方法については、GitHub のリポジトリ内の README.md を参照いただくか以下のドキュメントをご参照ください。

 

まとめ

今回は Microsoft Edge に対応した Web コンテンツを作成する際に意識すべき 5 つのポイントについて紹介しました。

内容をご覧なってもお分かりのとおり、なにか特別な作業を追加するのではなく、逆に今まで行っていたことをやめることが Edge に対応することである、ということがご理解いただけたと思います。

また、来年 (2016) の 1 月 16 日からは IE9 以前の Internet Explorer はサポートされなくなるということで、レガシーブラウザのサポートも終了に差し掛かっています。

これから Web コンテンツを作成する際にはぜひ Edge をターゲットとしていただければと思います。

 

おしらせ

企業のイントラネット内にある既存 Web システムを対象とした Internet Explorer 11 への移行セミナーを行います。

Windows 10 の Internet Explorer 11 に用意されている豊富な後方互換性機能を使用して、既存システムにできるだけ手を加えずに継続して運用する方法、Edge との併存方法などについて紹介します。

企業の IT 担当者の方はぜひご参加いただけれればと思います。

開催日時

2015年9月14日(月)
14:00-16:40 (受付開始 13:30)

2015年 10月2日(金)
14:00-16:40 (受付開始 13:30)

会 場

品川フロントビル 会議室

港区港南2-3-13 品川フロントビルB1階

FUKURACIA
品川クリスタルスクエア

港区港南1-6-41
品川クリスタルスクエア
2階・3階

対 象

・情報システム部門において、システムの企画・ 開発・
運用をご担当されている方、
・Web システムの改良や バージョンアップを検討されている方

定 員

各100名

参加費

無料(事前登録制)

主 催

日本マイクロソフト株式会社

お申込Webサイト

https://aka.ms/IEmigration0914

https://aka.ms/IEmigration1002

Real Time Analytics

Clicky

Comments (0)

Skip to main content