このページは Cloud Translation API によって翻訳されました。

Google Chrome Frame を使用して古いブラウザで HTML5 をレンダリングする

Malte Ubl

はじめに

HTML5 では、次のような優れたツールがウェブデベロッパーのツールボックスに追加されています。

より強力な新しい JavaScript API
ベクターグラフィック用の SVG
2D 用キャンバスと WebGL 3D グラフィック
CSS3（角丸、グラデーションなど）
より表現力豊かなマークアップ

このリストは、もちろん包括的なものではありません。ウェブプラットフォームは大きく進歩しており、古いブラウザと最新のブラウザの差は日々広がっています。
現在、主要なパソコン用ブラウザの最新バージョンでは HTML5 の大部分がサポートされていますが、古いブラウザが残っているため、最新の優れた機能を導入することが困難になっています。

Google Chrome Frame を使用すると、最新の HTML5 ページを構築しながら、古いブラウザを使用しているユーザーにもコンテンツを表示できます。

Google Chrome Frame とは

Google Chrome Frame は、Google Chrome のレンダリングエンジンを使用してブラウザキャンバス全体をレンダリングできる Internet Explorer 用プラグインです。Chrome の HTML5 機能をすべてサポートし、Internet Explorer のユーザーエクスペリエンスにシームレスに統合されています。Chrome Frame は、Internet Explorer 6、7、8、9 で利用できます。Chrome Frame は、IE6 ～ IE8 などの古いブラウザをサポートする場合に特に便利ですが、たとえばアプリに WebGL が必要な場合は、IE9 ユーザーに Chrome Frame を必須にすることも便利です。

HTML5 ポリフィルは、新しいブラウザへの移行をスムーズに行うためのもう 1 つの方法です。残念ながら、すべての機能をエミュレートすることはできません。また、古いブラウザではページの速度が低下します。古いブラウザは、新しい世代のブラウザよりもすでに速度が遅くなっています。

サイトに HTML5 機能が不要な場合でも、Chrome Frame を使用するとユーザーエクスペリエンスを向上させることができます。すでにインストールしているユーザーの場合、レンダリングは通常より速くなり、古いブラウザではサポートされていない機能にアクセスできるようになります。もちろん、マシンに Chrome Frame がインストールされていないユーザーに対しては、古いブラウザをサポートすることもできます。

オプトイン

Chrome Frame でページをレンダリングするには、HTML メタタグを追加するか、HTTP ヘッダーを使用します。これはとても重要です。つまり、ユーザーが Chrome Frame をインストールしていても、サイトはプラグインまたはデフォルトのレンダリングを完全に制御できるため、サイトが破損することはありません。次のコードスニペットは、サイトが Chrome Frame によるレンダリングを有効にする方法を示しています。

オプション 1: HTTP-Header（HTTP サーバー（Apache など）の構成に追加できます）:

X-UA-Compatible: chrome=1

オプション 2: メタタグ（HTML の <head> セクションに貼り付けるだけ）

<meta http-equiv="X-UA-Compatible" content="chrome=1">

これらのいずれかをサイトに追加すると、ユーザーのマシンに Chrome Frame がインストールされている場合は、Chrome Frame を使用してページがレンダリングされます。

Google Chrome Frame に関するメッセージ

古いブラウザのサポートを完全に非推奨にするには、次のような理由があります。

サイトに HTML5 動画、キャンバス、WebGL、CSS3 などの最新機能が必要な場合
古いブラウザに費やす開発時間が長すぎる
新機能の開発時間を短縮する

Chrome Frame は、古いブラウザのユーザーが引き続きサイトを使用できるようにする戦略として使用できます。

Chrome Frame は、ホストの User-Agent ヘッダーを「chromeframe」という文字列で拡張することで、使用可能であることを通知します。詳しくは、Chrome Frame のユーザーエージェントをご覧ください。

サーバーサイド検出を使用してこのトークンを探し、ページで Chrome Frame を使用できるかどうかを判断します。Chrome Frame が存在する場合は、必要なメタタグを挿入できます。存在しない場合は、Chrome Frame のインストール方法を説明するページにユーザーをリダイレクトできます。サーバーサイドスニッフィングの代わりに、CFInstall.js スクリプトを使用して Chrome Frame を検出し、ブラウザを再起動せずにプラグインをインストールするようユーザーに求めるプロンプトを表示することもできます。スクリプトの使用は簡単です。次の例のように、スクリプトタグとオプションのスタイルをページに追加するだけです。

<html>
<body>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>

<style>
/*
CSS rules to use for styling the overlay:
    .chromeFrameOverlayContent
    .chromeFrameOverlayContent iframe
    .chromeFrameOverlayCloseBar
    .chromeFrameOverlayUnderlay
*/
</style>

<script>
// You may want to place these lines inside an onload handler
CFInstall.check({
mode: "overlay",
destination: "http://www.waikiki.com"
});
</script>
</body>
</html>

自分自身にプロンプトを出す

ランディングページやレイヤを自分で作成することもできます。ユーザーをこの URL に誘導する

http://www.google.com/chromeframe/

これを IFRAME に配置できます。

リダイレクトパラメータを追加して、インストールが完了した後にユーザーをサイトに戻します。

http://www.google.com/chromeframe/?redirect=http://www.google.com/ Chrome Frame のランディングページに移動する代わりに、ユーザーを EULA に直接誘導して、インストールプロセスのステップを 1 つ省略することもできます。 http://www.google.com/chromeframe/eula.html

管理者権限は不要

ユーザーは、パソコンの管理者権限がなくても Chrome Frame をインストールできます。

user=true パラメータを追加して、Chrome Frame のユーザーレベルのインストールを有効にします。次に例を示します。

http://www.google.com/chromeframe/?user=true

エンタープライズ向けのインストール

企業は、MSI インストーラを使用して Chrome Frame を社内にデプロイできます。MSI インストーラは、http://www.google.com/chromeframe/eula.html?msi=true からダウンロードできます。

Chrome とエンタープライズデプロイについて詳しくは、http://www.chromium.org/administrators をご覧ください。

養子縁組

yahoo.com、wordpress.com、いくつかの Google プロパティなど、多くの主要なウェブサイトが Google Chrome Frame を採用しています。Chrome Frame は、多くのサイトで最新のウェブエクスペリエンスをユーザーに提供できるだけでなく、初回読み込み時間を大幅に短縮します。Chrome Frame がサイトのレンダリングを高速化できるかどうかを確認するには、webpagetest.org にアクセスし、ブラウザとして Chrome Frame を選択します。

詳細

詳しくは、スタートガイドをご覧ください。または、Google IO 2011 の動画をご覧ください。