jDeveloperを使って素敵なUIモックを一日で作るその1

jDeveloperはOracleのIDEで、Oracle ADFの開発ができます。Oracle ADFは、JSR227 の実装で、データバインドのフレームワークです。他の実装はない様なので、事実上はOracleの独自仕様みたいだけど。でも、仕様を読んでいると悪くはなさそうです。

Oracle ADFに関しては、ここらへんを読むと幸せになれます。
http://otndnld.oracle.co.jp/document/products/jdev/11/doc_cd/index.htm
※全部で3~4000ページくらいありますが、日本語なので大した事ないです。

ADF自体は、様々なサブフレームワークをもっていますが、その中のADF Faces(JSF1.2 をオラクルが拡張したリッチUIコンポーネント。JSF2.0にいつ対応するかわかりません。By Oracleの中の人)を使ってUIモックを作る機能があります。モックと言っても、CSVで作ったダミーデータを実際にUIにバインドして、グリグリできます。UIコンポーネントも豊富で、上手く組み合わせて使えばかなりカッコイイものが一日で出来ます。これをみせると多くのユーザは、「もうできてるじゃん！」という反応を示すので、出来上がったものを見せて自慢する時は細心の注意を払ってください。このUIモックに、モデル層のデータをリバインドしてやるとアプリケーションの一丁あがりです。モデル層は、EJBとかWebサービスでも大丈夫です。JSR227のおかげて、画面にドラッグするとちゃんとリバインドされます。せっかく綺麗に作ったモックを捨てずに済みます。よかったね。

という訳でモックを作る大体の手順。

jDeveloperのインストール
プロジェクトの作成
大体の画面遷移のお絵かき
簡単な画面のフレーム構成のデザイン(ここで適当にCSSや、GIMP2とかPhotoshop使って素材を作るとさらにいい感じになります)
グリグリするCSVデータ作成。こちらに詳しいです。
作成したデータコントロールをデザイナにドラッグ&ドロップしてUIコンポーネントを選択

これで大体完成です。
コーディングが発生するのはCSSをちょろちょろいじる時くらいです。

数回に分けて解説していくつもりですが、待ちきれない場合は、マニュアルをガン見してなんとかしましょう。この機能を使うと以下の様な場合に非常に有効です。

ユーザが要件を固められず、なかなかアプリのイメージがわかない
アジャイル開発でユーザと素早くイメージを共有したい

これは、通常のHTMLモックでも出来ることは出来ますが、HTML/CSS/JavaScript(各種ライブラリ)の知識がそこそこないとかっこいいモノは作れないし、それなりに時間もかかります。10画面くらいあったりすると一人でも5日間くらいはかかってしまいます。それに最初にイメージがある場合に、いちいちHTML/CSS/JavaScripの細かい問題に拘泥せずに、サクっとイメージが形になるので、効率もいいです。IEがどうのこうのとか下らない事は後回しです。コーディングもないので、営業さんが提案に使うなんて事も出来ます。「次までに画面イメージ持ってきますから〜」的感じですね。