Flex 4の新機能トップ10

作者 Jon Rose , 翻訳者 金森 諭 投稿日 2009年6月14日

セクション

デベロップメント,

エンタープライズ・アーキテクチャ,

設計/アーキテクチャ

トピック

RIA ,

Web 2.0 ,

Java ,

リッチクライアント/デスクトップ

タグ

Adobe ,

Adobe Integrated Runtime ,

Flex ,

Flash

原文(投稿日：2009/5/31)へのリンク

今週（2009年6月1日）AdobeはFlex 4の正式な初ベータ版をリリースしました。Flex 4はGumbo（オクラ）というコードネームで開発されています。今回のリリースには大きな変更が多数含まれています。このRIAフレームワークの最新バージョンにおいて変更された事柄についての概要を以下のリストで見ていきましょう。

1. Adobe Catalystとの連携

Flex 4の開発において一番の重点となっているのはAdobe Catalystのサポートと連携です。Catalystはコードを書かずにRIAの部品を作るための新しいデザイナツールです。Catalystは、アプリケーションディベロッパとデザイナが別々に作業しながらも協働できるようにしようとしています。また、両者がそれぞれ得意とすることに集中できるよう、それぞれが慣れ親しんだ従来の方法で作業できるようにもされています。このリストにある事柄の多くはFlexとCatalystとの連携を高めるためのものになっています。

Adobe Catalystについての詳細はこちらを参照してください。

2. Sparkコンポーネントアーキテクチャ

Flexにはアプリケーションを作る上で必要となる一般的なコンポーネントを多く備えたライブラリがあり、データグリッド、ボタン、レイアウトコンテナなどが含まれています。Flex 4はSparkと呼ばれるコンポーネントアーキテクチャ（Flex 3ではHaloと呼ばれていました）を基盤にしています。Catalystのサポートという取り組みの大部分は、コンポーネントモデルを改良して、より高いレベルで関心事の分離を実現することによって実現されます。

新しいSparkコンポーネントモデルでは、コアロジック、スキン、レイアウトが分離され、それぞれを独立して扱えるようになりました。SparkコンポーネントモデルはHaloコンポーネントモデルをベースにしています。これが意味するのは、基本的にSparkがHaloのコアな基本クラスであるUIComponentを拡張しているということです。それによってFlex 3からFlex 4へなだらかに移行でき、Flex 3コンポーネントをFlex 4アプリケーションで使うこともできます。

Flex 4ではエフェクトもアップデートされ、任意のオブジェクトや型にエフェクトがかけられるようになりました。それによって利用法が格段に広がりました。Flex 4のエフェクトは新しいパッケージ「spark.effects」に納められています。新しいコンポーネントライブラリ同様に、このエフェクトライブラリも一から実装がおこなわれ、Flex 3への後方互換性はありません。Gumbo版エフェクトの詳細については、Chet Haase氏のFlex 4エフェクトに関する記事、あるいは彼のブログを参照してください。

Sparkアーキテクチャの詳細はこのホワイトペーパーをご覧ください。

3. MXML 2009

MXMLはXMLベースのアブストラクション（抽象）で、Flash Playerのプログラミング言語であるActionScript 3を基礎にしています。MXMLはユーザインターフェースの可視コンポーネントをレイアウトするのに用いられ、IDEのようなツールをサポートするためのものです。そして今回はCatalystもサポートされるようになりました。MXML 2009は（コア、スキン、レイアウトの）異なる振る舞いを分離するようにアップデートされました。また、Flex 3のコンポーネントとは独立したパッケージ（spark.components）に納められたFlex 4のコンポーネントライブラリも、MXML 2009に新しい名前空間が加えられてサポートされています。

下のアプリケーション宣言部分の例では、SparkとHaloの両方のコンポーネントの名前空間を利用しています。

<s:Application
  xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/halo">

こうすると、Flex 4のボタンを次のように使用することができます。

<s:Button label="My Flex 4 Button" />

Flex 3のボタンを使うときは次のようになります。

<mx:Button label="My Flex 3 Button" />

変更になった他の点もMXML 2009仕様で確認してみてください。

4. ビューステートの改善

Flex 2からFlexフレームワークにステート（状態）の概念が加わり、シンプルな状態変化によって可視コンポーネントを管理することができるようになりました。Flex 4では構文を簡素化してビューステートがより簡単に使えるように改良がされました。簡素化した構文には、新しい言語属性であるincludeInやexcludeFromがあります。これらはコンポーネントに付与するもので、それによりある状態変化に対してそのコンポーネントがどのように振る舞うかを指定できます（以下の例）。

<!-- Given the states A,B,C -->
<m:states>
  <m:State name="A"/>
  <m:State name="B"/>
  <m:State name="C"/>
</m:states>

<!-- This button will appear in only states A and B -->
<Button label="Click Me" includeIn="A, B"/>

<!-- This button will appear in states A and B -->
<Button label="Button C" excludeFrom="C"/>

ビューステートの変更点についての詳細はこちらをご覧ください。

5. FXGのサポート

Flash Playerは本質的に描画エンジンです。AdobeはFlash Player 10でFXGを導入することでその描画エンジンを強化しましたが、今度はFlexにも導入されることになりました。FXGは宣言型のグラフィックフォーマットで、ツール間でデータがそのまま使えるようになっています。そのことで、デザイナがCatalystやCS4 Illustratorで画像を作成し、Flexアプリケーションのディベロッパがそれをインポートして変更なしで利用する、といったことが可能です。

詳細はFXG仕様をご確認ください。

6. スキンの強化

Sparkコンポーネントモデルになって一番変わったのはスキンです。総点検を受けた新しいスキン機構は、コンポーネントの全てのビジュアル要素をコントロールし、それに関するロジックをコンポーネントのコア部分から外に出すことができます。それによってコアロジックとは独立してコンポーネントのビジュアル要素を変更することが可能です。

例として、PanelコンテナのデフォルトスキンであるPanelSkin.mxmlを見てみましょう。

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5">

   <fx:Metadata>
   <![CDATA[
    /**
     * @copy spark.skins.default.ApplicationSkin#hostComponent
     */
    [HostComponent("spark.components.Panel")]
    ]]>
   </fx:Metadata>

   <fx:Script>
     /* Define the skin elements that should not be colorized.
      For panel, border and title backround are skinned, but the content area and title text are not. */
      static private const exclusions:Array = ["background", "titleField", "contentGroup"];

     /**
      * @copy spark.skins.SparkSkin#colorizeExclusions
      */
     override public function get colorizeExclusions():Array {return exclusions;}

     /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
     static private const contentFill:Array = ["bgFill"];

     /**
      * @inheritDoc
      */
     override public function get contentItems():Array {return contentFill};
   </fx:Script>

   <s:states>
     <s:State name="normal" />
     <s:State name="disabled" />
   </s:states>

    . . . . .

   <s:Rect left="1" right="1" top="31" height="1">
    <s:fill>
     <s:SolidColor color="0xC0C0C0" />
    </s:fill>
   </s:Rect>

   <!-- layer 5: text -->
   <!-- Defines the appearance of the PanelSkin class's title bar. -->
   <s:SimpleText id="titleField" lineBreak="explicit"
      left="10" right="4" top="2" height="30"
      verticalAlign="middle" fontWeight="bold">
   </s:SimpleText>

   <s:Group id="contentGroup" left="1" right="1" top="32" bottom="1">
   </s:Group>

</s:SparkSkin>

このスキンの役目はPanelコンテナの見た目をコントロールすることなので、コンポーネントのソースコードを編集したりコンポーネント内部の振る舞いを理解しなくても、デザイナはコンポーネントの見た目を変更することができます。さらに重要なのは、デザイナがCatalystで自分にあった方法で作業できることです。

Gumboコンポーネントのスキンの詳細はこちらをご覧ください。

7. 最新のレイアウトモデル

Flex開発に慣れている人たちは、Flex 3で使われていた主要コンテナがGumboのコンポーネントライブラリに含まれていないことにお気付きになると思います。これは、レイアウトが分離されてデリゲーション（委譲）によって扱われることになったからです。Flex 3のほとんどのコンテナは、単に異なるレイアウトの型のために存在していましたが（たとえばHBoxは水平レイアウトに、VBoxは垂直レイアウトに、というように）、これらはもはや必要なくなったのです。

Flexディベロッパがレイアウトを定義する方法の1つをお見せしましょう。ここでは複数のボタンを管理するのに、新しいSparkのコンテンツ管理クラスであるGroupクラスを使っています。これを実行すると、Flex 3のHBoxを使ったときと同じように、2つのボタンが画面の両側に表示されます。

<s:Group width="400" height="400">
  <s:layout>
   <s:HorizontalLayout paddingLeft="5" paddingTop="5" />
  </s:layout>

  <s:Button label="Button 1" />
  <s:Button label="Button 2" />
</s:Group>

新しいレイアウト機構については、AdobeのRyan Stewart氏が司会役となって話をするビデオが公開されています。http://blog.digitalbackcountry.com/2009/05/flex-4-layouts-on-tech-talk-with-ryan-stewart/

8. Flash Builder 4

以前はFlex Builderという名前だったFlash Builderはアプリケーションディベロッパ向けのEclipseベースのIDEです。最新版のFlash Builder 4では、条件付きブレークポイント、リファクタリング機能の強化、FlexUnit 4のサポートが加わりました。そしてこれまでと同様に、MXMLエディタ、ActionScript 3エディタ、CSSエディタ、ビジュアルデザイナ、パフォーマンスおよびメモリのプロファイラを備えています（プロファイラはProfessional版のみです）。

さらに、Flash Builder 4では進化したデータ管理機能も加わり、データ中心（data-centric）アプリケーションの開発を容易になります。この機能にはクライアントサイドでのデータ管理機能も含まれ、大きなデータに対してCRUD操作をおこなったりスクロールしながら次々データを取得・表示したりすることができます。

このIDEについての詳細はこちらからご覧ください。

9. コンパイラのパフォーマンス向上

Flexアプリケーションディベロッパのほとんど全員にとってコンパイラの遅さは大きな苦痛でした。そのため、Flex 4でコンパイラのパフォーマンスを向上させることがGumboの公の目標のひとつにしました。この点については、公式のベンチマークは公表されていません。しかし、AdobeのPeter Donovan氏は作業の初期段階で、大幅な再構築をおこなわなくても25%は向上するに違いないと述べています。また3、4倍の改善をするには再設計が必要だとも述べています。この問題が2009年末にリリースされるFlex 4で解決されていることを、エンタープライズFlexアプリケーションの全ディベロッパが望んでいるのは間違いありません。

Peter Donovan氏の発言の詳細についてはこちらをご覧ください

10. 新しい機能を備えたテキスト

Flashベースのアプリケーション（FlexベースでもFlexベースでなくても）に対する主な酷評のひとつが、テキストを効果的に扱えないことでした。AdobeはFlash Player 10で、新しいテキストエンジンを導入し、リッチインターネットアプリケーションに必要とされるもの（マルチ言語、印刷、キーボードショートカット、など）のサポートをおこないました。Gumboでもいくつかの新しいテキストクラス（RichText、SimpleTextなど）が加わり、Flexフレームワークでよりしっかりとしたテキストがサポートされるようになります。さらにAdobeは、すべてのActionScript 3ディベロッパがFlash Playerのテキストエンジンのパワーを活かせるように、新しいText Layoutフレームワークに取り組んでいるところです。Text Layoutフレームワークについてはこちらをご覧ください。http://labs.adobe.com/technologies/textlayout/

これらの広範囲にわたる変更点を見てお分かりのように、Flex 4は一般的なRIAプラットフォームへ向けてさらなる一歩を踏もうとしています。Flex 4 SDKでの変更点についての情報は、Matt Chotin氏のWhat's new in Flex 4 SDK betaをご覧ください。

著者略歴

Jon Rose氏はエンタープライズソフトウェアのコンサルタントで、コロラドのボールダーにあるGorilla Logic社のFlex Practice Directorです。またエンタープライズソフトウェアのコミュニティのひとつであるInfoQの編者・寄稿者であり、酒とソフトウェアが大好きな人々に向けて動画を配信するDrunkOnSoftware.comの共催者でもあります。これまで民間および政府機関の大小のクライアントと仕事をしてきており、問題解決への情熱によって質の高いソフトウェアを作り出しています。氏のブログはこちらです。http://ectropic.com

1. トップへ戻る

   GUMBO

   by 真里子 西村

   どちらかといえばこちらです
   en.wikipedia.org/wiki/Gumbo　

   返信

• 次へ >