LiveHTTPHeaders(Firefox 機能拡張)でHTTP ヘッダを表示する
昨日エントリーした「WordPress でステータスコード 404(Not Found)を返却するエラーページを作る」で HTTP ヘッダのスクリーンショットを掲載しましたが、これはブラウザに表示されたページの HTTP ヘッダを表示・確認できる「LiveHTTPHeaders」を利用していますので、紹介しておきます。
ブログツールで静的な HTML ファイルを出力しているのであれば問題ないと思いますが、ページをダイナミックに生成している場合は HTTP ヘッダ、特にレスポンスを一度確認することをお勧めします。ページキャッシュ機能(一度アクセスされたページは一次ファイルとしてキャッシングしておき、サーバ負荷を回避する)等を利用している場合も同様です。
例えば、ページが存在するにもかかわらずステータスコード 200(OK)を返却していないと、検索エンジンの順位が上がらないとか、インデクシングされなくなる可能性があります。
以下、Firefox をご利用でない方向けに、Live HTTP Headers のインストールおよび利用方法について説明します。Firefox は予めインストールしておいてください。
1.Live HTTP Headers のインストール
「Live HTTP Headers :: Firefox Add-ons」にある「インストール」のアイコンをクリック。この操作は Firefox で行ってください。
「ソフトウェアインストール」ダイアログが開く(数秒待つと「今すぐインストール」のボタンが表示されます)ので、「今すぐインストール」をクリック。
アドオン画面が開き、インストールが開始します。終了したら右下の「Firefox を再起動」をクリック。
Firefox を再起動すればインストール完了です。
2.利用方法
メニューより [ツール] - [Live HTTP Headers] を選択。
これで HTTP ヘッダ表示用のウィンドウが開きます。
この状態でブラウザにお好きなサイトの URL を入力して表示させてください。これで表示したサイトの HTTP ヘッダ(リクエスト/レスポンス)が表示されます。
表示内容は、
- リクエストURL
- リクエストヘッダ
- レスポンスヘッダ
という順序の繰り返しで並んでいます。その一番先頭に表示されているURLのレスポンス(の1行目)が適正、つまり 200 OK や 304 Not Modified であることを確認してください。
ページが存在するのに 404 Not Found や、404 エラーページで 200 OK を返しているのは問題です。
また、スタイルシートやスクリプト、画像をふんだんに使用していると、それらは全て異なるリクエスト URL としてヘッダが表示されます。ただしユーザがブラウザで一度読み込むと、ブラウザのキャッシュにデータが保存されますので、
- そのユーザがキャッシュをクリアしない
- レスポンスのステータスコードに 304(Not Modified)を返却する
という条件を満たしていれば、サーバからデータをダウンロードすることはありません。
話を戻して、表示された HTTP ヘッダの内容を消去したい場合は、ウィンドウ右下の「Clear」をクリックします。
3.カスタマイズ
Config タブで設定を変更することができます。たとえば、Use Style Sheet をチェックしてください。
元の Headers タブに切り替えると、ヘッダにスタイルが設定されます。
Config タブの設定内容は下記の通りです。*1
- POST:ポストデータの扱いを選択
- none:非表示
- fast:「Fast Code」方式で POST データを表示(ファイルアップロード時は動作しない)
- accurate:全 POST データ表示
- max 1k:POST データの先頭 1キロバイトを表示
- Use style sheet:スタイルシートを適用
- Open LiveHTTPHeaders in a new tab:新しいタブで LiveHTTPHeaders を開く
- Filter URLs with regexp:正規表現で抽出する URL を指定
- Exclude URLs with regexp:正規表現で除外する URL を指定
HTMLページのヘッダを普通に参照するだけであれば、これらを設定する必要は特にありません。
Headers タブの下には「Save All...」と「Replay」があります。
「Save All...」は表示されているヘッダの保存で、「Replay」は、URL を選択した状態でクリック。
これで「Live HTTP Replay」画面が表示されるので、右下の「Replay」をクリックするとブラウザが再読み込みされます。ヘッダのキャプチャも行われます。
その他、ページ上を右クリックして、「ページの情報を表示」を選択して表示されたウィンドウにも HTTP ヘッダが表示されます。
*1:Landscape - エンジニアのメモ:Live Http headers - HTTP ヘッダ表示ツールよりポストデータ部分の表記を引用させて頂きました。ありがとうございました。
快適なブラウジングを実現する Firefox 機能拡張「All-In-One Sidebar」
Firefox 機能拡張の定番、All-In-One Sidebar を紹介します。
この機能の「マルチパネル」を利用することで、「Google 検索結果」や「はてなブックマーク」のリンク先のページを、ブラウザやタブを新たに開かず、いわゆる「フレーム」を使ったような振る舞いをさせることができ、快適なブラウジングを実現することができます。
ということで、Firefox をご利用でない方向けに、All-In-One Sidebar のインストールおよび「マルチパネル」利用方法について説明します。Firefox は予めインストールしておいてください。
1.All-In-One Sidebar のインストール
「All-in-One Sidebar :: Firefox Add-ons」にある「インストール」のアイコンをクリック。この操作は Firefox で行ってください。
「ソフトウェアインストール」ダイアログが開く(数秒待つと「今すぐインストール」のボタンが表示されます)ので、「今すぐインストール」をクリック。
アドオン画面が開き、インストールが開始します。終了したら右下の「Firefox を再起動」をクリック。
Firefox を再起動するとブラウザ左側に図のようなサイドバーが表示されます。
サイドバー全体を非表示にしたい場合は、左端の細い部分(切り替えトグル)をクリックするか、メニューの[表示] - [サイドバーグリップ]のチェックを外します。
2.「マルチパネル」利用方法
下から2番目の「マルチパネル」アイコンをクリック(ツールチップはとりあえず気にせずに)。
下がマルチパネルが開いた状態です。
次の作業に進む前に、検索結果やソーシャルブックマーク等のページを表示させておいてください。ここでは「はてなブックマーク」を表示している前提で話を進めます。
マルチパネル上部にある「ページ」をクリック。
これで右側と同じページがマルチパネルに表示されます。
マルチパネル内のページの任意のリンクをクリックすると、リンク先の内容は常に右側のエリアに表示されますので、履歴を戻ったり、見終わったページのブラウザやタブを閉じる必要がなくなります。
先程クリックした「ページ」の右側にある▼をクリックすると、ページの表示方法を変更することができます。ここでは「縮小描画モードにする」を選択します。
これでマルチブラウザの表示が縮小されます。スクリーンショットでは判別できないのですが、文字だけでなく、ページ内にある画像等も全て縮小されます。
上部の「マルチパネル」のをクリックすると、他の情報(ブックマーク・履歴・ダウンロード・アドオン・ページの情報・ページソース・エラーコンソール等)に切り替えることができます(左側アイコンと同じ)。一番下の「All-In-One Sidebar 設定」を選択すればさらに詳細なカスタマイズが可能です。
マルチパネルは、最後に表示したコンテンツが記憶されます。記憶を解除したい(ブラウザ再起動時に何も表示しない)場合は上部右側にある歯車のアイコンをクリックして「最後に表示したコンテンツを記憶する」のチェックを外しましょう。