ADB開発中！Adobe Developer Box 開発日記　連載1) RIA開発どうやって進める？

1.はじめに

1-1.はじめに

1-1-1.RIA開発者向けツール ADB 開発中！

ADB ( Adobe Developer Box ) は、Adobe AIR で作成された RIA開発者向けのデスクトップツールであり、主に以下の機能を備えています。

• レコメンド
  RIAエンジニアに役立つ情報が記載されたサイトをレコメンド。
• RSSリーダー
  RIAエンジニア向けのフィードが登録された RSSリーダー。もちろんユーザーによるフィードの編集が可能で、たくさんのフィードを見やすく表示。
• PDF検索
  複数のPDFファイルを一発検索。インストール時に「Adobe Flex リソース」のPDFファイルが含まれています。

現在、Flex User Groupの大阪のメンバーが中心となって開発を進めており、2009年1月末ごろ Adobeよりベータ版がリリースされる予定です。画像はウィジェットモードで起動中のADBです。

1-1-2.この連載について

ADB は、RIA開発者に役立つツールになることを目標としていますが、それ以外にも、開発自体をオープンに展開し、RIA開発者の皆さんの参考になればいいなと考えています。従って、ソースコード公開！！、開発の状況もこの連載にて随時公開！！という太っ腹プロジェクトになる予定です。
連載第1回目は、RIA開発をどのように進めるかについて今回のプロジェクトの実例を交えながら紹介したいと思います。

1-2.事前に必要な知識

Webシステム開発またはWebサイト制作に従事したことがある。

2.UIドリブン開発

さて、本題ですが、RIA開発プロジェクトは、どうやって進めていくのがベストなのでしょうか？

その答えの一つとして、「Webシステム開発手法を主軸に、各フェーズにWebサイト制作のノウハウを思いっきり詰め込む」という開発スタイルが考えられます。主軸となる「従来のWebシステム開発」と、「RIA開発」との大きな違いは、後者がUI（ユーザーインターフェース）に大きなウェイトを占めているということです。
必然的にUIに重きをおいた開発になりますから、まぁ、名付けて「UIドリブン開発」って事でお願いしますね。

以下に開発の進め方を記述してゆきますが、基本的な流れはごく一般的なシステム開発フローですので、「UIドリブン」に関わりの多い、上流工程に着目して書いてゆきたいと思います。

3.要件を固める

せっかくのRIA開発ですから、クライアントの要求を、
「見た目にもかっこよく、操作性の高いUIを持つ、便利な機能」
として実現させたいのは、誰もが思うところです。

一般的なシステム開発の要件定義との違いは、「UIに関する要件」が多く出現することです。
ですから、一般的な「機能要件」と「非機能要件」の洗い出しの他に、「UI要件」の洗い出しという作業を行うようにします。このフェーズから、可能であればデザイナーとデベロッパーの両方が参加するようにし、クライアントも交えて活発に議論することが望ましいと言えるでしょう。

では、UI要件として何を検討するのかを以下に記述してみました。

UI要件として検討すべきポイント

• 画面レイアウトの検討
• ドラッグアンドドロップの使用検討
• アニメーションさせる箇所とその種類の検討
• 画面遷移の実現方法
• リスト表示のページング方法

UI要件は、機能要件と密接に関わっていますから、機能要件の内容とUI要件の内容とをうまく調整するようにします。
機能要件として、（UIの想像がつかないような）新たな機能を盛り込む場合は、しっかりとUI要件を詰める必要がありますし、反対に一般的に良くある機能、例えば、今回のプロジェクトの「RSSリーダー」のような機能は、 一般的にユーザーが体験した事のある機能ですから、UI要件は不要です（または軽いボリュームで済みます)。また、全体のバランスに対して各機能要件と各UI要件が調和しているかをよく考えるようにします。

クライアントの要求を元に、ユーザーになったつもりで機能案、UI案をたくさん検討し、それらの案の中から「要求に沿ったものであるか？」「操作性が高く、便利な機能か？」という観点で絞り込んで要件定義書を書けば、きっとよいものになるでしょう。
あと、本当に期間内に作れるかどうかの検討も忘れずに・・・

4.UI設計を行う

もちろんデザイナーが主体となってUI設計を行いますが、デベロッパーも積極的に参加するようにします。
小規模な開発の場合は、UI設計が外部設計を兼ねている場合が多いので、デザイナーの観点とデベロッパーの観点の双方からチェックし、仕上げてゆきます。

UI設計を行う際には、実装時のリスクをしっかり検討するようにします。以下のようなコンポーネント制作難易度の判断は必須です。

• [簡単] Flex 標準のコンポーネントをそのまま利用できる。
• [簡単] スキン、スタイルを設定するだけで大丈夫。
• [ちょい難] Flex 標準のコンポーネントを拡張すれば大丈夫。
• [難しい] 一からコンポーネントを作る。

複雑なものを作ることに快感を覚える気持ちもよくわかりますが、あくまで主軸はUIに置きます。思いっきり頑張ったらカスタムコンポーネントを作る事が出来るかもしれませんが、よく検討すると、違ったUIのアプローチで同じことが簡単に実現できるかもしれません。よく検討するようにしましょう。

また、UI設計から実際にパーツを切り出して実装するための方法はいくつかありますので、デザイナーとデベロッパーとでよく協議して決定しておくようにします。

デザイナーからデベロッパーに提供するポイント

• 画像ファイルを切り出して提供
• UIMovieClip クラスを利用して、コンポーネントとして提供
• Skin として提供
• Style （CSS） として提供
• MXMLファイルを提供

今回のプロジェクトでは、いわゆる紙芝居形式で、JPEG画像を成果物としてUIを設計しました。デスクトップ常駐ツールですから、常駐時のUI、ウィジェット時のUI、大きく開いた時の画像をそれぞれ作成しました。
また、デザイナーから、画像ファイル 、UIMovieClipベースのコンポーネント、Skin用swfファイルをデベロッパーに提供してもらいました。

デザイナーとデベロッパーとの連携ポイントは、前述したようにいくつもありますが、そのプロジェクトの参加メンバーのスキルやデザイナー／デベロッパーの作業ボリューム比率などを考慮し、柔軟に対応するようにします。また、Adobeから新たにFlash Catalystというツールを利用したワークフローが提案されており、今後もっと効率的なRIA 開発が行えるようになるかもしれません。

ちなみに同時期にアーキテクチャ（フレームワーク、ライブラリの選定または制作）を決定し、プログラミングの方向性を決めておきます。また、サーバーサイドとの通信インターフェースを決定します。今回の場合は、サーバーサイドの開発はありませんが、SQLiteを使用したデータベースの設計、RSSフィードの取得などの外部リソースとの連携の設計をこのフェーズの期間中に行いました。この辺りは、一般的なシステム開発と同じですので割愛させて頂きます。

5.モックアップを作る

出来上がったUIをもとにモックアップを作ります。UI設計の成果物（JPG画像）をはめただけのアプリケーションでも完成イメージにぐっと近づきます。

今回のプロジェクトでは、画像のはめ込みだけでなく、常駐モード／ウィジェットモード／通常モードのモード切り替えまでを実装しました。
目立つ部分のアニメーションも速い段階から実装するようにし、なるべく完成形のイメージが沸きやすいようにしました。

モックアップで作成したプログラムが、そのまま本番にも流用できるのが理想ですから、アーキテクチャの検討やコーディング規約の作成はモックアップまでにあらかじめ完了させておきたいところですね。

6.まとめ

さて、上流工程におけるUIドリブン開発のポイントを紹介してきました。

UIドリブンでは、UIを中心に作業を進めますから、プロジェクトの早い段階から完成イメージが掴みやすいことが特徴でしょう。しかし、その反面、要件定義とUI設計のフェーズは絶対に失敗できませんので、デザイナー・デベロッパーに求められるスキルはかなり高くなってしまいます。

RIA開発において最も大切なのは何と言ってもクライアント／デザイナー／デベロッパー間のコミュニケーションです。特に前述した上流工程でのデザイナーとデベロッパーの意思疎通が重要であり、それが最終成果物（アプリケーション自体）の仕上がりに大きな影響を与えます。
デザイナーもデベロッパーも、お互いを尊重し、また刺激し合って、良いアプリケーションを作ることができれば幸せですね。

さいごに、筆者が「デザイナーとデベロッパーとの協業」という発表を行った際の資料リンクを貼っておきますので、ご興味のある方は見てみてください。

• http://www.nankaifactory.com/blog/2008/09/silverlight-in4-1.html

では、引き続き開発中のAdobe Developer Box ！次回の連載をお楽しみに！！