【ハウツー】

コーディングレスのUI開発ツール「Ext Designer」プレビュー版を試す

2 いざ実践! - コンポーネントを配置して微調整するだけ

    富田宏昭  [2009/10/23]

    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デザイナ・デベロッパの負担をかなり軽減してくれるのではないだろうか。正式版リリースを期待しながら待ちたいところだ。

    関連記事

    関連サイト

    新着記事

    特設サイトの情報

      求人情報

      人気記事

      一覧

      イチオシ記事

      新着記事

      特別企画

      転職ノウハウ

      あなたの仕事適性診断

      4つの診断で、自分の適性を見つめなおそう!

      Heroes File ~挑戦者たち~

      働くこと・挑戦し続けることへの思いを綴ったインタビュー

      はじめての転職診断

      あなたにピッタリのアドバイスを読むことができます。

      転職Q&A

      転職に必要な情報が収集できます

      スカウト転職する

      企業からアプローチのメッセージが届きます。

      マイナビニュースマガジン