• wmv を配信しているサーバーが重たい時に待たなくては行けない
• なので、とりあえず画質が悪くてもいいから本家ページの flv を再生したい時がある
• xxx_part01、xxx_part02、xxx_part03 ... みたいにシリーズものが多いけど、 いちいち末尾の数字を変えてフォームに入力していくのは面倒だ

てなわけで、これを解消する機能を二つ追加しました。

まずは「flv 再生機能」。 左上の「play flv」をクリックすると、wmv じゃなくて、flv が再生されます。 画像はもちろん荒いですが、再生開始が早いです。ちなみに、 一度、YourFileHost のページに行ってブラウザにセッションを持たせないと flv のロードができない、 というのが注意事項です。

左上のメニューで wmv 再生と flv 再生を切り替えることができる

次に「関連動画表示 機能」。これ我ながらチョー便利。 例えば、

http://www.yourfilehost.com/media.php?cat=video&file=90124_a1.wmv

というファイルを再生すると、左下のスペースに

http://www.yourfilehost.com/media.php?cat=video&file=90124_a2.wmv
http://www.yourfilehost.com/media.php?cat=video&file=90124_a3.wmv

のサムネイルとプレイヤーへのリンク等が出現します。ようは、ファイル名の末尾を見て 連番の関連する動画がないかを自動的に探しているという仕組みです。

少し待つと左下に関連動画が表示される

これで、フォームに YourFileHost へ URLを変えて入力をする必要がなくなり、 手を休めず動画を楽しむことができます。 また、「この YourFileHost 動画の続き、もしくは以前の動画はないかなー」という悩みも解決ですね。

ということで、Enjoy!

• YourFilePlayer - YourFileHost の高画質 WMV 動画再生プレーヤー

YourFilePlayer - YourFileHost の WMV 動画再生プレーヤー

• 通常の YourFileHost ページでは荒い映像が流れると思うが、ここに URL をぶちこめば、元ソースの高画質な動画が見れる
• Silverlight必要
• 対応するのは元動画が WMV 形式のファイルのみ。結構高画質
• ファイルによってはものすごーい、ロードが遅い場合がある
• YourFileHostからファイルが消されてる場合が結構あり

YourAVHost からも飛べるようにするけど、取り急ぎコピペしてフォームにいれて試してみてね。 それも面倒な方は旧名「柚木ティナ」たんをどうぞー。うらすけべ

• YourFilePlayer - YourFileHost の WMV 動画再生プレーヤー

追記

YourAVHost から飛べるようにした。これは激しく便利じゃまいか。

]]> http://yusukebe.com/archives/09/06/18/174007.html http://yusukebe.com/archives/09/06/18/174007.html 研究・制作活動 yourfilehost Thu, 18 Jun 2009 17:40:07 +0900 昨日公開した「ZonTube beta2」の Cooliris 機能がなかなかいい感じなので紹介します。 Cooliris は Firefox や IE で動作する Web画像・動画ビューアーで、 3D ギャラリー形式の迫力あるインターフェースが特徴です。 Google や YouTube などある特定のサイトで動作が可能なのですが、 「ZonTube beta2」では、アルバムページ、アーティストページなどを Cooliris に対応させました。 動作している様子のイメージを見るとわかりやすいのでそれとともに解説。 もちろん、ブラウザに Cooliris がインストールされていることが前提です。

まず、おもむろに気になったアルバムのページに行きます。 ページのロードが終わると右上の Cooliris ボタンに色がつきます。 「このページは Cooliris に対応してますよー」という合図ですね。 さてではこのボタンを押します。

すると、全画面表示でそのアルバムに含まれるヒットした YouTube 動画が「うにょーん」と現れ、一覧でみれます。 ここで、Cooliris の特徴である 3D 操作ができてカッコいい！

Cooliris 内での動画の再生ももちろん可能。 サムネイルを選択し、クリックすると。。。

動画の再生はじまた。

まだ、試してない方はぜひ。 ちなみに、ZonTube 本体の Shadowbox による動画のプレビュー機能ですが、 今のところ Firefox と IE に最適化させていて、Safari とかじゃうまく動作しないかもしれませんが、 ご了承ください。というわけでEnjoy!

• Cooliris | Discover More
• ZonTube beta 2 : Amazon with YouTube

ZonTube beta2

使ってみればすぐわかるように心がけて作りましたが、簡単に新機能の説明と使い方を紹介します。

アルバム YouTube 動画 一覧

カテゴリ別閲覧や検索などでみつけたアルバムのジャケットをクリックすると そのアルバムページに飛びます。 すると（情報が取得できれば）、 アルバムの全トラック、それぞれ関係する YouTube の動画をひとずつ一覧で 見ることができます。 アルバム全体を YouTube の動画で構成したらどうなるかを俯瞰する感じですね。 もちろん、気になった曲がある場合、左側のトラック名を選択すればより多くの映像を楽しめます。

YouTube 動画スライドショー再生

今回一番力を入れたのがここです。 YouTube のサムネイル画像をクリックすると、 「うにょーん」とウィンドウいっぱいの画面がでてきて、 自動的に再生が始まります。そして、再生が終わると次の曲が自動的に始まるという仕掛けです。 お分かりの通り Shadowbox という JavaScript のライブラリを使って実現しています。 今まで YouTube で一般的に提供されている embed タグを使ってこのような埋め込みを実現していましたが、この機能を使ってでっかく動画を表示させると大迫力ですごくいい感じです。

ダウンロード＆ListPodに追加機能

気にいった動画があれば、YouTubeMP4でダウンロードしたり、ListPod のマイリストに登録しましょう。 ワンクリックで飛ぶようにしました。 もちろんもっと気に入ったら CD も買うことを忘れずにしましょうね。

LastFM との連動

今回は「Amazon x YouTube」というマッシュアップに加え、Last.fm も連動させるようにしました。 Last.fm アカウントをお持ちの方は上のフォームにアカウント名を入れると、 自分が最近聞いている曲やアルバム、アーティストの一覧がでるので、 上記した通り同じように音楽を YouTube 映像とともに楽しむことができます。

Cooliris 対応

これはおまけ的な機能。 Cooliris という Firefox の addon で、ちょーかっこいいスライドショーが体験できる ソフトがあるのですが、それに対応しています。 アルバム、アーティストページで「Launch Cooliris!」というリンクから起動することができます。

ということで、簡単に新機能を紹介してきました。 わかる人がもしかしているかもですが、この beta2 。 miyagawa さんが作ってる動画フィードアグリゲータ「Remedie」をかなり参考にして、 作っています。 Remedie で使っている JavaScript のライブラリを眺めて、これは使えそうだ、 といろいろ入れ込んでボリュームたっぷりになっておりますw なので、環境によっては重たいと感じるかもしれませんが、その辺り、 ご了承ください。

ちなみに。 当分の間放置していたこの ZonTube をなぜいまさらバージョンアップさせたかという経緯が あって、きっかけは全く知らない海外の方から急に飛び込んできたメールでした。 ということで超意訳。

ヘロー
私はマッシュアッププログラミングを勉強中のビギナーです
勉強のためにいろいろ探してたら、あなたのウェブサイト（ZonTube）を見つけて
ベリーインタレスティングなんだよ。
どっか勉強できるいいサイトない？
教えてくれたら嬉しいな。
サンクス！
ジョン

このメールをもらった瞬間すごく嬉しくなって、 「こうなったら今まで汚く作ってた ZonTube を簡潔に奇麗に作り直して、 ソース公開してみせてやるわ」というテンションになったわけです。 で、作り始めたら止まらなくなって、 結構規模のでかいアプリケーションになってしまい、ソース公開はちゅうしょしちゃうけど（＞＜）、 とりあえずできたよ←いまここ。という具合です。

ジョンに気に入ってくれるかはさておき、なかなかいいできになっているので、よろしければ、 Enjoy!

• ZonTube beta2

See also

• [ゆ]: AmazonとYouTubeの音楽マッシュアップサイトを作ってみた

参考書籍

「全ての検索結果 - セーフサーチ(制限あり) = アダルト?」
かどうかを Microsoft の新しい検索エンジン Bing の API を使って試すサイト

です。

昔、Yahoo! の検索 API を使って同じような試みをしている方がいましたが、それと同じです。 てなわけで、やりようによっては「アダルトな」動画や写真を集めるのに使えるかもしれませんね。 例によって、18歳未満の方は立ち入り禁止につき、本家の Bing で検索を楽しむようにしてください。

AdultOrNot

ちなみに、作ったきっかけがありまして、普段あまり自分にはフックしない Techchranti に掲載された 「Bingは最高のエッチ系検索エンジンだった」という題名のわくわくする記事を読んだからでありましてー、 それから、衝動にかられて1日ちょっとで作った次第です。

• Bingは最高のエッチ系検索エンジンだった

細工として、単に検索フォームがあるだけでは寂しい、ってかどうせならエッチ系のキーワードでどんどん検索したいので、 そのために「Interesting Words」として日本のAV女優名とエロキーワードをランダムで表示させるようにしました。 辞書は、秘蔵っ子の「Acme::JapaneseAvActress」と「Acme::AvGenre」というモジュールから作りましたので、かなりの種類の単語がでてきて面白いです。

実際に使ってみてですが、かなりのエロコンテンツがでてきてびっくり。 動画についてこの Bing。 ダウンロード視聴できるリソースは片っ端からインデックスしているみたいで、YouTubeの隠れたエロ動画はもちろん、 マイナーな AV女優さんの名前で検索しても、名の知れない DVD 屋さんのサンプルムービーが出てきたりするところがいいです。 もし、動画の検索結果があまりでてこない単語でも、イメージで検索してみると豊富にコンテンツがヒットしますね。 また、アダルトと判定されてない、つまり制限ありのセーフサーチの結果としてでてくるものもアダルティだったりといろいろと発見があります。

この「AdultOrNot」。現在のところ検索結果を100件以内に制限していたり、精度が多少悪い？（なぜか結果がマイナスだす時がある）かったりしますが、暇つぶしにでも使ってくだされば幸いです。

• AdultOrNot

ec2 で運用しているサーバの代わりとして追加のマシンの導入を検討中。 方針は、「ボケて」サーバを追加した時に導入した「iSCSI」を活かす形で、 VMWare ESXi を USB でブートして、VM をその「iSCSI」上に置く、 つまりディスクレスなマシンにして消費電力や発熱を押させたものにすること。 また、今回は「省スペース」にも気を払いたい。

というのも、先日の「ゆーすけべー日記: 「ボケて」ガンマ版リリース - 技術的新しい試みまとめ」という記事に対して、ハチイチ友達の uzulla っちがこんな記事を書いていた。

近年DELLとかHPの安いミドルタワーのサーバーがでてきて、家サーバーはとても安く購入できるようになった。
…んだけど、実際の所これでけーんだよな。

via 2009-05-03 - c/fe

確かにその通りで、dellやHPのサーバはさすがに作りはそれなりにしっかりしていて便利なんだけど、 自宅に複数台置くと考えると多少でかいんだよね。 そこで、構成を考えてみると、ディスクレスであることと、マシンを設置する納戸が比較的涼しいことも加味すると、 放熱対策を最小限に押さえられることから、自作で小さい PC を作るのがいいのではないかと結論に達した （サーバの熱問題についてなんだけど、それなりに長い期間自宅でサーバを運用している割には、 あまり悩んだことがないので、もしかして、上記の考えはは甘いかもしれないことをご了承くださいな）。

そこで、目をつけたのが、一般的なマザーボードのファームファクタで一番小さい「Mini-ITX」ベースのマシンである。 サーバなので、PCIスロットもオンボードNICがあればいらない、上記した通りディスクレスなのでケースが大きくなくていい、 と小さくても逆に好都合なのである。 てなわけで、今回のマシンはアプリケーションサーバとして使いたい＝そこまでクリティカルではないので、 割と気軽に、試しとして自分で組んでみた。パーツ構成はこんな具合である。

• マザボ: Intel DG41MJ 約10,000円
• CPU: Intel Core2Duo E8400 3GHz 約17,000円
• ケース: センチュリー CF-A6719 約6000円
• メモリ: トランセンドの家にあったやつ 2GB x 2 だいたい4000円くらいで買えるんじゃまいか
• 合計金額: 37,000円

VMWare を入れる USBメモリとか通販にかかる送料とかも含んでも4万円前後。 アプリケーションサーバとワーカー用の VM を2つ〜3つ 動かそうという魂胆、そこそこリーズナブルじゃないかな。 うんで、実際に組んでみると、やっぱり小さい。 感覚としては横に寝かせると、高さが 2U ラックサーバのそれ、 横幅 x 縦幅 がラックサーバの面積の 4分の1 といった具合。以下写真で紹介。

今回選んだケースは電源内蔵型、「筐体がかっこいいいからw」という理由から選択したんだけど、 ACアダプタで稼働させるタイプのものを選べばもっとケース内の温度は下がるね。 それとこの「DG41MJ」というマザボは、TDPが65W以内のCPUが載るので、 Core2Quad の省電力版（っていうのかな？番号の最後に s がついてるやつ）も使える。 また、メモリは今回 2GB x 2 をつけたけど、最高 4GB x 2 まで対応しているので （PC2 DIMM 4GB って、バルクしか今は出回ってないっぽいけど）、より多く積むことも可能だ。 実際に起動してみてワットチェッカーで計ってみると、消費電力はアイドル時で 43W 、起動時は 65W 前後だった。

さて、今はまだ VMWare ESXi を NIC の認識ができるようにがんばっていれたところで、 まだ運用はおろか、VM も動かしていない。 これからセットアップ及び順次移行作業をしていくが、 うまくリクエストをさばき、熱の観点からこの夏を乗り切ることができれば、 この「Mini-ITXマシン＋iSCSI」という組み合わせは、省スペース / 省電力という点で最強の自宅サーバになりうるのではないかなぁ。

と、妄想しつつ、試しつつあるよ、という記事でした。 実運用した結果はそのうちまとめるかもしれないかもしれないですのでよろしく。

• [N] YouTubeのURLに「mp4」をつけるだけでMP4形式でダウンロードできる「YouTubeMP4」

そこで、個人的なニーズもあり、Veoh 版 の 「VeohMP4」ってのも作ってみた （といっても、前から作ってあったのを公開してなかっただけで、 ネタフルさんの記事が出てから作ったわけじゃないっすよー）。 ちなみに、この記事のタイトルはネタフルさんのパクリでおおくりしています。

VeohMP4

使い方は「YouTbeMP4」と同じ。フォームに Veoh のビデオURLを入力すると、 ダウンロードリンクが表示されるので、それを右クリックして保存するなりして、ダウンロードしてください。 形式は iPod に最適化された mpeg4 形式になっています。 また、タイトル通り、Veoh のビデオページにて、以下のようにURLへ「mp4」をつけると自動的に ダウンロードページへ飛ぶようになっています。

http://www.veoh.com/browse/videos/category/music/watch/ビデオのID
to
http://www.veohmp4.com/browse/videos/category/music/watch/ビデオのID

ただ、残念なのは、Veoh って外部の動画共有サイトとも提携してそこの動画も見れるようになっているんだけど、 そのうちのMTVからのビデオ等はさすがにダウンロードすることができませんのであしからず。

このサービスを作るにあたって、副産物として「WWW::Veoh::Download」というPerlのモジュールもできました。apikey が必要ですが、こんな感じでダウンロードできます。

use WWW::Veoh::Download;

my $client = WWW::Veoh::Download->new( api_key => 'your_api_key' );
$client->download( 'vXXXXXXXXXXXXXXX', 'veoh.mp4' );

使いたい人はそちらもチェックしてみてください。

• Yusuke Wada / WWW-Veoh-Download - search.cpan.org

ところでこのサービスはとある目的への布石でしかない…かもね！

もう仕組みは簡単で、フォームに YourFileHost へのリンクが含まれているページのURLを入れると、 動画のサムネイル、ページへのリンク等が一覧で見れます。 また、「find other parts」というリンクをクリックすると、 指定した動画の他のパートはないかを探してくれる機能もつけました。 よく、「xxxx_part03.wmv」みたいなファイル名のビデオがあって、 「これって、part04、もしくはそれ以降ファイルがあるのかなぁ」と気になる時がありますが、 この機能を使えば解決ですね。

YourAVHost もそうだけど、YourFileHost の動画は多々ブログ（エログ）等で紹介されているけれど 騙しリンクが邪魔だったり、サムネイルも見たいと思うことがあったりと、 整理されてない感があるので、 この GetYourLinks を使えば快適な YourFileHost ライフが送れるかもしれませんね！ 2ch の「YourFileHost にあるXXXXXXXな動画を貼るスレ」のような URL を入れて、 エロ動画のサムネイルが、ガーーーーーと出てくる様がなんとなく気持ちいいですw 実際に、僕も使ってみて（ry

ということで Enjoy!

• GetYourLinks - Get YourFileHost links from a page

方針としては、アプリごとに conf を書いて、ポート別に apache を起動、 フロントの 80番の apache がリバースプロキシ及び静的コンテンツ向けサーバになる、 というものです。 httpd のポートがたくさんできちゃうのが多少気持ち悪い感じしますが、 番号の管理だけちゃんとしてれば、まぁいいかなぁと思います。

一番最後に、運用も視野に入れた必要最小限の conf ファイルのサンプルを貼付けておきます。 myapp_httpd.conf を使う場合、

$ sudo apache2ctl -f myapp_httpd.conf

としてアプリ別に apache を起動しています。 テストマシンで試験してる段階ではこれで問題はないようです。 以下の例、myapp_httpd.conf の Global Settings に当たる部分は、 アプリケーション間で共通に使うことができるので、 別ファイルにして Include したほうが管理しやすくなりますね。 では conf ファイル。

myapp_httpd.conf

# Global Settings
 
User www-data
Group www-data
 
Timeout 300
KeepAlive Off
HostnameLookups Off
LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined
CustomLog /var/log/apache2/access.log combined
 
LoadModule perl_module /usr/lib/apache2/modules/mod_perl.so
LoadModule rpaf_module /usr/lib/apache2/modules/mod_rpaf-2.0.so
RPAFenable On
RPAFsethostname Off
RPAFproxy_ips 127.0.0.1
 
# Local Settings
 
Listen 8001
PidFile /var/run/apache2/myapp.pid
 
StartServers 1
MinSpareServers 1
MaxSpareServers 3
MaxClients 10
 
ErrorLog /var/log/apache2/error_myapp.log
CustomLog /var/log/apache2/access_myapp.log combined
 
DocumentRoot /home/www/myapp/root
 
PerlSwitches -I/home/www/myapp/lib
PerlSwitches -I/home/www/myapp/extlib
 
PerlRequire /home/www/myapp/startup.pl
SetHandler perl-script
PerlHandler MyApp

次に front の apache の設定。VirtualHost 前提で、静的コンテンツに関しては Expires ヘッダを付加しています。

<VirtualHost *:80>
        ServerName myqpp
        DocumentRoot /home/www/myapp/root
        RewriteEngine On
        RewriteRule ^/(static/|favicon.ico) - [L]
        RewriteRule ^/(.*)$ http://localhost:8001/$1 [P,L]
        ExpiresActive On
        <FilesMatch "\.(jpg|gif|png|ico|css|js)$">
            ExpiresDefault "access plus 365 days"
        </FilesMatch>
</VirtualHost>

lighttpd と比べながら、実際に運用へ適応させようかと思っています。 何かおかしなところがあったらツッコミくださーい。

1. 指定された Finder 項目を取得
2. 選択された Finder 項目をコピー
3. Finder 項目の名前を変更（連番付きの名前にする）
4. Finder 項目の名前を変更（名前全体をすべて小文字に変更）
5. イメージをサイズ調整
6. Finder 項目を表示

いやーこれ便利だわ。 Finder で掲載したい写真を選んで、この Automator 使えば、項目に答えるだけで この日記用の写真が作れる。 リサイズだけじゃなく、リネームもしてくれるし、 自宅ネットワークからだったら保存先でファイルサーバを指定すれば、 アップロードいらずだよ。 Mac 歴短いからもしかしてこれって常識かわからないけど、Automator 便利！と思いましたね。 あと、UNIX Pipe 的で作ってて楽しい。 てなわけで、Automator 初体験でした。

うんで、その Mac mini なんだけど、昨日むしょうにディスクを SSD に置換したくなったので、 横浜ソフマップで Intel（！） の MLC SSD 80GB と、100円ショップでヘラ（！） 買ってきて、 もとからついてた HDD と交換してみた。こんな感じ（より詳しい手順は検索すればたくさん出てくるので、そちらを参考に。 また、ケース分解するとサポートの対象外になるので、ご注意ください）。

• 交換前に Time Machine で外付けハードディスクに復元可能なバックアップを作成
• OS をシャットダウン
• Mac mini を裏返す
• 100均ヘラをケースの隙間にちょっとずつ差し込んでいく
• いい感じに隙間が空いてきたらテコの原理的にパコパコ
• ケース分解完了

• ドライバ使って何を外したかを覚えつつ内部を分解
• HDD 発見！SSD と交換

• 手順をさかのぼって、元に戻す
• 外付けハードディスク等を接続
• Mac mini 付属の OS DVD を使ってブート
• 上のメニューから、「バックアップからシステム復元」的なものを選択
• システム復元開始

• だいたい30分くらいで完了
• 再起動
• 「おおー」、HDD 時代とまるっきり同じ構成になってる！
• (Time Machine)++
• ところが、音がでない＞＜ 右上の「ヴォリューム」アイコンが表示されてない。。。
• どうやら、オーディオボードとメインマザーボードとの接続がゆるゆるだったらしい
• てことで、また分解して、接続確認して起動
• 完成！

さて、実際 SSD に置換した効果なんだけど、 やっぱアプリの起動は格段に速い。 わかりやすいのが Carbon Emacs。elisp の読み込みが一瞬なのでよくわかる。 Google Toolbar を入れてる Firefox では、新しいタブを開くと「よく利用するサイト」が表示されるんだけど、 それも違いが体感できる。 (Intel SSD)++

ランダムライトが圧倒的に速いということで、Itel の SSD を選んだんだけど（hideden氏に勧められた）、 やっぱりそれなりに高いので、コストに見合うかは個々人の判断になる。 ただ、Mac mini ってその名前通り、フルスペックで比較すると MacBook( Pro )より性能の高い構成にはできなかったりするので、 デスクトップ派にとっては制限のある中でのパフォーマンスアップという意味で有意義かもしれない。 とはいえ、俺、メインで使うアプリ「Terminal」なんだけどね。

color99 さん:

コードサンプル通りで動作確認しようとしたら、
Odd number of elements in hash assignment at xxxxx
というエラーメッセージが出ます。

う、ごめんなさい。それバグです＞＜ 修正して、CodeRepos にコミット済み。また、ヴァージョン 0.05 として、 CPAN にもアップしておきました。そのうち更新されると思います。 ということで以下のサンプルが動きます。

use WebService::Simple::Google::Chart;

my $chart = WebService::Simple::Google::Chart->new;
my $url = $chart->get_url(
    {
        chs => "250x100",
        cht => "p3",
   },
    { foo => 200, bar => 130, hoge => 70 }
);

print $url . "\n";

• Yusuke Wada / WebService-Simple-Google-Chart - search.cpan.org

tf0054さん :

WebService::Simple、とても便利に使わせて頂いています！

Perlがさほど分かっているわけではないので間違っているかもしれないのですが、中でXML::Simpleするとき、ForceArrayなどオプションが(パーサ差し替えが可能となった時点から?)与えられなくなっているように思うのですが。。

何か別の方法で対処可能なものでしょうか。

お、使って頂いてあざーす！対処の方法ありますよー。 ですが、これ、「Simple」を冠する WebService::Simple と、XML::Simple にあまりふさわしくない 若干複雑なコードになっちゃってます。YouTube の GData API からキーワード検索をして、 マッチしたビデオのリンクを出力する簡単なサンプルを掲載するのでこちらを参考にしてください。 ようは、XML::Simple の OO オブジェクトをオプション付きで作って、 WebService::Simple::Parser::XML::Simple のコンストラクタに渡して新しくパーサーを作り、 それを WebService::Simple の response_parser として指定しています。 って、こうやって書いててもわかりにくいか＞＜

use WebService::Simple;
use WebService::Simple::Parser::XML::Simple;
use XML::Simple;

my $keyword = shift || 'perfume';
my $xs = XML::Simple->new( KeyAttr => [], ForceArray => ['entry'] );
my $service = WebService::Simple->new(
    base_url => "http://gdata.youtube.com/feeds/api/videos",
    param    => { v => 2 },
    response_parser =>
      WebService::Simple::Parser::XML::Simple->new( xs => $xs ),
);

my $res = $service->get( { 'q' => $keyword, } );
my $ref = $res->parse_response();

for my $entry ( @{ $ref->{entry} } ) {
    print $entry->{link}->[0]->{href} . "\n";
}

まぁ、XML::Simple も慣れるまでに KeyAttr オプションを知らずにはまったりするのですが、 この WebService::Simple、もっとシンプルにしたいですなぁ。 Moose/Mouse もだいぶ浸透してきたので、API の互換性をうまく保って、Any::Moose で書き直すってのもありですね。 とりあえず、上記のコードを参考に XML::Simple のオプションを指定してみてください。

• 「ボケて（bokete）」お知らせブログ: ボケてガンマ版リリース！！

この変更が功を奏するのか。もう既に「機能・情報過多」になって使いづらいという意見もちらほらでていたりするのですが、サイトの内容についてはもう少し様子をみてから評価するとします。 そこで、今回はガンマ版で行った多くの技術的な新しい試み、ベータ版からの変更点をまとめておこうと思います。

ボケてのシステム開発は俺一人でやっていることもあり、これまでの経験で得た知識を振り絞り、ウェブ経由を含めいろいろな方から教えてもらった情報をフル活用したつもりで、独特のものになっているかと思います。 その辺り、加味してくれて、何か参考になればうれしいです。では、ベータ版からガンマ版へ技術的にどこをどう変えたのかを紹介します。

開発体制

鎌団子と二人

人的リソースは、基本的に今までと変わらず、俺と鎌団子と二人での開発になりました。 鎌団子がデザイン及びHTMLやCSSの基本コーディング（今回は一部外注したところもあります）を担当して、 残りのシステム部分を自分が作成しました。二人で少々大変なところもある代わりに、 役割の切り分けが明確になるので、その点、すごくやりやすいですね。 サイト規模が大きくなったら考えようですが、ぶっちゃけそこまでユーザ数が多くなかったりするので、 現状はこの二人ってのが開発においては、ベストかと思います。

BTS（Bug Tracking System）の導入

• 01-基本機能実装
• 02-拡張機能実装
• 03-デザイン修正
• 04-テスト版完成
• 05-携帯版完成
• 06-リリース版完成
• 07-リリース後

あとは、 「タスク、不具合、アイデア」という具合に各チケット分類して登録するくらいで、 特別な使い方はしてないのですが、それだけでもかなり役に立ちますね。

IRCの活用

せっかく横浜にオフィスがあるので、二人が揃って開発するというのが理想ですが、 諸々の事情でなかなかそうはいかず、鎌団子＠オフィス - 俺＠自宅、って状況が結構あります。 そこで、オンラインでコミュニケーションをとるためにIRCを使っています。 まぁ割と一般的ですが、subversionのコミットログをPlaggerでさくっと作ったボット経由 （ってかPlagger使わなくてもできるのかな？）で流すと、 更新がすぐ確認できるのでいいですね。 以前、今やJPA（Japan Perl Association）の代表である、endewroksの牧さん達と仕事をする機会があって、 その時に同じ様な環境を用意してくれて、「これ、俺が鎌倉にいながらでも開発できるじゃん！」と発見したのが、 活かされました。うん、今更ですが、subversion + trac + IRC ってのはかなりありです。

ウェブアプリケーション

モダンPerl入門方式

さて、いよいよシステム内部の話に入ります。 開発言語は Perl、ウェブアプリケーションフレームワークには Catalyst を使っています。 これはボケてベータ版、また、いつも俺が個人で作っているアプリとも変わらずです。 ただ、今回はベータ版に比べて、「賢く」作ることを心がけました。

Catalyst は、一般的な他のフレームワークと同じく、デフォルトでは、「MVCモデル」を提供するものです。 しかし、Catalyst のそれをそのまま使おうとすると、 どうしても、Model 部分が O/R Mapper そのものになったり、Controller にロジックを書いて肥大化してしまう、 なんてことになります。すると同じことを繰り返し Controller に記述しなくてはいけなくなったり、 Web 以外のコマンドラインインターフェースから Model を扱う処理を別で書かなくてはいかなかったり、 単体でのテストが難しくなるなど、スマートと言えるものではなくなってしまいます。 そこで、MVC に加えて、実際に必要なロジックを扱う別の層を設けました。それが「API」層です。 すると、アプリケーション全体のイメージとして結果的に以下のような構造になります。

Web
  - Model
  - View
  - Controller
API
CLI

例えば、投稿されたボケの最新20件を取得したかったら以下のように書けるわけです。

my $api = Bokete::API::Boke->new();
my $entries = $api->get_recent( { rows => 20 } );
while( my $entry = $entries->next ){
    print $entry->title . "\n";
}

これは CLI での利用ですが、ウェブ側の Controller でももちろん似たように使えます。

と、ここまで偉そうに言ってきましたが、実はこの手法、2月に発売された牧さん執筆の「モダンPerl入門」 に書かれているものをかなり参考にしています。というか、もろそのままだったりします。 ちょうど、前述した問題も含め、「ボケてのコードもっと奇麗にしたいなー」と思っていたところに、 「モダンPerl入門」が発売されたので、実践的に本の内容を理解しつつ、 ベータ版より「賢く」作ることができたのでよかったです。

Mouseを使用

上記した API層 を作る上でかかせなかったのが、「Moose/Mouse」の存在です。 「Moose」は去年の今頃に開催された「YAPC Asia 2008」の頃に国内でものすごく話題になった、 Perl でのオブジェクト指向 （本来は Meta Object Protocol という概念なんだけど実はあんま理解してない＞＜） を支援するためのフレームワーク/モジュールです。 オブジェクトの定義が今までと比べてかなり簡単・効率的にできるため、 API層で使うクラスを作るのに大活躍しました。 「もう Moose/Mouse がないとモジュール書けない！」とまでは言いませんが、 一度使いだすと楽ちんです。 また、Mouse という Moose 互換のモジュールを使うことにより、 体感できるほどアプリケーションの起動が速くなりました。 「Catalyst + API層 with Mouse」って手法は、個人的に今のところベストなウェブ開発法かと思いましたね。

• Catalyst - Web Framework
• Shawn M Moore / Mouse - search.cpan.org

パフォーマンスチューニング

今回の改善で実は一番気を使ったのが、バックエンドのパフォーマンスです。 自分の知識・技術不足のせいもありベータ版は全体的に、ぶっちゃけかなり遅いです。 そこで、ボトルネックはDB周りとだいたいわかっていたので、以下のような対策をしました。

• DBのインデックスをとにかくはる
• mysql の設定を調整、チューニング
• テーブル定義において一部、意図的な非正規化
• 一部、select のタイミングではなく、create/update 時にキャッシュデータを作る
• ランキングなどの複雑なソートが必要になる部分については、定期的にキャッシュを作って、memcached に置く

これらによって、memcached によるキャッシュをしていない場所に関しても最大8倍 （後述するインフラ/サーバ周りの改善の影響も含む）の効果がありました。 まぁよっぽどベータ版が最適化されていなかったわけですが、ガンマ版では、 今のところうまくいっているようでよかったですね。

UI周り

jQuery Pluginの活用

さて、フロントエンドは「jQuery」を使用しています。これはベータ版と同じくなのですが、 「ボケを評価する」時にページをブロックさせるために BlockUI Plugin を使うなど、 なるたけ最小限になることを心がけつつ、Plugin を活用しています。 miyagawa さんが作っている Remedie ではかなり多くの jQuery Plugin を使っていて、 「おお、こんな Plugin あるんだ」と参考にさせていただきました。

jQuery UI ベース

また、今回の UI は実験的に「jQuery UI」をベースとしました。 この jQuery UI は名前の通り jQuery を使ったユーザインターフェースのフレームワークなのですが、 CSS セットが用意されているのが今回導入したきっかけです。 これを使えば、角丸のアイコン付きボタンなんてものが、比較的簡単に作れてかつ、 HTML・CSS はそのままでテーマを切り替えることが可能です。 ただ、その反面、ユーザサイドのブラウザによるレンダリングに負荷がかかってしまったり、 IE では角丸が効かなかったりと弊害もあるので、その辺りは今後評価していきたいです。

• Plugins | jQuery Plugins
• jQuery UI - Home

インフラ・サーバ

Amazon ec2 から自宅サーバへ移行

これまでサーバは Amazon ec2 上で動かしていたのですが、今回ガンマ版公開にあわせて、 自宅サーバに全て移行させました。その一番の理由がコストです。 ベータ版では、ec2 のインスタンスを3つ立ち上げ、 「フロント - アプリ - DB」という割と mod_perl を使う上で一般的な構成にしていました。 ec2 のインスタンスは一番安いものを24時間常時起動させておくと一つ当たり最低でも「約7,200円」月額でかかります。 それが3つとなると、「21,600円」。ベータ版では一部、CPUが2コアのものを使っていたので、 回線使用料金なども含めてそれよりももっと高額になります。 これが他のメリットとあわせて安いとみるか高いとみるかは状況によりけりですが、 自分は「高い」との判断をしました。その代わりとして、 一番の選択肢にあたったのが自宅サーバ環境での運用です。 そもそも、個人的な他のサービスを自宅サーバで動かしていることもあり、 回線、ルータ、UPS等のインフラはそこそこのものが揃っているので、 追加でかかる費用が、サーバ用マシン本体の値段及び電気代くらいになります。 その辺りを加味すると自宅サーバでも以前と同じもしくはそれ以上のスペックで、 さらに「安く」運営できるのです。 ちなみに、ボケてで投稿されたお題の写真は Amazon S3 に置いて配信していたのですが、 こちら S3 は、もろもろ計算すると ec2 とは違い「安い」ので、 ガンマ版でも継続して使っています。

充実してきた自宅サーバルーム（納戸）の様子

仮想化 + USBメモリブート + iSCSI

さて、ec2 では3つインスタンスを立ち上げていたわけですが、 かといって自宅環境に3つのマシンを置くようなことはせずに、 OSを仮想化させてなるべく少ないマシン、そして省電力でまかなえるようにしました。 いろいろと調査及び検証を行った結果できたこのサーバ周りの仕掛け。結構面白いことになっています。 最初に、簡単に構成をまとめると以下の通りです。

• iSCSI ターゲットサーバ用マシン
  • RAIDで組んだ1TBのディスク

• VMware ESXi 用マシン
  • USBメモリで VMware ESXi を起動、ディスクレス
  • WebとDB用の2つの VM をiSCSI上に構築

今回追加したマシンはこの2つで、iSCSI ターゲット用マシンは「ボケて」以外でも使えるので、 実質的に「ボケて」用というのは「1.x」台のマシンと言えます。

では、簡単にひとつずつ解説してみます。

まず、仮想化についてですが、CPU の高速化・マルチコア化、大容量メモリの値下がりによって、 1台のマシンに複数の VM を起動させてパフォーマンスを発揮させることが可能になったことで、 特に自宅サーバで運用する場合においてかなり有効だと思います。 その仮想化環境として今回、使用したのが、「VMware ESXi 3.5」です。 ちょうどいいタイミングで citrix 社の「XenServer」が3月末に無償化したので、 興味を持ってそれを使おうと思ったのですが、 どうも調べていくうちに「VMware ESXi」も無償であり、かつ情報も豊富ということがわかったので、 結果的に VMware を使うことにしました。 XenServer の方が機能が多くて管理用のソフトウェアも使いやすいのですが、 反面、複雑でわかりにくいというのも XenServer を却下した大きな理由です。

で、「VMware ESXi」を使って1つのマシンに2つの OS を立ち上げているわけですが、 このマシン自体は USBメモリ で起動しています。 どういうことかと言うと、 VMware 自体をブート可能な状態で普通の USBメモリ にインストールして、 ハードディスクなどその他記憶領域を持たないボケて用のマシンにぶっさしているのです。

安売りしていたdellのサーバにUSBメモリをさしている

「それじゃあ、VMの記憶領域はどうなるの？」ということになりますが、そこで iSCSI が登場します。 iSCSI は ネットワーク経由で iSCSIターゲット上の 記憶領域を他のマシンからマウントすることができる 技術で、NFS 等と比べてリード/ライトの速度が速いことが特徴です。 「VMware ESXi」では iSCSI をサポートしているので、別に立てた iSCSI ターゲットマシンの、 一部ハードディスクを利用してその上に OS のデータを置くことができるのです。

こうすると何が嬉しいかと言うと、 1台の iSCSIターゲットの記憶領域を複数台のディスクレスのPCから利用することで、 省電力化が図れるのではないかと思っています。 パフォーマンスも今のところ問題なく、I/O のスペックが影響する DB も機能しています。 今のところボケて用マシン1台が iSCSI を利用しているだけですが、 今後サーバを立てたいという時には、最低限、マザーボード・CPU・メモリ・電源があればいいので、 安上がりかつ電力消費も少なくなるというのが嬉しいところです。

• VMware ESXi、無償ダウンロード、サーバ仮想化を実現するハイパーバイザー - VMware

apache から lighttpd へ

最後に、ベータ版からガンマ版で大きく変わった点として、 ウェブサーバを apache から lighttpd にしたことが挙げられます。 今まで「apache 使っとけばいいだろ」と思って lighttpd に全く触れてなかったのですが、 すすめられて使ってみたらすごいいい感じです。 lighttpd + fastcgi の何がいいって、パフォーマンスのこともさることながら、 アプリケーションの切り分けが可能なことです。 もしかしてできるかもしれませんが、apache + mod_perl で運営していた時には、 複数のアプリケーションを1つの apache で動かす場合に、同じメモリ上にモジュールを読み込むために、 メモリ効率が悪かったり、複数アプリ間でモジュールの衝突が起こる可能性があったりしました。 lighttpd + fastcgi の場合はアプリごとに起動なので、上記の問題も解決して、 プロセス数の調整なども個別にでき、さらに静的コンテンツのサーブも面倒をみてくれます。 これも少ないマシンで複数のアプリケーションを立ち上げたいという自宅サーバ環境にとっては、 嬉しい点です。

• lighttpd fly light

まとめ

エントリーとしてずいぶんと長くなってしまいましたが、 その分いろいろと技術的な試みをしてみて、その点今回は非常に楽しい開発・環境構築になりました。 しかし、こうした技術はいいコンセプト・機能があってこそのもの。 ガンマ版になった「ボケて」。次のバージョンアップも含めてこれからよりいいものにしていきたいです。

• ボケて（bokete）: 写真で一言ボケるお笑いウェブサービス

「ボケて」サイト上ではユーザーがお題となる写真を設定でき、 それに対してテキストでボケを投稿していくのですが、そのボケの数が現時点で40万以上。 これらの中から厳選された、優秀な（？）約800のボケが、本の中に掲載されています。 見本誌を手に入れて眺めているのですが、 ほんとそのまま「ボケて」のお題及びボケが載っていてなかなか笑えます。 ちなみに、お題の写真に関しては、「CC by アトリビュート」が設定された Flickr の写真もしくは、投稿者の仕様許諾を受けたものになります。

このように紙面上はほとんどボケばっかなのですが、個人的にも知りたかったヘビーユーザー＝職人さん達のインタビューや、ピエール瀧さんに特別協力してもらって作った「ピエール瀧賞」などもあり、 こちらも見ものです。

初版で刷った部数が半端じゃない数になっていてびっくりしているのですが、 それだけ多くのコンビニや書店で目にすることができると思うので、よろしければ、是非ご購入ください。 600円ですよ。

今回の出版にあたり、俺はほとんどノータッチで、鎌団子がかなり奮闘してくれました。 kamadango++ また、今のところボケては「ベータ」という接尾語がついてますが、 これを「ガンマ」にすべく少し前から、システムを書き直しつつ、機能の追加をしています。 そちらもお楽しみに。