作成日

7 September 2010

その他の必要条件

Adobe Creative Suite 5 Web Premium

SUUMO (スーモ) AIR アプリケーション (以下 SUUMO AIR アプリ) は、不動産物件を簡単に探せるデスクトップ常駐型のツールとして開発された Adobe® AIR® アプリケーションだ。SUUMO のつぶやきがリアルタイムで表示されたり、SUUMO のキャラクターを生かしたかわいい電卓機能も搭載されている。

このアプリケーションの開発は、より効果的・効率的な開発を目指し、新しいワークフローで行われた。結果、短期間でイメージ通りの仕上がりを実現する事ができたという。また、その際、Adobe® Creative Suite® 5 製品が色々な点で役立ったそうだ。そこで、実際に開発を担当したリクルートメディアテクノロジーラボの鈴木拓生氏に詳しい話を伺ってみた。

インタビューした人:鈴木 拓生氏

1979年11月 千葉県生まれ2004年3月 慶応義塾大学院 政策メディア研究科卒業デザイン会社、フリーランスを経て2007年より、株式会社リクルートの実証・研究機関であるメディアテクノロ ジーラボにて研究員として活動中。メディアテクノロジーラボでは主にCREYLE:クレイル DESIGN SHOWCASE マッシュアップアワードの運営等を担当。

スーモが Twitter で呟いているところ。SUUMO (スーモ) AIR アプリケーションは、以下の URL からダウンロード可能 (http://suumo.jp/edit/air/

新しい開発スタイルへのチャレンジ

鈴木氏によると、「SUUMO AIR アプリの開発は、様々な変更に対し柔軟な対応ができたプロジェクトだったことが特徴の 1 つ」とのことだ。実際に、プロジェクト後半でも大きなデザイン変更や要件変更が行われたそうだ。その一方で、「これまでの 30 % 以上は効率良く開発できた」という。これはどのように実現されたのか。

そのポイントとして、鈴木氏は以下の 2 つを挙げた。まず、"企画→デザイン→開発" のような明確なフェーズ分けをしないようにプロジェクトを進めた事。「最初に仕様を固めて、出来上がってから『あれっ?』という事の無いように、できるだけフェーズレスにしたかった」のだそうだ。もう 1 つのポイントは、プロジェクトを通じてメンバー全員が関わるようにした事。「企画者、デザイナー、開発者それぞれが常に最新のイメージを理解している事で、コミュニケーションが円滑になり作業の質が高まった」

では、このようなプロジェクト進行は、どうやって可能になったのだろうか?鍵となったのは AIR アプリの共有だ。

チーム内では、プロジェクト初期から終了まで、実際に動くもの(AIR アプリ)を間にして、コミュニケーションを行った。「実際に画面内で大きさ、機能、使い方を確認する事で、早い段階から具体的なイメージが共有され、最後までブレの無い開発を行う事ができた」 と鈴木氏は語る。また、各担当が常に AIR アプリを向いて作業を行う事で、プロジェクトが一貫した行程の繰り返しとなった。「企画者は動くものを見てコメント、デザイナーは動くものを見て Photoshop® 作業、開発者は新しい要件や素材を元に動くものを修正」 という分担だ。そうしてブラッシュアップを重ねた最後のバージョンが公開されたアプリとなる。

鍵はもう 1 つ。初期プロトからリリースビルドまで、開発者が動くものを短期間で提供し続けたこと。それにより AIR アプリを挟んだコミュニケーションが現実的で効果的なものとなった。企画側からは、アイデアをモックアップとして確認できるまでのスピードが早かったため、イメージを形にまとめるプロセスを的確にかつ短期間で行う事ができたと評価されたそうだ。

短期間でのリリースを支えたのは、状況に応じた技術やツールの選択、デザインツールと開発ツールの相性の良さ、幾つかのベストプラクティスの活用、そして Adobe CS5 から新しく登場した Flash® Catalyst™ だったという。以下、具体的なプロジェクト中の作業について、鈴木氏のコメントを元に紹介しよう。

短期間リリースの実現と Adobe CS5

SUUMO AIR アプリは、物件の検索機能をベースに企画が進められた。その後、デスクトップ常駐アプリである事を考慮して、Twitter と電卓機能が追加されることとなる。まだ具体的な形の見えなかったこの段階で活躍したのが Flash Catalyst だ。

Flash Catalyst を使ったプロト作成

Flash Catalyst は CS5 と同時に発売された新しいツールだ。デザイン機能に加えて、コードを書かずに簡単にインタラクションを実現できるという特徴を持っている。まずは、アプリの大きさ、画面内要素、操作方法を確認するため、Flash Catalyst を使用してワイヤーフレームが作成された。

「Flash Catalyst を使うと、見た目も動きも作れるので、モック制作が 1 つのツールだけで完結できます。ワイヤーフレームコンポーネントを利用すれば、 アプリのサイズから挙動の検証まで 1 日の作業量でできてしまう。Flash Catalyst の生産性の良さで、何パターンものモックアップを作って仕様を詰めるという作業を、短期間で行う事ができました。実際の AIR アプリをデスクトップ上で動かしながら確認できるのが、とても効果的でした」

ワイヤーフレームを制作中の Flash Catalyst 画面と Flash Catalyst で開発した AIR アプリのスクリーンショット。Flash Catalyst にはワイヤーフレーム作成用のコンポーネントが用意されている。

Flash Catalyst が PSD ファイルの読み込みをサポートするため、Photoshop で作成されたデザインを、ワイヤーフレームコンポーネントに適用する事ができた。アプリの世界観をも実際に動くアプリとして、この段階で確認できる点が大きかったそうだ。

Flash アプリ開発を開始

モックアップを使って確認を行い、大体の仕様が見えてきたら、全体のデザインのより詳細な検討を開始した。開発側は、「この時点ではまだ HTML5 と Flash、それと Flex も想定していた」そうだ。Flash Catalyst で制作したワイヤーフレームも、サーバー側の API も、どの技術になっても対応できるよう設計が進められていた。

そこへ、デザイナーから、スーモのコミカルなキャラクターの世界観を表現したいという提案が出される。デザイン案を見ながら細かく詰めていく過程で、オーサリング環境として Flash® Professional CS5 が選択された。「複雑なアニメーションになったので Flex では難しいかなと。また、細かい制御が必要な事から、1 つ 1 つ JavaScript で実装したら工数が相当かかるだろうと」

Flash Professional のタイムライン上に素材を配置。高度なアニメーションのオーサリング環境として最適だと判断した。

Flash Professional でアプリを作る際、Flash Catalyst で使っていた PSD ファイルがそのまま利用可能だった。「デザイナーに作業を依頼する手間を省けたため、すぐにアニメーションの無い状態のアプリを作成して、AIR ファイルとして共有することができました」。開発側は Flash Catalyst → Flash Professional と環境が移行したが、Photoshop との連携の良さから、プロジェクト全体としては移行の手間を効率よく吸収することができた。

Flash Professional & Flash Builder による作業の分離

その後、アニメーションの追加と、サーバーとの結合テストを行い、最初のフル機能 AIR アプリが完成する。アニメーションは全てタイムライン上で作成したが、ActionScript は stop() 以外はタイムラインに書かず、外部 AS ファイルに記述した。このように、「見た目とロジックを分離することで、修正/変更を行い易い構造に」

ActionScript のコーディングには Flash® Builder™ を使用した。「やっぱり機能が豊富なので開発が楽になるし。Flash Builder 4 から、Flash Professional と行ったり来たりしなくても FLA ファイルのパブリッシュが可能になった事で、生産性が向上しました」

Flash Builder 4 の新機能 Flash プロジェクト。Flash Builder からでも ctrl+enter (Mac では cmd+enter) を押すと、Flash Professional が自動的に前面に表示され FLA のプレビューが行える。

最初に書いた AS ファイルは、1 クラスが 1,000 行を超えるものもあった。これを後から、テストし易いようにリファクタリングを行い、小さなクラスに分割した。このように、設計に時間をかけずとりあえず動くものを作ったことにも、「あくまでリリース優先」の考え方を見てとることができる。

アプリケーションのブラッシュアップ

ひとまず AIR アプリが完成した後も、動作確認による企画やデザインのフィードバックを反映しては、新しい AIR アプリを共有する、という行程を繰り返して、アプリの完成度を高めていった。

Photshop と Flash Catalyst/Flash Professional の連携の良さが、プロジェクトを通して役に立った。「特に今回のケースのようにデザインと開発が並列に行われる場合、 作業中にデザイン側の修正が多々発生するのですが、レイヤー構造を同じにして置く事で Flash Catalyst でも Flash Professional でも、修正があったレイヤーのグラフィックパーツのみを差し替えるという方法を取る事が出来ました」

Flash Professioanl に PSD ファイルを読み込んでいるところ。読み込んだ PSD は各オブジェクトの状態を保持しながら読み込まれる

また、Flash Professioanl でアプリを一通り作り終えた後に、デザイン側からサイズの大幅な変更を依頼されたこともあった。「ちゃんと早い段階で大きさも確認してたはずなんですけど。画面サイズによっては、やっぱり大きすぎるということになって。Photoshop のデータを Flash 側でアウトライン化してあったので、作業は開発側だけの対応で済みました。この件については、SVG + JavaScript を選択してたら大変だったでしょうね」

あらかじめ多少のリサイズが行われることは想定しており、使い道によって PSD 形式で読み込むグラフィックパーツと EPS 形式で読み込むグラフィックパーツに分けていた。これが作業の大きな助けとなった。

アニメーションが絡む部分のパーツに関しては、EPS 形式で読み込むか、Flash Pro で描画(左)。アニメーションが絡まない箇所 (ボタン等) に関しては、PSD 形式でリサイズしたものを読み込み、ムービークリップ内のシンボルのグラフィックを差し替え(右)

「あとは、公開 2 週間前になって、企画側から土地のデータも扱わないとって言われたりとか(笑)」、ぎりぎりまで様々な調整が続けられた。「AIR アプリは書出しと配布が簡単なので、最後まで助かってました」

次のプロジェクトに向けて

Adobe CS5 を本格的に使用しての感想は、企画者—デザイナー—開発者間のワークフローが本当に大きく変わった事、それから Flash Professional と Flash Builder の連携がとにかく便利だったとのこと。初めて利用した Flash Catalyst については、「全体をまとめる人が、難しいツールを使わなくても世界観を構築できる」という点が、特に気に入ったようだ。曰く、「普段 Powerpoint を使っているような人たちも積極的に使っていいんじゃないでしょうか」

新しいワークフローの必要性については、「スーモの案件は社内案件なので特殊なのですが」と前置きした上で、「公開したら終わりではなく、公開後も、修正や最適化を行う。そうすると運用まで含めてプロジェクトを考えないといけない。結局、いつでも企画に合わせて短期間で柔軟に対応が行えることが大事になってくる」と、これからも前向きに取り組む姿勢のようだ。制作後のことも考える、は今後の重要なトレンドになりそうだ。

最後に、プロジェクトの他のメンバーのコメントを紹介したい。

企画担当者「イメージしてから具体的なモックアップとして確認する事ができるまでのスピードが早いので、的確なフィードバックをモックアップを確認しながら即時行う事が出来、当初のイメージを形にしていくプロセスをスピード感をもって行う事ができました。」

デザイナー「デスクトップに常駐していただくガジェットなので、スーモファンの方々にペットのようにかわいがってもらえるよう、楽しめる演出とデザインを心掛けました。Flashの高度なアニメーションはスーモのコミカルなキャラクターの世界観を表現するのに役立ちました。使い慣れたAdobeのデザインツールとの親和性も高く、開発されたアプリも当初のイメージ通りの仕上がりでした。」