Google Chrome でサイトをうまく表示する方法

2011年9月12日月曜日

Google Chrome が 2008 年 9 月にリリースされて以降、すでに多くの皆様に利用していただけるようになっておりますが、残念ながらいくつかのサイトが正しく表示されないという声がまだ聞かれます。サイトが正しく表示されないのは、もちろん Google Chrome 側の不具合が原因であることもありますが、一方でサイトがある特定のブラウザだけを対象にしている場合や Web 標準に沿わない形でサイトがデザインされていることもあります。

今までに、どうしたら Google Chrome でサイトを正しく表示させられるのか、ということに関してたくさんの質問がウェブマスターやデベロッパーのみなさんから寄せられました。今回は、このためのヒントをいくつかご紹介します。

Google Chrome を検出するためには

多くの場合、Safari と Google Chrome でサイトは同じように見えます。なぜならこれらは両方とも WebKit （英語）ベースのブラウザだからです。もしあなたのサイトが Safari で正しく表示されているのなら、Google Chrome でも同様に正しく表示 されるはずです。

サイトによっては Chrome が他のブラウザと混同されてしまうことも少なくありません。Safari では正しく表示されているサイトが Chrome で正しく表示されないのならば、そのサイトが Chrome のユーザー エージェント文字列を認識していない可能性があります。

Google Chrome のユーザー エージェント文字列は次のようになります。

Mozilla/5.0 (Windows NT 6.0; WOW64) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/W.X.Y.Z Safari/534.24

Chrome 11 におけるユーザー エージェント文字列の変更 - Google Japan Developer Relations Blog で紹介したように、Chrome 11 より変更になっていますので、ご注意ください。

ユーザー エージェントのタイプを検出したいのであれば、次の JavaScript が WebKit での検出に使えるでしょう。 
   var isWebkit = navigator.userAgent.indexOf("AppleWebKit") > -1;
そうではなく、もし WebKit が特定のバージョン以上であることを確認したいのならば、以下の新しい機能が使えるでしょう。 
   var webkitVersion = parseFloat(navigator.userAgent.split("AppleWebKit/")[1]) || undefined;
   if (webkitVersion && webkitVersion > 500 ) {
     // WebKitの素晴らしい機能を使う
   }
Google Chrome が利用している WebKit のバージョンは Ominibox に “about:version” と入力することで得ることができます。

一般的に、WebKit や Google Chrome を検出するために "Google" や "Apple" といった文字列を navigator.vendor に加えることはお勧めしません。なぜならそうしてしまうと、他の Webkit や Chromium をベースとしたブラウザを検出できなくなってしまうからです！

WebKit の検出の詳細については、 webkit.org （英語）をご覧ください。


その他のヒント
  • Google Chrome は Active X プラグインをサポートしていませんが、NPAPI プラグインはサポートしています。つまり、Google Chrome では Firefox や Safari と同じように Flash や Java といったプラグインのコンテンツを見せることができます。
  • もしあなたのサイト上のテキストがうまく表示されていない場合は、適切なコンテンツ タイプと文字コードの情報を HTTP レスポンス ヘッダーもしくはページの始めや セクションのなるべくトップに近いところで記載していることを確認してください。
  • ブロックレベル要素をインライン要素の中に書かないようにしましょう。
    • 誤った例: <a><div>こちらは正しく表示されません。</div></a>
    • 正しい例: <div><a>こちらは正しく表示されます。</a></div>
  • もし JavaScript が Google Chrome でうまく動かないようでしたら、Chrome に組み込まれている JavaScript ツールやデベロッパーツールを使ってデバッグを行うことができます。
  • あなたのページで使っている文字セットは Official IANA LIst に準拠している必要があります。表の preferred MIME name の名前をご使用ください。
    例: ISO-8859-1, Shift_JIS
  • HTTP Header と Meta tag で異なる文字エンコーディングを指定している場合、Google Chrome は、HTTP Header の指定を優先的に使用します。HTTP Header と Meta tag で異なる文字エンコーディングを指定することはトラブルの原因になります。詳しい情報は、 The WHATWG Blog — The Road to HTML 5: character encoding （英語）を御覧ください。
  • 基本的に文字エンコーディングは UTF-8 を使用されることをお勧めしています。何らかの理由により、旧来の文字エンコーディングを使用する必要がある場合は、これまでご紹介した内容を踏まえているかをご確認の上使用してください。
この記事に関するコメントやご質問は、 ウェブマスター ヘルプフォーラム までお寄せください。

Written by Glenn Wilson, Product Manager, Google Chrome
Original version: Helping your site look great with Google Chrome