Adobe Flex オープンソースで構築する リッチクライアント 株式会社フラッグシステムズ

目次 概要 Flex とは？ Flex の開発 Flex の周辺技術 BlazeDS の通信技術 セッション情報 システム構成案 まとめ

概要 Flex とは？ 利用者的観点 ①利用者はブラウザ（ IE とか Firefox とか）で利用しま す。 ② HTML じゃありません。 Flash （ベース）です。 ③いわゆるリッチクライアントと呼ばれるもので、主 に利用者のパソコンで動くアプリケーションです。 → 表現豊か。ユーザビリティ向上。 → 通常の Web と同じ感覚。 → 最初にアプリケーションを落としたり、データ通信を 行うときにサーバと接続。

概要 Flex とは？ 提供者（技術者）的観点 ①オープンソースです。タダです。 ② HTML,JavaScript は使いません。 代わりに MXML,ActionScript を使います。 ③ Java,PHP,ASP.net,RUBY といった既存の Web 技術との親和性が 高いです。 ④ Adobe 製品です。 → 似たような技術ですが、覚える必要はアリ。 → 昔は商用利用に関してはお金が掛かった … 。 → 画面は Flex 、裏は Java 、といった使い方になります。 → だから何ということはありません。

概要 Flex とは？ リッチクライアントとは何か。１ ファット クライアント リッチ クライアント HTML クライアント コストパフォーマンス

概要 Flex とは？ リッチクライアントとは何か。２ ファットクライアント CD-ROM 等で配布して導入するアプリケーション。 例） Excel 、 Photshop など ファット クライアント リッチ クライアント HTML クライアント コストパフォーマンス → 導入が面倒！

概要 Flex とは？ リッチクライアントとは何か。３ HTML クライアント Web サイトのように、ブラウザでアクセスして使うア プリケーション 例）ヤフオク、楽天など ファット クライアント リッチ クライアント HTML クライアント コストパフォーマンス →UI が貧弱！ → 実行環境によって見た目や動きが違 うことも … 。

概要 Flex とは？ リッチクライアントとは何か。４ リッチクライアント 必要に応じてダウンロードして実行するアプリケーシ ョン。データを取得する場合にサーバにアクセスす る。 ファット クライアント リッチ クライアント HTML クライアント コストパフォーマンス → 導入が簡単！ →UI がリッチ！ → 実行環境に 依存しない！

概要 Flex とは？ リッチクライアントとは何か。補足 補足） 昔は、クライアントの PC の能力が低かったため、サーバにお金を掛け て、サーバが頑張る HTML クライアントは有用性がありました。 近年、 PC の能力向上に合わせ、サーバの負荷を下げてクライアントの リソースを有効活用するという考え方に変わりつつあります。 参考）リッチクライアント技術 Flex … Adobe Silverlight … Microsoft JavaFX … Sun その他、 Curl 、 BizBrowser など。

概要 Flex とは？ まとめ Flex は Flash ベースのリッチクライア ントです。 表現豊かな Web アプリケーションが 構築できます。 しかも、タダ！！

Flex の開発 構成要素１ クライアントサーバ ブラウザ FlashPlayer MXML Action Script SWF ①作成 ②コンパイル ③配備 SWF ①アクセス ②ダウンロード ③実行 ２回目以降は データのやり取り ※ひとつの SWF フ ァイルに複数の画 面を持つことがで きます。 DB

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 の周辺技術 裏（通信技術）３ クライアントサーバ SWF ①リクエスト ③レスポンス BlazeDS 社員番号 003 の人は？ ( getEmployee 呼出 ) 山本さんです 検索 SearchService#getEmployee 設定ファイル (WEB-INF/flex/remoting-config.xml) getEmployee ＝ SearchService クラスの getEmployee メソッドです ②呼出 S2BlazeDS は、 ↑ この設定を不要にできる。

BlazeDS の通信技術 （前提知識） Flex ３つの通信方式 ( 前提知識 )Flex がサポートする 3 つの通信方式 HTTP (GET/POST) [text] Web サービス [text] AMF ( マクロメディア独自テクノロジー） [binary] ※これらはいずれも HTTP プロトコルを使って通信します。 （ HTTPS も利用可能） → 通常の HTML で行っている（ Web サイトを閲覧する）通信方式。 →XML 形式のプロトコルを用いメッセージの送受信を行う技術。 →Flash 独自の通信方式。

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 でもセッシ ョン情報は利用できます。）

システム構成案 システム構成案１ クライアントサーバ Flex SWF MXML Action Script S2Container S2Blaze BlazeDS S2Dao or S2JDBC DB DTO( AS) DTO(Ja va) ServiceDao AMF( バイナリ通信 )

システム構成案 システム構成案２ クライアントサーバ ( 基幹 ) Flex DB HTML REST Service サーバ ( プレゼン ) REST ServiceStruts XML HTM L

システム構成案 システム構成案 考察 Flex のみの利用が決まっている場合は AMF 通信を積 極的に利用する。 Web サービスをデータアクセスのためのビジネスロ ジックと位置づける（ストアドプロシージャのよう なイメージ）ことで、 Flex 以外のアプリケーション と共存を図ることができる。 例） ・モバイルで HTML を、 PC で Flex を利用する。 ・単純に両方使いたい。

まとめ 課題（デメリット） MXML 、 ActionScript を理解している技術者が少な い。 その分コストが掛かります。 FlexBuilder が高い！ モバイル対応が困難 デザインをアウトソーシングしにくい 世の中にある Web デザイン会社は基本的に HTML しか出来ない。

まとめ 効果（メリット） クロスブラウザ対策が不要 ブラウザで利用するため配信の心配が無用 （ AMF 通信を行えば）早い。 デフォルトのデザイン、動きが良い。 複雑な動きをするアプリケーションを作り込める。

まとめ 参考資料 対象シス テム（会 社名） 効果（メリット） 課題（デメリッ ト） ファットクライ アントからリッ チクライアント へ移行した事例 学校会計シス テム（会社 A ） 利用者に対するユーザビ リティ ( 生産性 ) の維持 プログラム配布の容易性 による導入と運用の効率 化 リッチクライアント動 作環境自体のバージョ ンアップへの対応 販売統計シス テム（会社 B ） 利用者に対するユーザビ リティ ( 生産性 ) の維持 プログラム配布の効率化 リッチクライアント動 作環境自体のバージョ ンアップへの対応 クライアント側の環境 設定 社内総合調達 システム（会 社 C ） 利用者に対するユーザビ リティ ( 生産性 ) の維持 開発コスト 人材不足 ライセンスコスト HTML クライア ントからリッチ クライアントへ 移行した事例 業務アプリケ ーション（会 社 D ） ユーザビリティの向上 プレゼンテーション層と ビジネスロジック層の分 離開発による保守 ( コン テンツ管理 ) 費の削減 開発生産性の低下 設計方式の欠如 人材不足 出典

ご清聴ありがとうございました。