手書き感いっぱいのUIモックアップ作成ソフトBalsamiq Mockupsに、もうすぐ「Generate Flex Application (WebORB)」メニューが追加されます。
これはUIモックアップを作成した後、[Help]-[Generate Flex Application (WebORB)]を選択するとユーザーインターフェースのMXMLとクライアント/サーバーの通信部分(雛形)のコード生成をしてくれる機能です。
この機能は現在、「Balsamiq Mockups Next Release Preview」で試すことができます。
http://www.balsamiq.com/products/mockups/desktop/next自動生成されるコードは、クライアント側はMXML/ActionScript、サーバー側はJava, C#/VB.Net, PHPとなっているのでサーバー環境にあったものが利用できます。
FAQを見たところ対応しているUIコンポーネントが結構ありますね。
accordion, barchart, button, buttonbar, calendar, canvas, checkbox, colorpicker, columnchart, combobox, datagrid, datechooser, hslider, label, linechart, list, numericstepper, piechart, radiobutton, rule, tabbar, textinput, title, verticaltabbar, vslider
いくつかスクリーンショットを載せておきます。
LabelとButtonだけのシンプルなHello World Flexアプリをデザインしました。
Generate Flex Application (WebORB)メニュー
Flex Applicationの生成
Flex Applicationのダウンロード
Flex Applicationの生成はThe Midnight Codersのサーバー側で行われるようで、zipにまとめられたものをダウンロードできます。
Flex BuilderにMXMLをインポートしデザインモードで表示
自動生成されたクライアント側のコード(もちろん雛形だけ)
MockupSampleView.mxml
<?xml version="1.0" encoding="utf-8"?>
<MockupSampleController xmlns="sampleBalsamiqClient.*" xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
<mx:Button x="309" y="107" width="73" height="28">
<mx:label>sayHello</mx:label>
</mx:Button>
<mx:Label x="216" y="109" width="-1" height="-1">
<mx:text>Hello World!</mx:text>
</mx:Label>
</MockupSampleController>
MockupSampleController.as package sampleBalsamiqClient
{
import mx.containers.Canvas;
import mx.rpc.remoting.RemoteObject;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.AsyncToken;
import mx.rpc.IResponder;
import mx.collections.ArrayCollection;
public class MockupSampleController extends Canvas
{
[Bindable]
public var model:MockupSampleModel = new MockupSampleModel();
private var remoteObject:RemoteObject;
public function MockupSampleController()
{
super();
remoteObject = new RemoteObject("GenericDestination");
remoteObject.source = "sampleBalsamiqServer.MockupSampleService";
remoteObject.addEventListener("fault", onFault);
initializeController();
}
public function onFault (event:FaultEvent):void
{
Alert.show(event.fault.faultString, "Error");
}
public function initializeController():void
{
}
}
}
MockupSampleModel.as package sampleBalsamiqClient
{
import mx.collections.ArrayCollection;
public class MockupSampleModel
{
}
}
ちなみにBalsamiq MockupsはAdobe AIRで作られていますのでMac OS X, Windowsでも動作しますし、Web版も公開されています。
日本語が使用できない場合は[View]-[Use System Fonts]にチェックを入れてお試しください。
Balsamiq MockupsはUIモックアップの定義だけであって、Flash Catalystのようにインタラクションの定義は今のところできません。
なお、ライセンスは有償で79ドルとなっていますが評価利用は可能です。Balsamiq Mockups
http://www.balsamiq.com/products/mockups
From Mockups to Flex in Seconds! - The Midnight Coders: Balsamiq Integration
http://www.themidnightcoders.com/develop-ria/balsamiqapp
Weekly Release: New Default Font (on OS X) and more -Coming soon: WebORB integration!-
http://www.balsamiq.com/blog/2009/05/25/newfont/
