ウェブ開発者向けのよくある質問
はじめに
ユーザー エージェント
言語エンコーディング
- Google Chromeで文字が正しく表示されません
- JavaScript (document.write) を使用したエンコーディング宣言が機能しません
- Google Chromeで漢字 2 文字の代わりに「%B1%C1%C3%E5」と表示されます
スクリプトとウェブ アプリケーション
表示とブラウザの動作
- Google Chromeでサイトを表示すると、Internet Explorer の場合とは異なった仕方で表示されます
- Google Chromeでウェブサイトをテストするにはどうすればよいですか？
- 外部スタイルシート内のフォント指定が有効になりません
- ウェブサイトのポップアップが Google Chromeで表示されません
- SSL で保護されたウェブサイトを Google Chromeで表示すると、ロック アイコンの代わりに感嘆符 (!) が表示されます
- HTML5 Database API が Google Chromeでサポートされていません
- ページを参照する Google Chrome ショートカットの表示や機能をカスタマイズするにはどうすればよいですか？
- ウェブページによって新しいタブを別のプロセスで開くにはどうすればよいですか？
検索
- イントラネット ウェブサイト アドレスを入力すると、イントラネット サイトではなく検索結果ページが表示されます
- 独自のサイトでの検索を 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"/> |
例:
<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 を使用してアクセスできるよう、同じプロセスで開きます。
新しいタブを異なるプロセスで開く方法は次のとおりです。
- about:blank をターゲットとして新しいタブを開きます。
- 元のページにアクセスできないよう、新しく開いたタブの
opener変数をnullに設定します。 - about:blank から、ポップアップを開くページのものとは異なるドメイン、ポート、またはプロトコルを使用する任意の URL にリダイレクトします。たとえば、ポップアップを開くページが http://www.example.com/ にある場合、次のような URL を使用することができます。
- 異なるドメインを使用する例: http://www.example.org
- 異なるポートを使用する例: http://www.example.com:8080
- 異なるプロトコルを使用する例: https://www.example.com
Google Chromeは、これらの処理を新規ページを元のページから分離する指示とみなし、新しいページを別のプロセスで読み込むよう試みます。
次のコード スニペットを使用して、上記のすべての手順を行うことができます。
var w = window.open();
w.opener = null;
w.document.location = "http://different.example.com/index.html";
検索
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 をご覧ください。