Archive for the ‘Tech’ Category

YUI Compressor on Debian GNU/Linux (Etch)

Sunday, December 30th, 2007

jsminpacker などと並び、定番になりつつある JavaScript コード圧縮ツール Yahoo! UI Library: YUI Compressor を Debian GNU/Linux (Etch) に導入したので、備忘までメモしておく。

以下 URL より YUI Compressor をダウンロードする。

Download the YUI Compressor
http://www.julienlecomte.net/yuicompressor/

YUI Compressor は Java によるコマンドラインツール、PHP でそれをラップしたウェブのインターフェースが用意されているが、両方を動かすため以下設定を行った。

/etc/apt/sources.list に non-free を追加し、以下のようにした(後述する sun-java5-jre パッケージのインストールにあたり、non-free の追加が必要になる)。

deb http://ftp.jp.debian.org/debian/ etch main contrib non-free
deb-src http://ftp.jp.debian.org/debian/ etch main contrib non-free

deb http://security.debian.org/ etch/updates main contrib non-free
deb-src http://security.debian.org/ etch/updates main contrib non-free

以下コマンドでパッケージインストール。

aptitude install php5 php5-cli sun-java5-jre

詳細は未調査だが、デフォルトのままだと PHP のクオート文字のエスケープ処理が自動的に入ってしまうため、/etc/php5/apache2/php.ini の以下設定を Off にして、自動処理を解除しておく。

; Magic quotes
magic_quotes_gpc = Off ; magic quotes for incoming GET/POST/Cookie data

これで設定が完了。ブラウザで該当する URL をたたくと以下画面が表示される。

yuicompressor.png

ためしに以下を入力し、「Compress」ボタンを押すと

(function(){
    var _str = "Hello world!!";
    alert(_str);
})();

以下のような結果が得られた。

(function(){var A="Hello world!!";alert(A)})()

1万4千円台で買える新品サーバ

Friday, December 7th, 2007

1万5千円台で買える新品サーバ を上回る破格品がNECから出た模様。

NEC得選街 5周年記念キャンペーン
http://club.express.nec.co.jp/Store/tokka/index_ad.html

スペックは以下のとおり。

  • Celeron D(2.93GHz) ディスクレスモデル
    • Celeron D プロセッサー341(2.93GHz)
    • 512MB(ECC付きDDR2-667 SDRAM-DIMM)
    • ディスクレス
    • DVD-ROM 装置(6倍速以上、最大16倍速)
    • 1000BASE-T LANコネクタ×1

「14,700円(税込)~」という表記に加え、「広告をごらんのお客様へ特別割引(半額からさらに)3,000円OFF」という表記も大いに気になるところ(このページにはテキスト広告をたどって来たため、「広告」とはそれをさしていると思われる)。

オープンカーのようなウェブサービス

Friday, December 7th, 2007

4opencars.jpg

少し前の話になるけど、11月初頭に東京モーターショーに行って来た。

ハイブリッドやクリーンディーゼルといった環境技術、日産GT-RレクサスIS-Fといったスポーツカーと並び、自分的によく目に留まったのがオープンカー。写真にあるような感じでオープンカーの展示がよく見られた。

最近の流行としては、爆発的な加速やパワーを売りにしたスーパーカーという流れからオープンカーのような手軽な楽しさを特色としたクルマのほうが人気が変わってきているみたい。

小さめのエンジンパワー、車高の高さに加え、細いタイヤに街中の乗り心地重視のサスペンションと、クルマの運転が好きそうな方々にはことごとく訴求力のないスペックだけど、屋根が外せる、ただそれだけで人はオープンカーに惹かれるらしい。

思うに、プロダクトの魅力はきっと技術力だけじゃないんだな、と。技術力はモノの訴求をする上でいくつかあるうちのひとつでしかなく、技術力がまあまあでも、他の要素で俄然、人の心を捉えるプロダクトになりえる。

技術を隠蔽し、肩肘張らず、人が愉しむことにフォーカスを当てたプロダクト。ウェブ関係でもそんなサービスが増えると、素敵かなと思う。

#写真:日産マーチ(左上)、プジョー207(右上)、フォルクスワーゲンビートル(左下)、ミニ(右下)

1万5千円台で買える新品サーバ

Wednesday, October 10th, 2007

2~3万円台でもそうそうないのに、1万5千円台で購入できる新品サーバがあると聞いてびっくり。

日本HP – ホップ・ステップ・ジャンプ キャンペーン2
http://h50146.www5.hp.com/products/servers/proliant/campaign/hopstep.html

一番安いのは「HP ProLiant ML115」という機種で、スペック的には

  • CPU: AMD Athlon 64 プロセッサ 3500+ (2.2GHz、512KB L2)
  • HDD: 80GB
  • メモリ: 512MB
  • 光学ドライブ: CD-ROMドライブ

といった感じで小規模なサーバ構築には十分なレベル。内蔵HDDが4つ入るシンプルな筐体も良さそう。OS は付属しないので、Linux や FreeBSD で環境構築したいところ。

、、、と書いてると、回し者かアフィリエイトかという雰囲気だけど、単なる興味本位でしかないので念のため。

APCによるパフォーマンス改善

Monday, September 24th, 2007

YSlow に引き続き、PHP at Yahoo! JAPAN でも紹介されている APC (Alternative PHP Cache) を試してみた。

APC については以下が詳しい。

導入に当たって、必要(となりそう)なパッケージを apt-get でインストール(以下パッケージはすでに導入済みだったため、今回の導入に当たっての必要/不要の確認はできていない)。

# apt-get php4-dev gcc g++ make

APC の導入手順は以下のとおり。pecl コマンドが使える環境ではより簡単という話だが、Debian GNU/Linux Sarge では使えず、地道にコンパイルする方法をとった。

~# mkdir apc
~# cd apc/
~/apc# ls
~/apc# wget http://pecl.php.net/get/APC-3.0.14.tgz
~/apc# tar zxvf APC-3.0.14.tgz
~/apc# cd APC-3.0.14/
~/apc/APC-3.0.14# phpize
~/apc/APC-3.0.14# ./configure  --enable-apc
~/apc/APC-3.0.14# make
~/apc/APC-3.0.14# make install
~/apc/APC-3.0.14# ls /usr/lib/php4/20020429
apc.so    curl.so   gd.so     json.so   mysql.so
~/apc/APC-3.0.14# vim /etc/php4/apache/php.ini (以下を追記)
extension=apc.so
~/apc/APC-3.0.14# /etc/init.d/apache restart

導入が完了し、ここで効果測定を、、、行ってみたものの、APCデフォルト設定+HTML読み込み速度の簡単計測では、それほど差が見られず、もう少し検証が必要そうな状況。さらに設定など調整のうえ様子を見ていくつもり。

YSlowによるパフォーマンス改善

Sunday, September 23rd, 2007

サーバがアメリカ西部にある+サーバレンタル契約がエントリープランなので、やむなし的なところはあるけど、この blog の表示速度は概してよくなく、パフォーマンス改善が必要な状態にあった。そこで、YSlow を使って、ボトルネックの洗い出し、および、ボトルネック解消による効果検証を行った。

YSlow
http://developer.yahoo.com/yslow/

YSlow のベースとなる考え方は Exceptional PerformanceHigh Performance Web Sites (slides) に示されているが、以下13項目を実行に移すことがパフォーマンス改善につながるとしている。JavaScript/CSS を外部ファイルに、といった基本的なことのみならず、CSS はページ冒頭に、JavaScript はページ下部に、といったもう一歩踏み込んだ形で改善方法を示しているのが、興味深い。

Rules for High Performance Web Sites

  1. Make Fewer HTTP Requests
  2. Use a Content Delivery Network
  3. Add an Expires Header
  4. Gzip Components
  5. Put CSS at the Top
  6. Move Scripts to the Bottom
  7. Avoid CSS Expressions
  8. Make JavaScript and CSS External
  9. Reduce DNS Lookups
  10. Minify JavaScript
  11. Avoid Redirects
  12. Remove Duplicate Scripts
  13. Configure ETags

Exceptional Performance より)

この個人 blog で CDN なんて無理、広告やアクセス統計で外部ドメインの JavaScript を読み込んでるので、DNS Lookup を減らしようがない、といったところはあるけど、上記に基づき、いくつか改善を行ったので、メモしておく。

改善1 – mod_gzip による gzip 化

まず 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 が読めない、といった環境ごとに細かいバグがあるようだけど、取り急ぎ放置。

改善2 – PHP 側での gzip 化

上記だけでは、HTML ファイルの gzip 化がなされないので、PHP の設定ファイル /etc/php4/apache/php.ini に以下設定を追加した。

zlib.output_compression = On

改善3 – Expires Header

次に Expires Header について。以下を apache の設定ファイルに追加することにより対応完了。

ExpiresActive On
ExpiresDefault "access plus 10 years"

改善4 – ETag

次に ETag について。以下を apache の設定ファイルに追加することにより対応完了。

FileETag none

改善5 – CSS ファイル統合

この blog では、以下3つの CSS が使われており、YUI のものだったり、Wordpress のテーマ付属のものだったり、と由来は異なるが、全ページに読み込まれるものなので、main.css ということでひとつにまとめた。

  • reset-fonts-grids.css
  • autocomplete.css
  • style.css

なお、JavaScript については、先日の 記事検索の autocomplete 化 の際に統合済み。

効果測定

上記の改善を踏まえ、http://blog.shimazu.org/ での読み込みスピードで実施前後の比較を行った。

まずページ容量について。Firebug でページ容量を比較すると、

  • 改善前: 276KB
  • 改善後: 148KB

ということで、同じコンテンツなのに gzip 化により半分近い容量削減となった。改善前(左)・改善後(右)のキャプチャは以下のとおり。

改善前改善後

YSlow の Performance Grade と呼ばれる指標でも比較してみた。すると、

  • 改善前: Performance Grade: F (56)
  • 改善後: Performance Grade: C (75)

といった感じで、こちらも改善が見られた。詳細結果は以下のとおり。

performance2.png

最後に、ページ読み込み速度を、yslow のステータスバーに読み込み時間を表示する機能を使って計測した。10回計って、平均を算出、という方法で、

  • 改善前: 3.9954秒
  • 改善後: 3.1822秒

という数字上はそれほど差が大きくないが、体感的には少し早くなったかな?という感じがする。詳細結果は以下のとおり。

performance.png

ということで、YSlow によるボトルネック洗い出しとその改善を行ったが、Gzip は設定に若干てこずったものの、その他は簡単に実行可能な改善策で、結果を見ても、これらの施策は非常に有用な印象を持った。今後開発など進めるうえで表示パフォーマンスが気になったら、まず今回のような改善策を試そうと思う。

記事検索の autocomplete 化 (2)

Sunday, September 2nd, 2007

autocomplete.png

実装完了。

YUI のコードをコピペしただけで、インタラクションがちょっと中途半端(?)だけど。詰め作業は追ってやるつもり。

記事検索の autocomplete 化

Friday, August 31st, 2007

ブログを書く間もないほど仕事があわただしい日々が続いているが、以前からやろうとしている記事検索の 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/

Yahoo! User Interface Library 開発者の講演(@アップルストア銀座)

Sunday, July 8th, 2007

CSS Nite公式ブログ によると、8月10日(金)19:00-20:10、YUI (Yahoo! User Interface Library) の Thomas Sha 氏 によるスピーチがアップルストア銀座にて行われるとのこと。

US からわざわざ来日されてのスピーチということで、都合がつけば参加するつもり。

Sitemaps

Sunday, June 10th, 2007

広告、ブックマークときて、今度は Sitemaps を導入。この Sitemaps、もともとは Google がはじめて、以降 Yahoo!、MSN も対応した、ということで、検索ロボット向けの標準的になりつつある仕様の模様。詳細は以下に詳しい。

設置にあたっては以下を参考にさせていただいた。

上記をもとに作業を行ったところ、以下ファイルが生成された。

検索ロボットに対する情報提供、ということで、検索結果などによい影響が期待できそうだが、Sitemaps 単体での効果測定の方法がないようにみえるのだけど、どうなんだろうか。