前回の「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」の続編。

前回がすごく良かっただけに大変期待できる続編。絶対買う。

2,940円と値段も１.5倍、ページ数も1.5倍。充実したコンテンツを期待してしまう。

目次をながめていると気になることばかりなんだけど、こんかいは、メモリ使用の問題あたりでいいネタがもらえればと期待している。

ただ、今回もはずれない本だと思う。マストBUY。

高速サイトを実現するための14の基本ルールを提示し、世界中のエンジニアから大きな支持を得てベストセラーとなった『ハイパフォーマンスWebサイト』の続編。本書ではAjaxやWeb 2.0技術の浸透といった前著からの技術的なトレンドを反映するとともに、Chromeなど新しく登場したブラウザや他のブラウザの新バージョンにも対応するための情報を追加しました。HTML5、Web Workers、Web Socketsなどの新しい技術、最新のリアルタイムインターネットを支える技術についても言及しています。日本語版ではYahoo! JAPANやMozilla Japan、Google Japanで採用している高速化手法や高速化に関連した最新技術の動向を巻末付録として収録しました。

目次
訳者まえがき
クレジット
まえがき

1章 Ajaxアプリケーションとパフォーマンス
Douglas Crockford●Yahoo!
1.1 トレードオフ
1.2 最適化の原則
1.3 Ajax
1.4 ブラウザ
1.5 Wow!
1.6 JavaScript
1.7 まとめ

2章応答性の高いウェブアプリケーション
Ben Galbraith、Dion Almaer ●Ajaxian.com, Mozilla
2.1 どれくらい速ければよいのか
2.2 遅延の測定
2.2.1 遅延の度合いが悪化するとき
2.3 スレッド
2.4 応答性の確保
2.4.1 Web Workers
2.4.2 Gears
2.4.3 タイマー
2.4.4 メモリ使用が応答時間に及ぼす影響
2.4.5 仮想メモリ
2.4.6 メモリ問題のトラブルシューティング
2.5 まとめ

3章初期ロードの分割
3.1 現状の分析
3.2 分割による節減効果
3.3 分割位置の特定
3.4 未定義シンボルと競合状態
3.5 ケーススタディ −Googleカレンダー

4章実行をブロックしないスクリプトのロード
4.1 スクリプトによるブロック
4.2 スクリプトダウンロードの動作の矯正
4.2.1 XHR eval
4.2.2 XHRインジェクション
4.2.3 iframeスクリプト
4.2.4 Script DOM要素
4.2.5 Script Defer
4.2.6 document.writeによる SCRIPTタグ書き出し
4.3 ブラウザのビジーインジケータ
4.4 順序実行の保証
4.5 結果のまとめ
4.6 そして勝者は

5章非同期のスクリプトの組み合わせ
5.1 コード例 −menu.js
5.2 競合状態
5.3 非同期ロード時の実行順序維持
5.3.1 テクニック 1−ハードコーディングコールバック
5.3.2 テクニック 2−Window Onload
5.3.3 テクニック 3−タイマー
5.3.4 テクニック 4−Script Onload
5.3.5 テクニック 5−SCRIPTタグの分解
5.4 複数の外部スクリプト
5.4.1 管理された XHR
5.4.2 DOM要素と Doc Write
5.5 汎用的な解決方法
5.5.1 単一スクリプトの場合
5.5.2 複数スクリプトの場合
5.6 非同期ロードの実例
5.6.1 Google AnalyticsとDojo
5.6.2 YUI Loaderユーティリティ

6章インラインスクリプトの適切な位置
6.1 インラインスクリプトによるブロック
6.1.1 インラインスクリプトをページ末尾に移動
6.1.2 非同期に実行を開始
6.1.3 Script Deferの利用
6.2 CSSとJavaScriptの適用順序の維持
6.3 危険 −スタイルシートに続くインラインスクリプト
6.3.1 インラインスクリプトのブロック
6.3.2 スタイルシートによるブロック
6.3.3 現実の事例

7章効率的な JavaScriptコード
Nicholas C. Zakas●Yahoo!
7.1 スコープの管理
7.1.1 ローカル変数の使用
7.1.2 スコープチェーンの拡張
7.2 効率的なデータアクセス
7.3 フロー制御
7.3.1 高速な条件文
7.3.2 高速なループ
7.4 文字列の最適化
7.4.1 文字列の連結
7.4.2 文字列のトリミング
7.5 長時間実行されるスクリプトは避ける
7.5.1 タイマーを使って処理を明け渡す
7.5.2 処理の明け渡しのためのタイマーパターン
7.6 まとめ

8章 Comet
Dylan Schiemann●SitePen
8.1 Cometの原理
8.2 トランスポート処理の手法
8.2.1 ポーリング
8.2.2 ロングポーリング
8.2.3 永久フレーム
8.2.4 XHRストリーミング
8.2.5 将来のトランスポート処理
8.3 クロスドメイン
8.4 Cometを実装した場合のアプリケーションに対する効果
8.4.1 接続の管理
8.4.2 パフォーマンスの測定
8.4.3 プロトコル
8.5 まとめ

9章 gzip圧縮再考
Tony Gentilcore●Google
9.1 なぜこれが問題か
9.2 原因
9.2.1 圧縮の指定
9.2.2 犯人捜し
9.2.3 一般に見られるタートルタッピングの例
9.3 非対応ユーザーの救済方法
9.3.1 非圧縮時のページサイズを最小化するページ設計
9.3.2 ユーザーへの周知
9.3.3 gzipサポートの直接検知

10章画像の最適化
Stoyan Stefanov●Yahoo!
Nicole Sullivan●CSS Ninja
10.1 画像最適化を単純にするための 2ステップ
10.2 画像の形式
10.2.1 背景知識
10.2.2 画像ファイル形式の特徴
10.2.3 PNGの詳細
10.3 可逆な画像最適化の自動化
10.3.1 PNGのチャンクの削除
10.3.2 JPEGのメタデータの削除
10.3.3 GIFから PNGへの変換
10.3.4 GIFアニメーションの最適化
10.3.5 Smush.it
10.3.6 プログレッシブ JPEGとファイルサイズ
10.4 透過度 −AlphaImageLoaderの使用を避ける
10.4.1 透過度の効果
10.4.2 AlphaImageLoader
10.4.3 AlphaImageLoaderの問題点
10.4.4 プログレッシブエンハンスメント
10.5 スプライトの最適化
10.5.1 スーパースプライトとモジュール式スプライト
10.5.2 高度に最適化された CSSスプライト
10.6 その他の画像最適化
10.6.1 画像のサイズを変更しない
10.6.2 生成した画像の圧縮
10.6.3 ファビコン
10.6.4 Appleタッチアイコン
10.7 まとめ

11章主ドメインの細分化
11.1 クリティカルパス
11.2 誰が細分化を行うか
11.3 HTTP/1.0へのダウングレード
11.4 細分化の実際
11.4.1 IPアドレスとホスト名
11.4.2 ドメイン数の問題
11.4.3 リソースの分散法
11.4.4 最新のブラウザ

12章ドキュメントのフラッシュ
12.1 先頭のフラッシュ
12.2 出力のバッファリング
12.3 チャンク形式エンコーディング
12.4 フラッシュと gzip
12.5 その他の介在システム
12.6 ドメインのブロックとフラッシュ
12.7 ブラウザ −最後の障害
12.8 PHP以外の言語
12.9 フラッシュに関するチェックリスト

13章 iframeの取り扱い
13.1 もっともコストのかかる DOM要素
13.2 iframeによる onloadイベントのブロック
13.3 iframeと並列ダウンロード
13.3.1 iframeより前に置かれたスクリプト
13.3.2 iframeより前に置かれたスタイルシート
13.3.3 iframeより後に置かれたスタイルシート
13.4 ホスト名当たりの接続数
13.4.1 iframeにおける接続の共有
13.4.2 複数のタブとウィンドウにわたる接続の共有
13.5 iframeのコストに関するまとめ

14章 CSSセレクタの単純化
14.1 セレクタの種類
14.1.1 IDセレクタ
14.1.2 クラスセレクタ
14.1.3 タイプセレクタ
14.1.4 隣接兄弟セレクタ
14.1.5 子供セレクタ
14.1.6 子孫セレクタ
14.1.7 ユニバーサルセレクタ
14.1.8 属性セレクタ
14.1.9 擬似クラスと擬似要素
14.2 CSSセレクタを効率的にするためのポイント
14.2.1 右端が最初
14.2.2 効率的な CSSセレクタの記述
14.3 CSSセレクタのパフォーマンス
14.3.1 複雑なセレクタのパフォーマンスへの影響
14.3.2 使用を控えるべき CSSセレクタ
14.3.3 リフロー時間
14.4 実際のウェブサイトにおける CSSセレクタの働きの測定

付録A パフォーマンス関連ツール
A.1 パケットアナライザ
A.1.1 HttpWatch
A.1.2 Firebugの［接続］パネル
A.1.3 AOL Pagetest
A.1.4 VRTA
A.1.5 IBM Page Detailer
A.1.6 Webインスペクタの［リソース］パネル
A.1.7 Fiddler
A.1.8 Charles
A.1.9 Wireshark
A.2 ウェブ開発ツール
A.2.1 Firebug
A.2.2 Webインスペクタ
A.2.3 IE Developer Toolbar
A.3 パフォーマンスアナライザ
A.3.1 YSlow
A.3.2 AOLPagetest
A.3.3 VRTA
A.3.4 neXpert
A.4 その他のツール
A.4.1 Hammerhead
A.4.2 Smush.it
A.4.3 Cuzillion
A.4.4 UA ProfilerとBrowserscope

付録B Yahoo! JAPANが実践する Webの高速化
岡部和昌、黒田真澄、由衛朋久、高林貴仁、木村尚敬 ●ヤフー株式会社
B.1 CSSスプライト −事例： Yahoo! JAPANトップページ
B.1.1 画像フォーマット
B.1.2 スプライト内画像の並べ方
B.1.3 スプライト画像の読み込み方法
B.1.4 CSSスプライトを利用する際の手順
B.2 画像の軽量化 −事例： Yahoo!ニュース
B.2.1 PNG形式の減色
B.2.2 JPEG形式の画像
B.2.3 サーバサイドの画像圧縮
B.3 FirstByte−事例： Yahoo! JAPANウェブ検索ページ
B.3.1 FirstByteの実装例
B.4 消費リソースの分析 −事例： Yahoo!検索のフロントエンド
B.5 効率的な開発とパフォーマンスを意識した運用
B.5.1 役割分担
B.5.2 制作フェーズ
B.5.3 運用フェーズ

付録 Cブラウザの最新技術を活用した Webの高速化
浅井智也 ●一般社団法人 Mozilla Japan
C.1 プラットフォームとしてのブラウザ
C.2 JavaScriptエンジンを意識した高速化
C.2.1 JITコンパイラについて
C.2.2 関数のインライン展開はほどほどに
C.2.3 ループ処理となるように記述する
C.2.4 クロージャの使用は最小限に
C.2.5 DOMプロパティへのアクセス
C.2.6 argumentsの使用に注意する
C.3 ブラウザの処理を意識した高速化
C.3.1 DOM要素やプロパティのキャッシュ
C.3.2 ブラウザのリフローを意識する
C.3.3 Selectors APIを利用する
C.3.4 ネイティブメソッドを利用する
C.4 ブラウザの最新機能を活用した高速化
C.4.1 リンクプリフェッチ
C.4.2 DNSプリフェッチ
C.4.3 画像ファイルを減らして高速化する
C.4.4 WebGL−Webで3次元グラフィックス
C.5 ユーザー体験を意識した高速化
C.5.1 HTML5の

付録 D Web高速化に対する Googleのアプローチ
及川卓也 ●Google
D.1 Webの高速化
D.1.1 Google Chromeにおけるブラウザの高速化
D.2 Web標準採用 /推進による高速化の利点
D.3 Web SocketsとSPDY
D.3.1 Web Socketsとは
D.3.2 Web Socketsの実装状況
D.3.3 SPDYとは
D.4 Steve Soudersとの一問一答

更新は1年920円。これでも今のレジストラより安いかな。

他のレジストラからの移行は、移行年は実質無料みたいだし。

１年きりのドメインでもとってみるか。あと１６時間か。

★3/26(金)19:00まで！ 赤字覚悟の国内最安値/1年(税込)

お名前.comのレンタルサーバー

なんでこんなに安いのか不思議なくらい異常なコストパフォーマンスを誇るこのレンタルサーバー

最近、CORESERVER.JPの年2,500円のサービスを使い始めたばかりなのだが、お名前.comのレンタルサーバーは安いと思った。

自分がレンタルサーバーを探す条件として今回あげたのが、

1. google appsでメールをホスティングできる。
2. データベースが複数持てる。
3. 容量がでかい。
4. 複数のドメインが設定できる。
5. phpが使える。
6. 安い。

そもそも、１の条件google appsが使えるという条件をクリアするレンタルサーバーが少ない。
DNSの設定ができるレンタルサーバーでないとだめで、自然とレジストリサービスをもった会社しか選択肢にあがらない。

安い共有レンタルサーバーで対応できるのが、

• バリュードメインのCORESERVER.JP
• ムームードメインのロリポップやヘテムル
• お名前.comのお名前.comのレンタルサーバー

CORESERVER.JPは、安いんだけど、phpがセーフモードで面倒。

ヘテ ムルは容量は10G、データベース50個、月1500円ですごく安いんだけど、お名前.comのレンタルサーバーには劣ってしまう。

これだけ大容量で、月1575円とは、安い。

とりあえず、いろいろドメインとって、wordpressみたいなデータベースが必要なものを使ってみるひと、メールはGoogleにあずけたい人はすごくお勧めなレンタルサーバーだと思う。

前回と同じくAjaxで作ってみる。こんな感じ↓

Yahoo Shopping apiテスト(AJAX)

作り方

１．まず、Yahoo Shoppingの商品検索WebサービスAPIを利用するためにアクセスキーを取得する。

2．アフィリエイトを始めるために、バリューコマースのIDを取得する。
（Yahooショッピングは、Yahooポイントでの還元か、バリューコマース経由の現金かを選択できる。）

参考：

• Yahoo!ショッピングAPIでマネタイズ Part1
  http://techblog.yahoo.co.jp/web/yahoo_1/yahooapi_part1/

３．Ajaxから利用するためにYahoo! Pipesでjsonp形式で出力するためのプロキシを作る。

（戻り値として、jsonp形式が使えるけど、appidを隠すために、Yahoo! Pipesを使う。）

パラメータにaffiliate_typeとaffiliate_idをセットする。

4.Yahoo!ショッピングAPIでアフィリエイトパラメータを指定する

APIのリクエスト時にリクエストパラメータaffiliate_typeにvc affiliate_idに
http%3A%2F%2Fck.jp.ap.valuecommerce.com%2Fservlet%2Freferral%3Fsid%3D●●●●●
●●%26pid%3D▲▲▲▲▲▲%26vc_url%3D

を指定します。(●と▲には3.で確認したsidとpidの値を入れます)
例(sidとpidの値はサンプルです。）

参考：

• サーバー不要！Yahoo! PipesでXML→JSONPに変換
• ケーススタディで学ぶYahoo! Pipes入門

4．jQueryを使って、Yahoo! Pipesでjsonp形式で検索結果を取得する。

      $.ajax({
        url: "http://pipes.yahoo.com/pipes/pipe.run",
        data: {
            //何件目から取得するか。0始まり
            offset: 0,
            hits: MAX_PAGE_ITEM,
            //売れ筋順
            //sort: "-sold",
			//レビュー数順
            sort: "-review_count",
            query: searchKeyword,
            _id: "630316100b7af4d383aee9e85d2437a5",
            _render: "json"
        },
        dataType: 'jsonp',
        jsonp: '_callback',
        complete: function(){
            //通信終了時の処理
        },
        success: function(data, status){
            //通信が成功した場合の処理 (JSONPのコールバック関数はこれが呼ばれます)
            onSuccessSearchItem(data);
        }
    });

5．取得した商品情報をレイアウトして完成。

使ったプラグイン(前回と同じ)：

• jquery jtemplates pluginprototype.jpのTemplateのようなHTML Template
• jquery history pluginブラウザの戻るボタンに対応するためのプラグイン。
• jquery lazyaction pluginプラグインに登録された領域が表示されるまで登録された関数の実行を遅延させるプラグイン。表示されたタイミングで実行するコールバック関数を実行できる。
  今回は商品の表示に使用し、画像の読み込みを遅延させた。自家製プラグイン。

価格コムのapiと比べると、取得できる情報が豊富でいろんなことができそうだ。

１秒間に１回というリクエスト制限があり、ajaxからは現実的じゃない。本当はサーバーサイドでコントロールしてあげなくちゃだめだ。（今回は心ばかりにjavascriptで１秒間のインターバルを開けている）
いろんなジャンルの商品を取り扱っているせいか価格コムのapiと比較すると想定外の結果が返ってくることが分かる。
うまく使いこなして取得する商品をコントロールすることができれば、いろんなことに使えそうだ。

※前回と同じく画面はappleの真似をしてみた。パクリはいろいろ勉強になる。

Yahoo Shopping apiテスト(AJAX)

とりあえず、今回はAjaxで作ってみる。こんな感じ↓

価格.com apiテスト(AJAX)

作り方

１．まず、価格.com WebサービスAPIを利用するためにアクセスキーを取得する。

２．Ajaxから利用するためにYahoo! Pipesでjsonp形式で出力するためのプロキシを作る。（このAPIは出力形式がxmlのみでajaxからは使えない）

Yahoo! Pipes:Kakaku.com Item Search JSON

参考：

• サーバー不要！Yahoo! PipesでXML→JSONPに変換
• ケーススタディで学ぶYahoo! Pipes入門

３．jQueryを使って、Yahoo! Pipesでjsonp形式で検索結果を取得する。

    $.ajax({
        url: "http://pipes.yahoo.com/pipes/pipe.run",
        data: {
            ApiKey: "18e1df1b7387543cc580ebe9c55294a1",
            HitNum: MAX_PAGE_ITEM,
            Keyword: searchKeyword,
            //価格コムのページ数は１から始まる
            PageNum: current_page + 1,
            _id: "d3acf57a65838085f97700e9ce5c0eb2",
            _render: "json"
        },
        dataType: 'jsonp',
        jsonp: '_callback',
        complete: function(){
            //通信終了時の処理
        },
        success: function(data, status){
            //通信が成功した場合の処理 (JSONPのコールバック関数はこれが呼ばれます)
            onSuccessSearchItem(data);
        }
    });

4．取得した商品情報をレイアウトして完成。

使ったプラグイン：

• jquery jtemplates pluginprototype.jpのTemplateのようなHTML Template
• jquery history pluginブラウザの戻るボタンに対応するためのプラグイン。
• jquery lazyaction pluginプラグインに登録された領域が表示されるまで登録された関数の実行を遅延させるプラグイン。表示されたタイミングで実行するコールバック関数を実行できる。
  今回は商品の表示に使用し、画像の読み込みを遅延させた。自家製プラグイン。

一回に取得できる商品が、20まで。取得した情報の中に、他のサイト（amazonなど）で利用できる商品コードがあると思っていたけど、価格コムの商品コードしかない。APIで取得できる画像も80 x 60ととても小さい画像。アフィリエイトもない？。このAPIをマッシュアップしてどんなサービスが作れるんだろう？

今度は、この検索結果をDBにため込んで、いろいろやってみるか。（１日5000回使える）
ajaxでは、戻るボタンの対応が面倒だし、Googleアドセンスみたいなアフィリエイトも使えない。

※画面はappleの真似をしてみた。パクリはいろいろ勉強になる。

価格.com apiテスト(AJAX)

サーバーをレンタルサーバーに移したばかりなのだが、ブログを更新して「このキーワードだとひっかかるだろう」っていうキーワードで検索してみてもページがヒットしなかった。
移動してまもないからかと思っていたが、どうやらrobots.txtの設定がクローラのアクセスを拒否する設定になっていることに気付いた。

これは、　Google ウェブマスター ツール のおかげです。

こんな感じで教えてくれた。

はやく気付いてよかった。

検索にひっかからないWebページは何の意味ももたない。

早速robots.txtを生成してアップした。

再クロールで、インデックスされることを祈る。

レンタルサーバーがこんな初期設定でいいのか？

Chris Sanders (著), 園田 道夫 (監修), 一瀬 小夜 (翻訳) ,オライリー・ジャパン (2008/1/25)

ブラウザの挙動が変？

単純にHTTPリクエスト、レスポンスだけでは解決できず、パケットキャプチャーをやりながらいろいろ調べたときに読んだ本。

HTTPリクエスト、レスポンスをキャプチャーするソフトはたくさんある（Firebugとか、Fiddlerとか）。こういうソフトって基本的にプロキシとして動いていて、ソフトを通すと挙動が変わったりする（ネットワークが滑らかになるというか..）。

バグの解析をしたいのに、ソフトを通したらバグが発生しなくなることもよくあると思う。
今回もそんな現象が発生して、WireShark(ワイヤーシャーク)を投入させた。

※このソフト以前は「Ethereal(イーサリアル)」という名前で呼ばれていたらしく（著作権の問題でWireSharkに改名。Etherealは現在開発されていない）、SEの人たちと話すときは、「イーサリアル」っていったほうが通じやすい。

ただ、このWireShark、日本語の情報が少ない。まったくの素人にとって未知の領域の物を英語で試すのは本当に疲れる。

そこで、オライリー本「実践 パケット解析 ―Wiresharkを使ったトラブルシューティング」。

WireSharkの使い方から、パケット解析に当然必要なネットワークの知識、実際の解析のチュートリアルを織り交ぜ説明してくれる。２００ページくらいの薄い本だけど、一読するとなんとなく使いこなせるようになる。

いろいろなパケットをパラパラと紹介してくれているので、気になったものは、より詳細をネットで調べるといった感じで使ってみた。手っ取り早くWireSharkを使おうと思っている人にはオススメできる（ほかの本を読んだことないが）

たしかに、ソフトの細かいところや、ネットワークの深いところは解説していない。そういう面では、入門書として扱われて仕方ないが、十分に実践で使える基礎知識をつけることができる本だと思う。

この本をスタートに、ネットワークの深い世界に行くのもいいかもしれない。と思う◎

結局バグは未解決のままだが…

※WireSharkはHTTPリクエスト、レスポンスの中身を見るツールとしては微妙。日本語が化けたり。この辺、エンコードとか指定して見れるようにしてくれたら便利になるのに、と思う。

最近オタクって言う言葉が好きだ。

あなたのおたくタイプは【知識欲求型】に分類されました。おたく度数は【９７％】ぐらいです。
気になることにとことん一途なあなたは、正統な「おたく気質」の持ち主といえそうです。
あなたは一度はまると、その全世界を把握して、研究し、その事象の意味や、作者の意図まで追及せずにはいられません。
それぞ、まさしく「おたく道」の正道です。
知識欲が高さと平行して、収集癖があるのも特徴です。
せいぜい破産しない程度に、気になる文献、資料、玩具を買い集めてくださいね。

あなたにぴったりのおたく称号：おたく博士

ん～。選択肢が微妙すぎた。その結果↑。◎