カテゴリー別アーカイブ: Topic

第一回全国統一HTML5実技コンテストでブロンズ頂きました

jsdo.itさん主催の第一回全国統一HTML5実技コンテストにて、以下の作品がブロンズを受賞しました。
ありがとうございます。

4〜5ヶ月前にフロントエンドエンジニアになったばかりの身なので、この時期に受賞できたのはとても自信に繋がりました。
引き続き、精進してまいります!

121122
副賞として、スターマングッズの詰め合わせを頂きました。
特にバスタオルの質が良くてとても重宝しています。
でも手にはめて使うぬいぐるみとかカチューシャとか、直近で出番の無さそうな物はどうしようかな…(^^;

iPhoneから音楽を30秒間試聴できる「30sec.fm」

30sec.fm
iPhoneで楽曲が30秒間試聴出来るサービス「30sec.fm」をリリースしました。
iPhoneに標準搭載されているiTunes Storeアプリと違い、Wi-Fi環境の無い場所からも利用出来る点が大きな特徴です。
(iPhoneのブラウザから http://30sec.fm にアクセスしてご利用ください。)

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

1.UIの改善


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

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くんに最適化をお願いしました。

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

と、いうわけで

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

原宿 THE TERMINALの感想


本日2011/8/5(金)に原宿にオープンしたTHE TERMINALに行った感想です。
(少し前までコーディング作業によく利用していた秋葉原制作所との比較コメントも各項の末尾に入れています。)

雰囲気

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

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

BGM

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

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

椅子

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

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

客層

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

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

フリードリンク

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

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

料金

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

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

今後も使うかどうか

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