読者です 読者をやめる 読者になる 読者になる

まめ畑

ゆるゆると書いていきます

Google Chrome Frameに関するメモ

Google Chrome Frame

先日、Google Chrome Frameがリリースされました。(早期リリース版なので開発者・テスト向けとなっています)
これは、IE6-8に対応したPluginで、簡単に言うとIEでChromeレンダリングエンジンとJavascriptエンジンが使用出来るようになるものです。
開発者を悩まさせてきたIEをChrome化するというGoogleのアイディアに驚きましたが、Google WaveをIEで使用出来るようにするのが狙いだと思います。
しかし、HTML5の機能が利用できるようになったりJavascriptの実行が高速化されるのでIEしか使用出来ない環境ではかなり使えるものではないかと思います。
少し調べたメモ。


導入は簡単でGoogle Chrome Frame — Google Developersからインストールするだけです。
しかし、Chrome Frameを有効にするにはサイトにメタタグが埋めこまれている必要があります。

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

を追加するとChrome Frameがインストールされている環境ではChrome Frameが有効になります。

メタタグが無いサイトでも有効にするには、アドレスの先頭に「cf:」を追加します。
「cf:http://hoge.com/」のようになります。

さらにレジストリに追記する事でパターンマッチで有効にしたいサイトを指定することが出来るようなのですが、キーが見つからなかったので自分で作成するみたいです。

HKCU\Software\Google\ChromeFrame\OptInUrls\*google.com*

の様にキーを作ればいいとリファレンスには書かれています。
サイトを追加するには「OptInUrls」以下に有効にしたいURLのパターンを作成していくだけです。
注意書きにも書かれていますが、IEのネットワークスタックを使用してサイトを取得するので、ブラウザがIEと判定されIE向けのページが送信されてくると正常に動かない可能性がある模様です。
他にも2つほどレジストリをいじることで変更できるオプションがあります。(使用するネットワークスタック関連とナビゲーション関連)


Chrome Frameを導入すると、有効・無効にかかわらずUser-Agentが変わります。

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; chromeframe; .NET CLR 3.5.30729)

の様に、「chromeframe」が追加されるので、ユーザにChrome Frameをインストールするように促すようなサイトを作成する際に使用出来ます。

Googleも公式で、Chrome Frameのチェックとインストールを促すためのJavascriptを提供しています。
リファレンスで書かれているように、スクリプトのロードと簡単な関数の実行だけです。

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

<script>
 CFInstall.check({
    node: "placeholder",
    destination: "http://www.waikiki.com"
  });
</script>
</body>

オプションは

  • mode: オプション. Chrome FrameがインストールされていないIEに対してどのようにナビゲーションを表示するか。デフォルト「inline」。[popup]で新しいWindowを表示
  • url: オプション. ローカルな環境でChrome Frameを使用する時に、インストール用のPromptがナビゲートするアドレス。
  • destination: オプション. インストールが完了した後にリダイレクトするアドレス
  • node: オプション. promptを挿入する要素を指定する。指定されない場合はdocumentのトップに挿入する
  • onmissing: オプション. Chrome Frameがインストールされていない場合に呼ばれる関数
  • preventPrompt: オプション. Boolean, デフォルトfalse, 標準のインストールPromptではなくonmissingで指定した誘導用関数を使用する
  • oninstall: オプション. インストールPromptが表示された後、最初にChrome Frameがインストールされている事が確認された時に呼ばれる関数
  • preventInstallDetection: オプション. Boolean, デフォルト false. trueにするとCFInstallを無効にする
  • cssText: オプション. inlineモードの時にiframeに指定するCSS Text
  • className: オプション. inlineモードの時にiframeに指定するclassName


仕組みはGoogleがWebの問題児Internet Explorer対策を発表: IEをChromeにしてしまうに書かれている通り、IE中にFrameを作成しその中では、Chromeの機能が有効になるとのこと。
Frameが作成されるので、右クリックした際のメニューが変わってしまうのが難点。
IE8だとこんな感じです。

しかし、アドレスを「cf:http://hoge/」といった形でアクセスした場合ではなく、メタタグにによってChrome Frameが有効になった場合は表示されない模様。
あと

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

の前に書くと、この記述が無効になるのは「X-UA-Compatible」が上書きされてるからなのかな?


Chrome Frameが有効な状態でメニューからAbout Chrome Frameを選択するとバージョン情報などが見られます。

Chromeのバージョンが最新版になってますね。


ベンチマークをとってみました(10回の平均値です)

Browser V8 Bench SunSpider
Chrome 3 4177 531.6ms
Fx3.5 328 1433.8ms
IE8 98.9 5365.2ms
IE8 CF 4307 569.0ms