Amazon でたまにやらかしてしまうのが、同じ本の重複購入。特に技術書は表紙も書名も似たようなものばかりで、読んだかどうか・買ったかどうか、深夜あまり良く考えずにボタンを押し後で後悔することになる。
読んでも開いてもいない本を持ってても意味ないので、以下2冊（種類）をどなたかにお譲りしたいと思ってます。ご希望の方はメールなどでお知らせください。
※どちらも洋書ですが、出てくる単語は日本語圏でもよく使うものばかりで割と読めると思います。
サーバがアメリカ西部にある＋サーバレンタル契約がエントリープランなので、やむなし的なところはあるけど、この blog の表示速度は概してよくなく、パフォーマンス改善が必要な状態にあった。そこで、YSlow を使って、ボトルネックの洗い出し、および、ボトルネック解消による効果検証を行った。
YSlow
http://developer.yahoo.com/yslow/
YSlow のベースとなる考え方は Exceptional Performance や High Performance Web Sites (slides) に示されているが、以下13項目を実行に移すことがパフォーマンス改善につながるとしている。JavaScript/CSS を外部ファイルに、といった基本的なことのみならず、CSS はページ冒頭に、JavaScript はページ下部に、といったもう一歩踏み込んだ形で改善方法を示しているのが、興味深い。
Rules for High Performance Web Sites
（ Exceptional Performance より）
この個人 blog で CDN なんて無理、広告やアクセス統計で外部ドメインの JavaScript を読み込んでるので、DNS Lookup を減らしようがない、といったところはあるけど、上記に基づき、いくつか改善を行ったので、メモしておく。
まず Gzip 化について。Gzip 化にあたり、使用しているサーバ環境（Debian GNU/Linux Sarge）では、以下パッケージが必要になるので、apt-get でインストール。
libapache-mod-gzip
http://packages.debian.org/sarge/libapache-mod-gzip
※注
apache 2.0 以降は、mod_gzip ではなく mod_deflate を使う模様。現在の環境が、apache 1.3 系なため、mod_gzip を使う前提で話を進める。
/etc/apache/modules.conf に以下記述が追加されていることを確認する。
LoadModule gzip_module /usr/lib/apache/1.3/mod_gzip.so
apache の設定ファイルに、以下記述を追加する。
<IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_can_negotiate Yes mod_gzip_update_static No mod_gzip_temp_dir /tmp mod_gzip_keep_workfiles No mod_gzip_minimum_file_size 500 mod_gzip_maximum_file_size 0 mod_gzip_maximum_inmem_size 60000 mod_gzip_min_http 1000 mod_gzip_handle_methods GET POST mod_gzip_dechunk yes mod_gzip_item_include file \.css$ mod_gzip_item_include file \.js$ </IfModule>
Netscape 3-4 で gzip 化された JavaScript が読めない、といった環境ごとに細かいバグがあるようだけど、取り急ぎ放置。
上記だけでは、HTML ファイルの gzip 化がなされないので、PHP の設定ファイル /etc/php4/apache/php.ini に以下設定を追加した。
zlib.output_compression = On
次に Expires Header について。以下を apache の設定ファイルに追加することにより対応完了。
ExpiresActive On ExpiresDefault "access plus 10 years"
次に ETag について。以下を apache の設定ファイルに追加することにより対応完了。
FileETag none
この blog では、以下3つの CSS が使われており、YUI のものだったり、WordPress のテーマ付属のものだったり、と由来は異なるが、全ページに読み込まれるものなので、main.css ということでひとつにまとめた。
なお、JavaScript については、先日の 記事検索の autocomplete 化 の際に統合済み。
上記の改善を踏まえ、http://blog.shimazu.org/ での読み込みスピードで実施前後の比較を行った。
まずページ容量について。Firebug でページ容量を比較すると、
ということで、同じコンテンツなのに gzip 化により半分近い容量削減となった。改善前（左）・改善後（右）のキャプチャは以下のとおり。
YSlow の Performance Grade と呼ばれる指標でも比較してみた。すると、
といった感じで、こちらも改善が見られた。詳細結果は以下のとおり。
最後に、ページ読み込み速度を、yslow のステータスバーに読み込み時間を表示する機能を使って計測した。10回計って、平均を算出、という方法で、
という数字上はそれほど差が大きくないが、体感的には少し早くなったかな？という感じがする。詳細結果は以下のとおり。
ということで、YSlow によるボトルネック洗い出しとその改善を行ったが、Gzip は設定に若干てこずったものの、その他は簡単に実行可能な改善策で、結果を見ても、これらの施策は非常に有用な印象を持った。今後開発など進めるうえで表示パフォーマンスが気になったら、まず今回のような改善策を試そうと思う。
実装完了。
YUI のコードをコピペしただけで、インタラクションがちょっと中途半端（？）だけど。詰め作業は追ってやるつもり。
ブログを書く間もないほど仕事があわただしい日々が続いているが、以前からやろうとしている記事検索の autocomplete 化について、備忘までにメモしておく。
実装しようとしている autocomplete とは、（いうまでもないかもだけど）検索キーワードを何文字かキータイプしただけで何らかの補足情報が出る仕組み。「何らかの補足情報」とわざとぼかして書いたのは、サイトやアプリケーションによって、中身が微妙に違うからで、以下のように「関連語・頻出語の提示」と「ダイジェスト結果の提示」に分かれる（と思われる）。
関連語・頻出語の提示
ダイジェスト結果の提示
今回やろうとしているのは、「ダイジェスト結果の提示」のほう。関連するものの呼び出しとか素敵だけど、実装が手間そうだし、それ以前にそんなに記事も多くないので、割と簡単な「ダイジェスト結果の提示」で進めることにした。
まずはサーバ側での対応から。WordPress 向けテーマファイルをいろいろ見ているうちに、うまく使えそうな以下コードがあった（一部省略）。
<?php
require("../wp-blog-header.php");
$posts = query_posts('posts_per_page=10&s='.$_GET['s'].'&what_to_show=posts');
?>
<?php
if (!$posts) {
echo '<div>Sorry, no results.</div>';
} else {
foreach ($posts as $post) {
start_wp(); ?>
<div>
<a href="<?php echo get_permalink() ?>" title="Permanent Link to '<?php the_title(); ?>'"><?php the_title(); ?></a>
<a href="<?php comments_link(); ?>" title="Go the the comments for this entry"><?php comments_number('0', '1', '%'); ?></a><br />
<?php /* If 'Dunstan's Time Since' plugin is installed use it; else use default. */
if (function_exists('time_since')) {
echo time_since(abs(strtotime($post->post_date_gmt . " GMT")), time());
echo ' ago';
} else {
the_time('F jS, Y');
}
?>
</div>
<?php
}
}
?>
これによりでシンプルな検索結果一覧を表示できるので、JSON とか受け取りやすいフォーマットに整形すれば JavaScript や Flash などでいろんなインタラクションがつくれそう。
フロントエンドでの実装には Yahoo! UI Library: AutoComplete を使用予定。安定した動作、上下キーでフォーカス移動、そして何より、Yahoo! トップページ での利用実績が強みと思われる。
補足：
PHP コードに登場する ‘Dunstan’s Time Since’ plugin とは日時の相対表示を実現するプラグインの模様。以下から取得でき、割とシンプルな実装で、使い勝手がありそう。
http://binarybonsai.com/wordpress/time-since/
CSS Nite公式ブログ によると、8月10日（金）19:00-20:10、YUI (Yahoo! User Interface Library) の Thomas Sha 氏 によるスピーチがアップルストア銀座にて行われるとのこと。
US からわざわざ来日されてのスピーチということで、都合がつけば参加するつもり。
というバグがあるらしく、このサイト などでもわかりやすく紹介されているのですが、はずかしいことに自分、先日まで知らぬままでした。例えば、タブ形式とかプルダウンメニューで z-index で制御する機会なんてざらにあるのに、こんなバグなどあったら相当難儀なのではないでしょうか。かくいう自分がかなりハマりました。
INFO: How the Z-index Attribute Works for HTML Elements
http://support.microsoft.com/default.aspx?scid=kb;en-us;177378
上記ページに詳細が書かれてあるんですが、要約すると「IEでは、select は windowed element であり、HTML element ではない。したがって、z-index に準拠した動作はしない」とのことで、これはバグではないといいたげで、なんというか．．．。
ただ、いろいろ探してみると、解決方法はあるようで、
Sample for using a DIV IFRAME shim to cover over
SELECT Boxes and other windowed controls in IE.
http://dotnetjunkies.com/WebLog/jking/archive/2003/10/30/2975.aspx
上記にあるように、iframe タグを組み合わせれば、意図した制御ができるようになるそうで、いろんなサイトの実装を見てみると、例えば、
Yahoo! User Interface Library
http://developer.yahoo.com/yui/
などがそんな対処方法をしていました。が、iframe は XHTML の最新バージョンで仕様から外れてしまっている（代替としてobject）ようで、この対処方法も将来的には見直しが必要になってしまいそうです。