…実はコレ、新サービスではなく2010年にリリースした「Music Preview 3G」をリニューアルしたものですｗ（当時の記事はコチラ）
なぜ作り直したのかというと、Music Preview 3Gには以下のような改善の余地があったからなのでした。

1.UIの改善

旧サイトは機能がシンプルな割に、「タッチすれば音楽が再生される」という主機能を説明するデザインが出来ておらず、ユーザを迷わせてしまう可能性がありました。
そこで新サイトでは、曲のアートワークに再生ボタンの画像を重ねて、そこに触れれば再生される事が直感的に分かるデザインにしました。
更にjQuery Mobileを採用した事で、使い心地（滑らかなアニメーション等）が改善したのも個人的には大きなポイントですｗ

2.処理速度の改善

旧サイトでは、iPhoneの性能が追いつかずにスクロールの途中でひっかかるような感覚がありました。
これには、HTML5の<audio>タグの使い方が大きく影響していたようです。

旧サイト（Music Preview 3G）の場合

このサービスは検索結果の行をタッチするとその曲が再生され始める仕組みなのですが、Music Preview 3Gでは「曲:audio要素＝n:n」の関係になっています。
つまり、検索結果の数だけaudio要素が必要なわけです。

新サイト（30sec.fm）の場合

30sec.fmでは「曲:audio要素＝n:1」の関係になっています。
つまり、検索結果が何件あろうと、一つのaudio要素を全曲で共有するような仕組みになっています。
この改善策を採った結果、新サイトではスルスルとスクロールしてくれるようになりました。

どうやらaudio要素は「再生していなくても配置しているだけで負荷がかかる」みたいなので、極力audio要素の数を抑えるのが動作を重くしないコツのようです。

3.読み込み時間の改善

スマートフォンはPCに比べて回線速度が遅いため、その読み込みに時間がかかる傾向があります。
そこで、とり～たのチームメイトでモバイル向けウェブサービスに詳しい@BoBppくんに最適化をお願いしました。

詳細は正直よく分かっていないのですがｗ、Closure Compilerを使って「CSSとJavaScriptの難読化・結合」をしてくれたみたいです。
その結果、ページの表示にかかる時間が以下のように改善しました。
　最適化無し：約10.8秒
　　↓
　最適化有り：約7.4秒
　（手動で3回計測した時間の平均値）

と、いうわけで

もともとは僕がTSUTAYAにCDを借りに行った時に気になった曲を聞くために作ったサービスですが、ぜひ皆さんにも使って頂ければ幸いです！
http://30sec.fm

雰囲気

良くも悪くもカフェの雰囲気。
誰かがギャーギャー騒いでいる訳では無いけれど、音楽や人の話し声が結構大きくてあまり落ち着けませんでした。
まぁ、こういう雰囲気だと話もしやすいですよね…。

（秋葉原制作所は各席が簡易パーティションで区切られていて、小企業のオフィスのような無骨な部屋になっています。あちらには全くオシャレ感は無いものの、集中は出来ます。）

BGM

割とBGMの音量が大きめ。人によっては耳障りな音量かもしれません。
ボーカル無しのアコースティック曲や、レトロな雰囲気の洋楽が多かった気がします。

（秋葉原制作所でも謎のアニソン風音楽が流れていたものの、凄く小さな音量なので邪魔になりませんでした。）

椅子

一番不満なのが椅子でした。
仮にも”外オフィス”として売り込んでいる施設なのに、なぜ長時間座りにくい椅子が設置されているのか…。
硬い上に、僕が座った椅子は若干グラついていて、あまり落ち着けませんでした。

（秋葉原制作所の方はまともなオフィスチェアが置いてあったので、椅子にストレスを感じたことはありませんでした。）

客層

オープン初日（金曜日）の20時頃の様子ですが、人口密度はギリギリ圧迫感を感じない程度でした（この記事の一番上の写真の状態）。
客層は20代中心ですが、たまに40〜50代のおっちゃんが混じってます。
男女比は9:1で男が多い。

（秋葉原制作所の人口密度は、せいぜい多くても上の写真の半分くらいの時しか見たことがありません。イベント前は多くなるのかな？簡易パーティションで周囲の人の顔が見えないので、年代や男女比は気にした事すら無いです。）

フリードリンク

コーヒーやコーラ、お茶などが飲み放題になっていて、セルフサービスで汲みに行く形になってました。

（秋葉原制作所にもフリードリンクはあります。）

料金

会員制で、入会金が150円。使用料金は30分毎に190円ずつ課金されます。
オープン直後の今だけかもしれませんが、公式サイトで仮会員登録をしてから店で本登録をすると、30分無料券がもらえました。
詳細は公式サイトを参照ください。

（秋葉原制作所の料金（15分100円）とほぼ同じ価格帯ですね。3時間パックはTHE TERMINALが1050円、秋葉原制作所が1200円。）

今後も使うかどうか

あまり良い印象のことを書いてきませんでしたが、実は結構気に入っています。
フリードリンクで、無線LANとコンセントが揃っていて、値段も高くなく、更に内装もオシャレだなんて…これだけ聞いたら最高です（笑）。
まだオープンしたばかりなので今後洗練されることを期待して、次回は1〜2ヶ月後くらいに行ってみます。

Spaces

Snow Leopard時代には標準機能として搭載されていたSpaces機能が削除されて、Mission Control機能に置き換わってしまいました。
Spacesでは出来た複数行の画面の並び（2×2とか）が実現出来なくて、1行の並び（上のスクリーンショットでは1×4）しか設定できないぽい…
画面移動に矢印キーの左右を連打しないといけなくなって、少し面倒。

Visor

ホットキーで素早くターミナルを呼び出せるツール。
Lionインストール直後、ホームフォルダの”互換性のないソフトウェア”フォルダに移動されてました。
かなり使ってたので、正直ちょっとキツイ。
…とか思ってたら「TotalTerminal」に改名してLion対応されてた！ありがたやー。

Happy Hacking Keyboard Professional JP

アプリじゃなくて周辺機器だけど、ドライバが対応していないらしい。
日本語配列キーボードなのに英字配列キーボードとして認識されてて超不便ｗ
公式によると「ドライバ・ソフトウェアの対応予定時期は、2011年8月初旬です。」だそうで。。
（2011.07.21 15:00 追記）
コメント欄で教えて頂いたのですが、「 Mac OS X v10.7（Lion) Preview4対応版」のドライバが存在するようです。
私の環境ではこのバージョンで問題なく動作しているようなので、お困りの方は自己責任でお試しください。
Mac用ドライバ （HHKB Professionalシリーズ専用）
（mizukiさん、ご助言ありがとうございます！）

今のところ、妙な動作を見つけたのは上記のアプリだけ。
最初PhotoshopCS3の起動時に画面が固まって焦ったけれど、すぐ勝手に出てきたJavaランタイムのアップデートを実行したらPhotoshopCS3も使える状態になりました。
（2011.07.22 12:00 追記）
全てのAdobe製品が完全に動作する訳ではないみたいです。
Mac OS X 10.7 Lion で確認されている問題

多少の問題はあるけれど、全体にiOSっぽさがあって気持ち良い（端までスクロールしたときに”ポヨンッ”と弾んだりｗ）ので、慣れるまで頑張ってみます！

とりあえず、Macのターミナルから「heroku restart –app ***」（***の箇所はアプリケーション名）を実行すると治りました。
staging環境、もしくは無料ユーザのプロセスは一定時間後に停止するような仕組みになってんのかなー…。

まず、乗り換え前のQuicksilverについて気に入っているポイントを3点挙げてみました。

Quicksilverのお気に入りポイント

英語名のアプリケーション名で起動できる

日本語環境のMacOSでは「ターミナル」「システム環境設定」のように日本語名が付与されているアプリケーションが少なくありません。
でも、日本語は「入力 → 変換 → 確定」という手順を踏んで入力することになるので、これが結構煩わしいのです。
その点、Quicksilverでは英語名でアクセスできるので、ターミナルなら「terminal」、システム環境設定なら「system〜」と入力するだけでアプリケーションにアクセスできるので、とっても楽！

見た目がカッコイイ

Quicksilverにはカスタムテーマ機能があって、特に Showcase というテーマがお気に入り…だったのだけれど、MacOSをSnow Leopardにアップデートしたあたりから動作しなくなったので、泣く泣くデフォルトのテーマを使ってました。。
デフォルトでも十分カッコイイんですけどね。
※上のスクリーンショットはデフォルトのテーマのものです。

Large Type機能

ランチャー上で「.」（ドット）を入力後に文字を入力してreturnキーを押すと、入力した文字をでかでかと表示してくれる機能が「Large Type」です。
下のスクリーンショットのように表示されます。

こんな風に「あの漢字どうやって書くんだったかなー」みたいなシーンで活躍してました。

んで、今度はAlfredについて。

Alfredのお気に入りポイント

英語名のアプリケーション名で起動できる

理由は上記のQuicksilverと同様。
ただし、こちらは日本語名でアプリケーションにアクセスしたい場合は、そのように設定で切り替えられる点でQuicksilverより優位です。

見た目がそこそこキレイ

スッキリしたデザインで好み。
ただ、Quicksilverのようなカスタムテーマ機能は無いっぽい？

サクサク軽快に動作する

体感速度ですが、Quicksilverと比べて反応速度が倍近く高速な気がします。
今のところQuicksilverのようなCPU使用率100%超えの暴走も起きていません。

唯一、「Large Type」機能が使えない点が僕にとってのAlfredのデメリットなのですが、ランチャー上に入力した文字そのものが結構な大きさなので、しばらくはこの文字サイズで我慢してみます。
何より、開発の終了したQuicksilverと違ってAlfredは絶賛開発中なので、今後の機能拡張に期待！です。

Alfredはまだベータリリースですが、下記のページからダウンロードできるので、ご興味のある方は自己責任でお試しくださいー。
Alfred App
http://www.alfredapp.com/

ちなみに、Mac OS Xにデフォルトで付属しているランチャーっぽいアプリケーション「Spotlight」は、英語名でアプリケーションにアクセス出来ない上、「最初に押したキーが勝手に確定される」という不具合があるので使う気が起きません（苦笑）。
※スクリーンショットは「システム」と入力しようとしたら最初のキーが勝手に確定されて「sいすてむ」になってしまっている悲しい図。

もともと、iPhoneにはiTunes Storeを利用するためのアプリがプリインストールされていて、そのアプリ上で楽曲の試聴をすることが出来ます。
しかし、このiTunes Storeってやつは無線LAN環境でしか接続出来ない制約があるために、外出先では使えないのです！
CDレンタル屋に行った時などは目に入った曲を気軽に試聴したくなるのですが、その制約のために無線LAN環境の無いお店では試聴が出来ませんでした。

そこで、楽曲を3G回線経由でも試聴出来るようにしたのがこのサービスです。
これなら、CDショップ等で気になる曲名やアーティスト名が目に入った時、サクッと試聴出来ちゃいます！
※楽曲データベースにはiTunes StoreのAPIを使用しているので、iTunes Storeに登録されていない楽曲は試聴できません。


iPhoneをお持ちで音楽好きの方は、ぜひiPhone片手にCDショップ等で使ってみてくださいー。

申込むと、こんな箱とCDを渡されます。
たぶん使い回しなので、箱はそれなりに汚れてます。。。

※ビックカメラの販売員の方によると、このデバイスにはMacOS X10.6.3（僕も使っているOS）上で使用すると不定期に接続が切れてしまう不具合があるそうです。
ただし、こちらのエントリを参考に対処すると問題は出ませんでした。
［解決］MW-U2510(BDSS01/W) + MAC OS X 10.6.3で不具合 by 記憶と忘却の部屋blog

WiMAXで気になっていた点は以下の2点。

・どの程度の速度が出るのか？
・駅の近くなら大抵は接続出来るんだろうけど、自宅でも繋がるのか？

自宅周辺で速度を測った結果は以下。
（※自宅は練馬区・駅から早足で歩いて10分くらいの場所）

自宅でいつもPCを設置してるデスクの上（窓から2mくらいの場所）：2〜3Mbps
自宅の窓際：4〜5Mbps
駅から徒歩3分くらいのファーストフード店：6Mbps〜10Mbps

窓からの距離でこんなに速度が変わるとは思ってませんでした。
地下にあるカフェ等だと結構影響がありそうですねー。

思っていたより速度は出ませんでしたが、一応自宅でも使えるレベルでした。
あともう1週間くらいWiMAXを常用してみて、特に困った事が起きなければ自宅の光ファイバを解約してWiMAX一本に絞ろうと思います。

※2010/5/22追記：
WiMAX端末→MacBookPro→PlayStation3 という経路で接続すると恐ろしく遅く（100Kbpsも出てない？）、使い物にならなかったので採用は保留としました。。。

html5.js

純粋にHTML5で記述されたこのサイトをIE7で表示してみると、HTML4時代にはなかった要素（nav等）を正しく認識してくれず、すごく残念なレイアウトになっていました。
このhtml5.jsは、それらの要素をHTML4の要素に変換することで、レイアウトの崩れを修正してくれるライブラリです。
しかも、やることはhead要素内に以下の記述を追加するのみ。

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

CSSのfilterプロパティ

このサイトの背景にかかっている影のエフェクトは、画像ではなくCSS3の「box-shadow」プロパティを使用しています。
ただ、このプロパティはsafariやfirefoxでしか使えず、IEでは使用できないのです。

本当はjQueryか何かを使ってクロスブラウザの影を付けたかったのですが、やってみると影の位置がずれたりして結局うまく行きませんでした。
そこで、あまり綺麗ではないものの、一応影を付けることの出来るIEの独自拡張「filter」プロパティを使って影をつけました。

具体的なCSSのソースコードはこんな感じ。

/* CSS3 */
-webkit-box-shadow: 0 0 20px #444;
-moz-box-shadow: 0 0 20px #444;
box-shadow: 0 0 20px #444;
/* IE */
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=0,strength=10)
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=90,strength=10)
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=180,strength=10)
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=270,strength=10);

filterはbox-shadowに比べると圧倒的に汚いので、かなり色を薄めて、影の大きさも小さくして誤魔化してます（笑）。

このあと、IE6が透過PNGに対応していない問題に対してiepngfixを使って対応しようとしたんですが、なぜかうまく効いてくれなかったので、IE6対応はひとまず保留。
もうIE6は無視して良いのかなぁ？

しかしこの作業は、すんなりとは終わりませんでした。。。

blkでは、レンタルサーバに「さくらのレンタルサーバ」さんを利用させて頂いています。
私の契約しているスタンダードプランではMySQLが利用出来るのですが、昔はMySQL4しか利用出来ませんでした。
しかし、WordPressはバージョン2.9からMySQL4.1.2以降が利用できるサーバでないとインストール出来ない仕様になっていて、このままではWordPressのバージョンを2.8.xまでしか利用出来なくなってしまいます。

困り果ててググってみると、さくらでもMySQL5を利用する手段が提供されている事が判明。
ただし、そのためには今使っているデータベースをいったん削除して、新しいデータベースサーバにデータを移行する必要がありました。
※こちらの記事を参考にさせて頂きました：
さくらインターネットのレンタルサーバで WordPress 2.9 へアップグレードできない方へ – Bamboo Studio ＊ バンブースタジオ | Blog™

このblkと同じサーバでBIKEPORTというサービスも運用しているため、DBサーバの更新のためにはいったんサービスを止めなければならない事に。(- -;)
軽い気持ちで始めたリニューアル作業が、運用中のウェブサービスを停止する事態まで引き起こしてしまったのでした。
まぁ、BIKEPORTのユーザ数を考えれば日中に移行作業をやっても全然問題無いのですが、一応深夜まで待って移行しました。

そんな風にして、ツールそのものよりもインフラに四苦八苦しながらWordPressをカスタマイズしてみた感想としては…

• 癖はあるけど、WordPressちょー便利！
• でもユーザ側が覚えなければいけない事が多い気がする

全体的にすっごく高機能で、テンプレの編集も自由自在。
足りない機能はプラグインを探すか、簡単なものであれば自分で作り足せばOK。

ただ、一般的なサイトによくある「ページによって違うレイアウトで表示したい」「更新するページ毎に入力したい項目が違う」といった要望への対応は、あまり綺麗にこなせないかもしれません。

例えばこのサイトでは、「Topic」「Web(System)」といったカテゴリ毎にページレイアウトを区別して運用しています。
しかし、「Topic」（＝ニュースや日記）と「Web(System)」（＝ポートフォリオ）を同じ入口（同一の記事投稿ページ）から管理する操作には、少し抵抗を感じてしまうかもしれません。
例として、管理画面上で同じ「本文」という欄に入力した文章でも、設定したカテゴリによって表示位置が異なる事になるので、どうも直感的じゃない気がします。
コンテンツごとに別々の管理画面を表示するようなプラグインを作成すれば良いんだろうけど…そこまですると手間がかかりすぎるので嫌（笑）。

とはいえ、この違和感はただ単に僕が直近でWordPressの運用方法に馴染めていないだけなのかもしれません。
実際にWordPressを利用して運用されているウェブサイトは多数存在するはずなので、世の中では既に十分に受け入れられている文化なのでしょうね。
※もしくは、もっと直感的に複数種類のページを管理するうまい形態が存在するのか…？

4分割された画面それぞれに、検索結果のページそのものが表示される仕組みになっているのが特徴です。
このサービスはターゲットが特殊で、幅1920px以上の高解像度モニタで閲覧することを想定してます。

ネットブック等の普及で、低い解像度でも見れるように設計されたホームページがまだまだ主流なウェブの世界。
高解像度のモニタであれば、ブラウザのウィンドウを複数並べて表示しても、画面内に全ページがさくっと収まるパターンが結構あります。
そこで、通常はテキストを一覧する形で閲覧しているウェブ検索結果を、ページそのものを一覧する形で表示して、各ページの雰囲気を感じながら検索してもらおう、というコンセプトで作ってみたのがこのサービスです。

まだまだ手をかけなきゃなー。