ふろしき Blog

コンテンツサービスを科学する株式会社ブートストラップ代表のブログ

元W3Cの中の人と、エンタープライズのビジネスチャンスについて語った話

変化を好まないSIですが、HTML5が開発方法に変化することを求めている。

昨年、私はメディアやカンファレンスなど様々な場所で、その意義について発信してきましたが、「HTML5を使えば"今まで以上"のことができるのだろう」「それなら、あまり関係ない話なのかも」なんて油断していたエンジニアにとっては、「今も変えろ」というのは衝撃的な事件だったに違いありません。

そんな混乱を、W3Cという異なる立ち位置にある組織に所属しながら、ビジネスにできるのではないかと考えた人がいます。

彼と出会ったのは、オープンソースカンファレンス2013/Fall。あまり人前に出たがらないキャラクターなので、名前は伏せておきます。

イベントで会った彼は、凄い熱意でW3Cのイベントに誘ってくるもだから、私の脳はしっかりと彼の顔と名前を刻み込みました。しかし、OSC.Enterprise 2013で再開した時、彼は私のことなどすっかり忘れていました。私も人と会うタイプなので、何度かやらかした経験がります。全く責める気になれません。

2枚目の名刺を渡された時に、彼は一言
「この名刺、前職のものだから渡すべきか悩むんですけどね」

★ W3Cをやめて、エンタープライズ業界に入った

つい2ヶ月前に、あれだけW3Cイベントをゴリ押ししていた彼は、数年務めたW3Cを辞めていました。その名刺は、名前の部分以外は機能していません。

彼は以前より、Web標準技術とアカデミックな場で繋がるのでなく、ビジネスとして繋がりたいという想いを持っていたそうです。知人の誘いを受けて、エンタープライズの世界へやってきたとのこと。中国に依存しない新しいオフショアを支援する、ベンチャー企業に入っていました。

W3Cにいて何を感じたのか

彼は少し前まで勤めていた、W3Cについて語ってくれました。

★ エンタープライズとWeb標準

私はW3Cの議席に、GoogleやMicrosoftなどがちがちのビジネスプレイヤーがいるので、組織の内部はかなりビジネス色の強い場だと思っていました。しかし彼いわく、W3Cは非常にアカデミックな場だそうです。

言われてみれば、UNIXから始まったLinuxの文化、オープンソースの起源は、非常にアカデミックなものだったと本で読んだことがあります。NTT出版の「Linuxはいかにしてビジネスになったか―コミュニティ・アライアンス戦略」だったと思います。5年以上も前に読んだのではっきりは覚えていませんが、オープンテクノロジーは、そういう性質を持ちやすいという特性を持っている。

ただ、Web標準はコモディティ化された技術でありつつも、プラットフォームを取り巻くエコシステムに方向性が左右されるという状況に置かれています。ブラウザなどのプラットフォームを作っているベンダと、共に手を取りビジネスを作っていこうという団体/企業側に、技術進化が最適化されていくという環境に置かれています。

こうした背景もあるのでしょう。彼は「日本のエンタープライズのプレイヤーはもっとWeb標準に関わるべきだ」と語っていました。昔はそいういう企業が多く関わっていたのに、今は殆どいなくなったそうです。日本のSI所属する私の目から見ても、エンジニアたちはブラウザを単なる無料のクライアントプラットフォームと考え、今までもこれまでもずっとこのままだと信じて疑わない雰囲気が感じられます。システムがこれだけWeb標準技術が依存しているのに、進化の動きを制御できない状況にあるのは、果たして安定して長く使えるプラットフォームと言えるのか。

しかし、これも時間の問題だと私は考えています。

今のSIは、Web標準に直接的に関わるメリットがあるようには見えません。ブラウザなどのプラットフォームを開発する側が、エンタープライズに新しい価値を運んでくるのではないかと睨んでいます。なんだかんだで、事件が起こる直前あたりに何かしらのソリューションが生まれて、SIが二次的にWeb標準へ関与するようなモデルになると予想しています。IT業界におけるSIというデカい市場を、無視できないでしょう。

本来オープンテクノロジーはフリーのソフトウェアなんかではなく、オープンなコミュニティとの関わり、貢献によってビジネスが成立させるモデルだったはずです。どこかのタイミングで、何かしらの形で、正常な姿に戻らざる得なくなると考えています。

★ WebStorageがW3C勧告になっていた件について

少し話が変わって、標準化の話に。WebStorageは、IE8から実装されている少し歴史のあるWeb標準ですが、2013年の夏、突如としてW3C勧告化し、私は驚きを隠せませんでした。標準化の動きを追っていれば、突然というわけでもなく、ごくごく普通に正式なプロセスを踏んでいるのは確かです。

ただ、この件について「あまりにも静かだから、若干驚いた。いや、自分の中では結構ニュースだったかも」と彼に伝えた所、「いや、ニュースだと思うよ。あれはW3C側から見ても。」とのこと。

HTML5も2014年にW3C勧告になると、一時期すごく騒がれていました。しかし、これだけエコシステムが発達し、HTML5に強く依存したビジネスを数多く見ていると、W3C勧告化はメディアで目立つこと無く、いつの間にか終わってそうな気がします。

なんとなくそんな空気感を察した私は、技術評論社のSoftware Design 2014年2月号にて「目利きによる業界予測、2014年IT業界はどうなるのか?」という記事を執筆させて頂いた際、「2014年はHTML5が、W3C勧告!W3C勧告!」だなんて派手に騒いだりはしませんでした。一言触れる程度で、ささっと終わらせました。むしろ、そのことに触れなくてもいいんじゃないだろうかとさえ思いました。

「そもそも、今回のHTML5のW3C勧告化って、かなり限定的ですよね・・・」なんて事を彼が言っているのを側で聞いていると、標準化のプロセスより、エコシステム側の動きを追う方が理にかなっているように思えました。きっとこれからは、そういう時代なのでしょう。

★ オープンテクノロジーとMicrosoftの意外な関係

彼は「Microsoftはオープンテクノロジーに対して、下手したら一番ぐらいに貢献しているのではないか」と語っていました。Linuxに多額の出資を行い、オープンソースの発展に大きく関与していたのは、実はMicrosoftだったと。その真偽はわかりませんが、確かにフロントエンドの世界では、jQuery FoundationにSilverlightの開発者をフルタイムで関わらせるなど、Microsoftはその進化に強く関与しています。Web標準も同様にです。Microsoftがいなかったら、Web標準技術の進化は今とは異なる状況だったに違いありません。

ただ、巨人は時間を経ると嫌われる、批判の対象になるというのは、人間の遺伝子に刻まれたものだから仕方がないでしょう。私自身、オープンテクノロジーに関わる者として、不平を言いたくもなります。こうあって欲しいんだけどなぁ、なんてことを思ったりもします。これは別に私だけが特別というものでもなく、ベンダ製品サイドであるMicrosoftと対極に位置してしまっている、オープン技術サイドの思想の課題に思えます。

「あそこまで貢献しているのに、オープン系の世界では嫌われ者になってしまっているMicrosoftは不憫でならない」と、話題の最後に彼はこう締めくくりました。

これは私の主観ですが、サーバサイド側とフロントエンド側とでは、その嫌われ方が少し違うと感じています。フロントエンドは、「ベンダロックインだから嫌い!」と言うよりも、「IE6〜8が技術的に問題を抱えているから嫌い!」という状況に見えます。IE8以下は、Netscape戦争の延長上にある時代のブラウザですから。そんな古い思想のブラウザを、仕事として扱わなくてはいけない人たちからすると不満しか無いでしょう。まぁ実際の所、IE8はMicrosoft自身も暗に厄介者扱いしているように見えますが。

理由はなんであれ、最終的に「不憫」になるあたり、巨人の悩みは永遠に尽きないのでしょう。IEって業務系だと、結構重要な機能を持っているんですが。特にWindows 7系だと、気がつかないうちにその恩恵を受けているケースも多いでしょう。

HTML5が生み出した新しいビジネス価値

嫌われ者で不憫なIEですが、現場的視点からビジネス視点に見方を変えると、結構ポジティブだったりします。

★ やはり、IE11のリリースは大きい

Web標準側の人間だった当時の彼の目から見て「IE11のリリースは衝撃的だった」と語っていました。まさか、W3Cのような全く異なる立ち位置の人間から、そんな言葉が出てくるとは思いもしませんでした。「何が衝撃的だったのだのか?」と私が問うと、まるで答え合わせのように「ドキュメントモードの非推奨」と返ってきます。

「あれはもはや、一つの市場を作ってもおかしくないんじゃないか?」と。まさに昨年末、私がしつこいというレベルで言い続けていたことを、目の前で再現するように説明され、度肝を抜かれました。

今、企業のイントラネットには、Quirksモード/ドキュメントモードに依存したWebシステムが大量に動いてます。Windows 7へのアップグレードで、更に深く依存してしまっているという状況です。それが、Windows 7のアップグレード先のOSでは、サポートされなくなるという状況に陥っています。日本は韓国ほどActiveX依存していませんが、何かしらインパクトがあることは間違いないでしょう。

「Windows 7のEOLの、だいたい1年前ぐらいが稼ぎ時かもですね。あと5年ですか。」なんてことを彼は言っていました。私の考えは少し違います。今の時代のステークホルダの傾向からして、「どのあたりのタイミングでメディアが騒ぐか」の方が重要と考えていたりします。

3年後か、それとも直前か。インターネットメディアの場合、今のところトリガを渡すのはそんなに難しいことでもないので、やはりここでもエコシステム側であるベンダの動きに着目するのが、有利な気がしています。ユーザ企業側がバズワードに反応することも少なくないので、何か新しく言葉を作るかもしれません。

★ スマートデバイスはどうなるのか?

スマートデバイスについて、彼は恐らくWeb標準側の考えだからなのでしょう、ユーザビリティの高い端末とそのデザインが武器になると睨んでいました。対して私は、IT管理者の制御下に置きやすい、セキュリティを制御しやすいことが、より直感的で解りやすいスマートデバイスが出てくると今よりもっと広まるのではないか、と主張しました。システム利用者でなく、ステークホルダ側が重視する点に多くの判断材料を与えることができれば、導入されやすいと考えているからです。ここは意見が割れました。

IE11からスマートデバイス最適化の道に進んだので、Active Directoryに完全対応が進むかもしれないWindows 8.2とか、IE12の進化、ChromeやFirefoxのエンタープライズ向けサービスの多様化に、私はかなり期待しています。今が黎明期なのは、間違いなと感じています。バズワードとしてのHTML5は2013年をピークに下がっていくのでしょうが、エンタープライズでのソリューションの多様化、ビジネス化は、これからと考えています。

★ オフショアの新しい道

本記事の序盤でも述べましたが、彼はベトナムの安い人件費を使って、新しいオフショアサービスを提供するベンチャー企業に勤めています。

カヤックのセブ島の話なんかを見ていると、世の中の流れ的には、もはや中国に道を見つけようという考えはどこにも残されていないという流れです。日本企業のことですから、大連のIT企業をすぐに切ったりはしないでしょうが、これから中国で新しく開拓しようというモチベーションはすっかり失われてしまいました。

つい数年前、オフショアは大連が当たり前で、それこそ発注直前にまで持っていった私にとっては驚きです。もはや脅威です。恐ろしく短い期間でビジネスモデルが崩壊していくのを目の当たりにして、「オフショアはエンタープライズに向いているのか?」なんていう、そもそも論を始めたくなりました。

ただ、日本は昔から海外のリソースに頼る文化があるので、オフショアをビジネスとして成立させれるのか、これからも真剣に取り組まなくてはいけないようにも感じています。彼はこの新しいリソースに、どのようなブランドを持たせていくか悩んでいるようです。今のフロントエンドの特殊性を合わせることで、アイデンティティをもたせようという戦略を、一つの選択として持っているようでした。日本の場合は事例が大切なので、「使ってもらうこと」からスタートしなくてはいけないのですが、きっと彼はあの熱意で、困難を乗り越えていくのでしょう。

彼を、私のコミュニティが運営するイベントに登壇させようという計画があったのですが、色々事情があって無くなってしまいました。当面、彼と会う予定はありません。2ヶ月もしたら、また顔を忘れられているかもしれませんが、それでもきっと旨い酒が飲めると思います。

そのうち、強引にでも登壇させよう!
・・・目立ちたくないって怒られそうですが。

Chrome for Business - 企業向けブラウザとしてのChromeの機能、まとめ

Google Chromeは、どちらかと言えばコンシューマー向けブラウザという印象が強いでしょう。実際にそれを裏付けるデータがあります。「StatCounter GlobalStats」の世界ブラウザシェアの内容を結果を確認すると、以下の結果が得られます。

f:id:furoshiki0223:20140113195217p:plain
青がInternet Explorer緑がChrome

企業の営業時間にIEのシェアが上がり、休日にChromeのシェアが上がるあたり、やはりChrome=コンシューマーに利用される傾向がある、IE=企業に利用される傾向がある、と結論付けざる得ないでしょう。実際にこれらのブラウザは異なる指針を持って開発が進められており、Chromeは短いリリース頻度による最新技術指向、IEは長いサポート期間による安定指向という傾向があります。

とはいえ、Chromeもエンタープライズ市場を捨てているわけではありません。Googleは「Chrome for Business」というサービスを提供しており、企業への導入に必要な様々な機能を提供しています。

このサービスはやや煩雑で、その理解に時間を要します。そこで、本記事ではこのサービスについて、要件定義段階で判断材料に使えそうな情報を掻い摘んで紹介します。細かい部分は端折ってはいますが、サービスの全体像についてある程度把握できよう整理しています。

  1. インターネットを必要としないインストール
  2. ポリシーによる運用環境の管理
  3. 古いIE向けWebコンテンツの維持
  4. サポートライフサイクル

1. インターネットを必要としないインストール

企業向けの場合、インターネットに接続されていない環境下でブラウザのインストールが求められる場合が多いでしょう。Googleは、Chromeをローカルのみでインストールを完結できるMSI型のインストーラーを提供しています。

ダウンロードは、以下のサイトで行えます。
https://www.google.com/intl/ja/chrome/business/browser/admin/

「Chrome MSI をダウンロード」をクリックすれば、利用許諾が表示されます。「合意してインストール」という記述がありますが、これは表現として誤りです。このボタンをクリックすると、ファイルのダウンロードが始まるだけで、インストールが開始されるわけではありません。

f:id:furoshiki0223:20140113210112p:plain

あとは、ダウンロードされたファイル「GoogleChromeStandaloneEnterprise.msi」を、インストールしたいコンピュータへ配布し、実行するだけで完了です。

ただ、これはあくまでローカルでインストールができる方法でしかありません。大規模な企業システムへ適用する場合、グループポリシー管理やレガシー資産の維持が必要となるでしょう。これらの対策は、次章以降で説明します。

2. ポリシーによる運用環境の管理

開発者が意外と見落としがちなのが、IT管理者によるポリシー管理の有無です。

企業系システムでは、IT管理者側でシステム利用者ができること・できないことを細かく制御したいという要望に、答えることが求められることもあるでしょう。Firefoxはシステムごとに利用するブラウザをバイナリレベルで分けて、ガチガチにカスタマイズして動作させることが可能です。しかし、ChromeやIEは基本的に一つのOSに一つのバージョンしか利用できないため、システム単体だけで判断が行えないというリスクを負っています。

IEは、Active Directoryの「グループポリシー」やユーザによる「設定」により、ブラウザの動作を制限させることができます。特にWindows7世代は、この機能に頼って古いシステムを動かしているケースも少なくありません。Chromeはこの代替手段として、「Chromeポリシー(※ Group Policy APIと呼んでいる箇所もあり)」という独自のポリシー管理機構を持ちます。

以下のURLにて、説明されています。
https://support.google.com/chrome/a/answer/187202

★ ポリシーの設定値

Chromeでは、200を超える細かいポリシーの設定を持ちます。Chromeブラウザから「chrome://policy」にアクセスすると、ポリシーの設定値を確認できます。

それこそ、アクセスできるURLのホワイトリスト・ブラックリスト、ブックマークバーを有効化させるかといった基本的な設定から、プロキシサーバのURL、プラグインを有効化させるサイトのURLに至るまで、幅位広い範囲にその影響は及びます。

なお、個々のポリシーの意味は、以下のURLにて説明されています。
http://www.chromium.org/administrators/policy-list-3

★ 設定を行う手段

ポリシーは、Chromeでは以下3つのレイヤーから操作できるようにしています。

f:id:furoshiki0223:20140114015656p:plain

最上位はChromeでログインすることにより反映される設定で、Googleアカウントレベルで指定するポリシーです。それを、OSが持つActive Directoryなどにより指定されたポリシーで上書きします。OSに依存しているのでなく、OSで管理されたアカウント単位で設定するものです。そして最終的には、デバイス/OSレベルで個別設定されたポリシーで上書きされます。レジストリレベルと考えるとしっくりくるでしょう。

言うまでもなく、最上位のクラウドベースは、インターネットがあること前提です。IT管理者が、「http://admin.google.com」へアクセスし管理対象のGoogleアカウントユーザの設定を指定します。

インターネットに依存させないレベルでは、OSユーザポリシー、マシンポリシーなどが該当します。これらはOSが持つ管理機構次第であるため、別途OSごとにその設定方法を理解しておく必要があるでしょう。マシンレベルにまで達すると、Windowsの場合、システム利用者側で設定をインストールする手間が発生するため、規模によっては現実的でないかもしれません。

筆者の感覚として、国内のエンタープライズに適した利用方法は、イントラネット内で完結し強制力も高い「OSユーザポリシー」あたりが妥当に思えます。

ここで紹介した以外には、帯域外管理を利用してポリシーの設定をプッシュさせるなんていう方法も提案されています。Googleアカウントにログインしていなくても設定が強制されるため、システム利用者の環境をガチガチに固めることが可能です。

以下のURLに、Google公式ドキュメントがあります。
https://support.google.com/chrome/a/answer/187202

3. 古いIE向けWebコンテンツの維持

Microsoftがバージョン依存化しざる得ないことを暗に認めてしまっているIE8以下向けに作られたWebコンテンツ・Webシステムは、Chromeの場合そのままでは動かない可能性があります。

企業向けChromeは、こうした古い資産の維持を運用しなくてはいけないことを想定しており、IEへの切り替え、エミュレートするバージョンの指定が行える仕組みを持ちます。

これを、「レガシーブラウザサポート(LBS)」といいます。
https://support.google.com/chrome/a/answer/3019558?hl=ja

考え方としては、以下のイメージです。
f:id:furoshiki0223:20140114032852p:plain
Chrome向けにアクセスするとChromeが起動し、レガシーIE向けにアクセスするとIEが起動するというもの。言うまでもなく、この機能はWindows限定になります。上記のような動作を実現するために、IEとChrome両方にプラグインのインストールなどの対処が必要になります。

4. サポートライフサイクル

Chromeは、IEのような長いサポートライフサイクルも、FirefoxのESRのような特定のバージョンを一定期間サポートする仕組みも持っていません。非常に短い周期でバージョンアップが必要になります。しかし、これはエンタープライズユースでは現実的とは言えません。バージョンアップ前の動作テストに十分な時間を割きたいところです。

Chromeは自動アップデートが必須というわけでなく、2章のグループポリシーを利用すれば、アップデートのタイミングを制御することができます。詳細は、以下のURLにて解説されています。
https://support.google.com/chrome/a/answer/187207?hl=ja

最後に

「Chromeで企業システムを動かすなんてとんでもない!」なんて思われがちですが、ユーザ企業が標準ブラウザとしてIE8を選択してしまったケースでは、その制約から、選択に含めざる得ないことも少なくないはずです。Windows 7世代のWebシステム開発では、IEだけでは実装が困難な難しいなんてことも出てくるはずです。

ただ、Chromeがパーフェクトでないのもまた事実。ガッツリActive Directoryで染めてしまっている場合は、管理がかなり煩雑になったり、新しいポリシーの適用に多くのコストを必要とすることもあります。一長一短ですね。

意外とGoogleも、こういう面白いソリューションを持っているんだという紹介でした。

Compat Inspector - ソースコードからIE独自機能を機械的に検出しWeb標準へ置き換えさせる方法

古いWebコンテンツではIE独自の機能を利用しないことには、リッチな機能を盛り込むことが実質的に不可能という状況でした。しかし、IE9以上からはWeb標準への準拠が高く、Microsoft側でも、IE独自機能に依存しないWeb標準へ準拠したコンテンツ作りを推奨しています。

IE独自機能はバージョン8以降削除される傾向にあり、見落とされると、Webコンテンツのライフサイクルへ悪影響を与えてしまいます。百害あって一利なし、徹底した排除が求められています。本記事では、この作業を人間の感覚でなく、機械的に行う方法について解説します。

★ 誰だって、IE独自機能は機械的に検出したいはず

チェック作業を人の手で行うと、必ず見落としが発生してしまいます。何がIE独自実装で何がWeb標準化を見極めることができないエンジニアに制作/開発を行わせる場合、ソースコードを逐一チェックするのでなく、コンピュータにより機械的にチェックできるようにしたいはずです。

B2BのようなIEのバージョンで縛り開発を行うケースでは、テスト環境が絞られるため、IE独自機能による作り込みの検出をより困難にさせます。ソースコードレビューによるチェックも効果の高い対策ですが、大規模開発ではこれをプロジェクトマネジメント側で可視化し評価できるよう、機械的にチェックできる仕組み作りが求められます。

★ 機械的な検出には「Compat Inspector」が使える

こうしたニーズに応えるため、Microsoftは「Compat Inspector」というツールを提供しています。Compat Inspectorを利用すれば、IE独自機能を検出し、一覧として列挙させることができます。そして大抵の場合は、どのWeb標準に置き換えるべきかアドバイスを行ってくれます。

JavaのFindBugsのように、開発のワークフローに組み込んで活用するのに向いているでしょう。

▼ Compat Inspector
http://ie.microsoft.com/testdrive/html5/compatinspector/

1. Fiddlerのインストールから実行まで

Compat InspectorはJSライブラリであり、検証先のHTMLドキュメント内にScriptタグで埋め込むことにより利用することができます。ただ、開発版から商用版へ切り替えを行う際に、ソースコードに手を加える事を嫌うケースが多いはずです。ビルドプロセスへ組み込むにも、それなりの作り込みを要する上、無駄にバグを作りこむリスクを負うことになります。

こうした背景もあり、Compat Inspectorは単独でなく、「Fiddler」というプロキシツールと併用するのが一般的です。Fiddler側に設定さえ作り込めていれば、1クリックでCompat Inspectorを利用できるため手軽です。また、最近のMicrosoftには珍しく設定をテキストベースで行うという特徴を持ち、環境の配布が容易で大規模での活用にも適しています。

1章ではまず、Fiddlerのインストールを行ってみましょう。
f:id:furoshiki0223:20140102121606p:plain

▼ Fiddlerのダウンロード
http://fiddler2.com/get-fiddler

  • Windows版 : .NET2版と.NET4版が提供されています。Windows 7には.NETの3.5.1がインストールされているため、前者の.NET2版を選択するとトラブルリスクも低いでしょう。
  • Mac/Linux版 : MacやLinuxのようなUNIXベースの環境では、Xamarin社が開発するMonoという.NET互換フレームワークをインストールする必要があります。

f:id:furoshiki0223:20140102112223p:plain

▼ インストールの流れ(Windows版)
f:id:furoshiki0223:20140102111359p:plain

▼ Fiddlerの起動方法(Windows版)
f:id:furoshiki0223:20140102111719p:plain

2. Compat InspectorをFiddler側へ組み込む

前章でFiddlerを実行するまでの流れは、理解できたかと思います。FiddlerはWebサーバとWebブラウザの間を繋ぐ、ただのプロキシツールです。Compat Inspectorをボタン一つで起動できるようにするには、個別に設定が必要です。本章では、この設定方法について説明します。

f:id:furoshiki0223:20140102121909p:plain

先述した通り、Compat InspectorはただのJavaScriptライブラリです。HTMLドキュメント上から呼び出せるよう、Scriptタグで参照させることで利用可能になります。Fiddlerのプロキシとしての特性、機能を活用して、検証対象のWebページにScriptタグを埋め込ませてWebブラウザに読み込ませます。

簡単に「Scriptタグを埋め込む」とは言っていますが、この処理は地味に複雑だったりします。というのは、埋め込みの条件は「全てのScriptタグの読み込みが終わった後」とか、コンテンツタイプはこれじゃないといけないとか、色々な判定処理をFiddler側にスクリプトとして記述し、読みこませなくてはいけないからです。

しかし臆する必要はありません。必要なコードスニペットは、こちらで用意しています。以下の手順に従い、設定ファイルへコードスニペットを埋め込みましょう。

メニューバー「Rules」→「Customize Rules…」
f:id:furoshiki0223:20140102120722p:plain

メモ帳で開かれた「CustomizeRules.js」内に、こちらのカズタマイズ済みの設定ファイルを丸々コピー&ペーストして下さい。ファイルを保存したら、設定は完了です。(※ Fiddler 2.4.5.8でテスト済みです。)

★ インターネット接続できない環境下での利用方法

SIの案件の場合、インターネット接続が禁止された環境下で検証作業を行わなくてはいけないこともあるでしょう。この場合、先ほど丸ごとコピー&ペーストした「Customize Rules…」の内容で、一番下にある以下の行に修正が必要です。

    // Perform the injection at the detected location
    oSession.utilSetResponseBody(
        sBody.Insert(pos, "<script src='http://ie.microsoft.com/testdrive/HTML5/CompatInspector/inspector.js'></script>")
    );
}
}

上記の「sBody.Insert」で指定されているsrcのURLの内容をダウンロードし、イントラネット内のアクセス可能なサーバへ配置し、URLをそちらへ向けて下さい。Compat Inspectorの本体ファイルである「inspector.js」は、インターネット上のリソースへアクセスしない仕様であるため、ローカルで検証処理を完結させることが可能です。

3. Compat Inspectorの実行

2章の設定が正常に完了している場合、メニューバー「Rules」に「Use Compat Inspector」が追加されています。チェックを入れると、Compat Inspectorが有効化します。

有効化している状態で、早速Webサイトへアクセスしてみましょう。IE、Chrome、Firefox、どれでも良いので、ブラウザを起動してテスト対象ページへアクセスして下さい。

一点、注意が必要です。「http://furoshiki.hatenadiary.jp/」のように省略形でなく「http://furoshiki.hatenadiary.jp/test」のようにアクセス先のページを明示するようにして下さい。どうも前者のようなURL表記だと、動作しないようです。画像のように、赤・黄・青の枠と数字が表示されれば成功です。

枠内をクリックしてみましょう。以下のような一覧が表示されます。

f:id:furoshiki0223:20140102232033p:plain

どのような対処が必要かについては、参照されたリンクの内容を確認することになります。リンクで参照されているドキュメントはデフォルトでは英語ですが、「/en-us/」を「/ja-jp/」に修正すると日本語化されます。

http://msdn.microsoft.com/en-us/library/ie/ff986088(v=vs.85).aspx
↓
http://msdn.microsoft.com/ja-jp/library/ie/ff986088(v=vs.85).aspx

f:id:furoshiki0223:20140106110326p:plain

4. 問題に対する対応手順

各色には、以下の意味を持たされています。

Info 許容状態。ユーザによって許容した状態。JSライブラリの検出も行う。
Warning 警告状態。将来的に動かない可能性があり、修正が求められる。
Error エラー状態。既に動かない、致命的な問題を持つ状態。

青色は許容状態なので、カウントは不要です。jQueryなどのJSライブラリの検出も行います。品質をチェックする際に、参考程度に確認して下さい。黄色赤色は対処が必要な項目です。対処としては、以下2種類のワークフローをCompat Inspectorが想定しています。

  1. 対策を行わない。無視する。許容する。
  2. 対策を行う。ソースコードに修正を加える。

★ 1. 対策を行わない。

対策を行わない場合、Infoステータスへ遷移させ、青色に変えます。右の画像にもある通り、Verify用のチェックボックスが付いているため、ここにチェックを入れます。この状態でWebページのリロードを行うと、黄色や赤色は、青色に状態を変えます。

もちろんですが、対策を行わないのはリスクを伴うため、有識者と相談し、この対処が正しいか確認を行う必要があります。

★ 2. 対策を行う。

対策を行う場合は、デバッグ作業を経て動作を確認しながらソースコードの変更を行う必要があるでしょう。

Compat Inspectorにはこれを補助する機能があります。Debugのチェックボックスにチェックを入れて下さい。

F12開発者ツールで確認すると、問題箇所に「debugger」という文字列が埋め込まれています。これはブレークポイントを表す文字列で、開発者ツールを起動している場合は、JavaScriptの処理がここで一旦停止します。

5. 本当にIE独自実装は全て排除すべきなのか?

インターネット向けのサービスの場合、IE8以下のWebブラウザに対応が求められる場合があります。IE8以下は、Microsoft自身も独自実装無くして実装できないことを、暗に認めてしまっている世代のWebブラウザです。実際にCompat Inspectorは、IE8以下では動作できない仕様となっています。

IE独自機能をどうしても必要とする場合、jQueryやBootstrapなどを利用すれば動作の差を多少は吸収することができるはずですが、完全でもありません。悩ましい問題です。Compat Inspectorは、あくまでWeb標準を使うことが正義という前提であり、今というよりこれからの技術とも捉えることができます。

Windows XPアップグレード時のレガシーWebシステム維持方法まとめ

12年強もの長い期間に渡り利用されたWindows XPも、2014年4月9日をもって延長サポートを終了しEOLです。しかし世間では依然として、騒ぎが落ち着かないようですね。

アップグレード問題は、本ブログでもかなり取り扱ってきたネタですが、もう十分に情報が揃ってきたように思えます。ここで一旦整理して、Webシステムにターゲットを絞ったレガシー資産の維持方法・対策について、その全体像を眺めてみましょう。

1. アップグレード先のWindowsのバージョンについて

まずは、アップグレード先のOSについてです。

バージョンごとに強い癖を持つIE8以下向けに開発されたWebシステムであっても、大きな改修を行うこと無く移行する方法を、IEは機能として提供しています。「ドキュメントモード」です。これまではアップグレード先がWindowsであれば、その上で動作するIEが必ず持っている機能であり、レガシーWebシステム維持には必須の要件でした。
(※参考 : ドキュメント互換性の定義 - Microsoft )

しかし、Windows 8.1上のIE11は、ドキュメントモードが非推奨化されました。そして、Windows 8はサービスパックサポートという扱いになり、8.1リリース後24ヶ月でEOLを迎えることになりました。これら2点の課題から、理論上、移行先のOSはWindows7に限定されてしまっていることが理解できるでしょう。
(※参考 : ドキュメント モードの非推奨 - Microsoft )

IE11の思い切った仕様変更は歓迎されるべきものです。ただ、その流れに追い付くにも、多くの資産を持ちすぎて、短期間での対策が困難という悩みもあるかと思います。本記事では現実を見て、Windows 7への移行を前提にその方法について整理します。

2. Webシステム移行の長期的戦略

Windows XP上で動作するIE6/7/8は、同じHTML/JS/CSSであっても、バージョンごとに異なる仕様として動作することをMicrosoft側が暗に認めているブラウザです。このため、Windows 7上で動作するIE8/9/10には、過去のIEの動作をエミュレートすることができる「ドキュメントモード」を利用します。レガシーWebシステムは、この機能を利用して動作させます。

エンタープライズの場合、恐らくWindows XP以前のOSで動いていたWebシステムも存在するでしょう。場合によっては、開発の方法に問題があり、IE5の動作を再現させる「Quirksモード」という動作が有効になったWebシステムが含まれているかもしれません。これらも全て、Windows 7のIEではドキュメントモードによってエミュレートさせてしまいます。

全体像としては、以下の通りです。
f:id:furoshiki0223:20131214025155p:plain
ドキュメントモード利用時は、Windows XPの各IEごとのコンテンツは、上記の図で対応されるバージョンのモードへ移行させます。IE6モードは機能として提供されていませんが、IE7がほぼ同じ機能を持つため、IE6のWebシステムはIE7モード側へ倒すのが一般的です。動かない場合は、Quirksに落とすと動く可能性があります。このあたりは、テスト次第でしょう。

ドキュメントモードは寿命が決まった対策です。一気に改修し、Windows8まで上げてしまうのがコストメリットとして優れていることは、上記の図を見れば明白でしょう。ドキュメントモードは、あくまで「短期的なコストメリットの優先」という選択です。しかし多くの場合は、この選択を行わざる得ない状況に追い込まれているように思えます。

OSの寿命にWebシステムが引っ張られる問題については、以下のページでも取り上げています。
>> IE8以下向けのWebシステムのEOLは、2020年より後になってはいけない

3. アップグレード先のIEのバージョン・ブラウザ

次に、アップグレード先OS上で動作させるブラウザの話です。

IEをアップグレードして継続利用する場合は、対象バージョンは9か10を選択するのが一般的のようです。早い時期にアップグレードを行っている場合、8という選択もあったようです。IEの持つ機能性から考えると、「IE10」が妥当な選択になります。では、その根拠について確認してみましょう。

8はまだ、相互運用性が確保されていないブラウザです。IE8向けにWebシステムを作ってしまった場合、Windows 7から8以上へのWebシステムの移行が行えなくなってしまいます。業務システムのような長いライフサイクルを支えることができないため、選択されることは100%ありえません。
(※参考 : IE8向けに開発するWebシステムのEOLの制約 - ふろしき.js)

11は、ドキュメントモードが非推奨であるため移行が困難になります。ただし、Windows 8系へ移行する場合、IE10は2015年の中旬にEOLを迎えるため、実質的にIE11しか選択できません。IE11への移行は、Windows 7時代にWindows XP以前のWebシステムの改修を行ってからになるでしょう。
(※参考 : 意外と知られていない、IE11リリースによる本当の危機 - ふろしき.js )

9も多いですが、Visual Studio 2013からIE10が必須になったため、今後開発されるWebシステムに制約を作ってしまうことになります。FlexやSilverLightのようなプラグインを利用したアプリを作ることも今後は困難になりますが、IE10はこれをある程度克服できる機能性を兼ね備えています。業務系だと多い、パフォーマンスの評価を行うための機能もこのバージョンから多くサポートされています。このため、IE10へ移行するのが妥当な選択になります。
(※参考 : Visual Studio 2013 は何が違うのか? - ふろしき.js )

それでも、あえて9を選択する理由があるとすれば、Quirksモードの仕様変更問題に対するリスクヘッジが挙げられるのではないでしょうか。
(※参考 : IE6〜9とIE10とでQuirksモードの動作が違う - ふろしき.js )

IEのバージョンごとの違いは、以下のページにまとめています。
>> IEのバージョンごとの機能の違い、選定の目安 - ふろしき.js

なお、レガシーWeb資産の維持については、Google Chromeでもエクステンション「LBS(Legacy Browser Support)」として提供されています。内部的にはIEと共通のレンダリングエンジンを使うような動きに見えますので、当然ですがMac版では動きません。Windows限定になりますが、視野にいれておくと選択の幅が広がり、より深い検討に結びつくかもしれません。
>> レガシー ブラウザ サポート - Google

4. 移行に利用する具体的な技術

ここでは、3章でIEのアップグレードを選択した場合を想定し、どのような方法で実装するか整理します。IEのアップグレード後、IEに対してドキュメントモードが有効に機能するよう設定を行う必要がありますが、その方法はおおよそ、以下4つの中から選択できます。

★ 作戦1:Active Directory設定型

運用するクライアント端末が全てActive Directoryの制御下に置かれている場合、Active Directoryの設定により一括で実施することができます。Active Directoryを利用する場合、イントラネットを認識するように設定し、イントラネット環境下に置かれたサーバを全てイントラネット互換表示という状態で動作させるようにします。

戦略としては、以下2点です。

  1. プロキシを介さないアクセスを全てイントラネットと認識させる。
  2. イントラネットとして扱うURLを直接指定する

前者は設定が非常にシンプルですが、新規に開発され追加されるWebシステムへの影響が心配されます。例えば、IE9向けに開発したシステムが、いざ本番環境で動かすと、IE7モードとして動いてしまったというというミスを犯すリスクがあります。新規システムは、ホワイトリスト的にドキュメントモードを明示しなくてはいけないため、煩雑になります。

後者はそのリスクが小さくなる反面、全WebシステムのURLをブラックリストへ登録しなくてはいけなくなります。ただ、イントラネットとインターネットとではセキュリティレベルが異なるため、内部のサーバをインターネットと認識させるのは、他のグループポリシへの影響も心配されます。

正攻法では、前者を選択すべきなのでしょう。この場合、Windows 7時代、全ての新規開発Webシステムは、Edgeモードで動作するようにルール化する必要があります。

>> イントラネット内で互換表示を有効にする方法 - ふろしき.js

★ 作戦2:サーバ完結型

個々のシステムのサーバに対して、X-UA-Compatibleを設定するという方法です。設定は、ApacheかIISか、或いはTomcatか、何をWebサーバにしているかで異なる手段を講じる必要があります。手間がかかります。

ただ、この方法の良い所は、システムごとにしかドキュメントモードの設定を行わないため、新しくWebシステムが開発されても、そこに影響を及ぼすことがありません。責任分界点がはっきりとしており、複数のベンダにより運用されている動作環境下では、効果が高いように思えます。

>> IE9のX-UA-Compatibleの使い方/動作仕様 - ふろしき.js
>> IE10のX-UA-Compatibleの使い方/動作仕様 - ふろしき.js

★ 作戦3:設定ファイル配布型

IEの設定情報を配布するIEAKというツールを使う方法です。

「イントラネット互換表示」や「互換表示リスト」を活用してチューニングされた状態のIEを、クライアント側へインストールさせるという方法になります。強制力が低いため、ユーザに容易に変更されるというリスクを持ち、作戦1〜2ほど細かいドキュメントモードの制御が行えないという問題も持ちます。

作戦3〜4にかけての問題点は、IE8〜10で「互換表示ボタン」がアドレスバーの右に表示されてしまうことです。ユーザで自由にドキュメントモードが変更できてしまうため、トラブルに繋がりやすいという印象を受けます。

>> IE9の互換表示リスト(互換表示一覧)の使い方/動作仕様 - ふろしき.js
>> IE10の互換表示リスト(互換表示一覧)の使い方/動作仕様 - ふろしき.js
>> Internet Explorer 管理者キット 技術情報とダウンロード - Microsoft

★ 作戦4:ユーザ手動型

作戦3の手順を、ユーザの手で逐次行うという方法です。互換表示リストは、「互換表示ボタン」で代替します。

オペレーターへの負荷が非常に高く、また強制力も低いため、トラブルに繋がる可能性が非常に高いです。

>> IE9の互換表示ボタンの使い方/動作仕様 - ふろしき.js
>> IE10の互換表示ボタンの使い方/動作仕様 - ふろしき.js

▼ 注意点1:DOCTYPEスイッチの誤作動

IE6のDOCTYPEスイッチには問題があり、XHTML1.0で動作するものについては、解釈に失敗し誤作動を起こす可能性があります。この問題へ対応するには、サーバ側でのX-UA-Compatibleの指定が有効です。X-UA-Compatibleは、他のドキュメントモード設定手段よりも優先されます。

>> XHTML1.0の場合、IE6からIE8〜10への移行時に表示が乱れることがある

▼ 注意点2:IE7モードで動作しないIE6向けシステム

IE7モードは、IE6と完全な互換性を持つわけではありません。IE7でも、サポートされなくなった項目があります。この場合、Quirksモードに倒した方が良い場合もあります。対策としては、注意点1と同様、X-UA-Compatibleにより強制でIE5を指定することが求められます。
(※参考 : Information Index for Internet Explorer 7 - Microsoft )

5. Webシステム移行前の動作テスト

大前提ですが、ドキュメントモードは過信しないで下さい。テストは絶対に必要です。

動作テストについては、実機がベストです。ただ、コストの問題から全てを実機でとはいかないケースもあるでしょう。単純に動作のチェックを行いたいだけであれば、Microsoftが提供しているModern.IEというサービスを利用するという手もあります。Modern.IEでは、無償で利用できるOS+IE(バージョン)の組み合わせを取り揃えた、「Modern.IE VM」というサービスが提供されています。

動作テストを行うという目的であれば、ライセンスに合致し無償のVMを利用した動作検証が行えます。

>> 無料でIEのマルチバージョンテスト「Modern.IE」開発での利用時の注意点

テストの自体の注意点があるとすれば、以下が挙げられます。

★ Active Directoryとの連携のテスト

Windows XPからの移行では、ドキュメントモードの有効化にActive Directoryの利用を行う場合も多いでしょう。この場合、Modern.IE VM単独でのテストは難しいため、別途動作テストの環境を構築することも視野に入れる必要があります。ドキュメントモードそのものの動作自体はVMで十分ですが、ドキュメントモード自体が正しく有効化するかまでは、Active Directoryを利用するまではテストされないのです。

★ ドキュメントモードの指定値の確認

ドキュメントモードは、IEのバージョンアップが進む都度複雑化が進んでいます。例えば、IE10からはQuirksモードが2種類になったり、ドキュメントモードが非推奨化されたIE11では、この2種類のQuirksモードのどちらが利用されているかをシンプルに把握する術は失われています。
(※参考 : IE10のQuirksモードについて - ふろしき.js )
(※参考 : IE11のQuirksモードについて - ふろしき.js )

基本は「F12開発者ツール」を利用し確認することになりますが、開発者ツールを常時動かしていると、何かしらの要因で設定情報をキャッシュし、ドキュメントモードが誤作動を起こすことがあります。筆者も、IE9で結構ハマってます。何がきっかけで正常な動作に戻ったのか、その再現性を確認することができませんでした。注意が必要です。

★ OSの違いによる動作の差異

例えば、アップグレード先がIE8だとしても、Windows XP版のIE8とWindows 7版のIE8とでは、OSレイヤーの機能の差異により、必ずしも同じ動作になるとは限りません。IE11にしても、Windows 7、Windows 8.1(デスクトップモード)、Windows 8.1(Windows 8モード)で異なります。

レイアウトをガチガチに決めてしまっている場合、以下の様な事象も発生します。

最後に

アップグレードの実態としては、FlexやSilverLight、Javaアプレットなど、プラグインが邪魔してここまでスムーズにはいかないことも多いでしょう。HTMLベースなシンプルなものは、今回整理した内容が正攻法になるかと思います。

Windows 7のアップグレードが終わったとしても、バージョン問題との本格的な戦いはこれからです。Web開発で、従来の方法を守り続けると、次のアップグレードでは今回の比にならないコストを発生させることになります。提案力、開発プロセスの設計力が試されています。

「Web技術はプラットフォームによって動作が違う!」とは言われていますが、IE、Firefox、Chromeとで、相互運用性は改善に向かっています。これを前提として、Windows XPの時代を支えたIEも、方針をシフトし、以前の方法を許すような手段を潰す流れに入っています。

Windows 7世代のWebシステム開発で行うべき対策については、今後以下のページで扱っていく予定です。
>> HTML5/IE11対応 - Webシステム・ガイドライン集

本記事をきっかけとして、Windows XPアップグレード問題をうまく解決し、クライアントの健全な運用に貢献できたなら、情報整理を行ってきた私としても幸せです。フィードバックがあれば、恐れ入りますがTwitter(@kawada_hiroshi)でご報告下さい。メールでも受け付けています。

それでは、健闘を祈ります。

Webアプリのパフォーマンス改善をWeb標準で行う方法、まとめ

HTML5 Advent Calendar 2013」の24日目の記事です。

Webアプリのパフォーマンス改善と言えば、JavaScriptやDOMアクセスなど、既存の技術ベースな改善手法を想像する方も多いでしょう。最近では、こうした改善のあり方を、別の視点からもう少し広げようというアイデアが存在感を持ち始めています。それは「Web標準」です。

そこで今回、Web標準側でできるWebアプリのパフォーマンス改善について、掻い摘んで紹介します。全てを説明となるとキリがないので、キーワードを中心とさせて頂きます。最近になって、結構実用化が進んできているので、悩んだ時には試してみる価値はあるでしょう。

1. リソースを先に読み込む

linkタグにてURLなどを指定することで、これから先に読み込ませる可能性が高いWebページのリソースを予め読み込むWeb標準があります。ニュースサイトでは次のページを先読みしたり、ログイン画面を表示中にフレームワークの本体などのファイル容量の大きなスクリプトファイルを読み込むなど、柔軟なリソース操作でかなりのパフォーマンス改善が期待できます。

ここでは、3つの先読み技術を紹介します。

  • prerender : 1つのページの全てのリソースを先読みする。
  • prefetch : 単独リソースの先読み。JSファイルやimgファイルなど。
  • dns-prefetch : DNSの名前解決の先読み。(※今のところはベンダ独自仕様)

▼ サンプルコード

<!-- 次のページの読み込み -->
<link rel="prerender" href="./?page=2" />
<!-- 近いうちに必要になる大きいリソースの先読み -->
<link rel="prefetch" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js" />
<!-- 近いうちに必要になるDNSの名前解決 -->
<link rel="dns-prefetch" href="http://example.com/" />

上記は、iPhoneを除けばスマートデバイス(AndroidやWindows8.1)では既に実用段階に入っている点、実装されていないブラウザでは無視される点、フォールバックが難しいという点、パフォーマンスが劇的に改善されるという4つのポイントから、2014年はかなり広がりを見せると睨んでいます。

2. リソースの読み込み順序を操作する

resource-priorities(ネットワークの優先順位付け)」は、CSSファイルやimgファイルなど、ロードが必要なリソースに対して、優先付けを行うためのWeb標準です。Webページを表示する際に、画面に表示されない箇所を後で読み込ませるといった活用方法があります。画像が多いようなページでは、初期表示のパフォーマンスを改善さることができるでしょう。ただ、そこそこ複雑性の高いページでないとその改善が見えてこないため、デバッグは苦労するかもしれません。

ステータスとしてはまだまだ議論中のワーキングドラフトという状況ですが、Chrome(安定しているかは不明)やIE(lazyloadのみ)では既に部分的な実装が始まっています。

  • lazyload : 他のリソースよりも遅れて読み込む
  • postpone : 画面上に表示されるまで読み込まない

▼ 例1:タグのプロパティから扱う場合

<img src="./img/hoge.png" lazyload />
<img src="./img/fuga.png" postpone />

▼ 例2:CSSから扱う場合

img.hoge { resource-priorities : lazy-load; }
img.fuga { resource-priorities : postpone; }

▼ 例3:JavaScriptから扱う場合

var img = new Image();
img.setAttribute('lazyload');
img.src = "hoge.png";

実装が部分的で利用シーンも限られるため、当面の間は、imgタグなどに限定すれば、jQuery.lazyLoadで代替すると良いように思えます。Scriptタグについては、defereで代替できる上に、依存関係解決(CommonJS/requireJS)など別の方向性で議論が進んでいるため、あまり役に立たないかもしれません。

3. リソースのキャッシュを操作する

AppCache」は、Webページのリソースのキャッシュを制御するWeb標準です。標準化の雲行きが怪しくなってはいますが、サーバとクライアント間の通信量そのものを減らすことができるため、パフォーマンス改善に役立ちます。(2014.5.8 : AppCacheの問題点を改善した、「Service Workers」というWeb標準が公開されました。)

AppCacheが無理でも、昔からブラウザは高度なキャッシュ機能を有しており、HTTPヘッダでのキャッシュ制御でもそれなりの改善が行えます。HTTPヘッダだと、以下の項目が挙げられます。

  • Expires : コンテンツの有効期限を指定します
  • Cache-Control : クライアントのキャッシュ機能を制御します
  • ETag : サーバ側でクライアントのキャッシュの新しさを判定します

(※参考 : RFC 2616 - W3C )

4. Webページの非活性を検出する

すごく地味ですが、Webページの非活性を検出して、なんとかしようというアイデアもあります。ブラウザのタブで、非活性な状態の時にはサーバイベント取得のポーリング数を抑えるなど、バックグラウンド処理を減らし、CPUやネットワークなどのハードウェアリソースの消費を抑え、パフォーマンスを改善しようというものです。

Page Visibility API」は、2013年5月に1版、10月に2版までW3C勧告化が完了し、IEは10から、ChromeもFirefoxも既に実装済みの実用性がかなり高いWeb標準です。このAPIを利用して、非活性を検出しWebアプリの振る舞いを変えることになります。

▼ サンプル

document.addEventListener('visibilitychange', function(){
  if ( document.hidden ) {
    // ポーリング数を減らす処理
  } else {
    // ポーリング数を増やす処理
  }
}, false);

5. 通信プロトコルを最適化する

★ WebSocket/ServerSentEvents

Webページからの非同期通信の最適化です。ファイアウォール超などの問題を抱えてはいますが、最近はJavaや.NETなどの開発において、アーキテクチャ進化のベースになっているという印象を受けます。Project AvatorにせよSignalRにせよ、リソース同期やRPCを実現するための手段として活用されていることから、今後も目を離せません。

★ SPDY/HTTP2.0

HTTP1系の通信の悪いところを補った新しいプロトコルです。SPDYについてはモダンブラウザで対応が進んでいますが、IEは11からのサポートです。

★ gzip

コンテンツを圧縮することにより、通信コストを減らすという最適化方法です。古い時期から採用されており、IEも6から対応しているのですが、諸々の事情によりIE7以上で利用するほうが良いでしょう。

6. 物理パフォーマンス/時間を検出し最適化する

パフォーマンスの計測を行うためのJavaScriptのAPIは、かなりの数の標準があり、ステータスとしても今の時点で既にW3C標準に進んでいるものも存在します。キーワードベースで並べると、以下の通りです。

IE10+やChromeでサポートされますが、Firefoxは全体的に微妙な印象です。上記のAPIは、単純に性能測定をするだけに用途は限られず、例えば「Timing control for script-based animations」はゲーム開発におけるフレーム処理に活用されます。(・・・実態としては、環境依存の動作なのでそうもいかないという問題を抱えているのですが、この話はまた今度。)

Navigation TimingやResource Timingは、パフォーマンスの改善ポイントを探すためのWeb標準ですが、ユーザのリアルなWebページ表示速度を取得できる(Real User Monitoringと呼びます)という点では、Webにとって新しい技術と言えます。プラットフォームも増え、機能/動作検出な開発手法が広がると、パフォーマンスの面での検出に活用され幅広い利用方法が模索されそうな気がしています。性能へ配慮したフォールバックみたいなものが、このあたりの標準から生まれるかもしれません。

Navigation Timingについては、HTML5 Experts.jp様にて使い方を解説しています

7. パフォーマンス情報の蓄積

最後に、6で取得した、Webページを表示した際のパフォーマンス情報を、サーバ側へ送信するためのWeb標準です。ユーザの情報を取得する手段としては、Web Beaconというやや泥臭い手法もありますが、JavaScript上で得られる情報が多くなった昨今、より踏み込んだ情報をサーバへ送るための仕組みが求められます。こうした背景から生み出されたのが、「Beacon」というWeb標準です。ただ、中身は今のところ、XMLHttpRequestでもできる簡単なことです。

凄く多いですね。多すぎて、1年後には色んな仕様が全く別物に姿を変えていそうな気がします。ただ、Webプラットフォームのパフォーマンスの悩みは、少し作り込みが複雑なものを作ったことある方なら、必ずしも通っている道のように思えます。

もっと充実化して、改善が進むと良いですね。

無料でIEのマルチバージョンテスト「Modern.IE」開発での利用時の注意点

Microsoftは、6以降の全てのIEの動作をテストできる手段として、「Modern.IE」というサービスを提供しています。

タイトルでは無料と言っていますが、実際には一部のサービスのみが無料となっています。

本来なら有償のサービスを売り込みたいところなのでしょうが、残念なことに無料のサービスの方が、SI業界の人間であれば待ってましたと言わんばかりの機能性を兼ね備えてしまっています。そのサービスとは「Modern.IE VM」です。

Modern.IE VMとは?

Modern.IE VMとは、90日間無償で利用できる、IEテスト用のVMイメージです。ライセンスが切れても、正規の手順を踏めば再びライセンスされるため、この点で単なる試用版とは異なる特性を持っているように思えます。Windows版の場合、以下の仮想化製品のVMを提供しています。

  • Hyper-V(Windows Server 2008 R2 SP1以上)
  • Hyper-V(Windows Server 2012 以上/Windows 8 Pro)
  • Virtual PC (Win7用)
  • Virtual Box
  • VMWare Player

Webコンテンツは、「OS」+「ブラウザの種類/バージョン」+「ブラウザの制御パラメータ」の3つの組み合わせにより、動作が異なるという特徴を持っていますが、Modern.IE VMではOSとIEのバージョンの組み合わせによる再現性を、ある程度までは網羅できるような状態で提供しています。具体的には、以下のセットです。(2013年12月31日現在)

IE6 IE7 IE8 IE9 IE10 IE11
Windows XP Professional SP3 - - -
Windows Vista Enterprise SP2 - - -
Windows 7 Enterprise - -
Windows 8 Enterprise - - - - -
Windows 8.1 - - - - -

※ ◯=有り、✕=無し、-=動作不可

ダウンロードは、以下のURLへアクセスし、ページ中央の「Mac、Linux、Windows 用の仮想マシンをダウンロードします。」というタイトルのすぐ下で、セレクトボックスの内容を選択しながら進めていきます。
Modern.IE VM - http://loc.modern.ie/ja-jp/virtualization-tools#downloads

f:id:furoshiki0223:20131212224809p:plain
※ 左は仮想化ソフト自体を動かすOS。右は仮想化ソフトの種類です。

ダウンロードファイルのサイズが大きい場合は、分割されています。「.exe」で終わるファイルを実行し、ファイルを一つに繋げる必要があります。なお、Windows XP系VMは日本語が表示できないので、Windows XPのインストールイメージファイルを用意し、ランゲージパックを取得しインストール必要があります。

一つのOS上で、2バージョン以上のIEがテストできる

わざわざ複数のWindowsのマシンを起動しなくても、異なるOS、異なるバージョンのIEがテスト出来るというのは、環境の多様化が進んだ現在において必須のツールでしょう。特に、IE8を動作対象ブラウザにしてしまった場合、IE8とIE9以上の2バージョンでテストしないといけないため、使わないという道すら残されていないように思えます。(→理由がわからない方は、こちらの記事をご覧下さい)

ただ、業務系システムのプロジェクトだと、やはり問題は色々出てきます。まず、セキュリティソフトの入っていないOSを、例え仮想マシン上とはいえ、動作させることを許してくれるかどうか。また、ユニットテストのようなIDEがもろに動いているようなフェーズでは、メモリが不足し動作が困難になるかもしれません。

なんだかんだ言っても、JUnitを扱うようなノリでさらっとRFPやらシステム提案書に書けるほど簡単で無いのがこのサービスの難しい所です。色々なリスクを抱えつつも、そのコストパフォーマンスの高さからどうにかしてでも使いたくなる、いかにもありがちなジレンマに陥っています。

利用時の注意点

ここからは、Modern.IE VMの商用利用時の注意点についてまとめます。 なお、参考にしているライセンスは、2013年7月22日現在のものです。
(※参考 : license 2013-07-22 - Modern.IE )

リバースエンジニアリングするなとかリコンパイルするなとか、Microsoft製品全般に言える、基本的な部分については全て割愛しています。

★ テスト以外には使ってはいけません!

  1. テスト用途として利用することが許されます。
  2. 業務用のOSとして使ってはいけません。
  3. 日常利用するためのOSとして使ってはいけません。

※ 2番について利用許諾内の解釈が難しかったためMicrosoftに確認したところ、あくまで「テスト」という目的であれば、商用の開発プロセス内で組込み利用することが可能とのことです。つまり、普通のSIの開発のテストフェーズで利用する分には何も問題無いということです。

★ ライセンスは90日間です!

  1. VMのダウンロードを行うと、利用許諾に同意したものとみなします。
  2. ダウンロードしたVMイメージ、もしくは初期起動後の状態のスナップショットが、90日間だけライセンスが有効となります。
  3. ライセンスが切れても、再度ライセンスすることができます。(1回目が切れたから、2回目という使い方はOK。要は、同じVMを91日以上使うなという意味。ライセンスが切れると、そのVM内に含まれているデータを取り出すだけでもアウトとも読み取れますので、テストという特性上注意が必要ですね。)
  4. アクティベーションを促されますが、アクティベーションしてはいけません。(プロダクトキーとか入れないで使ってくれという意味です。)

※ 上記、2と3についてはMicrosoftへ確認し発覚した点の共有です。

★ 物理マシンに1台までです!

  1. VMは一度に一人しか利用できません。一人に対して、一つのOS一つのハードウェアでしか使ってはいけません。
  2. 物理マシン上でしか利用してはいけません。
  3. ストレージがケーブル接続されているコンピュータのハードウェアに限ります。
  4. ハードウェアパーティションで区切られたもの、ブレードPCも1台とみなします。
  5. リモートアクセスは許可されています。(※XP/Vista/7/8系個別で定義されており、全てのライセンスで許容されている模様。)

※ このあたりは、シンクライアント環境下の開発のまとめです。一つのハードウェア上に複数VM動かして良いのかという点については、文章からはあまり読み取りにくい感じです。アウトなニュアンスに見えます。

UNIX系環境で楽してダウンロードする方法

wgetで、分割されたファイルを一括ダウンロードする方法もあります。各VMのダウンロードまとめに、ダウンロード先が記述されている「.txt」で終わるテキストファイルがあるので、これを直接指定すれば楽できます。

f:id:furoshiki0223:20131218025719p:plain

wget –i https://az412801.vo.msecnd.net/.../IE8.Win7.For.LinuxVirtualBox.txt

>> Webシステム・ガイドライン集

Firefox向けWebシステム開発でできること・できないこと

Windows 7時代のWebシステム開発は混沌としています。

IE8を標準ブラウザとしてサポートしてしまったユーザ企業は、IEがシステムのライフサイクルをカバーできるだけのサポート期間を確保できなくなるため、+αの対策無くして開発を行うことができません。
(※参考 : 企業システムの2020年問題 - ふろしき.js )

IE8標準ブラウザとして採用した企業は、今後システム開発時に、以下の選択が求められます。

  1. IEをアップグレードする。
  2. Windows 7の移行日までをシステムのサポート期間とする。
  3. IE8とIE9以上(FireFox/Chrome)で動くように作る。
  4. Firefox/Chromeのみ対応にする。

本記事では、4番の対策のニーズを埋めるため、「Firefox向けWebシステム開発」でできること/できないことについてまとめてみました。

1. サポートライフサイクル→ESR(1年周期)

バージョンアップの多いFirefoxでは、7バージョン刻みでESRと呼ばれる、機能追加/変更の無い、純粋なセキュリティパッチを中心としたサポートが提供されています。現在は、明確に法人向けという位置づけでリリースが行われているようです。

このサービスは以前、OSS感が非常に強くエンタープライズ系の場合に抵抗を感じる方も多かったようですが、24リリースで空気感がガラっと変わっています。加えて、ESRのリリース方法もやや変更された模様です。17以前を評価したことがある方は、確認し直した方が良いかもしれません。ここ最近、本当にびっくりするほどMozillaもビジネス色が強くなりましたね。

>> FirefoxとThenderbirdの法人向け延長サポート

これまでESRは、3.6→10→17→24と刻まれました。ESRのアップデート内容について、例えば24系のESRのリリースノートを覗いてみると、以下のような更新がされています。

▼ 24.1.0 ESR

セキュリティアップデートです。詳細はセキュリティアドバイザリをご覧ください。

▼ 24.1.1 ESR

NSPR が 4.10 から 4.10.2 に更新されました。 (Bug 935568)
NSS のバージョンが 3.15.3 に更新されました。 (Bug 935959)
24.1.0 で翻訳されていなかったユーザインタフェース中の項目が翻訳されました。 (Bug 932310)

▼ 24.2.0 ESR

いくつかのセキュリティ問題が修正されました。

本当にセキュリティが中心ですね。

IEの場合はWin7版がOSと同じライフサイクルを持っているため、1年周期のアップグレードが求められるのは短く感じ、マイナスとも捉えられるかもしれません。しかし、IE8が邪魔してライフサイクル破壊が起こっているケース、新しい機能を使いたいケースでは、リスク保有してでも使いたい場合があるように思えます。

2. ブラウザ設定ファイル配布手段→プロファイル

Firefoxでは、設定情報をプロファイルとして扱い、一つのフォルダに固めて配置します。このアイデアは、Firefoxの非常に優れているところであり、逆にデメリットも作ります。複数のバージョンを一つのOS上で同時に扱えるマルチバージョン化が行えたり、IT管理者がカスタム済みのFirefox設定をシステム利用者の設定を破壊せずに配布することができます。IEのIEAKの代替と呼ぶには自由過ぎとも捉えられます。

f:id:furoshiki0223:20131215084958p:plain

前者のマルチバージョン化について、古いバージョンのものはセキュリティパッチが当たらなくなるため、生かすこと自体がそもそも邪道でしょう。しかし、技術的には可能で、リスクアセスメント上許容される可能性もあるため、選択の一つに加えることは決して間違いではないように思えます。特に、古いバージョンで動かしていたものが新しいバージョンで動かなくなってしまった場合には、動かないシステムだけをブラウザレベルで切り離すという対策が行えたり、しかもそれがOS跨ぎで行えたりと、バージョンの縛りから逃れられるという点ではIEよりも高い柔軟性を発揮しています。複数バージョンを混同させ、それぞれに独立した設定が行えるIEAKというイメージです。

後者のカスタム済みFirefox設定の配布について、IEの機能領域は殆どと言って良いほどカバーできていませんが、IEとはまた違った意味でのカスタム化が行えます。Windows特化の領域はIEが勝り、OSレイヤーに依存しない領域はFirefoxが勝るという状況です。また、複数のプロファイルを切り替えて動かすこともできます。設定を上書きするのでなく、混在できるIEAKというイメージです。

そもそもですが、Firefoxにはプラグインだけでなくアドオンという文化があり、ユーザ側でのカスタマイズ性の高さはIEの比にならないでしょう。IT管理者から見ると、このカスタマイズ性の高さにセキュリティリスクという壁を作ってしまいます。ただ、Firefoxの場合はそもそもプロファイルレベルでなく、GeckoエンジンそのものをFirefoxの箱から切り離してしまおうというアイデアがあり、IEAKよりもガチガチなカスタマイズ(むしろ改造というレベル)はこちらのアイデアが使えるように思えます。(→詳しくは次章へ)

プロファイルについては、このページがわかりやすく説明されています。
>> プロファイルの管理 - Mozilla Support
>> 設定情報のバックアップ - Mozilla Support

3. カスタマイズ→XULRunner

Firefoxの自由過ぎるカスタマイズ性については前章で説明しましたが、IT管理者としてはやはり頭が痛くなる問題です。しかし、道がないわけではありません。Firefoxはこのようなニーズに対しては、レンダリングエンジンレベルでどうこうしてしまおうという考え方のようです。しかも、IE6時代には多かったいかにもネイティブみたいな開発、例えば「戻るボタン」の封印など、ブラウザ側の機能制限というタブーを、Firefoxは正攻法として実現できてしまうという、開発者・IT管理者的に歓迎される強い制限を与える柔軟なカスタマイズ性を持ちます。それを、手っ取り早く簡単に作り込めるのが、XUL Runnerです。

f:id:furoshiki0223:20131215064331p:plain

XULRunnerは、Geckoエンジンを入れる箱の部分(ウィンドウやGeckoの制御)の開発を楽にしてくれるツールです。カスタムブラウザのようなものを作るのには、それなりに充実した機能を提供しています。

また、XULは本来デスクトップアプリを作るためのものであるため、Webシステムのフロントエンド部分のソースコードをローカル内に配置して、.NETみたいにオフライン動作させてしまうことも可能です。(※ Firefoxが比較的、ローカルHTMLファイルに対するファイルアクセスのセキュリティが低いのは、これが理由な気がします。)

XULと言うと、MicrosoftのSAMLのような雰囲気を感じますが、だいたいその認識で合っています。ただ、Microsoft側はこの手の技術でいかにもWeb技術っぽい呼び名を頻繁に使うのに、MozillaはXUL Runnerという独自っぽい呼び名を使っているのは、かなり損しているような気がします。XUL Runnerという名前ですが、エンジンはGeckoなのでHTML/CSS/JSは普通に動くという点で勘違いしない方が良いかと思います。

XULRunnerについては、以下のページで説明しています。
>> XULRunner - ふろしき.js

XULRunnerではGeckoエンジンをパラメータレベルではそれなりにグリグリといじれ、ブラウザっぽい動作を奪うことが可能ですが、Firefoxの見た目そのままで少しだけ変更というのは難しいでしょう。そもそもですが、CUIベースな設定を必要とし、GUI慣れした人には取っ付きにくいという問題を持ちます。明らかにXULRunnerを用いたカスタマイズには、知識のある開発者の力が必要です。

4. IT管理者による集中管理→Active Directory

Active Directory連携のエクステンションがサードパーティで出ているようですが、以前試した時動くとこまで行かなかったため、未検証です。情報あれば、よろしくお願いします。

村地氏(@hebikuzure)のこの辺りの記事が参考になるかもしれません。

5. レガシーIE向けシステムの維持手段→無し

レガシーIEに含まれているActiveXオブジェクトですが、Firefoxでも動作させるという裏ワザ的手段が提供されています。

>> ff-activex-host(Firefox plugin)

ただ、Firefoxも一時は空気を読んで(恐らく嫌々)IEの独自動作に合わせた所もあったようですが、レガシーIE向けWebシステムの最大の懸念点である、独自実装API「attachEvent」を頑として拒否し続けてきました。Operaも昔はサポートしましたが、現在はWebKitになったため諦めなくてはいけないでしょう。

IE11から削除されたattachEventは、やはりというか当然と言うべきか、Firefoxも救ってはくれないようです。ActiveX以前に、この方向性のソリューションとしてのFirefoxは、諦めた方が良いように思えます。

6. ベンダーサポート→サードパーティ

窓口サポートも、以前はアシスト社ぐらいしかイメージがありませんでしたが、今はかなり多くの企業が参入してきており、Firefoxというブランドを活かしたフランチャイズ的ビジネスが出来上がっているように見えます。

サポートメニューとしては公式には4種類に分類していますが、内容を要約すると以下の3種類に見えます。

  • テクニカルサポート
    • トレーニングメニュー。システム利用者向けカスタマーセンターとしても機能する模様。
  • Web コンテンツの修正・標準化
    • IE特化の部分を削除し、長いライフサイクルが保証された標準準拠型Webシステム開発/移行の支援。
  • 製品開発
    • プラグインを作ったり、企業特化のカスタマイズブラウザの開発。

企業サポートについては、以下のページで説明しています。
>> 法人向けサポートのご案内 - Mozilla

最後に

Firefoxは、オープン系という特性を活かしたエンタープライズ向けのサービスを別の方向から取り込んでいたり、Firefoxだからこそできることがあったりと、なんだかんだ言ってもエンタープライズという世界では、IEとはガチで戦えるほどのポテンシャルを得ているようにも思えます。IEもFirefoxも、レンダリングエンジンという世界では平坦化が進みましたが、付随する機能・エコシステムは実に個性的です。

コスト最適化に何かしらの道を見出した企業、サービスの特性上現状維持でなく変化が求められてしまう企業では、スポットであれ完全であれ、何かしらのやり方で広がりを見せているようですね。Windows 7時代の混沌としたWebシステム開発の時代には、より注目を集めるかもしれません。

Windows 7世代からWebシステム開発指針を変えなくてはいけない理由

Windows 7時代のWebシステム開発は、IEの大幅な設計指針の変更に伴い、開発指針を従来の「バージョン依存型」から「機能/動作検出型」へ変更する必要が生じています。

本記事では、その必要性について、IEの過去の歴史やロードマップ、また従来の開発方式を維持した場合のリスクについて解説します。

IEは何故、開発指針を変える必要があったのか?

f:id:furoshiki0223:20131210162230p:plain

過去のIEは、未成熟なWeb標準で高い機能性を獲得するため、独自実装という方針で開発を続けてきました。結果としてIEは、リリースするバージョンごとに、同じHTML/CSS/JSを利用しても異なる仕様で動作するようになりました。

当時のIEは、Webコンテンツを古いバージョンと新しいバージョンの双方で問題なく動作させるために、バージョン特化の対策を促す機能を提供しました。

開発者は、条件付きコメント(バージョンベクター)や、ユーザエージェントからバージョンを検出して、バージョンごとにビューを切り替えるという対策を行いました。また、IEのバージョンを上げる際には、IEが持っている過去のレンダリングエンジンを使ってエミュレートさせることで、移行コストを最小化してきました。

しかし、この方法には問題があります。

IEは、保守しなくてはいけない過去のエンジンが増え続けています。IE6や7の頃は2種類程度を扱えれば十分でしたが、2013年12月現在、最新のバージョンである11では、7種類のエンジンを抱えメンテナンスが困難になりました。

また開発者も、日に日にアクセスしてくるIEのバージョンの種類が増え、対策には多くのコストが必要となりました。IEがバージョンアップするほど、IE側とシステム開発者側の双方が、コストが増え不幸になるという悪い状況に追い込まれました。

Microsoftはこの問題に対応するため、IE9からは「機能/動作検出」による開発を促す方針に転換しました。この方法は、近年登場したWeb標準「HTML5」に準拠し、これまで維持してきた独自機能もこれに置き換えることで、ブラウザ間バージョン間での動作の違いを無くし、長期に渡り最新のレンダリングエンジンで動作可能なWebシステムの開発が行えるようにするというものです。

近年のIEは、バージョン検出が行える機能を削除しつつあります。また、Windows 8以降のOSのIEでは、過去のレンダリングエンジンを利用する機能は「非推奨」となり、今後削除される可能性があります。こうした背景から、Webシステムの開発指針は、本格的に「機能/動作検出」へ移行することが求められています。

「機能/動作検出」の考え方

f:id:furoshiki0223:20131210162238p:plain

Windows 7の最低バージョンであるIEの8までは、バージョン特化型の時代です。十分な相互運用性を獲得できていないため、複雑な作り込みをしてしまった場合、別のバージョンでは動作しない可能性が高いブラウザです。

IE8までは、サポートされていないブラウザに対して以下のような警告を出すのが、コスト面で最適化されるため、事実上は容認された手段でした。

このシステムは、Internet Explorer 8に対応しています。
システムを利用するには、IE8からアクセスを行う必要があります。

対して、IE9以上は機能/動作検出の時代のブラウザであるため、十分な相互運用性が確保できています。IE9以上で開発し、かつ機能/動作検出で開発すれば、Windows 8以降の最新のレンダリングエンジンしか提供されないIEであっても、理論上動作させることが可能になります。

この世代のWebシステムは、サポートされていないブラウザに対して、以下のような警告が出るのが主流になります。

このブラウザは、システムを動作させるために十分な機能を有していません。
システムを利用するには、ご利用のブラウザのバージョンアップが必要になります。

「機能動作/検出」は、ブラウザのバージョンをチェックするのではなく、機能の有無をチェックしています。バージョンはおろかブラウザの種類が何かまで意識されていません。このため、常に最新のレンダリングエンジンのみが使われることが前提になっています。バージョン依存時代のような、過去のバージョンをあえて選択させるという選択は最初から排除されています。

IEは、Webシステムがこの前提で開発されることを前提として仕様変更を繰り返すことになります。実はIE11の時点で既に、バージョン依存型の開発を行ってしまったWebシステムの運用で問題になるケースが出てきています。

指針に反したWebシステムの末路

★ 1. ユーザエージェント文字列の変更に伴うアクセス不良問題

f:id:furoshiki0223:20131211031108p:plain
IEのマルチバージョンを許容する場合、例えばIE6以上をサポート範囲とする場合、提供されるビューは「IE6-7用」「IE8用」「機能/動作検出型用」の3つにしなくてはいけません。IE9以上は機能/動作検出なので、レンダリングエンジンは常に最新のものを利用することを前提とし、ブラウザの種類の特定も行わない作りでないといけません。

IE11は、これを前提とした仕様変更を行いました。ユーザエージェント文字列からIEを特定する情報が失われてしまったのです。このシステムは、IE9以上を対象にしてもなお、従来型の方針を貫いていました。このため、動作対象ブラウザであるIEでさえもシステムが利用できない事象が発生しました。(※具体的な企業名は伏せますが・・・)

★ Windows 8版IE10のサポート期間が3年しかない

f:id:furoshiki0223:20131211031522p:plain
Windows 7と同じサポートライフサイクルポリシーが守られるなら、IEの全てのバージョンがOSと同じ期間サポートされるはずです。Windows 8自体のサポートは2023年1月と比較的余裕がありますので、そのシステムは、IE10特化で作りこんでもEOLまでバージョンアップの必要がなく、リスクは低いという判断がされたのでしょう。

ところがIE11がリリースされた際、Windows 8版IE10は、IE11のリリース後24ヶ月しかサポートされないことになりました。IE10からしかアクセスできないように作っていたWebシステムは一瞬にして、残り24ヶ月しか利用できない短命システムに化けました。IE側としては、バージョン9以上であればバージョンの特定はされていないだろうという前提だったのでしょう。

いかにしてこの問題を防ぐか

上記の2つのケースは、IE側が指針に従わないWebシステムを排除するため強引に行った対策です。ちょっとやり過ぎでは、、なんてことも思いますが、バッドプラクティスを生かしているのは我々開発者側なので、大声で文句が言える立場でもないでしょう。

世の中では、Webの作りは汎用的な作りにしろなどと良く言われていますが、それは不正確です。現実的な解としては、「IE8以下はバージョン特化の対策をし、IE9以上/Firefox/Chromeではブラウザレベルで検出しない汎用的な作りにしろ」が正確になるでしょう。つまりこういう状態です。

f:id:furoshiki0223:20131211044433p:plain

上記について、大規模開発でもコントロールができるよう、記述方法統一化や可視化の対策方法がありますが、これらはまた別の記事にて紹介します。概要レベルでは、この説明で間違いは無いでしょう。

IE側が想定していない方法で開発を続けた場合、IEは想定済みだけどシステム側は想定していないという、未知の問題にぶつかるリスクが高くなるでしょう。リスク面を考えると、従来の方法に拘るよりも最善の方法と判断できます。

技術を正しく使わなかった場合、リスクが高くなるのはどの分野でも共通しているわけですが・・・。SIは大人の事情も絡むので、技術云々でなく説得に使えるソースが必要になることがあるかと思います。役立ちそうなドキュメントを紹介します。どの程度力になるかはわかりませんが、力になれると幸いです。

IEのバージョンごとの機能の違い、選定の目安

f:id:furoshiki0223:20131210024028p:plain
私はIEの中の人ではないので、IE開発者がどういう考えを持っているかはわかりません。しかし、断言して言えることがあります。最近のIEは各バージョンで明らかに意図したテーマを持ち、リリースされています。

各バージョンのテーマを、運用するシステムの目的と照らし合わせれば、定量的にどのバージョンを選択すべきかが導出できるでしょう。

本記事は、これから企業システムで扱うIEのバージョンを上げなくてはいけない場合、また誰かにIEのバージョンごとの違いを説明しなくてはいけない場合、費用面・技術面の制約を説明しなくてはいけない場合に、ヒントを与えてくれるかもしれません。

バージョン別評価サマリ

バージョン別評価サマリでは、業務システムのクライアントとして扱われるIEが、各バージョンごとにどのような特性を持つかを超概算レベルで可視化しています。

項目は、長い目で見た費用効果を表す「コストパフォーマンス」、ニッチな要望に答えやすいかを判断する「機能性」、XP資産からの移植と維持に使う機能の豊富さを表す「移行容易性」の3つの観点で評価しています。

これらの裏付けは、次章以降にて説明します。

★ IE8

コストパフォーマンス
機能性
移行容易性

★ IE9

コストパフォーマンス
機能性
移行容易性

★ IE10

コストパフォーマンス
機能性
移行容易性

★ IE11

コストパフォーマンス
機能性
移行容易性

IE8 = 業務システムでは既にサポートが切れたブラウザ

★ 概要

IE8は「Web標準へ準拠するぞ!」と宣言し、現在のIE開発の流れを作ったブラウザです。しかし、IE7の癖を引きずり独自色を強く残しています。

IE7と8は、共通した挙動・不具合を含んでいることから、コードベースが殆ど同じに見えます。そして、機能面で見れば、DOCTYPEスイッチバグを除いて、IE6とIE7の間にインパクトの大きい変更点はあまり無いため、私はIE8を「少しまともになったIE6」と捉えています。
(※参考 : IE7と8で共通するPNG表示バグとその対策 - ふろしき.js )
(※参考 : IE6のDOCTYPEスイッチ不具合とその対策 - ふろしき.js )

機能面では、CSS2.1への対応強化が挙げられます。しかし、IE6-7と同様、IE8のみに個別で対応が必要になることを、Microsoftが暗に認めている時代のブラウザです。IE8向けコンテンツを他のバージョンのIEやブラウザと相互運用できるようにするために、バージョンベクタ・ユーザエージェント・ドキュメントモードなど、バージョンに付き纏う対策が求められています。IE11ではこれらの機能は既に非推奨/廃止されているため、IE8に特化した複雑なWebシステムは、実質的にIE8のEOLと同じになります。
(※参考 : バージョン ベクタ - Microsoft )
(※参考 : IE8 : ユーザー エージェント文字列 - Microsoft )
(※参考 : ドキュメント互換性の定義 - Microsoft )

XPからの移行の難しさで言えば、IE9-10よりも制約が強くなっています。XP資産の維持で広く利用されている「互換表示ボタン/リスト」が利用できないためです。実質的には「イントラネット互換表示」と「X-UA-Compatible」の合わせ技で対策するという方法しか選択できず、柔軟性を損なう移行となってしまいます。
(※ 参考 : イントラネット内で互換表示を有効にする方法 - ふろしき.js )
(※ 参考 : IE8のX-UA-Compatibleの使い方/動作仕様 - ふろしき.js )

★ 選定の目安

比較的長いライフサイクルとなりがちな業務システムを動かすためのプラットフォームに、Windows 7のEOLである2020年1月14日以降、利用できなくなることが確定しているものを選んでしまうのは得策とは言えません。そもそもですが、開発1年+運用5年の業務システムの世界では、今から作るシステムの対象ブラウザにIE8を選んでしまった場合、運用中にサポートが切れることが確定してしまっています
(※参考 : IE8向けWebシステムのEOLは、2020年1月を超えてはいけない )

このため、現在いかなる理由があっても、本バージョンを選択することは推奨されません。IE8向けWebシステムを作るような状況に陥らないよう、IT管理部門に依頼しIEのアップグレードを行うよう促すか、動作対象ブラウザにFirefoxなど他のモダンブラウザを選択するようにして下さい。どちらも無理であれば、コスト高にはなりますが、マルチブラウザ対策を行い、IE9移行の世代と相互運用できるような状態にして下さい。

これらの対策が行えなかった場合、Windows 8への移行に失敗する可能性が高く、IE8ブラウザやWindows7VMを購入し維持しなくてはいけなくなり、運用コストが最悪の状況に陥ります。

IE9 = 相互運用できるドキュメントビューワー

★ 概要

機能面では、ビジュアル面に力を入れています。CSS3への対応強化、HTML Canvas、SVGが挙げられます。また、オーディオ・ビデオをFlashなどのプラグインを使わずに動作させることができるのも、このバージョンからです。
(※参考 : Internet Explorer 9 の情報インデックス - Microsoft )

IE9からは、バージョン個別対応が必要な場合、Microsoftがこれまで提供してきたバージョンベクターやユーザエージェントの検出でなく、「機能/動作検出」を推奨しています。IE9向けにテストされており、なおかつ機能/動作検出の指針を守り開発されたWebシステムは、IE6-7や8向けにテストされたものよりも、断然にIEのバージョンアップやマルチブラウザ対応に強くなります。
(※参考 : IE9より推奨される機能/動作検出に関するドキュメント - Microsoft )

IE9は、ブログやニュースサイトなどのWebページの閲覧を目的とするのであれば、十分な機能性を確保しています。ただし、高度なオフライン処理・通信処理・入力フォームはサポートされていないため、FlexやSilverLight相当のRIAアプリケーションをWeb技術で代替するには、まだ十分なポテンシャルが確保できていないと判断できます。

IEは2バージョンごとに類似した動作傾向・バグの共有が行われるという傾向にありますが、IE9は10と類似する点を多く含みます。IE9で見つかった不具合は、同じコードベースでIE10で改善されている可能性があります。

XPからの移行では、IE9と10はWindows 7の持つ全バージョンのIEの中で最も多い機能を提供しており、豊富な手段の中から選択することができます。

★ 選定の目安

IE9は相互運用が可能なブラウザであるため、選定対象と含めるのに十分なポテンシャルを得ています。

IE8やIE11には、XPのWeb資産の維持を行う上で強い技術的制約を含んでいますが、IE9とIE10にはこれらの制約が無く、差もありません。特に理由がない場合、IE9よりもIE10を選択する方が無難でしょう。

IE10 = アプリケーションプラットフォーム

★ 概要

IE10は「アプリケーションプラットフォーム」としてのポテンシャルを持つブラウザです。

IE9までは、ブログやニュースサイト程度のWebページを扱う分には、十分のポテンシャルを持ちます。Webシステムの場合は、JSPのようなサーバサイドスクリプティングを扱うようなタイプのものです。

対してIE10は、HTML5機能の強化が図られており、特に業務系の場合、オフライン処理、高度な通信処理、フォームの機能性向上に注目されます。ちょっとしたニッチな要望にも、柔軟に答えやすいブラウザになっています。SPA(Single-page Application)のようなJavaScriptを多く含むWebシステムとして活用されることもIE10は想定済みであり、IE開発チームもこれを意識した性能面の対策を施しているものと考えられます。

XPからの移行では、IE9と10はWindows 7の持つ全バージョンのIEの中で最も多い機能を提供しており、豊富な手段の中から選択することができます。ただし、Quirksモードの動作に仕様変更があるため、移行にはほんの少しだけコツが必要になります。
(※参考 : IE6〜9とIE10とでQuirksモードの動作が違う )

注意点として、Visual Studio 2013を用いたシステム開発では、WebSocketが実装されたIE10以上が必須要件になっていることと、Java開発もJSFやProject AvatorなどWebSocketと結びついた技術が多く含まれています。IEは一つのOSに1バージョンしかインストールできないため、IE9や8を標準ブラウザとして採用すると、場合によってはMicrosoft/Java系開発に支障が生じ、全システムが実質的にレガシーJava、Ruby、PHPなどの開発にロックインされます。

★ 選定の目安

IE10は、XPからの移行で最も適したブラウザです。

移行の技術的制約は一番少なく、既存資産の維持機能は最も高いポテンシャルを持ち、IE10上で開発されたシステムはIE8と比較しても長いライフサイクルで動作させることができます。Quirksモードの仕様変更というリスクも含んでいてもなお、デメリットが少な過ぎるため、逆に心配になるレベルです。

IE11 = スマートデバイス向けWebプラットフォーム

IE11は、スマートデバイスが必要とする様々な機能を追加したブラウザです。

機能面では、IE10までが持っているHTML5対応が強化された機能へ、スマートデバイスの過酷な環境で高いユーザビリティを獲得するための機能を追加しています。例えば、ページの先読みや、画像などのリソース読み込みの優先付けなど、貧弱なネットワーク環境下で高いパフォーマンスを引き出すための機能を提供しています。

ただ、多くの追加機能はWindows 8モードと呼ばれる状態でないと発揮されません。Windows 8モードとは、スマートデバイスに特化したIEの表示モードで、Windows 7には提供されていない機能になります。デスクトップ用途であれば、IE10とそこまでポテンシャルに変化が無いブラウザともとれます。

XPからの移行では、最も相性が悪いバージョンです。XP時に開発したIE6向けシステムは、通常ドキュメントモードを利用することで維持させます。しかし、IE11はこれが非推奨であるため、移行には全てのシステムの画面周りの改修、入念な動作テストが必要になります。ドキュメントモードは内部的に残されており、強引に動作させることも可能ですが、品質は良くなく、CSS Expressionsのようなレガシーシステム定番の廃止機能も動作方法次第では動かないなどの問題を抱えています。非推奨機能であるため、今後改善が行われる可能性も低いという状況です。
(※参考 : ドキュメント モードの非推奨 - Microsoft )

★ 選定の目安

このバージョンは、現時点で最新であるものの、XPからの移行の選定に含めるべきかは微妙なラインです。どちらかと言えば、移行後の開発システムが、Windows 7のEOL時にこのバージョンのIEで動作できる状態にできていることに重要な意味を持ちます。

IE11は、Windows 8系OSでは、実質的に最低バージョンのIEとなります。Windows 8はドキュメントモードが非推奨であるため、Windows 7から次版のOSへ移行を行うタイミングで、全システムが互換表示機能やX-UA-Compatibleに頼らず、11の最新のレンダリングエンジンで動作可能な状態になっていなくてはいけません。

Active Directory周りでまだまだ進化中のスマートデバイス向けWindowsですが、企業システムのIT管理者による統合管理の必要性を鑑みると、その実用性の高さから適用される可能性が高いでしょう。Windows系スマートデバイス(タブレット)を利用した場合、IE11へのアップグレードは必須の要件と言えます。IE11には、貧弱なネットワーク回線、タッチパネルとの親和性向上のため、多くの機能が追加され改善されています。ユーザ体験ではなく、性能という可視化される分野での強化が、強みになっているブラウザです。
(※参考 : 11分で覚える、IE11対応Web制作のカンニングペーパー(前篇) - さぶみっと )

>> HTML5/IE11対応 - Webシステム・ガイドライン集

HTML5世代のJavaScriptからマウスイベントの扱い方、Pointer Events

この記事は古くなっています。こちらを参照して下さい。

これまでマウスイベントの扱いは、以下のような記述方法でした。

var elem = document.getElementById("hoge");
if ( elem.addEventListener ) {
        // IE9以上/Firefox/Chrome
        elem.addEventListener("mousedown", fn);
    } else {
        // IE8以下向け下位互換対策
        elem.attachEvent("onmousedown", fn);
    }
}

上記はマウスが存在するという前提で成立していたもので、今後はマルチデバイス対応が求められる時代になります。

今のところはデスクトップ型向けとスマートデバイス型とでは、ユーザエージェントを使ってビューを切り替えるという方法が主流のようです。しかし今後は、Windows 8的マウスもタッチデバイスもいるような環境が当たり前になるかと思います。どんなページであっても、Webページは複数種類のデバイスから扱われることを前提とすべきでしょう。

Web標準では、これを柔軟に解決するための方法を提供しています。

1. Pointer Eventsの考え方

f:id:furoshiki0223:20131209163332p:plain

Web標準では、マウス/タッチパネル/ペンなどのデバイスは、「ポインター」という抽象的なデバイスとして扱うことで、デバイスの差異を吸収します。もちろん従来のマウスのイベントを利用してもタッチパネルは扱えますが、標準に準拠した統一された動作を実現するには、「ポインター」を利用する必要があるでしょう。

既存のマウスイベントについても、「ポインター」である程度カバーできているため、今後のことを考えるとこの手段に置き換えることが望ましいです。

2013年、現時点での現実的な記述方法としては、こうなります。

var elem = document.getElementById("hoge");
if(navigator.pointerEnabled) {
        // IE11以上+モダンブラウザ用(※現在推奨)
        elem.addEventListener("pointerdown", fn);
} else if (navigator.msPointerEnabled) {
        // IE10+Win8の下位互換対策(※2016年1月中旬まで必要)
        elem.addEventListener("MSPointerDown", fn);
} else if ( elem.addEventListener ) {
        // IE9もしくはIE10+Win7向け下位互換対策(※2020年1月まで必要)
        elem.addEventListener("mousedown", fn);
} else {
        // IE8以下向け下位互換対策(※2020年1月まで必要)
        elem.attachEvent("onmousedown", fn);
}

すごく長いですね・・・。IEに独自実装されていたattacheEvent(※11から削除)にも配慮しつつ、新しいイベントの記述方法まで意識しなくてはいけない。もはや、ハックに近い行為です・・・。

ただ、Windows 7が世の中から消えた頃には、こうなっています。

var elem = document.getElementById("hoge");
elem.addEventListener("pointerdown", fn);

ドキュメントは、W3Cサイトにて「Pointer Events」として公開されています。日本語だと、MicrosoftのIE11周りのドキュメントが一番上手くまとまっているように思えます。
(※参考 : ポインターイベント - Microsoft )

2. 出遅れた入力周りの標準

IEは、2バージョンワンセットの傾向があり、IE5と6、7と8、9と10とで、同じ動作傾向、バグの共有が行われていることから、おおよそ同じコードベースが使われているものと考えられます。
(※参考 : IE5-6、7-8共通のPNG表示不具合 - ふろしき.js )

そして、ディスプレイ周り、所謂レスポンシブWebデザイン対応についてはIE9世代で整備されましたが、入力周りについては、Appleのマルチタッチ特許のなど諸々の問題が絡み、本格的な対応はIE11世代からとなったようです。

f:id:furoshiki0223:20131209170322p:plain

IE11はWindows 8系の最低バージョンになりますので、実用性という面ではWindows 7系が衰退したころでしょう。

【企業システムの2020年問題】IE8以下向けのWebシステムのEOLは、2020年より後になってはいけない

バージョン8までのIEは、Microsoftが暗に独自性が高いことを認めているブラウザです。

同じHTML/CSS/JSであっても、バージョンごとに異なる仕様として動作することがあります。このため、上位のバージョンのIEで動作させるには「ドキュメントモード」いう機能を利用しなくてはいけません。

IEは、過去のレンダリングエンジンを再現させる機能を持っており、IE8からはドキュメントモードという名称で提供されています。Windows 9x/XP世代のWebシステムは多くの場合、IEのドキュメントモードを利用することで維持できているという状況です。
(※参考 : ドキュメント互換性の定義 - Microsoft )

しかし、IE11からはこのドキュメントモードが非推奨となり、今後サポートされなくなる可能性があります。現在のWindows8系OSのIEの最低バージョンである10は、2015年中旬でサポートが切れるため、今後のクライアントOS移行では実質的にドキュメントモードが利用できなくなってしまいます。
(※参考 : ドキュメント モードの非推奨 - Microsoft )

つまり理論上、IE8以下向けに作られたWebシステムは、Windows 7のEOLである2020年1月14日までに、相互運用可能なブラウザであるIE9以上向けに移行しなくてはいけません。

企業内の標準ブラウザとしてIE8を利用している場合、新規開発されるWebシステムも8向けになってしまいますので、早急にIE9以上へアップグレードする必要があります。Windows 7のEOLは2020年1月ですが、OS自体のアップグレードが早めに行われることを考えると、全くと言って良いほど時間がありません。

また、IE9以上を標準ブラウザとしていても、ドキュメントモードを利用しているレガシーWebシステムを移行を行わなくてはいけません。IEは独自実装は廃止し、古いWeb標準はある程度サポートするという方針のようなので、シンプルな仕組みで作られていた場合は、多少のレイアウト崩れ程度で動くかもしれません。ただ、Windows 8移行時直前に出来るほどリスクが低くないため、早めから意識する必要があるでしょう。

これらの対策が十分でない場合、クライアントOSのアップグレード時にシステムが動かなくなり、泣く泣くサポート切れの状態でWindows 7を保守し続けなくてはいけないという状況に陥ることが予想されます。

IE8向けWebシステムを作る際の対策

Windows 7のIEの最低バージョンは8であるため、今後もIE8向けWebシステムを新規で開発しざる得ない場合があるでしょう。IEは1OS上にマルチバージョンのインストールが許容されません。したがって、以下のような対策が必要になります。

★ 1. IEをアップグレードする。

IEをアップグレードするという、技術的に見ればベストな手段です。

ただし、IT運用の予算枠にIEのアップグレード分を追加して貰わなくてはいけないという問題があります。ユーザ企業側にこのような技術的課題への理解があり、トータルコスト最適化のために対策に乗り出そうとしている場合はスムーズに話が進むかもしれませが、単独にてシステム開発を受注した場合、この方法は採用しにくいでしょう。技術面でのベストな手段が、大人の事情からベストにはなり得ないという耳が痛い話です。

★ 2. Windows 8以上への移行日までをシステムのサポート期間とする。

Windows 7のEOLである2020年1月14日に移行期間を含め、2019年1月あたりまでをサポート期間としてしまう作戦です。

開発に1年かけたとして、5年維持できないという短命なシステムを開発します。システム化対象のサービス(業務)がPPM的に「問題児/花型」なステータスであれば、短いライフサイクルで改善が進むため問題は小さいかもしれません。しかし、「金のなる木/負け犬」の場合は現実的な選択とは言えません。最終的に移行時期に画面周りを全部改修して一斉移行するリスクを考えても、得策とは言えないでしょう。開発ベンダ側にとってはお得感がありますが、ユーザ企業にとってはトータルコストが大きい迷惑な方法と言えます。

★ 3. IE8とIE9以上(FireFox/Chrome)で動くように作る。

IE8とIE9以上(Firefox/Chrome)で動くように対策し、テストするという作戦です。

IE8向けには条件付きコメントやユーザエージェントによる検出を行い対策し、IE9以上には機能/動作検出型の開発をすることで、Windows 7のEOLに縛られないライフサイクルを確保します。当然ですが、普通に開発するよりもお金がかかります。Javaのようなキレイなやり方とは言い難く、マネジメントでの可視化も難易度評価も難しい、泥臭い方法になります。ユーザ企業側がこの問題を理解している場合、開発ベンダ側は要件フェーズで明確にスコープ定義をしておかないと、なし崩し的に対策を行う必要が生じ、火を吹く可能性があります。当然ですが、このような問題に対してはベンダ側からユーザ企業へ、IE8特化システムのリスクを事前に説明し理解を得る必要があるでしょう。

★ 4. Firefox/Chromeのみ対応にする。

IE向けに作ることを諦めるという作戦です。

しかし、エンタープライズ用途で利用されることを前提としているIEだからこそ受けられる恩恵、例えば長い期間のサポートを受けられなかったり、IT管理者によるActive Directoryなどの機能を使った統合管理が一切使えなくなります。Windows依存との完全な決別です。Windows 7時代はこのような方法は全く無いというわけでも無さそうですが、セキュリティ管理がいい加減になりやすいため、IT管理者側でも追加でセキュリティ強化ツールを選定するなど、IE以上に注意深く監視をする必要があります。

Firefoxに限定するなら、以下のページで開発のポテンシャルを確認できます。
>> Firefox向けWebシステム開発でできること・できないこと - ふろしき.js

なお、Firefoxの場合は、法人向けに標準化対応を行うサービスも提供しています。Webシステムのフロントエンド部分について、ライフサイクルを長期に渡り動作させれるというのは魅力的かもしれません。
>> 法人向けサポートのご案内 - Mozilla

Windows XPのアップグレード時に、IE5向けWebシステムが無いことを前提に移行してはいけない

IEのドキュメントモード機能が存在しなかったIE5〜7で、どのバージョンでも同じ仕様を持つプラットフォームを得るには、IE5の動作を再現させる「Quirksモード」を有効にするしか手段がありませんでした。

当時のIEは相互運用性が低く、バージョンごとの動作が異なるため、マルチバージョン下で動作するコンテンツ制作はコストが高くなりがちでした。そこで、少し複雑性の高い作り込みをクライアント側へ仕込む場合、レガシーIE向けコンテンツを動作させるために作られたはずの「Quirksモード」を、あえて有効にして新規開発を行った方が、IEのマルチバージョン下で動作させるWebシステムのリスク・コストを最小化させるという最悪のジレンマに陥りました。

このジレンマは、IE8への段階的移行を行っている際にも有効になります。IE6や7で動作させていた時は最新のレンダリングエンジン(標準モード)で動作させていたにも関わらず、IE8では動作がおかしくなるため、全てのHTMLドキュメントからDOCTYPE宣言を外し、Quirksモードが有効化させるという良くない手段に出てしまいます。

本来であれば、「イントラネット互換表示」を活用すべきですが、ActiveDirectoryへの変更が提案できないなどの要因が絡み、システム単体で対策できるDOCTYPEを外すという手段に出てしまいます。非常に良くないジレンマです。

このバッドプラクティスは、理論上、社内の標準OSがWindows7になるまで有効化します。既存の環境にはIE5がいないから大丈夫だと安心していると、問題になることがあります。OSの移行担当者は、Windows XPのバージョンアップ対応では以下の点に注意する必要があります。

1. IE8〜11への移行時の注意点(その1)

IE8から11では、X-UA-Compatibleという機能が提供されています。このパラメータを利用した場合、IEはDOCTYPEスイッチよりも、X-UA-Compatibleの設定を優先してしまいます。IE6向けのWebシステムをIE8〜10へ移行する場合、X-UA-CompatibleにはIE7を指定するのが定石です。しかし、何も考えずに以下を設定するのは危険です。

X-UA-Compatible : IE=7

最も安全なのは、以下の設定です。

X-UA-Compatible : IE=EmulateIE7

この設定は、デフォルトはIE7互換で動作させ、DOCTYPEスイッチの内容次第ではQuirksモードで動作させるという動きになります。

そもそもですが、Windows7系の場合、IE6向けコンテンツを動作させるには、「イントラネット互換表示」を利用するか、IEのバージョンが9〜10の場合は「互換表示リスト」を利用すべきです。これらの機能を利用した場合、DOCTYPEスイッチの判定が優先されるため、リスクが最適化されます。通常時はIE7モードとして動かし、DOCTYPEスイッチでQuirksモードが有効な場合は、Quirksモードが優先されるという、望ましい動作をします。

なお、IE8だけは、互換表示リストが有効な場合は常に「Quirksモード」になります。このため、移行は「イントラネット互換表示」を使うか、「X-UA-Compatible」を各システムに設定して回るという非常に泥臭い対策を行わなくてはいけないことがあります。

2. IE8〜11への移行時の注意点(その2)

IE6はXHTML1.0のDOCTYPEの解釈に問題があり、意図せずQuirksモードで動いていることがあります。これに気付かず開発が行われていた場合、IE7以上への移行では、イントラネット互換表示も、互換表示リストも使うことができない、実質的にX-UA-Compatibleでしか対策が行えないという状況に陥ります。

詳しくは、以下のページを参照して下さい。

>> XHTML1.0の場合、IE6からIE8〜10への移行時に表示が乱れることがある

3. IE10への移行時の注意点

IE10では、Quirksモードが2種類あります。単純にDOCTYPE宣言を使ってQuirksモードを動作させた場合、IE5とは互換性の無いQuirksモードが動作してしまいます。これを改善するには、X-UA-Compatibleとの合わせ技が必要です。

詳しくは、以下のページを参照して下さい。

>> IE6〜9とIE10とでQuirksモードの動作が違う

4. IE11への移行時の注意点

IE11からは、DOCTYPEスイッチが無視されます。従来の方法では、Quirksモードは有効になりません。
(※参考 : IE11ではDOCTYPE宣言がチェックされない - ふろしき.js )

IEは11でドキュメントモードが非推奨化されたため、今後は機能が廃止されることも予想されます。Quirksモードで動作しているWebシステムは、「動作/機能検出」の指針に基づいた作り込みで、相互運用性の高いIE9以上で動作するように改修する必要があります。
(※参考 : 機能検出と動作検出の使用 - Microsoft )

XHTML1.0の場合、IE6からIE8〜10への移行時に表示が乱れることがある

XHTML1.0のDOCTYPE宣言にはいくつか種類があり、IE7以上では常に最新のレンダリングエンジンである「標準モード」として動作します。しかし、IE6は一部の宣言方法で一番古いレンダリングエンジンである「Quirksモード」として動作してしまいます。
(※参考 : The <?xml> prolog, strict mode, and XHTML in IE - IEBlog )

IEには古いレンダリングエンジンを再現させるドキュメントモードという機能が備わっており、「互換表示ボタン」「互換表示リスト」「ローカルネット互換表示」「X-UA-Compatible」などを通じてドキュメントモードを制御し、新しいバージョンへ移行させることが多いでしょう。しかし、これらの機能はDOCTYPEスイッチの切り替えアルゴリズムまでは再現してくれず、問題となるケースがあります。

具体的には、以下の通りです。

6 8〜10 DOCTYPE宣言
S S <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Q S <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
S S <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Q S <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
S S <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Q S <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

IE6でテストされたWebシステムを開発していた際に、開発者が誤動作に気が付かず「Quirksモード」を前提に画面のレイアウトを作りこむと、IEのバージョンアップ時に挙動がおかしくなることがあります。

移行時の対策

誤動作によりXHTMLドキュメントをQuirksモードで動作させてしまっている場合、IE8以上ではX-UA-Compatibe以外からQuirksモードを再現させる方法はありません。このため、サーバ管理者はシステムを動作させているAP製品に対して、HTTP Response Headerへ以下のパラメータを応答させるよう設定が必要になります。

X-UA-Compatible: IE=5

より詳細な設定の方法については、以下のページを参照して下さい。

どういうケースが想定されるか?

この事象は、決してレアケースというわけではありません。

業務系で利用されるServer-side Scriptingの既定は、HTML5のような新しいWeb標準を利用する場合でも、XHTMLに沿って記述することが多いです。JavaのJSFもまさにそうでしょう。

DOCTYPE宣言は、XHTML1.0で宣言しても、HTML5の機能を利用することが可能です。IEも含め多くのWebブラウザは、XHTML1.0、HTML5、どちらの宣言を行っても、同じレンダリングエンジンが選択されるようにできています。HTML5は一部の廃止タグを除き、XHTML1.0と相互運用可能な言語仕様になっているため問題になりません。

f:id:furoshiki0223:20131205200136p:plain

Webブラウザ以外のソフトウェアからHTMLを読み込ませる場合、XMLパースが行える方が便利でしょう。この場合、XML宣言が行えるXHTML1.0のDOCTYPE宣言は、非常に有用なものとなります。XML宣言は本来任意ですが、無いと動作しなパーサものもあります。素直にHTML5のDOCTYPE宣言を行いたいところですが、XMLパーサの活用を考えると、今後もあえてXHTMLのDOCTYPE宣言を行うということは少なくないはずです。

IE6向けシステムは、JSPのような古い技術を利用していた場合は問題になりません。しかし、それこそJSFのような新しい技術を使って強引に動作させようとすると、何かしらの問題を作りこむ可能性を持ちます。IEのバージョンの世代と、サーバ技術の世代に開きが大きい場合は、注意して下さい。

IE11リリースによる本当の危機、その後のSIのやるべきこと

私が以前執筆した記事「意外と知られていない、IE11リリースによる本当の危機」がかなり好評でしたので、執筆者としてもう少しだけ言葉を残してみようと思います。

なぜQuirks?と考えたことはあるだろうか

Webシステムでは、わざとQuirksを使うというバッドプラクティスがどこでも横行しているでしょう。必然的に、そうならざる得ないケースがあったからです。マルチバージョン対応を最小のコストで行う方法として、Quirksが最も優れてしまったのというのが最大の要因です。

かつてWinXPの時代、6/7/8で同じ機能性が確保された無菌室状態のレンダリングモードはQuirksだけでした。IEのみしかいない世界では、Quirksに逃げられてしまう可能性があることを想定できていなかったのは、IE側のミスだったと言えます。IEは、バージョン間の相互運用性が確保できていないと暗に認めてしまうような機能を実装した時点で、X-UA-Compatibleを実装すべきだったのです。IEは自信を持って相互運用性が確保できたと言える状況になるまで、マルチバージョン対応の最善の方法にQuirksという抜け道を作ってはいけなかったのです。

しかしIEもまた、日本のSIのような、IE内だけでマルチバージョン対応を行うというレアケースを想定することは難しかったでしょう。日本のSIがWebでシステムを作ってしまった時点で、コストと正しさを両立できない仕組みを作ってしまった時点で、「あえてのQuirks」は必然的に止められなかったのでしょう。

正しさとコストを両立できるまでの6年

IE11のリリースで、Win7の時代にQuirksアプリをわざわざ開発する理由は失われてしまいました。問題は、Quirksを使うことが当たり前過ぎて、Quirksが何なのかをわかっていないような人がいるケース。そしてそれを、要件フェーズや品質管理側からコントロールできていないケースなのかもしれません。

今後のWebシステム開発では、IEの段階的なアップグレード計画、開発・移行を行うシステムのドキュメントモードのレベルの設計、テスト対象ブラウザについても、企業の持つシステム全体をトータルに見た上で、SI側がコンサルタントできないといけないはずです。そうしないと、6年後は最悪な状態に陥るでしょう。企業はWindowsのアップグレードを、諦めざる得ない状況になってしまうのです。専用に別の端末を確保し維持するという、コストパフォーマンスとして最悪の状態に陥るでしょう。

この6年をしっかりと設計し、全システムが見事IE10以上への移行に成功したのならば。バージョン検出やドキュメントモードでなく「機能/動作検出」による汎用的なWebシステムを作り上げたのであれば、HTML5の標準的プラットフォームにより、正しい方法で長いライフサイクルに耐えるシステムとなるはずです。

既存システムはコスト最適化させなくてはいけないというこの状況下で、Web開発を行うSIのコンサルタントにとっての、腕の見せどころなのかもしれません。

IE11を裏ワザ的なやり方でDOCTYPEスイッチを有効化する方法

IE11はDOCTYPEスイッチが機能しません。これは恐らく、ドキュメントモードが非推奨へ変わったからでしょう。
(※参考 : ドキュメント モードの非推奨 - Microsoft )

しかしIEはまだ、Quirksモードを内部的に残しています。今までとは異なる手段にはなりますが、有効化することが可能です。ただし、ドキュメントモード非推奨化に伴い、Quirksモードは表向きなくなったという扱いです。「Quirksモード」という表現は、IE11のどこを探しても見つかりません。こうした扱いの変化もあり、制御には少しだけコツが必要です。

内部ドキュメントモードとその表現方法の違い

IE11が内部的に備えている全てのドキュメントモードは、以下の通りです。

  • IE5モード
  • IE7モード
  • IE8モード
  • IE9モード
  • IE10モード+Quirksレイアウト
  • IE10モード
  • Edgeモード(※ IE11の動作)

「IE5モード」は、IE6〜9で提供されていた「Quirksモード」と、IE10で提供されていた「IE5 quirksモード」と同じ扱いのものです。基本的にはIE5の動作をエミュレートします。

対して「IE10モード+Quirksレイアウト」とは、IE10で提供されていた、HTML5との相互運用を図るため機能追加が行われたQuirksモードです。IE10で提供されていたQuirksモードは、IE5との互換性が無いことをMicrosoftが公表しています。
(※参考 : 相互運用可能な (HTML5) Quirks モード - Microsoft )

F12開発者ツールから見えるドキュメントモードは、以下の項目になります。

f:id:furoshiki0223:20131127192830p:plain

5/7/8/9/10/Edgeと、6つにしか見えません。

IE11では、IE10モード+Quirksレイアウトが有効時、表向きには「IE10」という表示がされます。逆にIE10モード+Quirksレイアウトを有効にしたい場合、F12開発者ツールからはそれを指定することができなくなっています。

IE10モード+Quirksレイアウトを有効にするには、X-UA-CompatibleとDOCTYPEスイッチによる合わせ技が必要になります。そしてその指定方法は、Quirksモードとそうでないものが混在するWebシステムを11へ移行した際に、意図せず有効化させてしまう可能性が高い組み合わせであるため、取り扱いには注意が必要です。

X-UA-CompatibleとDOCTYPEスイッチ動作一覧

IE11のX-UA-Compatibleと、DOCTYPEスイッチによるStandard/Quirksモードの切り替えに伴う内部ドキュメントモードは、以下の一覧の通りです。縦軸はX-UA-Compatibleのパラメータ、横軸はDOCTYPEスイッチによる状態切替を表します。

Standard Quirks
5 IE5モード IE5モード
7 IE7モード IE7モード
8 IE8モード IE8モード
9 IE9モード IE9モード
10 IE10モード IE10モード
11 IE11モード IE11モード
EmulateIE7 IE7モード IE5モード
EmulateIE8 IE8モード IE5モード
EmulateIE9 IE9モード IE5モード
EmulateIE10 IE10モード IE10モード+Quirksレイアウト
EmulateIE11 IE11モード IE11モード
Edge IE11モード IE11モード

>> DOCTYPEスイッチの切替条件は、IE10と同じです

最善の対策はあくまで「改修」

X-UA-Compatibleは、HTTPレスポンスヘッダとHTML無いのmeta要素の2箇所で定義されますが、常に後者が優先されます。このため、複数のドキュメントモードを同一システム内で混在させた場合、新しいIEへのバージョンアップにドキュメントモードを活用するケースでは、HTTPレスポンスヘッダを利用することになるでしょう。

IE10モード+Quirksレイアウト特化のシステムは滅多に開発されないことが想定されるため、IE11以降、トラブルを避けるためEmulateIE系のパラメータは利用しないことをオススメします。

そもそもですが、IE11からはドキュメントモードは非推奨です。Microsoftはこれまで一時的な対応策としてこの方法を提供してきましたが、IE12以降は機能として削除される可能性があります。Windows8系では定期的にIEのバージョンアップが強制されるため、本対策を利用してさらにシステムの延命を図ろうとしているのであれば、そのシステムは短命に終わる可能性が高いでしょう。本対策が必要なタイミングはごく稀であると認識して下さい。

正しい移行の方法は、改修を行うことです。

このブログの筆者について

川田 寛

コンテンツサービスの開発や運営代行を専門とする集団「株式会社ブートストラップ」の社長です。ネットではふろしきと呼ばれています。

2009年にNTTグループへ新卒入社し、ITエンジニアとしてクラウド技術・Web技術の研究開発と技術コンサルティングに従事。2015年よりピクシブに入社し、エンジニアリングマネージャー・事業責任者・執行役員CCOなど、様々な立場からコンテンツサービスの事業づくりに関わりました。2021年にメディアドゥへVPoEとしてジョインし出版関係の事業に関わったのち、2023年に独立しています。

関わってきたインターネット事業としては、ECサービスのBOOTH、UGCプラットフォームのpixiv(主に海外展開)、制作ツールのpixiv Sketch、VR・VTuber関連ではVRoid、Wikiサービスのピクシブ百科事典など、10を超える多様なCtoCコンテンツサービス。また、NTTドコモのすご得コンテンツ、メディアドゥのWeb3サービスであるFanTopなど、いくつかのBtoCコンテンツサービスにも関わってきました。

幸運なことに、私はコンテンツに関係する幅広いインターネットサービスのテクノロジー&ビジネスの知識を得ることができました。これを日本のコンテンツ発展に役立てたいと思い、株式会社ブートストラップを創業しました。

このブログでは現在、出版社やIPホルダー、ライセンサーといったコンテンツに関わる人々に向けて、インターネット事業に関するTipsや業界内のトレンドなどの情報を発信しています。私と話をしてみたいという方は、以下のフォームより気軽にご連絡ください。

お問い合わせフォーム