ダウンロード

Adobe Flex
オープンソースで構築するリ
ッチクライアント
株式会社フラッグシステムズ
目次







概要 Flexとは？
Flexの開発
Flexの周辺技術
BlazeDSの通信技術
セッション情報
システム構成案
まとめ
概要 Flexとは？
利用者的観点
①利用者はブラウザ（IEとかFirefoxとか）で利用します。
→通常のWebと同じ感覚。
②HTMLじゃありません。Flash（ベース）です。
→表現豊か。ユーザビリティ向上。
③いわゆるリッチクライアントと呼ばれるもので、主に利用
者のパソコンで動くアプリケーションです。
→最初にアプリケーションを落としたり、データ通信を行うとき
にサーバと接続。
概要 Flexとは？
提供者（技術者）的観点
①オープンソースです。タダです。
→昔は商用利用に関してはお金が掛かった…。
②HTML,JavaScriptは使いません。
代わりにMXML,ActionScriptを使います。
→似たような技術ですが、覚える必要はアリ。
③Java,PHP,ASP.net,RUBYといった既存のWeb技術との親和性が高
いです。
→画面はFlex、裏はJava、といった使い方になります。
④Adobe製品です。
→だから何ということはありません。
概要 Flexとは？
リッチクライアントとは何か。１
ユ
ー
ザ
ビ
リ
テ
ィ
ファット
クライアント
リッチ
クライアント
HTML
クライアント
コストパフォーマンス
概要 Flexとは？
リッチクライアントとは何か。２
ファットクライアント
CD-ROM等で配布して導入するアプリケーション。
例）Excel、Photshopなど

→導入が面倒！
ユ
ー
ザ
ビ
リ
テ
ィ
ファット
クライアント
リッチ
クライアント
HTML
クライアント
コストパフォーマンス
概要 Flexとは？
リッチクライアントとは何か。３
HTMLクライアント
Webサイトのように、ブラウザでアクセスして使うアプリケ
ーション
例）ヤフオク、楽天など

→UIが貧弱！
→実行環境によって見た目や動きが違う
ことも…。
ユ
ー
ザ
ビ
リ
テ
ィ
ファット
クライアント
リッチ
クライアント
HTML
クライアント
コストパフォーマンス
概要 Flexとは？
リッチクライアントとは何か。４
リッチクライアント
必要に応じてダウンロードして実行するアプリケーション。
データを取得する場合にサーバにアクセスする。

→導入が簡単！
→UIがリッチ！
→実行環境に
依存しない！
ユ
ー
ザ
ビ
リ
テ
ィ
ファット
クライアント
リッチ
クライアント
HTML
クライアント
コストパフォーマンス
概要 Flexとは？
リッチクライアントとは何か。補足

補足）
昔は、クライアントのPCの能力が低かったため、サーバにお金を掛けて、サ
ーバが頑張るHTMLクライアントは有用性がありました。
近年、PCの能力向上に合わせ、サーバの負荷を下げてクライアントのリソー
スを有効活用するという考え方に変わりつつあります。

参考）リッチクライアント技術
Flex … Adobe
Silverlight … Microsoft
JavaFX … Sun
その他、Curl、BizBrowserなど。
概要 Flexとは？
まとめ



FlexはFlashベースのリッチクライアント
です。
表現豊かなWebアプリケーションが構築
できます。
しかも、タダ！！
Flexの開発
構成要素１
クライアント
サーバ
②コンパイル
MXML
SWF
③配備
Action
Script
①作成
①アクセス
SWF
SWF
②ダウンロード
③実行
DB
FlashPlayer
ブラウザ
２回目以降は
データのやり取り
※ひとつのSWFフ
ァイルに複数の画
面を持つことができ
ます。
Flexの開発
構成要素２

MXML
ここにテキストボックスを配置して、ボタンを配置して・・・という情報をXMLで記述します。
HTMLとは結構違いがあるので注意が必要です。
コンテナ、DataGrid（Tableというのはない）などの独自の概念があります。
swingなどを利用したことがある人にはとっつきやすいかもしれません。

ActionScript
画面上の動きを記述する言語です。
データグリッドをクリックしたらその内容がテキストボックスに反映されて・・・など。
Flashで使われてきたActionScriiptと同じです。
JavaScriptと酷似しているので、習得は楽だと思います。
ただし、ActionScriptのバージョンが3.0になってからオブジェクト指向が導入されました。
Flexの開発
構成要素３

SWFファイル
サーバに置いておきます。
利用者は、ブラウザでこいつにアクセスすると、ダウンロードをすることになります。
ダウンロードし終えると、FlashPlayerの上でSWFファイルが動きだします。
（HTMLと同様の）マークアップ言語です。

FlashPlayer
環境ごとのテストも不要になる。
通常のWebアプリケーションでは、各環境ごとのテストが必要であったり、
IEでしか動かない、等の制約をつける必要もない。
※FlashPlayerは常に最新版が自動でダウンロードされる。
インターネット環境につながっていないシステムは何らかの考慮が必要になる。
Flexの開発
開発環境

FlexSDK
MXML、ActionScriptをコンパイルしてSWFファイルを生成する。
ただです！

FlexBuilder
Adobe純正のFlex（及びAir）専用開発環境。
・SWFファイルの生成
・WYSIWYG（ウィジウィグ）
※Eclipseベースなので、
Eclipse愛用者はすぐ使えるはず。
製品版 31,500円（税込）
アドビストア価格
Flexの周辺技術
表（プレゼンテーション）

ILOG Elixir
コンポーネント製品。「高度なグラフィック機能とインタラクティブな操作性によ
り、生データをクリアで実用的な情報に変換できます。」（有償です。）
組織図
３Ｄチャート
ゲージ
Flexの周辺技術
裏（通信技術）１

BlazeDS
クライアントのFlex（FlashPlayerで動いているSWFファイル）と、サーバの
Javaロジックをつなぐもの。
設定ファイルに記述することで、MXMLからJavaのメソッドを直接呼ぶように
記述することができます。
LCDS ES(LiveCycle DataServices Enterprise Suite)の一機能をオープンソース化したもの(※LCDS
ESは有料です。)
◎Javaオブジェクトを直接呼び出すことが出来る（リモーティング機能）
◎サーバーからメッセージをプッシュすることが出来る（Webメッセージング機
能）
Flexの周辺技術
裏（通信技術）２
S2BlazeDS
DIコンテナSeasar2の関連プロダクトのひとつ。

BlazeDSの「Javaとの連携」部分をさらに一歩押し進め
て、設定ファイルへの記述を最小限にとどめて、もっと
簡単に呼び出すことができるようにしたもの。
Flexの周辺技術
裏（通信技術）３
クライアント
サーバ
社員番号003
の人は？
(getEmployee呼出)
①リクエスト
SWF
③レスポンス
山本さんです
BlazeDS
②呼出
検索
SearchService#getEmployee
設定ファイル(WEB-INF/flex/remoting-config.xml)
getEmployee ＝ SearchServiceクラスのgetEmployeeメソッドです
S2BlazeDSは、↑この設定を不要にできる。
BlazeDSの通信技術
（前提知識）Flex３つの通信方式

(前提知識)Flexがサポートする3つの通信方式
HTTP (GET/POST) [text]
→通常のHTMLで行っている（Webサイトを閲覧する）通信方式。
Webサービス[text]
→XML形式のプロトコルを用いメッセージの送受信を行う技術。
AMF (マクロメディア独自テクノロジー）[binary]
→Flash独自の通信方式。
※これらはいずれもHTTPプロトコルを使って通信します。
（HTTPSも利用可能）
BlazeDSの通信技術
AMF(Action Message Format)１

AMFとは？
Flashのトランスポートプロトコル。
（2007/12に仕様を公開し、BlazeDSをリリースしています。）
◎バイナリ形式で効率的に通信を行うことが出来る！バイナリ⇔テキスト変
換が不要になる。
◎テキスト形式ならではの余分なデータ（例えば「<」や「>」）が不要になる。
Adobeの人曰く
「BlazeDSのRemoteObjectはAjax+JSONの4倍早い！！」
BlazeDSの通信技術
AMF(Action Message Format)２
クライアント
サーバ
SWF
XML
バイナリ
テキスト
テキスト
デシリアライズ
バイナリ
シリアライズ
AMF
バイナリ
バイナリ
バイナリ
シリアライズ
セッション情報
ユーザー情報の保持


従来のWebアプリケーションであれば、利用ユーザーの
情報を保持するために、セッション情報に保存、HTML
のhiddenに埋め込んで常に送る、Cookieなどの工夫が
必要でした。
FlexならActionScriptの変数にてクライアントで保持す
ることができます。（ちなみに、Flexでもセッション情報は
利用できます。）
システム構成案
システム構成案１
クライアント
サーバ
AMF(バイナリ通信)
MXML
DTO(
AS)
DTO(Ja
va)
Service
Action
Script
SWF
Flex
DTO(Ja
va)
S2Blaze
BlazeDS
Dao
S2Dao
or S2JDBC
S2Container
DB
システム構成案
システム構成案２
クライアント
HTML
サーバ(プレゼン)
HTM
L
Struts
XML
Flex
サーバ(基幹)
REST
Service
DB
XML
REST
Service
システム構成案
システム構成案考察
Flexのみの利用が決まっている場合はAMF通信を積極
的に利用する。
 Webサービスをデータアクセスのためのビジネスロジッ
クと位置づける（ストアドプロシージャのようなイメージ）
ことで、Flex以外のアプリケーションと共存を図ることが
できる。
例）
・モバイルでHTMLを、PCでFlexを利用する。
・単純に両方使いたい。

まとめ
課題（デメリット）

MXML、ActionScriptを理解している技術者が少ない。
その分コストが掛かります。

FlexBuilderが高い！

モバイル対応が困難

デザインをアウトソーシングしにくい
世の中にあるWebデザイン会社は基本的にHTMLしか出来ない。
まとめ
効果（メリット）

クロスブラウザ対策が不要

ブラウザで利用するため配信の心配が無用

（AMF通信を行えば）早い。

デフォルトのデザイン、動きが良い。

複雑な動きをするアプリケーションを作り込める。
まとめ
参考資料
対象システ
効果（メリット）
ム（会社
名）
学校会計シス
テム（会社A）
ファットクライアン
トからリッチクライ
アントへ移行した
事例
販売統計シス
テム（会社B）
利用者に対するユーザビ
リティ(生産性)の維持
プログラム配布の容易性
による導入と運用の効率
化
利用者に対するユーザビ
リティ(生産性)の維持
プログラム配布の効率化
社内総合調達利用者に対するユーザビ
システム（会社リティ(生産性)の維持
C）
課題（デメリット）
リッチクライアント動作
環境自体のバージョン
アップへの対応
リッチクライアント動作
環境自体のバージョン
アップへの対応
クライアント側の環境設
定
開発コスト
人材不足
ライセンスコスト
ユーザビリティの向上
HTMLクライアント業務アプリケ
開発生産性の低下
からリッチクライアーション（会社プレゼンテーション層とビ
ジネスロジック層の分離開設計方式の欠如
ントへ移行した事 D）
発による保守(コンテンツ
人材不足
例
出典 http://www.thinkit.co.jp/free/tech/5/3/
管理)費の削減
ご清聴ありがとうございました。

Download Report