ローカルにWeb制作環境を構築するとなると、サーバのことがわからない場合は一般的に「MAMP」とか「XAMPP」を使うと思うんですが、制作環境の自由度を高めるために私は「MacPorts」を使っています（簡単に言うと、OSとは別にUnix環境を一個作っちゃう）。

Wikiに書いてあることを順おって確実にやっていけば環境構築はできると思うのですが、ちょっとしたミスが原因でエラーになったりして、どうしていいか途方に暮れることになりかねません（エラー対応するにも基礎がないと大変です 笑）。

自由自在にコントロールできる制作環境を作りたいとか、MacPortsを使ってみたいけどどうすればいいかわからない人は、UnixのコマンドリファレンスとかApacheの解説書なんかを片手にチャレンジしてみてはいかがでしょうか。

※一応、自分のメモ代わり兼、知りたい人に面と向かって説明するために用意したものなので、隅から隅まで丁寧には解説してません。しかもUnixコマンドの解説などを除いた抜粋版ですので、あしからず。

よって、またしても異常に長い文章になっています…。Safariの開発メニューの使い方含め、その辺に興味のある方だけ先にお進み下さい（笑）。

Safari 3.1から誰でも使える「開発」メニュー

実はSafari 3.1になってから初期設定を開いて「開発」メニューを有効にすることで、いろいろな情報を見たりユーザーエージェントを変更したりできるようになっています（もともとDebugメニューとして今までも使えたのですが、実は隠されてました）。
これはもちろんWindows版でも有効にできます。

実はこのメニューにある項目のそれぞれが使えるヤツらで、JavaScriptのエラーの箇所をチェックしてみたりCSSの内容をみてみたりといった、Firefoxではアドオンの類を追加しないとできないようなことも簡単にできるのです。あ、HTMLのバリデートも自動的にやってますね、そういえば。

で、中でも「ネットワークタイムライン」では配信データの容量というのが確認できます。時には「！」が付いて「このデータは圧縮して送ったらサイズもちっちゃくなるよ」みたいな吹き出しが出たり、この「Webインスペクタ」ウィンドウ全体では、スクリプトにエラーがあると赤いマークでお知らせ&該当箇所の表示とかも可能です。

実際にこのブログが配信してるデータを見るとこんな感じです。これはうちのサーバからだけでなく外部のソースも込みになりますが、単純に足し算すれば「テキスト: 28.36KB」「CSS: 12.29KB」「JavaScript: 43.32KB」の画像以外のデータが送られてるということが、下にある合計値をみるとわかります。

塵も積もればなんとか、なのでデータの圧縮を試みる

WordPressはPHPなので、設定ファイル「php.ini」の「zlib.output_compression」を「On」にすれば、zlibで透過的に圧縮されてコンテンツが送り出されます。しかし、これだけではCSSやJavaScriptのファイルとかは当然対象外です。WordPressだといってもこれらは外部ファイルですし、そのまま普通に配信されます。実際には、コンテンツのテキストよりもそっちの方がでかいってこともざらにあるでしょう。

ここで例えばPHP側の圧縮を有効にしてみるとこんな感じになります。これだけでも確かにDocumentのデータは半分以下になってますが、それ以外は何も変わりません。

これじゃ効果も薄いかなってことで、今回はApache側でも画像以外のデータを全部圧縮して送りつけてやることにしました。まず、Apache（うちは2なので）のモジュール「deflate」を有効にします。a2enmodコマンドを使ってdeflateが使えるように以下のような感じで入力して、Apacheさんを強制的にリロードします。
（※a2enmodは特定のモジュールを有効にします。無効にする時はa2dismod）

# a2enmod Which module would you like to enable? Your choices are: （ここにだらだらと使えるモジュールが出てくる） Module name? deflate　←deflateって入力してリターン Module deflate installed; run （ここにコマンドが出てくる） to enable. # /etc/init.d/apache2 force-reload　←こんな感じでリロード

んでもって、apache2.confとかに以下の記述を追加します。 今回はApache2のマニュアルにある記述をそっくりそのまま拝借しました（笑）。

<IfModule mod_deflate.c> SetOutputFilter DEFLATE BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary </IfModule>

マニュアルにあるコメント行とかなくすとこんな感じ。
で、保存して再起動すると圧縮が有効になります。その結果が下の図です。
ちなみにApache2でdeflateを上のようにして有効にすると、PHP側の圧縮は有効にしなくても圧縮されてます。ダブルパンチだと二重で潰れてるようですね。

という風に内部のデータだけでも圧縮してあげることで「テキスト: 12.71KB」「CSS: 3.76KB」「JavaScript: 36.17KB」まで減りました。「最初からちゃんとやれよ、お前」的な話ではあるのですがね…。久しぶりにApacheの設定見ましたよ（笑）。
まぁ、こんな風にSafariの開発メニューは使えるよってことが主題ですから（謎）。

たまには自分のサイトも見直してみましょう

圧縮するしないはともかくとして、こうやって一度ぐらいは自分のサイトや作っているサイトの様子でも見てみると良いですよ。本人は気付いてないだけでJavaScriptが何百KBとかあるかもしれませんからね…（ホントにそれって必要？みたいな）。携帯のフルブラウザで見る時は、そんなサイトでげんなりしています（笑）。

Web屋さんのブログでもHTMLのバリデートにバシバシひっかかってますね…、フフフ。

Apacheセキュリティ

posted with amazlet at 08.05.01

アイヴァン リスティク
オライリージャパン
売り上げランキング: 66160

おすすめ度の平均:

まずこれを買おう

Amazon.co.jp で詳細を見る