Hello, Ext Designer Preview!

ここでの動作環境は次のとおり。

  • OS: Mac OS X 10.6.1
  • Adobe AIR: 1.5.2

Ext Designerを起動すると、次の画面が表示される。

Ext Designer起動直後の画面

Ext Designerの画面左部にはToolbox、右上部にComponent Inspector、右下部にComponent Config。そして中央部には開発をしていく実際のUIが表示される。

Ext Designerで実際にUIを開発している様子

それぞれの用途は次のとおり。

  • Toolbox: 各種コンポーネントのリストが表示される。ユーザはここから配置したいコンポーネントを選択し、ドラッグ&ドロップ操作でUIを作成していく
  • Component Inspector: 配置したコンポーネントの関係図がツリー表示される。コンポーネントの複製や移動のほか、作成したまとまりをUser ComponentsとしてToolboxとして保存することも可能
  • Component Config: 選択しているコンポーネントの各種設定値を表示・変更する。設定値はコンポーネントごとに用意されており種類も多岐に渡るが、フィルタリング機能で設定したい項目のみを絞り込めるので迷わずに操作できる

Toolboxで用意されているカテゴリとコンポーネント。ここから配置したいコンポーネントを選択し、中央のスペースにドラッグ&ドロップする。User ComponentsにはComponent Inspectorで保存したセットが表示される

Component Inspectorでは配置したコンポーネントの関係図がツリー表示される。右クリックするとコンポーネントの移動や複製・削除、Toolboxへの保存といった操作がおこなえる

Component Configでは選択しているコンポーネントの設定値が表示される。今回のバージョンアップで追加されたフィルタリング機能を使えば、編集したい値を簡単に絞り込めることが可能

ユーザはまずToolboxから配置したいコンポーネントを選択し、中央のスペースにドラッグ&ドロップ。あとはマウス操作やComponent Configでレイアウトの微調整をおこなうだけだ。たったこれだけの操作でUIを開発することができてしまう。Component Configの入力補完やComponent Inspectorの複製機能も生かせば、さらに高速な開発が可能となる。

ここで開発したUIは、スクリーンショットのみ保存可能となっている。ツールバー上のカメラアイコンをクリックすると、開発したUIをPNG形式で保存する。

カメラのアイコンをクリックして、作成したUIを画像として保存できる

作成したUIのコード出力については、8月10日(米国時間)のブログ中で

Code generation is currently not available. Our intentions are to charge a fee for this service and to enable our community to create and sell their creations on our marketplace.

とアナウンスされていることから、有償での提供が検討されているようだ。プレビュー版という位置づけであるものの、すでに高い完成度を誇っている同プロダクト。このアプリケーションから実際にJavaScriptコードなどが出力できれば、Webデザイナ・デベロッパの負担をかなり軽減してくれるのではないだろうか。正式版リリースを期待しながら待ちたいところだ。