Google Chrome Frame: サイト管理者向けガイド

2013-06-30更新: 2013 年 6 月、Googe Chrome Frame の開発終了が発表されたのを受け、新しい記事を書きました。

IE で Google Chrome と同等のレンダリングを実現するプラグイン、Google Chrome Frame が正式版になりました。ユーザはよりリッチで快適な Web 体験ができるし、サイト管理者としても事実上古い IE のシェアが減ることになって嬉しい、しかもインストールに管理者権限が不要という、ちょっといいプラグインなんですよね Chrome Frame。

とは言えユーザがインストールして使ってくれないことにははじまらないので、この Chrome Frame の利用を促進するためにサイト管理者にできることを紹介します。

ページを Chrome Frame でレンダリングさせる

まず、すでに Chrome Frame がインストールされている場合にページを Chrome Frame でレンダリングさせる方法です。HTML の head 要素内に以下の記述を加えます:

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

もし IE の meta スイッチを指定している場合、まとめて以下のように書きます:

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

これで、もし Chrome Frame がインストールされていれば、そのページは Chrome Frame でレンダリングされます。

Chrome Frame のインストールを促す

次に、まだ Chrome Frame をインストールしていないユーザにインストールを促す方法です。それには Google から提供されている CFInstall.js というスクリプトを利用します:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<script type="text/javascript">
window.attachEvent('onload', function () {
    CFInstall.check({
        mode: 'overlay'
    });
});
</script>

このコードをページの body 要素内に記述します。その際 IE の条件コメントを利用して、IE 以外のブラウザでロードされないようにしましょう。この例では IE8 未満を対象にしていますが、プロジェクトの要件によって検討してください。ついでにホワイトスペースや改行も削除してみます:

<body>
...

<!--[if lt IE 8 ]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<script type="text/javascript">window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'});});</script>
<![endif]-->
</body>

スクリプトはロードされると Chrome Frame がインストールされているかどうかを判別し、もしされていなければインストールを促すダイアログを表示します。ユーザがインストールせずにダイアログを閉じた場合、以降は cookie によって同一ドメインでは表示されません (cookie の有効期限は 1 年間に設定されているようです)。

表示方法は mode オプションで指定できるようですが、この 'overlay' という値が推奨されています。ここでは最低限のオプションしか指定していませんが、そのほかの仕様についてはドキュメンテーションを参照してください。

ちなみに HTML5 Boilerplate もバージョン 2.0 でこのスクリプトを採用していますね。

以上、IE に呪いの言葉を浴びせるのもいいけどそれ以外にもできることがあるかもよ、という話でした。