Wordpressでライフストリーミング

まえがき

この文章は Wordpress を利用している本サイトでの作業メモです。

このエントリは意図せずして Wordpress をダシにして Tomblr と Tombloo を推薦するという結論になっています。ライフストリーミングをしたいなら Tumblr と Tombloo の組み合わせがお手軽な上にハイクオリティです。

私は時間を割いて作ったのでこのサイトを気が済むまで使いますが、皆様は Tumblr と Tombloo を使うべきだと思います。

目的

「軽い」「手間と金をかけない/かからない」そんなかんじを目指します。

プロファイリング

作業を開始する前のとてもひどい状態を Yslow を利用して数値で確認しておきます。レンタルサーバーの coreserver に Wordpress を設置しています。初回訪問者がページ読み込み完了までにかかる Total time は2.6秒です。

問題点

目的に近づけそうな箇所をピックアップします。

HTTPrequestが多い
ファイルキャッシュに無駄がある
データが圧縮して転送されていない
Javascriptファイルのファイルサイズが大きい
レンダリングに改善可能な無駄がある

Total time を減らすためにこれらのことに対応します。

コンテンツ

いわゆるパーソナルサイトなので、個人の活動を通して自己紹介ができるようにします。

プラグイン名	内容
ドキュメント	Wordpress に直接いれる
メッセージ	Twitter からデータをひっぱる
ブックマーク	delicious からデータをひっぱる
画像	Picasa からデータをひっぱる
ビデオ	今回はやめておきます

Tumblr の考え方を見習い、メディアタイプにフォーカスしてコンテンツを整理します。

インプット

テキストや画像やリンクなどのデータを Wordpress に入れなくてはいけません。ライフストリーミングを行うには「手軽に導入できる」・「入力が楽で早い」ということが大切なので、Firefox アドオンの Tombloo と AddToPicasa を使います。

メッセージは Tombloo や各種 Twitter クライアントを利用して Twitter にPOSTします。次に、 Wordpress plugin – Twitter tools を利用して毎日0時に Wordpress に取得します。

ブックマークは Tombloo を利用して delicious へPOSTします。次に、 delicious の Blog Posting を利用して午前1時に Wordpress に投稿します。

画像は AddToPicasa を利用して Picasa へPOSTします。次に、 Picasa のデータは kPicasa Gralley を利用してアクセス毎に取得します。ドキュメントは Wordpress へ直接投稿します。

プラグイン

楽をするためにプラグインを選びます。プラグイン選びの難点は選択肢が多くて検討が非常に長くなることです。自作したほうが早いなんて笑い話になりかねません。今回、採用したプラグインを記載します。

プラグイン名	内容
Akismet	スパムコメントをフィルタリングする
Archives for a category	カテゴリ別にアーカイブを出力する
Breadcrumb Navigation XT	パンくずナビを出力する
Counterize II	アクセス解析プラグイン。このサイトでは Google Analytics と重複している
Disable Canonical URL Redirection	redirect_canonical を template_redirect から除去する
Disable wpautop	エントリやページから自動挿入されるpタグを除去する
Easy Contact	コンタクトフォームを出力する
Executable PHP widget	Widget 内に記述されたPHPコードを実行可能にする
kPicasa Gallery	PicasaWeb から画像を取得し、整形・出力を行う
Popular Posts	アクセスの多いエントリを出力する
Post-Plugin Library	Popular Posts と Similar Posts がこれがないとやーだーっていうからいれた
runPHP	エントリやページ内に記述されたPHPコードを実行可能にする
Similar Posts	関連エントリを出力する
Simple Tags	タグ機能を強化する
Twitter Tools	Twitter からメッセージをとってくる
WordPress Database Backup	データベースのバックアップを行う
WP-PageNavi	ページャーを出力する
del.icio.us for Wordpress	deliciousからデータをとってくる
WP Multibyte Patch	マルチバイト文字の取り扱いをサポートする
WP Super Cache	最終出力をキャッシュする
All in One SEO Pack	メタ情報を投稿記事ごとに設定したりする

グラフィック

「軽い」ということなので画像は極力使わず、見栄えに関しても MOSe ってことで border-radius を使います。（2009年4月現在、Firefox ユーザーだけがサイトがキュートにみえます）

実際のところ、このサイトを作るときのラフは左にみえる落書き以下のコレなんです。メインメニューブロックになるところに「はてぶ」と書いてあったり、「profile」や「contact」も一緒に並んでいます。「flickr」を使うつもりで色々なところに文言がみえます。この段階が一番楽しめます。5分ほど楽しみました。

ラフの段階でレイアウトが終わってる（笑）ので、おおざっぱにブロックごとに分けて色を置きます。この時、HTML化を意識してブロックの縦と横のサイズを決めます。

もう少しブロックをこまかく分けます。

ブロックの中に要素をいれてみます。作れると思えるまで要素を細かく置いていきます。

色を置いたり、装飾をどの程度加えるか考えます。でもほとんど考える余地はありませんでした。

HTML・CSS・Javascriptを書き、レイアウトや色合いを微調整したり、パーツを設置して仕上げます。このサイトの場合、自分の好きに変更が行えるので工程が後のものほど時間がかかっています。

チューニング

仕上げに数字を見ながら調整を行います。主に次のようなことをやりました。

mod_gzipをCSSとJSにも適用しました
wp-syntaxはexpressionsを利用しているので削除して、syntaxhighlighterを採用して組み込みました
delisiousからJSで取得していたjsonデータを del.icio.us for Wordpress プラグインに移管しました

そのプロファイリングデータの画像です。

運用ルール

運用を行う前にあらかじめルール（ポリシー）を決めておきます。

今回のサイトでは次のような事柄を取り決めました。

プラグインのアップデートを行う際にはdiffを確認してから行う（オリジナルを改変しているため）
バックアップは全てのデータを隔日で行い、30日経過したものから1つを残し他は破棄する
邪気眼やモヒカンやマッチョの類がきたら避ける
焚き火には一緒にあたる

まとめ

ライフストリーミングをWordpressでやろうとしたところ（計ってませんが）延べ50時間ほどかかった気がします。TumblrとTomblooを使えば30分で同様の事ができます。

Tumblrの手軽さには舌を巻きますが、Wordpressの柔軟さも非常に素晴らしく、今回の作業で一番多くの時間を割いたプラグインの検討が手短に行えれば大幅な時間短縮ができそうです。

netfuck