制作事例:クリップボードアプリケーション

大手化粧品メーカーのプロモーションサイト内の主要コンテンツである「クリップボードアプリケーション」の制作を担当しました。

機能概要

一覧に表示されるコンテンツをドラッグ&ドロップでボード内の任意の位置に配置できます。
配置したコンテンツは、サイズ変更、回転、移動、並び順の変更といった操作が可能になっており、様々なコンテンツを組み合わせて利用者独自のクリップボードが作成できます。
作成途中に保存して、後から再編集することも可能です。

技術的なポイント

クライアント側にFLEX(Flash)を利用したRIAアプリケーションです。

コンテンツの操作

一覧に表示しているコンテンツはサムネイル画像なので、ドラッグが開始された時点で本来のコンテンツをダウンロードして表示する実装となっています。
コンテンツはFlexのImageコンポーネントで管理しています。Imageコンポーネントは標準では左上(座標0,0)を軸に回転するようになっていますが、本アプリではコンテンツの中心を軸に回転するように改良されており、直感的な操作が可能となっています。
さらにコンテンツが回転していてもドラッグによるサイズ変更が可能になっています。

起動の最適化

アプリケーションとコンテンツのサイズは合計で4.5MBになりますが、起動時間が短くなるように最適化しています。
具体的には、起動時は必要最小限のサムネイルだけを読み込み、その後は、スクロール・画面切り替え・ドラッグ&ドロップなどのイベントをトリガとして、オンデマンド(必要な時に必要な分だけ)で取得します。さらに、一度取得したコンテンツはキャッシュして再利用します。