ext js 20100526

事例で学ぶExt JSとクラウドのマッシュアップ

Shinichi [email protected]

twitter.com/stomita

©Copyright 2007-2008 mashmatrix, Inc. All rights reserved.

アジェンダ

• 「mashmatrix Dashboard」のご紹介

• エンタープライズでの事例・ユースケースなど

• 内部アーキテクチャ

2


Mashmatrix Dashboard ご紹介

3


企業情報マッシュアップダッシュボード「mashmatrix Dashboard」

4

企業内情報システムクラウドサービス

生産性の向上

視覚化

パーソナライズ

集約

分析

データ統合


5

取引先の地図

取引先責任者との

電子メール担当している取引先の一覧

取引先に関連する商談の情報

最新ニュース検索

必要なすべての情報を1か所に集約

企業情報マッシュアップダッシュボード「mashmatrix Dashboard」


6

快適な操作感と柔軟なカスタマイズ性

インタラクティブなデータ閲覧設定

並べ替え絞り込み集計

ダイナミックなーコンポーネント連動

表示選択

マウスクリックなどのイベントに応じて、ダッシュボード内の表示を切り替えたり、データを関連付けておいて自動的に表示を更新させることができるため、グラフからドリルダウンで詳細を分析、といったことも簡単に実現できます

マウス操作で表示したいデータ、検索条件、集計条件、ソートなどを指定可能。


7

グリッド表からダブルクリックで直接データを編集できます。レコードの新規作成や削除もその場で行えるため、簡単な業務はすべてダッシュボードの中で完結します。

セルの値をエクセルのようにマウス操作のみでコピー&ペーストすることもできるため、ダッシュボード上でデータの一括更新も容易に行えます。そのうえ、選択したデータをクリップボードにコピーして、エクセル上でさらに加工することも可能です。

快適な操作感と柔軟なカスタマイズ性

インライン編集機能

コピー&ペースト・クリップボード連携機能

Drag


8

クラウド上のWebサービス

企業内情報システム

外部業務システム・Webサービスとの連携

「マッシュアップ」技術により、Webサービス・既存の企業内情報システムと簡単に統合することができます。


利用事例・ユースケース

9


職種別ダッシュボードソリューション

1箇所に統合されたビューからすべての企業活動を可視化

して把握。全社規模の大局的な視野から個々の活動状況の詳細まで、自由に視点を往復することが可能。

10

経営層・マネジャー

分散した顧客情報データベースをまたがって、情報を紐づけて管理。目的情報への到達までのトータル時間を短縮し、単位時間当たりのコール処理数を改善。

コールセンター・オペレーター

販売データや在庫情報と外部メディアからの情報をダッシュボード上で突き合わせ、タイミング良くキャンペーン情報をソーシャルメディアにメッセージアウトしリードを獲得。

マーケティング担当者

日々の営業活動に必要となる情報を社内社外から1箇所

に集約して表示。営業活動のレポート作成や商談情報の一括更新なども含めた営業業務のコンソールとして活用。

営業担当者


ソーシャルメディアとの連携

11

自社の営業活動や注文・在庫のリアルタイムの情報をもとに適切なタイミングでのソーシャルメディアへの情報開示が実現可能になります

商品情報によるキーワード検索結果

キャンペーン情報のメッセージアウト

注文・在庫

営業活動

商品情報

ソーシャルメディアの活動ストリームの中から、自社商品・業務に関連する情報発信者を抽出。選択してランク付け。よりスムーズなソーシャルメディアとの対話を実現します


カスタマーポータルによる顧客との対話

12

即時データ閲覧フィードバック入力分析・グラフ化

パーソナライゼーションブランディングセルフサービス

顧客

商品情報アイディア管理

ケース（問い合わせ）ソリューション（FAQ）

従業員

顧客専用のポータル画面に、リアルタイムおよび分析結果情報をまとめて提示。顧客への情報開示・情報収集を効果的に実施


内部実装に関する情報

13


アーキテクチャ

• クライアントサイド

• Ext JS 2.1で構築されたリッチUI （3.0に移行検討中）

• マッシュアップロジックはすべてクライアントサイド（Webブラウザ上）で実行

• Afrousマッシュアップエンジン

• サーバサイド

• Force.com、Google App EngineなどのPaaSクラウドに直接接続し、データを保存。利用者はサーバセットアップ必要なし

• OAuth Proxy機能（実装中）

14


システムアーキテクチャ図

15

Web Browser

(IE/Firefox/Chrome/Safari)

JavaScript Runtime

Metadata

Service

Dashboard

Widget

#1

Widget

#2

Widget

#3

Data Source

#1

Data Source

#2

Data Source

#3

Connect

Service

Adapter

Adapter

Dynamic

DownloadCloud Services

Local Resources


特徴

• ウィジットは「表示」のみを担当。データアクセス部分はデータソースとして分離されている

例：

• 「グリッド」ウィジットが、Googleスプレッドシートの表示やデータベースクエリの結果表示の双方に利用できる

• 「画像タイル」ウィジットが、Google画像検索結果の表示や楽天商品検索結果表示の双方に利用できる

• 取得されたデータと表示の結びつけは画面上で設定（コーディング不要）

16


データ構造

• JSON形式でダッシュボードレイアウト・ウィジット設定をそれぞれ「メタデータ」としてサーバサイドに保存

• JSONは、Ext JSのコンポーネント構造そのものではなく、独自

• 起動時にJSONデータを読み込み、動的にコンポーネントをレンダリング開始

• ウィジット設定はそれぞれ他のウィジットの値を参照して設定値として利用可能

• データ参照を表す特殊記法を使用（ ${…} ）

• 参照データが更新された場合、自動的にウィジットも更新

17


データ構造の例

18

{

"name": "テスト0331",

"key": "a0V10000000Aqz6EAC",

"layout": "1column",

"regions": [{

"widgets": [{

"wtype": "grid",

...

}, {

"wtype": "fc-chart",

....

},

}, {

"widgets": [{

...

}]

}],

"published": false

}

{

"wtype": "grid",

"title": “Test Grid",

"name": "w3",

"storeType": "datasource",

"datasource": { ... },

"columns": [{

"header": "日付",

"value": "${Date}",

...

}, {

...

}],

"filterMode": "AND",

"filters": [{

"property": “Amount",

“operation”: “<",

"value": “${w1_click.num}"

}, {

...

}],

"published": false

}

ダッシュボードウィジット


ローカルネットワークへの接続

• ファイアーウォール内のローカルネットワークに配置されているデータに対しては、クラウドを介することなくローカルネットワークの中のみで通信を行う。

• 仕組上、データが外部に漏れることがないため、クラウドにおけるデータセキュリティの懸念から解放

• 各データソースにアダプタが設置され、通信はWebブラウザとアダプタとの間で直接行われる。

• Webブラウザ上でのクライアントサイド・クロスドメイン接続技術を活用

19


ローカルデータソースとの通信

20

Dashboard

Data

Source

Cross-Domain

Proxy HTML

Protocol

Adapter

IFRAME-based

Cross-Domain Messaging

HTTP(S),

XMLHttpRequest

JDBC/ODBC/SOAP etc.

Local Resource

datasource.mycompany.org

(Intranet)

dashboard.mashmatrix.net

(Internet)

Firewall

!

ファイアーウォールの外部にデータは出ない

Web Browser (IE/Firefox/Chrome/Safari)


Ext JS DataStoreに関するTips

• Ext.data.DataStoreはDataProxy（HttpProxy, MemoryProxy, ScriptTagProxy）を利用してデータをフェッチ

• HttpProxy、ScriptTagProxyは、接続先がRESTful Callインターフェースであることに依存している

• サーバサイドのインターフェースに手を入れられない場合あり。わざわざプロキシサーバを置きたくない

• 例：JSのToolkitを介してAPIアクセスするようなデータソース（Gdata JavaScript,Salesforce Ajax Toolkit, Twitter @Anywhere）

• 自分で非同期でデータを取った後、同期的にStoreに対してデータロードさせる？面倒、あまりかっこよくない

非同期呼び出しに抽象化したAsyncProxyを定義

21


AsyncProxy

22

var MyAsyncProxy = Ext.extend(AsyncProxy, {

doAsyncRequest : function(params, callback) {

// ここに任意の非同期データ取得処理を記述

// callbackで値を返却

}

});

new Ext.grid.GridPanel({

renderTo : Ext.getBody(),

width : 300, height : 100,

store : new Ext.data.Store({

proxy : new MyAsyncProxy(),

reader : new Ext.data.ArrayReader({

fields : ['Id','FirstName','LastName']

})

}),

columns : [ … ]

});


Ext JS TreePanelに関するTips

• AsyncTreeNodeの場合、Ext.tree.TreeLoaderでノードデータをロードする

• TreeLoaderはURLでの呼び出しに強く依存している！

• しかも戻り値のフォーマットもTreeLoader側が規定

• サーバインターフェースが固定の時はどうするか？はたまたサーバ以外がデータソースの場合は？

• 自分で非同期でデータを取った後、（Asyncでない）TreeNodeで同期的にツリー構築しますか？面倒、やってられない

非同期呼び出しに抽象化した AsyncLoaderを定義

23


AsyncLoader

24

var MyTreeLoader = Ext.extend(AsyncLoader, {

doAsyncLoad : function(node, callback) {

// ここに任意の非同期データ取得処理を記述

// callbackで子ノードのconfigの配列を返却

}

});

new Ext.tree.TreePanel({

renderTo : Ext.getBody(),

width : 100, height : 200,

autoScroll : true,

root : new Ext.tree.AsyncTreeNode({

text : 'node1',

value : 1

}),

loader : new MyTreeLoader()

});


AsyncProxy/AsyncLoaderの実装について

• 昔ブログに書いた（2.1ベース)

• http://d.hatena.ne.jp/shinichitomita/20081011/1223735817

• 3.xではちょっと実装を変える必要あると思う

25


まとめ

• マッシュアップサービスによって、クラウドサービスをユーザ主導で簡単につなげることが可能になる

• クラウドサービス側のインターフェースはまちまち。マッシュアップサービスが吸収してあげる必要がある。

• 異なるインターフェースの解決をサーバで行おうとすると、サーバ依存が大きくなり、信頼性・スケーラビリティが損なわれる

• Ext JSはクライアント側からサーバインターフェースを規定して

るところが多いが、大部分はクライアントサイドでも吸収でき、クライアントで対応したほうがよりスケーラブルになる（中間ノードを排除できる）

26

ext js 20100526

Documents