11分で覚える、IE11対応Web制作のカンニングペーパー(後篇)

投稿日時:2013 年 12 月 19 日   ライター:   連載:

こんにちは!ブログ「ふろしき.js」のライター、川田です。

悲しいことに、今回はあまりカッコイイ機能を紹介できません!扱っているネタが、とてつもなく地味なんです。写真で見せてもなにも凄さが伝わってこないので、例えばそう、カリフォルニアの草原みたいな癒やされそうな画像とか載せて、Facebookのサムネイル詐欺とかやった方がいいんじゃないだろうかと、そんな誘惑と戦っております。(怒られます)

さて今回の話、すごく地味かもしれないけど、IE11が実装した機能の中でもかなり重要な技術ばかりです。IE11はスマートデバイスが抱えた過酷な環境で、いかに高いユーザビリティが得られるかということを追求したブラウザに思えます。まさにSurface2のようなデバイスですね。前回は主に、入力部分と出力部分でのアプローチを中心にお話ししました。今回はその逆で、ユーザビリティをいかにして裏から支えていくのかというアプローチを中心にお話します。

これまでのIEは、性能の改善はあくまでIEの中の人の戦いでした。ベンダの提供したJavaScriptの性能グラフを見せられても、「棒が短くなったんだ、すごい。」ぐらいにしか思えなかったでしょう。性能に関する情報の発信先と言えば、作る側より使う側を意識していることが多かったように思えます。

ところがIE11からは、コンテンツを作る側もこの戦いに参加するよう求めています。自分たちの手で性能を作りこみ、性能面からユーザビリティの限界に挑戦することができる。IE11はこれを手助けするための手段を、ブラウザの機能としてガッツリと作りこんできたのです。
 

4. ネットワークのいない世界

デスクトップの時代は、ネットワークは繋がっていることが前提でした。しかしスマートデバイスでは、Wifiやテザリングなど外的要因の大きい不安定な通信手段を利用することになるため、「繋がらない」「遅い」を前提にしなくてはいけません。従来の安定したネットワークは、もうそこにはいないのです。

「繋がらない」に関しては、IEは10の時点で「AppCache」というキャッシュを制御するためのWeb標準をサポートし改善されました。オフライン状態でもフロントエンド単体のみで動作できる上に、可変のコンテンツのみを読み込ませることができるため、ネットワークリソース消費を最小限に留めることもできました。

「遅い」に関しては、IE11の出番です。IE11は、コンテンツの読み込みのタイミングに力を入れています。すぐに使わないものは遅延読み込みし、あとで使いそうなものは空いている時期に先読みするっといったアプローチが行え、限られたネットワークリソースを最大限に活かすことができます。

11
 
 

すぐに使わないものは、後で読み込む?

scriptタグにはdeferというプロパティがあります。このプロパティは、HTMLドキュメントの読み込みが完了した後から、外部ファイルの読み込みを始めるという、非常にシンプルな遅延読み込みを行うためのWeb標準です。

<script src="hoge.js" defer></script>

しかし、CSSやJSやimg、AudioにVideoにSVGと、HTML5の登場で読み込みを行う外部ファイルの種類も数も多くなりました。遅延読み込みをするJSライブラリは、load.js(AMD)にModernizr.load(yepnope.js)、jQuery.lazyLoadなどなど、数えだすとキリが無いほど様々なアイデアが出てきていますが、こうした様々なリソースに対してWeb標準側でも遅延読み込みできるようにしようという考えが生まれました。

IE11からは、「Resource Priorities(lazyload)」というWeb標準のプロパティが実装されています。標準自体まだ未成熟なため、postponeなど他の機能へは対応せず部分実装になったようですが、今回実装された「lazyload」はページ読み込み直後の描画へ直接的に関わるため十分な功績でしょう。

<img src="hoge.jpg" lazyload="1" />
<img src="fuga.jpg" lazyload="0" />
<img src="piyo.jpg" lazyload="0" />

これを利用すれば、例えば画像ファイルを初期表示時に見える場所を優先して読み込ませるといった対策が行えます。そこそこ複雑なページにならないとその効果が期待できませんが、JSライブラリの力を借りずにブラウザだけで行えるというのは、シンプルで魅力的な機能と言えます。
 
 

すぐに使いそうなものは、先に読み込む?

Webページは、リンクをクリックしてから表示しきるまでの間、大量の通信処理が行われますが、読み込みが終わってページを閲覧している間は何もしていないことが多いでしょう。この無となった時間、かなり勿体無いですね。

IE11では、Webページを閲覧中に裏で次に読みそうなWebページを予め読み込んでおく機能があります。例えば、コンテンツが分割されているようなWebニュースサイトでは、「次のページ」のような読み込まれる可能性が高いWebページを、先読みするといったアプローチが行えます。リンクをクリック後すぐにページが表示されるため、ユーザエクスペリエンスの向上が見込めます。

以下のタグを埋め込むだけです。

<link rel="prerender" href="http://example.com/nextpage.html" />

CSSなどのファイルを単独でキャッシュに乗せることもできます。例えば、トップ画面を表示している際に、Single-page Applicationで開発されたアプリ起動に必要な、サイズの大きいフレームワーク用のファイルを先に読みしたいというケースです。

IE11は、10個まで読み込みをサポートしているため、共通化がキレイに行われて入れば、例え上記のprerenderを利用していなくてもそこそこのパフォーマンスで動作させることができます。ここに関しては、デスクトップ版であってもその恩恵が受けれるかと思います。

<link rel="prefetch" href="http://example.com/style.css" />

 
 

正しく動いているのか確認する方法は?

通信周りの機能がひと通り理解できたところで、ちゃんと動いているかどうかを確認するため、デバッグの手順を理解してみましょう。通信周りは見た目に現れない部分なので、ツールで目視確認をしないことには正しく動いているか確認できません。

デバッグは、前篇でも紹介した「F12開発者ツール」を使います。F12を押して、無線ルーターのような見た目のアイコンをクリックして下さい。

13

先読みが行えているかどうかのチェックは、とても簡単です。ページを開いた時に、先読みしたいページの内容が同時に読み込まれていたら、正常に動いたと判断できるからです。

例えば、以下のように何も表示しないページ。

16

普通に表示すると、F12開発者ツールの結果は以下の通り。ページのロードのみを行うという、ごく普通の動作です。

14

ここに、先読みページとして私の個人ブログを指定すると、結果がこのように変わります。明らかにブログの内容を読み込んでいます。

<link rel="prerender" href="http://furoshiki.hatenadiary.jp/entry/ie_documentmode" />

15

ちゃんと動作すると、表示が本当に速いんです。すごく簡単なので、一度試してみて下さい。一つタグを加えるだけというシンプルな実装なので、今後はこの機能、どんなサイトでも使うことが必須になると睨んでいます。

 

5. 電源のいない世界

電源の消費量を落とす対策は、IEでもかなり行われています。ブラウザで消費電力が最適化というのに違和感を感じるかもしれませんが、Microsoftはここにかなり力を入れており、Visual Studioでは消費電源のプロファイルが行える機能まで提供しています。

スマートデバイスの場合、デスクトップとは異なり安定した電源は存在しない世界なので、シビアにチューンすることが求められています。IEの作り込みに工夫を加えていますが、コンテンツ制作者側にも電気消費量を抑えるための作りこみが求められています。

 

無駄に処理させない

無駄に処理させない方法については、IE10の時点で提供されています。

IE10の時点で実装されていた「Page Visibility API」を使うと、ユーザ側でも消費電力を下げるための作り込みが行えるようになります。このAPIは、バックグランド時にはサーバへのチェック頻度を下げ、アプリがアクティブな時はチェック頻度を上げるといった対策を行うために利用されます。

 

無駄にキャッシュさせない

IE11からはキャッシュ側でのアプローチを試みています。出来る限りディスクへキャッシュさせないことで、電気消費を抑えようという考え方です。

IE11から実装された「msCaching」では、XHRでビデオデータのダウンロードするという処理で、ビデオデータをキャッシュするかどうかという指定が行えます。このあたり、少し前のネイティブアプリだとガッツリとコードを書かされたのですが、JavaScriptはオプション一つで実行できるあたり、やはり高級な言語なんだと感動させられます。

 

6. セキュリティのいない世界

スマートデバイスだとセキュリティ事情は大きく異るので、コンテンツ制作者側でもある程度セキュリティと性能のトレードオフな関係を解決していかなくてはいけません。デスクトップ型にあった安定したセキュリティは、この世界にはいません。

 

何をキャッシュさせるか?

これまでのIEのキャッシュで代表的なものと言えば、「戻るボタン」が押された時でしょう。実はIE11では、戻るのキャッシュのルールまで定義しています。HTTPSだった場合は無効とか、様々な条件が含まれていますが、多くはセキュリティとパフォーマンスの妥協点を探るような内容になっています。

 

いかにして暗号化するか?

暗号化に関しては、「Web Cryptography API」というWeb標準を実装しました。このあたり、突っ込むと話が長くなり、それだけで連載ができてしまうレベルなので、そのうち私のブログで紹介しようかと思います。

 

7. プラグインのいない世界

一時代を築いたFlashなどのプラグインも、最近では各ブラウザベンダのエコシステムから外れ衰退しつつあります。昨今の多用なデバイスに対して、プラグインは、最良なユーザビリティを提供することができないのです。スマートデバイスの世界には、従来のプラグインはもう存在しません。

IEも、HTML5への準拠により、プラグインレスでWebコンテンツを提供できるよう改善を行ってきました。

 

保護されたコンテンツの利用

いくらプラグインレスと言っても、プラグインに依存しざる得ない部分もあったのは事実です。一時ニコニコ動画もタブレット向けにVideoタグを利用したコンテンツを提供したようですが、HTML5をこれだけ推しているGoogleでさえ、未だYoutubeにはFlashを使わざる得ないのもまた事実です。

技術的な面については時間が解決しますが、コンテンツ保護などの権利が関わる部分は、揉めに揉めてなかなか標準化が進みませんでした。このあたりは私も、多少方向性が違うとはいえ、ブログでDRMやEME周りを中心に記事としてまとめています。

IE11からは、保護されたコンテンツを扱える機能として、「EME(Encrypted Media Extensions)」というWeb標準を実装しています。ただ、この仕組は一部の機能をOSなどのブラウザの外へ実装する必要があり、Windows 8.1でしか動作しません。

このWeb標準は、今すぐ使えるというものでは無いでしょう。今後のコンテンツの権利の考え方、コンテンツを扱う団体と共に、この技術をどう扱うか議論しながら進めていくように思えます。私的には、この技術がIE11で実装されたこと自体に意味があると思っています。

 

3Dグラフィクス処理

レイヤーが低いということもあり、セキュリティ上の問題からなかなか実装に踏み切れなかった3Dグラフィクスを扱うためのWeb標準「WebGL」ですが、IE11にしてようやく実装されました。プラグインベースではできていたことですが、これがWebブラウザの機能のひとつとして実装されたというのは、プラグインレスの世界へまた一歩前進したと言えるでしょう

筆者はHTML5の入り口がWebGLだったということもあり、昨年も小さな勉強会を開いていたわけで語りたいことは山ほどあるのですが、あまり理解されない世界ゆえに、この想いを共有できる友は大募集です。内部的にはバイパスされているであろう、Direct Xベースのビデオカードとセットで語れるとなお良い感じです。

・・・恐らくは殆どの方が友達になりたくないと思われますので、今回は手軽にWebGLに触れれる手段として「Three.js」をオススメさせて頂きます。ゲームプログラマ的には性能チューニング周りで不満を感じるかもしれませんが、ガッツリとしたゲームでなく、単純なWebコンテンツレベルで何かを作るには十分のポテンシャルを持っているように思えます。

公平なベンチマークが手元に無かったため、性能比較は今回出せません。それでもいくつか検証はしてみました。Surface2はIntel HDと聞き、ゲームプログラマ仲間の間では不安視する意見も多かったのですが、フレームレートが低いという問題を除けば、ビデオカードで問題になりがちな発色(影の描画など)やポリゴンの継ぎ目(テクスチャ間のズレ)は、筆者がいつも使っているお手製のイジメスクリプトからは検出されないという、想像していたよりは優秀な結果となりました。消費電力の関係からかビデオカードの性能も実装も制限が多く、WebGLを取り巻く環境は結構厳しい状況です。「良心的な量のシェーダを突っ込んでいるうちは安定!」なんていうのも、スマートデバイスの世界では結構レアだったりします。本当に凄いことなんですよ。

17

 
 

最後に

さて、2回に分けてIE11の面白い所について語らせていただきましたが、いかがでしょうか。実は私、「IE11」でググると上から2番目に表示される(11月の時点では1番上だった)、個人ブログのライターをやっておりまして、IE関連の情報は色々と発信させて頂いております。そんなIE研究家な筆者の目からみて、今回お話した内容は、全体の約11%程度しか語れていないと思っております。IE11の変更は異質で、奥が深いんです。(これでも記事は、かなり減らしたんです!)

色々とお話させて頂きましたが、仮に全てを忘れたとしても、IE11という言葉を聞いた時に「スマートデバイス」という単語が思い浮かべば、もうそれで十分かと思います。スマートデバイス向けの何か対策を行いたいと考えた時、IE11のガイドラインを調べれば、Web標準として何が出来るかを大体は理解できるはずです。もうこの際、IE11は利用できなくても、IE11のサイトを見るだけでも勉強になるので、チェックして頂ければと思います。

22分間もの時間を頂き、ありがとうございました。次回は、IE12がリリースされたころでしょうか?結構期待しているバージョンなので、今回よりも分厚い特集記事ができそうです。その時また、お会いしましょう。ありがとうございました!

著者プロフィール

川田 寛(かわだ ひろし)

Web技術者コミュニティ「html5jエンタープライズ部」の部長。中立的な立場から、エンタープライズ領域で活用されるWeb技術の「今」について発信し業界の発展に貢献する、コミュニティ活動家。

2013年は、日本マイクロソフト(IE)、Xenophy(Sencha)、日本Javaユーザ会など、Web技術の発展に貢献する団体/企業を巻き込み、「業務システムエンジニアのためのHTML5勉強会」を6回に渡り開催。人間中心設計推進機構にも正会員として参加している。

個人の活動では、月間10万ビューを超えるWeb技術情報発信ブログ「ふろしき.js」の運営を行う。カンファレンスへの登壇も行い、2013年11月には、SlideShareへ投稿したプレゼンスライドが週間ランキングで世界1位を獲得した。

Twitter : @kawada_hiroshi
Blog : http://furoshiki.hatenadiary.jp/
コミュニティ : http://www.html5biz.org/

ページのトップに戻る