マイクロアーキテクチャの使用
アプリケーションの基本的な作成方法は以上ですが、アプリケーションが大規模になるにつれて、何らかの方法でそのファイルを整理し、アプリケーションのデータおよびデータサービスを集中化し、すべてのコンポーネントの間の通信を処理する必要が出てきます。このために、Flexアプリケーションの構築にあたって、エンタープライズアプリケーション開発で長年にわたって有用性が証明されてきたデザインパターンを使用することができます。
実際、Flex専用のマイクロアーキテクチャが多数開発されており、これからも開発されるでしょう
これはオープンソースのマイクロアーキテクチャで、コマンドと委譲、フロントコントローラ、シングルトンデータモデル、シングルトンサービスストア、イベントディスパッチャーを使用します。これらをはじめとするフレームワークについて詳しくは、AdobeデベロッパーセンターのFlexアーキテクチャを参照してください。
次のステップ
この記事では、FlexおよびJavaアプリケーションのアーキテクチャについて説明しました。詳しくは、記事内のリンクと以下のリソースを参照してください。
著者について
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
エンタープライズ デベロッパーの方々からのご要望
5 がターゲットとするアプリケーション
必ずしもすべてのFlashオーサリング開発者向けではない。
最初のバージョンとなる 1
0 をリリースするに当たり、我々は以下の 2 つの目標を掲げ、この点については、いかなる妥協も許さず製品開発を進めてきました。• 既存のインフラ、プロセス、スタッフのスキルを最大限に活用したいという、ユーザーのニーズに応える。お客様が、卓越したガイド付きアプリケーション、ダッシュボード型アプリケーション、ビジネスプロセス自動化アプリケーションを構築できるようにする。5 使えば、デベロッパーはこれまでになく素晴らしいアプリケーションを構築できる、と我々は自信を持っています。しかも、Flex は比較的に新しいテクノロジーであり、もちろん将来のバージョンでは多くの機能強化や新機能の実装が予定されています。
Flex が、皆さんのビジネスニーズに対するソリューションとなりうるかを正しく判断していただくために、ここでは Flex 1
0 で実装を見送ったいくつかの機能について触れ、我々がこれまで耳にしたFlex に対する誤解を解いておきたいと思います。将来のバージョンの Flex では、次のポイントに着目してください。
大きなデータセットとパフォーマンスのチューニング
前述の通り、Flex では複数の方法でサーバーサイドのビジネスロジックに接続することができます。実際、高いパフォーマンスを発揮するために、数多くの工夫がこれらのコンポーネントに盛り込まれています。例えば、XML データは「ちょうど良いタイミング」でローカル オブジェクトに変換されます。これによって、ユーザーがアクセスしないデータの処理にかかる不必要なオーバーヘッドを防ぐことができます。ただし、Flex アプリケーションは、従来のファット クライアントと Web ベースのサーバー アプリケーションを組み合わせたハイブリッドであるため、Flex テクノロジーがもつパフォーマンスの特性を十分に理解することが大切です。つまり、クライアントサイド、サーバーサイド両方のプロセスが最適化されるよう、アプリケーションをデザインする必要があります。Flash の実行環境はユーザー インターフェイスのレンダリングとクライアントのステートを管理するために設計されていますが、クライアント側で大量のデータを効率的に扱うよう最適化されているわけではありません。規模の大きなデータセットを取り扱うためには、データページング(データをページ単位に分けて表示)を実装することが必須となります。Matthew Chotin が提案するデザインパターンを利用すれば、アプリケーションのパフォーマンスを向上しつつ、メンテナンス性に優れたアプリケーションが構築できます。また、別途記事「Flex アプリケーションのパフォーマンス : クライアント アプリケーションのパフォーマンス チューンアップ テクニック集」は、 Flex アプリケーションを開発するデベロッパーの方に必ず読んでいただきたい記事です。Macromedia のエクスペリエンス デザインチームは過去何年にも渡り、数多くのエンドユーザーと交流してきました。このチームは、ユーザー インターフェイスのガイドラインを繰り返し策定、改訂し、Flex コンポーネントのデフォルトのルック & フィールをデザインしました。開発者はMacromedia エクスペリエンス デザインチームの作り上げた、洗練されたデザインをそのまま使うこともできますし、必要に応じて独自のスキンやスタイルを適用し、Flex アプリケーションのルック & フィールを変えることもできます。Flex にはいくつかサンプルのカスケーディング スタイルシート (CSS) が付属しています。図 1 から図 3 は同じアプリケーションに異なるスタイルを適用した例です。適用しているスタイルシートはいずれも、わずか 10 行ほどからなる CSS です。それぞれの例では、以下の点が異なります。
配色と色のグラデーション
アプリケーション内に表示されているパネルの四隅の丸み
CSS を使った UI のカスタマイズで物足りない場合は、Flex コンポーネントのスキンを変更する方法があります。
スキンを変更する方法を用いるとコンポーネントの外観を全く違うものにすることが可能ですが、Flash に熟知したデザイナーの力を借りなければならないでしょう
コンポーネントのスキンを変更する方法は、非常にパワフルで、しかも高度にブランディングされたアプリケーションを可能にしますが、CSS だけを使っても十分なブランディングを実現することができます。
5 で何が変わったのか
5 に盛り込まれた多くの変更点にお気づきかと思います。特に、アプリケーションのパフォーマンスと言語の使い勝手に関しては大きな進化が見られるはずです。5 に追加された機能としては、新たなグラフコンポーネント群、リストベースのユーザーインターフェイスの強化、起動時間の短縮、ランタイム共有ライブラリなどがあります。5 新登場」で詳細に解説しています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
少しだけ歴史を振り返る。
AMF仕様のオープン化
サーバと通信してみる。
もっと良い方法
クライアントサイドの実装
デバッグのためのツール
印刷用に表示
必要なソフトウェアとファイル
この記事で使用する言語
上記の(サーバサイドの)言語の何れかの基礎的な知識
Flexが登場してから、Webの様相は大きく変わりました。FlexはFlashの表現力を持ちながら、データベースに代表されるサーバサイドのリソースとの融和性に優れ、まだこの世に登場してから数年と経っていませんが、Flexを使った画期的なWebサイトやサービスが登場してきています。
現在、既にFlexを絡めた本格的なWebサイトの構築の経験がある方もかなり増えてきたと思いますが、サーバサイドと連携しないコンテンツのみを開発している方もまた少なくないことでしょう
「サーバサイドって難しそう/面倒そう
」と尻込みされている方もいるかもしれません。本稿では、初めてFlexを触ってみる人や、軽量スクリプト言語の経験があるWeb系エンジニアにもわかりやすいように、Flexとサーバサイドの通信方法について説明したいと思います。
著者について
金融系システムのRIA化を得意とし、日々アーキテクチャー設計と実装に奮闘中
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
ポータルを利用すれば、散在する情報を容易に 1 カ所に集約することができます。しかし、一般的なポートレットは通常 HTML を情報表示のために使用していることから、HTML の本質的な制限にとらわれざるをえません。HTML の制限としては、頻繁に起こるページのリフレッシュ、クライアントにおける状態管理や高度なデータ操作性の欠落、限られたユーザー インターフェイス コンポーネントの存在、といった事柄が挙げられます。ポータルに興味を持つユーザーは、このような HTML の制限にとらわれることなく、よりリッチなユーザー体験をポータルや、引いては Web アプリケーション全般に提供することが可能なソリューションを求めているといえます。Macromedia Flex は、デスクトップ アプリケーションの使いやすさと Web アプリケーションの広範な配信性を兼ね備えた、次世代型リッチ インターネット アプリケーション (RIA) を実現するためのプレゼンテーション サーバーです。Flex を利用してポートレットのユーザー インターフェイスを表示すれば、ポータル全体のユーザー体験が飛躍的に向上します。このホワイトペーパーでは、Flex プレゼンテーション サーバーを利用してポータル アプリケーションのリッチなフロントエンドを構築する方法を紹介します。
ポータルについて
ポータルとは
ポータルとは、さまざまな情報ソースから横断的にコンテンツを収集し、これらを 1 カ所に集約する Web アプリケーションのことを指します。一般的なポータル アプリケーションは、これに加えてパーソナライゼーション機能や、独自のセキュリティフレームワーク、あるいは既存製品 (Netegrity SiteMinder 等) を使ったシングル サインオン機能を提供します。
ポートレットとは
ポートレットとは、Java ベースの Web コンポーネントを指し、ポートレット コンテナによって管理されます。ポートレットは、プラグインとしてポータル アプリケーションのユーザー インターフェイス機能を担います。ポートレットが表示するコンテンツは通常 HTML (もしくは類似のマークアップ言語) によって表示され、他のポートレットのコンテンツと組み合わさることで、1 つのポータル ページが構成されます。
ポートレット コンテナとは
ポートレットの実行環境を提供するのが、ポートレット コンテナです。ポートレット コンテナはポータル アプリケーションとポートレットの間に入り、ポータル アプリケーションからの実行リクエストをポートレットへと伝えます。なお、ポートレットが取得したコンテンツを集約する機能は、ポートレット コンテナではなく、ポータル アプリケーションによって提供されます。
ポータルのベンダー
ポータル アプリケーションを開発、販売する主要ベンダーは以下の通りです。ポータルベンダーは、各々、ポータル API とそれを実行するためのランタイム環境を独自に実装してきました。そのため、ISV やユーザーは、このベンダーによる異なる実装方法と、その非互換性に悩まされ続けてきたといえます。JSR-168 の登場を受けデベロッパーは、一度開発したポートレットをあらゆる JSR-168 準拠コンテナに配置できるようになりました。ほとんどのポータルベンダーが JSR-168 規格を既に実装済み、あるいは実装している途中にあります。これらのベンダーは、下位互換性を確保するため、JSR-168 登場以前に実装していた独自の API も引き続きサポートしています。ポータルを利用すれば、散在する情報を容易に 1 カ所に集約することができます。しかし、一般的なポートレットは通常 HTML を情報表示のために使用していることから、HTML の本質的な制限にとらわれざるをえません。Flex を利用してポートレットのユーザー インターフェイスを表示すれば、ポータル全体のユーザー体験が飛躍的に向上します。上図のポータルページには、5 つの Flex ベースのポートレットが組み込まれています。
(後の「インテグレーション シナリオ」のセクションで詳細を解説しますが、Flex ベースのポートレットは、既存の HTML ベースのポートレットと混在させることも可能です)
投資信託セレクター ポートレット:リッチなユーザー インタラクションの例を示すこのポートレットの場合、ユーザーはスライダーなどの使いやすいコントロールを利用して、選択条件を設定できます。また、ポートレットは自動的に設定条件を満たさない投資信託項目をフェードアウトさせるとともに、投資信託のシンボル上にカーソルを配置すると同時にその詳細を表示します。リアルタイム市場情報ポートレット:リアルタイム市場データフィードに接続するポートレットのサンプルです。サーバーから最新のデータが送られると、折れ線グラフが自動的にアップデートされます。ポートフォリオ ポートレット:リッチなユーザー インターフェイス コンポーネントの使用例として、データグリッド (データのソートや、セルの編集が可能) とアコーディオン ナビゲーションが利用されています。ユーザーがこのポートレットの表示を最大化すると、表示中の株価情報をドラッグ & ドロップ操作でウォッチリストに登録できます。ビデオ ポートレット:MediaPlayback コンポーネントを利用すれば、ポータルに完全に統合された形でストリーミング ビデオ再生機能を追加できます。チャット ポートレット:サーバーからクライアントに向けたデータのプッシュ配信の実装例です。ポータル環境に Flex を導入するメリットとしては以下のものが挙げられます。
ユーザー体験の向上
Flex を利用すればデスクトップ アプリケーション相当のユーザー体験が提供可能
データグリッド、ツリー、タブナビゲーション、アコーディオン、グラフコンポーネント、スライダーなど、リッチなユーザー インターフェイス コンポーネントが利用可能
ドラッグ & ドロップや単一画面内での表示展開/折りたたみなど、リッチなユーザーインタラクションが実装可能
ページリフレッシュの回避
メモ: ユーザーの立場から考えた場合、ポータルページが常にリフレッシュされていては、何がどうなったかという事柄が把握しにくくなりがちです。また、ページをリフレッシュする際に発生するネットワーク帯域も決して安価なものではありません。Flex で作成したポートレットは、HTML ベースのそれとは異なり、ページのリフレッシュを行わずにバックエンド システムと連携できます。
クライアントサイドでの「スマートな」データ操作
サーバーからクライアントにデータがダウンロードされたあとは、クライアントサイドでこのデータを操作できます。例えば、1 度アイテムのリストさえクライアントにダウンロードしておけば、クライアントサイドでこれらのアイテムにソートやフィルター処理を適用できます。こうすれば、サーバーとの通信量を抑制できるだけでなく、レスポンス性に優れたユーザー インターフェイスが提供できます。必要であれば、クライアントサイドでデータを保存することも可能です。
ネットワーク トラフィックの削減
Flex ベースのポートレットの場合、バックエンド システムとの連携にページのリフレッシュを必要とせず、しかもクライアントサイドでデータを操作することができます。したがって、ネットワーク トラフィックを大幅に削減する効果があります。ポートレットの仕様には、次の 3 つのウィンドウの「状態」が定義されています。ノーマル:この状態にあるポートレットは、通常他のポートレットとともにページに表示されます。したがって、ポートレットの表示サイズは、このウィンドウ状態にあわせて作成する必要があります。
最大化:ポータルページの画面の中で、そのポートレットのみが表示されている状態
通常この状態にあるポートレットには、ノーマル状態より多くの機能が提供されます。最小化:ポートレットのタイトルバーのみが表示されます。Flex ベースのポートレットと HTML ベースのポートレットは、同一のポータルページ上で共存できます。また、ポートレットの表示に使用するテクノロジーは、その状態に応じて変化させることも可能です。
例えば、「ノーマル」状態のポートレット ユーザー インターフェイスを HTML で作成し、「最大化」状態のユーザー インターフェイスを Flex で提供するといったことが可能
しかし、ポートレットが最大化されたときに最も使いやすいユーザー インターフェイスを提供することが一般的にはより論理的といえるでしょう
「ノーマル」、「最大化」の両方の状態に、Flex のユーザー インターフェイスを実装することも考えられます。たとえノーマル状態の小さなポートレットでも、Flex を使用するメリットは十分にあります。仮に株価情報を提供するポートレットがあったとします。このポートレットを HTML で実装した場合、ユーザーは株価情報をリクエストするたびに、ポートレットだけでなく、ポータルページ全体をリフレッシュしなければなりません。これでは、単純な機能を提供しているにも関わらず、ネットワークへの負荷は非常に高くなってしまいます。Flex ベースのポートレットなら、ポータルページ全体をリフレッシュすることなく、バックエンドシステムからデータを取得できます。なお、Flex ベースの株価情報ポートレットについては、後ほど詳しく解説します。
最大化された状態のポートフォリオ ポートレット
最大化された状態のポートレットでは、高度な機能性を提供できるだけでなく、単体の Flex アプリケーション全体を配置することも可能です。次の図は Flex 付属のサンプル アプリケーション、「FlexStore アプリケーション」をポートレット化し、「最大化」状態のポートレットに配置したものです。
ポートレット化した FlexStore サンプル アプリケーションを、ポートレットの「最大化」状態で実行している様子
ポートレットの仕様には、ポートレットが持つ 3 つのモードに付いても定義されています。なお、これらのモードのユーザー インターフェイスは、ウィンドウの「状態」同様に、それぞれ異なるテクノロジーを利用して構成することもできます。
ポートレットの UI のレンダリング
ユーザーがポータルページにアクセスすると、ポータル アプリケーションはポートレット コンテナを利用して、ページ上の各ポートレットの UI を生成します。そして、ポータル アプリケーションは個々のポートレットが生成したコンテンツを集約し、1 つのページとしてクライアントへ返します。各ポートレットの UI は、ポートレット コンテナがポートレットの render() メソッドを呼び出すことで生成されます。Flex はこのワークフローにぴったりフィットします。」を表示するためだけに Flex は必要ありません。ここで紹介したかったのは、以上のコードだけでリッチ ユーザー インターフェイスが作成できるということです。mxml" ファイルさえ編集すれば、データグリッドや、ツリー、グラフ コンポーネント、ドラッグ & ドロップ ビヘイビアなどといった機能が備わった完全なリッチ インターネット アプリケーションを、ポータル アプリケーションのポートレットとして表示できます。
データとの連携 : フロント / コントローラー モデル
通常のワークフローにおいて、ポートレットはフロント コントローラーとしての役割も果たしています。サーバーサイドでの処理のリクエストや、UI のレンダリングに関するリクエストは、すべてポートレット URL を利用してポートレットクラス経由で行われ、ポートレットは受け取ったリクエストの処理をモデル (JavaBean、EJB、Web サービス等) や、ビュー コンポーネント (JSP や サーブレット) へ委ねます。なお、ポートレット URL とは、エンドユーザーの目に触れることがない、ポートレット コンテナが生成する URL のことです。クライアントからのリクエストがレンダー URL の場合、ポータル コンテナはページ上のすべてのポートレットの render() メソッドを実行します。ポータルのバックエンドとの連携に関して Flex は、エンドユーザーの使い勝手とネットワーク帯域の両方の観点から見て、より効率的な他の手法を提供しているものの、引き続きフロント / コントローラーのワークフローもサポートしています。したがって、アクション URL やレンダー URL は、パラメーターとして Flex アプリケーションへ渡すことができるので、Flex アプリケーションは、これらの URL を利用してリクエストを Flex アプリケーション内から、HTML ベースのポートレット同様にポータルへと送信できます。メモ: このパラメーターを渡すテクニックは、ポートレットの初期化や各種引数、設定情報などといった、さまざまな情報を Flex アプリケーションに渡す際にも応用できます。このサンプルでは、HTML クライアントで使われているリクエスト / リスポンス モデルを元に、ポートレット URL を利用したワークフローが実装されています。したがって、このモデルはページ概念をベースにしており、クライアントからのリクエストがある度に UI 全体 (この場合、ポータルページ全体) がリフレッシュされなければならないという制約があります。これでは、ユーザーが今どこにいて、何をしているのかといった事柄が把握しづらく、ユーザー体験上問題が多いとともに、ネットワーク帯域という観点からも非常に無駄の多いモデルといわざるをえません。一方のリッチ クライアント テクノロジーの場合、バックエンドに控えるサービスとの連携には、XML over HTTP や SOAP を利用するサービス指向アーキテクチャー (SOA) が活用でき、従来の制約事項が回避できます。なお、SOA を利用する手法に関しては、次のセクションで解説します。Flex のポートレット内でアクション URL やレンダー URL が使えることは、場合によってメリットともなります。たとえば、レンダー URL を利用して、ポートレット コンテナにウィンドウの「状態」を変化させることを指示するケースがあるかもしれません。
データとの連携 : サービス指向アーキテクチャー (SOA) モデル
Flex の場合、サービス指向アーキテクチャー (SOA) を利用して、バックエンドのサービスとデータの連携を行うことができます。Flex にはアプリケーションに必要なデータ連携を実現するために、次の 3 つの方法があります。この際、実行する Java オブジェクトのメソッドは Web サービスとして公開されている必要はありません。クライアント / サーバー間の通信プロトコルとしては、SOAP もしくは AMF (HTTP を使ったバイナリープロトコル) のいずれかが選択できます。次のサンプルは Web サービスを利用する Flex ベースの株価情報ポートレットのコードです。Flash Player のセキュリティ サンドボックスの場合、クライアント アプリケーションは、アプリケーションの配信元サーバーとのみ通信することが許可されています。
ポートレットのセッション情報へのアクセス
Flex の提供するセッション API を利用すれば、Flex クライアントからポートレットのセッションオブジェクトの属性にアクセス (取得と代入) できます。リスト 10: 以下は Flex ベースのポートレットから、セッションの属性値を取得、代入するためのサンプルコードです。
デプロイ時のオプション
Flex プレゼンテーション サーバーは、お使いのアプリケーション サーバー上の一 Web アプリケーションとしてデプロイ可能です。この際、Flex は、ポータル アプリケーションの一部としてまとめてデプロイできるだけでなく、単独の Web アプリケーションとしてもデプロイできます。なお、この記事で紹介したサンプルコードは、いずれの設定でも動作することが確認されています。散在する情報を 1 カ所に集約することが可能なポータル アプリケーションの登場によって、情報へのアクセスが便利になりました。しかし、一般的なポートレットは HTML を情報表示手段として用いているため、HTML の本質的な制限にとらわれざるを得ませんでした。Flex を利用してポートレットのユーザーインタフェースを表示すれば、ポータル アプリケーションの全体的なユーザー体験が飛躍的に向上します。
著者について
Powersoftでは、Java&インターネットアプリケーション部門のテクニカルエバンジェリストを務める。
その後マクロメディアに入社し、マクロメディアのJ2EEアプリケーションサーバ、JRunのテクニカルエバンジェリストに就任
リッチインターネットアプリケーション(RIA)やFlashフロントエンドとJ2EEバックエンドの統合に携わる。現在は、Adobeの新しい開発者向けRIA関連のシニアエバンジェリストを務める。過去10年間、世界中の様々なカンファレンスで常連の講演者として活躍する。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
どの方法を選ぶかは、使用したいFlex SDKの機能と、移行作業にどの程度の労力を割けるかによって決まります。参考として、使用できる方法を以下に示します。これにより、Flash Builder 4の新機能のほとんどを既存のプロジェクトに対してそのまま使用できます。Flash Builder 4の機能としては、ネットワークモニター、拡張デバッグ、新しいリファクタリングのサポート、コード編集の改良、ユニットテストのサポート、データ中心型開発(DCD)ワークフローなどがあります。合計50種類以上の新機能により、Flexアプリケーション開発の生産性を改善できます。プロジェクトを読み込むと、プロジェクトのFlex SDKバージョンを選択するためのダイアログボックスが表示されます。5が標準で付属しています。5」を選択し(図2を参照)、ステップ5に進みます。特定のSDKを使用する。この設定は簡単で、1回だけ行えば済みます。または、必要に応じて安定ビルドまたはナイトリービルドを選択することもできます。
環境設定(フィルター済み)
読み込みプロセスが完了した後、HTMLラッパーの作成に関連するエラーが、Problems(問題)ビューに表示される場合があります(図5を参照)
これにより、アプリケーションの現在の動作は保持されるので、コードを変更する必要はありませんが、プロジェクトのコンパイル時間は大幅に改善されます。ただし、Flex 4の言語機能や新しいSparkコンポーネントをプロジェクトで使用することはできません。0に設定されます。このフラグの働きについては、このドキュメントを参照してください。既存のプロジェクトでFlex 4言語の新機能だけを使用するには、プロジェクトの読み込みの際にFlex 4 SDKを選択し、MXコンポーネントセットだけを使用するように指定します。
MXのみコンポーネントセットを選択
使用可能になる新しい言語機能としては、双方向データバインディング、新しいStatesモデル、宣言的レイアウト、拡張エフェクト、拡張CSSがあります。デザインビューのコンポーネントパネルには、MXコンポーネントだけが表示されます。コンテンツアシストには、MXコンポーネントだけが表示されます。Haloテーマがデフォルトで設定されます。
拡張CSSがサポートされますが、既存のCSSタイプセレクターには名前空間を追加する必要があります(そうしないと、コンパイラー警告が表示され、スタイルが正しく適用されません)
これらの機能の詳細と、アプリケーションの移行の際に発生する可能性がある問題については、Flex 4の機能および移行ガイド*を参照してください。既存のMXコンポーネントは、同じFlexアプリケーションの中で、新しいSparkコンポーネントと共存させながら引き続き使用できます。これにより、新しいコンポーネントアーキテクチャを段階的に採用することができます。既存のMXコンポーネントからSparkコンポーネントへの置き換えは、必要な場合だけ行うようにしてください。アプリケーションに新機能を追加する場合には、Sparkコンポーネントを使用します。コンテンツアシストでは、SparkコンポーネントがMXコンポーネントより前に記載されます。Sparkテーマがデフォルトで設定されます。
拡張CSSがサポートされますが、既存のCSSタイプセレクターには名前空間を追加する必要があります(そうしないと、コンパイラー警告が表示され、スタイルが正しく適用されません)
これらの機能の詳細と、アプリケーションの移行の際に発生する可能性がある問題については、Flex 4の機能および移行ガイド*を参照してください。
デベロッパーから最も要望が高かった5つの機能*
デベロッパーの生産性改善
データ中心型の開発
著者について
コンピューターベース体験の品質、豊かさ、価値を高めるために奮闘中です。富士通に在職中は、政府および企業顧客向けのWeb、キオスク、モバイルユーザーインターフェイスの開発に携わっていました。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
0によるFlexアプリケーションのテスト | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
0によるFlexアプリケーションのテスト
FlexアプリケーションのUIコンポーネントのテストは、自動化しないと面倒で時間のかかる作業です。Flexには、GUIレベルで動作する自動テストを作成するためのオートメーションフレームワークが組み込まれています。0は、オープンソースのAIRアプリケーションであり、Flexのオートメーションフレームワークを利用して、FlexアプリケーションのGUI操作を記録して再生します。FlexMonkeyを使えば、テストによってアプリケーションビューを直接操作できるので、ビューコンポーネントとその背後のロジックを容易に検証できます。オートメーションフレームワークとの統合は裏側で実行されるので、FlexMonkeyを使用するためにアプリケーションのソースやコンパイル方法を変更する必要はありません。この記事では、開発フローの一部としてFlexMonkeyを使用する方法を説明します。Flex Builderプロジェクトから直接アプリケーションを起動することも、ブラウザーで動作しているアプリケーションに接続することも、アプリケーションにリンクすることもできます。この記事を最大限に活用するには、次のソフトウェアとファイルが必要です。
この記事に必要な予備知識
初めてのFlexMonkeyプロジェクトを作成するには、この記事のサンプルファイルをダウンロードして展開し、以下の手順を実行します。「選択」をクリックすると、FlexMonkeyはテストとプロジェクトの環境設定を保持するファイルを作成します。注意:テストするSWFがリモートの場合、URLを入力できます。
ターゲットSWFを表示したウィンドウが開きます(図5を参照)
ターゲットSWFウィンドウがデスクトップ上に開く。
初めてのテストの作成
xUnitをお使いになったことがあれば、標準の階層的テスト構成がFlexMonkeyに示されているのがわかるはずです。記録(Record)ボタンをクリックすると、ボタンが赤く光り、記録モードに入ったことがわかります。具体的には、新規連絡先の追加をテストします。記録モードの間は、アプリケーションに対するすべての操作がFlexMonkeyによって記録されます。swfウィンドウで、新しい名前を入力し、コンボボックスから電話の種類を選択し、電話番号を入力し、誕生日のフィールドは空白のままにして、「Add」をクリックします。swfウィンドウで連絡先を追加したら、記録ボタンをもう一度クリックして、記録モードをオフにします。記録されたUIコマンドがConsoleウィンドウに表示される。2列目には、OpenおよびSelectイベント、キーボード入力、マウスクリックに対するエントリがあります。3列目には、UIコマンドのターゲットコンポーネントのidが示されます。
アサーションの追加
次は、テストにアサーションを追加します。スナップショットモードで、マウスカーソルをターゲットSWFウィンドウに移動します。赤でハイライト表示されたコンポーネントをクリックすると、アサーションのターゲットになります。
この例では、データグリッドをクリックします(図11を参照)
Contact Managerアプリケーションのデータグリッドがスナップショットモードでハイライト表示される。アサーションのターゲットコンポーネントを選択すると、FlexMonkeyはSpyウィンドウを表示します。これにはターゲットコンポーネント現在のプロパティとスタイルが表示されます。
これは現在0 に設定されています(図12を参照)
テストの実行
NewTestを選択し、再生をクリックしてテストを実行
FlexMonkeyは再生中に、実行しているUIコマンドをコンソールウィンドウでハイライト表示します。もちろん、コマンドが実行される様子はターゲットSWFウィンドウでも見ることができます。実行中のUIコマンドがハイライト表示される。FlexMonkeyが最後のコマンドの再生を終えると、再生ボタンの緑の光が消え、テストの結果が更新されます。
作業の保存と終了
保存(Save)ボタン(ツールバーの右端の青いディスクアイコン)を押すことにより、いつでも作業を保存できます。
保存していない場合、FlexMonkeyを終了する際に、作業の保存を促すメッセージが表示されます(図17を参照)
次にFlexMonkeyを開いたときには、このプロジェクトが再び開かれ、テストファイルとターゲットSWFがロードされます。
次のステップ
この記事では、FlexMonkeyプロジェクトの設定、テストの作成、アサーションの追加、テストの実行について説明しました。サンプルアプリケーションや自作のFlexアプリケーションに対してFlexMonkeyを使用して、UIテストの記録と再生を試してみてください。FlexMonkeyの詳細を知るには、次のリンクとリソースを参照してください。
著者について
ソフトウェアおよびハードウェアの開発者として、特に検証とテストを中心に20年以上の経験を誇っています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
過去3年間のFlex/AIR開発を通じて、筆者はそうした「落とし穴」にことごとくハマり、そのたびに「二度と繰り返すまい」との思いで要点をメモしてきました。
本連載では、その筆者の「Flex/AIRハマり帳」をもとに、これからFlex/AIR開発を始める方が同じ過ちを繰り返さないためのささやかなtipsを紹介していきたいと思います(なお、ここで紹介するtipsは、あくまで筆者の経験に基づいて得られたものであり、アドビシステムズの公式な提供情報ではないことにご留意ください)
まずは、以下のサンプルを試してみてください(クリックすると動作します)
ごらんの通り2つのComboBoxが並んでおり、それぞれ選択すると、選んだ文字列が画面下のTextAreaに大量にコピーされるというサンプルです。左と右のComboBoxは、機能的には何ら違う点はありません。しかしお試しいただくと分かるとおり、左のComboBoxは何か動きが最後に「ひっかかる感じ」です。文字列を選択したあと、ドロップダウンリストが上に引っ込むときの動作が若干スムーズではありません。一方、右のComboBoxは通常どおりスムーズに引っ込んでくれます。実は筆者は、ある開発案件でこの問題に悩まされました。お客様から「ComboBoxの動きがどうもぎくしゃくする」という指摘を受けたものの、どう対処すればよいか分からなかったのです。原因については、ある程度の予測はつきました。ComboBoxの選択にともなって実行される処理が重い(時間がかかる)のです。例えば上記サンプルの左のComboBoxは、以下のようなMXMLコードで記述されています。同関数は、以下のように定義されています。
// なにか重い処理
このサンプルでは、「選択された文字列を1万回コピーしてTextAreaにセットする」という処理(doSlowTask関数)を実行していますが、要するにこの部分は「時間がかかる処理」ならなんでもかまいません。筆者の開発案件の例では、AIRクライアントが内蔵するSQLiteデータベースに対する検索処理(同期呼び出し)でした。
なぜこのようなことが起きるのか
それを調べる過程で学んだのは、「Flash Playerはシングルスレッドで動作する」という点が重要な意味を持っていることです。参考になったのは、以下のWebページです。このページでは、以下のように説明されています。「シングルスレッド」とは、「同時に1つのプログラムだけを逐次実行する」というモデルです。例えるなら、たくさんある仕事をすべて1人でこなすようなものです。一方、シングルスレッドと対比される「マルチスレッド」とは、「1回に複数のプログラムを並列処理する」というモデルです。たくさんある仕事を複数人でこなすようなものなので、誰か1人が仕事でハマっていても、もう1人が他の仕事を並列して進めることができます。
図:シングルスレッドとマルチスレッド
一般に、GUIアプリケーションはマルチスレッドモデルで実装されている例が少なくありません。そのため、例えばボタンをクリックしたあとに実行される処理に長い時間がかかったとしても、UIの描画や他のイベント処理は並列処理されるため、GUIアプリケーション全体が「固まってしまう」ことはありません。上記ページで説明されているように、Flash Playerは以下の2つの処理を短い時間で切り替えながら「並行」処理しています。この仕組みがスムーズに動作する前提条件は、このどちらの処理も短時間で終了する(もしくは中断できる)という「譲り合いの精神」です。こうした罠にはまった筆者を救ったのが、上記ページでも紹介されている「callLater関数」です。上記サンプルの右のComboBox(スムーズに動く方)では、以下のようにcallLater関数を利用するイベントハンドラを使用しています。時間がかかる処理は、この引数の関数内で呼び出すように記述しておくことで、UI描画がすべて終了してから実行されます。これにより、ComboBoxの動きがぎこちなく見える現象が解消される仕組みです。
非同期で行こう
基本ルールは、「時間がかかる処理は非同期で実行すべし」です。これを日常業務でのコミュニケーションになぞらえると、例えば「電子メール」では、メールの発信元はメールを送りっぱなしにして次の作業に取りかかれるため、非同期型のコミュニケーションが可能です。一方「電話」では、相手が返事してくれるまで発信元は待たされます。例えばAIRの内蔵データベースSQLiteでは、データベース・アクセスのためのAPIとして、一般的な同期型(DB検索が終わるまで待たされる)と非同期型(DB検索が終わったらイベントでコールバックしてくれる)の両方を提供しています。また同様に、AIRのファイル・アクセスAPIでも非同期型と同期型の2種類を用意しており、ファイルのコピーといった時間のかかる処理でもアプリケーションがフリーズしないような実装が可能です。Timerクラスを活用することも可能です。例えば、UIコンポーネントのイベントをトリガーとしてTimerをスタートさせ、Timerのtimerイベントを受けて実際の処理を実行するように記述しておきます。これにより、イベントハンドラと実際の処理を切り離した非同期式の実装が可能です。以下のサンプルの動作をお試しください。
図:Timerによる非同期処理のサンプル(サンプル表示後、右クリック→「ソースの表示」でソースが見られます)
このサンプルを使うと分かるように、左側のTextInputでは文字を入力するたび(=changeイベントが発生するたび)に重い文字列コピー処理が実行されるため、TextInputのUI描画がぎこちなくなってしまいます。これに対し、右側のTextInputでは文字入力の後にワンクッション(正確には500ms)おいてから処理が実行されるため、UIはスムーズに動作しています。このように、イベントハンドラの中ではTimerをリセットして再スタートさせているだけであり、これらの関数呼び出しによってUI描画が妨げられることはありません。一方、Timerの方は以下のように初期化されています。上記例のように、timerイベントのイベントハンドラ内で重い処理を呼び出すことで、非同期動作が可能です。また、短時間で多数発生するchangeイベントによるチャタリングを吸収して1回の処理にまとめるという効果も得られています。以上、今回はFlash Playerのシングルスレッドモデルに注目し、それがもたらす問題と対策について紹介しました。ここで取り上げたような「UIの微妙なぎこちなさ」は、要件定義書や仕様書に明記されるようなものではありません。しかし発注元やエンドユーザーがアプリケーションに触れた際に与える印象(エクスペリエンス)を損なう要因ともなり、それを解消するために思ったよりも大きな工数が取られることもしばしばあります。
Flex/AIR開発における顧客満足と生産性を高めるためにも、こうした「小技」を覚えておくことが意外に有効だと言えるでしょう
著者について
Adobe FlexおよびAIRなどのリッチ・インターネット・アプリケーション分野をはじめ、Javaサーバサイド・プログラミング、データベース開発、仮想化技術などを中心に執筆活動を行っている。また技術文書や書籍の翻訳も手がけており、翻訳書に「XML構築ガイド」(ピアソンエデュケーション)がある。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
注: この記事は、現在英語でのみお読みいただけるAdobe® Labs*に掲載の記事を翻訳したものです。Adobe Labs*では、アドビが開発を進める新しい製品やテクノロジに関する情報を早い段階でご覧いただけます。また、ダウンロード、サンプル、ドキュメンテーション、リリースノート、チュートリアルなど、各種リソースも提供しています。0ベースのリッチなクラスライブラリを提供します。また、アプリケーションの視覚的要素の制御を宣言によって行う、MXMLと呼ばれるXMLベースの言語を追加することにより、より広範なプログラミングパラダイムも提供します。基本的に、Flexフレームワークは、アプリケーションの骨格となるものです。既存のコンポーネントを拡張したり、新しいコンポーネントを一から作成したりすることにより、アプリケーションのユーザインタフェイスを記述する。データグリッド上のドラッグ可能カラムなどの定義済みのインタラクションを利用したり、明確に定義されたイベントを利用してアプリケーション固有の動作を定義したりする。フレキシブルなエフェクトインフラストラクチャを使用して、複雑なユーザインタフェイスのトランジションを演出する。アプリケーションのユーザインタフェイスを介してデータフローを記述する。パワフルなスキニングおよびスタイリングインフラストラクチャにより、アプリケーションのルック&フィールを定義する。これらのことが、すべて可能です。Flex SDKには、このFlexフレームワークの他にも、コマンドラインコンパイラやコマンドラインデバッガなどの開発者用ユーティリティ一式が含まれています。
Flexフレームワークの目指すもの
Flexフレームワークの主たる目標の1つに生産性の向上があります。Flexチームでは、外観や操作性を開発者が正確にコントロールできるようにしておきながら、可能な限りプレビルドをしたいと考えました。それを実現するには、MXMLが適役です。MXMLは、Flexアプリケーションを構築するのに使用するタグマークアップ言語です。この言語は、Flexアプリケーションのレイアウト定義のためのシンプルな環境を提供するように設計されています。MXMLを使用すれば、ビジュアルエフェクトやビヘイビアといった、簡単な宣言型言語を使用する高度なインタフェイスをレイアウトできます。しかもMXMLは、シンプルながら機能性に優れ、開発を飛躍的にスピードアップします。では、プレビルドされたインタフェイスコンポーネントを使用したアプリケーション構築の生産性について考えてみます。Flexには、コントロール、コンテナ、マネージャなどが多数組み込まれており、そのまますぐに使うことも、アプリケーションに合わせて拡張することもできる、必要なUIコンポーネント一式が揃っています。開発者はFlexに対し、MXMLを使用して、それらのプレビルドされたコンテナや画面上のコンポーネントの組み立て方を伝えます。するとマネージャが、レイアウト、データバインディング、タブオーダー、ポップアップウィンドウサイズ、その他の状況を管理します。もちろん、生産的なだけでは十分とはいえません。効果的なアプリケーションに仕上げる必要があります。Flexフレームワークは、標準的なHTMLよりもさらに効果的なアプリケーションを作成するためのテクニックを多数提供します。インタラクティブ性に優れたイベントドリブンなインタフェイスにより、ユーザはアプリケーションの操作性の良さを実感でき、生産性の向上へとつながります。またエフェクトにより、拡大縮小ウィンドウ、スライドパネル、フェードといったビジュアルキューを使用したトランジションをユーザに提供できます。Flexフレームワークを利用すれば、まるでデスクトップで操作しているかのようなユーザ体験をブラウザ上で提供することが可能です。Flexフレームワークのもう1つの大きな目標は、既存のシステムとの統合です。既存のデータベースやミドルウェアには、これまでに多大な投資が行われてきました。そこで、その投資を丸ごと活かし、フロントエンドを置き換えるだけで、ユーザの生産性を高める必要があります。アプリケーションサーバと統合することで、クライアントからサーバサイドのクラスを呼び出し、両者の間でデータを簡単にやり取りできるようになります。Flexは、既存のテクノロジとソフトウェア開発プロセスに容易に組み込めます。メッセージングおよびパーシステンスインフラストラクチャなどのエンタープライズアーキテクチャへの統合をより完全に行いたいという場合には、Adobe Flex Data Servicesを追加すれば、さまざまな新しい機能を利用して、Flexアプリケーションの企業インフラへの統合を行えます。Flex SDK 2には、効果的なFlexアプリケーションを開発するのに役立つ、いくつかの主なコンポーネントが含まれています。Flexアプリケーションの開発には、2種類の言語を使用します。Adobe Labsでは、この2つの言語に関するたくさんのドキュメンテーションをご覧いただけます。ご期待のように、Flexには、定義済みのクラスライブラリとアプリケーションサービスが備わっているため、アプリケーション開発を有利に開始できます。
これらのサービスのいくつかを挙げてみましょう
アプリケーションのインタフェイスレイアウトを制御するレイアウトおよびディスプレイシステム、データバインディング、すべてのUIコンポーネントのルック&フィールを制御するスタイルシステム、モーションとトランジションを制御するエフェクトおよびアニメーションシステム ― これらはほんの一部です。この定義済みのクラスとサービスを基礎に、開発を進めていくことができます。コンポーネントは、生産性を飛躍的に高める、特定のタイプのクラスライブラリです。コンポーネントは、ユーザインタフェイス(UI)とコントロール/レイアウトコンテナという、2つのタイプに大別されます。簡単なボタンやチェックボックス、ラジオボタンから、複雑なデータグリッド、コンボボックス、さらにはリッチテキストエディタまで、必要なUIコントロールは最初から組み込まれています。しかも、これらのコンポーネントは、すべて見た目にも魅力的なスキンを備えており、用途に合わせてスタイルやスキンをカスタマイズすることもできます。望むような外観や操作性がコンポーネントにない場合、いつでもそのコンポーネントをサブクラスし、独自のプロパティやメソッドを追加することが可能です。Flexフレームワークの提供するコンテナを使用すると、複雑なアダプティブレイアウトも簡単に作成できます。ブラウザウィンドウ、スクリーン、インタフェイスのコンテンツのサイズ、さらにはユーザによるリサイズイベントに適応するアプリケーションの作成も簡単です。
コンパイラおよびツール
当然のことながら、Flexフレームワークの核となるのはコンパイラです。コンパイラは、MXMLファイルと、関連するActionScriptファイルおよびその他のリソースとをコンパイルし、アプリケーションを構築します。
Flexフレームワークの新機能
Flex 2のリリースに際し、Flexフレームワークにも多くの新しい機能が加わっています。Flexフレームワークの最も注目すべき重要な「機能」は、実行速度です。以前に比べ5倍から10倍の実行速度を実現できます。この実行速度の向上は、アプリケーションの規模の大小を問わず、あらゆるFlexアプリケーションにとって、大きなメリットです。数多くの新機能や既存の機能の強化がある中で、ごく一部の主要新機能を紹介します。
簡易化されたコンポーネント開発、スキニング、およびスタイリング
既存のコンポーネントの機能強化
アプリケーションのルック&フィール
強化されたエフェクトインフラストラクチャ
制約ベースのレイアウト
開発の簡易化
ファイルのアップロード / ダウンロード
データマネジメントおよびディスプレイ
E4Xデータマネジメントおよびデータバインディング
著者について
この記事は、アドビ システムズ社の著作物です。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
過去3年間のFlex/AIR開発を通じて、筆者はそうした「落とし穴」にことごとくハマり、そのたびに「二度と繰り返すまい」との思いで要点をメモしてきました。
本連載では、その筆者の「Flex/AIRハマり帳」をもとに、これからFlex/AIR開発を始める方が同じ過ちを繰り返さないためのささやかなtipsを紹介していきたいと思います(なお、ここで紹介するtipsは、あくまで筆者の経験に基づいて得られたものであり、アドビ システムズの公式な提供情報ではないことにご留意ください)
第1回は、つい最近のメモからです。
およそ5日間かけて開発を進めたのち、5月6日に「ご都合
その後、はてなブックマークやニュースサイト等でご紹介いただいたおかげで、公開後5日で約1500名の方にご利用いただいています。では改めて、GAE/Jとは何かを簡単に紹介します。以下に、GAEのおもな特徴をまとめます。無償で始められる。
サーバ構築作業が不要、デプロイが簡単
「無償で始められる」
GAE/Jは、一定のサーバリソースを無償で利用でき、初期コストは一切かかりません。
もちろん無償で使えるサーバリソースには上限があり、以下の「無償提供分」に示す値に制限されています(なお、以下の各情報は5月10日現在のものです)
これらの値を超える分については、「有償提供分の単価」に基づく従量課金となります。
有償提供分の単価
ネットワーク帯域(上り)
ネットワーク帯域(下り)
無償とはいっても、1GBのストレージがあれば、テキスト情報中心の中小規模のWebアプリには十分な容量です。ネットワーク帯域やCPU時間も十分と言えます。GAE/Jのもうひとつのメリットは、「Googleインフラの圧倒的なスケーラビリティ・高信頼性をお手軽に利用できる」という点です。このBigTableは、Google検索エンジンの非常に高いスケーラビリティと可用性を実現する中核技術です。GAE/Jで書いたWebアプリは、その恩恵を簡単に受けることができます。
サーバ構築作業が不要、デプロイが簡単
3つめのメリットは、「サーバ構築作業が不要、デプロイが簡単」という点です。ここでは細かな手順の説明は省略しますが、GAE/Jによるシステム開発は、以下の流れとなります。GAE/Jは、他のクラウドサービスや通常のサーバホスティングサービスとは異なり、「サーバ環境」ではなく「Webアプリの実行環境」を提供するサービスです。TomcatやJBossに相当するGoogle独自のアプリケーションサーバがすでに稼働している環境があり、そこに利用者のWebアプリをデプロイして利用します。
さて筆者が「ご都合
」ということです。GAE/Jでは通常のサーブレットやJSPが動作しますので、Flexクライアントとサーバ間でXMLやJSON形式でデータをやりとりすることは難しくありません。とはいえ、使ったことのある方ならおわかりのとおり、FlexのRemoteObjectによるAMF通信のお手軽さは、一度経験するとやみつきになります(人間、どんどんラクな方へと堕落してしまうものです。
war内の各ファイルをコピーしたところ
つづいて、BlazeDSの通常通りのリモーティング設定を行います。xmlにて登録しておきます。xmlを以下のように記述します。xmlを参照するようにします。
// メソッド呼び出し
以上で準備は完了です。ここまでの手順は、BlazeDSの通常の設定作業であり、特別なことはなにもしていません。GAE/JプラグインにはローカルのEclipse上でコードをテストできるデバッガ機能がありますので、それを用いてローカル環境でテストサーバを起動します。つづいてFlexクライアントから上記のメソッド呼び出しを実行し、テストサーバへリモート呼び出しを実行します。これは問題なく動作させることができました。しかし、実のところ「落とし穴」はこの後に(たくさん)待っていました。その詳細と回避方法については、次回に紹介したいと思います。
著者について
Adobe FlexおよびAIRなどのリッチ・インターネット・アプリケーション分野をはじめ、Javaサーバサイド・プログラミング、データベース開発、仮想化技術などを中心に執筆活動を行っている。また技術文書や書籍の翻訳も手がけており、翻訳書に「XML構築ガイド」(ピアソンエデュケーション)がある。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
過去3年間のFlex/AIR開発を通じて、筆者はそうした「落とし穴」にことごとくハマり、そのたびに「二度と繰り返すまい」との思いで要点をメモしてきました。
本連載では、その筆者の「Flex/AIRハマり帳」をもとに、これからFlex/AIR開発を始める方が同じ過ちを繰り返さないためのささやかなtipsを紹介していきたいと思います(なお、ここで紹介するtipsは、あくまで筆者の経験に基づいて得られたものであり、アドビシステムズの公式な提供情報ではないことにご留意ください)
前回は、BlazeDSの各種ライブラリファイルや設定ファイルをGAE/JプロジェクトのWEB-INFフォルダ以下に配置し、ローカル環境で問題なくテストできたところまで説明しました。しかし問題は、GAE/Jの本番環境へのデプロイ時に起こりました。GAE/Jプラグインの「デプロイ」ボタンをクリックしてコードをデプロイし、FlexクライアントからGAE/Jの本番環境へ接続してリモート呼び出しをテストすると、以下のようなエラーがGAE/Jのダッシュボード上に表示されました。
図:GAE/Jのダッシュボード上に表示されたエラーログ
」と不安になりつつも、ネット検索で先人たちの情報を探しました。
以下の3つの点の修正が必要となる」
管理機能のオフ(上述のエラーの原因)
javaクラスのソースコード修正
では、これらの手順を以下に説明します。ただし、ここで紹介するのは要約ですので、詳しくは上記ブログを参照してください。まずは、管理機能をオフにします。これにより、BlazeDSの管理機能がオフとなり、上述のエラーが発生しなくなりました。しかしこれだけではまだ動作しません。
Flexクライアントからリモート呼び出しを実行すると、クライアント側で通信エラーが発生してしまいます(サーバ側にはエラーが記録されません)
この原因は、上記ブログによると、GAE/Jのサンドボックスによるリクエストデータの読み込み動作が通常のサーブレットコンテナとは異なるため、例外を発生させているということのようです。そこで、上記2の手順が必要です。zip)をダウンロードし、付属のドキュメントにしたがってビルドする環境を整えます。
ビルド可能な状態になったら、flex
javaクラスの58行目を以下のように修正します。この修正後にビルドを実行し、それによって生成されたJARファイルを再度WEB-INF/lib以下にコピーしました。しかし、今度はBlazeDS側で「セッションが重複している」というエラーが発生してしまいます。この原因もはっきりとは分かりませんが、上記ブログによると、おそらくGAE/Jが自動的に複数のサーバノード上でサーブレットを展開するために、1つのクライアントからのセッション情報が重複したように見えてしまうという原因のようです。これに対処するには、上記3の手順が必要です。以上の対処により、どうやらエラーを発生させずにBlazeDSをGAE/J上で動作させることができました。これらの手順を実施したのちは、まったくエラーも発生せずにスムーズに動作しています。上記ブログを書かれたMartin氏には本当に感謝したいと思います。
例えば、ご都合
なお、BigTableでは事前にDBスキーマを定義しておく必要はなく、スキーマの変更も随時可能です。
このGtgCalendarに納められたカレンダー情報を保存するコードは、以下のように記述します(いずれもご都合
comで実際に動作しているコードです)
これもきわめて容易に記述できます。よって、親オブジェクトから子オブジェクトをひとつひとつ参照していき、子オブジェクトをBigTableから読み出しておく必要があります。
この状態のままEntityオブジェクトをBlazeDSのリモート呼び出しの戻り値として渡してしまうと、リモート呼び出し時に例外が発生してしまいます(これと同様のことはHibernateにてセッションをクローズしない場合にも起こります)
よって、リモート呼び出しの戻り値は、必ず上記finally節の外側で戻す必要があります。最後の落とし穴は、Entityクラスの主キーです。そこで筆者は当初long型のidを用いていました。しかしこのタイプの主キーでは、上述したような親オブジェクトから子オブジェクトへのナビゲーションに対応していません。Key」型のフィールドを設ける必要があります。しかし、これでも不具合があります。このKey型のフィールドは、BlazeDSにてAMFのシリアライズを実施すると、キーの内容が失われてしまうのです。これは、上記のKeyオブジェクトの内容をString型にエンコードする方法で、主キーのフィールドには以下のようなアノテーションを追加します。これによって、やっとEntityクラスの主キーを無事にFlexクライアントにも渡すことが可能となりました。
以上、本稿では「ご都合
ここで紹介した落とし穴さえ避ければ、この2つの技術のコンビはじつに強力な生産性を発揮します。ぜひ皆さんもお試しください。
著者について
Adobe FlexおよびAIRなどのリッチ・インターネット・アプリケーション分野をはじめ、Javaサーバサイド・プログラミング、データベース開発、仮想化技術などを中心に執筆活動を行っている。また技術文書や書籍の翻訳も手がけており、翻訳書に「XML構築ガイド」(ピアソンエデュケーション)がある。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
データベース連携機能の選択について
印刷用に表示
事前に必要な知識
この文書では、次の経験があることを前提として記述していますが、基礎的な知識があれば十分です。Javaでプログラムを作成したことがある。
事前に用意するもの
warテンプレートがデプロイされている環境を用意してください。
この文書のライセンス
著者について
FlexBuilder3の新機能により、基本機能が動作するサーバサイドとFlexのコードが自動生成されるようになりました。データベース連携するFlexアプリケーション開発では、初期の開発工数について、より短縮できるようになったと思います。この文書の内容が、皆さまの作業効率化の助けになればと思います。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
画面デザインとロジックの分割テクニック | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
応用的なサンプル
画面デザインとロジックの分割テクニック
分割はできたけれど・・・
ですが、私はこれだけでは不十分であると考えました。確かにロジックファイルを外部化することでスクリプトの実装はMXMLから分割することができました。しかしながら、デザインからでコードのメソッドを実行する際には、デザイン部のコンポーネントにイベント定義を記述する必要があります。先程の例でいえば、以下の部分です。コンポーネントのイベントに対して特定のメソッド(イベントハンドラ)を実行するには、通常は上記のように対応するメソッドを記述する必要があります。つまり、外部ロジックファイルにスクリプトを記述することでスクリプトの実体をデザインから切り離すことはできますが、各イベントからの呼び出しについてはデザイン側に呼び出しのコードを記述する必要があります。
「デザイン側に呼び出しコードを記述せずともイベントハンドラを実行する」
ロジックファイルにメソッドを記述するだけで自動的にデザイン部のコンポーネントと連動して、メソッドを実行します。仕組みについては後程紹介するとして、まずは具体的な使用方法を紹介します。
いかがでしょうか
コードにそれほど大きな変更は必要ありません。具体的な変更点は3箇所になります。Buttonクリックのメソッドの名称が変更されている。動作可能なサンプルは以下よりダウンロードできます。基本的にはIMXMLObjectを使用した仕組みと大変似た仕組みになっています。よって、実装するのではなくサブクラスとしてロジック部を作成することになります。イベントハンドラは命名規則に従った名称で作成する。AbstractViewHelperは指定の命名規則に則った名称のメソッドを作成することで、デザイン部のコンポーネントと連動します。この”命名規則による関連付け”こそがAbstractViewHelperの最大の特徴であり、デザイン部に呼び出しのコードを記述せずともメソッドの実行を可能にしている仕掛けです。ボタンを押下してもAlertは表示されません。メソッドの命名規則は、全部で3種類です。
○デザイン部が定義しているStateに対する命名規則
そして注意する点は、”On”や”Handler”は大文字、小文字を判断していますので、記述を誤ると認識することができず、メソッドが実行されません。以下、正しいパターンと誤ったパターンの一部です。各イベントのイベント定数については、Flex3リファレンスガイドを参照して下さい。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
画面デザインとロジックの分割テクニック | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
画面デザインとロジックの分割テクニック
Flexで開発を行う際に、画面デザイン(MXML)、スクリプトを1つのMXMLファイルに記述せずに、画面デザイン部(MXMLファイル)、プログラムコードを記述するロジック部(ActionScriptファイル)のように分けて作成する方法が採用されることがあります。分けて開発を行うことにより、以下のようなメリットがあります。
コードの可読性の向上
デザイン変更に対するメンテナンス性の向上
デザイナ、コーダーが分業する際、お互いの作業対象ファイルが明確になる、重複しない。
特に「コードの可読性」については、エンジニアの方、エンタープライズなシステムに携わっている方であれば最も重要視される事柄の1つではないでしょうか
今回はいくつかある分割テクニックのうち、IMXMLObjectインターフェースを使用した方法、更にその方法を発展させた方法を紹介します。
事前に必要な知識
IMXMLObjectを一言で説明すると、「非ビジュアルコンポーネントが実装する最も基本的なインタフェース」です。ASDocに詳細が記載されています。作成物は、デザインファイル、ロジックファイルの2つのみで構成します。
デザインファイルの作成
デザインファイルを作成します。デザインファイルはMXMLファイルで画面にButtonコンポーネントを貼り付けただけの単純なものです。画面概観とソースコードは以下の通りです。このアプリケーションでは、画面上の”Click”というボタンを押下した際にAlertを表示します。ですがAlertに関する記述はデザインファイルでは行いません。
ロジックファイルの作成
続いてロジックファイルを作成します。ソースコードは以下の通りです。上記ソースのクラス宣言で、IMXMLObjectを実装している事がお分かりになるかと思います。ここでAlertを表示するメソッドを追加します。
デザインファイルとコードファイルの連携
その為には、MXMLに以下のように修正を加えます。IMXMLObjectを実装することにより、ロジックファイルのクラスはコンポーネントとして認識されます。非ビジュアルコンポーネントの為、デザインビューでドラッグ&ドロップをすることはできませんが、上記のように直接記述することができます。以上で全ての実装が完了しました。アプリケーションを起動し、ボタンを押下すると次のようなAlertが表示されます。構成をまとめると、以下図のようになります。
いかがでしょうか
clickイベントのみでしたので、ソース可読性についても特に問題にはならないかもしれません。ですが実際の開発で作成するアプリケーションでは多くのコンポーネント、イベントが実装されることになります。そのような局面では上記のような分割を行っているかどうかによって、ソースの可読性は大きな差となって現れてくると思います。
分割はできたけれど・・・
ですが、私はこれだけでは不十分であると考えました。確かにロジックファイルを外部化することでスクリプトの実装はMXMLから分割することができました。しかしながら、デザインからでコードのメソッドを実行する際には、デザイン部のコンポーネントにイベント定義を記述する必要があります。先程の例でいえば、以下の部分です。コンポーネントのイベントに対して特定のメソッド(イベントハンドラ)を実行するには、通常は上記のように対応するメソッドを記述する必要があります。つまり、外部ロジックファイルにスクリプトを記述することでスクリプトの実体をデザインから切り離すことはできますが、各イベントからの呼び出しについてはデザイン側に呼び出しのコードを記述する必要があります。
「デザイン側に呼び出しコードを記述せずともイベントハンドラを実行する」
ロジックファイルにメソッドを記述するだけで自動的にデザイン部のコンポーネントと連動して、メソッドを実行します。仕組みについては後程紹介するとして、まずは具体的な使用方法を紹介します。
いかがでしょうか
コードにそれほど大きな変更は必要ありません。具体的な変更点は3箇所になります。Buttonクリックのメソッドの名称が変更されている。動作可能なサンプルは以下よりダウンロードできます。基本的にはIMXMLObjectを使用した仕組みと大変似た仕組みになっています。よって、実装するのではなくサブクラスとしてロジック部を作成することになります。イベントハンドラは命名規則に従った名称で作成する。AbstractViewHelperは指定の命名規則に則った名称のメソッドを作成することで、デザイン部のコンポーネントと連動します。この”命名規則による関連付け”こそがAbstractViewHelperの最大の特徴であり、デザイン部に呼び出しのコードを記述せずともメソッドの実行を可能にしている仕掛けです。ボタンを押下してもAlertは表示されません。メソッドの命名規則は、全部で3種類です。
○デザイン部が定義しているStateに対する命名規則
そして注意する点は、”On”や”Handler”は大文字、小文字を判断していますので、記述を誤ると認識することができず、メソッドが実行されません。以下、正しいパターンと誤ったパターンの一部です。各イベントのイベント定数については、Flex3リファレンスガイドを参照して下さい。
コンポーネントとイベントハンドラを関連付ける手順
AbstractViewHelperがどのような仕組みで画面上のコンポーネントと、ロジック部のメソッドを関連付けているのか説明します。関連付けは以下の手順で行われます。MXML上のコンポーネントの一覧をMXMLより取得する。メソッドリストをロジック部より取得する。コンポーネントの一覧をベースに命名規則により組み立てたメソッドをロジック部より検索し、該当が存在すれば関連付けを行う。
コンポーネントの一覧を取得する方法
つまり、デザイン部のMXMLオブジェクトがここで与えられます。describeTypeメソッドを実行すると、引数で与えたオブジェクトの情報をXMLで取得することができます。
・・・(以下、続く)
この情報の中から、与えたMXMLドキュメントから直接発生しているコンポーネントのみの情報を抜粋して取得します。取得に当たり、以下のことを覚えておく必要があります。as 32~36行目では、次のようにコンポーネントの情報を取得しています。という情報が取得されます。これがコンポーネントの一覧になります。
メソッドリストを取得する方法
メソッドリストもコンポーネントリストと同様にflash
異なる点は、コンポーネントリストはMXMLドキュメントを引数として与えたのに対し、メソッドリストはAbstractViewHelperのサブクラス自身のインスタンスを引数として与えます。コンポーネントリスト取得時と同様に、ここでも以下の事については覚えて置いてください。関連付けを行う際に必要な情報です。メソッドの情報は”method”という要素で表現されている。asで定義されているイベントハンドラに関する情報が含まれていることがわかるかと思います。命名規則によって定義されているメソッドを検索し、関連付けを行う。コンポーネントリストとメソッドリストを取得できたので、コンポーネントリストと命名規則よりメソッドリスト内のメソッドを検索します。as 211行目~223行目が”命名規則によるイベントハンドラ名の取得”、”イベントハンドラの登録”に関するコーディングです。
■命名規則によるイベントハンドラ名の取得
以上がコンポーネントに対するイベントハンドラ自動登録の仕組みです。この他、命名規則の異なるMXMLドキュメント自身の登録、Stateの自動登録に関しても、命名規則の組み立て方が異なる程度であり、基本的な仕組みは同様です。
応用的なサンプル
最後に、より”本格的”なサンプルを作成してみます。作成するものは担当者メンテナンスと題して、データベースに格納されている担当者データをメンテナンス(追加・更新・削除)するものです。
ビジネスアプリケーションでは必ずあるパターンのアプリケーションではないでしょうか
このサンプルでは、画面インタフェースをFlexで作成しますが、データベース操作(ビジネスロジック)部にJavaを使用します。Flexと他言語で通信を行う手段として、Adobeではリモーティングという非常に高速な通信の仕組みを公開しています。今回はリモーティングのJava実装として”BlazeDS”というミドルウェアを使用します。BlazeDSはAdobe提供のソフトウェアですがソフトウェア、ソース共にオープンソースにて公開されています。Javaビジネスロジック部も一般的なJDBCを使用するだけではなく、Seasar2というフレームワークを使用します。通常のBlazeDSはFlexからJavaクラスを使用する際に、設定ファイルを記述する必要がありますが、S2BlazeDSを使用するとSeasar2によって管理されているJavaクラスを使用する際には、設定ファイルの記述を必要とせずに利用することができます。データベース操作には、S2DaoというSeasarファミリーを代表するO/Rマッピングソフトウェアを使用します。最後にデータベースですが、今回のアプリケーションではMySQLを使用します。少々長くなりましたが、全体のソフトウェア構成は次のようになります。
いかがでしょうか
結構な量のミドルウェア、フレームワークを使用します。最近では業務で開発を行う際、フレームワークを利用する(市販品、独自開発、オープンソースといろいろあるかと思いますが)ということが一般的ではないかと思います。最後にご紹介するサンプルは、出来る限り実際の開発現場で利用できるものに近い環境を用意しました。Flexによるシステムの導入を検討されている方、他フレームワークを利用されている方にも参考に して頂ければ幸いです。
必要ソフトウェア(追加分のみ
バージョン番号は動作確認環境
サンプルの実行
サンプルは次のリンク先よりダウンロードして下さい。
サンプルの配置
のフォルダへコピー
サンプル用データベースを作成します。サンプルアプリケーションからデータベースにアクセスする際のユーザーID、パスワードを設定する必要があります。
以下アドレスへアクセス
サンプルを確認することができます。
サンプルの機能
一覧表示・・・ 起動時に担当者データをDataGrid部へ一覧表示
追加・・・ 名前、年齢を入力し、”追加・更新”ボタンを押下でDBに新データを追加
更新・・・ DataGridから選択、その後、名前、年齢を入力、”追加・更新”ボタンを押下でデータを更新
削除・・・ DataGridから選択、その後、名前、年齢を入力、”追加・更新”ボタンを押下でデータを削除
サンプルは、2つのプロジェクトで構成されます。その他のサーバーサイドロジックの実装等については、サンプルのソースにて確認して下さい。Flexクライアントは、以下のファイルで構成されています。mxmlが1つ貼り付けられているだけのアプリケーションです。mxmlに対するロジックファイルになります。
クライアントアプリケーションについて
いかがでしょうか
また、今回はコンポーネントとして作成する為、ルートタグが”Canvas”になっています。
イベントハンドラの作成
”起動時にデータベースの情報をDataGridへ表示する”、”追加・更新ボタンの押下でデータベースの更新をする”等です。以下、コンポーネントのイベントハンドラ宣言部分のみの抜粋ですが、命名規則に従った名称で宣言されています。ですが、今回はちょっと違います。asのクラス宣言を見て下さい。今回はロジッククラスに、RemoteObjectを使用したリモーティングのメソッドを追加する為に、サブクラスとして開発するという方法をとりました。機能追加を行う際には、開発プロジェクト毎に上記のようなサブクラスを開発することで必要な機能を実装していく方法をお勧めします。以上がロジッククラスの実装の大きな作りこみになります。この構成を大枠として、これよりイベントハンドラの実装を行っていきます。システム開発の現場では、多くの場合開発プロジェクトでは数人のチームで作業を行います。Flex案件の場合、画面デザインをデザイナーが担当、ビジネスロジックをエンジニア(プログラマ)が担当するというような分業するスタイルも少なくありません。このようなケースでは、1つのMXMLにデザイン(レイアウト、スキン、等)とプログラムロジックを記述している際に、デザイナーとエンジニアが同じファイルに対して更新する為、リポジトリのロックであったり、コミット漏れによるロスト、うっかりミスによる上書きなどいったリスクが考えられます。編集するファイルが明示的に分かれてしまえば、このような問題は解決できます。そういった発想から”画面デザインとロジックの分割”という方法が確立されました。チームで開発を行うケース、ある程度以上の規模のあるシステム開発の現場では、この取り組みが後々の拡張性、保守性の維持に役立つのではないかと思います。Flexで開発を行っている方は既になんらかの方法で分割を行っている方もいらっしゃると思います。これから始める方も、既に始められている方にも、何か参考してもらえる部分があれば幸いです。クラスメソッド社では、主にFlex/AIR技術を使ったユーザーインターフェース開発を行っています。また、Flexと連携する様々なサーバーサイドテクノロジーを利用し、多くの業務システム開発を行っています。Flex/AIRを用いたシステム開発を検討されている企業様はお気軽にお問い合わせください。
著者について
アーキテクトのくせに趣味は料理
My鍋、Myフライパンが最近一番のお気に入り
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
ソフトウェアのインストール
Flexの素晴らしい機能の1つは、XMLを簡単に解析処理できることです。これにより、Flexデベロッパーは外部のXMLファイルまたはWebサービスを手軽に利用することができます。そしてこれに応えるように、PHPなら、様々なソースからXMLデータをとても手軽に生成できます。次のサンプルではこの手軽さを示すために、FlexからデータをPOST変数でPHPに送り、このデータをPHPがXML形式で返すようにしてみます。結果として返されるXMLデータはFlexアプリケーションのデータグリッドに表示することにします。次に、PHPの開始タグと終了タグの間に以下のコードを追加します。このスクリプトは、ある授業の科目名、担当講師名、および科目解説からなる3つの変数を受け取ります。そして、これらの変数がスクリプトによってXMLの要素タグ内に配置され、その結果がクライアントへと送られます。図18に示すのは、結果として返されるXMLの例です。
単純なXMLファイル
mxmlファイルを編集して、いくつかのコントロールを作成することにします。次に示すフォームのコードは、ユーザが科目名、担当講師名および科目解説を入力するためのMXMLフォームを作成します。次に必要なのは、PHPから返された結果を表示するためのデータグリッドです。以下のコードはPHPから返されるXMLの<course>に含まれた要素に対応する、適切なヘッダとdataFieldプロパティエントリが備わったデータグリッドを作成します。これで必要なユーザコントロールが揃いましたが、これらを使用するアプリケーションも編集する必要があります。例えば、以前使用した<mx:HTTPService>では、変数が送られることはなく、返されるのも汎用オブジェクトになっていました。
また、参照先としても、新たなxml
phpが指定されていました。E4Xを使用すれば、XMLの解析をとても簡単に処理できます。これはPHPのスクリプトがPOSTを受け取るようになっているためです。これらの変数はMXMLフォームの入力フィールドにバインドされており、POSTを介してPHPスクリプトに送信されます。ここでは引き続き、結果を処理する関数がshowResult()に設定されているので、次にこの関数を編集する必要があります。既存関数のコードを以下のコードに置き替えます。ドットが2重になっているのはE4Xのシンタックスです。1重のドットシンタックスでは要素が1段階ずつ下に参照されるところ、2重ドットを使用した場合は、単にXMLオブジェクトが解析され、「course」の名が付いたすべての要素が返されます。アプリケーションを保存した後、実行してみます。図19の入力例にならって適当な情報を記入し、「Call PHP」ボタンをクリックしてみます。
完成したサンプルアプリケーション
次のステップ
わずかなクリック操作だけで、PHPバックエンドとFlexフロントエンドの編集を切り替えたり、アプリケーション自体を開発・実行することが可能です。また、Subversionを利用してプロジェクトを管理しているのであれば、単一のIDE環境からPHPとFlexの両方のプロジェクトファイルを手軽にチェックアウト・編集・コミットすることができます。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
Flex用の制御の反転フレームワークの研究 | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
印刷用に表示
Flex用の制御の反転フレームワークの研究
IOCとは、簡単に言えば、正しい実装を持つオブジェクトのフィールドを設定する責任を、それらのオブジェクト自体が持つのではなく、別個のオブジェクトが持つようにする手法です。
この手法の利点の1つは、オブジェクトのフィールドをインターフェイスとして宣言することにより、オブジェクトを実装から分離できることです(これは契約によるデザインと呼ばれます)
もう1つの利点は、作成ロジックをオブジェクトから取り除くことで、オブジェクトの目的を明確にできることです。IOCコンテナは、このパターンを一貫した宣言的方法で採用するために役立つフレームワークを提供します。この戦略とインターフェイスを組み合わせることで、テストが容易で柔軟なオブジェクトを作成できます。NetのIOCフレームワークは既に確立されており、最近ではFlexコミュニティ内部でこれに関する様々な活動が見られます。この記事では、これらのフレームワークのいくつかを紹介し、その仕組の概要と相互の比較を示します。この記事を最大限に活用するには、次のソフトウェアとファイルが必要です。
さらに詳しく*
この記事に必要な予備知識
Flexに関する知識が必要です。
著者について
Ed Eustaceは、アドビプロフェッショナルサービスEMEAのシニアテクニカルコンサルタントです。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Flexには、大量のデータを様々な方法で表示するためのいくつかのコントロールが用意されています。デフォルトでは、Flexのリストコントロールは、与えられたデータをシンプルテキストで表示します。しかし、Flexの機能はこれだけではありません。リストコントロールでitemRendererを使えば、コンテンツをさまざまな方法でカスタマイズできます。Flexでは、itemRendererを使ってリストの各行(またはセル)の内容を完全に制御することにより、これまでよりはるかに魅力的でクリエイティブ、かつ有用なアプリケーションを作成できます。これは、Listコントロールを記述するMXMLタグ内部にコーディングされるものです。この記事を最大限に活用するには、次のソフトウェアとファイルが必要です。
0に精通していること
レンダラのリサイクル
例えば、サーバから新しいデータを受信したことを示すために、DataGridの5行4列のセルを緑色に変えたいとします。そのitemRendererインスタンスを取得して外部から変更するのは、Flexフレームワークおよびコンポーネントモデルに対する重大な違反です。itemRendererを理解するには、それが何で、何のために存在し、どのような意図でわれわれが設計したかを知る必要があります。ところで、「われわれ」というのは実際にはAdobeのFlexエンジニアリングチームのことで、私は、このチームにいたことはありません。それはさておき、ここに表示したいレコードが1,000個あるとします。表示する各行と、バッファリングおよびパフォーマンス向上用として、これだけあれば十分です。リストには、最初に行1~10が表示されています。ユーザがリストをスクロールすると、例えば行3~12が表示されます。すなわち、リストのサイズを変更しない限り、同じitemRendererが再利用(リサイクル)され、新しい場所に移されて新しいデータを表示します。Flexのこの動作は、プログラミングのシナリオによっては状況を複雑にします。例えば、5行4列のセルの背景色を変えたい場合、ユーザがリストをスクロールしていれば、そのセルのitemRendererが21行目のコンテンツを表示している可能性もあります。
それでは、このような変更を行うにはどうすればいいのでしょうか
itemRendererが、表示用に与えられたデータに基づいて、自分自身を変更する必要があります。リストのitemRendererがデータの値に基づいて色を変更する場合、与えられたデータを調べて、自分で自分の色を変更するのです。インラインitemRendererは最も単純なもので、通常は非常に簡単なレンダリングか、大規模アプリケーションのプロトタイプ用に使用されます。
インラインitemRendererを使用しても特に問題はありませんが、コードが複雑になった場合は、外部に抽出して独自のクラスに入れたほうがいいでしょう
ここでは、すべての例に同じデータを使用します。これは書籍に関する情報の集合で、著者、題名、発行日、サムネールイメージなどが含まれています。各レコードは、次のようなXMLノードです。ここでは、著者の後に本の題名が記載されています。このタグは、ここに存在する必要があります。コンポーネントをインラインに定義することを、Flexコンパイラに伝える役割を果たすからです。実際の意味については、後で説明します。これは非常に重要です。リストをスクロールすると、itemRendererが新しい行のためにリサイクルされるのに応じて、dataプロパティが変更されます。これはリストのスクロールに応じて自動的に行われるので、意識する必要はありません。実際は、それほど大きな違いはありません。表示とレコードの関連付けは、やはりデータバインディングによって行われます。列に適用した例を次に示します。これは、先の2つよりもかなり複雑ですが、構造は同じです。<mx:Component>ブロック内部のコードを切り出して別のファイルに入れ、クラス名を指定することを想像してください。ここでは、本の発行日(pubDate)が未来の日付の場合に、背景が白から紫に変更されます。itemRendererはリサイクルされるので、テストが失敗した場合は色を白に戻す必要があります。そうしないと、ユーザがリストをスクロールしているうちに、itemRendererがすべて紫になってしまいます。スコープも変更されています。同様に、<mx:Component>の外部のコンテンツは、コンポーネントが別のファイルで定義されているかのように、別のスコープに属します。例えば、ユーザがオンラインショップで本を購入するためのボタンを、このitemRendererに追加するとします。ボタンはclickイベントで関数を呼び出すので、ボタンの定義は次のようになります。
今度は、さらに複雑な例を見てみましょう
この場合、clickイベントはカスタムイベントを作成します。このカスタムイベントは、itemRendererの外へバブルし、TileListを通過して、ビジュアルチェーン内の上位のコンポーネントによって受信されます。これは、きわめて一般的な問題です。その目的は、行を削除したり、この例のように本を購入したりすることです。イベントのバブリングを使うと、こうした作業をitemRendererから別のコンポーネントに引き渡すことができます。ここでカスタムイベントが役立つのは、イベントが行のデータに関連しているからです。そこで、このデータをイベントに入れてしまいます。そうすれば、イベントの受信者は改めてデータを探しにいかなくても済みます。ファイル内の関数やプロパティを参照する場合は、outerDocument識別子を使用してスコープを変更します。itemRendererの操作の結果として情報を伝達する必要がある場合は、カスタムなバブリングイベントを使用します。
単に与えられたデータを処理させるだけにしましょう
次のステップ
著者について
以前は、アドビカスタマーケアにてFlexサポートエンジニアとして活躍
後にテクニカルアカウントマネージャーとなる。
また、イメージングと分子モデリングのソフトウェアアプリケーション開発を手がける2つのベンチャー企業でも活躍
シラキュース大学でコンピューターサイエンスの理学士号を取得
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
Flex のリンカとローダーを理解する | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
まとめのサンプル
次のステップへ
印刷用に表示
Flex のリンカとローダーを理解する。マクロメディア Flex は、開発者が SWF ファイルの複雑な構造を意識しなくてもよい仕組みになっています。しかしベテランの開発者なら知っているとおり、システムの内部を理解しておけば、より優れたアプリケーションを構築できます。Flex コンパイラのローダーとリンカは、ソースファイルやマルチメディアデータから SWF ファイルへの変換を担当するサブシステムです。SWF ファイルの生成プロセスを詳細に把握しておきたい上級の Flash 開発者にはとりわけ有用です。
この記事に必要なもの
この記事はチュートリアルではないため、 Flex をインストールしておく必要ありません。ただし、記事で紹介した内容をさらに詳しく理解するには、 Flex をインストールしてサンプルコードを動作することをおすすめします。
チュートリアルおよびサンプルファイル:
著者について
マクロメディア入社前は、水中自律動作ロボットの開発から 3D ゲームスタジオの開発グループの運営まで、あらゆる業務に従事しました。バイクがなにより好きで、 1 年中バイクを楽しむために最近カリフォルニアに移住しました。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Flexを用いた大規模マーケティングプラットフォームの作成
システムアーキテクチャーの構成
複雑なエフェクトとトランジションの管理
モジュール構成のアプリケーションの開発
印刷用に表示
マーケティングプラットフォームを語るには、まずそれが何であるか、そして、それがどのような形で事業開拓の助けになるかを明確にする必要があります。まず、次のようなケースを想像してみてください。ある世界的なブランドを擁する企業のマーケティングチームが世界中の国や地域に特化したコンテンツやアクティビティを様々な言語で提供して、ターゲット顧客への訴求効果を上げるためにWebベースのソフトウェアソリューションを必要としていたとします。このようなブランドの宣伝効果を高めるには、スケーラビリティに優れるとともに、商品を迅速に市場投入でき、しかも既存の対外サービスとも円滑に統合できるようなソリューションが求められます。企画の初期段階においては、定期的に発生する新たなマーケティングキャンペーンに対応できるとともに、常に首尾一貫したブランドメッセージを発信できるようにすることが重要です。ここでの目標は、強固なブランドアイデンティティを発信しながらも、ユーザーに魅力的かつ一貫性のとれた体験を提供することにあります。テクノロジとユーザーの期待が高度化・多様化する今、マーケティングプラットフォームの開発プロセスもそれに伴って複雑化しつつあります。今日のマーケティング戦略においては、これまで大規模なエンタープライズ級のソフトウェア開発プロジェクトにみられた課題や様々な局面も含まれるようになっています。
商品やブランドのマーケティング効果を高める上で、魅力的なユーザー体験の提供は欠かせない要素になっていると言えるでしょう
この記事ではジンの人気商品であるBombay Sapphire*のマーケティングプロジェクトを例に、Flex 3フレームワークを用いて大規模なマーケティングプラットフォームを開発する際の一般的なストラテジを解説することにします。Bombay Sapphireのマーケティングプラットフォームを開発するにあたり、我々はユーザー体験の要件定義、柔軟なアーキテクチャーを実現するための開発戦略策定、プロジェクトを成功に導くためのFlexプラットフォーム活用といったトピックに関して、様々な事柄を学びました。ここでは今回のマーケティングプラットフォームの開発において我々が採用した手法を解説するとともに、この手のプロジェクトの開発時間と費用の節約につながる、アーキテクチャーおよび開発テクニック面でのヒントも紹介していきます。この記事を最大限に活用するには、次のソフトウェアとファイルが必要です。
この記事に必要な予備知識
リッチインターネットアプリケーション(RIA)の開発経験およびマーケティングキャンペーンの実務経験があればなお可
この記事では、Bombay Sapphireプラットフォームの実装例を取り上げ、新たなプラットフォームの導入がいかに世界的なブランドの洗練度アップに貢献できるかについて紹介していきます。
今回、GUGGA(弊社)の開発チームに課されたチャレンジは、オリジナリティあふれるユーザー体験と映画さながらのビジュアルプレゼンテーションを提供しながら、Bombay Sapphireの広範なマーケットでそれぞれ独自のマーケティングキャンペーンやプロモーション活動を展開できるようにするための、スケーラブルなプラットフォームを実現することでした(次のビデオを参照)
この規模のインタラクティブ体験を開発する場合、最初の難題は顧客を分析し、どのような形で訴求するのがブランドイメージにとって重要であるかの判断です。クライアントは、できるだけ早く最終的な成果品を見てみたいと考えています。だからこそ、制作段階の早い時期に、実際に機能するバージョンのプラットフォーム(または最低でもコアの機能性)を提示できることは、非常に大きなアドバンテージになります。今回、企画段階では、開発するプラットフォームのプレゼンテーションレイヤーにどのテクノロジを採用するかという難題に直面しました。最近開発されたプロジェクトを調査すると、この手の規模のプロジェクトに関しては、過去数年にわたりGUGGAが成功を収めていることが明らかでした。様々なテクノロジを評価したところ、Flexが最も有効なソリューションであることが判明しました。Flexフレームワークは今回のプロジェクトで必要な機能性を提供するだけでなく、スケーラビリティ、拡張性、並行開発への対応性、コミュニティサポートなどにおいて、厳しい要件を満たせることが明らかになりました。最も重要な検討事項となったのは、機能が充実し、複雑なアニメーションも備わった魅力的なインタラクティブ体験の提供に、Flexが適しているかどうかということでした。これは、Bombay Sapphireプロジェクトを手がけるまで、Flexで開発されたものとしてはビジネスアプリケーションしか目にしたことがなかったからです。初期段階の検証を行った結果、Flexフレームワークで開発を行い、Flashでフロントエンドのデザインを行うことの長所をすぐに読み取ることができました。我々は、新たなプロトタイプを試作するにつれ、次第にFlexを使ったプロジェクト開発にどんどんはまっていきました。最終的には、スタッフ一同、大規模マーケティングプラットフォームの実現にあたり、Flexが最高のテクノロジであると確認するに至っています。
著者について
BranimirはFlashを皮切りにFlex 2、3へと進みながら、革新的かつクリエイティブなエンタープライズ仕様のマーケティング向けRIAプラットフォームの開発に関する豊富な経験を擁しています。
また、ブルガリアの首都ソフィアにて、Flexに関する初の大学レベルの授業の講師を担当するかたわら、Netに関するブルガリア語初の参考書籍出版に共著者として参加しています。他にも、いま発展途上にあるブルガリアのFlexコミュニティにおいて、先駆者およびリーダー的存在として活躍しています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Flexを用いた大規模マーケティングプラットフォームの作成
システムアーキテクチャーの構成
複雑なエフェクトとトランジションの管理
モジュール構成のアプリケーションの開発
Flexを用いた大規模マーケティングプラットフォームの作成
パワフル、オープンソースかつコンポーネントベースのFlexフレームワークは、我々が大規模なマーケティングプラットフォームを開発する上で必要なすべてを提供します。Flexがベストソリューションであることは、今回のブランディングプロジェクトの次に挙げる最も重要な要件を検討することで明らかになりました。
抜群のユーザーインターフェイスとユーザー体験を提供すること
カスタマイズとローカライズへの対応
アプリケーションの設計上、拡張性と柔軟性が確保されていること
既存の外部サービスに対しても、充実したデータアクセス性が確保できること
この記事の以下の節では上記の各要件を詳しく解説するとともに、今回のプロジェクトにおいて、これらの要件をいかにクリアーすることができたかについて説明することにします(図1参照)
魅力的なユーザー体験を実現するには、プロジェクト要件を満たすための戦略的なアプローチが必要
エフェクトとトランジション
マーケティングプラットフォームのユーザー体験の善し悪しは、ユーザーを魅了する形で提示される機能の数々に左右されます。今回のアプリケーションの性質を考慮すると、ユーザーインターフェイス要素はすべて複雑なデータ連動型のコンポーネントになります。
ここでは、表現力と魅力に優れたユーザー体験へのニーズが非常に高いと言えるでしょう
これらの複雑なコンポーネントにアニメーションを実装するためには、エフェクトを表現するためのパワフルなオブジェクト指向の抽象化が必要になります。この抽象化を利用することで、我々はデザインパターンの能力を生かし、強力かつ柔軟なエフェクトの組み合わせを作成しています。なお、Flexを導入する以前は、Flashフレームワーク*を利用して非同期型操作の合成と管理の抽象化を行っていました。Flexのエフェクトは、これまで魅力的なWebプロジェクトの開発に用いてきたFlashフレームワーク*のそれと非常によく似ています。Flexエフェクトのもう1つの特長は、アニメーションの定義とその実行を分離できることです。この場面で活躍するのがMXMLです。複雑なビジュアルプレゼンテーションや各種エフェクトのきめ細やかな表現・定義を可能にするのが、FlexのMXML言語です。この宣言型の言語により、前述のトランジションやコンポーネントのメンテナンス性および可読性が改善されます。IDEのFlex Builderにはコーディング作業を支援するための機能が用意されており、これらを利用することで迅速な開発作業が可能になります。アプリケーションのフロントエンド開発とバックエンド開発を網羅する包括的なソリューション提供を目指し、FlashとFlexはスムーズに連携できるよう開発されています。FlashとFlexを組み合わせた開発のメリットについては、この記事の後ほどで、2種類の興味深い手法を紹介しなが解説することにします。我々が必要とした魅力的なユーザーインターフェイスとユーザー体験を実現するには、堅牢かつ信頼性の高いコンポーネントモデルの存在が不可欠でした。既存のFlexコンポーネントモデルには(モノリシックであるが故に)いくつかの問題があるとはいえ、このコンポーネントモデルに用意されているCSSサポート、ステートのサポート、データ認知機能などを用いながら、制約ベースのレイアウト定義機能を利用することはとても重要です。コンポーネントの拡張性についてはデベロッパーコミュニティ全体がこの問題に直面しているため、様々な問題の対応策がコミュニティサポートの形で幅広く提供されています。
カスタマイズとローカライズへの対応
Bombay Sapphireのマーケティング部署は自らの宣伝メッセージを様々な国や地域の幅広いターゲットに向けて発信できることを要件に挙げていたため、我々は革新的な新戦略を打ち立てる必要がありました。
そこで、我々は強力なコンポーネントモデルとデータモデルの組み合わせを利用して商品情報を複数の言語で表示し、様々な国と地域の顧客に対応できるようにしました(図2参照)
多言語対応を可能にする堅牢なコンポーネントモデルとデータモデル
複数の市場および言語に対応できるプラットフォームには、コンテンツの手軽なローカライズが可能なテクノロジを採用することが欠かせません。しかも、コンテンツを様々な言語で提供できるだけでなく、市場別に機能や特典を提供できるようにする必要もあります。Flexのコンポーネントモデルには、多言語対応を可能にするために、フォント管理とリソースバンドルという2つの重要な機能が用意されています。アプリケーションの機能構成の柔軟なカスタマイズをサポートするには、あらかじめFlexフレームワークに統合された「根深い」データ連動型システムの作成が不可欠になります。
拡張性と柔軟性
マーケティングプラットフォームを開発する場合、新たなキャンペーンや商品のリリースに合わせて、規模拡張や様々な変化に対応できることが求められます。
プロジェクトの核となるモジュールを開発できることにより、時間の経過とともに規模を拡大したり、新たな機能をスムーズに追加できるようになります(図3参照)
モジュール構成の開発によってマーケティングプラットフォームの柔軟性が向上
マーケティングプラットフォームの活発かつ長期的な寿命を考えると、既存の実装を手軽に変更できるようにするために、個々のピース(モジュール)で機能を統合・拡張できるようにする必要があります。個々の機能が備わったモジュールを素早くかつ手軽に統合できる仕組みを開発するために、我々はFlexフレームワークのモジュール化機能を利用することにしました。システムの柔軟性を確保するには、機能の依存性を効率よく管理・分離することが重要です。柔軟性を開発・維持するために必要なパワーは、MXMLとFlexデータモデルの組み合わせが提供します。リッチインターネットアプリケーションの成功は、システムとWebサービス間で正しくデータを送受信できることにかかっているといっても過言ではありません。マーケティングプラットフォームでは、必要な時に確実にデータが送受信され、適切に表示されることが不可欠です。
商品のメッセージを発信する上で各種サービスへのデータアクセスが重要な鍵に
リッチインターネットアプリケーションのクライアントには、信頼性の高い充実したデータアクセス機構が必要とされます。
もちろん、これはFlexと各種サービスのインフラが得意とするところです(図5参照)
主な機能要件とFlexフレームワーク搭載機能の比較
この節で紹介したトピックをおさらいするためにも、図5の左側に記した主な機能要件とFlexフレームワークの搭載機能(図の右側)を比較してみてください。我々がマーケティングプラットフォームを開発するにあたり、Flexがいかにベストソリューションであったかがおわかりいただけるはずです。また、Flexコミュニティの存在も評価基準の重要な要素です。Flexコミュニティが存在するからこそ、たとえプロジェクトの開発時に問題が発生しても、必要以上に心配する必要はありません。
成功するマーケティングプラットフォームを開発するための戦略
大規模なソフトウェアプロジェクトにおいては、必ず熟慮された方法論とアプローチが必要になります。以下に挙げるのは、マーケティングプラットフォームを開発する際に特に重要な事柄です。これらはよく知られた方策であり、必ず役に立つはずです。全体的なシステムモデルを作成し、開発し続けることで、統合されたすべての機能とリッチコンテンツのための論理的なフレームワークが提供されます。各機能をフロントエンドからバックエンドまで開発することで、たとえ開発プロセスの早い段階であったとしても、クライアントにより手軽にユーザー体験のワークフローを提示することができます。これは、クライアントとの良好な関係構築に貢献します。計画になかった変更にも対応することで、デベロッパーとクライアントの双方に対して、常に柔軟性が提供されます。最終的なゴールを見失うことなく、クライアントからの変更要請に対応できることが肝心です。変更の流れを管理することで、スタッフ全員の能力を出し切った、最高の作品が開発できるようになります。変更を恐れたり、変更を無駄な支障だと捉えないようにすることが重要です。変更を行うことによって物事が良くなるはずなので、変更を許容し、管理できるようにすることが肝心です。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
パフォーマンスの概要
アーキテクチャの全体像
サンプルアプリケーションの概要
印刷用に表示
マクロメディア Flex は、サーバー導入コストを抑えつつ、従来の Web アプリケーションを上回るリッチなユーザーエクスペリエンスを実現します。この記事では、 Flex アプリケーションのサーバーサイドパフォーマンスについて、 JSP で実装された同等のアプリケーションと比較しながら説明します。高負荷時のショッピングカートアプリケーションにおいて、トランザクションあたりのリソースコスト、そしてサーバー CPU の負荷状況を測るベンチマークを実施しました。この調査により、ネットワークトラフィックやサーバーのメモリ消費については両者に大きな差がないこと、そしてFlex アプリケーションの CPU 負荷はきわめて低くなることが分かりました。一般に JSP アプリケーションでは、ユーザー操作 ( 例えば新しいページへの移動やサーバーへのデータ送信など ) の量がそのままサーバー負荷に反映されます。一方 Flex アプリケーションでは、アプリケーションのリクエストや、サーバーへのデータリクエストを送信する同時ユーザー数が負荷に反映されます。Flex アプリケーションではサーバー負荷が低く抑えられるため、 1 時間のベンチマークテストにおいて 100 ユーザー分多くのサービスを提供することができました。Flex アプリケーションは、 JSP アプリケーションとは根本的に異なる方法で設計されます。この違いにより、従来の Web アプリケーションを上回るリッチなエクスペリエンスを少ないサーバーリソースで提供できます。以下の表は、今回の調査結果をまとめたものです。
おもな計測結果
1回のショッピングセッションの完了までに送信されたバイト数
なお、マクロメディア Flex について詳しくは、次のページをご覧ください。
著者について
により作成されています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
パフォーマンスの概要
アーキテクチャの全体像
サンプルアプリケーションの概要
もうひとつのテストとして、多数のユーザーによるアクセスを再現し、高負荷時の Flex Store アプリケーションがサーバーに与える影響を検証しました。ここでは、サーバーの以下の点について計測しました。
アプリケーションのメモリ消費
アプリケーションの動作で生じるネットワークトラフィック
このテストでは、 100 人の仮想ユーザーをリアルタイムにシミュレートするテストツールを 2 台のクライアントで動作させ、 1 時間にわたってサーバーにアクセスします。これを同じサーバーに対して 2 回ずつ実施し、テストセッション中のサーバーの変化を観察しました。今回使用したテストツールは、現実に近いユーザー操作による 3 分間のセッションを再現します。
テスト対象のサーバーは、デュアル構成の 2
0 を装備します。1 を使用しました。このテストで Flex 版と JSP 版を比較した結果、ネットワークトラフィックやメモリ消費には大きな差がないものの、 CPU 利用率は Flex 版の方が大幅に低いことが分かりました。以下の表は、テスト結果をまとめたものです。そのため、トータルのネットワークトラフィックは、 JSP 版よりも Flex 版の方がわずかに多くなります。ただしネットワークアクセスの回数は Flex 版の方が少ないため、ソケット接続数は JSP 版より少なくなります。いずれについても、サーバーのメモリ消費は高負荷時にも変化しませんでしたが、 CPU 利用率に大きな差が現れました。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Pixel Benderのエフェクトは、画像、ベクトルグラフィックスからデジタルビデオに至るまで、あらゆる表示オブジェクトに適用できます。実行処理速度も特筆に値します。
ActionScriptではフレームあたり数秒かかっていたようなエフェクトでさえ、これからはリアルタイムで処理できるようになります(図1を参照)
このツールキットによって生成されるコンパイル済みのバイトコードは、Shaderオブジェクトに読み込むことで、SWFコンテンツ上で利用することができます。Pixel Benderによって何が可能になるかを知りたい、あるいは新しい技を習得したい、と考えるユーザには、Pixel Benderのプログラムサンプルをチェックすることをお勧めします。この記事で紹介するサンプル以外にも、アドビがホスティングするカーネルのパブリックリポジトリである Pixel Bender Exchange*には、様々なサンプルが掲載されています。これらのカーネルプログラムの作成者は、Flashデベロッパーコミュニティに自らの作品を披露することに同意した親切な方々ばかりです。是非皆さんも、作成したカーネルをExchangeに投稿してみてください。また、Pixel Benderプログラミングについてのディスカッション*フォーラムも存在します。この記事を最大限に活用するには、次のソフトウェアとファイルが必要です。この記事には、これらのサンプルのSWFコンテンツが掲載されています。
この記事に必要な予備知識
カーネルのコーディングを始める前に、まずPixel Bender言語について簡単に説明します。この記事を読むだけでPixel Bender言語のエキスパートになれるわけではありませんが、以下を読み進むことで、この言語で記述されたプログラムが理解しやすくなるはずです。0チュートリアルおよびリファレンスガイド」を参照してください。Pixel Benderには、画像処理に特化した既製のデータ型および関数が含まれています。変数の型宣言は、変数の名前の後ではなく前で行います。varキーワードは使用しません。
つまり、整数の値を宣言する場合、次の構文ではなく、代わりに、次の構文を使用します。ランタイム時には新規オブジェクトを作成できません。つまり、newキーワードはサポート(必要と)されません。Pixel Benderプログラムで浮動小数点数を記述する際には、必ず小数点を記述に含めなければならないことに注意が必要です。小数点が含まれていない場合、Pixel Benderのコンパイラはその数値を浮動小数点数値ではなく整数として扱います。
つまり、仮に1
ベクトル型は、ベースの型名の直後に数字が添えられる形で示されます。例えば、float3と記述された型は、float型の3つの要素が含まれたベクトルであることを示します。Pixel Benderでの典型的なベクトルデータ型使用例を示すのが、次のステートメントです。上記のステートメントでは、rgbaPixelという名前の新しいベクトル変数が宣言され、これに色の値が代入されています。スウィズリングがサポートされていることにより、これらの要素の並び順は単に要素名を入れ替えるだけで変更できます。例えば、次に示すステートメントでは、ピクセルの値を他の変数に代入する際に、ピクセルベクトルの赤と緑のカラーチャンネルが置き替えられます。次のように、チャンネルを繰り返すことも可能です。また、次に示すように、チャンネルを削除することも可能です。メモ:ベクトル変数で使用する変数名のセットは任意に選択できます。xと同じものを指します。ベストプラクティスとしてはrgbaのセットを色指定、xyzwまたはstpqのセットを位置指定にそれぞれ使用することが推奨されます。一度の参照において、異なるセットの要素名を混同させることはできません。行列データ型はベクトルとは似ているものの、数値が2次元の配列に含まれるという点が異なります。例えば、float3x3と記述した行列型には、3つの要素が備わった3つのベクトルが含まれます。このオプションがオンになっていれば、サポート対象外のPixel Bender言語機能が用いられた際に、コンパイラが即座にその旨を通知します。(オプションがオフになっている場合、カーネルをFlash Playerに書き出すまでツールキットはエラーを報告しません。
カーネルの解説
入力画像のピクセルをサンプリング
サンプリングされたピクセルカラーに演算処理を適用
処理結果の値を出力ピクセルに割り当て
そして、サンプリング済みのピクセルは、スウィズリングを利用してカラーチャンネルの順序が並べ替えられた後、outPixel変数に割り当てられています。このカーネルは、図2に示す結果を生成します。また、カーネル名の宣言も必須です。利用できる入力数に制限はありません。入力を一切使用しないことも可能です。ただし、カーネルをFlexでどのように使用するかによっては、入力数に対して他の要件が発生することがあります。ブレンドとして用いられるシェーダには2つの入力、ファイルとして用いられるものには1つの入力が必要とされます。塗りとして用いられるシェーダに関しては、入力は一切不要です。なお、実行間にステート情報は一切保存されません。したがって、各実行時のサンプリング済みピクセルを蓄積し、平均のピクセル値を求めるようなことはできません。また、必要な情報はすべて、カーネルの各実行時に演算される必要があります。ただし、あらかじめActionScriptで演算処理を行い、この結果を入力またはパラメータとして渡すことは可能です。入力画像のピクセル値には、必ずサンプリング関数を用いてアクセスします。サンプリング処理は次の内蔵関数を用いて行います。Pixel Benderが画像を処理する際、カーネルは出力画像のすべてのピクセルに対して実行されます。原点は左上の隅にあり、正の値は右側および下側への移動を示します。ピクセルは常に正方形です。サンプリングの対象ピクセルは、outCoord()のポジションに限定されるわけではありません。例えば、次のサンプリングステートメントを利用すれば、現在のピクセルから10ピクセル右、かつ5ピクセル下のピクセルをサンプリングできます。0 )は、outCoord()関数によって生成される座標ベクトルと2要素からなるベクトルの和を求めます。0)と記述するのに相当します。サンプリング対象の座標が入力画像の範囲外になるような場合は、すべて0が含まれたカラーベクトルが返されます。例えば、入力のデータ型がimage4の場合に範囲外のピクセルをサンプリングすると、完全に透明な黒のピクセルが返されます。入力のデータ型がimage3であれば、(アルファチャンネルなしの)黒のピクセルが返されます。ただし、表現できる座標の範囲については実用的な制限があります。また、現存しないサンプリングデータの有用性についても制約が存在します。
ピクセルの操作
一旦ピクセルを表現するベクトルが取得できたら、これらのカラー値を様々な方法で操作できます。仮に、pixの名のpixel4変数があった場合、個々のカラーチャンネルまたはチャンネルの組み合わせは以下の様々な方法で参照できます。
赤チャンネルとアルファチャンネル:pix
赤と青を置き替えた状態のアルファチャンネル以外のすべてのチャンネル:pix
個々のカラーチャンネルは32-bitの浮動小数点数で表され、通常、0
0(白)の間の値になります。出力側のカラー値はこの範囲外でも指定できますが、この場合はレンダリング結果には表現されません。0)は、ビットマップとしてレンダリングされる際、いずれも同じ黒になります。
(ただし、同一画像に対して複数のフィルタを実行するような場合は、当該ピクセルをサンプリングするにあたり2番目のフィルタが(0
0)を検出するので、実行結果に大きな差が現れることがあります。ピクセルベクトルの演算処理には、スカラー値とベクトル値のどちらも利用できます。スカラー値を使用する場合は、演算処理が各チャンネルに適用されます。例えば、次に示す演算処理では、各チャンネル(アルファチャンネルを含む)の値が半減されます。ベクトルを用いてこれと同じことを記述すると、次のようになります。カーネルを実行する際、入力画像のデータは一旦チャンネルあたり32-bitに変換され、その後カーネルの実行完了時に、チャンネルあたり8-bitへと再変換されます。入力の宣言には、次に示すように、inputキーワードを用います。カーネル内の個々の入力に、異なる数のチャンネルが含まれていても問題ありません。シェーダによって生成される出力画像のチャンネル数は、入力側のデータ型ではなく、出力ピクセルのデータ型によって決定されます。宣言する入力の数は、カーネルがFlexによって使用される際に必要な数より多くても問題ありません。ただし、Flash PlayerまたはAIRランタイムが自動的に画像データを割り当てるのは、必要とされる入力に対してのみです。なお、この余分な入力に対しては、カーネルがブレンド、フィルタ、塗りのいずれであるかを指定する前に、画像を割り当てる必要があります。
例えば、テクスチャ付きのエフェクトを作成するためにフィルタカーネルで追加の画像を使用した場合、当該カーネルが含まれたShaderFilterを表示オブジェクトのフィルタ配列に割り振る前に、必ず当該テクスチャをカーネルの入力として割り当てる必要があります(この方法については後ほど詳しく解説します)
パラメータの定義
カーネルには、入力画像以外の値もパラメータとして供給できます。パラメータのメタデータを宣言して、デフォルト値、最小値および最大値を指定することも可能です。また、説明を供給することも可能です。メタデータは山括弧(<>)で挟む形で宣言します。パラメータを使用する際には、あらかじめ合理的なデフォルト値を定義しておくことが推奨されます。次のパラメータステートメントでは、メタデータが備わったfloat3パラメータが宣言されています。前述のパラメータの現在値、最小値、最大値にActionScriptからアクセスしたい場合は、次のステートメントが利用できます。(ここでは、これらのパラメータが備わったカーネルを含むShaderオブジェクトの名がmyShaderであるとします。パラメータがスカラー型であった場合は(floatなど)、返される配列には単一の要素が含まれます。
カーネルの書き出しと読み込み
書き出したカーネルには、pdjというファイル拡張子が付きます(図3を参照)
Pixel BenderカーネルをFlexアプリケーションに読み込むには、コンパイル済みカーネルを埋め込むか、または読み込む必要があります。次の例に示すように、MIMEタイプ宣言を含める必要があります。次のコードでは、埋め込まれたカーネルを利用して、Imageインスタンスに適用される新規のシェーダとShaderFilterオブジェクトが作成されます。しかし、必要であればカーネルをランタイム時に読み込むことも可能です。次の例は、URLLoaderクラスを使用してカーネルを読み込む方法を示します。Pixel BenderカーネルをAIRアプリケーションで使用する方法は、ブラウザをターゲットとするアプリケーションの場合と全く同じです。カーネルを動的に読み込む場合、アプリケーションパッケージにカーネルを含める必要があります。Flex Builderでは、ソースディレクトリにあるカーネルファイルは通常、AIRファイルを書き出すときに自動的に含められます。(カーネルを埋め込んだ場合は、アプリケーションのSWFファイルにカーネルが既に含まれているので、AIRパッケージに追加する必要はありません。この記事のサンプルは、すべてブラウザをターゲットとしているので、ライブで見ることができます。サンプルをAIRアプリケーションに変換するには、アプリケーションディスクリプタを作成します。5をターゲットとする必要があることに注意してください。
ブレンドの使用
ブレンドは、ブレンド適用対象の表示オブジェクトのカラーと、ステージ上の当該オブジェクトの背後のカラーを組み合わせます。ここでは練習課題として、既製ブレンドのいくつかを再現してみることにします。また、既製のブレンドを使用するだけでは簡単に達成しえないような、ブレンドの作成にも挑戦します。表示オブジェクトにブレンドを適用するには、読み込み済みのカーネルバイトコードでShaderオブジェクトを作成し、これを当該表示オブジェクトのblendShaderプロパティに割り当てます。ブレンドカーネルには必ず2つの入力が必要となります。1つ目の入力は(blendShaderプロパティが設定される)前景の表示オブジェクト、そして2つ目の入力は前景オブジェクトの下にあるなんらかのものです。他の入力も使用したい場合は(マスクやテクスチャを作成する場合など)、ブレンドを適用する前に、これらの入力に明示的にBitmapDataオブジェクトとして画像を割り当てる必要があります。乗算ブレンドでは、前景オブジェクトの各カラーと背景オブジェクトのカラーの積が求められます。
片方の画像が純白である場合を除いて、このブレンドは結果を暗くする効果があります(図4を参照)
メモ:Pixel Bender言語上で2つのベクトルの乗算を行うと、対応する要素の値同士の積が求められます。つまり、仮にaとbがいずれもfloat2のベクトルで、次に示すステートメントが記述されていたとします。この場合、上記ステートメントは、次の2つのステートメントと同じことになります。スクリーンブレンドでは、カラーの積が求められた後、その値が反転されます。つまり、このブレンドの効果は、乗算ブレンドを適用したときと正反対になります。
片方の画像が黒である場合を除いて、このブレンドは結果を明るくする効果があります(図5を参照)
結果を明るくするスクリーンブレンド
このカーネルは、先ほどの乗算カーネルとほぼ同じであることが確認できます。resultに対する数値演算処理の内容が、唯一の変更点です。このサンプルには、読み込み・適用対象のシェーダが異なるという例外を除けば、同じActionScriptコードを使用できます。ハードライトブレンドは、乗算ブレンドとスクリーンブレンドを組み合わせたものです。
前景のピクセルが50%グレーより明るい場合はスクリーンブレンドが適用され、それ以外の場合は、乗算ブレンドが適用されます(図6を参照)
乗算ブレンドとスクリーンブレンドを組み合わせハードライトブレンド
ハードライトブレンドは、これまでのものよりやや複雑です。このブレンドでは、まず前景画像のピクセルのカラーチャンネルの平均値を用いて、当該ピクセルのグレーレベルが算出されます。そして、ifステートメントを用いることで、乗算とスクリーンのいずれかのブレンド処理が行われます。このサンプルに対しても、読み込み・適用対象のシェーダが異なるという例外を除けば、これまでと同じActionScriptコードを使用できます。次に、既製のブレンドだけでは達成しがたいブレンドにチャレンジすることにします。ここで紹介するフィルタは、ノイズテクスチャとsin()関数を用いて、木目または大理石模様のエフェクトを作成します。
このエフェクトの出来映えは、ノイズテクスチャの特性に左右されやすいといえますが、たいがいの場合、パーリンタイプのノイズが良好な結果をもたらします(図7を参照)
乗算ブレンドとスクリーンブレンドを組み合わせハードライトブレンド
このシェーダは、ノイズ画像のピクセル値をサンプリングすることで機能します。また、このシェーダは画像で直接ノイズピクセルを使用する代わりに、ノイズの値を一連のsin()関数にフィードします。そして、その結果と背景の積が求められます。結果エフェクトの曲線具合は、turbulenceパラメータを用いて制御されます。このサンプルに対して使用するActionScriptでは、これまでのサンプルと同じ方法でシェーダの読み込みと適用が処理されます。このサンプルでは、シェーダのturbulenceパラメータを制御するためにスライダが用いられています。スライダの最小値、最大値およびデフォルト値は、パラメータのメタデータに基づいて設定されます。そして、Sliderオブジェクトによって変更イベントがディスパッチされた際には、パラメータの値を変更するためにupdateFilter()メソッドが用いられます。したがって、単に元のShaderオブジェクトのパラメータ値を変更すれば良いというわけではなく、必ず、新たに更新されたShaderオブジェクトをblendShaderプロパティに割り当て直す必要があります。このサンプルでは、説明を簡素化するためにビットマップをノイズのテクスチャとして使用しましたが、BitmapDataクラスのperlinNoise()関数を利用して他のテクスチャを作成することも可能です。
フィルタの使用
フィルタとして使用するシェーダは単一の画像に適用されます。ShaderFilterオブジェクトはシェーダを「包む」役割を担い、単に、表示オブジェクトのfilters配列に追加するだけの操作で、シェーダを既製フィルタ同様に扱うことを可能にします。シェーダが適用されるオブジェクトは、当該カーネルの最初の入力に自動的に設定されます。フィルタカーネルが入力として他の画像も受け付ける場合は、フィルタが表示オブジェクトに割り当てられる前にこれらの画像を設定しておく必要があります。簡単なフィルタについてはChannelScramblerの説明で既に触れているので、ここではより複雑な「ぼかし(ガウス)」を例に解説を進めることにします。
ぼかし(ガウス)
ぼかし(ガウス)は、畳み込みフィルタの1つです。(「畳み込み」フィルタとは、周辺のピクセルの加重平均を計算するフィルタのことです。
ぼかし(ガウス)は畳み込みフィルタの1つ
一般的な用途の畳み込みフィルタをPixel Benderで実現することは簡単ではありません。これは、Flash PlayerおよびAIRランタイムがカーネルコード内でのループ処理をサポートしていないからです。ここでは、forループを使用する代わりに、周囲の各ピクセルをサンプリングするための、個々のプログラムステートメントを記述する必要があります。ここで紹介するサンプルカーネルは、サンプリング半径が1から6(畳み込み行列のサイズ、3×3から13×13に相当)のガウスぼかしを作成することができます。このフィルタでは、ガウスぼかしが分割処理可能であるという特性を生かして、処理が2段階に分けて行われます。最初の段階では画像に水平方向のぼかし処理が行われ、次の段階では垂直方向のぼかしが処理されます。これにより、出力1ピクセルにつき、「2x半径^2」ではなく「4x半径」の数のピクセルに対してのみサンプリングと加重平均を求める処理を行えば済むようになるため、ピクセルあたりの総演算量を減らすことができます。例えば、このフィルタがサポートする最大半径を使用する場合、最終的な出力1ピクセルあたり、水平、垂直の処理を合わせて26個の入力ピクセルがサンプリングされます。仮に、フィルタがこのぼかしを1段階で処理するのであれば、出力ピクセルにつき169もの入力ピクセルをサンプリングする必要があります。視覚的な結果と数学的な結果は一致します。このカーネルでは、forループが使えないことを克服するために、整数の半径値が個別に扱われます。有効なそれぞれの半径値に対しては、現在のピクセルから所定の半径分両側に離れた、2つのピクセルがサンプリングされます。この2つのピクセルに対するガウス加重は同じであることから、これらは単に加算されます。必要なピクセルのサンプリングがすべて完了したら、ウェイトとスケールの係数が適用されます。
水平方向の処理には、次のカーネルコードが用いられます(垂直方向の処理でも、同様のカーネルを使用)
エフェクトを完成させるには、両方のカーネルをフィルタとして適用する必要があります。なお、フィルタを適用する順序に決まりはありません。次に示すActionScriptコードでは、半径パラメータを制御するためにスライダが用いられています。このサンプルの場合、各フィルタの半径には同じ値が設定されます。前出のブレンドと同じように、パラメータの値が変更された際には、シェーダフィルタを表示オブジェクトに再度割り当てる必要があります。ビットマップの塗り同様に、シェーダの塗りも表示オブジェクトのオリジンに登録されます。この登録情報は、変換行列を用いることで調整できます。面または線の塗りとして使用されるシェーダにおいて、入力画像は自動的に割り当てられません。(塗りアルゴリズムの一環として画像が必要になる場合は、beginShaderFill()メソッドを呼び出す前に、その画像を入力に明示的に割り当てる必要があります。
市松模様の塗り
次に取り上げる塗りのサンプルでは、市松模様を作成することにします。
模様の正方形の大きさおよび色は、カーネルのパラメータによって制御されます(図9を参照)
模様の正方形の大きさと色はカーネルのパラメータで制御
この模様のアルゴリズムでは、モジュロ除算を用いて現在のピクセル位置の値と模様サイズを倍にした値の演算が行われます。演算結果が模様のサイズ(checkerSize)より小さな場合は、カーネルがAの色を描画し、それ以外の場面ではBの色を描画します。これで縞模様が作成されます。この縞模様を市松状にするには、次に示すように、このテクニックを縦と横の両方に適用する必要があります。後は、これらの結果をどのように組み合わせるかが問題です。以下に、完全なカーネルコードを示します。このサンプルに対して使用するActionScriptコードは、これまでのものよりやや複雑です。これは、カーネルに一段と多くのパラメータが用いられていることと、パラメータ自体がより複雑であることに起因しています。この関数はShaderオブジェクトを作成し、カーネルパラメータのメタデータを使用してコントロール群の初期値を設定します。そして、シェーダの塗りを用いて描画を行うdrawShape()関数を呼び出します。塗りの更新は、いずれかのコントロールによってchangeイベントが発せられた際に、再びdrawShape()関数が呼び出されることで処理されます。この関数は、現在のコントロール値に基づいてカーネルのパラメータを規定し、現在のグラフィックスを消去してから当該シェイプを再描画します。前出のサンプルでは、カーネルパラメータを規定するためのスライダが組み込まれていました。ここではカラーピッカーコントロールも使用することにしますが、この実装はスライダよりやや複雑になります。checkerSizeのようなスカラー値のパラメータであれば、配列には単一の値が含まれますが、色のようなベクトル型の場合は、ベクトルの各要素に対して配列に1つずつ配列要素が含まれます。また、アルファチャンネルは、このユニットカラーでは最初のチャンネルであるものの、Shaderオブジェクトのパラメータ配列では最後のチャンネルとして扱われています。この演算結果は、ビットワイズ左シフト演算子(<<)を用いて32-bitユニット値の適切なargb位置にシフトされます。そして最後に、ビットワイズOR演算子(|)を用いて4つのチャンネルが1つのユニットに組み合わされた後、返されます。この関数では、各チャンネルに対してビットワイズ右シフト演算(>>)が行われ、ビットワイズAND演算子(&)によって他のチャンネルに属するビットがマスクアウトされます。この結果は、Pixel Benderで必要とされる順序で配列の適切な要素へと割り当てられた後、返されます。
著者について
余暇にはスキンダイビングを楽しむ一方、子供たちと遊ぶことを忘れない子煩悩な父親でもある。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
ポータブルRIAは、何年も前に始まったプロセスにおける進化のステップの1つです。Webはもともと、ドキュメントの参照、検索、交換のためのプラットフォームとして出発しました。それから10年以上が過ぎ、Webはこのドキュメント中心の役割から抜け出して、現在ではデータ交換のプラットフォームになっています。データ交換に使用されるWebサイトのことを、通常、Webアプリケーションと呼びます。Webアプリケーションのインタラクティブ性と有用性が増すにつれて、Webには次の大きな進化が訪れています。PDFもまた、一般的なドキュメント交換方法の1つです。Webと同様に、PDFも単なるドキュメント交換技術から抜け出して、進化を遂げようとしています。RIAをPDFに挿入することにより、このお馴染みのドキュメント形式が、データの交換とインタラクティブな操作のための手法に変化します。データ交換にPDFを使用する主な利点は、セキュリティによる保護、電子メールでの送信、オフラインでのアクセスが容易なことです。この記事を最大限に活用するには、次のソフトウェアとファイルが必要です。
さらに詳しく
まず、実際の動作を見てみましょう
ポータブルRIAのコンセプトを説明するためのデモを用意してあります。すると、同じデータがPDF内に表示されます。このPDFをローカルに保存して、オフラインで表示することもできます。サーバからのデータの更新は、PDF内(図1を参照)、またはブラウザから行うことができます。サーバ上にはバックエンドのPDF生成サービスがあり、Flexアプリケーションを組み込んだ、データのないテンプレートPDFにアクセスできるようになっています。ユーザがPDFを要求すると、このPDFテンプレートにデータが挿入され、ユーザに送信されます。オプションとして、ユーザに送信する前に、PDFポリシー保護によってPDFのセキュリティを確保することもできます。PDFを、夜間バッチ処理で作成することもできます。ポータブルRIAを作成するために必要な要素がいくつかあります。第1に、ユーザがブラウザとPDF内でインタラクティブに操作するFlexアプリケーションが必要です。第2に、Flexアプリケーションがデータを取得する場所が必要です。第3に、PDFテンプレートと、ユーザがPDFを要求したときにテンプレートにアプリケーションデータを挿入するサーバが必要です。私は、次の手順でこれらの要素を組み合わせました。アプリケーションのバックエンドデータソースを作成します。基礎となるFlexフロントエンドアプリケーションを作成します。バックエンドのPDF生成サービスを作成します。データを格納するためのフォームフィールドを持つPDFを作成します。PDFからデータを読み取るようにFlexアプリケーションを修正します。ユーザがFlexアプリケーションからPDFを生成する手段を追加します。完成したFlexアプリケーションをPDFテンプレートにマージします。アプリケーションには何らかのデータが必要なので、架空の販売データをランダムに生成するJSPを作成しました。このデータは、サーバからXML形式で返されます。このデータの作成時に1つ問題がありました。xmlポリシーファイルが存在することを要求していたのです。"**"ポリシーの使用はセキュリティリスクにつながり、内部サーバや、認証にCookieを使用するサーバにデータを置いている場合は、特にそのリスクが高まります。実際のデモでは、デモサーバ上に"**"ポリシーファイルを置きたくはなかったので、その代わりに、公開デモにはPHPを使用し、別のサーバからデータを供給することにしました。ただし、このチュートリアルでは単にJSPファイルを使用します。jspの内容は、次のとおりです。xmlポリシーファイルを、ルートWebに追加する必要もあります。このポリシーファイルは、本稼働環境では絶対に使用しないでください。内部サーバや、認証にCookieを使用するドメインでは、"**"ポリシーを使用してはならないからです。典型的なセールスダッシュボードをデモで使用するには、まずダッシュボードをFlexで作成する必要があります。サンプルのダッシュボードにいくつか変更を加えて、Flexアプリケーションに追加しました。
ステップ3:バックエンドのPDF生成サービスの作成
その後、必要な設定コードをweb
xmlファイルに追加します。これらのクラスを作成するために、まずEclipseで新規Javaプロジェクトをセットアップします。pdfは、まだ作成していません。これは、ステップ7で作成するPDFテンプレートです。このクラスは、PDFバイト配列をセッションから読み取り、ファイルとしてユーザに返します。このデモのようにPDFをユーザセッションに格納するのは、スケーラブルな方法とはいえないので、本稼働環境では避けてください。xmlファイルに、以下の内容を追加します。これで、バックエンドの設定は完了です。アプリケーションサーバを起動(または再起動)して、コンソールにエラーが表示されないことを確認します。
ステップ4:データを格納するフォームフィールドを持つPDFの作成
今度は、PDFテンプレートを作成します。2を使って独自のテンプレートを作成することもできます。私が作成したファイルを使用する場合は、このステップは飛ばしてかまいません。ステップ7では、Acrobatを使用してこのファイルにFlexアプリケーションをマージします。
ステップ5:PDFからデータを読み取るためのFlexアプリケーションの修正
Flexアプリケーションがブラウザで動作する場合、データはWebからオンラインで取得します。PDFで動作する場合は、PDF内部のデータを使用します。これにより、ユーザがオフラインの状態になっていても、アプリケーションは動作します。さらにおまけとして、ユーザが好きなときにPDFのデータを更新できる機能も用意してあります。このクラスは、インスタンス化されたときに、アプリケーションがPDF Readerの内部で動作しているかどうかをチェックします。チェックが成功すると、このクラスは非表示のフォームフィールドのデータを読み書きするための関数呼び出しをいくつかセットアップします。そして、サーバから読み取ったXMLテキストのコピーを保存して、ブラウザでPDFが作成されたときに、データを再取得しなくても済むようにします。また、PDFの表示中にユーザがデータを更新すると、ローカルフォームフィールドが更新されます。ただし、次にPDFを開いたときにも更新されたデータが残っているようにするには、PDFを保存する必要があります。データは、アプリケーションがReader内部で動作している場合はPDFから、ブラウザで動作している場合はネットワークから取得されます。これで、Flexアプリケーションは、Webで動作していても、PDF内で動作していても、データを表示できます。
ステップ6:ユーザがFlexアプリケーションからPDFを生成する手段の追加
次に、Flexアプリケーションを修正して、ユーザがPDF生成を開始できるようにします。このクラスのコードを次に示します。XML以外のシリアライゼーション方法も使用できますが、このデモでは簡単にするためにXMLを使用しています。これらは、PDFテンプレートで使用されているPDFフォーム名とフォームフィールド名に一致する必要があります。サーバから結果が返されると、クライアントは新規ブラウザウィンドウを開き、PDFダウンロードを開始するダウンロードサーブレットを表示します。次に、ユーザがPDF生成を開始するためにクリックするボタンを追加します。また、このボタンは、FlexアプリケーションがPDF内部で動作している場合には表示されません。
ステップ7:完成したFlexアプリケーションのPDFテンプレートへのマージ
Flexアプリケーションは無事にコンパイルされ、ブラウザで動作したでしょうか
最後のステップは、PDFテンプレートを更新して、Flexアプリケーションを挿入することです。このステップを自動化できるといいのですが、現時点ではその方法を思いつきません。また、ブラウザとPDFに対して同じアプリケーションを使用していることに注意してください。必要なら、別々のアプリケーションを作成することも可能です。その場合でも、かなりの部分で同じコードを使用できます。ただし、このデモでは、両方のメディアに同じFlexアプリケーションを使用しても問題ありません。
Flexアプリケーションのコンテナとなるボックスをドラッグします(サイズは後で変更します)
FlexアプリケーションのSWFファイルを参照して選択します。その後、Flexアプリケーションのイメージを選択してサイズを変更します。PDFは、図3に示すようになります。
次のステップ
これで準備完了です。ブラウザに表示されたPDFは、ローカルファイルシステムに保存して、スタンドアロンのReaderにロードできます。また、「Update Data」ボタンをクリックすると、サーバからのデータが更新されることも確認してください。
著者について
登山とプログラミングを愛し、無限の新発見、巧みな危機回避、山頂と谷が存在することが両者の共通点と語る。
登山で各地の山に挑んだのと同様に、テクノロジーの分野でもさまざまな領域に挑戦
現在では主に、Flexを使用してJavaベースのバックエンドに対する見事なフロントエンドを構築している。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
開発したFlexアプリケーションの宣伝方法について | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
開発したFlexアプリケーションの宣伝方法について
デベロッパーは常に他のデベロッパーの手がけたアプリケーションに注目しています。第三者のアプリケーションをみることで開発意欲が湧いたり、自らのアプリケーションに対するアイデアを得ることができます。
Adobe Flexを利用してすばらしいアプリケーションが完成したら、できるだけ多くの人々の目に触れるようにするのが得策といえるでしょう
アドビ システムズ社では、皆さんが開発したアプリケーションの宣伝・プロモーション機会を提供するために、さまざまな無償リソースおよびプログラムを用意しています。本記事では、これらの主なものを紹介します。
FlexデベロッパーのためのコミュニティWebサイトとして存在するのがFlex
orgにはすべてのデベロッパーが自らのアプリケーションを追加できるとともに、他のデベロッパーの作品をチェックすることもできる、総合的なFlex Showcase*が用意されています。Flex Showcaseには誰でもサブスクライブできる更新情報用のRSSフィード*も用意されており、新たなアプリケーションが追加されたことをいち早く知れるようになっています。このショーケースにより、我々の製品に興味を持つ世界中のデベロッパーとの間で数え切れないほどのつながりができただけでなく、これらのデベロッパーから寄せられたフィードバックが、まもなくリリースされるActiva Live Chat 2 SDKなどの開発において、非常に重要な役割を果たしています。また、次世代のWebアプリケーション(特にRIA)に関心を持つお客様はFlex Showcaseをチェックしているため、これらのお客様に対する、驚くほどの露出が実現しています。この中には、自らの特別なニーズに見合ったアプリケーションを求めてショーケースを頻繁にチェックする、大手エンタープライズのデベロッパーも含まれています。この場合、アプリケーションが完全にオリジナルのものであるとともに、ユーザ登録などの手続きを強いらないことが条件となります。応募登録を行う際には、アドビ システムズ社が応募プロジェクトをSite of the Day以外で使用することを許可するかどうかも指定できます。たとえば、Edgeなどのアドビニュースレターやアドビ システムズ社のコーポレートプレゼンテーションで紹介することを許可するか、あるいはアドビ システムズ社のバナー広告の一部として使用することを許可するかなどが指定できます。また、Adobeカスタマーサクセスプログラム*では、アドビ システムズ社のソフトウェアによってどのようなメリットが自社で享受できているかを、ビジネスリーダの方々にお示しいただくことができます。このプログラムは通常、シニアマネージャやシニアエクゼクティブの方々にご参加いただいているものです。本プログラムへの参加をご希望の場合は、こちらの応募フォーム*(英語)に必要事項をご記入ください。
自主開発したアプリケーションの技術ノウハウをコミュニティと共有してみるのはいかがでしょうか
アプリケーションの解説とリンクをお送りいただくと、Flexデベロッパーセンターの「Flexサンプルアプリケーション」タブに、あなたのアプリケーションが掲載されるかもしれません。応募方法は以下の通りです。com(英語)あてに電子メールでお送りください。」と記入してください。必ず応募申込用紙にすべての必要事項を記入し、他のデベロッパーがコードの中身を閲覧できるよう、Flex SWFファイルのソースコードビューを有効にするようにしてください。ご応募いただいたアプリケーションがページに掲載されることは保証できませんが、Flexデベロッパーセンターの編集担当者がFlexチームと共同で応募作品の内容を検討させていただきます。
あなたが作成したアプリケーションの認知度を高める絶好のチャンスといえるでしょう
アプリケーションの全容ではなく一部のコードのみを公開したい場合は、ぜひ開発の手引きとコードをFlex cookbook*(英語)に投稿してください。これもアプリケーションをコミュニティと共有するための優れた手段です。開発したアプリケーションの認知度を高めるためのもう1つ絶好の方法としては、アドビテクニカルエバンジェリストとの交流という手があります。
自主開発したアプリケーションが取り上げられるかも知れないブログとしては、他にもRIApedia
orgにはFlexチームに所属し、ブログを公開するメンバーの一覧*(英語)が掲載されています。
開発した製品に近い内容のブログエントリーをもつアドビテクニカルエバンジェリストをみつけ、詳しい製品情報を知らせてみてはどうでしょうか
Flexユーザグループ*は、同じエリアで活動する熱心なFlexデベロッパーに、アプリケーションを提示することができる絶好の場です。orgには、北米のFlexユーザグループ*の一覧と、これらのグループのWebサイトへのリンクが掲載されています。ユーザグループの大半は、実際のアプリケーションがプレゼンテーションされるのを歓迎しています。
グループ責任者と連絡を取り、ユーザグループでのプレゼンテーションを手配してみてはいかがでしょうか
ご覧いただいたように、開発したFlexアプリケーションの認知度を高める方法はたくさんあります。
ここで重要なのは、実際に開発作業を行わない限り、作品を披露したくてもできないということでしょう
Flex開発を始めるための機は十分に熟しています。
ぜひ、今すぐ
著者について
余暇は、カーリング競技のストーンを、ハウスに投擲することを楽しんでいます。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
FlexとRIAに関する基本知識から開発方法の基礎を習得していただくことを目的とする連載です。対象とする読者は次のような方です。
デザイナーでFlex、RIAの概要や開発方法を知りたい方
つまり、プログラミングの経験を問わず、RIAの概念、Flexの基本を理解したうえで、シンプルなFlexアプリケーションを作成できることを目標とします。インタラクティブな環境で学習されたい方は、是非お申し込みください。
必要なソフトウェアとファイル
今回はありません。
必要な前提知識
特にありません。プログラミングやWebアプリケーション開発の知識も必要ありません。
学習できること
まずRIAの基礎知識とFlexの特徴をご紹介します。Flexは、Flash技術を利用して高機能なWebアプリケーションやWebサイトを作成するための製品と技術を含めたソリューションです。ここで「高機能なWebアプリケーション」とは、Flashの高い表現力と処理能力を利用するユーザにとって使いやすくパフォーマンスが高いアプリケーションをさします。Flexが可能にするRIAとは、主に次のような特徴と利点を持つインターネットアプリケーションです。広範囲である。インターネットを利用するため、ユーザはネット接続とブラウザさえあれば、広い範囲でアプリケーションが使用できます。
インストールが不要
ブラウザ上で動作するということはデスクトップアプリケーションのようなインストールや個別のバージョンアップは不要です。ブラウザとネットワークのメンテナンスが必要になります。Creative Suite製品のようなデスクトップアプリケーションはパソコンにインストールするため、アップデートは各ユーザが行なう必要があります。これに比べてブラウザで稼動させるFlexアプリケーションはWebユーザがインストールやアップデートを行う必要がありません。
コンテンツと表現力の充実
Flash技術を使用するFlexでは、Flash Playerが持つ高度な映像や音楽などのマルチメディア配信やアニメーションを盛り込むことができます。パフォーマンスがよい。クライアント側でアプリケーションの処理を行い、ページの移動もサーバへアクセスすることなく行えるため、ネットワークやサーバへの負荷を抑えることができ、HTMLベースのアプリケーションと比較してパフォーマンスは格段に向上します。このように多くの利点があることがわかります。FlexによるRIAは、ショッピングカートなどに代表される、HTML/CGIベース、またはHTML/PHPペースのアプリケーションよりもデスクトップアプリケーションに近い高機能なWebアプリケーションをFlash技術を使用して、実現するものといえます。あえて不利な点を挙げるとすると、アプリケーションのファイルサイズが数MBと大きくなることがあります。しかしすでにインターネットインフラの品質が向上している現在ではさほど大きい問題ではなくなっています。
インターネットアプリケーションで大きなウェイトを占めるCGIやPHP、JavaサーブレットによるWebアプリケーションに比べてFlexアプリケーションはどの点が優れているのでしょうか
HTTPの処理方式から、その違いをご紹介します。
HTTPのステートレスな処理方式
クライアントがブラウザでWebサイトのコンテンツを表示する場合、ブラウザはHTTPリクエストという形でWebサーバに「コンテンツを構成するHTMLファイルやそこで使用されている画像ファイルなどを送ってください」という要求を送信します。その要求を受けたWebサーバは、送信元(クライアントPCのアドレス)に対して、要求されたファイルを送信します。それらのファイルを受け取ると、ブラウザはHTML文書を解析してコンテンツを表示します。なお、Webサーバはファイルを送信し終えると、そのクライアントに関する情報を忘れて(捨てて)しまいます。パソコンからWebサイトを閲覧する際、この様な単純な仕組みによって、コンテンツを効率よく(素早く)表示しているわけです。「サーバはクライアントにデータを送信した跡、そのクライアントに関する情報を破棄してしまう」という方法は、パフォーマンスの向上と記憶容量の節約につながるわけですが、サイトを利用しているユーザに関する情報を持たない、このような処理方式を「ステートレス(stateless)」と呼びます。上記のような単純なやり取りでブラウザがWebページを表示するわけですが、ハイパーリンクをクリックするなどしてページを移動するごとに毎回サーバへのHTTP要求が送信され、ブラウザは戻ってきたHTML文書を受け取って表示します。このように、HTTPとHTMLによるWebコンテンツの閲覧では、基本的にページの移動や更新を行うたびにサーバへのアクセスが発生します。
HTMLベースのWebアプリケーションの処理イメージ
なお、表示を高速化するために、上記のように毎回サーバにアクセスせずに、一度表示したページの情報を保存しておいて次回以降再利用する「Webキャッシュ」とか「インターネット一時ファイル」とか呼ばれる方式が使われています。
HTMLによるデータ表示の限界
広く知られているように、HTMLはWeb上のドキュメントを記述するために使われているマークアップ言語ですが、「マークアップ」とは、タグによってテキスト文書に見た目や構造などの指定を行うことを意味します。例えば「文字をボールドで表示してください」という指定は、CSSで次のように記述できます。「ここだけ太字」の部分だけがボールドで表示されます。HTMLによるページでは、画像データを読み込めたり、ハイパーテキストで別の文書へのリンクを設置することができますが、基本的には上の例のようにテキスト文書にマークアップやCSSスタイルを設定したり、表組み機能を利用してページを格子スタイルでレイアウトすることしかできません。そのため、たとえば業務アプリケーションでよく見られる「スクロールバーつきのデータグリッドで大量データの表示する」というよう画面を作成することはできず、検索エンジンの結果画面のように「次のページ」や「前のページ」というハイパーリンクをたどってページを切り替えるか、縦に長いページに表示することになります。さらに、ページ切り替えを行う場合サーバープログラムへのアクセスが毎回発生することになります。検索エンジンのような高速なレスポンスを行うには莫大な投資によるインフラの構築が必要なため、通常はレスポンスの課題を様々な方策で克服する必要があります。
HTMLベースのWebアプリケーションの処理イメージ2
PerlによるCGIや、PHP、JSP/サーブレットなどで作成されたWebアプリケーションは、通常HTMLベースの画面構成がとられるため、WebサーバへのHTTP要求がクライアントから送信されると、そのタイミングでプログラムが実行され、「結果をHTMLドキュメントとして要求元に返す」という処理の繰り返しになります。
HTTP要求を処理するサーバ
例えばショッピングカートの内容を確認して「決済画面に進む」ボタンを押すと、次の画面で合計金額の確認が表示されるのは、ボタンを押したときにHTTPリクエストがサーバに送信されてCGI、PHPやサーブレットプログラムが呼び出され、そこで金額を再計算し、画面を作成して送り返すという処理によるものです。つまり、CGI/PHPやJavaサーブレットによるWebアプリケーションでは、基本的にページを変更するたびに次の処理が行われます。
サーバへの要求
サーバ上でプログラムが動いてHTMLを作り、クライアントに返す。ブラウザがそのHTMLを表示してページ全体を更新する。現在まだ主流といえるHTTPとHTMLによるWebページの欠点ばかりをあげましたが、優れた点は、わかりやすくシンプルな構造であるために多くの人に利用され、Webが普及した一要因となったといえます。前置きが長くなりましたが、いよいよFlexアプリケーションの特長をご紹介します。HTMLベースに比べたFlexアプリケーションの利点、Flexの開発ツールとしての特長をまとめると次のようになります。
サーバにアクセスしなくてもページを切り替えることが可能
そのため、Flashで作成したコンテンツがタイムラインによる画面切替えではサーバに一切アクセスしないのと同じように、ページの切り替えをアプリケーション内で自由に行うことができます。さらにFlexには画面切り替えを効率よく(開発時も実行時も)行うための方法が用意されています。これは後の章でご紹介します。ページ全体を再表示しなくても、データを取得して表示できる。上に述べたように、HTMLベースのアプリケーションではサーバから送られるデータはHTMLドキュメントとしてブラウザに到達するため、基本的にページ全体の切り替えが行われます。Flexアプリケーションでは取得したデータをどのように使うかは完全にプログラミングで制御できます。つまりページ全体を再表示する必要はまったくありません。これは効果的なユーザエクスペリエンスのベースとなります。グラフィック処理やアニメーションはもとより、ビデオ、サウンド、XMLデータ処理などのコンポーネントを利用した高度なアプリケーションを構築できます。ビジネスプロセスの自動化および効率化を実現するエンタープライズサーバープラットフォームであるLive Cycle ESの開発ツールにFlex Builderが含まれています。これはFlexアプリケーションにサーバサイドの高度なデータ処理を提供するものです。つまりFlexはLive Cycle ESエンタープライスソユーリョンのフロントエンド開発インフラの一つでもあります。今回はRIAの基本概念、HTMLベースのWebアプリケーションに比べた場合のFlexソリューションの優位な点をご紹介しました。Flexアプリケーションを作成するにはプログラミングの基礎知識が必要です。そのため、次回はFlexアプリケーションの開発に入るための前提知識をプログラミングの一般的な基礎知識を含めてご紹介いたします。
次回のトピック
ソースファイルとプログラム開発の基礎知識
コンパイルの基本概念とFlexコンパイラ
コンポーネントとは
テストとデバッグ
著者について
20年を超えるIT開発・教育・マネージメントキャリアを持つ。NET等を駆使したシステム開発経験を多くもつ。同社サイトでは、AIR、Flex技術情報やサンプルコードの公開を行っている。
▼その他(リンク先)
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Flex プレゼンテーションサーバーにおけるキャッシュ処理
Flex データサービスへのアクセス
JSP タグライブラリの使用
デプロイ時のオプション
Flex アプリケーションの負荷テスト
印刷用に表示
Flex は多機能な故に、その使い方を間違えると逆にパフォーマンスを低下させる場合があります。そこでこの記事では、Flex サーバーから最高のパフォーマンスを引き出すためのテクニックや Tips などを紹介していきます。
この記事で紹介する項目:
xml" ファイルの設定と、パフォーマンスに与える影響
Flex クライアントへの効率良いデータ配信
効率良いJSP タグライブラリの使用方法
なお、この文献で紹介するテクニックは、必ずしもすべての Flex アプリケーションにそのまま適用できるものではありません。作成するアプリケーションによっては、その構造に合わせてご自分でカスタマイズする必要があります。コーディングや Flex の基本概念などに関するヘルプは、Flex サポートフォーラム* や Flex デベロッパーセンター* でもご覧いただけますので、是非これらも参考としてご利用ください。なお、この記事は 2 部構成記事の第 2 部にあたり、第 1 部の「Flex アプリケーションのパフォーマンス : クライアントアプリケーションのパフォーマンスチューンアップテクニック集」では、Flex アプリケーションのパフォーマンスを強化するための、クライアントサイドでのコーディングテクニックについて解説しています。
この記事に必要なもの
この記事をフォローするには、つぎに挙げるものが必要です。(このホワイトペーパーには、クライアントアプリケーションのパフォーマンスチューンアップテクニック集と、サーバーサイドのパフォーマンスチューンアップテクニック集の両方が収録されています。
ご意見 / サポート
この記事の執筆にあたっては、内容やコードに誤りがないよう細心の注意を払っています。この記事や Flex のパフォーマンスに対するご意見やご要望がある場合は、是非我々にお寄せください。ご意見やご要望は、こちらから電子メールにてお送りください。
著者について
com Web サイトのクラスタリングや負荷テスト、デプロイメントに関するプロジェクトにも参画
現在は、エスカレーションエンジニアとして Flex のサポートを担当するサーバーサポートチームに所属
カリフォルニア大学バークレー校コンピューターサイエンス学科学士課程修了後、Macromedia に入社し、Flex に関する業務を毎日楽しむ。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Flex プレゼンテーションサーバーにおけるキャッシュ処理
Flex データサービスへのアクセス
JSP タグライブラリの使用
デプロイ時のオプション
Flex アプリケーションの負荷テスト
Flex アプリケーションのパフォーマンスは、既存のインフラやアプリケーションによっても大きく左右されます。例えば、Flex アプリケーションサーバーとデータサービスが毎秒数百件ものリクエストを処理できるにもかかわらず、Web サービスやリモートオブジェクトが一秒あたり 35 件ほどのリクエストしか処理できないといった場合もあります。この場合、Web サービスがパフォーマンスのネックとなり、スケーラビリティーにも悪影響を及ぼします。この例からも明らかなように、アプリケーションはそれぞれのレイヤーごとにテストすることが重要です。このセクションでは、Flex アプリケーションの負荷テスト方法を紹介します。(別途記事、「Flex アプリケーションのパフォーマンス : クライアントアプリケーションのパフォーマンスチューンアップテクニック集」の「Flex アプリケーションのパフォーマンスチューニングとプロファイリング」セクションも併せてご覧ください。
負荷テストのためのツール
まず初めに Flex プロキシを通さずに、それぞれのデータサービスの負荷テストを単独で行います。Web サービス、あるいは XML をフィードするサーブレットを利用している場合、負荷テストツールを利用して一秒あたりどれぐらいのリクエストを処理できるかを測定します。つぎに、同様のテストを Flex プロキシを通して行います。段階的に負荷テストを実施するのは、実際の Flash クライアントから送られたリクエストが Flex プロキシに一度渡され、そこから Web サービスや HTTP フィードにリクエストが発信されるからです。負荷テストのためのツールは、無償のものから高価なものまで数多く存在します。サービスごとの負荷テスト (Web サービス、リモートオブジェクト、XML フィードなどの負荷テスト) を開発 / ステージング段階で行う場合は、無償で提供されているツールを利用しても問題ありません。次に主な無償の負荷テストツールをまとめます。完成したアプリケーションや無作為なデータリクエストの負荷テストを実施する際には、次に挙げる商用ツールを使用することをお勧めします。
負荷テストのためのサンプルシナリオ
開発作業時には、Flex アプリケーションが利用するすべてのサービスを、それぞれテストするようにしてください。この作業は、単に Flash クライアントとサーバーのやりとりを記録し、このやりとりを複数のユーザーを想定したシナリオ下で再生するだけで完了します。以下に、いくつかのテスト方法やデータサービスを利用する、サンプルシナリオについて解説します。XML フィードを消費するアプリケーションの部分が完成したら、バックエンドに控えるサービスが本稼働時の負荷に対処できるかを検証してみます。開発用のシステムは本稼働時同等の負荷を再現できないケースが多いので、この作業には本稼働システムをミラーリングしたステージング環境を使用することをお勧めします。ステージングシステムとテスト用ツールの準備ができたら、ブラウザとサーバー間のやりとりを記録します。テスト用ツールは、記録しておいたやりとりを複数のスレッド (仮想ユーザー) を利用して再生することによって、本稼働時の負荷をシミュレーションします。この際、SWF ファイルの読み込みや Flex が提供する各種サービスではなく、データサービスだけをテストするように注意してください。なお、事前に記録しておいたスクリプトにデータサービス以外が関係するリクエストが含まれている場合は、これらの部分を削除しておきます。つぎのスニペットは、Microsoft WAS を利用して記録したスクリプトに含まれているリクエストを示すものです。なお、ここで削除した部分を含むすべてのサーバーへのリクエストは、後ほど本稼働状態に移行する前にテストします。初めての負荷テストを実施し、ベースライン値を算出しておきます。初めての負荷テスト実施後にコードを編集、あるいはサーバーをチューンアップする際には、このベースライン値が目標値に達するようにチューニングを行います。Flex が利用するサーバーサイドリソースは、すべてこの手法でテストできます。場合によっては、Flex プロキシサービス、ネットワーク全般、あるいはその他の要素、のいずれがパフォーマンスのネックになっていることがあります。この場合、まずエンドサービスを疑わずに、HTTPService のリクエスト先を静的ドキュメントに変更して、ベースラインの最大値を測定してみます。XML ファイルを供給する JSP もしくはサーブレットをリクエストし、その結果を静的な XML ファイルとして保存してから、このファイルを webroot に配置します。つぎに、HTTPService のポイント先を、この静的ドキュメントに変更し、再度負荷テストを実施します。こうすれば、理論最大値が把握できるだけでなく、パフォーマンスのネックとなっている場所が他にあるかもしれないことが分かります。トラフィックを監視すると分かるように、SWF ファイルを初めて読み込む際には、Web サービスに関する情報を取得するための、WSDL へのリクエストが発生します。SWF ファイルは、クライアントに Flex アプリケーションが読み込まれるたびにこのリクエストを送信します。Web サービスのメソッドは、WSDL の呼び出しが行われてから、リクエストされます。したがって、Web サービスの負荷テストを行う際には、WSDL の呼び出しが実際の Web サービスメソッドの呼び出し回数ほど発生しないこと考慮して、メソッドの呼び出しとは別に、WSDL の呼び出しだけの負荷テストを行う必要もあります。なお、負荷テスト用のツールには、別々のスクリプトを利用して WSDL とメソッドの呼び出し比率を設定し、実際の稼働状況に近いシナリオを作成できるものもあります。大半の商用ツールには、テストスクリプトのカスタマイズや、リクエスト時にランダムなデータを使用するための、パワフルなスクリプティング言語が搭載されています。仮にサイトのログイン部分をテストするような場合、同一のユーザーが繰り返しログインを行うようなスクリプトでは意味がありません。負荷テストを行う場合は、個別のユーザーが実際にログインを試みているかのように、一連のユーザーがランダムに選択されるスクリプトが必要です。なお、AMF エンコーディングを利用するリモートオブジェクトの負荷テストには、注意が必要です。SOAP の場合、リクエストには XML を利用するので、XML の一部分がランダム化されるようなスクリプトは容易に記述できます。しかし、AMF はバイナリプロトコルであるため、Flash ゲートウェイへのリクエストもバイナリデータで行われます。バイナリの場合、何がどのようにやりとりされているかが把握し難いばかりでなく、ランダムなデータを含むリクエストをスクリプトするのは困難です。なお、商用ツールの中には、Segue のように AMF をテスト対象のネイティブプロトコルとしてサポートし、この作業を容易に行える製品も存在します。開発サイクルの最終段階に近づいたら、本稼働時の負荷を想定した負荷テストを行うようにしてください。この場面では、商用ツールが有用になります。ユーザーが実際に行うことが想定されるアプリケーション操作内容を数種類記録し、これらのスクリプトに手を加えてランダムなデータがサーバーに渡されるようにしておきます。複数のスクリプトが用意できたら、これらをサーバーに対して実行し、バックエンドの動作を監視してみます。
この際、アプリケーションサーバーとデータベースサーバー両方の、つぎのエリアに注目するようにしてください:CPU、JVM のヒープ領域、ネットワーク、アプリケーションサーバーに搭載されているその他の監視ツール
負荷テストが完了したら、テスト結果を検証し、どのリクエストに時間が掛かったかを見つけ出します。ここでの目標は、アプリケーションやサーバーのどの部分がネックになっているかを把握し、その部分を最適化することにあります。実際の本稼働状況を完全にシミュレーションすることは不可能ですが、本稼働に近い状態は再現できます。ここで紹介した手法やテクニックを利用すれば、本稼働時のシステムダウンを最小限に抑え、優れたパフォーマンスを備えたアプリケーションが実現できます。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
印刷用に表示
Struts は Web アプリケーションの開発を容易にする、Javaサーブレットや関連技術をベースとした、オープンソースフレームワークです。Struts は、 Web アプリケーション開発者が直面する多くの共通課題に解決策を提供するため、小規模なプロジェクトからから大規模なエンタープライズ アプリケーションまで、さまざまな種類のアプリケーション開発において広く採用されています。
Struts の利用は、開発者のタスクを容易にはするものの、アプリケーションを使用するエンドユーザー体験の向上にはほとんど意味をなさないといってもいいでしょう
Struts を使って開発されたアプリケーションといえども、HTTP リスポンス / リクエストの仕組みを利用した、HTML のアプリケーションであることに変わりはありません。開発者だけでなく、企業も、HTML では実現困難の限界を超えて、より魅力的なユーザー体験が提供できる ソリューションを求めており、このニーズは日増しに高まっています。開発者だけでなく、企業も、HTML の限界を超えて、より魅力的なユーザー体験が提供できるソリューションを求めており、このニーズは日増しに高まっています。Adobe Flex は、このようなニーズを満たしながら、デスクトップ アプリケーション(RIA)の利便性とWeb アプリケーションの広範囲にわたる配信性を兼ね備えた、次世代のリッチ インターネット アプリケーションの開発を可能にするプレゼンテーションサーバーです。この記事の中で紹介するサンプルコードを実行するためには、以下のソフトウェアをインストールする必要があります。
将来のバージョンでは、NET サーバー上でも動作するようになる予定です。
著者について
Powersoftでは、Java&インターネットアプリケーション部門のテクニカルエバンジェリストを務める。
その後マクロメディアに入社し、マクロメディアのJ2EEアプリケーションサーバ、JRunのテクニカルエバンジェリストに就任
リッチインターネットアプリケーション(RIA)やFlashフロントエンドとJ2EEバックエンドの統合に携わる。現在は、Adobeの新しい開発者向けRIA関連のシニアエバンジェリストを務める。過去10年間、世界中の様々なカンファレンスで常連の講演者として活躍する。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
既に実装済みの Struts コンポーネント (またはそのファサード) をサービスとして公開する方法には 2 つあります。コンポーネントを Web サービスとして公開する。どちらの方法を採用するかは、アーキテクチャー上の問題というより、実装上の問題になります。
一般的には Web サービスを使う方がより汎用性のあるアプローチであり、柔軟性に富んでいるといえるでしょう
例えば、Web サービスを使う場合は、Flex アプリケーションが Struts アプリケーションと同じサーバー上に配置されている必要がありません。以下のソースコードは Web サービスとしての実装例です。
ソースコードの解説
<mx:Model> タグがクライアント アプリケーションの処理するデータを表しています。<mx:Model> タグの中で宣言されている、Data 要素はそれぞれ、データ入力用のコントロールにバインドされています。エンドユーザーがユーザー インターフェイスになんらかの変更を加えると、<mx:Model> タグが自動的にこの変化を処理します。
もう 1 つの実装方法
as クラスを実装します。このクラスを <mx:Model> タグの代わりに使用して、クライアントサイドでの ユーザー登録データをカプセル化することができます。しかし、エンドユーザーの体験を改良するという点からは、Struts にメリットがありません。リッチ インターネット アプリケーションの開発プラットフォームである Adobe Flex を利用すれば、Struts を使った効率的な開発を実現しながら、ユーザー体験を向上させることが可能です。Flex と Struts はどちらも MVC アーキテクチャーをベースとする開発プラットフォームでありながら、MVC の別々の部分に重点を置くフレームワークです。
したがって、これらのテクノロジーを組み合わせることは当然のことといえるでしょう
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
Flexアプリケーションの開発時にありがちな10の誤り | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Flexアプリケーションの開発時にありがちな10の誤り
com*に掲載されたものです。Flexはリッチインターネットアプリケーション(RIA)を構築するためのオープンソースアプリケーション開発フレームワークです。Flexは扱いやすいパワフルなフレームワークですが、ここではFlexアプリケーションの開発時にありがちな間違いや、誤りについて注目することにします。
早速、カウントダウンを始めましょう
0アプリケーションを開発している(つまり、最新テクノロジで旧型の体験を作ろうとしている)
0アプリケーションの世界からRIAの開発パラダイムへと移行する上での最大の課題、それは考え方そのものを変えることです。Flexはデベロッパーに対し、数年前まで考えられなかったような事柄を可能にするほどの高度なコンポーネントライブラリを提供します。0アプリケーションを実装するために用いられ、Flexのパワーが存分に生かされていないことがよくあります。0アプリケーションを開発するということは、ページの一部の表示だけがリフレッシュできたり、角を丸められるといったことだけではありません。例えば、Flexデベロッパーなら、ベクトル形状を利用してユーザがデータを視覚的に理解できるようにしてみたり、高度なコントロール群を利用してアプリケーションの流れをさらにリッチに仕立てるといったことを考えるべきです。Javaデベロッパーにとっての課題と言えば、我々自身がデザイナーではないということです。RIAテクノロジでは、この両者のスキルが大いに求められます。ブラウザ標準の使用感が損なわれている。ユーザ体験を改善する優れたプラットフォームを提供するのがFlexですが、Flexにおいても、ブラウザの「戻る」ボタンやブックマーク、自動入力などといった、おなじみの機能をサポートすることが重要です。Flex 3には、「戻る」ボタンのサポートやブックマーク機能に対応するために、新たにディープリンキング機能が含まれています。また、自動記入機能に関しては、既に複数のコンポーネントが存在します。コンテナの数が多すぎてアプリケーションの動作が遅くなっている。コンテナが多重にネストされればされるほど、レンダリングにかかる時間が長くなります。コンテナの使用法に関する詳細なアドバイスを含め、Adobe Flexデベロッパーセンターには、Flexのパフォーマンスに関するベストプラクティスが記された記事が掲載されています。以下はその抜粋です。「Flexのパフォーマンスにとって一番危険なのは、コンテナが無作為に使用されることです。数多くのコンテナを多重にネスト化することは、アプリケーションのパフォーマンスを妨害することになりかねません。これこそが、パフォーマンスに一番影響しやすい、Flexデベロッパーが犯しがちな誤りです。しかし幸運にも、注意さえすればこの問題は100%回避できます。データ転送時に、最適化されたプロトコルではなくXMLが使用されていることによって、アプリケーションの動作が遅くなっている。Flexのクライアントアプリケーションとサーバ間でのデータ転送手段としては、AMF3、XML、SOAPおよび単なるHTTPリクエストというように、さまざまな選択肢が提供されています。これらのテクノロジの使用例およびパフォーマンスベンチマークは、筆者Wardが作成したCensusアプリケーション*にて確認することができます。バックエンドにJavaを使った新規開発のプロジェクトには、BlazeDSの使用が検討に値します。BlazeDSは、アドビが先頃オープンソース化したデータサービス製品*であり、AMF3プロトコルを使用することができます。バイナリ転送プロトコルのAMFはJavaと手軽に統合できるだけでなく、XMLと比べて、大幅なパフォーマンスアップをもたらせることができます。AMFのオープンソース実装は、主なバックエンドテクノロジすべてを対象に用意されています。Flexデベロッパーを雇おうと努力している。現時点では、経験豊かなFlexデベロッパーを見つけるのは簡単ではありません。
Flexは現在、その普及を伸ばしつつある段階にあり、90年代後半にJavaがおかれていた状態に類似していると言えるでしょう
Flexデベロッパーの需要は供給を上回っているのが現状です。経験豊かなFlexデベロッパーを見つけにくいのは、このような背景があるからと言えます。
しかし逆に言えば、Javaデベロッパーにとっては、自らのスキルセットを拡充し、最新のテクノロジを利用する絶好の機会が提供されているとも言えるでしょう
Flexデベロッパーを必要とする企業の多くは、わずか数週間のFlex研修で、JavaデベロッパーやWebアプリケーションデベロッパーをトレーニングすることに成功しています。Flexの開発言語とAPIは、WebプログラミングやGUIのプログラミングに精通したデベロッパーにとって非常に習得しやすいものです。必要以上にアニメーションが使用されている。ランタイムとしてFlashを利用することで、デベロッパーは手軽にアニメーションや各種エフェクトを追加できます。しかし、アニメーションを使用する場合は、その意義と文脈を考慮することが重要です。使い方を誤るとユーザを惑わせることになります。また、アニメーションのタイミングも重要です。
どの場面でアニメーションを使用するか、しないかについては、インタラクションデザイナーのアドバイスを請うと良いでしょう
また、インタラクションデザイナーはアニメーションの種類、再生所要時間、イージング効果などについても、アドバイスを提供することができます。「ほとんどのアニメーションは単に再生時間が長すぎます。
長すぎ、遅すぎ、退屈すぎ、やり過ぎと言えるでしょう
少し、抑え気味にするべきです。次の操作に進む前に、退屈なアニメーションの再生が完了するのを待つことほど、耐え難いことはありません。アニメーションをすべて否定したいのではありません。私が批判しているのは、その目的・用途に比べて長すぎたり、行き過ぎたりしているアニメーションだけです。各々のアニメーションには必ず目的や用途があります。目的を検討し、そして、それに適した方法でアニメーションを実装することが重要です。エンタープライズエコシステムが整備されていない。他のソフトウェアプロジェクト同様、Flexアプリケーションに対してもエンタープライズ対応のエコシステムを整備することが重要です。今の時代、テスト駆動開発(TDD)は大半のエンタープライズプロジェクトにとって欠かすことができない存在です。Flexにはコーディングユニットテスト向けにFlexUnitフレームワーク*が用意されています。複数のデベロッパーが参加しながら一貫性のとれたアプリケーションを開発する。これに関して実績を持つ手法が、継続的インテグレーション(CI)*です。FlexアプリケーションのCIビルド用としても、Javaアプリケーション同様にAntとMavenの両方のプラグインが用意されています。フレームワークの能力を完全に生かしきれていない。Adobe Flexには、読者が開発するアプリケーションにおいて、その使用を検討すべきオプション機能がいくつかあります。例えば、アプリケーションの容量を低減するのに有効なのがランタイム共有ライブラリ(RSL)です。「共有可能なアセットを単独のファイルとして外部化し、これをダウンロードしてクライアント側でキャッシュできるようにすることで、アプリケーションが生成するSWFファイルの容量を抑えることが可能です。これらの共有アセットは実行時に複数のFlexアプリケーションが読み込めるものの、各クライアントでのダウンロードは一度だけで済みます。このような共有ファイルのことを『ランタイム共有ライブラリ』と呼びます。Flexフレームワークの中で、あまり使われていない機能としては、内蔵のアクセビリティ機能も挙げられます。また他にも、Flexフレームワークはローカリゼーション向けの内蔵機能も提供します。Flex 3フレームワーク最新の機能性について詳しくは、アドビのスタートガイド*ページを参照してください。複雑なレンダラが用いられることでDataGridの動作が遅くなっている。しかし、本記事3番目の項目でも解説したとおり、コンテナを多重にネスト化するとパフォーマンスに影響が及びます。Flexを使用する上でコンテナが多重にネスト化されやすい所と言えば、DataGridのアイテムレンダラです。DataGridによってレンダリングされるアイテムレンダラの数は、表示される行と列を掛け合わせることで決まります。カスタムのDataGridとListアイテムのレンダラは、高度に最適化される必要があります。アイテムレンダラに複雑なレイアウトロジックが必要とされるような場合は、UIComponent(またはその他のローレベルクラス)を使用するとともに、当該セルのコンテンツを手動で配置するのが最善策です。オフラインアプリケーションが想定されていない。これまでのRIAの前提と言えば、ブラウザでの実行でした。今後、ユーザがオフラインアーキテクチャを希望することを想定しなかった場合、アプリケーションをオフライン機能に対応させるための変更は、困難を極めかねません。通常、Webアプリケーションのビジネスロジックはサーバ側に配置されますが、オフライン対応のRIAの場合は、ビジネスロジックをクライアント側へと移転する必要があります。つまり、オフラインとオンラインの両方でアプリケーションを機能させるためには、あらかじめ特定のビジネスロジックの配置を考慮してアーキテクチャを決定することが不可欠です。
著者について
登山とプログラミングを愛し、無限の新発見、巧みな危機回避、山頂と谷が存在することが両者の共通点と語る。
登山で各地の山に挑んだのと同様に、テクノロジーの分野でもさまざまな領域に挑戦
現在では主に、Flexを使用してJavaベースのバックエンドに対する見事なフロントエンドを構築している。*で、エンタープライズソフトウェアコンサルタントとFlexプラクティスディレクターを務めています。
また、エンタープライズソフトウェアコミュニティのInfoQ
comの編集者と寄稿者でもあります。comの主催者にも名を連ねています。彼はこれまで、民間と政府の両方の、大小様々な規模のクライアントと仕事をしてきました。問題の解決に対する情熱に導かれて、高品質のソフトウェアの作成に取り組んでいます。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
5日間のビデオトレーニングコースで、プログラミングを段階的に体験できます。共通のコンポーネント、エフェクト、コーディングテクニックなどに関する実行可能なサンプルが、Flexによる開発のレパートリー強化に役立ちます。
Flexに関心をお持ちですか
1時間でアプリケーションを構築できます。
チュートリアルと記事
Sparkのアーキテクチャとコンポーネントセットの概要
Flex 4の特長の1つは、新しく導入されたテキストレイアウトフレームワーク(TLF)です。テキストやテキストフローの細かい制御が可能になり、非常に効果的なUIを作成できます。
Flexデータバインディングの落とし穴:一般的な誤用と間違い
この記事では、データバインディングを使用するアプリケーションを作成する際にデベロッパーが陥りがちな落とし穴や間違いの中から、一般的なものを10個選んで紹介します。
FlexおよびJavaアプリケーションのアーキテクチャ
この記事では、FlexとJavaで開発するアプリケーションのアーキテクチャに関して、以下のような内容を説明します。
FlexおよびJavaアプリケーション構築のためのテクノロジー
この記事では、FlexおよびJavaアプリケーションの構築に使用されるテクノロジーの概要を紹介します。
FlexおよびPHPアプリケーションのアーキテクチャ
PHPに関連するFlexに固有の事柄について説明します。HTML/PHPアプリケーションの構築のための一般的な作業を、FlexとPHPでどのように実行するかを紹介したいと思います。Flexはクライアントサイドのテクノロジーであり、PHPはサーバーサイドのテクノロジーです。どちらのテクノロジーも非常に成熟しています。今回は、前回に引き続きデバッグに役立つTIPSをご紹介します。この記事ではPart 1の内容を基にして、クライアントサイドデータ管理を行うアプリケーションに拡張していきます。このチュートリアルでは、Flex 4 から新しく採用されたレイアウトについて紹介します。このチュートリアルでは、Flex 4 から新しく採用されたエフェクトについて紹介します。このチュートリアルでは、Flex4で新たに追加されたSparkコンポーネントとSparkスキンアーキテクチャについて詳しく紹介します。このチュートリアルでは、Sparkコンポーネントの標準SparkスキンとカスタムSparkスキンを紹介します。このチュートリアルでは、Flash Builder 4の3つのテーマのうちのひとつである、データ中心型開発について紹介します。このチュートリアルでは、Flex 4 の新機能であるSparkコンポーネントを紹介します。このチュートリアルでは、Flex 4 から新しく採用されたCSSについて紹介します。このチュートリアルでは、Flex 4 から新しく採用されたステート構文について紹介します。単に製品名が変わっただけではありません。Adobe Flexチームが費やした2年の月日にふさわしい進化を遂げています。この記事では、新しいSDKとフレームワークの新機能の概要について説明します。この記事では、Flex 4の主要な目標の概要、アーキテクチャの違い、およびコンポーネント、レイアウト、ステートの使用方法とエフェクトにおける変更点の概論を提示します。Flex 4でFlex 3アプリケーションをコンパイルするときに予期される事柄に関する質問についても回答します。初めてFlex開発を行う人でも、データやサービスにすばやく接続し、データをリッチなUIコンポーネントにバインドすることができます。また、経験豊かなデベロッパーは、高度なデータ指向アプリケーションを構築するための強力な新しい方法を利用できます。
Sparkのアーキテクチャーとコンポーネントセットの概要
この記事では、Flex 4に付属するSparkのアーキテクチャーとコンポーネントセットについて、すばらしい新機能の一部を紹介します。他にも、レイアウトの割り当て、新しいグラフィックライブラリ、拡張されたステートモデル、一新されたエフェクトエンジンなど、Sparkの優れた機能をいくつかご覧に入れます。今回からデバッグに役立つTIPSをいくつかご紹介していきます。具体的には、次のワークフローを扱います。この記事では、Flash Builder 4ベータ2の新機能の中から、呼び出し階層ビュー、拡張ステートシンタックスのサポート、コードヒントの変更、エディターの改善について説明します。
Flex 4ベータ版のビューポートとスクロールの基礎
独自のインタラクティブスクロールコンポーネントを作成したい場合や、Flex 4のスクロールの仕組を詳しく理解したい場合には、以下の内容が参考になります。
Flex 4ベータ版のビューポートとスクロールの基礎
独自のインタラクティブスクロールコンポーネントを作成したい場合や、Flex 4のスクロールの仕組を詳しく理解したい場合には、以下の内容が参考になります。Flexで実際の業務アプリケーションやWebサイトを構築する際にキーボード周りの実装でトラブルが発生することがあります。ちょっとした工夫でトラブルを回避し、アプリケーションが使いやすくなるようなTIPSを紹介します。この記事は初級、中級のFlex技術者の向けです。Flex/AIR開発では、「ああこれは最初から用意しておくべきだった。」と後悔しがちなポイントがいくつかあります。そのひとつが、Flex/AIRアプリケーションを「開発用」と「本番用」とで切り替える仕組みです。
これからはじめるRIAとFlexプログラミング 第3回Flexプログラミング言語の基礎知識
第3回目はプログラミングの経験がない方のために、Flexの開発言語であるMXMLとActionScriptsの基礎知識を身につけていただくことを目指して、これらのベースとなるトピックをご紹介します。Flexで実際の業務アプリケーFeliCa(フェリカ)は、ソニーが開発した非接触ICカード技術方式です。国内の様々な電子マネーのベースとなっている技術で、馴染みのある方も多いかもしれません。今回は、FeliCaの機能を使って携帯電話のブラウザを起動するFlashアプリケーションをFlexで作成します。Flexで実際の業務アプリケーションやWebサイトを構築する際に発生するトラブルに対してちょっとした工夫でアプリケーションが使いやすくなるようなTIPSをご紹介していきます。初級、中級のFlex技術者の方向けの記事となります。LiveCycle ESには、プログラミング的な手法でFlexのグラフコントロールにデータを挿入し、プロセスデータを視覚的に提示する方法が用意されています。この記事ではイベントを利用して、簡単なデータ検証を行ったり、一部のセルが編集されるのを防ぐことができるような、より複雑なitemEditorの作成方法を紹介します。この記事ではFlex 3フレームワークを用いて大規模なマーケティングプラットフォームを開発する際の一般的なストラテジを解説します。
Flexのデータマップコントロールを使用したデータ駆動型地図アプリケーションの構築
Mapsコンポーネントとデータ駆動の技法を使用して、Flexアプリケーションを作成します。
Flexでのエンタープライズセキュリティ
Flex Antビルドスクリプトを追加タスクで拡張します。Flex 4 SDKベータ版に含まれる新しいエフェクトを使用して、新しいレベルのFlexアプリケーションを作成する方法を学びます。Flex 4ベータ版のスキンアーキテクチャを使ってコンポーネントのスキンを作成する方法を学びます。
0によるFlexアプリケーションのテスト
Flexアプリケーションの自動UIテストを作成して使用します。この記事では、Flex 4 SDKベータ版の新しいエフェクトについて説明します。今回はFlash Playerのシングルスレッドモデルに注目し、それがもたらす問題と対策について紹介します。
Flexアプリケーションの開発におけるCFCの役割について
第2回目はプログラミングの経験がない方のために、最低限必要な知識を身につけていただくことを目指して、Flex開発のためにもっともベーシックとなるトピックをご紹介します。本連載では、その筆者の「Flex/AIRハマり帳」をもとに、これからFlex/AIR開発を始める方が同じ過ちを繰り返さないためのささやかなtipsを紹介していきたいと思います。第二回では、BlazeDSの本番環境へのデプロイについてです。本連載では、その筆者の「Flex/AIRハマり帳」をもとに、これからFlex/AIR開発を始める方が同じ過ちを繰り返さないためのささやかなtipsを紹介していきたいと思います。
マーケティング・ツールとしてのRIA 活用(後編)
マーケティングにおけるデータの分析の中でのFlex チャートコンポーネントの利用について解説をしていきます。
階層型コンポーネント指向アーキテクチャによるビジネスアプリケーション構築
PACアーキテクチャに代表される、階層構造をもつコンポーネントを組み合わせてアプリケーションを構成する、階層型コンポーネント指向アーキテクチャについて説明します。Pixel Benderを使用して、画像やベクトルグラフィックなど任意の表示オブジェクトに対してフィルタ、ブレンド、および領域塗りつぶしを適用する方法について説明します。
パート4:ステートとトランジション
プロジェクトの構造、編成、コード形式を参照するための規則とロードマップについて学習します。
Flexのベストプラクティス - パート2:開発作業におけるベストプラクティス
Flexの開発作業に関するベストプラクティスを、この記事では全部で90項目以上も紹介していきます。Flex 3のランタイム共有ライブラリを使用して、RIAのダウンロード時間を短縮し、起動時間を改善します。FlexとRIAに関する基本知識から開発方法の基礎を習得していただくことを目的とする連載です。FlexとZendを利用してコーディング、デバッギングおよびプロジェクト管理のワークフローを能率化する方法を紹介します。マピオンFlash Maps APIとはドラッグ&ドロップによるフリースクロール可能な地図をFlashアプリケーション内に埋め込むことができる地図APIです。本連載では、AIRでデスクトップウィジェットを制作する方法について、実際のプロジェクト例と実装例を交えながら、複数回に渡ってお届けしようと思います。今回は、FlexをベースにFlashと連携を行った、開発手法について解説を行います。
0 (そうめん) で非同期処理をスマートに
ActionScript Thread Library は、タスクシステムと Java のスレッドモデルをベースとした「疑似スレッド」を実現するライブラリで、複雑で冗長になりがちな、イベント処理や非同期処理、リアルタイム処理を、分かりやすくスマートに記述することを可能にします。初めてFlexを触ってみる人や、軽量スクリプト言語の経験があるWeb系エンジニアにもわかりやすいように、Flexとサーバサイドの通信方法について説明したいと思います。共有ライブラリの作成と使用およびプロトタイプの基礎について学習します。プロジェクトの構造、編成、コード形式を参照するための規則とロードマップについて学習します。ライブヘルプによる担当者とのやりとりを通じてサポートを受けるアプリケーションです。
画面デザインとロジックの分割テクニック
Flexで開発を行う際に、画面デザイン(MXML)、スクリプトを1つのMXMLファイルに記述せずに、画面デザイン部(MXMLファイル)、プログラムコードを記述するロジック部(ActionScriptファイル)のように分けて作成する方法が採用されることがあります。今回はいくつかある分割テクニックのうち、IMXMLObjectインターフェースを使用した方法、更にその方法を発展させた方法を紹介します。
マーケティング・ツールとしてのRIA活用(前編)
蓄積されたデータを多様な視点で分析することを目的としています。
Flexアプリケーションの開発時にありがちな10の失敗点
Flexアプリケーションの開発時に陥りやすい、一般的な誤りについて解説します。スキニングやスタイリングのワークフローを自動化する、CS3拡張機能とFlex Builder 3の機能の概要について解説します。一般的に誤解されがちなFlexに関する10の事柄について、正しい情報を紹介します。
開発したFlexアプリケーションの宣伝方法について
アドビ システムズ社が提供する無償リソースや各種プログラムを通じて、自主開発したFlexアプリケーションの認知度を高める方法を紹介します。この記事では、BlazeDSのメッセージングを使用するデモアプリケーションとして、複数ユーザで同時に書き込めるホワイトボードを例に、機能を説明します。
チャーティング機能を活用したWeb解析ツール
Web解析ツールによるアクセスや到達率、流入数、流出数などHTMLベースで提供されていた集計データを、Flex/Javaを用いてRIA化することによりユーザビリティを向上させ、クライアントにおけるサービス品質の向上を図りました。
Flex 4:マルチプラットフォームRIAの構築のためのオープンソースフレームワーク
アドビのオープンソース*