カテゴリー別アーカイブ: Web(System)

iPhoneで楽曲が30秒間試聴出来るサービス「30sec.fm」をリリースしました。 iPhoneに標準搭載されているiTunes Storeアプリと違い、Wi-Fi環境の無い場所からも利用出来る点が大きな特徴です。 （iPhoneのブラウザから http://30sec.fm にアクセスしてご利用ください。） …実はコレ、新サービスではなく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秒 　　↓ … 続きを読む →