本文へジャンプ

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む


お客様が developerWorks に初めてサインインすると、プロフィールが作成されます。プロフィールで選択した情報は公開されますが、いつでもその情報を編集できます。お客様の姓名(非表示設定にしていない限り)とディスプレイ・ネームは、投稿するコンテンツと一緒に表示されます。

送信されたすべての情報は安全です。

  • 閉じる [x]

developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む


送信されたすべての情報は安全です。

  • 閉じる [x]

SaaS を作成するための Flex 4 の機能

RIA のユーザー・エクスペリエンスを Flex 4 (ベータ) SDK で強化する

Dan Orlando, Enterprise RIA Consultant, Consultant
Photo of Dan Orlando
Dan Orlando はエンタープライズ規模の Flash プラットフォームに関するアーキテクト兼コンサルタントとして広く認められています。彼は RIA 支持者として、さまざまな雑誌や Web サイトに記事を発表しています (PHP Architect、Flash and Flex Developer Magazine、IBM developerWorks、Amazon Web Services、Adobe Developer Connection など)。また彼は『Flex 4 in Action』(Manning Press 刊) の共著者でもあります。

概要: Adobe® Flex SDK では、今までと同じ製品であることがわからないほど、エンタープライズ・レベルの開発に関して大幅な改善が行われました。この記事では、オープンソースの Flex 4 (ベータ) SDK を使って SaaS (Software as a Service) としての RIA (Rich Internet Application) を作成するための新しい特徴や機能について詳しく見て行きます。

日付:  2009年 7月 14日
レベル:  中級 この記事の原文:  英語
アクティビティー: 4792 ビュー
お気軽にご意見・ご感想をお寄せください: 


近年、RIA 開発や SaaS のためのツールキットやフレームワークが次第に増えてきました。Adobe Systems は 2004年に Macromedia を買収したことにより、私達が現在 RIA と呼ぶものを作成するためのフレームワークである Flex を継承しています。Adobe は Flex SDK をオープンソースのフレームワークとすることを決定しましたが、Flex アプリケーションの作成に使われる Eclipse ベースのツールは相変わらずライセンスが必要なソフトウェア製品です。この製品のブランド名は最近、Adobe Flex Builder から Adobe Flash Builder に変更されました。

クラウド・ベースの SaaS が急増するのに伴い、RIA 開発のツールとして Flex フレームワークが最も広く採用されるようになっていることは容易にわかります。Flex が他のアプリケーションと大きく異なる点は、Flex を実行するベースとなるエンジン (つまり Flash Virtual Machine) が、元々リッチなグラフィックス用に作成されたものであるという点です。よりリッチなグラフィックスを使用することで、いわゆるユーザー・エクスペリエンス・デザインを最高のものにすることができます。そうしたことから、Flex は高度な UI を作成するための優れたツールとなっています。Flex は Flash プラットフォームの一部であることから、データ駆動型の非常に滑らかなグラフィックスや高度なトランジションを生成する上で、特に有効です。Flex がよく使われる大きな理由は、優れたユーザー・エクスペリエンスを実現できる点にあることは否定できません。

この記事では、さらに高度な RIA の UI を作成できるようになった Flex 4 SDK のさまざまな要素を詳細に調べます。

スキンとテーマ

よく使われる頭字語

  • API: Application Programming Interface
  • CSS: Cascading Style Sheet
  • HTML: Hypertext Markup Language
  • ROI: Return On Investment
  • SDK: Software Development Kit
  • UI: User Interface
  • XML: Extensible Markup Language

Flex 4 SDK チームには主要な方針が 3 つありましたが、そのなかの 1 つが、「Design in Mind (デザインを念頭に置く)」です。Flex SDK のプロダクト・マネージャーの Matthew Chotin の説明によれば、「Design in Mind というテーマの最大の特徴は、Spark という、スキニングとコンポーネントのための新しいアーキテクチャーにあります。Spark は既存の Halo アーキテクチャーの上に構築されており、開発者やデザイナーが Flex アプリケーションの外観に関する作業を行う上で、従来よりもはるかに表現力豊かなメカニズムを提供します。」

この方針を掲げた結果、RIA のデザインをするのはこれまでとは比較にならないほど容易になりました。また Adobe は統一的な製品ライフサイクルを作成しようとしているため、製品開発ライフサイクルを通じて絶えずユーザー・エクスペリエンスが改善されることになります。簡単に言えば、ユーザー・エクスペリエンス・デザインに関する費用が直線的に増加した場合、それに伴う SaaS の成功による見返りは指数関数的に増加するということです。これを示したものが下記の図です。


図 1. ユーザー・エクスペリエンス・デザインと ROI



Spark と SaaS

Spark ライブラリーは Design in Mind という方針に沿って作成された主要なコンポーネントの 1 つです。Spark ライブラリーに含まれるコンポーネントはコンポーネント自身のステートを内部で管理します。この機能を活用するためには、管理用に SkinnableComponent (リスト 1) を継承します (Halo ライブラリーを使用する場合には UIComponent を継承しました)。さらに、MXMLComponent オブジェクトを使うと MXML コンポーネントを継承することができ、Group オブジェクトを使うとコンポーネントの配列をラップするだけのコンポーネントを継承することができ、SkinnableContainer を使うと (ご想像のとおり) コンテナー・コンポーネントを継承することができます。


リスト 1. MXML で宣言された SkinnableContainer コンポーネント
	
<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer skinClass="mySkin">
   <s:layout>
      <s:VerticalLayout horizontalAlign="center"/>
   </s:layout>
   <s:Rect>
        ....
  </s:Rect>
    <s:Button ... />
    <s:Button ... />
</s:SkinnableContainer>s

このようにしても複雑になるだけ、と言う人もいるかもしれませんが、エンタープライズ・レベルのプロジェクトでの作業経験のある人ならば誰でも、こうしたアーキテクチャーのデザインの大きな変更を心から歓迎するはずです。アーキテクチャーのデザインをこのように変更することによって、特定のタイプのコンポーネントの機能がこれまで以上に分離、抽象化され、よりカスタマイズしやすくなるからです。

リスト 2 のコードを見ると、Spark ライブラリーの Panel コンポーネントは SkinnableContainer 基底クラスを継承する以上のことはほとんどしないことがわかります。SkinnableContainer クラスが Spark ライブラリーの Group 基底クラスの継承であることは注目に値します。Group 基底クラスを継承する方法は Flex 3 で UiComponent を継承する方法と同じです。


リスト 2. Spark の Panel コンポーネントの Flex 4 SDK のコード
	
public class Panel extends SkinnableContainer {

    // The content and layout properties are inherited from SkinnableContainer. 
    // Panel doesn't add much other functionality beyond what's in SkinnableContainer
  
    [SkinPart(required="true")]

    /**
     *  The skin part that defines the appearance of the 
     *  title text in the container.
     */
    public var titleField:TextGraphicElement;

    /**
     *  Title or caption displayed in the title bar. 
     */
    public var title:String;

    // This function is called when the skin part is loaded and assigned. 
    override protected function partAdded(partName:String, instance:*):void
    {
        // Assign the content to the header and footer. The main content
        // assignment is done in the superclass (SkinnableContainer)
        super.partAdded(partName, instance);

        if (instance == titleField)
        {
            titleField.text = title;
        }
    }
}


FXG フォーマットを使う

Flash Catalyst

Adobe Labs から入手できる Adobe の新しい Flash Catalyst ベータ版を利用すると、デザイナーはコンポーネントのステートごとの視覚的な差異やコンポーネントのステート間のトランジションを容易に作成することができます。作成されたものは FXG ファイルとしてエクスポートすることができ、またそれを Flex 4 プロジェクトの中に統合することができます。

Adobe の FXG (Flash XML Graphics) は Flex アプリケーションでグラフィックスを定義するための宣言型の構文になっています。Adobe の livedocs 技術資料に書かれているように、「FXG は、FXG をサポートするさまざまなアプリケーションの間でグラフィックスを交換するための XML ベースの言語です。」

アプリケーション開発のワークフローを効率化するために FXG を利用すると、FXG の強力さを活用することができます。例えば、Adobe Photoshop® CS4、Illustrator® CS4、Fireworks® CS4、Flash Catalyst ベータ版から FXG 文書をエクスポートすることができ、そのエクスポートされたコードを Flex 4 アプリケーションで直接使用することができます。FXG は Spark スキンの中で skin クラスの視覚要素を描画するためによく使われます。FXG の構文はインラインで使うこともでき、あるいはカスタム・コンポーネントとして使うこともできます。リスト 3 のコード・サンプルは Spark スキンに FXG の構文を追加した場合を示しています。


リスト 3. Spark スキンで FXG を使う
	
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark" 
height="200" width="200">
   <s:layout>
      <s:HorizontalLayout/>
   </s:layout>
   <s:SkinnableContainer id="myContainer" height="200" width="200" >
        <s:Button label="Click Me" skinClass="skins.FXGButtonSkin"/>
   </s:SkinnableContainer>
</s:Application>

リスト 4 の例はカスタム・コンポーネントとしての FXG スキンの使い方を示しています。この方法では Flex コンパイラーによって FXG コードが最適化されるため、これは推奨の実装方法です。


リスト 4. FXG スキンをカスタム・コンポーネントとして使う
	
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:mx="library://ns.adobe.com/flex/halo"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:ai="http://ns.adobe.com/ai/2008"
   xmlns:d="http://ns.adobe.com/fxg/2008/dt"
   minWidth="21" minHeight="21">
     <fx:Metadata>
      [HostComponent("spark.components.Button")]
      </fx:Metadata> 
      <s:states>
        <s:State name="up"/>
        <s:State name="over"/>
        <s:State name="down"/>
        <s:State name="disabled"/>
      </s:states>
<!-- FXG exported from Adobe Illustrator. --> <s:Graphic version="1.0" viewHeight="30" viewWidth="100" ai:appVersion="14.0.0.367" d:id="1"> <s:Group x="-0.296875" y="-0.5" d:id="2" d:type="layer" d:userLabel="Layer 1"> <s:Group d:id="3"> <s:Rect x="0.5" y="0.5" width="100" height="30" ai:knockout="0"> <s:fill> <s:LinearGradient x="0.5" y="15.5" scaleX="100" rotation="-0"> <s:GradientEntry color="#ffffff" ratio="0"/> <s:GradientEntry ratio="1"/> </s:LinearGradient> </s:fill> <s:stroke> <s:SolidColorStroke color="#0000ff" caps="none" weight="1" joints="miter" miterLimit="4"/> </s:stroke> </s:Rect> < /s:Group> </s:Group> </s:Graphic> <s:SimpleText id="labelElement horizontalCenter="0" verticalCenter="1" left="10" right="10" top="15" bottom="2"> </s:SimpleText> </s:SparkSkin>

FXG の使い方の 3 番目は、コンポーネントをロードする場合と同じように FXG をロードする使い方です。


リスト 5. コンポーネントをロードする場合と同じように FXG をロードする
	
<?xml version="1.0" encoding="utf-8"?>
<s:Graphic 
   xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:mx="library://ns.adobe.com/flex/halo" 
   xmlns:s="library://ns.adobe.com/flex/spark">
     <s:Rect id="rect1" width="200" height="200" >
       <s:fill>
         <s:SolidColor color="0xFFFFCC" />
       </s:fill>
       <s:stroke>
         <s:SolidColorStroke color="0x660099" weight="2" />
       </s:stroke>
     </s:Rect>
</s:Graphic>

FXG コンポーネントのコードは MXML コンポーネントのコードと似ています。


リスト 6. FXG コンポーネントのコード
	
<?xml version="1.0"?> 
<!-- Set title of the Panel container based on the view state.--> 
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:mx="library://ns.adobe.com/flex/halo" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     title="Login" title.Register="Register"> 

     <!-- The states property defines the view states.--> 
     <s:states> 
       <s:State name="Login"/> 
       <s:State name="Register"/> 
     </s:states> 

     <mx:Form id="loginForm"> 
       <mx:FormItem label="Username:"> 
         <s:TextInput/> 
       </mx:FormItem> 
     <mx:FormItem label="Password:"> 
         <s:TextInput/> 
       </mx:FormItem> 
     <!-- Add a TextInput control to the form for the Register view state. --> 
     <mx:FormItem id="confirm" label="Confirm:" includeIn="Register"> 
       <s:TextInput/> 
     </mx:FormItem> 
     <mx:FormItem direction="horizontal"> 
     <!-- Use the LinkButton to change to the Register view state.--> 
     <!-- Exclude the LinkButton from the Register view state.--> 
    <mx:LinkButton id="registerLink" 
       includeIn="Login" 
       label="Need to Register?" 
       click="currentState='Register'"/> 
     <!-- Add a LinkButton to the form for the Register view state. --> 
     <mx:LinkButton label="Return to Login" 
       includeIn="Register" 
       click="currentState=''"/> 
     <mx:Spacer width="100%" id="spacer1"/> 
     <!-- Set label of the control based on the view state.--> 
       <s:Button id="loginButton" 
         label="Login" label.Register="Register" /> 
       </mx:FormItem> 
     </mx:Form> 
</s:Panel>

FXG に関して理解しておく必要がある重要な点は、MXML に対する FXG の役割は HTML に対する CSS の役割と同じであり、ただし FXG の方が遥かに規模が大きいということです。CSS に課されているさまざまな制約の多くは FXG には存在しません。FXG と CSS を比較するのは奇妙に思えるかもしれませんが、概念的に FXG は CSS とまったく同じこと、つまりスタイル情報からのレイアウト・コードの分離を実現しています。


Flex 4 でステートを扱う

サービスとして提供されるソフトウェアは、ローカルで実行されるソフトウェアと、リモート (つまり「クラウドの中」) で実行されるソフトウェアとの間のギャップを埋めようとします。そのため、SaaS アプリケーションでは必然的にカスタム・コンポーネントを作成する必要があります。

Flex SDK の V2.0 リリースでビュー・ステートが導入されました。エンタープライズ・レベルの開発に Flex フレームワークを導入する上で、ビュー・ステートの追加は重要な役割を果たしました。複数の UI を持つステートフルなアプリケーションを開発することができ、そのアプリケーションをリモートの場所からブラウザーを使って実行できるという機能のおかげで、Flex はステートレスな Web インターフェースをプログラミングする従来の手法に代わる魅力的な選択肢となりました。

ただし重要な問題が 1 つ残っています。Flex によってアプリケーションはステートフルになりましたが、Flex アプリケーションのステート間のナビゲートは相変わらず Web サイトのページ間のブラウズのように感じられ、ローカル・ドライブで実行されるアプリケーションを扱うような感覚は得られません。最も重要な点は、アプリケーションはさまざまなステートをとりますが、その異なるステートに存在しているコンポーネント同士の通信にとって「適切な」デザイン・パターンとは何かが明確ではないため、プロジェクトの締め切りに間に合わせようとする中で混乱が生じやすいことです。その結果、企業の中では、RIA に対して「実証されていない技術」という汚名を着せる人が出てくることがよくあります。

Flex チームがこのギャップを認識するに至ったのは、主にコミュニティーからのフィードバックのおかげであり、オープンソース技術の価値を強調することとなりました。この結果を受けて、Flex 4 の新しいステート・エンジンが開発され、RIA 開発の領域での大きな進歩がありました。こう言うと大胆すぎるかもしれませんが、今やコンポーネントはコンポーネント自身のステートを管理するようになり、今まで以上に親アプリケーションから分離されるようになったのです。

リスト 7 の例は、アプリケーションの任意のレベルにある親コンポーネントが、どのように子コンポーネントのステートを管理するかを示しています。


リスト 7. 子コンポーネントのステートを管理する
	
<?xml version="1.0" encoding="utf-8"?>
<s:Application backgroundColor="0xFFFFFF" 
     xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:mx="library://ns.adobe.com/flex/halo" 
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:comps="comps.*">
    <comps:GraphicComp id="graphic1"/>
</s:Application>

リスト 8 はコンポーネントを宣言するコードを示しています。


リスト 8. コンポーネントを宣言する
	
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:mx="library://ns.adobe.com/flex/halo" 
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:MyComp="myComponents.*">
   <s:layout>
     <s:VerticalLayout/>
   </s:layout>
   <s:SimpleText text="Login or Register"
     fontSize="14" fontWeight="bold"/>
   <MyComp:LoginComponent currentState="Login"/>
</s:Application>


アニメーション、エフェクト、そして 3-D

Spark ライブラリーには、ユーザー・エクスペリエンス・デザインを推進するための重要なアップグレードも含まれています。新しいエフェクトの数が大量であることを考慮して、Spark のエフェクトは実装やターゲットのタイプごとにカテゴリーに分類されており、管理や将来の拡張がしやすくなっています。そうしたカテゴリーには以下のようなものがあります。

  • プロパティー・エフェクト
  • トランスフォーム・エフェクト
  • ピクセル・シェーダー・エフェクト
  • フィルター・エフェクト
  • 3-D エフェクト

プロパティー・エフェクト

ご想像のとおり、プロパティー・エフェクトによってターゲットの 1 つ以上のプロパティーを変更することができますが、そのためにはアニメーション化対象の各プロパティーに対して Animate クラスを宣言します。エフェクトの宣言はすべて <fx:Declarations/> タグの中で行う必要があり、それによって Flex コンパイラーに対して、宣言を行うことを伝えます。これらの宣言は目に見える表示オブジェクトではなく振る舞いの宣言であり、そうした振る舞いがアプリケーションの中の目に見える 1 つ以上の表示オブジェクトに直接影響する場合もあれば、影響しない場合もあります。注意する点として、<s:Animate/> クラスを使用する場合には各 <Animate> タグの中に SimpleMotionPath クラスのインスタンスを含める必要があります。このカテゴリーには、FadeResizeAnimateColor といったタイプのエフェクトも含まれます。

トランスフォーム・エフェクト

トランスフォーム・エフェクトをプロパティー・エフェクトと切り分ける重要な特性は、トランスフォーム・エフェクトではエフェクトを並列にうまく共存させられることです。そのため、(Flex 3 の場合のように) エフェクト同士が競合して行き当たりばったりの動作になってしまう場合の対策を考える必要がありません。このカテゴリーでは、指定された表示オブジェクトの特定のプロパティー (または関連するプロパティー) に対して複数のエフェクトを並列に混合して実行することができ、オブジェクトのモーフィングをよりリアルに行うことができます。少し創造性を発揮すれば、このカテゴリーのエフェクトをユニークな方法で実装し、他のどの Flex アプリケーションにも見られないようなユーザー・エクスペリエンスを実現するトランジションを作成することができます。リスト 9 はトランスフォーム・エフェクトの一例を示しています。


リスト 9. トランスフォーム・エフェクトの例
	
<?xml version="1.0"?>
  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:mx="library://ns.adobe.com/flex/halo" 
     xmlns:s="library://ns.adobe.com/flex/spark">
   <fx:Declarations>
     <s:Parallel id="parallelRMForward"
       target="{myImage}">
     <s:Rotate
       angleBy="180"/>
     <s:Move
        xBy="100" 
        yBy="100"/> 
     </s:Parallel>
     <s:Parallel id="parallelRMBack"
        target="{myImage}">
       <s:Rotate
         angleBy="180"/>
       <s:Move
         xBy="-100"
        yBy="-100"/>
     </s:Parallel>
   </fx:Declarations>
   <s:Button label="Play Effect Forward" 
     x="10" y="10"
     click="parallelRMForward.end();parallelRMForward.play();"/>
   <s:Button label="Play Effect Backward" 
     x="150" y="10"
     click="parallelRMBack.end();parallelRMBack.play();" />
    <mx:Image id="myImage" 
     x="10" y="50"
      source="@Embed(source='assets/logo.jpg')"/>
</s:Application>

ピクセル・シェーダー・エフェクト

Spark に組み込みのピクセル・シェーダー・エフェクト (CrossFade と Wipe) では、このエフェクト独自の内部ピクセル・シェーダーを使っています。このタイプのエフェクトを実現するためには、エフェクトを実行する「前」のビットマップと実行した「後」のビットマップをキャプチャーし、エフェクト実行「前」のビットマップに実行「後」のビットマップを混合していき、実行「後」のビットマップのみが見えるようになるまで混合します。ピクセル・シェーダー・エフェクトの非常に優れた点は、Adobes Pixel Bender ツールを使うことでカスタムのピクセル・シェーダー・エフェクトを作成することができ、そうしたエフェクトを Flex アプリケーションで使用できる点です。リスト 10 は組み込みの Wipe エフェクトの使い方を示しています。


リスト 10. Wipe エフェクト
	
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:mx="library://ns.adobe.com/flex/halo" 
     xmlns:s="library://ns.adobe.com/flex/spark">
   <s:layout>
     <s:VerticalLayout/>
   </s:layout>
   <!-- Define two view states.-->
   <s:states>
     <s:State name="default"/>
     <s:State name="red"/>
   </s:states>
   <!-- Define the transition that applies the Wipe effect
   whenever the view state changes.-->
   <s:transitions> 
     <s:Transition fromState="*" toState="*"> 
       <s:Sequence target="{myB}">
         <s:Wipe id="wipeEffect" 
           direction="right"
           duration="1000"/> 
       </s:Sequence>
     </s:Transition> 
   </s:transitions>
  <s:Button id="myB" label="Wipe" 
     color="black" color.red="red"/>
   <!-- Define two buttons to change the view state. -->
   <s:Button label="Set Default State" 
       click="currentState='default'"/>
   <s:Button label="Set Red State" 
       click="currentState='red'"/>
</s:Application>

フィルター・エフェクト

フィルター・エフェクトが他のエフェクトと大きく異なる点は、アニメーション化されたプロパティーが Filter オブジェクトの 1 つであり、表示オブジェクトのプロパティーをアニメーション化するわけではない点です。フィルターのプロパティーをアニメーション化するためには AnimateFilter クラスを使います。AnimateFilter を宣言した後、ターゲットの表示オブジェクト、繰り返し回数、繰り返し期間、そして具体的な操作対象のフィルターを宣言します。リスト 11 の例はアニメーション化した DropShadowFilter を作成する方法を示しています。


リスト 11. アニメーション化した DropShadowFilter
	
<fx:Declarations>
   <s:DropShadowFilter id="myDSF"
       color="0x0000FF"
       distance="5"
       angle="315"/>
     <s:AnimateFilter id="myFilter" 
         target="{myB2}"
         repeatCount="0"
         duration="500"
         repeatBehavior="reverse"
         bitmapFilter="{new spark.filters.DropShadowFilter()}">
     <s:SimpleMotionPath property="color" valueFrom="0" valueTo="0x0000FF"/>
     <s:SimpleMotionPath property="distance" valueFrom="0" valueTo="10"/>
     <s:SimpleMotionPath property="angle" valueFrom="270" valueTo="360"/>
   </s:AnimateFilter>
</fx:Declarations>

3-D エフェクト

比較して言えば、Spark の 3-D エフェクトで実現できることは、オープンソースの Adobe ActionScript 3-D 専用ライブラリー (Papervision3D、Away3D、Sandy3D など) で実現できることには到底及びません。しかしそれでも、Spark ライブラリーに含まれているネイティブの 3-D エフェクトは出発点として適切であり、この 3-D エフェクトがあるということは、Adobe が Flash プラットフォームでの 3-D に真の関心を持っていることを示しています。

Spark の 3-D エフェクトには、Move3D、Rotate3D、Scale3D が含まれています。これらの各 3-D エフェクトはリスト 12 のように実装することができます (リスト 12 は Rotate3D エフェクトを使っています)。


リスト 12. ネイティブの 3-D エフェクトを使う
	
<?xml version="1.0" encoding="utf-8"?>
   <s:Application name="Rotate3D Tester"
       xmlns="http://ns.adobe.com/mxml/2009">
    <layout>
     <BasicLayout />
   </layout>
   <fx:Declarations>
     <s:Rotate3D id="x_rotate3d"
        target="{image}"
        xFrom="0"
       xTo="360"
      duration="2000" />
     <s:Rotate3D id="y_rotate3d"
       target="{image}"
       yFrom="0"
       yTo="360"
       duration="2000" />
     <s:Rotate3D id="z_rotate3d"
        target="{image}"
       zFrom="0"
       zTo="360"
       duration="2000" />
    </fx:Declarations>
   <s:VGroup id="vGroup" left="10" top="10">
      <s:Button id="btnX"
       label="Rotate3D X-axis"
       click="x_rotate3d.play();" />
     <s:Button id="btnY"
        label="Rotate3D Y-axis"
       click="y_rotate3d.play();" />
     <s:Button id="btnZ"
       label="Rotate3D Z-axis"
       click="z_rotate3d.play();" />
   </s:VGroup>
   <mx:Image id="image"
     source="@Embed('assets/image.jpg')"
     horizontalCenter="0"
     verticalCenter="0"
     width="100"
    height="100" />
</s:Application>


新しいテキスト・エンジン

Adobe Flash Player 10 では新しいテキスト・エンジンが導入され、今まで以上に多言語機能や印刷機能などが強化されています。Flex 4 フレームワークには、RichTextSimpleText など、テキストのための一連の新しいクラス・セットが含まれています。Adobe Labs の Text Layout Framework が完全に統合されると、これまでで最大の改善が行われることになります。その統合の時期は、このフレームワークがベータ版でなくなり、完全な公開リリースとなる前のどこかの時点と予想されています (Text Layout Framework についての詳細は「参考文献」を参照)。Text Layout Framework は Flash Player 10 に組み込まれたテキスト・エンジンを活用できるように設計されています。

My developerWorks のクラウド・コンピューティング・グループに参加してください。

再利用とカスタマイズが可能なクラウド・コンピューティングのアーキテクチャー、ツール、キラー・アプリケーションに関して、他の開発者達と議論をし、リソースを共有してください。そうした場として、My developerWorks Cloud Computing グループ、そして My developerWorks Cloud Computing Central グループがあります。

まだ My developerWorks のメンバーになっていない方は、今すぐメンバーになってください。

大きな改善事項として、テキスト編集のためのキーボードとマウスのジェスチャー (切り取り、コピー、貼り付け、元に戻す、など) が標準的なものになり、SaaS がまるでローカルで動作するデスクトップ・アプリケーションのように感じられるようになりました。また、文字制御が多様になり、カーニング (文字間隔)、リガチャー (合字)、大文字/小文字などの制御や、30 を超える多言語の書式などへの対応を実現しています。最も重要な点として、このテキスト・エンジンにはリッチな開発用 API が含まれており、テキストの内容やレイアウト、マークアップを操作することができ、またカスタムのテキスト・コンポーネントを作成することができます。新しいテキスト・エンジンの主なテキスト・プリミティブは、SimpleTextRichTextRichEditableText の 3 つです。

基本的な HTML マークアップのサポート、インライン・グラフィックス、リンク・コンテナー、埋め込みハイパーリンクなどは、Flex 4 SDK でのテキスト・レンダリングで最もホットな新機能です。Spark デフォルトの TextInput コンポーネントと TextArea コンポーネントは、RichEditableText を使うことで編集可能なテキスト領域を提供します。そのため、こうした一般的なコンポーネントによって、今までまったく考えられなかったことができるようになりました。リスト 13 は RichText コンポーネントを使うと何ができるかを示す簡単な例です。


リスト 13. Spark の RichText コンポーネントの新しい機能を使う
	
<s:RichText fontSize="12">
    <s:content>
        <s:TextFlow color="0x222222">
            <s:p>
                <s:span fontWeight="bold">Hello </span>
                <s:spanv World</s:span>
            </s:p>
        </s:TextFlow>
    </s:content>
</s:RichText>


まとめ

ここまでで、SaaS の成功がユーザー・エクスペリエンス・デザインに密接に関係していることが、ある程度明らかになったはずです。また、ここでは強化されたユーザー・エクスペリエンスを中心に Flex 4 SDK の新機能の多くを調べたので、より高度な SaaS アプリケーションの作成方法を学ぶことができ、実質的に皆さんのスキルが高められたはずです。RIA と SaaS はほとんど同じ 1 つのものであり、どちらも人間とコンピューターとのやり取りに関する新世代を示すものです。業界はこの方向に進むと専門家達は信じており、そのように考えることは当然です。それを念頭に、皆さんも RIA 開発のスキルを高める努力を続けてください。


参考文献

学ぶために

  • Adobe Labs の Text Layout Framework について学んでください。

  • developerWorks の Cloud Computing スペースでは、クラウド・コンピューティングが重要な理由、クラウド・コンピューティングを開始するための方法、そしてクラウド・コンピューティングについて学ぶための場所を知ることができます。

  • developerWorks podcasts ではソフトウェア開発者のための興味深いインタビューや議論を聞くことができます。

  • developerWorks の Technical events and webcasts で最新情報を入手してください。

  • developerWorks を Twitter でフォローしてください。

  • IBM オープンソース開発者にとって関心のある、世界中で今後開催される会議や業界展示会、ウェブキャスト、その他のイベントについて調べてみてください。

  • developerWorks の Open source ゾーンをご覧ください。オープンソース技術を使った開発や、IBM 製品でオープンソース技術を使用するためのハウ・ツー情報やツール、プロジェクトの更新情報など、豊富な情報が用意されています。

  • IBM とオープンソース技術、そして製品機能を調べ、学ぶために、無料の developerWorks On demand demos をご覧ください。

製品や技術を入手するために

  • Flex Style Explorer を試してみてください。

  • 皆さんの次期オープンソース開発プロジェクトを IBM ソフトウェアの試用版を使って革新してください。ダウンロード、あるいは DVD で入手することができます。

  • IBM 製品の試用版をダウンロードするか、あるいはオンラインで IBM SOA Sandbox を試し、DB2®、Lotus®、Rational®、Tivoli®、WebSphere® などが提供するアプリケーション開発ツールやミドルウェア製品を試してみてください。

議論するために

著者について

Photo of Dan Orlando

Dan Orlando はエンタープライズ規模の Flash プラットフォームに関するアーキテクト兼コンサルタントとして広く認められています。彼は RIA 支持者として、さまざまな雑誌や Web サイトに記事を発表しています (PHP Architect、Flash and Flex Developer Magazine、IBM developerWorks、Amazon Web Services、Adobe Developer Connection など)。また彼は『Flex 4 in Action』(Manning Press 刊) の共著者でもあります。

不正使用の報告のヘルプ

不正使用の報告

ありがとうございます。 このエントリーは、モデレーターの注目フラグが設定されました。


不正使用の報告のヘルプ

不正使用の報告

不正使用の報告の送信に失敗しました。


developerWorks: サイン・イン


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 利用条件

 


お客様が developerWorks に初めてサインインすると、プロフィールが作成されます。 プロフィールで選択した情報は公開されますが、いつでもその情報を編集できます。 お客様の姓名(非表示設定にしていない限り)とディスプレイ・ネームは、投稿するコンテンツと一緒に表示されます。

表示名をお選びください

developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

(半角英数字で3文字以上31文字以下にする必要があります)


「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 利用条件

 


この記事を評価する

コメント

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Open source,
ArticleID=421072
ArticleTitle=SaaS を作成するための Flex 4 の機能
publish-date=07142009
author1-email=dan@vizmarketing.com
author1-email-cc=

タグ

Help
このタグで、My developerWorks のすべてのタイプのコンテンツを見つけるために検索フィールドを使用します。

スライダーバーを使用することで、より多く(少なく)タグを表示します。

人気のタグは、この特定のコンテンツ・ゾーン(例えば、Java テクノロジー、Linux や WebSphere など)に対するトップのタグを表示します。

マイ・タグは、この特定のコンテンツ・ゾーン(例えば、Java テクノロジー、Linux や WebSphere など)に対するお客様ご自身のタグを表示します。

このタグで、My developerWorks のすべてのタイプのコンテンツを見つけるために検索フィールドを使用します。人気のタグは、この特定のコンテンツ・ゾーン(例えば、Java テクノロジー、Linux や WebSphere など)に対するトップのタグを表示します。マイ・タグは、この特定のコンテンツ・ゾーン(例えば、Java テクノロジー、Linux や WebSphere など)に対するお客様ご自身のタグを表示します。