Beautiflリニューアルのお知らせ 〜HTML5対応やfacebookページ開設など

書籍「ActionScript Beautifl Code」の刊行に伴い、「Beautifl」をリニューアルしましたのでお知らせします。Beautiflはwonderfl build flash onlineに投稿されたユーザーの力作をカテゴリー別に分類したActionScriptのギャラリーサイトです。Flashの表現例を探したりインスピレーションを得るのに便利なサイト、を目標に2009年8月から運営してきました。

今回のリニューアルの目標にしたのは「HTML5対応」。リニューアルしたポイントをいくつか紹介します。

マークアップ

もともとBeautiflはXHTML+JavaScriptによるFlashみたいなインタラクションのあるサイトでしたが、時代の流れに応じてHTML5+CSS3+JavaScriptのサイトに変更しました。HTML5に関してはマークアップレベルの話でsectionとかasideとかの新しいタグを使っています。

CSS3は画像を用意する必要がなく楽に実装できるのでグラデーションや角丸処理にいくつか使ってます。ただし、CSS3でグラデーションやドロップシャドウを利用すると描画負荷が高くなるので（これはFlashのGraphicsと同じ）、描画更新の高い部分はラスタライズした画像を使っています。

JavaScriptの工夫点としてこだわったのはカスタムスクロールバーのスムーズスクロールの演出です。スムーズスクロールはFlashの世界ではごく当たり前に実装されている演出のテクニックで、スクロールバーが動かすと加減速がついてコンテンツがスクロールするというものです。スムーズスクロールのためにはJavaScriptの最適化が必要なのですが、もともとブラウザごとのJavaScript実行速度に大きな開きがあり調整に苦労しました。

JavaScriptの実行速度がSafari 5、Firefox 4、Chromeが最速で、ついでIE9、大きく離れてFirefox3.6、ついでIE8という感じでした。プログレッシブエンハンスメントということで、最新ブラウザ（Safari 5やFirefox 4、Chromeの最新版、IE9）でのみスムーズスクロールが有効になるようにしています。

検索機能

Appleのサイトなどで実装されているインクリメンタルサーチをつけました。検索 バーに単語を入力すると、候補がつぎつぎと表示されるという仕組みです。このあたりはJavaScriptとサーバーサイド側(PHP+MySQL)で実装しました。実装方法はいろんなところで紹介されているので、特記するまでもないでしょうか。

プレビュー表示

今まで別窓で展開していたプレビュー表示を、サイト内で表示するようにしました。wonderflには幸いブログパーツが提供されていたので、それを動的に表示するようにしています。よりサクサク作品を見て回れるようになったと思います。

facebookページの開設

Beautiflユーザーからの提案でfacebookにページを開設しました。「Like!」ボタンをクリックしてもられればfacebookで新作登録時に通知されるようになります。

• http://www.facebook.com/beautifl

また作品はfacebook上から直接再生できるようになっています。再生ボタンをクリックするだけでサクっとその場で確認できます。これはRSSにYahoo!が提唱するMEDIA RSSというパラメーターを加えることで実装できました。

その他の改善点

• jQuery 1.6 対応
• 作品に「NEW」や「PICKS」などのラベルを表示
• ページングの不具合修正（ユーザーからの報告）

サービスの運営方針としてユーザーからの意見は出来る限り反映していこうというスタンスでやっていまして、今回のリニューアルも多くはユーザーからの提案のものでした。今後も同じスタンスで運営していこうと考えてますので、ご要望などがあればtwitterを通してお気軽にコメントいただければと思います。それでは引き続きBeautiflをよろしくお願いします。

おまけ：今回のリニューアルに伴い管理ツールとして使っているBeautifl登録用wonderflブラウザ(Adobe AIR製)をFlex 4.5にアップデートしました。Flash Platformを使えば自前で管理ツールを作れるので便利です。