ウェブ開発者向けのよくある質問

はじめに

  1. Google Chrome はどのようなブラウザですか?
  2. 他のブラウザに関する情報はどこで見つけることができますか?

ユーザー エージェント

  1. Google Chrome のユーザー エージェント文字列は何ですか?

言語エンコーディング

  1. Google Chrome で文字が正しく表示されません
  2. JavaScript(‎document.write‎)を使用したエンコーディング宣言が機能しません
  3. Google Chrome で漢字 2 文字の代わりに「%B1%C1%C3%E5」と表示されます

スクリプトとウェブ アプリケーション

  1. ActiveX コントロールが読み込まれません
  2. JavaScript が正しく実行されません

表示とブラウザの動作

  1. Google Chrome でサイトを表示すると、Internet Explorer の場合とは異なった仕方で表示されます
  2. Google Chrome でウェブサイトをテストするにはどうすればよいですか?
  3. 外部スタイルシート内のフォント指定が有効になりません
  4. ウェブサイトのポップアップが Google Chrome で表示されません
  5. SSL で保護されたウェブサイトを Google Chrome で表示すると、ロック アイコンの代わりに感嘆符(!)が表示されます
  6. HTML5 Database API が Google Chrome でサポートされていません
  7. ページを参照する Google Chrome ショートカットの表示や機能をカスタマイズするにはどうすればよいですか?
  8. ウェブページによって新しいタブを別のプロセスで開くにはどうすればよいですか?

検索

  1. イントラネット ウェブサイト アドレスを入力すると、イントラネット サイトではなく検索結果ページが表示されます
  2. 独自のサイトでの検索を Google Chrome の検索オプションに含めるにはどうすればよいですか?

はじめに

1. Google Chrome はどのようなブラウザですか?

Google Chrome には、ウェブマスターがエンド ユーザーの利便性を高めるために使用できる多数の機能が備わっています。Google Gears が組み込まれているため、ウェブマスターはオフライン ストレージなどの API を利用することができます。また、ユーザーは Google Chrome を最小限の UI(タイトルバーだけ)が表示されるモードで起動することができるため、ウェブ アプリケーションをデスクトップ アプリケーションのようなデザインにすることも可能です。

Google Chrome では最新の JavaScript エンジン(V8)が使用されているため、既存の JavaScript インタプリタより大幅な高速化が実現しています。そのため、ウェブ開発者は、速度や処理方法に関する制約をあまり設けずに、より複雑で高い処理速度を要求する Ajax アプリケーションを作成できます。最後に、Google Chrome は WebKit を土台として作成されているため、Google Chrome ユーザーは CSS3 機能が WebKit に追加されたときにこの機能を利用することができます。

2. 他のブラウザに関する情報はどこで見つけることができますか?

これ以外に選択可能なブラウザは多数存在しています。広く使用されているブラウザのいくつかについては、下記のウェブサイトをご覧ください。

ユーザー エージェント

3. Google Chrome のユーザー エージェント文字列は何ですか?

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

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.X.Y.Z Safari/525.13.

Google Chrome では、Apple 社の Safari などの他のブラウザも使用している WebKit 表示エンジンを使用しています。ウェブページを Google Chrome で表示すると、他の WebKit ベースのブラウザの場合と同じように表示されます。これらのブラウザは、ユーザー エージェント文字列で「Google Chrome」や「Safari」といった特定のブラウザ名の代わりに「webkit」を探すことによって識別できます。

言語エンコーディング

4. Google Chrome で文字が正しく表示されません

ブラウザでコンテンツが正しく表示されるようにするため、ウェブ開発者は常にドキュメントのソースの先頭でコンテンツと文字エンコーディングに関する情報を提供する必要があります。フレームや iframe を使用している場合は、各フレームのソースの先頭でエンコーディングを指定してください。Google Chrome を含む一部のブラウザでは、ドキュメント内の深い位置(たとえば、ドキュメントの head セクション内の CSS やスクリプトの後)にあるエンコーディング宣言は認識されません。

適切なエンコーディングの位置の例:

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <script type="text/javascript">
    ... JavaScript コード ...
    </script>
    .......

また、競合する HTTP ヘッダーがウェブ サーバーから送信されていないことも確認してください。ページ内の文字セット宣言は、ウェブ サーバーから送信されたヘッダーによって上書きされます。

5. JavaScript(document.write)を使用したエンコーディング宣言が機能しません

Google Chrome は、document.write() を使用して宣言されたエンコーディング情報を読み取ることができません。iframe 内でこのメソッドを使用してエンコーディングを宣言している場合、その iframe が表示されるときに文字化けが発生することがあります。たとえば、次の例を考えます。

frame1.js

document.write("<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">");
    ... その他の JavaScript コード ...

この場合は、代わりに次のようにすることをおすすめします。

frame1.html

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <script type="text/javascript">
    ... JavaScript コード ...
    </script>
    ...

6. Google Chrome で漢字 2 文字の代わりに「%B1%C1%C3%E5」と表示されます

Google Chrome では、パーセント文字を使用して URL 内のクエリ パラメータがエンコードされます。サーバー側のスクリプトがデータの処理前にパーセント文字でエンコードされた文字を正しくデコードすることを確認してください。

スクリプトとウェブ アプリケーション

7. ActiveX コントロールが読み込まれません

プラグインの NPAPI バージョンを指定する必要があります。

ActiveX は Windows 上の Internet Explorer(および Internet Explorer をベースにして作成されたブラウザ)でのみサポートされています。Google Chrome、Mozilla Firefox、Apple Safari その他のブラウザではサポートされていません。これらのブラウザでは代わりに Netscape Plugin Application Programming Interface(NPAPI)が使用されています。

8. JavaScript が正しく実行されません

Google Chrome では、いくつかの方法で JavaScript エラーを表示してデバッグすることができます。

  • JavaScript コンソール: ページ メニュー アイコンをクリックして、[開発/管理]、[JavaScript コンソール] の順に選択します。ここでは、JavaScript 実行時のエラーを表示したり追加の JavaScript コマンドを入力して実行することができます。
  • JavaScript デバッガ: ページ メニュー アイコン、[開発/管理]、[JavaScript をデバッグ] の順にクリックすることで使用できます。このデバッガではコマンド プロンプトからブレークポイント、バックトレースその他を設定することができます。作業を開始するには、デバッガ コマンド行で「help」と入力します。

表示とブラウザの動作

9. Google Chrome でサイトを表示すると、Internet Explorer の場合とは異なった仕方で表示されます

Google Chrome は Internet Explorer とは異なる表示エンジンを使用しているため、ウェブページの表示が異なることがあります。Apple Safari は Google Chrome と同じ表示エンジン(WebKit)を使用しているため、同じようにページが表示されます。

  • サイトがいずれかのブラウザで正しく表示されない場合は、http://validator.w3.org/ で HTML と CSS をテストして、有効であることを確認してください。
  • サイトが Google Chrome または Apple Safari で正しく表示されない場合は、webkit.org でバグを報告してください(手順については http://webkit.org/quality/reporting.html をご覧ください)。
  • サイトが Apple Safari では正しく表示されるのに Google Chrome では正しく表示されない場合は、http://code.google.com/p/chromium/issues/list で Google Chrome のバグとして報告してください。

10. Google Chrome でウェブサイトをテストするにはどうすればよいですか?

Google Chrome では、いくつかのツールを使用してウェブサイトをテストすることができます。

  • ウェブ インスペクタ
    ウェブページ上の任意のコンポーネントを右クリックすると、ウェブ インスペクタが起動します。ここでは、クリックしたコンポーネントに関連付けられている要素やリソースを見ることができ、DOM の階層ビューや JavaScript コンソールも使用できます。
  • タスク マネージャ
    ページ メニュー アイコン、[開発/管理]、[タスク マネージャ] の順に選択します(または、Shift+Esc キーを押します)。タスク マネージャには、実行されているすべての Google Chrome プロセスとプロセスで使用されているリソース(メモリ、CPU、ネットワーク)が表示されます。
  • JavaScript デバッガ
    ページ メニュー アイコン、[開発/管理]、[JavaScript をデバッグ] の順に選択して起動します。これは、実行中のプロセスにアタッチ可能な JavaScript デバッガです。

11. 外部スタイルシート内のフォント指定が有効になりません

外部スタイルシートで適切な文字セットとコンテンツ タイプが指定されていることを確認してください。「text/css」または「text/css;charset=X」として指定されている必要があります。

HTTP ヘッダーでスタイルシート用の文字セットを指定する代わりに、CSS スタイルシートの完全な先頭(スペースや改行を含むいかなる文字も手前に存在しない位置)に次のように宣言を追加することをおすすめします。

@charset "xxx"

エンコーディング情報の指定を怠ると、スタイルシートが正しく解析されない可能性があります。

このトピックの詳細については、World Wide Web Consortium のドキュメント(http://www.w3.org/TR/CSS21/syndata.html#charset)をご覧ください。

12. ウェブサイトのポップアップが Google Chrome で表示されません

Google Chrome のデフォルトの動作は最小スタイルの表示であり、ポップアップはタイトルバーだけがブラウザ ウィンドウの右下セクションに表示されます。ユーザーはそのタイトルバーを見やすい位置までドラッグすることによってポップアップの内容を表示することができます。このようにしてポップアップが読み込まれることにより、ポップアップを利用しているサイトの機能が損なわれないようになっています。同時に、不要なポップアップでページが埋め尽くされてユーザーが不快になることも防止されます。

13. SSL で保護されたウェブサイトを Google Chrome で表示すると、ロック アイコンの代わりに感嘆符(!)が表示されます

これは、そのページでの SSL の使用法に問題があることを示しています。Google Chrome で感嘆符(!)をクリックすると、問題に関する詳細が表示されます。多くの場合、この問題は、HTTPS で送信されて SSL で保護される最上位ウェブページ内に HTTP で送信される要素(画像、スクリプト、CSS など)が含まれている場合など、異なる種類のコンテンツがページ上に混在していることが原因で発生します。ロック アイコンが表示されるようにするには、すべてのコンテンツが HTTPS で送信される必要があります。

14. HTML5 Database API が Google Chrome でサポートされていません

Google Chrome チームは、将来のリリースで HTML5 Database API(また、Offline や Workers といった WebKit がサポートする他の API)をサポートする予定です。

15. ページを参照する Google Chrome ショートカットの表示や機能をカスタマイズするにはどうすればよいですか?

Google Chrome ユーザーは、ページ メニュー アイコンから [アプリケーションのショートカットを作成] を選択することにより、ウェブページ用のショートカットを作成することができます。デフォルトでは、新しいショートカットのタイトルとファビコンは参照先のページと同じものになります。

ドキュメントの <head> セクションに特定のメタタグを挿入することにより、ページを参照する Google Chrome ショートカットのタイトル、説明、URL を指定することができます。

カスタマイズ内容 タグ
ショートカットのタイトル application-name <meta name="application-name" content="Gmail"/>
説明(設定パネル内など、十分なスペースがある場合に使用されます) description <meta name="description" content="Google が提案するメール"/>
ショートカットのクリック時に開く URL application-url <meta name="application-url" content="http://www.gmail.com"/>
ショートカット アイコン   <link rel="icon" href="gmail_32x32.png" sizes="32x32"/>
<link rel="icon" href="gmail_48x48.png" sizes="48x48"/>

例:

<head>
    <meta name="application-name" content="Gmail"/>
    <meta name="description" content="Google が提案するメール"/>
    <meta name="application-url" content="http://www.gmail.com"/>
    <link rel="icon" href=gmail_32x32.png sizes="32x32"/>
    <link rel="icon" href=gmail_48x48.png sizes="48x48"/>
    </head>

これらのタグは Gears Desktop API のタグと対応しています。詳細については、Gears Desktop API のドキュメンテーションをご覧ください。

16. ウェブページによって新しいタブを別のプロセスで開くにはどうすればよいですか?

Google Chrome はマルチプロセス アーキテクチャとなっているため、複数のタブをそれぞれ異なるプロセスで実行したりメインのブラウザ プロセスとは異なるプロセスで実行することができます。ただし、通常、ウェブページによって開始された新規タブは、元のページが JavaScript を使用してアクセスできるよう、同じプロセスで開きます。

Google Chrome では、新しいタブで別のウェブサイトにアクセスする場合に、そのタブを別のプロセスで開くかどうかを識別します。

最も簡単なのは、別のウェブサイトへのリンクのターゲットを新しいウィンドウにし、リファラー情報を渡さない方法です。このようにすると、Google Chrome では新しいページが元のページから分離されていると判断し、別のプロセスで新しいページを読み込みます。次に例を示します:

<a href="http://differentsite.com" target="_blank" rel="noreferrer">新しいタブと新しいプロセスで開く</a>

リファラー情報を渡したうえで、新しいタブを新しいプロセスで開きたい場合は、JavaScript で次のようにします:

  • about:blank をターゲットとして新しいタブを開きます。
  • 新しく開いたタブの opener 変数を null に設定して元のページにアクセスできないようにします。
  • about:blank から、元のページとは別のウェブサイトにリダイレクトします。

例:

var w = window.open();
    w.opener = null;
    w.document.location = "http://differentsite.com/index.html";

これらの方法が機能する URL は、ポップアップを開くページとは異なるドメインまたはプロトコルを使用する URL のみです。たとえば、ポップアップを開くページが http://www.example.com/ にある場合、次のような URL であればこれらの方法を使用できます。

  • http://www.example.orghttp://www.example2.com のようにドメインが異なる
  • https://www.example.com のようにプロトコルが異なる

検索

17. イントラネット ウェブサイト アドレスを入力すると、イントラネット サイトではなく検索結果ページが表示されます

ユーザーが語を 1 つだけアドレス バーに入力すると、Google Chrome ではユーザーのデフォルトの検索エンジンを使用してその語の検索が行われ、結果が戻されます。それと同時に、http://ユーザーが入力した語に関する HEAD リクエストが送信され、これが有効なウェブサイトであるかどうかがチェックされます。HTTP/2xx 応答(たとえば、「HTTP/200 OK」)が Google Chrome に戻された場合は、そのサイトにアクセスするかどうかをユーザーに尋ねるメッセージが表示されます。そのメッセージをクリックしてサイトにアクセスすると、そのウェブサイトは以降にその語が入力されたときのデフォルトのターゲットに設定されます。

このメッセージは、次の応答が Google Chrome に戻された場合にも表示されます。

  • HTTP/401 または HTTP/407 応答
  • 上記の応答のいずれかを戻してページ内で終了した HTTP/3xx リダイレクト

ウェブ サーバーがページの GET リクエストだけでなく HEAD リクエストにも正しく応答することを確認する必要があります。

たとえば、サイトが http://project.intranet.example.com にあり、この社内ネットワーク内のユーザーがアドレス バーに「project」と入力した場合、次のように処理が行われます。

  • Google Chrome で、「project」という語の検索結果が戻されます。
  • 同時に、http://project が有効なウェブサイトであるかどうかがチェックされます。有効なウェブサイトである場合は、
  • http://project にアクセスするかどうかをユーザーに尋ねるメッセージが表示されます。
  • ユーザーがメッセージをクリックして http://project にアクセスすると、Google Chrome では http://project が以降に「project」とアドレス バーに入力されたときのターゲットに設定されます。

ユーザーは、「project/」または「http://project」と入力するか、アドレス バー エントリから [project を検索] の代わりに [project/] を選択することにより、デフォルトの検索動作を上書きすることができます。

18. 独自のサイトでの検索を Google Chrome の検索オプションに含めるにはどうすればよいですか?

Google Chrome では、OpenSearch Description Document(OSDD)を提供することにより、ブラウザの検索エンジンのリストに独自のサイトを含めることが可能になります。OpenSearch の詳細については、http://www.opensearch.org をご覧ください。