ハイパフォーマンスWebサイト —高速サイトを実現する14のルール

Steve Souders,スティーブ サウダーズ

Amazonランキング：36807位
Amazonおすすめ度：

Amazonで詳細を見る
Booklogでレビューを見る by Booklog

だいぶ前に買って寝かしておいたハイパフォーマンスWebサイト ―高速サイトを実現する14のルールを読みました。もっと早く読めば良かったです。。

サブタイトルにあるようにサイトを高速化するルールが14つに分けて書かれています。内容はサーバ負荷分散などバックエンドの話ではなく、待ち時間の80%を占めるとされているフロントエンドの話。難しい所もありましたが丁寧に解説されていてわかりやすかったです。「スクリプトは最後に置く」「スタイルシートは先頭に置く」「JavaScriptとCSSは外部ファイル化する」なんていう基本的で簡単な内容もあってすぐに実践できるので楽しいです。読んでおくと得する本ですよ。Webに携わる仕事をしている人にオススメできる本ですね。Google ブックスにもあるのでチラ見でもどうぞ。

Demoを見る

とある勉強会でnoriさんからjQueryを使ってRSSを取得しXMLをパース、そしてリストで表示させるという夏休みの？宿題があったのでやってみました。自分の中でRSSが同じドメインにある場合とRSSが同じドメインにない場合（JavaScriptはセキュリティの関係上、ドメインが違うファイルを読込む事は出来ない仕様になっています。）を想定して作ってみました。

同じドメインにある場合

Demoで読み込んでいるのはこのxmlファイルです。以下JavaScriptのソースにある$.ajax(options)の詳しい内容についてはjQuery日本語リファレンスなどで確認して下さい。

HTML

//head内にjQueryを
<script type="text/Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

//body内にリスト表示させる場所を作ってあげる
<div id="list-01">
    <!-- ここにフィードの内容が表示される -->
</div>

JavaScript

$(function(){
        //RSSが同じドメインにある場合
        $.ajax({
            //同じドメインにあるXMLファイルのある場所を指定してあげる
            url: 'rss.xml',
            //非同期通信
            async: true,
            //通信結果をキャッシュしない
            cache: false,
            dataType: "xml",
            success: function(xml){
                $(xml).find('item').each(function(i){
                    if (i == 10) {
                        return false;
                    }
                    var title = $(this).find('title').text();
                    var url = $(this).find('link').text();
                    var date = $(this).find('pubDate').text();
                    //月表示を数字表示に変換する
                    date = dateChanger(date);
                    //idがlist-01の箇所にリストで書き出す
                    $('#list-01').append('<li>' + date + '<a href="' + url + '">' + title + '<\/a><\/li>');
                });
                //idがlist-01にあるliをolで括る
                $('#list-01 li').wrapAll('<ol><\/ol>');
            },
            //エラー表示
            error: function(xml){
                $('#list-01').append('<p>Feedの読み込みに失敗しちゃいました。<\/p>');
            }
        });
        //月表示を数字表示に変換する
        var dateChanger = function(str){
            var mydate = new Date(str);
            yy = mydate.getFullYear();
            mm = mydate.getMonth() + 1;
            dd = mydate.getDate();
            if (mm < 10) { mm = "0" + mm; }
            if (dd < 10) { dd = "0" + dd; }
            datestr = yy + "年" + mm + "月" + dd + "日";
            return datestr;
        };
});

同じドメインにない場合

Demoで読み込んでいるのはこのxmlファイルです。外部RSSなので上記のような形では読み込んで来れません。そこでRSSフィード解析用に使ったのはjFeedというプラグインです。ダウンロードしてきたファイルの中でいるのはjquery.jfeed.jsとproxy.phpの2つ。

※セキュリティの問題上、proxy.phpにURLを埋め込むという従来とは違う方法をとっています。

HTML

//head内にjQueryとjFeedを
<script type="text/Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.jfeed.js"></script>

//body内にリスト表示させる場所を作ってあげる
<div id="list-02">
    <!-- ここにフィードの内容が表示される -->
</div>

JavaScript

$(function(){
//RSSが同じドメインにない場合
    $.getFeed({
        //本来はここにRSSのURLを指定する。僕はセキュリティの問題上proxy.phpにURLを埋め込んだので以下の通りに
        url: 'proxy.php',
        success: function(feed){
            var html = '';
            for(var i = 0; i < feed.items.length && i < 10; i++){
                var item = feed.items[i];
                html += '<li>' + dateChanger(item.updated) + '<a href="' + item.link + '">' + item.title + '<\/a><\/li>';
            }
            $('#list-02').append(html);
            $('#list-02 li').wrapAll('<ol><\/ol>');
        }
    });
    //月表示を数字表示に変換する
    var dateChanger = function(str){
        var mydate = new Date(str);
        yy = mydate.getFullYear();
        mm = mydate.getMonth() + 1;
        dd = mydate.getDate();
        if (mm < 10) { mm = "0" + mm; }
        if (dd < 10) { dd = "0" + dd; }
        datestr = yy + "年" + mm + "月" + dd + "日";
        return datestr;
    };
});

proxy.php

$handle = fopen($_REQUEST['url'], "r");

proxy.phpにURLを埋め込んだ方がセキュリティ上良いようなので僕は上記の部分を下記に。

$handle = fopen('http://labs.yusukenakanishi.com/feed/', "r");

どちらの場合も作ってみると比較的簡単に行くようですね。僕？もちろん出来るまで苦労しました。。rewさんやwonderさんのお陰ですー＞＜

ハムさんが企画されている【TB企画】これまでに使った便利なjQueryプラグインというトラックバック企画に乗っかってみます。

便利？なjQueryプラグイン

jQuery UI Tabs

タブ用のプラグイン（コレはプラグインっていうのかなぁ？）。

jQuery Cycle Plugin

動きを付けるプラグイン。別に便利じゃないけど。。

Stylesheet switcher using jQuery

CSSを切り替えるプラグイン。これぐらい自分で書けって話かもだけど。。

InnerFade with JQuery

テキストや画像を切り替えるプラグイン。これも自分で書けって話かもだけど。。

Galleria

画像ギャラリーのプラグイン。

jCarousel

画像をスライドさせるプラグイン。これは便利だと思う。

jQuery.lightpop.js

画像、動画をlightbox風に表示させるプラグイン。

その他はLightbox2、ThickBox 3.1、Videobox: Lightbox for videos、slideViewer 1.1とかですね。Lightboxや画像ギャラリー系が多いような気がします。

最近の自分の傾向

ページ先頭にスルスルっとリンクする動きやロールオーバー、右クリック禁止などなど、サイト全体で使うようなのはyuga.jsとかを使っても良いのですが、自分で書くようにしてます。必要最低限な機能は自分で書いた方が使い勝手が良いですね。以下に例を。

//右クリック禁止
$(function(){
    $(document).bind("contextmenu",function(event){
        return false;
    });
});

//:first-child, :last-childをクラスとして追加
$(function(){
    $('body :first-child').addClass('firstChild');
    $('body :last-child').addClass('lastChild');
});

こんなところです。