この記事に必要なもの
著者について
篠崎は、Flash及びFlexのプロフェッショナルとしてシステムのアーキテクチャー設計を行なっています。DelphiやCにも精通しており、システムの更改時の技術コンサルティングを行なっています。成瀬も、Flash及びFlexのプロフェッショナルとして、カスタムコンポーネント開発やパフォーマンスチューニングを得意としています。横田は、上記両名の在籍するRIA開発会社のリーダーです。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
Flex アプリケーションのクライアントコードをデバッグする | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Flex アプリケーションのクライアントコードをデバッグする。この記事では、クライアントサイド Flex アプリケーションのデバッグに必要なコンポーネントについて、そのインストールと設定手順を紹介します。また、クライアントで動作するアプリケーションをシンプルかつ効率よくデバッグする便利な方法を解説します。Flex の RIA 開発アーキテクチャでは、アプリケーションをデバッグするいくつかの手段が用意されています。例えば Flex サーバーは、リモートオブジェクト呼び出しや Web サービス呼び出し、 HTTP リクエストをデバッグする豊富な機能を備えています。さらには、 SWF ムービーの詳細なパフォーマンスチューニングのための SWF プロファイラーも利用できます。こうしたデバッグ機能のうち、この記事では Flex が生成した SWF ムービーをデバッグするテクニックにフォーカスして説明します。この記事は2004年3月15日公開の英文記事の翻訳です。内容には、現状にそぐわない記述、リンク切れ、環境要件が古いものが含まれていることがありますので、ご了承下さい。
この記事に必要なもの
このチュートリアルでは、次のソフトウェアやファイルをインストールする必要があります。インストールされていなければ、いまブラウザにインストールされている標準の Flash Player をアンインストールする必要があります。Linux 版は今年後半にリリースの予定です。
デフォルト設定では、同プレイヤーが動作するローカルマシンに flashlog
txt というファイル名でログを保存します。ただし、 Windows ドメイン設定やローカル設定の違いにより、 これらの環境変数の値が異なるか、設定せれていないことがあります。その場合は、各変数に値を設定してください。Windows における環境変数の設定方法を以下に示します。デスクトップもしくはエクスプローラのマイコンピュータを右クリックします。メニューから [ プロパティ ] を選択します。[ 詳細設定 ] タグを選択します。[ 環境変数 ] ボタンをクリックします。マシンを再起動します。環境変数 HOMEDRIVE および HOMEPATH の値が変わらない場合は、管理者に依頼して、読み書き可能なアクセス権を持つ場所にこれらの変数を設定してもらう必要があります。cfg ファイルには、以下のような設定を記述して、デフォルトのエラーおよびトレースログ機能を動作させます。txt ファイルへのエラーメッセージ出力が働きません。
なおこのログファイルは、デフォルトでは mm
cfg ファイルと同じディレクトリに作成されます。txt ファイルへ出力するエラーメッセージの数を、 SWF ファイルの起動ごとに 100 件に制限しています。
このデフォルト値を変更するには、 mm
以下の例では、最大数を 500 としています。txt ファイルに出力するメッセージ数の制限を解除できます。txt ファイルを任意の場所に出力できます。log というファイル名で保存する設定例です。txt ファイルに簡単なログを出力できます。txt に記録する手段として使えます。txt には以下のデータが書き込まれます。trace 関数は、簡単なデータ型や情報を表示する手段としては便利なものの、モデルやツリーといった複雑なデータ構造のデバッグには不便です。as ファイルとして配置されています。txt に記録するのかを見てみます。
コマンドラインでのデバッグ作業
この fdb では、 ActionScript コードにブレークポイントを設定してステップ実行したり、 SWF ファイルをブラウザで動作させながらアプリケーションのトレースデータを確認したりできます。
そのうちの 1 つとして、コンパイル済み MXML ファイルに関連するクラスのクラス定義を記した< MXML ファイル名>
1 ファイルがあります。このファイルにあるイベントハンドラ以外の関数の大半にブレークポイントを設定できます。なお、イベントハンドラへのブレークポイント設定は、オリジナルの MXML についてのみ可能です。2 には、 MXML に対応するクラスについて、遅延インスタンス生成のエントリが必要に応じて記述されます。この SWD ファイルは、 SWF ファイルと同じディレクトリに保存されます。これら 2 種類のファイルが存在しない場合やどちらかが欠けている場合、 fdb で MXML テンプレートをデバッグしようとするとエラーが発生します。
ただし JRun 以外のアプリケーションサーバー利用時は、この場所は異なります )
Flex のデバッグ機能は、プロダクションモードを無効に設定した時にのみ動作するので、同ファイルが以下のように設定されているか確認します。例えば、以下のような URL を用います。fdb を起動する前に、次に説明する設定が正しく行われているか確認してください。x がインストール済みである必要があります。com にて入手してください。home プロパティが、 JRE のインストール先ディレクトリを正しく指していることを確認してください。例えば、以下のような設定になります。次のステップとして、アプリケーションの MXML テンプレートに基づいてFlex サーバーが生成したファイルを確認します。mxml ファイルのデバッグ時に同コマンドを実行した例です。つづいてファイルにブレークポイントを設定し、 fdb 上でステップ実行します。このときアプリケーションのソースコードを表示するには、 list <ファイル名> コマンドを以下のように入力します。mxml ファイルの 13 行目にブレークポイントを追加します。以下はその例です。continue コマンドを実行し、関数をステップ実行しながら出力を確認します。ここでは、 fdb のデバッグセッションを開始し、コードにブレークポイントを設定したり、偏すウチを確認しながらステップ実行したりする簡単な例を紹介しました。fdb のコンソールで help コマンドを実行すれば、デバッグに利用可能なすべての機能が表示されます。また、以下の Flex オンラインドキュメントも参考にしてください。
その他のポイント
Flex におけるクライアントのデバッグ作業では、いくつかの落とし穴があることに注意してください。デバッガ利用時のいくつかの問題点や対処方法を以下に示します。多くのアプリケーションサーバーと同様に、 Flex でも内部処理用の予約語がいくつか存在します。デバッグ中に SWD ファイルが正しく生成されない場合があります。アプリケーションの MXML ページが キャッシュされた SWF ファイルもしくは SWD ファイルを参照している可能性がある場合は、ブラウザキャッシュをクリアし、 Flex サーバーを再起動してから同ページのデバッグを再度試してください。こうした場合は、 Flash デバッガホストが動作する場所を問い合わせる以下のようなポップアップウィンドウ が表示されます。fdb で run コマンドを実行したとき、もしくは MXML ページをリクエストしたときにこれが表示されたならば、サーバーの設定と、 MXML ファイルの起動に用いた URL が正しいことを確認します。Flex のクライアントサイドデバッグでは、 Flex 開発環境に特化した多彩なツールやテクニックを利用でき、非常に複雑なアプリケーションのデバッグも可能です。これらの手段は、 RIA のデバッグ作業でとても役に立つはずです。
著者について
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
レイアウトや継承、ネストを正しく使用する。余分なコンテナを排除する。
遅延インスタンス化機能を利用してアプリケーションの体感速度を改善
規模の大きなデータセットの処理
高度なエフェクトをスムーズに表示する。
動的リピートコントロールを利用したパフォーマンスチューニング
Flex アプリケーションのパフォーマンスチューニングとプロファイリング
ご意見 / サポート
印刷用に表示
Flex はパワフルな故に、その使い方を間違えると逆にパフォーマンスが低下する可能性を秘めています。また、Flex は他のプログラミングモデル同様に、コードの記述体裁が最終的なクライアントアプリケーションのパフォーマンスを左右します。この記事では、クライアント側のアプリケーションパフォーマンスに影響を与えがちな MXML コードの記述スタイルを解説し、これらの問題点を改善するための簡単なテクニックについても触れていきます。特に、次に挙げる事柄に関連するテクニックを紹介しています。
起動時間の短縮
遅延インスタンス化機能を利用したパフォーマンスチューニング
複雑なエフェクトをスムーズに再生する方法
動的なリピートコントロールを利用したパフォーマンスチューニング
ランタイム共有ライブラリ (RSL) を利用したパフォーマンスチューニング
なお、この文献で紹介するテクニックは、必ずしもすべての Flex アプリケーションにそのまま適用できるものではありません。作成するアプリケーションによっては、その構造に合わせてご自分でカスタマイズする必要があります。コーディングや Flex の基本概念などに関するヘルプは、Flex サポートフォーラム* や Flex デベロッパーセンター でもご覧いただけますので、是非これらも参考としてご利用ください。なお、この記事は 2 部構成の第 1 部にあたり、第 2 部の「Flex アプリケーションのパフォーマンス : Flex サーバーのパフォーマンスチューンアップテクニック集」では、Flex アプリケーションのパフォーマンスを強化するための、サーバーサイドでの改良点やデプロイメントオプションなどについて解説しています。
この記事に必要なもの
この記事をフォローするには、つぎに挙げるものが必要です。(このホワイトペーパーには、クライアントアプリケーションのパフォーマンスチューンアップテクニック集と、サーバーサイドのパフォーマンスチューンアップテクニック集の両方が収録されています。
ご意見 / サポート
この記事の執筆にあたっては、内容やコードに誤りがないよう細心の注意を払っています。この記事や Flex のパフォーマンスに対するご意見やご要望がある場合は、是非我々にお寄せください。ご意見やご要望は、こちらから電子メールにてお送りください。
詳細な記事目次
レイアウトや継承、ネストを正しく使用する。コンテナを過剰にネストすることを避ける。配置位置やサイズを絶対指定する。Grid コンテナを適切に使用する。余分なコンテナを排除する。
遅延インスタンス化機能を利用して アプリケーションの体感速度を改善
ナビゲーションコンテナには遅延インスタンス化機能が実装済み
規模の大きなデータセットの処理
高度なエフェクトをスムーズに表示する。
動的リピートコントロールを利用したパフォーマンスチューニング
リピーターのパフォーマンス強化
Flex アプリケーションのパフォーマンスチューニングとプロファイリング
ランタイム共有ライブラリの使用
アプリケーション起動時間の算出
ご意見 / サポート
著者について
com Web サイトのクラスタリングや負荷テスト、デプロイメントに関するプロジェクトにも参画
現在は、エスカレーションエンジニアとして Flex のサポートを担当するサーバーサポートチームに所属
カリフォルニア大学バークレー校コンピューターサイエンス学科学士課程修了後、Macromedia に入社し、Flex に関する業務を毎日楽しむ。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
レイアウトや継承、ネストを正しく使用する。余分なコンテナを排除する。
遅延インスタンス化機能を利用してアプリケーションの体感速度を改善
規模の大きなデータセットの処理
高度なエフェクトをスムーズに表示する。
動的リピートコントロールを利用したパフォーマンスチューニング
Flex アプリケーションのパフォーマンスチューニングとプロファイリング
ご意見 / サポート
レイアウトや継承、ネストを正しく使用する。高いパフォーマンス性を確保するには、コンテナを無作為に使用しないように注意する必要があります。コンテナを無作為に使用することは、Flex デベロッパーが最も頻繁に犯しがちな過ちですが、これは幸いにも 100% 回避できる事柄でもあります。Flex アプリケーションのパフォーマンスに悪影響が生じるのは、Flex のレイアウトコンテナと、そこから生成される子が、X,Y 軸上の配置や、初期サイズ、スタイルなどを判定するために、サイジングやメジャーリングのアルゴリズムを処理しなければならないことに起因しています。CPU に大きな負担をかけるこの計算処理と、Flash Player が複雑なオブジェクトを描画しなければならないことが重なって、Flex アプリケーションの起動時や、ナビゲーションコンテナのビュー生成時にタイムラグが生じます。アプリケーションの起動速度を飛躍的に向上させるためには、コンテナの不必要なネスティングを回避する手法があります。コンテナを過剰にネストすることを避ける。一般的なルールとして、コンテナを過剰にネストしないように注意する必要があります。しかし、どの部分のコンテナが不必要にネスティングされているかということは、一見判定しがたいものです。そこで、ここでは、コンテナのネスティングが発生しがちな場面と、適切なコンテナを選択 / 使用するための Tips を紹介します。つぎにコンテナが過剰にネストされているコード例を示します。コンテナをネストした場合、コンテナのインスタンスはそれぞれの子の大きさを把握するために、その都度アルゴリズムを実行します。(この際、一部の子はそれ自体がコンテナであるため、この作業が再帰的に行われることがあります。)そして、レイアウトを行うのための相対値が算出されて初めて、Flash Player は複数のビューから構成されるオブジェクトを描画します。したがって、オブジェクト生成時の無駄な作業を排除すれば、自ずとアプリケーションの処理速度が高まり、パフォーマンスが向上します。コンテナが過剰にネストされていなければ、通常これらの生成時間は大きな問題となりません。しかし、コンテナを幾重にもネストする必要がある場合は、どのコンテナを利用するかを見直してください。コンテナが複雑にネストされたレイアウトは、別のレイアウトコンテナと、縦や横方向の整列、マージン、スペーサー、ギャップといったスタイル属性を組み合わせて利用することで、同様のものが作成できるケースがあります。マージンやギャップを利用すれば、各コントロール周辺の空きスペースや、コントロールと親コンテナの間の空きスペースなどが調整できます。また、スペーサーオブジェクトを利用すれば、不必要なスペースを埋めることや、コントロールの位置を微調整することができます。さらに、コンテナ内のコントロール群は、縦や横方向に整列することもできます。例えば、図 1 に示すレイアウトは、Grid コンテナを使用しなくても作成可能です。図 1: この図のレイアウトは、Grid 以外のコンテナを利用しても作成できます。確かに、Grid コンテナは、上図のレイアウトを作成する際に魅力的な手法です。しかし、上記のコードは必要以上に複雑であり、図 1 同様のレイアウトは、つぎのコードを利用しても実現することができます。こちらのコードを利用すれば、各要素の生成時間が短縮できるだけでなく、SWF の容量をよりコンパクトにする効果も見込めます。過剰なネスティングが引き起こす問題点や、それらの改善テクニックについては、Flex コミュニティのメンバー、Steven Webster 氏のブログにて、詳しく解説されています。配置位置やサイズを絶対指定する。Flex のコンテナクラスは、相対的に画面上のコンテンツを整理するレイアウトコンテナです。コンテナクラスはとても便利ですが、コンテナとその中の子のサイズ / 配置位置を算出する作業は、CPU に多大な負担をかける恐れがあります。次に、CPU への負担を軽減するためのテクニックを 2 つ紹介します。オブジェクトの配置位置を絶対的に指定 — オブジェクトの位置を事前にコードで指定しておけば、ランタイム時に Flex のレイアウトコンテナがオブジェクトの位置を算出する必要がなくなり、オブジェクトの生成時間が短縮できます。なお、この手法は Canvas コンテナを使用する場合にのみ有効です。VBox コンテナなどといった Canvas 以外のコンテナは、絶対指定に従わないことがあります。なお、Canvas コンテナを利用する場合は、コンテナに含まれている、すべての子の x および y 属性を明示的に指定する必要があります。なお、位置を絶対指定する手法は、ブラウザのウィンドウサイズにアプリケーションサイズが追随するようなアプリケーションには適していません。Canvas コンテナを利用してレイアウトの作成速度を上げる手法は、最後の手段として利用するようにしてください。オブジェクトの幅や高さを絶対的に指定 — オブジェクトの幅や高さもコードで指定しておけば、ランタイム時にオブジェクトのサイズを算出する必要がなくなり、処理時間が短縮できます。コンテナやコントロールの幅 / 高さの絶対指定は、レイアウトコンテナの負担を軽減し、その結果コンテナやコントロールの生成時間の短縮につながります。このテクニックは、すべてのコンテナとコントロールに対して有効です。Grid コンテナを適切に使用する。Grid コンテナは、それ自体がすでに複雑にネストされていると考えてください。コントロールを縦、横の両方向に整列する必要があるときに限り、Grid コンテナを使用するようにしてください。(CPU 負荷の大小は、採用する手法によって異なります。
) つぎに示すコードは、Grid コンテナの使用に適した、複数のコントロールを縦、横、両方向に整列する必要があるケースのものです (図 2 参照)
図 2: このユーザーインターフェイスは、Grid コンテナの使用に適しています。次に、よくある Grid コンテナの誤使用例を紹介します。
コントロールを右詰め / 左詰めするために、Grid コンテナを使用しているケース (図 3 参照)
つぎのようなコードを利用してコントロールを整列しているケースが見うけられます。しかし、このコードと同じレイアウトは、次のコードに示すように、HBox コンテナと、無駄なスペースを詰めるための Spacer オブジェクトを利用することでも実現可能です。図 3: 右詰めや左詰めといったレイアウトは、Grid を使用しなくても可能です。
他の方法があるにも関わらず、Grid コンテナを Repeater オブジェクトの子として使用しているケース
上図の Repeater オブジェクトでは、Web サービスから取得したラベルの付いた大量の情報を含む Grid コンテナが繰り返されています。このような Grid は 1 つ生成するだけでも時間が掛かり、これらを繰り返し利用するとパフォーマンスに大きな影響を与えます。Flex の開発経験が豊富になると、このようなレイアウトは、他のコンテナやコントロールをカスタマイズして作成できることに気付くはずです。例えば、図 4 のレイアウトは、List コントロールと、カスタマイズしたセルレンダラーを利用しても作成できます。セルレンダラーはリスト形式のすべてのコンポーネントに使用でき、カスタムフォーマットしたセルや、高さの違うセルなどを作成することができます。なお、カスタムセルレンダラーの作成方法やサンプルは、Flex 同梱のドキュメンテーションに収録されています。List コントロールとカスタムのセルレンダラーを使用する手法は、Grid コンテナを繰り返し利用するよりはるかに優れたパフォーマンスを提供します。これらのコントロールは、初期表示ビュー上の要素だけを初めに作成し、ユーザーが他の要素を見るためにスクロールした段階で他の要素を作成します。したがって、インスタンスの作成時間が短縮でき、結果としてパフォーマンスが向上します。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Flexコンポーネントの作成
これはコンポーネントの完全言語サポートを提供するFlexなどのシステムと比較すると特に明確になります。Flexには、プロパティとイベントのサポートが組み込まれているだけでなく、コンポーネントのレイアウトと構成に使用できる高度な抽象言語(MXML)が含まれているため、開発プロセスを大幅に単純化できます。MXMLから直接新しいコンポーネントを作成することもできますが、通常はActionScriptを使用して作成する方が一般的です。この記事では、Flexでのコンポーネントを作成する方法、およびこれらのコンポーネントを使用した生成アプリケーションがどれほど優れているかについて説明します。すべてのFlexコードを手で作成し、mxmlc(無料のコマンドラインコンパイラ)を使用してコンパイルすることもできますが、Eclipse上に構築され、コマンド完成、コンテキストヘルプ、ビルトインのデバッグなどを備えたFlex Builderを使用した方がずっと簡単です。この記事の例の一部では、(Webサンドボックスに限定されるのでなく)ローカルマシンのファイルやその他の要素にアクセスするデスクトップアプリケーションを作成できるベータ機能、AIRを使用しています。
(これらの例は、コマンドラインコンパイラを使用して構築することも可能です)
このチュートリアルをフォローするには、次のソフトウェアがインストールされている必要があります。
この記事に必要な予備知識
コンポーネントを作成する最も簡単な方法は、MXMLを使用することです。最初に、新しいアプリケーションを作成します。継承する基本コンポーネントを選択するオプションなどが含まれた簡単なウィザードが作成されます。
mxmlというファイルができました(ファイル名がコンポーネント名になります)
新しいコンポーネントはButtonに基づいており、次のようなアプリケーションで使用できます。ボタンの元の機能(ここで使用するlabelを設定する機能も含む)はすべて保存されます。ボタンの背景色をコンポーネントの名前どおりに赤に設定したり、ツールヒントやデフォルトのclickアクションを追加したりすることができます。この関数定義には戻り値のvoidも含まれていることに注意してください。この方法を続けてコンポーネントをさらに洗練したものにすることもできますが、MXMLコンポーネントは単純な機能を作成する場合に最適です。
すべてのクラスはJava同様パッケージに入っていなければならないため、パッケージ名を選択するオプションがあります(選択しない場合、名前の付いていないデフォルトのパッケージができます)
ウィザードではスーパークラスも選択できます。次の例では、コンストラクタのフレームワークを自動生成するようにウィザードに指示しました。asになります。最終的には無料のコマンドラインコンパイラを使用する計画でも、Flex Builderの無償ダウンロードを最初に使って、このような詳細に関するヘルプを役立てることをお勧めします。イベントに応答する方法は多数ありますが、ActionScriptコンポーネントではメソッドをオーバーライドするのが最も簡単な方法です。overrideキーワードを使用すると、新しいメソッドを誤って作成する(目的の結果が得られない)のを確実に防ぐことができます。MXMLではpublicフィールドを作成して読み取り可能、書き込み可能な属性を作成することができますが、ActionScriptにはプロパティの読み取りと書き込みのメソッドを指定するgetキーワードとsetキーワードもあります。Labelサブクラスで両方のアプローチを見ることができます。Arrayを作成して値を入力する方法は多数ありますが、角括弧を使用するのが一番簡単です。ただし、ダイナミック型指定メカニズムで結果を処理できる場合は、Arrayから項目を引き出すときのダウンキャストが強制されることはありません。textValueにはgetメソッドとsetメソッドの両方があり、プロパティとして変更が加えられた場合にコードを実行できます。ここではデモンストレーションのため、textフィールドを割り当てました。これをイベントリスナーに使用することもできますが、これについてはまもなく紹介します。このコンポーネントの使用例は次のとおりです。」と表示されます。
Buttonのclickに割り当てられているコードは、関数を参照できるだけに留まるのでなく、インラインでコードを定義することもできることを示します(ただしすぐに乱雑になってしまう可能性があります)
「Logical」がリストに追加されていない場合は追加します。Flashではすべてがイベントベースなので、プログラマーとしてフレームワーク生成イベントかユーザ生成イベントのどちらかにかかりきりになってしまうことがあります。アプリケーションのライフサイクルの特定の場所に一部のコードを挿入する場合、creationCompleteのような適切なフレームワークイベントを見つけます。
これはアプリケーションを構築した後に行います(他にも多くのフレームワークイベントをオンラインヘルプシステムから検索できます)
簡単な例として、タイマーを使用してMyLabelを実行できます。ここでは3つの異なるイベントを紹介します。このイベントはinit()に関連付けられています。stop()を呼び出すように構成されています。一般に、イベント処理はこんなに簡単です。Javaイベント処理と比較してコードが簡潔であることに注意してください。Flexには1つのコンポーネントで別のコンポーネントのデータ変化に応答できるデータバインディングもあります。これは通常多くのイベント処理コードを必要とする共通の活動として見受けられるため、Flexデザイナーがプログラマーの作業を引き受けました。データバインディングを使用するカウンタは次のとおりです。これは[Bindable]注釈で変更されるので、コンパイラで必要なイベント生成と処理がすべて結合されます。タイマーが発生するたびにcountが変更され、これに応答してLabelのtextフィールドも変化します。この例では、インライン関数(別名lambda)をイベントリスナーのターゲットに使用した場合も示しています。余談ですが、MXML内にこのようなインラインコードを作成すると、コンパイラではこのコードを保持するクラスとそのクラスのインスタンスが作成されます。小さいコードのブロックでは便利かもしれませんが、そのコードを大きくしたり複雑にしたりする場合はわかりにくくなることがあります。最後は、AIRを使用してディスクのローカルファイルを読み取る方法を例示する、さらに洗練されたコンポーネントについて説明します。このコンポーネントはFlex Jamをサポートするため、特に、Flexを初めて使用し、手順ごとの指示が必要な方々を対象に作成されました。プログラム学習は昔ながらの方法です。練習を通じて学習することに重点が置かれ、すべての回答を一度に与えるのでなく、一連のヒントや回答を通じて進められるため、各段階で発見と学習を体験できます。このコンポーネントにはスライド式の「ウィンドウ」のセットが含まれているため、1段階上達するごとに少しずつ詳細が明らかになります。多数の練習問題を作成し、多くの変更も加えているので、スタティックなMXMLファイルとして設定するのは大変です。
そこでAccordionから新しいコンポーネントを継承し、テキストファイルを読み取って自動構築するように教えます(ここでAIRを使用します)
最初に、練習問題、ヒント、中間ソリューション、手順について説明する簡単な言語を作成しました。'で始まるすべての行にはコマンドが含まれています。exタグは練習問題の説明を示します。hで始まるものはヒントとし、その後にヒント番号を続けます。sは中間ヒントソリューションとし、同様に番号が続きます。finalタグは完成したソリューションを示します。
Pythonプログラムを作成して、この言語をFlexアプリケーションが理解しやすいXMLなどの言語に変換することもできましたが、そうすると中間の手順でソリューションのインタラクティビティが失われていたでしょう
ExercisePresenterコンポーネントではAIRを使用してテキストファイルの検索と読み取りを行い、正規表現を使用してディレクティブに分割します。これらのフィールドはパブリックで、設定されるのを待たなければ使用できない(待たないとデータが不正確になる)ため、フレームワークで自動的に呼び出されるcommitProperties()メソッドをオーバーライドします。commitProperties()は複数回呼び出されることが多いため、標準的にはフラグを使用してタスクを実行したかどうかを追跡します。配列の終わりに達すると、parseFile()が直接呼び出されますが、失敗した場合、ユーザが目的の場所にファイルをインストールしていない、などの理由でパス情報が正しくないということになるため、ユーザはここでディレクトリとファイルを選択できます。ユーザが最初からやり直しをしなくても済むように、前回正常に見つかったディレクトリが保存されていて、それが使用されます。スレッドのプログラミングを正しく行うのはほとんど不可能なので、これは良いことです。
ただし、Flash VMの新しいベータ版では、複数のコアの高速に使用するため、スレッドを内部使用しています)
このために、コールバックを効果的に確立できるイベントリスナーを設定します。Flexコードのネットワークプログラミングでは特に、制御を渡してからイベントリスナーをコールバックに使用するというプログラミングを多く見かけます。parseFile()の最初の数行は、テキストファイルを開いて読み取る標準的な方法を示しますが、これはAIRアプリケーションでしか使用できません。Javaに多少似ていますが、Javaのようにデコレータパターンが(誤って)使用されていないので、それほど冗長ではありません。ファイルの読み取りが終ると、正規表現がこれを「エントリ」に分割します。
それぞれのエントリにはドットコマンドとそれに続くテキストが含まれています(空白のエントリは破棄されます)
正規表現はJavaと同じ構文を使用します。特に単一のバックスラッシュを使用したい場合には、二重バックスラッシュを使用します。マニュアルやサンプルが不足している(少なくとも見つけられなかった)ので、ActionScriptの正規表現の使用方法を理解するまでに少し時間がかかりました。各エントリがドットコマンドと本文テキストに分割されると、switchステートメントはaddStep()を呼び出すことによって、Accordionコンポーネントに各手順をウィンドウとして追加します。コンポーネントをテストするため、これをMXMLで作成および構成します。ただし、これはソリューション全体ではありません。包含アプリケーション(最終的に作成する予定)で、すべての練習問題で構成されるメインページを作成し、各練習問題を選択するとプログラム学習Accordionが表示されるようにします。このためにはランタイムにコンポーネントを操作できる必要があります。自分のデザインオプションとFlexの構造を使用すれば、この操作は可能です。今後のバージョンのFlexに期待したいのは、文字列操作ツールの向上です。この操作に最適なモデルはPython文字列ライブラリです。このライブラリは試用およびテスト済みで、ソースコードも揃っています。
著者について
Bruce Eckelはコンピュータプログラミングに関する多数の著書や記事の執筆を手がけています。コンピュータプログラマを対象とする講義やセミナーをしばしば実施するほか、ANSI/ISO C++標準化委員会の創設にも携わりました。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Flex 3がリリースされたことで、Flexデベロッパーにはさらに魅力的な可能性が提供されています。
新たに提供される新機能の中には、視覚的なもの(スキンの読み込み、適切なCSSプレビュー)やデータ連動に関するもの(NET/PHPウィザード)はもちろん、本記事で紹介するILogコンポーネントのようにビジュアルとデータ連携性を組み合わせたものもあります。本記事では、2つのILog Elixirコンポーネントと外部データソースだけを利用して、とても簡単なFlexおよびAdobe AIRアプリケーションを開発する方法について、手順を追いながら解説することにします。また、アプリケーション開発の簡素化を支援する開発環境として、Flex Builderがいかに優れているかについても紹介します。本記事中に開発するアプリケーションは、シェイプファイルから作成された地図を表示するダッシュボードです。このアプリケーションでは、地図を利用してHTMLページにナビゲートしたり、Webサービスにクエリをかけることができます。また、3Dの人口統計グラフを表示することもできます。
さらに詳しく
アプリケーション開発を始めるには、まず地図を生成するためのシェイプファイルが必要です。
ここでいうシェイプファイルとは、dbfの拡張子がついた一連のファイルのことです。これらのファイルがグループ化されることで、多くのGIS(地理情報システム)アプリケーションが地図を描画する際に使用するベクトル形状の点および線情報が提供されます。また、これらのファイルには1つまたは複数の属性(つまるところ、一連の埋め込みデータ)が含まれることもあります。商用のものからオープンソースのものまで、シェイプファイルにはさまざまな種類が存在します。本記事の解説では、GeodanのWebサイト*より提供されている数多くのシェイプファイルの中から1つを選び、この関連ファイルをダウンロードして使用することにします。シェイプファイルのダウンロードと解凍が完了したら、ILog Elixirのインストールフォルダにあるカスタムマップコンバータを起動します。このアプリケーションには、「主要」と「アドバンスト」の2つのビューが用意されています。大半の場合は主要ビューだけで用が足りるものの、アドバンストビューにはいくつかの興味深い設定項目が追加で用意されています。次の手順は、入力シェイプファイルの指定です。先ほどダウンロードしたZipファイルを解凍しておいたフォルダを参照します。
(このフォルダには複数のファイルがありますが、カスタムマップコンバータが必要とするのは*
このファイルのマップデータのプレビューがメインウィンドウに表示されます。赤色で表示された四角のいずれかをクリックすると、その位置に対して提供されているすべての属性データがドロップダウン形式で表示されます。
次に示す図例の場合は多くの属性データが含まれていますが、大半の位置ではこれほどまでに多くのデータは表示されません(図1参照)
地図データのプレビューには各ロケーションのすべての属性が表示されます。次に、キーを作成する上で変換後のActionScriptにどの属性を含めるかを指定します。キーは、ルックアップデータの提供とデータソース各種へのクエリのために使用するものです。
これはデータの視覚化やダッシュボードアプリケーションにとって理想的といえるでしょう
FIPS 10-4は、米国政府が地理情報を処理するために使用する2文字の国コードです(後ほど、他の種類も使用します)
ファイルの生成処理を行う前に、ここで、「アドバンストパラメータ」タブで注目に値するいくつかのアイテムについて触れることにします。このタブでは任意の出力ディレクトリを指定したり、各種用意された一般的な地図投影方法から別の地理座標体系を選ぶことができます。他の体系の確認が完了したら、忘れずにメニューオプションをデフォルトの「Geographic」に戻すようにします。「主要パラメータ」画面に戻ります。ファイルをこのまま処理することもできますが、今回はデフォルト設定ほど詳細なデータが必要とならないので、ある優れた機能を利用してアプリケーションのファイル容量を抑えることにします。この機能とは、地図形状データの精度調整を可能にする「簡略化のしきい値」設定です。この機能を利用すれば、一部のベクトル情報を割愛し、よりシンプルかつ応答性に優れたアプリケーションを作成することができます。試しに、簡略化のしきい値を5000程度に設定してみます。注意:この簡略化処理には幾分の時間がかかります。地図の画像が更新されるまで待つようにしてください。簡略化のしきい値を上げると、より多くのデータが失われます。
画面表示に注目して、どの程度のデータが失われたかを確認するようにしてください(図2参照)
簡略化のしきい値を5000に設定することで、データ量を削減できます。
簡略化処理が完了したら「ActionScriptへエクスポート」ボタンをクリックし、この処理が完了するのを待ちます(ここでもある程度の時間がかかります)
処理が完了すると2つのファイルが生成されます。asにはFlexのユーザインターフェイス要素として利用できる、MapBaseの実装が含まれています。asファイルには、グラフィックスの描画に用いられる、ActionScriptに変換されたポイントおよびベクトル情報が含まれています。この節では、前節で作成したベクトル地図をFlexに取り込んで作業します。メモ: 一般的なFlexプロジェクトを作成することも可能ですが、ここでは後ほどHTMLコンポーネントを使用することを考慮してAdobe AIRを選択するのが最適です。プロジェクトには、忘れずにElixirのswc群を追加するようにします。swc(ロケール別のリソースバンドル)の2つのファイルです。
これらのSWCは、ランタイム共有ライブラリにしておくことも可能になったことをお忘れなく
また、別の方法としては、これらのSWCをプロジェクトのlibsフォルダにドラッグ&ドロップし、Flexに関連処理を任せることもできます。次に、前節で作成した2つのActionScriptファイルを(フォルダ構造をそのままにするために)プロジェクトにインポートまたはコピーします。Flex Builder 3で作業を行っている場合は、デザインビューを表示し、コンポーネントウィンドウを確認します。このウィンドウには、地図が新たなコンポーネントとして表示されているはずです。このコンポーネントをキャンバスにドラッグし、アプリケーションを実行してみます。これで、選択した所定の機能を内蔵する地図が完成しました。Flex Builder以外で作業をしている場合は、以下のサンプルコードを利用することで上記の手順と同じ結果を得ることができます。MapクラスはMapBaseを拡張するものであるため、すでにバンドル済みのElixir地図に内蔵された機能にはアクセスすることができます。つまり、単純なレベルの話としてはレイアウトにスタイルを適用したり、地図にイベントを追加することができるのです。地図上の任意の国をクリックして選択すると、その国が色付きのハイライト表示されることが確認できます。MapEventイベントには、イベントの発生元となったアイテムに関連付けられたデータだけでなく、(それより重要な)カスタムマップコンバータで埋め込まれたキー(属性)にも関連するMapFeatureオブジェクトが含まれています。この仕組みを以下のコードで示します。イベントを発生させるには、地図のMXMLにイベントリスナを追加しておきます。アプリケーションの最上部にスクリプトブロックを用意し、戻されるキーを追跡するためのハンドラを追加します。次のコードを参考にしてください。アプリケーションのデバッグを実行し、任意の国をクリックして2文字の国コードが正しく戻されることを確認します。次の手順は、これを利用して国別情報が豊富に用意されたCIA Factbook*にアクセスすることです。本記事のサンプルの場合、国はすべて、以前に埋め込んでおいたFIPS 10-4規格を利用して参照されます。ハンドラ関数を編集し、クリックされた国ごとの一意的なURLがpaneのアドレスとして設定されるようにします。以下のコードを参考にしてください。
他のソースからのデータの取得
アプリケーションからクエリをかけることができ、しかもデータを大々的に提供するようなWebサービスは数多く存在します。この節では、地図のキーでフィルタリングされたデータを戻す、Webサービスを追加することにします。まず、必要な情報を提供するWebサービスを探します。本記事の解説用として、筆者は過去150年間の人口情報を返す簡潔な架空のサービスをColdFusionで作成しました。なお、このサービスはあくまで、キーを用いてアクセスできる膨大な可能性の一端を示すものに過ぎません。サンプルWebサービスは以下の通りです。デモ用のテーブルを作成するためのSQLは次の通りです。ここまできたら、あとはサービスを呼び出し、引数を1つ渡すだけです。ここで使用する引数は地図のキーです。適切なタイミングで呼び出される関数は、すでに用意されています。handleResultサービスにブレークポイントを設置しておけば、人口データを含むXMLが戻されていることを確認できます。このデータは、本ダッシュボードサンプルのもう1つの構成要素である、3Dグラフにおいて使用されます。
3Dグラフの追加
ILog Elixirコンポーネントに付属する3Dグラフは、非常にダイナミックでありながらも容易に実装することができます。また、既存および新規アプリケーションとも手軽に統合することができます。3DのグラフはChartBaseクラスをベースにしているので、アドビ標準のグラフとほぼ同じ機能性を含んでいます。ただし、前者の方にはさまざまな強化が施されています。ここではまず、データプロバイダを指定します。この情報はグラフのデータプロバイダとして用いられます。次に、このデータプロバイダをグラフに適用し、軸の指定を行います。水平軸はカテゴリーの一覧であり、ここにはデータプロバイダに追加された国々が表示されます。xFieldの値(上記のカテゴリー軸に対応)とyField(Webサービスから返された列を単に数値化したものですが、もちろんWebサービスハンドラで動的に算出することも可能です)を設定します。データのフィールドをColumnSeries3DのyFieldにバインドすることで、その基礎となるデータが収集されるのに合わせて、グラフを自動的に更新できます。3DグラフはChartBaseを拡張するものであることから、Flex標準のチャート機能が提供するエフェクトなどのすべての機能性に引き続きアクセスすることができます。また、3D特有の新たなプロパティを利用し、必要に応じてグラフの詳細を調整することができます。
次のステップ
今回のサンプルプロジェクトでは、地図とグラフの両方がさらなる拡張機会を提供しており、ダッシュボードのカスタマイズやリッチなクライアントフィードバックの追加が可能です。筆者は本プロジェクトのさらなる進化を盛り込んだ、続編記事の準備を進めています。続編記事では、地図とグラフの両方をアニメーション化し、ドリルダウンやナビゲーションを可能にするコントロールの作成方法を紹介する予定です。ご期待ください。それまではILog Elixirコンポーネント*に触れ、ぜひその内容に詳しくなるようにしてください。各コンポーネントには分かりやすいコメントのついたサンプルが含まれています。サンプルを精査・分析し、これらのすばらしいエフェクトがどのように実現されているかをご覧ください。また、Elixirのブログ*に目を通すこともお勧めします。
著者について
Matt Wicksはデベロッパーおよびトレーナーとして、イギリスおよびヨーロッパにて幅広く活動しています。また、Adobe UKからの依頼を受け、Webテクノロジに関するプレゼンテーションを行っています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Flash Debugプレーヤーの設定をしてデバッグに役立つ情報を出力させる。ログファイルへの出力をバッファさせ、ファイルI/Oの時間を軽減させる。今回は、前回に引き続きデバッグに役立つTIPSをご紹介します。
必要なソフトウェア
こちらからダウンロードできます。
Flexコンポーネントが発行するイベントを出力するために
例えば、Flexコンポーネントがどのようなイベントを発行し、どのように伝わっていくのかを明らかにするため、イベントの内容を出力するメソッドをhookに指定するなどの使用例が考えられます。
asのソースコードで確認しましょう
dispatchEventHookに独自の関数を割り当てることで、Flexのビジュアルコンポーネントがイベントを発行する直前に、好きな処理を実行することが出来るようになります。dispatchEventHookにイベントをダンプする単純なメソッドを登録するだけで、コンポーネントが実行時にどんなイベントを発行し、またどのようにイベントが伝播して行くかを、ログとして出力できます。
早速やってみましょう
イベントをダンプするだけの単純なフック用のメソッドを定義し、Flexアプリケーションの初期化のタイミングで、定義したメソッドをdispatchEventHookに指定してみます。
実行してみましょう
ボタンを操作する際に何が起きているのかを、イベントを通じて把握することが出来ます。
ところで、クリックした場合に出力されるはずの「mouseDown」や「click」などのイベントが、ここでは出力されていない事にお気づきの方もいるでしょう
注意しましょう
イベントの流れをログ出力することが何の役に立つのか、今一つイメージが湧かないかも知れないので多少補足します。例えば、カスタムコンポーネントを作成したものの、挙動がおかしい(重すぎる等)とします。この時、予期しないイベントのループが起こっていないかの判定のために、カスタムコンポーネントが発行する全てのイベントを、dispatchEventHookを使うことで出力し、判定の材料とすることができます。また、(複合的な)処理の実行時間の計測をする際にも役に立ちます。
例としてチャートについて考えてみましょう
チャートの表示に掛る時間を計測したいとします。チャートコンポーネントに表示するデータを(dataProvider経由で)設定してから、実際に表示されるまでは、一つのメソッドで完結する訳ではなく、非同期に複数の処理が走るため、実はこれはなかなかやっかいな問題です。どこかに計測ポイントを設定すれば済む問題ではないからです。
コンポーネントへのデータのセット、関連するコンポーネントへのイベントによる通知、この間に発行される全てのイベントをダンプすることで、処理の開始から終了までに実際に掛った時間を洗い出すことが可能になります。最後のダウンロードの項をご参照下さい。Flash Playerのデバッグ版を利用することで、実行時にさまざまな情報を出力することができます。通常Flash Builderをインストールする際に、デバッグ版のPlayerもインストールされますが、下記のURLから個別に入手してインストールすることも可能です。cfg」というファイルを作成する必要があります。詳細については以下のURLで解説されている通りですが、ここでは設定方法を抜粋して紹介します。
始めに、以下の場所にmm
cfgの設定例を見ていきます。trace関数の呼び出し結果をログファイルに出力させる。cfgに以下を記述します。txt」という名前のログファイルに出力されます。出力先は以下の表の通りです。
ログファイルの出力先:
例: 簡単なベンチマークを取る:
cfgに以下のように記述してください。膨大なログが吐かれ、ログ出力の処理時間が増大するため、大きなSWFファイルを実行するとあたかもFlash Builderがフリーズしたかのようになる場合があります。注意して使ってください。ログファイルへの出力をバッファさせ、ファイルI/Oの時間を軽減させる。見落としがちですが、デバッグに役立つ機能です。デバッグ版 Flash Playerの実行時に、右クリックしてコンテキストメニューから「再描画領域を表示」を選択することで、再描画領域が赤い枠で表示されます。この設定を行うことで、不要な、あるいは不自然な領域での再描画が発生していないか、実装者以外も確認が可能ですので、テストの際などに細かく確認することをお勧めします。作成したカスタムコンポーネントの動作が重い場合などに、無駄な再描画をしていないかについては案外判別しにくいので、再描画領域を表示するだけでも思わぬ発見に繋がることがあります。SWFファイルの構造をXMLで出力する機能、SWFファイル内にコンパイルインされたバイトコードの命令セットを、アセンブリ形式で表示する機能などがあります。コマンドライン引数に、情報をダンプしたいSWFファイル、又はSWFファイルのURLを指定することで、SWFの情報がXMLで出力されます。コマンドラインオプションを組み合わせることで、出力される項目を削除・追加できます。例えば、「-abc」オプションを付けることで、SWFファイル内のバイトコードをディスアセンブルするよう指定できます。SWFをコンパイルするのに使ったFlex SDKのバージョン、フレームレート、指定されたメタデータなどを確認することが可能です。また出力形式がパースし易いXMLですので、作成(・デプロイ)したFlexアプリケーションが意図した通りかどうかの検証を、外部スクリプト等との組み合わせで自動化する、などの利用方法が考えられます。少々余談になりますが、「-abc」オプションによるディスアセンブリの出力について、筆者は、開発したFlexアプリケーションで問題があった際の原因究明の際に利用し、助かった経験があります。あるFlexアプリケーションをデバッグビルドした際には動作に問題がなかったものの、(全く同じソースコードに対して)リリースビルドを行うと、実行時にエラーが発生してしまう、ということがありました。それで、両方のビルドで生成されたSWFに対し、それぞれ「swfdump -abc」を実行して、生成された命令セットの差分を比較しました。その結果、実行時エラーとなったメソッドで、ビルド間で命令セットの差異が生じていることが確認でき、問題の原因が特定できました。
(結局、問題の原因として特定したメソッド内での実装方法を調整することで解決)
参考までに、swfdumpによる出力例を以下に示します。
例えば、カスタムコンポーネントを開発する際などに、Flex SDKの標準コンポーネントに少し手を加えて様子を見てみたい。trace呼び出しを追加して出力を見てみたい。といった場合があると思います。そのための手順を紹介します。比較的簡単な手順で試してみることができる方法です。
本格的に行うには、Flex SDKの公開リポジトリからソースコード一式を手に入れてリビルドし、作成したswcをプロジェクトで使用します(手順は後述します)
asのカスタマイズをしてみましょう
プロジェクト内に、mx
asというファイルを作成
asの内容を、上のファイルにコピー&ペースト
ビルドして実行
asのコメントアウトされているtrace文を有効にしてみると分かり易いでしょう
上記をより本格的に行うためには、Flex SDKをリビルドしてライブラリ(swcファイル)を作成し、プロジェクトのリンク設定で、ビルドしたライブラリを指定します。Flex SDKのクラスファイルをカスタマイズする場合は、都度ライブラリをビルドします。
まずは、Subversionのクライアントをインストールし、リポジトリからソースコードをチェックアウトしましょう
x」を取得してみます。※注 実際には一行です。改行は入力しないで下さい。
全てチェックアウトするまでには10分程度かかるのではないでしょうか
ビルド自体は簡単で、SDKのトップレベルのディレクトリに移動して、「ant」を実行するだけです。これで一式ビルドされます。
あとは、作成されたライブラリファイル(*
swc)を、プロジェクトのリンク設定に指定すれば完了です。参考までに、テストプロジェクトを作成して標準のリンク設定を変更し、ビルドしたライブラリファイルを参照させた時のスクリーンショットです。普段、あまり具体的に扱うことのない基底クラス、例えばUIComponentやListBaseの構成や実行時の振る舞いを理解するために、これらのクラスの小規模なカスタマイズを加えて動かしてみるのは有効です。是非お試し下さい。
デバッグに役立つTIPSを紹介してきましたが、いかがでしたでしょうか
Flexアプリケーション開発の一助となれば幸いです。ささやかながら、冒頭で紹介したdispatchEventHookを登録してイベントフローをダンプするメソッドをライブラリ化しました。発生したイベントをインデントしてtrace出力します。
著者について
金融系システムのRIA化を得意とし、日々アーキテクチャー設計と実装に奮闘中
最近は Web での執筆や RIA アーキテクチャ構築、クラウド開発に忙しい。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
「Flexアプリケーションに設定できるキーボードショートカット」
Flexで実際の業務アプリケーションやWebサイトを構築する際にキーボード周りの実装でトラブルが発生することがあります。ちょっとした工夫でトラブルを回避し、アプリケーションが使いやすくなるようなTIPSを紹介します。この記事は初級、中級のFlex技術者の向けです。
必要なソフトウェア
こちらからダウンロードできます。それでは、詳細を説明していきます。Flexアプリケーション、特に業務用途では、要件にキーボードショートカットが含まれることが多くなります。一般的なアプリケーションでは、キーボードショートカットは当たり前のように定義されていますし、良く使われる機能に対してキーボードショートカットを定義することは、ユーザビリティの向上や業務効率の改善に繋がるため、求められることの多い機能であるように思います。
(良く耳にするのは、ファンクションキー(F1~F10)に対して、特定の操作を割り当てたいという要求)
ところが、Flexアプリケーションでは、全てのキーボードショートカットを使用できる訳ではありません。これは、Flexアプリケーションがブラウザ上で動作することによる制約です。Flexで使用できるキーボードショートカットが一覧になっているものを探したのですが、見当たらなかったため、今回一覧表をブラウザ毎に作成しました。Flexアプリケーションの仕様の検討の際などに役立てて頂ければ幸いです。また、キーボードショートカットが使えるかどうかの判定に使えるサンプルも併せて作成しました。Flexでキーボードショートカットを実装する方法は最後に紹介しますので参考にして下さい。
Flexアプリにキーボードショートカットを割り当てる際の制約
以下のような制約が存在します。
1、ブラウザによる制約
単体で動作するAIRアプリにはこの制限はありませんが、ブラウザ上で動作するFlexアプリケーションの場合、ブラウザにショートカットキーのイベントがインターセプトされてしまいます。その結果、Flexアプリ側ではそのキーのイベントを検出することができません。JavaScriptを用いて、ブラウザに一旦受け付けられたキー入力を、独自にFlash側に送るという実装も可能ですが、キーによっては完全に動作しないこともあります。また、実装や仕組みが煩雑になることや保守性の低下などの点からあまりお勧めできません。
OSのショートカットキーは、OSにショートカットキーのイベントがインターセプトされ検出できない、あるいは、検出はできるがOSのデフォルトの挙動が実行され、結果としてFlashからキーフォーカスが外れるため、Flashでの使用は困難です(例: Windowsキー)
これは、Altキーがアプリケーションの「アクセラレータキー」として機能するためです(例: メニューを開く)
参照ページ(Flash CS3 ドキュメンテーション キーボードのキーとキーコードの値)
それでは実際の実装例を紹介します。実際の動作確認はこちらからご利用ください。キーボードイベントを監視・取得して、押されたキーの情報を下のテキストエリアに表示するサンプルです。使いたいキーボードショートカットが使えるかどうか、確かめることが出来ます。
キーボードショートカットについて駆け足で紹介しましたが、いかがでしたでしょうか
ところで、本編とは直接関係ありませんが、タブキーによるフォーカス関連で便利なTipsを一つご紹介します。
一般的なFlexアプリケーションでは、ブラウザのアドレスバーへフォーカスが移動しない方が好都合のことが多いと思われますので、このプロパティは「false」に設定すると良いでしょう
このプロパティのデフォルト値は「true」なので、明示的に設定しない限り、Flexアプリケーション内でTABキーを押し続けた際には、Flexアプリからブラウザのアドレスバーへフォーカスが「シームレスに」移動するという挙動になります。
html」に設定を追加するとよいでしょう
IE8のキーボードショートカット
IE7のキーボードショートカット
IE6のキーボードショートカット
5のキーボードショートカット
Operaのキーボードショートカット
著者について
金融系システムのRIA化を得意とし、日々アーキテクチャー設計と実装に奮闘中
最近は Web での執筆や RIA アーキテクチャ構築、クラウド開発に忙しい。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Flexで実際の業務アプリケーションやWebサイトを構築する際に発生するトラブルに対してちょっとした工夫でアプリケーションが使いやすくなるようなTIPSをご紹介していきます。初級、中級のFlex技術者の方向けの記事となります。
必要なソフトウェア
ソースファイルのダウンロード(今回のTIPS:初期ロード時のフォーカス制御
目的:初期ロード時にFlexコンポーネントにフォーカスをセットする。
例えば、ログイン画面が最初にあるアプリケーションを考えてみましょう
ユーザーとしては、アプリケーションが立ち上がった状態でキーボード入力をすると、ユーザ名などの入力欄に入力可能な状態になっていると嬉しいはずです。一見簡単に実現できそうですが、Flex/Flashアプリケーションでは少々工夫が必要になります。
フォーカスの設定:
//ユーザー名入力欄にフォーカスをセット
しかし、これだけではTextInputにフォーカスが当たりキー入力が可能な状態にはなりません。キー入力を可能にするには、FlashのSWFがロードされている領域に「ブラウザのフォーカスが当たっている」必要があります。通常、ユーザーがFlashの領域をクリックすることなどにより、ブラウザのフォーカスがセットされますが、ユーザーの操作がない初期状態でフォーカスをセットするには、JavaScriptを使用して明示的に行う必要があります。
ロード時にSWFの領域のフォーカスをセットする例:
以上を整理してみます。コンポーネントにフォーカスがセットされる。
ブラウザのフォーカスがSWFに当たっていれば、そのコンポーネントにキーボード入力が可能
「1」の処理ですが、ブラウザの種類・バージョンによって適切な記述が微妙に異なりますので、クロスブラウザ処理を容易にするために、ライブラリを使うことにします。
Applicationクラスを継承したサブクラスを作成し、共通処理としてそこに記述するようにしましょう
* アプリケーション起動時にフォーカスをセットする対象
15にて行いました。これらのブラウザでは、SWF領域に対して「focus()」を実行しても、フォーカスが設定されないようです。
著者について
金融系システムのRIA化を得意とし、日々アーキテクチャー設計と実装に奮闘中
最近は Web での執筆や RIA アーキテクチャ構築、クラウド開発に忙しい。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
連載:Flex/AIRハマり帳~第4回 開発環境と本番環境の切り替えでハマらない方法~ | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
開発環境と本番環境の切り替えでハマらない方法~
過去3年間のFlex/AIR開発を通じて、筆者はそうした「落とし穴」にことごとくハマり、そのたびに「二度と繰り返すまい」との思いで要点をメモしてきました。
本連載では、その筆者の「Flex/AIRハマり帳」をもとに、これからFlex/AIR開発を始める方が同じ過ちを繰り返さないためのささやかなtipsを紹介していきたいと思います(なお、ここで紹介するtipsは、あくまで筆者の経験に基づいて得られたものであり、アドビシステムズの公式な提供情報ではないことにご留意ください)
開発サーバーと本番サーバーがごっちゃになる。Flex/AIR開発では、「ああこれは最初から用意しておくべきだった。」と後悔しがちなポイントがいくつかあります。そのひとつが、Flex/AIRアプリケーションを「開発用」と「本番用」とで切り替える仕組みです。Flex/AIRに限らず、Webアプリケーション開発では、開発やテスト、そして実運用といった段階に応じて、以下のような複数のサーバーを用意することが一般的です。
開発環境(日々の開発作業やテスト作業で使用)
ステージング環境(本番サーバーへのリリース前のテスト作業で使用)
本番環境(実運用に使用)
プロジェクトによっては、ステージング環境が省略されることも多いでしょう
しかし少なくとも、開発環境と本番環境は別々の環境(Webサーバー、アプリケーションサーバー、DBサーバーなど)を用意し、開発環境上で徹底的にテストしたのち、リリース日には最新コードを本番環境に載せる――というリリース作業を実施するやり方が主流ではないでしょうか
Flex/AIRではないHTMLベースのWebアプリケーションの場合は、こうした開発環境と本番環境の区別はそれほど難しくありません。
例えば前者のサーバーがdev
comというドメイン名であるとして、開発作業やテスト作業を行う時は開発者がWebブラウザ上でdev
comというURLを入力すれば、開発環境に接続できます。この入力さえ間違えなければ、両者を混同することはありません。例えばFlex/AIRアプリケーションの内部でHTTPServiceなどを使用してサーバーに接続するケースでは、その接続先はアプリケーション自身が指定します。comといった具合にURL内のホスト名を適宜切り替える必要があるのです。Flexの場合は、この問題への対処はさほど難しくありません。url」プロパティを参照することで自分自身のダウンロード元URLを取得できます。getServerNameメソッドを組み合わせることで、サーバーのホスト名を動的に取得できます。このホスト名を元に接続先URLを組み立てれば、「開発環境のFlexアプリは開発サーバーに接続し、本番環境のFlexアプリは本番サーバーに接続する」という動きを自動的に実現できます。以下のサンプルページでは、この方法を用いてホスト名を自動取得しています。
<図:ホスト名取得のサンプル(サンプル表示後、右クリック→「ソースの表示」でソースが見られます)>
ただしこの方法には1点注意が必要です。よって例えば、アプリケーションURLが「file:///」で始まる場合は開発サーバーのホスト名を固定的に返すコードを記述する、といった対策が必要になります。AIRアプリの場合はどうする。上述の方法は、残念ながらAIRアプリケーションでは使えません。
ご存じのとおりAIRアプリケーションはWebブラウザ内部で表示されるWebページではなく、「
swf」といった値が入り、接続先のホスト名を取り出すことが不可能です。
よってAIRアプリにおいては、airファイルのリリースビルドを作成する時点で、そのビルドが「開発用」なのか「本番用」なのかを識別するフラグを以下のような手段で埋め込んでおく必要があります。例えば、定数保持用のASクラスなどに以下のような定数のかたちでフラグを記述します。あとは、同フラグの値に応じて接続先ホスト名を切り替えたり、デバッグやテスト用に埋め込まれたコードを実行したりといったロジックを記述しておきます。また、こうしたフラグや接続先ホスト名をリソースバンドルに記述しておく方法もあります。
デスクトップに置いたファイルで環境を判定
もうひとつ便利な方法はAIRのファイルシステムAPIを利用して実行環境を判断する方法です。例えば、以下のようなコードをAIRアプリ内で記述します。このコードでは、AIRアプリが実行されたPCのデスクトップ上に「dev」という名称のファイルまたはフォルダが存在するかチェックし、存在するならisDev変数にtrueをセットしています。一方、開発者やテスト担当者は、作業に使用するPCのデスクトップ上にdevという名称の空のファイルを必ず作成しておきます。これにより、AIRアプリのリリースビルドを「開発用」と「本番用」の2種類を用意しなくても、1つのビルドでそれぞれの環境用に自動切り替えする仕組みを実現できます。この性質を利用して、AIRアプリが「Flex Builder上で開発作業中」なのか「インストール済みアプリケーションとして実行中」なのかを判定できます。開発環境として必ずFlex Builderを用いる場合は、この方法も自動切り替えの手段として有効です。
アプリのバージョン番号もチェックしよう
Flex/AIRアプリケーションを実運用する際には、「開発用」か「本番用」かの違いのほかにも、「アプリケーションのバージョン」の違いも重要となるケースがあります。バージョン間でサーバー側が提供するAPIの動作が大きく変更されたような場合、古いバージョンのFlex/AIRアプリから新しいバージョンのサーバーに接続すると、サーバー側の実装方法によっては動作やデータ内容に不具合が発生することもあります。こうした状況を防ぐには、Flex/AIRアプリからサーバーにリクエストを送信する際に、アプリのバージョン番号も合わせて送信してサーバー側でそれをチェックします。もし古いバージョンのアプリからのリクエストであれば、サーバー側からエラーを通知します。
AIRアプリの場合は、すぐさまアップデート機能を起動すればよいでしょう
もちろん、AIRアプリの細かなバージョンアップのたびにこうしたアップデートを強制すると、ユーザーにとって使いにくくなる場合もあります。
よって、例えばアプリのバージョン番号を「1
0」のように「<メジャーバージョン番号>
<マイナーバージョン番号>」という形式にしておき、「メジャーバージョン番号が変化した場合は強制アップデート」、「マイナーバージョン番号が変化した場合はユーザーへのお知らせのみ」といったロジックにしておくのがより現実的です。以上、今回はFlex/AIRアプリの実行環境の違いを検出し、接続先サーバーやそのほかのロジックを切り替える方法を紹介しました。筆者が担当したある案件では、開発の初期からこうした仕組みを用意しておかなかったために、テスト時に誤って開発中のAIRクライアントから本番サーバーに接続してしまいデータベース内容の不整合が発生したケースがありました。幸いサービスのリリース前でしたので大事には至りませんでしたが、こうした仕組みの重要さを知らされました。ぜひ皆さんのプロジェクトでも検討してみてください。
著者について
Adobe FlexおよびAIRなどのリッチ・インターネット・アプリケーション分野をはじめ、Javaサーバサイド・プログラミング、データベース開発、仮想化技術などを中心に執筆活動を行っている。また技術文書や書籍の翻訳も手がけており、翻訳書に「XML構築ガイド」(ピアソンエデュケーション)がある。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
単に製品名が変わっただけではありません。Adobe Flexチームが費やした2年の月日にふさわしい進化を遂げています。Flashプラットフォーム向けの優れたアプリケーションを作成するための開発環境を、あらゆるタイプのデベロッパーの生産性を向上できる新しい刺激的な方向に発展させました。オープンソースのFlexフレームワークによって、リッチインターネットアプリケーション(RIA)とコンテンツを短期間で構築できるようにする、Eclipseベースのプロフェッショナル向け開発ツールに、多くの強力な新機能が加わりました。この正式リリースは、2009年中にリリースした2つの公開ベータ版を経て完成されました。ベータ版でプレビューしていただいた機能が完全になっている他、さらに追加された機能もあります。この記事では、これらの新機能のごく一部をご紹介します。この記事を最大限に活用するには、次のソフトウェアとファイルが必要です。
この記事に必要な予備知識
新機能のご紹介
ほとんどのFlexアプリケーションでは、まずデザインかデータのいずれかに焦点を合わせ、コーディングとテストのプロセスを経て、デプロイ作業に進みます。このプロセスから、このリリースの3つの主な機能のテーマが生まれました。
データ中心型の開発
IDEによる生産性とテスト
アプリケーションが、ひらめきから生まれた非常に特殊なデザインから始まった場合、そのデザインが、最終的なアプリケーションで詳細まで実現されていることが重要です。
アドビの先進のクリエイティブツールから生まれたコンテンツが、インタラクティビティの追加プロセスを経て、アプリケーションのロジックと、アプリケーションのサーバーやサービスとの完全な統合へ至る過程で、デザイナーの当初の意図に忠実であり続けるにはどうすればいいでしょうか
この疑問に答えるものが、アドビのデザイナー/デベロッパーワークフローのテーマです。
新しいワークフロー
このため、デザイナーは今までにない気軽さでデベロッパーとの共同作業を進めることができます。
データ中心型の開発の実現
総合的なデザインから着手するアプリケーションも多く存在しますが、ほとんどの場合、存在するのはまずデータです。企業データベースの情報をわかりやすく提示するダッシュボードを作成することもあれば、既存のColdFusionまたはPHPアプリケーションに新しいフロントエンドを提供することもあります。あるいは、RESTやSOAPなどのサードパーティサービスに大きく依存していることもあります。サーバーやサービスの詳細は変更されることもありますが、基本は同じです。必要なものは、それらのすべてのサービスに接続し、Flexコンポーネントにバインドするための簡単な方法です。Flexの経験豊富なデベロッパーでも、Flexを初めて使用するWebアプリケーションデベロッパーでも、これらの機能によって作業期間が大幅に短縮され、ブラウザーのHTMLだけでは非常に困難か、あるいは不可能な、データ中心型のエクスペリエンスを実現できます。
データ/サービスモデルの定義
Flexコンポーネントへのサービス操作のバインド
ページングやデータ管理などの高度なデータ機能の実装
データ/サービスモデルの定義とバインドが簡単に
データ/サービスモデルは、サーバーまたはサービス操作とそれらが返すデータを、すべてFlash Builder 4環境で表示するためのアプローチです。各種バックエンドテクノロジーに基づく様々なサービスを1つのモデルで表示できます。操作名をドラッグしてコンポーネントにドロップすれば、サーバー側の操作の結果をFlexコンポーネント(データグリッドやリストなど)に簡単にバインドできます。サービスを使用して、マスター/詳細機能のフォームを生成したり、チャートを作成するのも簡単です。データベース内のテーブルを指定すると、一般的なデータアクセス操作をすべて実装したColdFusionコンポーネントまたはPHPクラスが自動的に生成されます。これは、実際に使えるサーバー側ロジックを迅速に作成し、サービスの実装方法を理解するための方法として非常に有効です。
高度なデータ管理機能
もちろん、データ中心型のアプリケーションで重要なのは、操作をコンポーネントにバインドすることだけではありません。Flash Builderでは、サービスのデータ管理をクライアント側で行うことができるため、データをオンデマンドでフェッチして大量のデータを簡単かつ効率的にスクロールできます。また、変更履歴によってアクションを取り消したり、通常はハードコードしなければならない共通のCRUD(作成、読み取り、更新、削除)関数を自動生成することも可能です。その結果、通常のHTMLフロントエンドでは不可能な豊かな体験を提供するアプリケーションを作成できます。
デベロッパーの生産性の向上
アプリケーション開発のワークフローを、Adobe Flash Catalystを使用して開始する場合も、データ中心型の機能を使用するサービスをベースとして開始する場合も、アプリケーション開発作業の多くはコードの記述とテストです。Flex Builder 3のリファクタリング、デバッグ、プロファイラーについて、最も要望の多かった機能強化を行いました。デバッグ機能には、条件きブレークポイント、ウォッチポイント、指定行までの実行、式評価が追加されています。リファクタリング機能は、パッケージ名の変更、パッケージの移動、および複数ファイルの移動に対応しました。IDEによる新しい生産性機能を確認するには、次の操作を試してください。
イベントコードの生成
なお、ここに挙げた生産性向上機能は、プロジェクトをFlex 4に移行したりSparkコンポーネントセットを使用したりしなくても利用できます。
テストの進化
ネットワークの監視機能では、Flashクライアントとバックエンドサーバーの間のネットワークトラフィックをFlash Builder内から確認できます。これにより、Flexアプリケーションのデータアクセスの部分のデバッグや、クライアントとサーバーの間に存在するパフォーマンス問題の診断が容易になります。アプリケーション開発プロセスでは、ユニットテストも重要です。FlexUnitのサポートを組み込むことで、ユニットテストが簡単に行えるようになりました。テストの設定、テスト用ファイルの作成、テスト実行、テスト結果の分析が可能です。
コマンドラインによるビルドとデプロイ
アプリケーションのビルドとデプロイの準備が整ったら、Flash Builderに新たに追加されたコマンドラインビルド機能を使用できます。これによって、Flexを企業の自動ビルドシステムに簡単に組み込むことができます。Flexの使用が初めての場合、アプリケーションを最初に起動したときに表示される新しいスタートページで、豊富な情報を参照していただけます。生産性向上にすぐに役立つチュートリアル、機能説明のビデオ、サンプルコードを用意しています。このツールを使ってすばらしいアプリケーションが生み出されることを、製品チーム一同楽しみにしています。
著者について
コンピューターベース体験の品質、豊かさ、価値を高めるために奮闘中です。富士通に在職中は、政府および企業顧客向けのWeb、キオスク、モバイルユーザーインターフェイスの開発に携わっていました。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
0:次世代のリッチインターネットアプリケーションの実現 | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
0:次世代のリッチインターネットアプリケーションの実現
アドビ(旧マクロメディア)は2005年10月、Flash® Playerランタイムを利用したリッチインターネットアプリケーションを世界のあらゆる場所で作成してデプロイすることができる開発者用ツール、ライブラリ、およびランタイムサービスの新しいラインナップ、Adobe® FlexTM 2を開発者コミュニティに初めてお披露目しました。以来、数万人の開発者がFlexを使用したアプリケーション開発を始めており、アドビに対してフィードバックが寄せられています。また、アドビとマクロメディアはひとつになり、新しいアドビが誕生したことにより、インターネットアプリケーションの将来を広げるまったく新しい機会が開かれました。ここに、過去数か月間の成果を示すものとして、Flex 2ベータ3を発表します。直感的なプログラミングモデル、強力なEclipseベースのIDE、およびJ2EEベースのランタイムサービスのリッチセットを備えたFelx 2製品ラインは、クロスプラットフォームのリッチインターネットアプリケーションを開発するための最も包括的なソリューションを提供します。新しく発表された価格構成では、サーバにインストールしなくても、無償のダウンロード製品で、多岐にわたるアプリケーションの開発およびデプロイを行っていただけます。リッチインターネットアプリケーション開発の常識を変える。アドビ(旧マクロメディア)は2001年初頭、開発者やデザイナーがMacromedia Flashを使用して作成していたアプリケーションを称する用語として、「リッチインターネットアプリケーション」(RIA)という新しい言葉を作り出しました。これらのアプリケーションにより、従来のHTMLアプリケーションの設計上の制限やインタラクションの制約が軽減されたことは明らかです。リッチインターネットアプリケーションでは、ユーザが操作を行うときにページ全体の表示を更新する必要がありません。データの変更された部分だけを送信し、レイアウト情報の転送を最小限にとどめることにより、ネットワーク帯域幅を効率的に使用します。また、エンドユーザがデータを直接操作できるさまざまなインタラクションを備えています。リッチインターネットアプリケーションでは、オーディオとビデオをアプリケーションのユーザインタフェイスにシームレスに組み込むことができます。ユーザがアプリケーション内を移動する間、アプリケーションのコンテンツが明確に維持されます。そして言うまでもなく、高画質印刷をサポートしています。リッチインターネットアプリケーションは広範囲にわたって大きな影響をもたらしました。インターネットを趣味とするアマチュアから大規模企業までのあらゆる開発者がRIAを作成しており、その結果としてビジネスの大幅な改善が実現しています。大手の金融機関では、顧客の間にブランドを定着させたり、基幹データを効率的に操作し内部のビジネス上の意思決定を高速化するために、RIAを使用しています。オンライン小売業者の場合は、清算プロセス中にショッピングカートが無効にされる割合が50%減少しました。個人の開発者は、洗練されたオンライン地図サービスに、ニューヨーク市内の信号機に取り付けたWebカメラを統合し、最新の役立つ交通情報を通勤者に提供しています。顧客の間でリッチインターネットアプリケーションの利用が広がり始めると、開発者はすぐにいくつかの特別なニーズに気づきました。RIAによっては、リアルタイムのデータフィードを取り込むことが必要な場合があります。また、随時接続の環境で実行され、接続が確立したときに効率的にデータの同期を行うことが必要な場合もあります。独自のバイナリプロトコルの利用が求められる場合もあります。さらには、複数のクライアントがデータの単一のインスタンスを共有することが必要な場合もあります。アドビ(旧マクロメディア)では、これらの初期に確認された新たなニーズに関する作業を手始めとして、これらのニーズに応えるだけでなく、広範なアプリケーションの固有のニーズに対応するために、拡張が簡単に行えるRIAプラットフォームの実現に着手しました。クライアントランタイム、開発環境、クラスライブラリ、およびデータサービスを提供し、開発者のために次のような活動を支援したいと考えました。
RIAアプリケーション開発における高い生産性の実現
効果的なインタフェイスパターンを持つ表現力豊かなアプリケーションの作成
広く使用されているハイパフォーマンス、クロスプラットフォーム、クロスブラウザのランタイム環境を利用したアプリケーションのデプロイ
プロジェクトの規模や作業の複雑さに柔軟に対応できるツールおよびテクノロジーの使用
ユーザを夢中にさせるようなアプリケーションを作成するための最良の手段としてFlex 2製品ラインをご紹介できるのは、非常に喜ばしいことです。Flex を使用すれば、単純なレストランのメニューから、複雑なワークフローシステムやトレーダー向けのデスクトップの同期化まで、幅広いアプリケーション開発を実現することができます。5のご使用経験のある方は、Flex 2が単なる新リリースではないことを認識する必要があります。技術面では、Flex 2には、まったく新しいレベルのリッチインターネットアプリケーションの作成を可能にする新機能が追加されています。こうした技術的な進歩に加え、Flex 2はそのパッケージ構成や価格、導入方法についても大きく変化しました。Flex SDKには、あらゆるXMLおよびSOAP Webサービスに接続できるFlexアプリケーションを開発、コンパイル、およびデプロイするために必要なコマンドラインコンパイラおよびドキュメントが含まれています。Flex SDKは単独でダウンロード可能で、このキットにより、商用利用を含め、あらゆるアプリケーションの開発およびデプロイを無償で行えます。これらの無償の製品は、あらゆる開発者やプロジェクトが利用可能な業界最強のクロスプラットフォームRIAテクノロジーを提供します。これは非常にすばらしいことです。0が導入されます。0は、生産性とパフォーマンスが高まるように設計された、次世代のECMAScript標準に基づく強力なオブジェクト指向プログラミング言語です。Flash Player 8(2005年9月リリース*)では、レンダリングエンジンが大幅に改良され、豊かな表現力を実現する一連の機能(フィルタ、高度なグラデーション制御、レンダリングパフォーマンスなど)と、今日のWebでは他に例を見ないビデオサポート用の拡張機能(高品質のコーデック、アルファチャンネルのサポートなど)が追加されています。AVM2は、RIA開発者のニーズをサポートするために1から開発されたものです。この新しい仮想マシンは非常に高速で、完全なランタイムエラーレポートおよび業界標準のデバッグ機能をサポートしています。バイナリソケットをサポートしているので、Flash Playerがどのようなバイナリプロトコルでも動作するようにすることができます。0のコードを実行するAVM1も搭載されています。現在では、アドビはECMAScript委員会の議長を務め、その発展と推進に一役買っています。0には、JavaやC#などの言語の利点であるコンパイル時の厳格なタイプチェックを行うコンパイルモードが用意されています。ECMAScriptを拡張したこの標準では、XMLがネイティブのデータタイプとして追加されており、XMLとのやり取りやXMLの操作をより自然に行うことができます。0では、テキストの解析および処理に役立つ正規表現のサポートが追加されています。W3C DOM Events標準に基づく統一モデルの採用により、従来の仮想マシンで行われていたようなその場しのぎのイベント処理が減少します。また、アプリケーション開発者向けの最新のAPIが搭載されています。Flex製品ラインは、強力なクライアントランタイム、プログラミングモデル、開発環境およびデータサービスをアプリケーション開発者に提供します。一般的なデザインパターンをサポートし、既存の開発テクノロジやデプロイメントテクノロジにも対応し、標準ベースの新しい言語の利益をもたらします。この製品ラインは以下のテクノロジから構成されます。0が提供する基盤の上に構築されており、優れたRIAを作成するためのベストプラクティスに基づくリッチなクラスライブラリを提供します。Flexフレームワークは、拡張可能なユーザインタフェイスコンポーネントのリッチセット、レイアウトおよびユーザインタラクションを制御するための柔軟性のあるモデル、およびリモートサービスからデータにアクセスし、それをデータオブジェクトやユーザインタフェイスコントロールにバインドするための堅牢なインフラストラクチャを備えています。Flexのコンポーネントライブラリには、ボタンやカラーピッカーなどの単純な部品から、データグリッド、アコーディオンペイン、リッチテキストエディタなどの高度なコントロールに至る、100余りのコンポーネントやコンテナが収録されています。開発者は、これらの組込みコンポーネントを使用してアプリケーションのユーザインタフェイスを作成することができます。また、そのサブクラスを作成して動作を変更したり、コンポーネントAPIを使用してまったく新しいコンポーネントを作成したりすることもできます。他の最新のユーザインタフェイス開発環境と同様に、Flexでは、データグリッド上のドラッグ可能カラムなどの定義済みのインタラクションを利用したり、明確に定義されたイベントを利用してアプリケーション固有の動作を定義したりすることも可能です。開発者はMXMLを使用してFlexコンポーネントをレイアウトします。MXMLは、アプリケーションの視覚的外観の制御を宣言によって行うXMLベースの言語です。MXMLを使用すると、コンポーネントを配置したり、画面サイズに合わせてユーザインタフェイスのサイズを変化させるための制約を指定することができます。また、ビューステートやトランジションを使用して、異なるユーザアクションやアプリケーションイベントに対するアプリケーションの応答を制御することもできます。アプリケーションのルックアンドフィールをカスタマイズする場合は、カスケーディングスタイルシート(CSS)を使用して組込みのスタイルプロパティを設定するか、組込みの9スライスサポートを使用してカスタムビジュアルアセットをアタッチします。Flexアプリケーションは、一連の組込みのサービスコンポーネントを使用してデータやサービスにアクセスします。データ操作を効率化するために、Flexでは、データが返されたときに自動的にユーザインタフェイスを更新するリッチなデータバインディングインフラストラクチャを提供しています。これにより、アプリケーションはサーバからの結果を待っている間も応答が可能となります。アドビでは、Flexに対する柔軟なチャート作成用拡張機能を提供しています。開発者は、データをビジュアル化するこれらのコンポーネントを任意のアプリケーションに簡単に追加できます。Flex Charting 2のコンポーネントはクライアントでダイナミックにレンダリングされ、ドリルダウンやロールオーバーなどのチャートをより見やすくするためのインタラクティブ機能を簡単に追加できます。このコンポーネントには、外部から自由にアクセスできるAPIが用意されており、そのAPIを使って簡単にコンポーネントのカスタマイズや、独自のコンポーネントを作成することができます。このチャートパッケージは、エフェクト、スタイル、データバインディング、ドラッグ&ドロップの使用についてフレームワークの一般的なインフラストラクチャに統合されており、Flex Data Services (下記参照)とシームレスに連携します。Flex Builder 2は、リッチインターネットアプリケーションを作成するための生産性の非常に高い環境を開発者に提供するために定義されたまったく新しいツールです。非常に高度なコーディングおよびデバッグ用の環境と、レイアウト、スタイル、およびインタラクションを直感的に設計できるツールを提供し、維持可能な優れたコーディングプラクティスを推進します。
Flex Builder 2を使用する開発者は、コーディング作業が大幅に加速することに気づくでしょう
コードナビゲーション機能を使用すると、メソッドやクラスの定義をすばやく見つけることができます。ファイルを保存するたびにアプリケーションのインクリメンタルコンパイルを自動的に行うオプションは、編集、実行、デバッグのサイクルをスピードアップします。組込みのエラーレポート機能は、エラーの検出と修正を容易にします。状況依存ヘルプシステムを使用すると、ドキュメントをすばやく検索できます。Flashアプリケーションを効率的にデバッグできる高度なデバッグ方法により、既にEclipseを使用しているユーザも単一のIDEでクライアントとサーバのコードをデバッグすることができます。最後に、Flex Builder 2はCVSなどのソースコントロールシステムやAntなどのビルドツールと統合されているので、チームでの開発が容易です。絶対位置、相対位置、または定義済みレイアウトのルール(垂直配置、タイル配置など)に基づいてコントロールを柔軟に配置できるビジュアルサポートも提供されています。革新的な機能である「ビューステート」のビジュアルサポートを使用すると、特定のイベントに対応したコントロールやアプリケーション全体の外観の変更を、わずか数行のコードでビジュアルに定義できます。CSSエディタを使用すると、新しいスタイルシートの作成や既存のスタイルシートとの統合が容易なだけでなく、編集されたスタイルやスキンをデザインビューに表示しながらコードを記述することができるので、更新とテストのサイクルが短縮されます。さらには、手作業で編集しているコードとデザインビューによって生成されたコードの間をシームレスに移動できるので、チームの開発者間でコードの矛盾が生じる心配がありません。目標としているのは、インタラクティブコンテンツのデザイナー、ビデオ開発者、マルチメディア制作者、アプリケーション開発者にあらゆる面で最高のものを提供することです。Flash Professionalを使用すると、緻密さと表現力に秀でた強力なインタラクティブコンテンツやメディアを作成できます。さらに、Flex Builderを使用すれば、ユーザを夢中にさせるようなすばらしいアプリケーションを作成できます。今後は、これらのツール間のワークフローを強化し、より簡単かつ効果的にツールを連携できるようにしたいと考えています。0では、データの転送や既存のサーバインフラストラクチャとの統合を支援する一連のランタイムサービスを提供していました。Flex Data Services 2のデータサービスでは、そこから大きく前進し、各層間でデータを透過的に同期化することによってエンタープライズアーキテクチャと情報プレゼンテーションを結合する、一連のメッセージベースのサービスと支援機能が提供されています。この結果、クライアント層、アプリケーション層、およびデータベース層の間でデータをやり取りするために必要なエラーの生じやすいコードの記述、デバッグ、および維持にかかる時間が短縮され、開発者の生産性が飛躍的に高まります。また、Flex Data Servicesは、クライアントとサーバの間でデータをやり取りするための堅牢なメッセージングインフラストラクチャを備えており、開発者は、リアルタイムデータ、必要に応じて利用できるサービス、および非常に大きなデータセットを効率的に活用するアプリケーションを簡単に作成できます。フレームワークをシームレスに拡張するData Services の機能を使用すると、ごくわずかなオーバーヘッドでその利益を享受できます。たとえば、クライアントサイドのメッセージングアーキテクチャは、イベントやデータのキューイングと同期化のための洗練されたモデルを提供します。組織は、随時接続のアプリケーションを最小限の労力で作成できます。Flashプラットフォーム: リッチインターネットアプリケーションをさらにリッチにする。Flashは、その高度なテクノロジーと、従来のデザインプラクティスの常識を超えた驚くほどクリエイティブな開発者コミュニティのおかげで、常にユーザエクスペリエンスの最先端をリードしてきました。その結果もたらされたユーザエクスペリエンスのデザインの進歩は、多くの場合、Flex開発者もすぐに利用することができます。たとえば、最近急速に利用が拡大しているオンラインオーディオおよびビデオは、そうした例の1つです。Flash Playerを使用すると、たとえば、RIAでビデオキューポイントのイベントをトリガするといったように、ビデオ要素を、それを含むコンテンツやアプリケーションにシームレスに統合できます。
短いビデオファイルにはプログレッシブダウンロードを使用し、インタラクティブで高品質な長いビデオのストリーミングにはFlash Media Server 2
0を使用します。開発者コミュニティは、アプリケーションとリッチメディアの間に現在存在するコミュニケーションの壁を打ち破るリッチインターネットアプリケーションを作成するために、これらの機能を活用しています。各アプリケーションに別々のメディアプレーヤーを起動させると、ユーザエクスペリエンスは断続的なものになってしまいます。しかし、Flex開発者は、そうする代わりに、アプリケーションのユーザインタフェイスおよびワークフローにビデオを本当の意味で統合することができます。たとえば、トレーニングビデオでは、アプリケーションの特定のユーザインタフェイス要素を強調表示してユーザを導いたり、ユーザの操作に応じてビデオの異なる部分を再生することができます。
最後に、アドビによるマクロメディア社の買収が完了した今、Flex製品ラインに新たにすばらしい技術革新がもたらされることでしょう
今後注目しているエリアには、リアルタイムコラボレーションのサポート、デザイナーおよび開発者のワークフローの改善、オフラインアプリケーションおよびドキュメントのサポートの強化などが挙げられます。Adobe Labsでは、今後数か月のうちに、将来への方向付けについてお知らせする予定です。
開発者コミュニティへの協力のお願い
Flex 2製品ラインが目標としているのは、顧客が最高のアプリケーションエクスペリエンスを得られる優れたプラットフォームを開発者コミュニティに提供することです。ここで、早期に製品の方向付けを確認していただき、フィードバックを提供していただく機会を開発者コミュニティに提供するために、Flex 2のプレリリースバージョンを作成しました。Adobe Labsでベータ版をダウンロードし、ご協力くださるよう、Flex製品チームに代わってお願い申し上げます。RSSフィード*をご購読になると、最新情報を確実に入手できます。ベータ版を初めから有意義にお使いいただけるよう、サンプルアプリケーションやチュートリアルなどのリソースを今後も提供してまいります。まずこれらをご覧になってから、新たな使い方をお試しください。Flex 2の機能をお試しになりましたら、どうぞご感想をお聞かせください。インターネットアプリケーションを一変するような製品群を構築するために皆様のご協力をお願い申し上げます。
著者について
に売却される Web ベースナレッジ管理 / コラボレーションシステムの開発 / 導入業務を指揮
過去 5 年間、多数のソフトウェアスタートアップにアドバイスを提供
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Flexデベロッパになるなら今が絶好のチャンスです。2006年6月、アドビではデベロッパ向けツール、ライブラリおよびランタイムサービスを備えたFlex 2をリリースしました。Flex 2を使用することで、デベロッパはどのような環境でもFlash® Playerランタイムを利用したリッチインターネットアプリケーションを構築し、デプロイできます。Flex 2はこれまでに、何万人ものデベロッパや、ヒント、秘訣、コード、多数の商用コンポーネントやオープンソースコンポーネント、アドオンなどを共有する活動的なコミュニティに採用され、大成功を収めています。もちろん、何百ものアプリケーションが新たに構築され、毎日続々とオンラインに公開されています。
6月までに90%に達することが予想されています)
LiveCycle Data Services ESを利用すれば、ユーザインタフェースに限らず、システム間のデータ通信処理においてもリッチさを拡充し、さらに、アプリケーションに一層革新的なサービスを実装できるようになります。開発がほぼ完了する段階で発表されていた従来のパブリックベータ版と異なり、今回のベータ版は、開発プロセスの早い段階でリリースされます。
そのため、バグの発生件数は高くなることが考えられますが、コミュニティからフィードバックを寄せていただく機会も増えるでしょう
これらのフィードバックは最終リリースに反映されます。5を使用してすでにアプリケーションを構築していたユーザにとって、Flex 2は大幅な変更を意味しましたが、Flex 3は、言語の変更を一切伴わず、あらゆる主要なユースケースにおいてFlex 2との下位互換性を確保する予定です。動作上の相違点はすべてリリースノートに記載されています。また、大半の変更は、互換性フラグを指定することによって、Flex 2と同じ動作に設定することが可能です。Flex 3リリースは、デザイナー/デベロッパワークフロー、データの操作、Adobe AIRアプリケーション、プラットフォームの進化の4つの主要なテーマで構成されています。
ここでは、注目すべき機能をいくつか簡単にご紹介しましょう
Flex Builderの生産性向上–Flex Builder 3には、リファクタリングサポート、パフォーマンスとメモリを調整するための新しいプロファイラ、データアクセスのためのコード生成ツールがそれぞれ追加されました。Flex Builder 3には、CS3アプリケーションからアセットをスキンとして読み込むための新しいウィザードが追加されています。Flexオープンソース化に向けた最初の一歩-アドビでは、Flexをオープンソースプロジェクトにするための最初の取り組みとして、FlexとFlex Builderのバグトラッキングシステムのほか、詳細なロードマップ情報を公開しています。これらの機能について、以下の節で詳しく説明していきます。オンラインアプリケーションのユーザビリティと全般的なエクスペリエンスを高めると、生産性の向上、サポートコストの削減、顧客満足度の向上、そして収益の増大を達成できることは、大半のデベロッパや管理者にとって既知の事実です。Flex 2を使用して独自のエクスペリエンスを構築することは可能ですが、必ずしも容易ではありませんでした。Flashユーザは、使い慣れたFlashタイムラインモデルでコンポーネントを開発した後で、簡単なパターンに従うだけで、Flexデベロッパがコードを追加しなくてもこれらのコンポーネントを組み込むことができるようになります。Flex Builderには、アプリケーションのスキニングを容易にする新しいウィザードが追加されています。Flexデベロッパは、準備ができ次第、そのアートワークをプロジェクトに読み込んで、コンポーネントのスキンとして適用できます。Flex Builderのデザインビューが機能強化され、アイテムレンダラーを正確にプレビューできるようになったほか、パンツールとズームツールが追加され、より精密な操作が可能になりました。また、ビジュアルCSSエディタが新しく加わったため、Flex BuilderユーザはFlexコンポーネントのスキンとスタイルをグラフィカルに操作できます。Flexフレームワークも拡張され、より柔軟なデザインが可能になりました。レイアウト用のFlex「ボックス」モデルは、リキッドレイアウトを作成するためのシンプルなメカニズムを提供しますが、UIデザイナーの意図が反映されるとは限りません。Flex 3では、Flex 2で導入された制約ベースのレイアウトシステムを拡張して、兄弟関係の位置付けなどの複雑なシステムに対応しています。デベロッパはこのモデルをコードに直接組み込むことができますが、Flex Builderのデザインビューの機能強化によって、このレイアウトシステムは今後ネイティブでサポートされる予定です。
データの操作
多くの場合、リッチインターネットアプリケーションでは、ユーザによるデータ操作が重要視されます。これらのコントロールで表示するデータにアクセスするため、Flex SDKには多数のサービスが用意されています。Flex 3によって、デベロッパがFlexサービスを使用してデータにアクセスするのが容易になるだけでなく、それらのデータを表示するためのデータ可視化コントロールも増強されます。Flexを初めて使用する方から、サーバ上に格納されたデータにアクセスする方法がわからないという問い合わせがよく寄せられます。
簡単なユーザインタフェースに従ってデータベースに接続し、サーバ側PHP、Java、またはASP
NETのどのコードを生成してデータを公開するかを選択できます。これらのコードは、簡単なREST呼び出しによってユーザのデータに対する標準的なCRUD操作を行います。デベロッパは、これらのコードを利用し、今後開発するアプリケーションにどのように組み込むかに合わせて編集することができます。SOAP Webサービスは、Flexアプリケーションのデータにアクセスするための方法として、今日、デベロッパに最も支持されている方法の1つです。生成されたコードによって、サービスで呼び出すことのできるメソッドを示唆するコードヒントが示され、厳格な型付けのオブジェクトに応答がデシリアライズされて、Flexアプリケーションの残りの部分に簡単に組み込めるようになります。Flex 2 Chartingパッケージは、多くのFlexアプリケーションでデータを可視化するために使用される強力なチャート作成コンポーネントを集めたものです。Flex 3では、ユーザからの要望に基づいて多数の機能を強化することによって、このパッケージに改良が加えられています。軸系では、複数の軸を使用できるようになり、DataTimeAxisでは、稼働日に基づくフィルタリングが可能になりました。データ指向の新しいグラフィックスAPIを使用することで、データ座標を作成し、チャートのすべての要素を正しい画面位置にレンダリングできます。さらに、書式設定オプションが強化されたほか、既存のチャートとの対話機能も追加されています。これによって、TreeGridなどの階層データがサポートされ、グループ化や複数列のソートなどの列オプションが追加されたほか、サマリー行などの視覚化を有効にするための書式設定も柔軟に調整できるようになりました。新しいコレクションAPIを使用すると、このグリッドに簡単にデータをフィードできます。また、OLAPタイプの簡単なクエリーもいずれサポートされる予定です。さらに、一部のListコンポーネントには、コンポーネントの操作性を高めるための機能強化が加えられています。ListとDataGridは、微小なスクロール位置とスムーズなスクロールをサポートするように強化され、ListクラスとTileListクラスは、これらのクラス内でデータが操作された場合の操作の影響を定義できるようになりました。これらのコントロールはデベロッパが頻繁に使用するので、データ指向アプリケーションの表現力が飛躍的に高まることが期待されます。Adobe Integrated Runtime(Adobe AIR、旧称Apollo)では、Webアプリケーションのメリット(ネットワークとユーザ間の接続、リッチメディアコンテンツ、開発の容易さ、到達範囲の広さ)とデスクトップアプリケーションの強み(アプリケーションの対話、ローカルリソースアクセス、個人設定、強力な機能、対話性に優れたエクスペリエンス)を兼ね備えたアプリケーションを作成できます。
Adobe AIRアプリケーションは、通常のデスクトップアプリケーションとして動作し、別のアプリケーションやシェル内で実行する必要がありません(一方、WebアプリケーションはWebブラウザ内で実行しなければなりません)
FlexフレームワークにはHTMLコントロールが追加されたため、HTMLをレンダリングして、Flexレイアウトシステムでの作業中にリンクがクリックされたことを認識するなどの基本的なイベントをサポートできるようになりました。Adobe AIRでは、1つのアプリケーションに対して複数のウィンドウがサポートされています。Flexには、カスタムとネイティブOSの両方のクロームをサポートし、サイズ変更、最小化、最大化などの一般的なウィンドウ操作を可能にする、Windowコンポーネントが追加されました。また、Web上よりデスクトップで機能が充実しているドラッグ&ドロップなどの概念をFlexフレームワークに組み込み、Adobe AIRで動作するアプリケーションでより多くの機能を活用できるようになりました。つまり、WebをターゲットとしたFlexアプリケーションの構築に使用するツールと同じものを使用して、Flexアプリケーションのコーディング、デバッグ、プロファイリング、パッケージ化、署名を行うことができます。
プラットフォームの進化
Flex 2のリリースはすばらしいことでしたが、アドビが必要と考える機能をすべて含めるには時間が足りませんでした。RIAを配布するための最強のプラットフォームを実現する取り組みは、Flex 3に引き継がれ、ツールの機能強化とFlexフレームワークの主要機能の改良が行われています。よく耳にする問題の1つに、シンプルなFlexアプリケーションであっても、ダウンロードサイズが大きいという問題があります。Flexフレームワークは非常に堅牢ですが、その堅牢さゆえに、サイズが大きいという代償があることも確かです。複数のFlexアプリケーションを構築する場合、デベロッパは、アプリケーション間で共通するコードをランタイム共有ライブラリ(RSL)に抽出することがありますが、このようにRSLを活用できるアプリケーションはほとんどありませんでした。Flash Playerのアップデート版*(Flex 3と同時にリリース予定)では、アドビプラットフォームコンポーネントの新しいキャッシュがサポートされますが、Flexフレームワークはこのキャッシュの対象に含まれます。Playerキャッシュは、Flash Playerによって管理されるという点でブラウザキャッシュと異なり、ブラウザキャッシュが消去されても消去されず、アドビによって署名されたアイテムのみを格納します。フレームワークをRSLとして使用するように構成されたFlexアプリケーションをエンドユーザが初めてダウンロードすると、このユーザはRSLの永久コピーを受け取ります。同様に構成されたFlexアプリケーションをこのユーザが次回開くと、アプリケーションのダウンロード元にかかわらず、Flash Playerはビルトインキャッシュに格納されたフレームワークのコピーを使用します。フレームワークをRSLとして使用するようにFlexアプリケーションを構成すると、90~500 KBのサイズ縮小につながります。この機能は下位互換するように実装されているので、最新のFlash Playerをインストールしていないエンドユーザーがアプリケーションを表示するためにアップグレードを強制されることはありません。Flash Player 9で導入された新しい仮想マシンは、以前のバージョンのFlash Playerより格段に高速化し、メモリ管理も効率化されていますが、パフォーマンスやメモリに問題のあるアプリケーションが作成される可能性は依然としてあります。Flex Builder 3には、こうした問題をトラッキングするための新しいプロファイラが2つ追加されています。パフォーマンスプロファイラは、特定のエリアで実行にどのぐらいの時間がかかったかなど、メソッドの呼び出しをトラッキングします。これによってデベロッパは、アプリケーションのパフォーマンスを最適化できる箇所(またはタイムラグを完全になくすことができる箇所)を特定できます。一方、メモリプロファイラを使用すると、実行中のアプリケーションのスナップショットを取得して、異常な振る舞いをしているオブジェクトを特定できます。これらの新しいツールを使用すれば、Flexアプリケーションが高速化すること間違いなしです。
アプリケーションを高速化することはもちろんですが、開発を高速化するにはどうすればよいでしょうか
Flex Builder 3には、リファクタリングをサポートする新しい言語インテリジェンス機能が追加されています。これによりデベロッパは、クラス、変数、またはメソッドの参照をすべて見つけて、名前を変更し、すべてのクラスを一度にまとめて更新できるようになりました。Flexアプリケーションは単独で動作するとは限らず、実際には頻繁に大きなHTMLアプリケーションに埋め込まれています。アドビでは今、いくつかの機能を追加することによって、FlexアプリケーションとHTMLラッパー間の統合を容易にすることに取り組んでいます。FlexデベロッパがFlexアプリケーションのプロパティとメソッドを公開すると、JavaScriptデベロッパは、アプリケーションの内部構造に関する知識がなくても、エディタでサポートされるJavaScriptコードヒントを利用して呼び出すことができます。また、FlexフレームワークにはBrowserManagerクラスが導入されたので、クロスブラウザ形式でのブラウザとの対話を容易に行えるようになりました。これにより、ユーザは、アドレスバーが変更された場合にデベロッパに通知するFlexアプリケーション内の場所にブックマークを設定して、アプリケーションが正しい状態に自動的に設定されるようにすることができます。Flex 2では、リソースのバンドルをサポートし、特定のロケールでのアプリケーションのコンパイルを可能にすることによって、グローバルアプリケーションに対応していました。Flex 3では、実行時のロケール変更を有効にすることによって、グローバルアプリケーションのサポートがさらに拡張されています。1のランタイムスタイル設定サポートと同様に、Flexアプリケーションを一度コンパイルすれば、実行時にロケールを切り替えるだけで、デベロッパが指定した任意の数のロケールを使用できるようになりました。新規ロケールは、実行時にモジュールとしてダウンロードすることもできます。
最後に、Flex 3は確かに魅力的だけれど、Flex 2のプロジェクトを進行中なので、すぐにはアップグレードできないというデベロッパの皆さん
心配はいりません。1向けのアプリケーションも構築できます。
プロジェクトプロパティのパネルで2
1 SDKを選択するだけで、アプリケーションが以前と同様に動作するようになります。
リファクタリングなどの機能も2
新しいSDKにアップグレードする準備ができたら、Flex 3 SDKを使用するようにプロジェクトを変更すれば、すべて自動的に設定されます。
透明性の向上とFlexのオープンソース化
アドビではこのたび、Flex 3に組み込まれた便利な機能を発表するとともに、Flex 3のリリースに伴ってSDKコンポーネントをオープンソースモデルに移行することも発表しました。Flex 3の現在のベータ版では、オープンソースインフラストラクチャの第一弾が展開されています。新しいバグトラッキングシステムは、JIRA上に構築されたもので、バグに関する情報の確認と投稿を目的として公開されています。以前のように、要望フォームを使ってバグを報告し、バグが解決されたかどうかを気にする必要はありません。新しいシステムによってアドビ社員と一般の人々から投稿されたすべてのバグをトラッキングできるようになります。また、Flex SDKでは夜間にビルドが投稿されるので、バグ修正プログラムを翌朝すぐに検証することもできます。夜間のビルドは、安定性に欠ける場合が多いので、実際の開発への使用はお勧めできませんが、新機能を試したり、修正プログラムを検証したりするには最適です。Flex WikiにはFlex 3関連のプランニングドキュメントがあり、リリースの機能をより明確に把握できます。デベロッパの皆さんがFlex 4の開発動向を把握できるように、公開Wikiの更新を今後も続ける予定です。アドビでは、オープンソースプロジェクトに向けた第一歩を踏み出すこと、そしてFlexの透明性を今後さらに高めていくことを大変うれしく受け止めると同時に、今夏にかけてさらなるオープンソースインフラストラクチャの展開を進めていく予定です。アドビが進めるオープンソース計画の詳細については、こちら*をご覧ください。
今すぐ始めましょう
さあ、ためらわずに始めてください。フィードバックはバグベースとフォーラムから送信できます。皆さんの開発成果を楽しみにしています。
著者について
0リリースに貢献する主任エンジニアでした。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Flex 4のアーキテクチャー変更点の概要
新しいコンポーネントとコンテナ
エフェクトの変更点
テキストの処理
印刷用に表示
Flex 4では、コンポーネントとスキンの新しいアーキテクチャーが導入されました。とはいえ、Flex 3アプリケーションをFlex 4でコンパイルする場合も、さほど多くの問題は発生しません。Flex 3との後方互換性を維持することも、この新リリースの目標の1つだったからです。この記事では、Flex 4の主要な目標の概要、アーキテクチャーの違い、およびコンポーネント、レイアウト、ステートの使用方法とエフェクトにおける変更点の概論を提示します。Flex 4でFlex 3アプリケーションをコンパイルするときに予期される事柄に関する質問についても回答します。この記事は、Flex 4のすべての新機能を網羅しているわけではありません。網羅的な情報が必要な場合は、記事「Flex 4の新機能」をお読みください。この記事において、「MXコンポーネント」という用語は、もともとFlex 3に含まれていたコンポーネントを指します。この記事を最大限に活用するには、次のソフトウェアが必要です。
さらに詳しく
この記事に必要な予備知識
この記事は、Flex 3フレームワークの知識を前提とします。
著者について
4年以上にわたり、Flexフレームワークの品質管理を担当しています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Flex 4のアーキテクチャー変更点の概要
新しいコンポーネントとコンテナ
エフェクトの変更点
テキストの処理
エフェクトの変更点
Flex 4のエフェクトインフラストラクチャには、数多くの改良が施されました。MXエフェクトは、UIComponentをベースにしたコントロールでのみ機能しますが、Sparkエフェクトは、フレームワーク内の新しいグラフィックプリミティブを含むあらゆるターゲットで機能します。
これらのエフェクトクラスはすべて、spark
*パッケージ内に存在します。Sparkエフェクトは、MXコンポーネント、Sparkコンポーネント、およびグラフィックプリミティブに対して機能することから、Adobeでは、これから作成するアプリケーションにはSparkエフェクトクラスを使用することを推奨しています。この説明はあくまで概略です。
レイアウトの変更点
以前のバージョンのFlexでは、コンポーネントとコンテナのレイアウトは、個別のコントロールの内部で定義されていました。レイアウトロジックは、これらのコンポーネントクラスの内部で定義されていました。Flex 4では、コンポーネントからレイアウトが切り離されています。すべてのコンポーネントにおいて、格納はGroupクラスによって管理され、Groupの子要素のレイアウトは関連するレイアウトオブジェクトに委譲されます。レイアウトは、FXGグラフィックプリミティブの他、SparkとMX両方のコンポーネントをサポートします。レイアウトは実行時にも変更できます。デベロッパーは、カスタムレイアウトを記述すれば、様々な個別コンポーネントに対するスワップイン/アウトも簡単に行えます。垂直リスト、水平リスト、タイルリストを定義する例を次に示します。前述のとおり、Flex 4は、デベロッパーが必要とする機能を取得して選択できるように機能ごとのブロック構成となっています。デフォルトでは、仮想化とスクロールは有効になっていません。Groupにスクロールバーのオプションを追加し、仮想化を有効にするには、以下の手順を実行します。Flex 4のレイアウトに関するすべての機能拡張(トランスフォーメーションのサポートの改善など)について詳しくは、Sparkレイアウトのドキュメント*を参照してください。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
基本エフェクトの使用
印刷用に表示
私のようにグラフィックを専門にしている者にとって、Flexエフェクトは、Flexプラットフォームの中でも最も魅力的で興味深い機能です。Flexエフェクトがあれば、ユーザーの心を動かすようなリッチなアプリケーションを作成するのも簡単です。Flexエフェクトがきわめて有用であることから、Adobe Flex 4 SDKベータ版ではエフェクトをさらに強力なものへと発展させることにしました。エフェクトを任意のオブジェクトとプロパティタイプに適用できるようにし、Flash Playerの新技術を利用して、さらに強力かつ機能的となるようにしました。この記事では、Flex 4 SDKベータ版の新しいエフェクトについて説明します。短時間で皆さんに理解してもらうため、すぐに主要なクラスの説明に入り、基本的なエフェクトを実装するためのサンプルコードをお見せします。この記事では、Flexエフェクトの動作について細部まで説明することは行いません。その代わり、Flex 4の新機能を使用したアニメーションの作成に的を絞り、アプリケーションへのエフェクトの組み込み方法について説明することにします。またこの記事では、コードスニペットに時折現れるFlex 4の新機能について、すべて説明することもしません。新しいSparkコンポーネント、複数の名前空間、Declarationsブロック、新しいステートシンタックスなどについては、それぞれ対象の記事を参照してください。これでアニメーションに集中する準備ができました。Flex 4ベータ版には多くのアニメーション機能が用意されており、この限られた記事に、すべての新しいエフェクト機能の説明を詰め込むことはできませんでした。代わりに、このトピックを2つのパートに分けることにしました。パート1では、新しいエフェクトの基本的なインフラストラクチャについて説明し、多くのFlexデベロッパーが通常使用する、基本的かつ必須のエフェクトについて触れます。パート2では、Flash Player 10で利用できる新しい機能に基づく、さらに進んだエフェクトのいくつかについて説明します。この記事を最大限に活用するには、次のソフトウェアとファイルが必要です。
さらに詳しく*
注意: サンプルファイルには、サンプルコードごとのソースファイルと、アプリケーションを再生するためのSWFファイルの両方が含まれています。これらのサンプルはSDKのベータビルドでもコンパイルできるはずです。ただし、Flex 4の最終バージョンが出荷されるまでに、いくつかのAPIにはさらに変更が加えられる可能性もあるため、最終バージョン以外ではこの記事のとおりに構築されない場合もあります。
この記事に必要な予備知識
Flex Builder環境の基本を理解していることと、これまでにFlexアプリケーションを開発した経験があることが推奨されます。
著者について
これまでの担当分野と関心の対象は、グラフィックやアニメーションをはじめ、画面にピクセルを描画するあらゆる事柄です。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
大阪ベータ祭り」
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
ついに現れた。
大阪ベータ祭り」
会場は、毎月開催されるFxUG主催のFlex勉強会会場のようなセミナールームではなく、天井にミラーボールが輝く広いライブバーを貸しきったステージで行われた。オープニングでは、FxUGのhirossy氏がDJ姿で登場して「せっかくなのでDJをしながら司会します」と会場を沸かせた。ARは、カメラに映し出された紙のパターン上に3Dオブジェクトを合成して表示する。轟は、「大阪にはこのような素晴らしいものを創り出す優秀な人が多い」と大阪に対する期待を述べた。1つめの“生産性向上”について、「簡単に面白いものがサクっとできることが大事であり、見た目だけでなく使いやすさも含めたものでなければいけない。クオリティの高いものを手早く作れるというのが1つの魅力になる」とした。2つめの“サーバーサイドやサービスとの連携”について、「RIAで作っていく際に、スクラッチで作るよりも既存のシステムやサービスをうまく活かして作っていくことが大事であり、今後は、クラウドやWebサービスと組み合わせて、いかに簡単に作っていくかがテーマになってくる」とした。3つめの“表現力豊かなアプリケーション”について、「せっかくFlashを使うのであれば、やっぱり見た目にも楽しいものを作りたくなる。それが業務アプリケーションだとしても同じことが言える。ユーザービリティを考えて使い勝手が良く、楽しいものを作っていく方が良い」とした。
デモのサンプルは、ホテルのバックエンドの宿泊管理を行うもの
「RIAアプリケーションになると、フロアーのどこが埋まっていて、どこが掃除中なのか、どの部屋がすぐに使えるのかが視覚的に分かり、宿泊者が何にお金を払ったかなどを、直感的に操作して確認することができるものになる。ITリテラシーがなくても自然と使えるようになる」とエンタープライズ向けRIAの分野での可能性を示した。作ったけど使われないものじゃなく、多くの人に使ってもらえるものを作ってほしい」と熱いメッセージを伝えた。会場には、既にFlash Catalystのベータ版を試した人もいたことから、最新の開発ツールへの関心が高まっていることが分かる。」が非常に気になるところだ。轟からは、このFlexを含めた第4世代の開発ツールについて説明があった。」と説明した。これらのツールはFlexフレームワークによって実現しているので、Flexは完全に裏方として存在することになる。気になるバージョンだが、名称変更があってもバージョン番号は継続していくので、Flash Builderのバージョンは4から始まる。轟からは、気になる今後のロードマップについて「2009年上期は、ベータ祭りの状態で、たくさんの製品がベータ版の状態で出ている。これらのベータ版に対してユーザーのフィードバックをもらってブラッシュアップをしていき、2009年下期から2010年上期にかけて、製品版がぞくぞく登場する予定」と説明があった。せっかく日本から行くので、サンフランシスコのAdobe本社でエグゼクティブと対談できるジャパンツアーを特別に用意しようと考えているので是非、上司を説得して参加してほしい。エンリケは、今回の新しいバージョンの大きな目的について「デザイナーとデベロッパーが共同して作業する際のワークフローと生産性を高めること」と示し、そのためにFlex 4のフレームワークを改善したと話した。Sparkコンポーネントについて「ビヘイビア(振る舞い)とロジックが分離できるので、デベロッパーはロジックに集中し、デザイナーはルックアンドフィールに集中できるようになった。デザイナーが作ったアセット(素材)を作業可能な外部のコンポーネントに変換して簡単にインポートできるので生産性向上に結びつく」と述べた。Flash Catalystはコードを書かずにRIAの部品が作れるデザイナー向けのツールだが、「ユーザーインターフェース以外にも様々な用途で活用できるので、デベロッパーにも使ってほしいツールだ」と示した。Flash Catalystを使ってデザイナー側の作業として、簡単なログインページとダッシュボードページに動きを付けるデモを行った。Photoshopで作ったログインページにある静的なテキストレイヤーを動的なテキストコンポーネントに変換して見せ、「Flash Catalystでは、バックグラウンドでFlexプロジェクトを生成している」と述べた。他にもスクロールバーやデータリストなどが簡単に作れることや、コンポーネントを共通部品にできることなども紹介した。エンリケは、「Flash Builderには、ユニットテストやリファクタリングなどの機能が追加されているとともに、データ中心の開発にもフォーカスを当てている。デモでは、バックエンドと接続する部分にColdFusionを使い、ドラッグアンドドロップするだけでサービスコードが自動生成されることを紹介した。そして、これらの中心的な役割にFlex 4フレームワークが存在している。」とまとめた。デモンストレーション後の質疑応答の時間では、会場からの質問にエンリケが丁寧に答えてくれた。
(Q1)バージョンによってデータの移行ができないケースはないか
FXGのフォーマットがはっきりする前にBridgeがリリースされているので、現段階ではFXGに対応するためのリビルドが必要
理論的には対応することは可能だが、社内でどうなっているかは分からないが、FXGもグラフィックのコンテンツを統合管理する上でそのようなことは考えていかないといけないと思う。スケジュールやどのぐらい関与しているか詳しくはお答えできないが、クロスプラットフォームでの対応はAdobeが今までもずっと考えてきたことなので、対応していくものだと思われる。それを使えばPHPのAMF通信をサポートすることができる。しかし、これらの問題点についても使い方を工夫すれば、使いこなすことができるようになると話した。他にもコンポーネントの名前やパッケージ名を最初に付けておく方がよいことなど、ベータ版を試してみて実際に壁にぶつかった時の生々しい話があった。エンタープライズ系の開発を行う上で、アートワークを拡張コンポーネントとして変換するニーズが多いのだが、現段階では変換できる種類が固定されているのが問題だと指摘した。現状のFlash Catalystでスキンが作れるコンポーネントは、ボタン・テキストインプット・スクロールだけなので、その他のコンポーネントを使いたい場合にどうすればよいのかを紹介した。コンポーネントを作るにはSparkコンポーネントアーキテクチャーに従う必要がある。そのためにはFlash Builderを使ってデフォルトのスキンを作らなければいけないのだが、この際のポイントは、「どのコンポーネントに対してスキンを適用するのかをHostComponentメタデータで定義しておくこと」と示した。」とまとめた。特にデモンストレーションで実際にどのようなワークフローで開発するのかを聞けたことは大きい。平日の開催の中、80名近くの参加申し込みがあり、当日は立ち見がでるほどだったことから、Flex 4への期待は高まっていることもうかがえる。イベントの最後にエンリケとのジャンケン大会が行われ、4名の方に書籍がプレゼントされた。FxUGの山本氏が書籍を手にした人に向けて「その書籍で勉強して次の勉強会で是非発表してほしい」と締めくくった。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
まず始めに、Flashを用いて、どのようなアプリケーションが作られているかを紹介しました。以下のように、さまざまな種類のアプリケーションが作られています。
コンシューマー向けツール群
既存のアプリケーションの事例として、以下のコンテンツを紹介しました。ARを活用することにより、魅力的でインタラクティブなアプリケーションを作ることができます。AIRアプリケーションかつRIAなので、ビデオや写真を盛り込んだり、クロスワードパズルなどのゲームを盛り込んだり、オフラインでも閲覧を可能にしたりしています。このコンテンツもAIRアプリケーションで、昔からあるゲームであるBlasterのデスクトップ版です。Adobe AIRの機能を利用することにより、デスクトップ上にあるアイテムを宇宙船としてゲーム内に登場させています。また、アプリケーションを構築する上で核となるのは、「クライアント」の上にある「フレームワーク」――すなわち、Flexフレームワークとなります。0で稼動します。この一連の作業の中で、デザインしたユーザーインターフェイスに対して、ステートやトランジションなどのアニメーションを定義した後に、Flash Builderにエクスポートします。「デザインの重視」のために導入したのが、FXGというインタラクティブなXMLベースのグラフィック言語です。そして、このFXGをサポートするためにさらに、新しくMXML 2009というコンポーネントモデルも導入しました。「デベロッパーの生産性」では、コンパイラのパフォーマンスを改善し、より良くより早くなりました。デザイナーには、Flex内での自由度の高いデザイン作業環境を提供するために、新しいコンポーネントモデルが必要と考えました。現行のFlex 3のコンポーネントモデルでは、ビューとコンポーネントモデルが同じところで提供されています。これは、スキンとコンポーネントの実装を分離することが難しいということを意味しています。それに対して、新しいSparkコンポーネントモデルでは、ビューとデータと、データをコントロールするモデルを分離しています。この新しいモデルを用いて作業すると、デザイナーはもちろん、デベロッパーの作業自由度が向上します。デザイナーは、主にスキンや、レイアウト、アニメーション、パーツ、ステートを作る作業に集中でき、デベロッパーは、ビヘイビア、ロジック、データに対しての作業に集中することができます。
現在のHaloコンポーネント群
FXGは、デザイナーとデベロッパーのワークフローのコアになります。
SparkコンポーネントとHaloコンポーネントを同時に使用した例
Flexアプリケーション開発におけるデザイナーとデベロッパーの現状のワークフローと、Flash Catalystを用いて改善されたデザイナーとデベロッパーの新しいワークフローを比較しながら解説しました。今までのワークフローでデザイナーが行ってきたユーザーインターフェイスの定義とは、静的なワイヤーフレームの構築であり、デベロッパーは、そのデザインを元に、またゼロからユーザーインターフェイスを構築する作業を行わなければなりませんでした。このワークフローを改善するためには、デザイナーがデベロッパーに渡すカンプを、デベロッパーにとって使えるものにするという、新しいワークフローが必要になります。この新しいワークフローを確立させるため、Flash Catalystでは、静的なデザインコンテンツに対してステート、インタラクション、アニメーションなどのデザインを加えることができ、デザインの精度を維持するために、デザイナーがフルにFlexコンポーネントをコントロールできるようになります。コンポーネントの外観を調整したいときは、任意のタイミングでCS4のクリエイティブツールを使った編集作業に戻るというラウンドトリップが可能になります。すべての作業がおわったら、Flash Builderで読み込み可能なプロジェクトファイル(FXP)してそのまま書き出すことができます。なお、Flash Catalystは、インタラクティブデザイナー、インフォメーションアーキテクト、グラフィックデザイナー、クリエイティブディレクターをターゲットユーザーとして捉えています。
アプリケーションのUI
インタラクティブなコンテンツ
デモでは、Photoshop CS4で作成した静的なワイヤーフレームを元に、Flash Catalystを用いて、ログインのページとダッシュボードのページを持ったアプリケーションを構築するデモを行いました。これらの観点で考えると妥当と考えたからです。差別化するというのも一つの目的です。Flexアプリケーションは、Flex Builderを持っていなくても開発できますが、「持っていないとFlexアプリケーションの開発ができないのではないか」――という混乱が、マーケット上で起きました。名称を変更したことにより、これらの混乱を防ぐことができます。IDEを使うということは、さまざまなメリットがあります。IDEを使うメリットとして、高度なコードの編集、ビジュアルなレイアウトとスタイルの設定、インタラクティブなデバッグ/プロファイリングなどがあります。Flexアプリケーションをつくるにあたって、二つの観点からアプリケーションを作ることができます。
デザインをそのままに
ワークフローの促進
マニュアル工程の排除
様々なバックエンドのサービスをサポート
データ管理を簡素化
データをベースにしたUI自動生成
開発環境の生産性とテスト
コード入力作業の向上
チューニングとデバッグのスピードアップ
確立したテスト方法とビルドプロセスに対応
クラス名またはMXMLタグにフォーカスを合わせるだけで、簡単にASDocを表示させることができるようになりました。新機能であるネットワーク・モニタを使用すると、クライアント/サーバ間のデータコミュニケーションを見ることができ、デバッグやプロファイリングを行うときに大変便利です。最後に、全体を通しての質疑応答が行われました。」といった声が挙りました。」といった質問に対しては、「まだベータで完全な状態ではないが、サードパーティー製のコンポーネントを含む、どんなFlex 3アプリケーションでもFlex 4に移行できるようにしていく」と、回答しました。
Flash BuilderとFlash Catalystを利用すれば、今までFlexアプリケーションを開発してきたデベロッパーはもちろん、これからFlexアプリケーションを開発するデザイナーやデベロッパーがよりシームレスに作業を行えるようになることは間違いないでしょう
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
まずは、その変更点の一つであるネームスペースから紹介していきます。このチュートリアルにおいて、「Haloコンポーネント」という用語は、今までのFlexに含まれていたFlexフレームワークコンポーネントを指します。今までのFlexに使われているMXML 2006のネームスペースは、言語タグ、ビルドインクラスタグとHaloコンポーネントタグが、混在して定義されています。しかしながら、新しいMXML 2009のネームスペースでは、言語タグとビルドインクラスタグのみが定義されています。これらコンポーネントは、MXML 2009のネームスペースとは別に定義されています。下記にFlex4で使用する基本的なネームスペースを示します。
Flex 4で基本的に使用するネームスペース
言語タグについては、ネームスペースの変更のみで、基本的な仕様に変更はありません。ビルドインクラスタグも同様で既存からの変更は、ネームスペースの変更だけです。次に、MXML 2009で追加された言語タグとビルドインクラスタグを紹介していきます。MXML 2006では、基になるコンテナに子エレメントが定義されている場合、ビジュアルエレメントはそのコンテナに追加され、非ビジュアルエレメントはそのコンテナのプロパティとして定義されます。しかしながら、基になるコンテナによってその方法が変わります。子エレメントが、ビジュアルエレメントの場合、全てコンテナに追加されます。しかしながら、非ビジュアルエレメントの場合、コンパイルエラーになります。定義場所が変わるだけで、今までどおりにバインディングを定義することも可能です。非ビジュアルエレメントとビジュアルエレメントのバインディングも定義しています。このタグは、一般的なデザインツールのレイヤーと同じようにMXMLでもレイヤーを定義することができます。レイヤーには、複数の子エレメントと複数のレイヤーが定義でき、表示非表示や透明度を指定できます。レイヤーのidを指定します。ドキュメントのプロパティとして定義されます。レイヤーの表示非表示を切り替えます。レイヤーの透明度を指定します。RootLayer は、複数の子エレメントと複数のレイヤーを混在して定義しています。layer1は、レイヤーに透明度を指定しています。画像をクリックいただくとサンプルSWFファイルが表示されます。このタグを使うとコンポーネントやグラフィックなどのエレメントに名前を付けて、再利用することができます。定義済みエレメントは、MXML 2009ネームスペースを使って同一MXML内で利用できるようになります。よって、プロパティやスタイルなどを指定することができます。四角の塗りをBlueRectという名前で定義しています。Rectのプロパティを上書きして位置と幅と高さを変更しています。画像をクリックいただくとサンプルSWFファイルが表示されます。Buttonを継承したクラスとして振る舞います。Buttonのプロパティを上書きしてラベルと文字色のスタイルを変更しています。画像をクリックいただくとサンプルSWFファイルが表示されます。このタグは、コンパイルや実行時には無視されます。デザインツールがメタデータなどを記述するために利用されます。このタグは、コンポーネントの親コンテナを指定されたステート時に変更することができます。MXML 2006では、コンポーネントの追加と削除を行うステートアクションを記述する必要がありましたが、このタグを使えば簡潔に記述することができます。
ドキュメント内にあるコンポーネントの名前
ドキュメントのステート名
画像をクリックいただくとサンプルSWFファイルが表示されます。このタグは、ビルドインクラスであるVectorをタグで、定義できます。ネストしたVectorデータも定義可能です。ベース型と呼ばれるVectorのベースとなる型を指定します。ビルトインクラスとカスタムクラスを含む任意のクラスを文字列で指定します。ベクターの length プロパティを変更できるかどうかを指定します。今回のチュートリアルでは、Flex4の基礎となるMXML 2009を、ネームスペースの変更や開発やデザインで有用なタグが追加されていることを中心に紹介しました。ここでは紹介しきれなかったMXML 2009の機能がありますので、詳しくはオンラインドキュメントにアクセスして下さい。
著者について
熊本県出身のフリーランスのアーキテクト兼プログラマーです。net)@東京の勉強会でスピーカしたり参加しています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
このチュートリアルでは、Flex 4 から新しく採用されたステート構文について紹介します。この属性は、MXML 上でのみ使用することが可能で、コンパイラによって予約語のキーワードとして扱われます。includeIn 属性は、コンポーネントインスタンスを表示させたい、定義済みのステート名を指定することができます。カンマ区切りで複数のステートを指定することもできます。excludeFrom 属性は、includeIn 属性とは逆に、コンポーネントインスタンスを非表示にさせたい定義済みのステート名を指定することができ、同様にカンマ区切りで複数指定することもできます。アプリケーションのステートを切り替えるときには、アプリケーションの currentState プロパティにステート名を指定します。画像をクリックいただくとサンプルSWFファイルが表示されます。MXML コンポーネントのプロパティに対して、ステート単位で値を定義することができるようになりました。記法は「ドット」記法を用いて以下のように定義します。MXML プロパティは、コンポーネントプロパティ、イベント、エフェクト、スタイルに適応できます。具体的には以下のようになります。
ステート固有の MXML プロパティに値を定義する例
画像をクリックいただくとサンプルSWFファイルが表示されます。複数のステートを、ステートグループとして、まとめて定義できるようになりました。具体的には以下のようになります。
ステートグループを定義する例
定義済みのステートグループは、ステート名と同じように使用することができます。
MXML コンポーネントのプロパティのコードヒント ( ステートグループ名とステート名が表示される )
具体的なコードと結果は以下のようになります。
ステートグループの使用例
画像をクリックいただくとサンプルSWFファイルが表示されます。
ステート固有のインスタンスの生成と破棄のポリシーを定義する例
“deferred” を定義した場合、定義元コンポーネントは、インスタンス化される必要が来るタイミングまで初期化を遅延します。“immediate” を定義した場合は、定義元のコンポーネントの状態を問わずに初期化します。“never” を定義した場合、ステート固有のインスタンスは、状態を問わずに無期限にキャッシュされます。“auto” を定義した場合は、ステートが切り替わり、対象ステート固有のインスタンスが非表示になったときに、DOM、すべてのドキュメントおよび、フレームワークから参照を消去され、インスタンスが破棄されます。サンプルプロジェクトの画面について説明します。画像をクリックいただくとサンプルSWFファイルが表示されます。以上が Flex 4 から採用された新しいステート構文でした。Flex 3 以前は、MXML 上にハードコーディングしなければならなかったステートの設定が、大幅に改良されシンプルになったことに気付いていただけたかと思います。
これらのチュートリアル、サンプルコードを試すことによって、Flex 4 アプリケーションの表現の幅を、より広げることができるでしょう
著者について
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
このチュートリアルでは、Flex 4 から新しく採用されたCSSについて紹介します。Flex 4 からネームスペース修飾子が、すべてのアプリケーションの CSS 宣言のタイプセレクタで必要になりました。ネームスペースを定義する記法は、ネームスペース修飾子の後にネームスペース接頭辞と、ネームスペース名 (URI またはクラスパス ) を記述することによって定義できます。具体的には、以下のように記述します。定義した接頭辞は、タイプセレクタの直前を「パイプ (|) 」で区切り、記述します。具体的には、以下のように記述します。Flex 4 では、タイプセレクタ、クラスセレクタに加えて、新しいセレクタが採用されました。コンポーネントに割り当てた任意の id 名をセレクタとして使用することができます。id名の接頭辞に「ハッシュ記号 (#) 」を用いることで定義できます。
id セレクタのサンプル
コンポーネントの親子関係 ( 祖先 - 子孫の関係 ) から、スタイルを定義することができます。子孫セレクタは、空白で区切られた 2 つ以上のタイプセレクタから構成することによって成立します。以下のコードでは、Panel コンポーネントの子要素である Button に対してのみ、スタイルを定義します。コンポーネントのステートを疑似クラスとして扱うことによって、セレクタとしてスタイルを定義することができます。疑似セレクタは、ステート名の接頭辞に「コロン (:) 」を用いることで定義できます。
セレクタのパターン
Flex 4 で使用できる CSS セレクタのパターンは、前述で紹介したセレクタを併用することにより、以下のようなスタイル定義を実現できます。Flex 3 以前は 2 種類しかなかったセレクタが、大幅にバージョンアップして細かくスタイル定義できるようになったことに気付いていただけたかと思います。
これらのチュートリアル、サンプルコードを試すことによって、Flex 4 アプリケーションの表現の幅をより広げることができるでしょう
著者について
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
私はFlexのプロダクトマネージャーとして、Flex 4の次期リリースについて多くの人々に説明してきました。その中には、お客様だけでなく、アドビの開発チームも含まれています。このバージョンには、これまでにないほど高い期待が寄せられています。この記事では、新しいSDKとフレームワークの新機能の概要について説明します。Flex SDKの作業では、3つの主なテーマに焦点を合わせてきました。
デザインの重視:新たな表現力をもたらすフレームワークと、これを簡単に実現するためのツールの提供
デベロッパーの生産性:コンパイラーのパフォーマンス向上と、データバインディングなどの言語機能に対する生産性向上のための機能強化
フレームワークの進化:Flash Playerの新機能の利用と、多くの事例で必要とされる機能の追加
さらに詳しく
この記事に必要な予備知識
Sparkは既存のMXアーキテクチャーを基盤としており、デベロッパーとデザイナーが協力して、Flexアプリケーションの外観においてさらに豊かな表現力を発揮するためのメカニズムを提供します。現在、Sparkには約30の新しいコンポーネントとプリミティブがあり、アドビの次世代コンポーネントの基盤を形成するとともに、Adobe Flash Catalystと容易に統合できるようになるはずです。今回のリリースには、この新アーキテクチャーについて計画されていたほとんどのコンポーネントが盛り込まれています。Sparkには、MXに存在するすべてのコンポーネントの新版が用意されるわけではありません。SparkとMXは基盤が共通なので、すべての既存MXコンポーネントは新しいアーキテクチャーと容易に相互運用できます。また、FXGのサポートも大きな進化です。これはFlashプラットフォーム向けの新しい交換フォーマットです。Flexフレームワークには、FlexアプリケーションでFXGを直接使用するためのサポートに加え、FXGのタグと連携するグラフィックプリミティブがあります。これらのグラフィックプリミティブはFlexアプリケーションで直接使用することが可能で、従来のFlexコンポーネントが備える実行時の編集機能をすべてサポートしています。高パフォーマンスのグラフィックをサポートするため、コンパイラーが、静的なFXGをFash Playerがネイティブで認識できるSWFタグに直接最適化できるようにもしました。これによって、グラフィックタグを任意のエディターで編集する柔軟性を実現しながら、要求の高い箇所では最大のパフォーマンスを引き出すことも可能となります。Sparkアーキテクチャーには、柔軟性が向上した新しいレイアウトモデルもあります。新しいレイアウトは実行時に割り当て可能で、2D回転や拡大・縮小が完全にサポートされるほか、レイアウト後のコンポーネントにFlash Player 10の新しい3D機能を適用できます。
この新しいレイアウトメカニズムによって、Listクラスだけでなく、通常のコンテナモデルでも仮想化をサポートできます(扱いにくいRepeaterともお別れです)
どのコンテナでもリストでも、スムーズなスクロールが可能です。Sparkのコンテナ*とレイアウト*の詳細を参照してください。最後に、Sparkでは、強化されたアニメーションエンジンを新しく導入しました。これが、エフェクトとトランジションの改善の基盤として機能します。Flex 4では、トランジションの自動逆転、Pixel Benderのフィルターのエフェクトとしての適用、3つのプレーンすべてでの変換、複雑なキーフレームベースのアニメーションがサポートされています。エフェクトの使用例については、サンプルアプリケーションで実際に見ることができます。
ステートの操作
Flexでは、ステートの改善が必要だと常々感じてきました。ステートの概念そのものは難しくないはずですが、Flex 3では、概念とは違ってわかりにくい実装となっていました。そのため、Flex 4では、新しいMXML言語でいくつかの改善を行い、ステートの操作を簡単にしました。新しいモデルをサポートするためにMXML言語をMXML 2009にアップグレードすると同時に、より優れたツールをサポートするためにMXMLに小さな改善も行いました。なお、シンプルなテキストエディターによる編集も引き続きサポートしています。
デベロッパーの生産性
一般的な事例向けに多くの最適化が実装され、実際に性能が向上することも確認されています。ASDocツールにも多くの改善を行いました。MXMLドキュメントでのASDocのサポート、共通の機能リクエストなどです。バインド機能のアップグレードも行い、双方向通信も行えるようになりました。バインド式の先頭に@を置くだけで、バインド先への更新がバインド元にコピーされます。また、ご要望の多かった点は、CSSセレクターのサポートの拡大です。子孫セレクターとIDベースのセレクターなどがサポートされるようになりました。これらの改善について詳しくは、ドキュメンテーションを参照してください。Flexフレームワークの進化は、Sparkアーキテクチャーの後も継続する必要があります。その取り組みの一環として、Flex 4では、Flexアプリケーションにおけるビデオの扱いを改善しました。これらによって、ドラッグ&ドロップで簡単にアプリケーションにビデオを配置し、ビデオのルック&フィールをカスタマイズできるようになりました。テキストエンジンとテキストレイアウトフレームワークは、Flexフレームワークに直接組み込まれる予定です。Spark向けの新しいテキストコントロールとなるだけでなく、基本的にMXのコントロールからも使用できます。新しいテキストコントロールでは、双方向テキストがサポートされます。また、すべてのロケールでFlexアプリケーションを使用できるようにするため、このリリースでは提供していないミラーリングのサポートをFlexに早期に(今後のドットリリースで)追加する予定です。これについても多くのご要望がありました。
次のステップ
ご覧いただいたように、次世代のFlex開発をお試しいただける準備は整っています。Flexにより、これまで優れたアプリケーションが構築されてきました。新たなフレームワークとツールが、より一層、皆様のお役に立てることを願ってやみません。
著者について
Flexプロダクトマネージメントチームに配属される以前は、Flex 1~4バージョンのリードコンピューター科学者として指揮をふるいました。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
プロジェクトの設定
ビルドスクリプトの作成
Antビルドスクリプトの実行
エンタープライズアプリケーションでのビルドスクリプトの使用
もともとこれは、Javaプロジェクト用に作成されたものです。XMLベースの構文を使用して、ターゲットと依存性をスクリプトファイルに記述し、それをコマンドプロンプトから起動します。ターゲットは「タスク」と見なされます。タスクの例としては、Flexアプリケーションのコンパイル、ディレクトリの作成または削除、あるいはASDocツールを使ったプロジェクトのドキュメントの作成などが挙げられます。タスクを先に実行される他のタスクに依存させることにより、チェーン状にリンクすることができます。例としては、ディレクトリを作成するタスクを作り、その後にFlexアプリケーションをコンパイルしてそのディレクトリにSWFファイルを生成する別のタスクを作成する場合が挙げられます。ビルドプロセスを自動化するためにスクリプトに追加できるタスクの一部を以下に示します。
ASDocによるプロジェクトドキュメントの作成
プロジェクトのSWFファイルに対するHTMLラッパーの作成
このため、必要ならJava Antタスクの使用可能な属性をすべて使用できます。最初に必要なのは、Antをインストールすることです。これには2つの方法があります。1つはFlex BuilderのプラグインとしてAntをインストールする方法、もう1つはスタンドアロンアプリケーションとしてAntをインストールする方法です。「インストールする新規フィーチャーを検索」を選択し、「次へ」ボタンをクリックします。ダウンロードに使用するミラーサイトを選択して、「次へ」をクリックします。契約に同意し、「次へ」、「終了」をクリックします。終わったら、「すべてインストール」をクリックします。
スタンドアロンAntのインストール
注意:コマンドプロンプトからFlexアプリケーションをコンパイルしたくない場合は、Antプラグイン構成を使用した方がよいでしょう
もう1つの方法は、Apache Antをインストールし、コマンドプロンプトを使用してアプリケーションをコンパイルすることです。
この記事の作成時点でのAntの最新バージョンは1
1に入れます。Macでは、アプリケーションフォルダーに入れるのが最善です。重要:インストールの後、Antを実行する前に、環境変数をいくつか定義する必要があります。Antがインストールされて実行可能になったら、Adobe Flex Antタスクにアクセスできるようにする必要があります。デフォルトではAntはFlexについて何も知らないので、次にその導入を行います。jarファイルのコピーを用意する必要があります。これで、Flex Antタスクを使用してAntスクリプトを作成する準備が整いました。
jarファイルが存在しない可能性があるので、このファイルはプロジェクトに含めておく方がよいでしょう
jarはプロジェクトのlibフォルダーにコピーするのがよい方法です。そうすれば、このファイルを持っていない開発者にもFlex Antタスクを配布でき、必要な場合、開発者はそのJARファイルへの参照を、コンパイル時の引数としてAntに渡すことができます。この記事では、説明を簡単にするため、単にJARファイルをAntインストールに追加します。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
この記事のパート1では、Flex Antタスクを使用して、プロジェクトのビルドプロセスを自動化する基本的なAntスクリプトを作成する方法を説明しました。この記事では、パート1の内容を基にして、一般的なタスクをいくつか追加することにより、Antビルドスクリプトを拡張します。次のリストは、開発者がビルドスクリプトで自動化のために使用する最も一般的なタスクの種類を示します。これらのタスクを使えば、単にSWFファイルをコンパイルするのに留まらず、ビルドプロセスのさらに多くの部分を自動化し、チームの他の開発者がFlexプロジェクトの新リリースを作成することを可能にします。スクリプトで実現できる内容は様々であり、これらのタスクは必要に応じて削除したり追加したりできます。この記事を最大限に活用するには、次のソフトウェアとファイルが必要です。
この記事に必要な予備知識
Adobe Flex 3の基本知識と、オブジェクト指向プログラミングの原理に関する知識が必要です。コマンドプロンプトからのFlexアプリケーションのコンパイルに関する知識は有用ですが、必須ではありません。
プロジェクトの設定
この記事のパート1をお読みになっていれば、既にAntがインストールされているかもしれません。この記事ではさらに、新しいサンプルファイルをダウンロードする必要があります。図1に、Flexプロジェクトのディレクトリ構造を示します。
アプリケーションのルートに、srcフォルダーの兄弟として、前と同じbuild
xmlファイルが存在するのがわかるはずです。propertiesファイルを右クリックし、アプリケーションから開く/テキストエディターを選択して、このファイルを開きます。これはパート1と同じファイルですが、新しい変数がいくつか追加されています。exeという変数がこの順で定義されています。これは後で、RSL(ランタイム共有ライブラリ)タスクに使用されます。このフォルダーには、ASDocタスクが作成するHTMLファイルがすべて置かれます。exe変数は、ビルドスクリプトが実行されるマシン上のツールの場所を指定します。
新しい改良されたビルドスクリプト
xmlファイルを右クリックし、アプリケーションから開く/Antエディターを選択して、このファイルを開きます(AntをFlex Builderプラグインとしてインストールした場合)
パート1のときに比べて、スクリプトがかなり肥大化しているのがわかるはずです。これから各部分について詳しく見ることにより、パート1のタスクから何が変化しており、新しいタスクがどのように動作するかを説明していきます。最初に注目すべき変更は、一番上にあるprojectノードです。このタスクは9行目で定義されています。
これは、スクリプトの他のすべてのタスクを包含する入り口としての役割を果たします(図2を参照)
depends属性にはすべてのタスクが順に記載されているので、スクリプトが実行されると、すべてのタスクが実行されます。これに対して、パート1のスクリプトは単に、 DEPLOY ディレクトリを削除して作成し直し、SWFファイルをコンパイルしてその中に置くだけでした。すべてのタスクをここに包含することにより、1つのターゲットですべてのタスクを実行することも、必要なら各タスクを別々に実行することもできます。xmlファイルの下の方では、「init」タスクに DOC ディレクトリを作成および削除する作業が追加されています。これは次のようなものです。このタスクには、コマンドプロンプトでASDocツールを使用する場合に通常使用するすべての引数が指定できます。exe変数に設定しています。
スクリプトのさらに下の方では、build
これらは、作成されたファイル内の各HTMLページのタイトルとフッターを設定します(図3を参照)
サポートされる引数の一覧については、ASDocツールの実行*を参照してください。
RSLによるコンパイルタスク
これは、単にSWFファイルをコンパイルするだけではなくなったからです。このタスク内には、RSL展開オプションに必要な新しいオプションがいくつか指定されています。swcの場所を指します。このスクリプトは、RSLの使用に最低限必要なものだけを示しています。この他にも様々なオプションが使用できます。ここではもう1つ、RSLをDEPLOYフォルダーにコピーするという手順があるのですが、これには別のタスクが関わるので、後で説明します。Antスクリプトで設定され、mxmlcコンパイラーに渡される、その他のオプション、XML設定ファイルノード、属性について詳しくは、クロスドメインRSLについて*を参照してください。この例では、Flexアプリケーションと共に展開するファイルを作成するためにオプションが使用されます。
mxmlは自動的に付加されるので、ここでは指定しません)
この組み合わせでは、履歴管理に必要なディープリンクファイルが出力されます。この記事では説明しませんが、他にもいくつかの組み合わせがあります。js、およびディープリンクファイルを置く場所です。file属性を使用してHTMLページの名前を指定し、swf属性を使用して出力SWFファイルの名前を指定します。残りの属性は、見ればわかります。この記事では、説明を簡単にするため、各タスクの基本的なオプションしか使用していません。詳しくは、HTMLラッパータスクの使用*を参照してください。SWCを作成するために、タスクはcompcコンパイラーを起動します。この例のinclude-classes属性は1つのクラスを指していますが、SWCの作成に複数のクラスを追加する場合、クラス名をスペースで区切って指定します。swcを指定しています。これは、タスクを実行したときにActionScriptファイルがどこにあるかをcompcコンパイラーに通知する役割を果たします。これもきわめて単純な例です。このタスクのオプションについて詳しくは、compcタスクの使用*を参照してください。
ビルドスクリプトのもう1つの手順
前にRSLに関してもう1つの手順があると言ったことを覚えていますか
ここではそれを説明します。コピー操作はこのタスクによって実行されます。この記事では、チーム環境での作業を容易にするためのビルドプロセスの自動化を扱っています。これは、Flex Antタスクを利用してさらに手間を省く賢い方法なのです。このため、Java Antタスクのすべての機能が使用できます。つまり、ディレクトリの作成、ファイルのコピーや移動、フォルダーの削除などです。ビルドスクリプトの最後のタスクは、copy todirコマンドを使用して、FlexフレームワークRSLをデフォルトの場所から DEPLOY フォルダーにコピーすることにより、展開を容易にします。file属性は、このスクリプトで使用するフレームワークRSLのデフォルトの場所を指します。
改良されたビルドスクリプトの実行
xmlファイルをAntビューにドラッグし、ビュー内でダブルクリックします。
スタンドアロンのAntでビルドスクリプトを実行するには、コマンドプロンプトを開き、プロジェクトのベースディレクトリ(build
xmlがある場所)に移動し、次のように入力します。jarファイルにアクセスできない場合でも、 libs ディレクトリにあるはずです。Flex BuilderのAntプラグインを使用した場合でも、スタンドアロン版を使用した場合でも、コンソールの出力には、実行されたタスクのコマンドが示され、最後に次のようなメッセージが表示されます。
DEPLOY および DOC ディレクトリ内に、Antスクリプトのタスクが作成したすべてのファイルが置かれています(図4を参照)
次のステップ
この記事では、Flex Antタスクを利用して新しい機能を追加することにより、Flexプロジェクト一般的に使用される機能を使ってビルドプロセス全体を自動化しました。独自のビルドスクリプトを作成する場合、この他にもいろいろな工夫の余地があります。この記事ではごく単純な例を紹介しましたが、アドビのヘルプページにはタスクの様々なオプションが詳細に説明されているので、ぜひご覧ください。
著者について
の社長/最高技術責任者です。ニューヨーク都市圏で9年以上Web開発者コンサルタントとして従事し、Flash Playerおよびその他の関連Webテクノロジーに重点的に取り組んでいます。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
「ホワイトボードに文字を書いたりマグネットで貼り付けたりしている運用を、全てPCに置き換えて
ドラッグアンドドロップしたりさ
」この一言から始まったプロジェクト
"アート引越しセンター(アートコーポレーション株式会社)"で車や人を引越に割り当てる作業と、基幹システムにデータを入力する作業を同時に出来る、電子配車版アプリケーションをFlashで実現しようというのだ。
「まぁ、出来るけど
」開発メンバーの初期印象は「きつい」という言葉しか浮かばなかったのである。しかし、同時期にFlex 2が発表され、実際に検証をすると「これはいける。」と確信を持てた。しかし、クライアントが要望しているのは一般的な(OSの様な)UIと豊かな表現である。
そもそも「WebのフォームをFlexで置き換えましょう
」というコンセプトなので、ピタッ
っとハマるのは当然だったのだ。ActionScript3(言語仕様やイベントモデルなど)による開発スピード、品質の向上に加え、標準提供されるFlexフレームワークによるドラッグアンドドロップの管理機能、高機能なEclipseベースのIDE等、やりたい事とやらなくてはならない事の両方が実現出来る環境をFlex 2は全て提供してくれていたのである。
高度なビュー操作
「ホワイトボードと同じような直感的操作を」案件に車を配車する、人を配員する、人をドライバーとして車に登録するという作業を、ホワイトボードにマグネットを貼り付けるのと同じように出来なければならなかった。この難題をFlex 2はいとも簡単に実現させてくれた。ドラッグアンドドロップ管理機能を用いると、ドロップする場所によって動作を変更するだけで実現でき、さらにオブジェクトの入れ子も簡単に出来てしまった。
FMSを使ってデータ連携
今回のアプリケーションは、全国の支店から多数の操作を受け付ける事になる。全国での利用になるので案件データは大量に存在し、割り当てる車や人のデータの結びつきなどで、一日のデータを取得するだけでWEB/DBサーバに大きな負荷を与えてしまう。さらに、支店内でも複数の端末で同時利用するので負荷軽減をしっかりと考える必要があった。同一支店/日にちに複数接続があった場合は、既にFMSで保持しているデータを返却する事により、WEB/DBサーバへの無駄な負荷を減らす事が出来るのである。基本的には定期的にFMSから最新情報を取得しに行くが、誰かが変更を行った際には保存と同時に取得も行い、端末間、サーバ間での不整合が起こらないようにした。
ルールを守って幸せに
Flexフレームワークにはルールがある。今から「子供のオブジェクト作ってください」「オブジェクトにデータを登録してください」「あなたの表示サイズはコレですので、調整して表示してください」という様なルールがあり(他にも数点ある)、これをしっかり守らないと不思議な挙動になってしまう。開発当初はこのルールを把握しきっていなかった為に数日悩まされたが、ルールさえしっかり守れば意図したように動作してくれる。さらに、負荷軽減の為に今すぐ必要のないメソッドコールは空き時間へ回したり、強力なバインド機構を活かしたデータドリブン等、特典は一杯なのである。どんな事でもルールを守れば結果的にはハッピーなのだ。ツールが優秀だとそれを利用したアプリケーションの完成度も向上し、クライアントの評価も向上する。今でもいろいろな要望が挙がってくるが、すぐに対応する事が出来る。
Flex 2は開発者にもクライアントにも嬉しいソリューションであろう
著者について
大学在学中にアルバイトでデザイナーとして参加し、大学卒業後に正式入社
大学や独学でプログラミングを習得していた事もあり、プログラマーへ転向する。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
実習内容について
実習用データベース・テーブルの準備
WTPのインストール
新規にプロジェクトを作成
アプリケーションサーバの動作確認
データベースからアプリケーションを作成
応答時間について
印刷用に表示
」という機能が追加されました。この機能は、J2EEアプリケーションサーバー/データベースと連携するFlexアプリケーションの基本的な実装ソースコードを自動生成します。データベーステーブルの参照・編集するようなアプリケーション開発においては、サーバ側のコードは、Javaコード/Hibernate/SQLという3つの選択肢があり、ちょっとした作業で実装が完了します。ブラウザ側も、基本的なFlexコードは自動生成されるので、後はユーザインタフェースもしくはユーザエクスペリエンスの設計に工数を割く事ができるようになるかと思います。この文書では、次の経験があることを前提として記述していますが、基礎的な知識があれば十分です。Javaでプログラムを作成したことがある。
必要なソフトウェア
必要となるソフトウェアは下記の通りです。
(Pleiadesプラグインを入れておくと英語メニューが日本語表示されます)
資料請求およびお問い合わせ
以後WTPと記述します。
配布マテリアルのダウンロード(sql:実習用テーブルの作成
txt:入力するソースコードのコピー&ペースト用
この文書のライセンス
著者について
FlexBuilder3の新機能により、基本機能が動作するサーバサイドとFlexのコードが自動生成されるようになりました。データベース連携するFlexアプリケーション開発では、初期の開発工数について、より短縮できるようになったと思います。この文書の内容が、皆さまの作業効率化の助けになればと思います。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
実習内容について
実習用データベース・テーブルの準備
WTPのインストール
新規にプロジェクトを作成
アプリケーションサーバの動作確認
データベースからアプリケーションを作成
応答時間について
実習内容について
この実習では、例として「購入したDVDソフトの情報の入力/一覧表示するシンプルなアプリケーションを作成する」という設定の題材とします。テーブル設計は、正規化等難しいことは考えず、単一のテーブルとします。
実習用データベース・テーブルの準備
sqlでテーブルを作成してください。sqlでダミーのデータをテーブルに作成してください。この実習内容はTomcatでも十分機能すると思いますが、WTPの操作も兼ねてJBossを試すことにします。
(WTPについては私自身習ったことはないので、説明する手順は私の自己流です)
zipをダウンロードし任意のフォルダに解凍します。
WTPのインストール
この実習ではWTPプラグインを必要とします。Eclipseプラグイン版をご使用で、すでにWTPがインストールされている場合はこのステップは必要ないので次の章に進んでください。]からWTPをインストールします。次の3つのフィーチャーを選択し、[必須項目を選択]し、[次へ]進みます。ライセンスに同意して[次へ]進みます。[終了]をクリックしてインストールを開始します。
JREランタイムの設定
異なる場合は、設定を追加しデフォルトになるよう変更してください。Mac版では、JVMはOSに付属しているので、特に指定する必要はありません。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
」という機能が追加されました。この機能は、J2EEアプリケーションサーバー/データベースと連携するFlexアプリケーションの基本的な実装ソースコードを自動生成します。データベーステーブルの参照・編集するようなアプリケーション開発においては、サーバ側のコードは、Javaコード/Hibernate/SQLという3つの選択肢があり、ちょっとした作業で実装が完了します。ブラウザ側も、基本的なFlexコードは自動生成されるので、後はユーザインタフェースもしくはユーザエクスペリエンスの設計に工数を割く事ができるようになるかと思います。この文書では、次の経験があることを前提として記述していますが、基礎的な知識があれば十分です。Javaでプログラムを作成したことがある。
必要なソフトウェア
必要となるソフトウェアは下記の通りです。
(Pleiadesプラグインを入れておくと英語メニューが日本語表示されます)
資料請求およびお問い合わせ
以後WTPと記述します。
配布マテリアルのダウンロード(sql:実習用テーブルの作成
txt:入力するソースコードのコピー&ペースト用
この文書のライセンス
実習内容について
この実習では、例として「購入したDVDソフトの情報の入力/一覧表示するシンプルなアプリケーションを作成する」という設定の題材とします。テーブル設計は、正規化等難しいことは考えず、単一のテーブルとします。
実習用データベース・テーブルの準備
sqlでテーブルを作成してください。sqlでダミーのデータをテーブルに作成してください。この実習内容はTomcatでも十分機能すると思いますが、WTPの操作も兼ねてJBossを試すことにします。
(WTPについては私自身習ったことはないので、説明する手順は私の自己流です)
zipをダウンロードし任意のフォルダに解凍します。
WTPのインストール
この実習ではWTPプラグインを必要とします。Eclipseプラグイン版をご使用で、すでにWTPがインストールされている場合はこのステップは必要ないので次の章に進んでください。]からWTPをインストールします。次の3つのフィーチャーを選択し、[必須項目を選択]し、[次へ]進みます。ライセンスに同意して[次へ]進みます。[終了]をクリックしてインストールを開始します。
JREランタイムの設定
異なる場合は、設定を追加しデフォルトになるよう変更してください。Mac版では、JVMはOSに付属しているので、特に指定する必要はありません。
新規にプロジェクトを作成
新規にFlexプロジェクトを作成します。サーバにJ2EEを選択します。WTPプラグインがインストールされている場合は、ダイアログ下部にWTPについての入力項目が表示されます。次のように入力し、[次へ]進みます。
プロジェクトの場所:デフォルトの場所
アプリケーションサーバの種類:J2EE
リモートオブジェクトアクセスサービスを使用をチェックし、LiveCycleデータサービスを選択
J2EE設定のターゲットランタイムで[新規]をクリックします。2を指定してください。「J2EEサーバを設定」ダイアログで、次のように指定します。以降はデフォルトのままで良いので[終了]をクリックします。
アプリケーションサーバの動作確認
htmがあるのでそれを右クリックして、[実行]-[サーバで実行]を選択します。新規サーバの定義ダイアログが表示されるので、JBossを選択し、[次へ]進みます。構成プロジェクトにDVDLibがあることを確認して[終了]します。するとサーバパネルとコンソールパネルにAPサーバの起動とデプロイ状況が表示されます。環境に問題がなければ、しばらくするとLCDSのWelcomeページが表示されます。ブラウザが起動し、何もないグレー背景だけのFlexアプリケーションが実行されます。mxmlにラベルやボタン等を配置して、実行してみてください。ここまでで、ビルド・デプロイ・実行できることを確認できました。
補足1:コンパイルとデプロイ動作
プロジェクトにWTP属性がある場合は、ビルドが完了した数秒後に自動的にデプロイが動作します。これは、デプロイ作業を意識しなくてもよいので便利でもありますが、複数のファイルを編集する場合などでは操作の足枷ともなります。
ビルドやデプロイ処理中の場合、右下のキャタピラっぽい()アイコン付近で進行状況のプログレスが表示されます。バックグラウンドで何か動作しているかを確認するには、右下をチェックするようにしてください。
データベースからアプリケーションを作成
メニューから[データ]-[データベースからアプリケーションを作成
]を選択します。対象となるプロジェクトを選択し、MySQLへの接続を作成し、アプリケーションを作成したいデータベース・テーブルを指定して[次へ]進みます。
以下を入力し、接続をテスト
接続が問題なければ終了します。サーバサイドコードを生成ダイアログで、次のように指定します。サーバーとクライアントの通信方法:LiveCycleデータサービスを選択し、[次へ]進みます。使用する項目を確認します。ここでは何も変更せずに[終了]します。これで、アプリケーションは完成です。
サーバを起動している場合は、自動的にデプロイされるので、右下のプログレスが完了するのを待ってからdvdlibrary
サーバを停止していた場合は、サーバを起動してデプロイ成功のメッセージを確認してから、実行してください。※自動生成されたJavaソースは警告が多数表示されます。基本動作の実行には問題ないようですが、気持ちが良いものではありません。あくまでも雛形ソースと割り切るか、自前のDAOソースコードに差し替えるか、後述する他のAssemblerを検討するか、考えどころです。(同期的に)各レコードに更新を行い応答時間を計測するロジックを追加します。
(注意:ベンチマークではありません、目安として連続してデータ更新操作の時間を計るだけです)
アプリケーション下部に計測実行用のコンポーネントを追加します。
mxmlを開き、次の箇所を探して処理を変更してください(だいたい146行目あたり)
txtに用意しています。次のように変更します。ボタン処理と、データ更新処理を修正します。asを開き、次の変数を追加します。asの任意の位置(終わりの部分)に次のコードを追加してください。データサービスのresult処理を次のように処理を追加してください。計測実行ボタンのクリックイベントのリスナを追加します。
バックグラウンドのデプロイが終了したら
mxmlを実行し、追加したアプリケーション下部のデータ更新ボタンを実行してみてください。作業の主なポイントは下記の通りです。
Flexコードのコピーと手直し
フィルタ検索の追加
構成ファイルの指定に次の内容を指定し、[終了]します。xml)は任意の場所にコピーしておいてください。Javaのパッケージを作成します。パスワードを入力し、[更新]をクリックします。xmlをテキストエディタで開きます。mxmlとしてペーストします。asとしてペーストします。保存し、閉じてください。asを開いて修正します。を次のようにしてください。保存して閉じてください。asを開いて修正します。を次のようにしてください。クラスの変数名は、8-7で同じ名前になるよう指定しているので修正する必要はありません。続いて、クエリ処理を修正します。を次のようにしてください。mxmlを右クリックして、デフォルトのアプリケーションに設定します。ビルドとAPサーバへのデプロイがバックグラウンドで実行されるので、右下のプログレスが終了するのを待ってから、再度、右クリックし、[実行]-[Flexアプリケーション]を選択します。データの取得と更新・作成・削除はできますが、右下の検索機能が有効になっていません。アプリケーションを終了し、検索機能を実装します。xmlを開き次のHQLクエリを追加します。で修正した処理を検索に対応した処理に変更します。アプリケーションを実行して、検索機能を動作確認してください。作業の主なポイントは下記の通りです。
Flexコードのコピーと手直し
フィルタ検索の追加
warのサンプルをそのまま流用し、実習で使うテーブル用に変更しただけです。ユーザ名とパスワードは使用している環境のアカウントに変更してください。mxmlとしてペーストします。asとしてペーストします。保存し、閉じてください。asを開いて修正します。を次のように変更します。保存して閉じてください。asを開いて修正します。を次のように変更します。続いて、クエリ処理を修正します。を次のように変更します。mxmlを右クリックして、デフォルトのアプリケーションに設定します。ビルドとAPサーバへのデプロイがバックグラウンドで実行するので、右下のプログレスが終了するのを待ち、再度、右クリックし、[実行]-[Flexアプリケーション]を選択し実行します。データの取得と更新・作成・削除はできますが、右下の検索機能が有効になっていません。アプリケーションを終了し、検索機能を実装します。実はすでにフィルタ用のクエリは9-1の定義で記述済みですので、クエリを確認してください。asを開き9-6で修正した処理を検索に対応した処理に手直します。アプリケーションを実行して、検索機能も動作確認してください。
応答時間について
7-6から7-10の手順を行った方は、アプリケーションの下部に応答時間測定用の実行ボタンがあります。この処理は各レコードに参照回数項目を1加算する処理を同期的に実行し、経過時間を表示します。私の試した環境では各Assemblerの実装で、大きな差は発生しませんでした。これはDBアクセスがシンプルな処理で、どの実装でも差がでにくいからかもしれません。※各レコードの更新がすべて正常に実行できることを前提にしたコードなので途中でエラーが発生した場合などは考慮していません。目安としての応答時間を測定するだけのコードです。※各Assemblerの実装手順例を説明するために3つのアプリケーションを作成しましたがそれぞれを同時に動作させると、テーブルの内容に不整合が生じることは容易に想像がつくと思います。実際には開発・保守として作業のしやすい、いづれか1つの実装を選択することになります。
コネクションプールの利用について
3つのAssemblerの実装については、いづれもアプリケーション自身がデータベースへの接続を行っており、APサーバのリソース共有を活用していません。この章では各実装で、データベース接続をAPサーバのリソースを使うように修正する手順を紹介します。修正は主に次のポイントになります。アプリケーションサーバにデータソースを定義する。APサーバにデータソースを定義する。xmlを作成してください。ユーザ名とパスワードは使用している環境のアカウントに変更してください。
データソースとリソースリファレンスの定義
xmlにリソースリファレンスを追加します。xmlを作成してください。データソースとリソースリファレンスの対応を定義します。jar)はバージョンが古いのでFlexプロジェクトから削除します。javaを探し、エディタを開きます。を次のように変更します。xmlをテキストエディタで開きます。
プロパティ設定の
タグをコメントアウトし、次のプロパティを追加します。これでHibernateでの接続プールを使用する設定は完了です。xmlをテキストエディタで開きます。実はその下に、接続プールを使用する記述例があるので、JNDI名を正しく設定してdatabaseタグのコメントを解除します。
ライブラリの配置について
データベースからアプリケーションを作成する機能で自動的にコピーされるJDBCドライバは古いです。適宜、使用しているデータベースに適したバージョンのJDBCドライバに差し替えるようにしてください。また、ローカルでの開発作業を前提としているので、実行に必要なライブラリはWebContents/WEB-INF/lib配下に配置していますが、運用時では、jarファイルをAPサーバのクラスローダ階層のどこ(システム/共有/アプリケーション)に配置するかについて検討しておく必要があります。
参考1:日本語のテーブル名と項目名の対処(案)
実習では英数字のテーブル名・項目名を使用しましたが、MicrosoftのSQLサーバーなどでは日本語のテーブル名・項目名を使用しているケースが多々あるかもしれません。すでにお気づきの方もいるかもしれませんが、データベースからアプリケーションを生成する際、テーブル名や項目名がクラス名や変数名としてコード生成されているので、日本語文字列が使用されていると、そのままではアプリケーションを生成することはできません。※ActionScriptの仕様ではクラス名や変数名に日本語文字を使用することはできません。そこで、対処の一案を紹介します。まず、日本語のテーブルに1対1対応する英数字なビュー名・項目名のViewを作成します。そして、ダミーとして同様に英数字のテーブル名・項目名のテーブルを作成します。項目名はビューと同じ名前です。アプリケーション生成の際はダミーのテーブルを指定し、コード生成後ダミーのテーブル名をビュー名に変更します。こうすることで、日本語のテーブル名・項目名であっても、アプリケーション作成の機能を利用することができるようになると思います。warを指定することでも、データベースからアプリケーションを作成する機能を利用することはできます。
著者について
FlexBuilder3の新機能により、基本機能が動作するサーバサイドとFlexのコードが自動生成されるようになりました。データベース連携するFlexアプリケーション開発では、初期の開発工数について、より短縮できるようになったと思います。この文書の内容が、皆さまの作業効率化の助けになればと思います。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
FlexおよびJavaアプリケーションのアーキテクチャ | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
FlexおよびJavaアプリケーションのアーキテクチャ
これら2つを使用することで、エンタープライズバックエンドソリューションと優れたユーザー体験を利用した、印象的なデータ中心アプリケーションを実現できます。この記事では、FlexとJavaで開発するアプリケーションのアーキテクチャに関して、以下のような内容を説明します。
クライアントとサーバーの間の通信の様々な方法
Flexアプリケーションをセキュリティフレームワークに統合する方法
イベント、ステート、MXMLコンポーネント、モジュールを使用してFlexアプリケーションを構築する方法の概要
これらのアプリケーションの作成に使用されたテクノロジーについて詳しくは、FlexおよびJavaアプリケーション構築のためのテクノロジーの記事を参照してください。FlexおよびJavaアプリケーションは、マルチティアアーキテクチャを使用します。この場合、プレゼンテーションティアがFlexアプリケーションで、ビジネスまたはアプリケーションティアがJava EEサーバーおよびコード、データティアがデータベースです。バックエンドコードは通常のJavaアプリケーションと同様に作成します。すなわち、オブジェクトをモデリングし、HibernateやEJB 3などのオブジェクトリレーショナルフレームワークを使用してデータベースを定義し、これらのオブジェクトを検索して操作するビジネスロジックを作成します。ビジネスティアは、FlexアプリケーションからのHTTPアクセスが可能である必要があり、プレゼンテーションティアとデータティアの間でデータを移動するために用いられます。典型的なHTMLアプリケーションは、複数のページから構成され、ユーザーがそれらのページの間を移動する際に、アプリケーション自体(アプリケーションを構成するページと機能の集合)がステートを維持するために、アプリケーションデータを受け渡す必要があります。これに対して、Flexアプリケーションは本質的にステートフルです。Flexアプリケーションは、動的にビューを変更し、バックグラウンドのサーバーとの間で非同期にデータを送受信します。Flexアプリケーションは、バックエンドのサーバーと、直接のソケット接続またはHTTP(こちらの方が一般的)で通信します。Flexアプリケーションは、リモートデータベースに直接接続することはできません。エンドポイントURL、リスナー関数(HTTPService要求が成功または失敗の応答を返したときに呼び出されるコールバック関数)、返されるデータのデータ型(Flexアプリケーションで受け取った後どのようなデータ構造に変換するか)を指定します。後者の場合、SOAPフォーマットのテキストとActionScriptデータ型との間のシリアライズとデシリアライズが自動的に実行されます。これは、HTTP経由でバイナリアクションメッセージフォーマットを返すサーバーサイドJavaクラスのメソッドに対して、Flash Remoting要求を実行します。
Flash Remotingの場合、データ転送フォーマットがバイナリなので、XML、JSON、SOAPといったデータ量の多いテキストベースのフォーマットに比べて、アプリケーションによるデータのロードが最大10倍高速になります(図2を参照)
したがって、可能な場合はこれを使用することをお勧めします。Flash Remotingは、クライアントサイドとサーバーサイドの機能の組み合わせによって実現される呼び出し-応答モデルであり、Flash Platformからサーバーサイドのオブジェクトに、ローカルオブジェクトと同様にアクセスするための方法です。アクションメッセージフォーマット(AMF)へのシリアライズ、デシリアライズ、クライアントとサーバーの間のデータ変換を処理することで、ActionScriptとサーバーサイドのデータ型の間でのトランスペアレントなデータ転送を実現します。これらは、リモーティング、プロキシ、メッセージングのサービスを提供し、LiveCycleの場合はさらにデータ管理サービスも提供します。Flexアプリケーションがサーバーに要求を送信すると、要求はサーバー上のエンドポイントに転送されます。AMFは、ActionScriptオブジェクトをシリアライズするためのバイナリフォーマットであり、Flash Platformアプリケーションとリモートサービスとの間で、インターネット経由でデータを交換するために使用されます。このプロトコルはアドビによって公開されています。カスタムオブジェクトまたは強く型指定されたオブジェクトの場合、パブリックプロパティ(getおよびsetメソッドが定義されているものを含む)がシリアライズされ、Flexアプリケーションからサーバーへ、またはサーバーからFlexアプリケーションへ、一般オブジェクトのプロパティとして送信されます。BlazeDSは、WARファイルでダウンロードして、Webアプリケーションまたはターンキーソリューションとして展開します。ターンキー用のダウンロードには、Tomcatのすぐに使用できるバージョンが含まれています。この中では、BlazeDSのWARファイルが既に展開され、様々なサンプルアプリケーションとともに設定されています。どちらの場合も、blazedsまたはlcds(通常は後ろにバージョン番号が付きます)という名前のWebアプリケーションが作成されます。
このアプリケーションを自分のJavaコードで変更してビルドすることもできますが、もっと一般的な方法としては、blazedsまたはlcds Webアプリケーションに含まれるJARファイルをコピーして、サーバー上の既存のJava Webアプリケーションに追加します(図4を参照)
ファイルを別のWebアプリケーションにコピーする場合、web
xmlファイルからコピーして貼り付けることができます。これは、サーバーサイドのクラスを分析して対応するクライアントサイドコードを生成する、Flash Builder 4のデータサービス作成機能を使ったRDSアクセスに用いられます。Adobeアプリケーションモデリングテクノロジーについて詳しくは、FlexおよびJavaアプリケーション構築のためのテクノロジーの記事と、チュートリアルBlazeDSリモーティングターゲットに接続するFlexアプリケーションのFlash Builder 4による開発*を参照してください。Flash Remotingでは、クライアントがサーバーに要求を送り、サーバーがそれを処理して、結果を含む応答をクライアントに返します。xmlファイルを変更します。xmlファイルは、要求の実行に使用できる様々なチャネルを定義します。各チャネル定義は、要求に使用するネットワークプロトコルおよびメッセージフォーマットと、メッセージを届けるサーバー上のエンドポイントを指定します。
MessageBrokerは、メッセージを適切な宛先サービスに送ります(これらを定義する方法はこの後で説明します)
sourceプロパティを、ソースパスに存在する引数なしのコンストラクターを持つJava POJOの完全修飾クラス名に設定します。個々の宛先に対するチャネルを指定することもできます。多くのアプリケーションでは、サーバーサイドの一部またはすべてのリソースへのアクセスを特定のユーザーに制限する必要があります。多くのJave EEアプリケーションでは、コンテナで管理されたセキュリティが用いられます。この場合、ユーザー認証(ユーザーの本人確認)とユーザー承認(ユーザーが何にアクセスできるかの決定-多くはロールに基づく)は、レルム(ユーザー名、パスワード、ユーザーロールの記録)に基づいて行われます。レルムは、Java EEサーバー上で、リレーショナルデータベース、LDAPディレクトリサーバー、XML文書として構成されるか、特定の認証および承認フレームワークを使用するように構成されます。その後、ユーザーからログイン資格情報を受け取って認証のためにサーバーに送るフォームを、通常はFlexアプリケーションで作成します。ユーザー資格情報は、その後のすべての要求と一緒に自動的にサーバーに渡されます。xmlファイルで、アプリケーションサーバーの「ログインコマンド」を<security>タグに指定する必要があります。これらはすべてXMLファイルに定義されており、必要なもののコメントを外すだけです。この他に、基本認証とカスタム認証のどちらを使用するかを指定するセキュリティ制約と、必要な場合は1つ以上のロールを定義します。TomatまたはJBossでカスタム認証を行うには、Jave EEアプリケーションサーバーが使用するセキュリティフレームワークとの統合のためのクラスをいくつかWebアプリケーションに追加するとともに、いくつかの構成ファイルを変更する必要もあります。詳しくはこちら*を参照してください。次に、宛先定義でセキュリティ制約を参照する必要があります。すべての宛先に対するデフォルトのセキュリティ制約を定義することも、異なるセキュリティ制約を使用する特定のメソッドだけにアクセスを制限することもできます。xmlファイルに定義されています。
Flexアプリケーションへのコードの追加
以上で、サーバーサイドの設定は終わりです。次に、カスタム認証を使用する場合、Flexアプリケーションでフォームを作成する必要があります。
このフォームは、ユーザーからユーザー名とパスワードを取得し、ChannelSet
resultイベントはログイン(認証)が成功したことを、faultイベントはログインが失敗したことを示します。資格情報は、同じChannelSet上で接続されているすべてのサービスに適用されます。基本認証の場合、Flexアプリケーションには何も追加する必要はありません。アプリケーションが最初に宛先に接続しようとしたときに、ブラウザーがログインダイアログボックスを開きます。
その後、アプリケーションは前と同様にサーバーの宛先に対してFlash Remoting要求を実行できますが、それぞれの要求とともにユーザー資格情報が自動的に送信されるようになります(カスタム認証と基本認証のどちらの場合でも)
宛先または宛先のメソッドに指定されている承認ロールを、ログインするユーザーが満たさない場合、呼び出しはfaultイベントを返します。
イベントの使用
JavaScriptとブラウザーDOMオブジェクトの場合と同様、この2つはイベントとイベントハンドラーによって結び付けられます。RemoteObjectをアプリケーションで使用するには、インスタンスを定義し、サーバーサイドのリモーティング宛先のメソッドを呼び出し、resultおよびfaultイベントに対するコールバック関数を指定し、それらの関数の中で、サーバーから返されたデータを使用して必要な処理を行います。ここに示す単純なアプリケーションは、従業員データをデータベースから取得して、FlexのDataGridコンポーネントに表示します。
または呼び出しごと:
データバインディングの使用
データバインディングはFlexフレームワークの強力な機能であり、データが変更されたときにユーザーインターフェイスを更新する作業を、イベントリスナーを明示的に登録して作成しなくても実現できます。ファイルのコンパイル時に、employees変数が変更されたときにイベントをブロードキャストするActionScriptコードが自動的に生成されます。サーバーからデータが正常に取得されてemployeesに格納されると、DataGridが更新されて従業員データが表示されます。
ビューステートの使用
ユーザーインターフェイスのもっと大きな変更、例えばコンポーネントの追加、削除、移動、変更などを実行時に動的に行いたい場合には、Flexのビューステートを使用します。Flexのすべてのビューまたはコンポーネントに対して、複数のステートを定義し、そのビュー内のすべてのオブジェクトに関して、そのオブジェクトがどのステートに含まれ、そのステートでどのように表示され、動作するかを定義できます。ステートを切り替えるには、コンポーネントのcurrentStateプロパティを、定義されたステートの1つの名前に設定します。
MXMLコンポーネントの使用
アプリケーションが大規模になるとともに、ロジックをActionScriptクラスのいくつかのパッケージに分割し、ビューを別々のMXMLファイル(MXMLコンポーネントと呼ぶ)に分割する必要が出てきます。各MXMLコンポーネントは、既存のコンポーネントを拡張しており、アプリケーションに含めることはできますが、単独で実行することはできません。MXMLのコンポーネントを使用するには、そのコンポーネントのインスタンスを作成し(クラス名はファイル名と同じ)、コンパイラーがコンポーネントを見つけられるように適切な名前空間をインクルードします。次に示すのは、このカスタムMasterViewコンポーネントをインスタンス化して使用するアプリケーションのコードです。
イベントのブロードキャスト
緩く結合したコンポーネントを作成するには、そのコンポーネントに対するパブリックAPI(コンポーネントのパブリックメンバー)を定義するか、上記のMasterViewコードの例に示すように、カスタムイベントを定義してブロードキャストする必要があります。[Event]メタデータタグを使用して、イベントをコンポーネントのAPIの一部として定義し、どのタイプのイベントオブジェクトをブロードキャストするかを指定しています。コンポーネントで何らかのイベントが発生した場合(この例ではDropDownListのchangeイベント)、コンポーネントはメタデータに指定されたタイプのイベントオブジェクトのインスタンスを作成してブロードキャストします。このカスタムコンポーネントをインスタンス化するコードは、このカスタムイベントのリスナーを登録し、イベントハンドラーを登録することができます。このように、カスタムイベントを定義してブロードキャストする緩く結合したコンポーネントは、Flexアプリケーションの中心的な構成要素です。実は、Flexフレームワーク自体のコンポーネントもこの方式で作成されています。
モジュールの作成
デフォルトでは、コードはすべて1つのSWFファイルにコンパイルされます。SWFファイルが大きくなりすぎる場合や、特定のユーザーだけが使用する機能が含まれている場合は、モジュールを使用して、アプリケーションを複数のSWFファイルに分割し、実行時にメインアプリケーションから動的にロードしたりアンロードしたりできます。