このページは 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 は Internet Explorer 用のプラグインで、Google Chrome のレンダリングエンジンを使用してブラウザキャンバス全体をレンダリングできます。Chrome に備わっているすべての HTML5 機能をサポートしており、Internet Explorer のユーザーエクスペリエンスにシームレスに統合できます。Chrome Frame は Internet Explorer 6、7、8、9 でご利用いただけます。IE6 から IE8 への古いブラウザをサポートする場合は Chrome Frame のほうが確かに便利ですが、たとえばアプリケーションに WebGL が必要な場合、IE9 ユーザー向けに Chrome Frame も必要になる場合があります。

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

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

オプトイン

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

オプション 1: HTTP ヘッダー（HTTP サーバー（Apache など）の設定に追加可能）:

X-UA-Compatible: chrome=1

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

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

これらのいずれかをサイトに追加すると、ユーザーのマシンにインストールされている 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 に直接送信して、インストールプロセスの手間を省くこともできます。 http://www.google.com/chromeframe/eula.html

管理者権限は不要

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

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

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

エンタープライズインストール

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

Chrome と企業への導入について詳しくは、http://www.chromium.org/administrators をご覧ください。

養子縁組

Google Chrome Frame は、yahoo.com、wordpress.com、複数の Google サービスといった主要なウェブサイトの多くで採用されています。Chrome Frame を使用すると、多くのサイトで最新のウェブ体験を利用できるだけでなく、初期読み込み時間も大幅に改善されます。webpagetest.org にアクセスして、Chrome Frame をブラウザとして選択すると、Chrome Frame でサイトのレンダリングが高速化されるかどうかを確認できます。

詳細

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