Hebikuzure's Tech Memo

2011年9月2日

プラグインなしでのブラウジング

Filed under: IE Blog — hebikuzure @ 12:46 AM

Browsing Without Plug-ins 
http://blogs.msdn.com/b/ie/archive/2011/08/31/browsing-without-plug-ins.aspx

マイクロソフトの日本語 IE ブログでも盛んに翻訳が掲載されているのですが、今日は最新の IE Blog の記事を私訳しました。標準の HTML5 の機能をできるだけ利用し、Flash などのプラグインが無い (または意図的に無効にしている) 場合でも正常に動作する Web サイト、Web アプリケーションを作成する事の重要性についての記事です。

以下の文章は IE Blog の 8/31 の記事 Browsing Without Plug-ins を hebikuzure が私的に試訳したものです。翻訳については Microsoft Corporation および日本マイクロソフト株式会社とは無関係に hebikuzure が公開情報に基づき独自に行ったものであり、この文書の内容についての文責は公開者である hebikuzure にあります。翻訳の内容および技術的内容については正確を期すよう十分な注意を払っておりますが、誤りや不正確な部分が含まれている可能性がありますので、本文書を利用される際には原文も併せてご確認ください。


プラグインなしでのブラウジング

2011年8月31日 午後5時

非常に幅広い種類のデバイスとその上のブラウザーでより多くのブラウジングが行われるようになっているため、より多くのユーザーがプラグインなしでのブラウジングを行うようになっています。Web プラグインを使わないブラウズをする利用者に優れたサイト エクスペリエンスを提供する事は、幅広い観衆にリーチしなければならないサイトにとって重要な課題です。HTML5 によって、モダン ブラウザーとサイトはプラグインなしでも優れたコンシューマ エクスペリエンスが提供できます。

“プラグイン” とはブラウザーの低レベル インターフェイスを利用してクライアントのネイティブ コードを実行するブラウザー拡張を幅広く意味しています。例えば、ここで示されているのは Webkit のアプローチで、IE では ActiveX コントロールとブラウザー ヘルパ オブジェクト (BHO) に相当します。Web サイトは幅広い種類のプラグインを利用しています; Adobe Flash は最も一般的なもののひとつです。

より一般的に

今日の Web ブラウジングの多くは単にプラグインをサポートしていないデバイスで行われています。プラグインをサポートしているブラウザーでは、プラグイン無しで実行する色々な方法を提供しています。IE9 では、一例として、ActiveX フィルタリングが含まれています。他のブラウザーでは、こちらこちらのような、プラグインを制御できるアドインが提供されています。プラグインは 64ビット版のブラウザー内で実行するようコンパイルできますが、多くの開発元は 32 ビット版ブラウザー内で実行できるバージョンしかリリースしていないので、64 ビット版ブラウザーの実行も、プラグイン無しのブラウジングを一般的にしている別の理由です。


64
ビット版 Windows 32ビット版と 64 ビット版両方の Internet Explorer を含んでいます

より良いエクスペリエンス

今日のサイトの多くは既に、プラグインが利用できない場合でも良好なエクスペリエンスを提供しています。例えば、Hotmail をプラグインが利用できない (64 ビット版のブラウザーのようにインストールされていないか、AvtiveX フィルタリングで無効にした) IE9 で表示しても、正しく機能します:


プラグイン無しの IE9 での Hotmail の受信トレイ

一部のサイトでは、プラグイン無しで機能させるために利用者の作業が必要です。例えば、YouTube をプラグイン無しで動作させるには、http://www.youtube.com/html5 にアクセスして “HTML5 試用版を有効にする” をクリックします。


プラグイン無しの IE9 での YouTubeHTML5 試用版を有効にする前 () と有効にした後 ()。右側のコンテキストメニューはビデオが HTML5 で再生されている事を示しています。

その他のサイトではプラグインが無効になっている場合、一部または全部の機能が無効になります。例えば、MSNBC.com と CNN.com ではビデオを除いて機能します。Gmail では現在の所、プラグインが無効になっている IE9 をブロックします。これは Gmail が IE7 以降利用可能な Web 標準の XHR を利用するのではなく、XHR ActiveX オブジェクトが利用可能かチェックしているためです。Web は IE7 の頃から相当に進化しているので、サイトは古いブラウザーや古いバージョンの標準規格に特化したコードに立ち戻り、再検討したいでしょう。


いくつかのサイトではアプラグインが無いと一部または全部の機能が無効になります。

機能の検知: サイト開発者が効率的に行う方法

多くのサイトはプラグインが利用できない場合でも良好なエクスペリエンスを既に提供しています。サイトがデバイスやブラウザーを特定する事によりこの動作が行われている場合、利用者にとって問題が生じます。例えば MSNBC.com のビデオは、PC 上のブラウザーがデバイスの User-Agent ストリングを送信するとプラグイン無しでも機能しますが、同じ PC 上の同じブラウザーが異なる User-Agent ストリングを送信すると機能しません:


Flash がインストールされていない Apple Safari と、iPad であると認識させた同じブラウザーによる MSNBC.com

利用者にとっては、開発者がブラウザーやその構成を特定するようサイトにハード コーディングするより、機能の検知とフォールバックを利用する方が望ましいでしょう。例えばプラグインが存在しない場合に HTML5 Video を利用する事は、利用者により良いエクスペリエンスをもたらすでしょう。多くのサイトは既に、プラグインが存在しない場合の広告の提供にこのフォールバックに相当する動作を行っており、それはこのソリューションが実用的でスケーラブルである事を示しています。

利用者のエクスペリエンスは、サイトが最初に標準規格ベースの機能のテストを行い、必要な場合にのみプラグインの利用にフォールバックするというベスト プラクティスに従う時、より良好になります。一例として、XMLHttpRequest の機能の検知についての良いパターンと悪いパターンを示します:

// BAD PATTERN: Don’t do this! (悪いパターン: このようにしない事)
var xhr = window.ActiveXObject
    ? new ActiveXObject("Microsoft.XMLHTTP")
    : new XMLHttpRequest();
// Best Practice: Use Native XHR, if available (ベスト プラクティス: 可能であればネイティブ XHR を利用する)
if (window.XMLHttpRequest) {
    // If IE7+, Gecko, WebKit: Use native object
    var xmlHttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
    // …if not, try the ActiveX control
    var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
    // No XMLHTTPRequest mechanism is available.
}

別のコンテンツに手際よくフォールバックする事は、利用者のフラストレーションを高めないために重要です。例えば Gmail のビデオ チャットは Adobe Flash が存在しない場合に巧みにデグレードします。いくつかのサイトはユーザー エージェント ストリングやその他のブラウザー固有のプロパティーによりデバイスを特定する事でフォールバックを行っています。この短期的なソリューションはブラウザーや利用者のブラウズの仕方の変化に対応できません。(IMDB.com のような) デバイス上のブラウザーはプラグインをサポートしないとみなすアプリを構築するのは別のアプローチです。ユーザー エージェント ストリングは長期間にわたり提供すべき HTML やスクリプトを特定する方法としては信頼できるものでも、安定したものでもありません。

HTML5 の能力は、以前にも増してより多くのデバイス、より多くの構成で利用者が今日的な Web を体験する事を可能にしています。Web 開発者にとって、これはより多くの人々が自身のサイトを訪れる機会がある事を意味しており、プラグインが利用できない場合でも機能するようサイトを作成するモチベーションが大きくなっている事を意味しています。

—John Hrvatin, プログラム マネージャー, Internet Explorer

コメントする »

まだコメントはありません。

RSS feed for comments on this post. TrackBack URI

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

WordPress.com で無料サイトやブログを作成.

%d人のブロガーが「いいね」をつけました。