Ext js 20100526

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

Shinichi Tomita
stomita@mashmatrix.com
twitter.com/stomita

アジェンダ

• 「mashmatrix Dashboard」のご紹介
• エンタープライズでの事例・ユースケースなど
• 内部アーキテクチャ

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

Mashmatrix Dashboard ご紹介

3

企業情報マッシュアップダッシュボード
「mashmatrix Dashboard」
クラウドサービス企業内情報システム

生産性の向上データ統合

視覚化集約

分析パーソナライズ

4

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

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

取引先に関連する
商談の情報
最新ニュース検索
取引先の地図

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

快適な操作感と柔軟なカスタマイズ性
ダイナミックなーコンポーネント連動

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

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

表示選択絞り込み集計並べ替え

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

6

快適な操作感と柔軟なカスタマイズ性
インライン編集機能

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

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

Drag

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

7

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

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

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

8

利用事例・ユースケース

9

職種別ダッシュボードソリューション
経営層・マネジャーコールセンター・オペレーター

1箇所に統合されたビューからすべての企業活動を可視化分散した顧客情報データベースをまたがって、情報を紐づ
して把握。全社規模の大局的な視野から個々の活動状況けて管理。目的情報への到達までのトータル時間を短縮し
の詳細まで、自由に視点を往復することが可能。、単位時間当たりのコール処理数を改善。

営業担当者マーケティング担当者

日々の営業活動に必要となる情報を社内社外から1箇所販売データや在庫情報と外部メディアからの情報をダッシ
に集約して表示。営業活動のレポート作成や商談情報のュボード上で突き合わせ、タイミング良くキャンペーン情報
10
一括更新なども含めた営業業務のコンソールとして活用。をソーシャルメディアにメッセージアウトしリードを獲得。

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

商品情報によるキーワード検索結果
営業活動

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

注文・在庫

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

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


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

従業員

商品情報ケース（問い合わせ）
アイディア管理ソリューション（FAQ）

パーソナライゼーション即時データ閲覧
ブランディングフィードバック入力
セルフサービス分析・グラフ化

顧客

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

内部実装に関する情報

13

アーキテクチャ

• クライアントサイド
• Ext JS 2.1で構築されたリッチUI （3.0に移行検討中）
• マッシュアップロジックはすべてクライアントサイド（Webブラ
ウザ上）で実行
• Afrous マッシュアップエンジン

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

14

システムアーキテクチャ図
Metadata Connect
Service Service

Dynamic
Download Cloud Services

Widget Data Source
#1 #1
Widget Data Source Adapter
Dashboard
#2 #2
Widget Data Source Adapter
#3 #3

JavaScript Runtime Local Resources

Web Browser
(IE/Firefox/Chrome/Safari)
15

特徴

• ウィジットは「表示」のみを担当。データアクセス部分はデータ
ソースとして分離されている
例：
• 「グリッド」ウィジットが、Googleスプレッドシートの表示やデ
ータベースクエリの結果表示の双方に利用できる
• 「画像タイル」ウィジットが、Google画像検索結果の表示や
楽天商品検索結果表示の双方に利用できる

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

16

データ構造

• JSON形式でダッシュボードレイアウト・ウィジット設定を
それぞれ「メタデータ」としてサーバサイドに保存
• JSONは、Ext JSのコンポーネント構造そのものではなく、独自
• 起動時にJSONデータを読み込み、動的にコンポーネントを
レンダリング開始

• ウィジット設定はそれぞれ他のウィジットの値を参照し
て設定値として利用可能
• データ参照を表す特殊記法を使用（ ${…} ）
• 参照データが更新された場合、自動的にウィジットも更新

17

データ構造の例
ダッシュボードウィジット
{ {
"name": "テスト0331", "wtype": "grid",
"key": "a0V10000000Aqz6EAC", "title": “Test Grid",
"name": "w3",
"layout": "1column",
"storeType": "datasource",
"regions": [{
"datasource": { ... },
"widgets": [{ "columns": [{
"wtype": "grid", "header": "日付",
... "value": "${Date}",
}, { ...
"wtype": "fc-chart", }, {
.... ...
}, }],
"filterMode": "AND",
}, {
"filters": [{
"widgets": [{
"property": “Amount",
... “operation”: “<",
}] "value": “${w1_click.num}"
}], }, {
"published": false ...
} }],
18 "published": false
}

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

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

• 仕組上、データが外部に漏れることがないため、クラウドに
おけるデータセキュリティの懸念から解放
• 各データソースにアダプタが設置され、通信はWebブラウザと
アダプタとの間で直接行われる。
• Webブラウザ上でのクライアントサイド・クロスドメイン接続
技術を活用

19

ローカルデータソースとの通信
dashboard.mashmatrix.net datasource.mycompany.org
(Internet) (Intranet)

! Local Resource

JDBC/ODBC/SOAP etc.

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

HTTP(S),
XMLHttpRequest
Dashboard
IFRAME-based
Data Cross-Domain Messaging Cross-Domain
Source Proxy HTML

Web Browser (IE/Firefox/Chrome/Safari)
20

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
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 : [ … ]
}); 22

Ext JS TreePanelに関するTips

• AsyncTreeNodeの場合、Ext.tree.TreeLoaderでノードデータをロ
ードする
• TreeLoaderはURLでの呼び出しに強く依存している！
• しかも戻り値のフォーマットもTreeLoader側が規定

• サーバインターフェースが固定の時はどうするか？はたま
たサーバ以外がデータソースの場合は？
• 自分で非同期でデータを取った後、（Asyncでない）TreeNodeで
同期的にツリー構築しますか？ 面倒、やってられない
 非同期呼び出しに抽象化した AsyncLoader を定義

23

AsyncLoader
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()
});
24

AsyncProxy/AsyncLoaderの実装について

• 昔ブログに書いた（2.1ベース)
• http://d.hatena.ne.jp/shinichitomita/20081011/1223735817
• 3.xではちょっと実装を変える必要あると思う

25

まとめ

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

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

• 異なるインターフェースの解決をサーバで行おうとすると、サー
バ依存が大きくなり、信頼性・スケーラビリティが損なわれる
• Ext JS はクライアント側からサーバインターフェースを規定して
るところが多いが、大部分はクライアントサイドでも吸収でき、
クライアントで対応したほうがよりスケーラブルになる（中間ノ
ードを排除できる）

26

Ext js 20100526

More Related Content

Similar to Ext js 20100526 (20)

More from Shinichi Tomita (20)

Ext js 20100526