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サイトのように、ブラウザでアクセスして使うア プリケーション 例）ヤフオク、楽天など →UIが貧弱！ →実行環境によって見た目や動きが違うことも…。 ファット クライアント リッチ クライアント ユーザビリティ HTML クライアント コストパフォーマンス

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

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

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

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

Flexの開発 構成要素２ MXML ActionScript HTMLとは結構違いがあるので注意が必要です。 コンテナ、DataGrid（Tableというのはない）などの独自の概念があります。 swingなどを利用したことがある人にはとっつきやすいかもしれません。 ActionScript 画面上の動きを記述する言語です。 データグリッドをクリックしたらその内容がテキストボックスに反映されて・・・など。 Flashで使われてきたActionScriiptと同じです。 JavaScriptと酷似しているので、習得は楽だと思います。 ただし、ActionScriptのバージョンが3.0になってからオブジェクト指向が導入されました。

Flexの開発 構成要素３ SWFファイル FlashPlayer サーバに置いておきます。 利用者は、ブラウザでこいつにアクセスすると、ダウンロードをすることになります。 ダウンロードし終えると、FlashPlayerの上でSWFファイルが動きだします。 （HTMLと同様の）マークアップ言語です。 FlashPlayer 環境ごとのテストも不要になる。 通常のWebアプリケーションでは、各環境ごとのテストが必要であったり、 IEでしか動かない、等の制約をつける必要もない。 ※FlashPlayerは常に最新版が自動でダウンロードされる。 インターネット環境につながっていないシステムは何らかの考慮が必要になる。

Flexの開発 開発環境 FlexSDK FlexBuilder 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呼出) BlazeDS ①リクエスト SWF ②呼出 ③レスポンス 検索 SearchService#getEmployee 山本さんです 設定ファイル(WEB-INF/flex/remoting-config.xml) getEmployee ＝ SearchServiceクラスのgetEmployeeメソッドです S2BlazeDSは、↑この設定を不要にできる。

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

BlazeDSの通信技術 AMF(Action Message Format)１ 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 AMF(バイナリ通信) SWF BlazeDS S2Container MXML S2Blaze S2Dao or S2JDBC DTO(Java) Action Script DTO(Java) DTO(AS) Service Dao DB

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

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

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

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

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

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