翔泳社 Developer Summit2016 19-A-2 セッションで使用したスライドです。

1. 大規模BIクラウドWebサービスの裏側
～ Waveの内部アーキテクチャとデザイン理念 ～
岡本 充洋
Senior Developer Evangelist, Salesforce.com
mokamoto@salesforce.com

2. Forward-Looking Statements
​Statement under the Private Securities Litigation Reform Act of 1995:
​This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or
if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the
forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any
projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies
or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology
developments and customer contracts or use of our services.
​The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for
our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of
growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed
and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand,
retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history
reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could
affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal yearand in our quarterly
report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC
Filings section of the Investor Information section of our Web site.
​Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may
not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently
available.Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.

3. 自己紹介
​岡本 充洋
​Salesforce.com
Senior Developer Evangelist
​2008年 に入社
§ Salesforceのテクノロジの啓蒙
§ 開発者からの声を R & D へのフィードバック

4. アジェンダ
Waveについて
Wave サーバ
​ ストラクチャ
​ データセット
​ クエリエンジン
Wave UI
​ 開発における理念
​ ノウハウ、プラクティス

5. Waveとは
​インタラクションに特化したビジュアリゼーションツール
5
テキストベース・テクノロジ
スキーマフリー のキーバリュー型ストア
転置インデックス及びデータの圧縮
SAQLクエリ⾔語
Wave UI
データを様々な⾓度から⾼速にクエリを実⾏
圧縮
転置インデックスKey/Value型
データマート
（⽬的、靴）（スポーツ、スキー）（⾊、⾚）….
（⽬的、⽔）（価格、3ドル）

6. Waveの構成要素 - ELT
​データセットのデザイン、作成
• Salesforceデータ
• CSVデータのアップロード
• データAPIによる外部連携
スケジュールによるデータ自動同期
• ワークフローの設定、管理

7. Waveの構成要素 - エキスプローラ
​アドホックなデータの分析
• Lens（クエリ + ビジュアリゼーション）
• Measure（指標）
• Dimension（カテゴリ）
• 絞り込み、グループ
• チャートの選択

8. Waveの構成要素 -ダッシュボード
​ダッシュボードビルダーで作成、共有
• 多様なWidgetサポート
​インタラクティブなダッシュボード
• Selector Widgetによる
クエリ、チャートの自動更新

9. Salesforce.comのサービス群とデータセンター
B2C
Marketing Automation
SMB
Service & Support
B2B
Marketing Automation
Development Platform
Stream ProcessSFA Service & Support
Customize Platform Analytics

10. Wave サービス (Super POD)
Queue(Redis) Workerサービス
Wave アーキテクチャ
Salesforce Core(POD)
Appサーバ
Force.com DB
(RDB)
Query
Queue
ELT
Worker
Query
Worker
クライアント
（Web）
• SPA
• HTML、JS、CSSを
初回にロード
• データ、クエリは
API経由
Data center
スケジューラ
CMS
FIieForce
(ファイルシステム)
Control
Library
リソース
マネージャ
ELT
Queue
Query ResultQuery ResultQuery Result
ELT
Worker
ELT
Worker
Query
Worker
Query
Worker

11. Wave サービス (Super POD)
Queue(Redis) Workerサービス
Wave アーキテクチャ
​データ・セット作成の場合
Salesforce Core(POD)
Appサーバ
Force.com DB
(RDB)
Query
Queue
クライアント
（Web）
• SPA
• HTML、JS、CSSを
初回にロード
• データ、クエリは
API経由
Data center
スケジューラ
CMS
FileForce
(ファイルシステム)
Control
Library
リソース
マネージャ
ELT
Queue
Query ResultQuery ResultQuery Result
ELT
Worker
Query
Worker
ELT
Worker
ELT
Worker
Query
Worker
Query
Worker

12. Wave サービス (Super POD)
Queue(Redis) Workerサービス
Wave アーキテクチャ
​Query実行の場合
Salesforce Core(POD)
Appサーバ
Force.com DB
(RDB)
Query
Queue
クライアント
（Web）
• SPA
• HTML、JS、CSSを
初回にロード
• データ、クエリは
API経由
Data center
スケジューラ
CMS
FileForce
(ファイルシステム)
Control
Library
リソース
マネージャ
ELT
Queue
Query ResultQuery ResultQuery Result
ELT
Worker
Query
Worker
ELT
Worker
ELT
Worker
Query
Worker
Query
Worker

13. Waveのデータセット
アドホックなデータ分析のために最適化されたファイルセット
​転置インデックス(Inverted Index)
​コンプレッションによりファイルサイズも最小限に
​スケーラブル

14. 転置インデックス (Inverted Index)
​3つのドキュメント
​{0} – “Turtles love pizza”
​{1} – “I love my turtles”
​{2} – “My pizza is good”
テキスト ドキュメントID
“turtles” {0, 1}
“love” {0, 1}
“pizza” {0, 2}
“i” {1}
“my” {1, 2}
“is” {2}
“good” {2}
​検索キーワード: “my turtles”
“turtles” {0, 1}
“my” {1, 2})
INTERSECT({0, 1},{1,2}) = {1}

15. Row ID Carrier Origin Destination Miles Duration
1 AA SFO ORD 1200 4
2 AA SFO PHX 350 4
3 WN ORG SFO 1200 4
4 WN LAX ATL 1500 5
5 UA DFW SEA 1500 5
6 UA BOS LAX 1500 6
7 UA JFK SFO 1600 6
8 UA SFO ORD 1200 4
9 AA JFK ORD 1100 5
10 DL JFK ORD 1100 5
例 : 飛行機のフライトと飛行距離

16. Row ID Carrier Origin Destinat
ion
Miles Duration
1 AA SFO ORD 1200 4
2 AA SFO PHX 350 4
3 WN ORG SFO 1200 4
4 WN LAX ATL 1500 5
5 UA DFW SEA 1500 5
6 UA BOS LAX 1500 6
7 UA JFK SFO 1600 6
8 UA SFO ORD 1200 5
9 AA JFK ORD 1100 5
10 DL JFK ORD 1100 5
キー = 項目名 : 値
carrier:AA = {1, 2, 9}
dest:SFO = {3, 7}
データセットに転置インデックス作成

17. Key Value
Carrier:AA 1,2,9
Dest:ORD 1,8,9,10
Carrier:WN 3,4
Carrier:UA 5,6,7,8
Carrier:DL 10
Origin:SFO 1,2,8
etc.
データセットに転置インデックス作成
Row ID Carrier Origin Destinat
ion
Miles Duration
1 AA SFO ORD 1200 4
2 AA SFO PHX 350 4
3 WN ORG SFO 1200 4
4 WN LAX ATL 1500 5
5 UA DFW SEA 1500 5
6 UA BOS LAX 1500 6
7 UA JFK SFO 1600 6
8 UA SFO ORD 1200 5
9 AA JFK ORD 1100 5
10 DL JFK ORD 1100 5

18. Row ID Carrier Origin Destinat
ion
Miles Duration
1 AA SFO ORD 1200 4
2 AA SFO PHX 350 4
3 WN ORG SFO 1200 4
4 WN LAX ATL 1500 5
5 UA DFW SEA 1500 5
6 UA BOS LAX 1500 6
7 UA JFK SFO 1600 6
8 UA SFO ORD 1200 5
9 AA JFK ORD 1100 5
10 DL JFK ORD 1100 5
SELECT sum(Miles)
FROM Airline
WHERE ‘Origin’ = “SFO”
AND Destination’ = “ORD”
リレーショナル・データベースの場合
SFOからORDまでの全フライトのマイルの合計は？

19. Row ID Carrier Origin Destinat
ion
Miles Duration
1 AA SFO ORD 1200 4
2 AA SFO PHX 350 4
3 WN ORG SFO 1200 4
4 WN LAX ATL 1500 5
5 UA DFW SEA 1500 5
6 UA BOS LAX 1500 6
7 UA JFK SFO 1600 6
8 UA SFO ORD 1200 5
9 AA JFK ORD 1100 5
10 DL JFK ORD 1100 5
Key Value
Carrier:AA 1,2,9
Dest:ORD 1,8,9,10
Carrier:W
N
3,4
Carrier:UA 5,6,7,8
Carrier:DL 10
Origin:SFO 1,2,8
etc.
Miles
1200
350
1200
1500
1500
1500
1600
1200
1100
1100
転置インデックス + Measure
SFOからORDまでの全フライトのマイルの合計は？

20. Origin:SFO = {1,2,8}
Dest:ORD = {1,8,9,10}
SFOからORDまでの合計マイル数は？
{1,2,8} {1,8,9,10} = {1,8}
→ 2 フライト
Σ = 1200 + 1200 = 2400 マイル
Key Value
Carrier:AA 1,2,9
Dest:ORD 1,8,9,10
Carrier:W
N
3,4
Carrier:UA 5,6,7,8
Carrier:DL 10
Origin:SFO 1,2,8
etc.
Miles
1200
350
1200
1500
1500
1500
1600
1200
1100
1100
転置インデックス + Measure
SFOからORDまでの全フライトのマイルの合計は？

21. データセットの圧縮
row carrier origin dest dist
1 AA SFO DFW 1800
2 CO SFO LAX 600
3 AA SFO ORD 1500
4 CO SFO JFK 2000
5 AA SJC DFW 1600
6 CO SJC ORD 1400
7 AA SJC LAX 600
8 CO SJC ONT 600
9 AA LAX ORD 1000
9 – レコード数
carrier:AA {1, 3, 5, 7, 9}
carrier:CO {2, 4, 6, 8}
dest:DFW {1, 5}
dest:LAX {2, 7}
dest:ONT {8}
dest:ORT {3, 6, 9}
9 – レコード数
0 10 carrier:AA 5 9 4 1, 0, 4, 2
8 2 CO 4 8 3 0, 4, 2
0 8 dest:DFW 2 5 2 1, 4
5 3 LAX 2 7 2 2, 5
5 3 ONT 1 8 1 8
6 2 RD 3 9 3 0, 3, 3
Inverted Index 圧縮された Inverted Indexデータ
検索キーワード
Carrier == ‘AA’ && origin == ‘SFO’ && dest in [‘DFW’, ‘LAX’]

22. SAQL
​Waveのデータセットのデータにアクセスする時に使用
​Apache Pig Latinに影響されたクエリ言語
​すべてのレンズ、ダッシュボードがSAQL経由でデータ取得

23. SAQL 例
​q = load "Opportunity";
​q = filter q by 'Stage' != "Closed Won";
​q = group q by ('Stage', 'OpportunityOwner');
​q = foreach q generate 'Stage' as 'Stage', 'OpportunityOwner' as
'OpportunityOwner', sum('Amount') as 'sum_Amount', avg('Amount') as
'avg_Amount';
​q = order q by 'sum_Amount' DESC;
​q = limit q 2000;

24. クエリ・エンジン
SAQLパーサー
（Query Graph）
Optimizer
Query Executor
リソースマネジャー
データセット
（ローカルディスク）
クエリ・エンジン
クライアント
Salesforce Core
Appサーバ
データストア
Wave サービス
Queue
クエリエンジン
リソースマネージャ
Data center

25. データ分析において重要な要素
​データ分析において
​ビジュアリゼーションとインタラクションは
必要不可欠な要素
Ø 可視化の表現力と速度
Ø データの柔軟性
データ
分析
比較
絞込み
集計
並替え
ズーム
イン・
アウト
ハイラ
イト
ブック
マーキ
ング

26. Wave UIクライアント

27. Wave UIにおける重要な理念
モジュラーな
コードベース
再利用可能な
コンポーネント
プロダクト
アグノスティック
ビジュアリゼー
ションの最適化

28. Wave UIにおける重要な理念
モジュラーな
コードベース
再利用可能な
コンポーネント
プロダクト
アグノスティック
ビジュアリゼー
ションの最適化

29. 再利用可能なコンポーネントを基礎にしたUI開発
​再利用可能なUIコンポーネントの設計・実装、それらコンポーネントを組み合わせてUIを開発
​再利用可能なUIコンポーネントとは
• UI Viewの一部を生成
• 例えば、ボタン、フォームフィールド、レイアウトコンポーネント、パネルビュー、モーダル…
• コンポーネントの動作、内部ステートをカプセル化
• 理想はステートレスなコンポーネント（つまり、コンポーネントは単にViewを生成する関数）
​Build UI with Reusable Components

30. React
​Wave ClientのUI View実装はReactを使用
​Reactとは？
FacebookからオープンソースされたハイパフォーマンスなWeb UIを作
成するためのJavascriptライブラリ

31. Reactを取り入れた理由
​ReactはUIコンポーエントを基礎にUI作成するためのライブラリ
​Reactの一方向データフローとWaveアーキテクチャの相性が良い
​Reactの仮想DOMによるレンダリングの高速化
アセットデータ
クエリ
ビジュアリゼーション

32. <Explorer>
<ControlBar>
<MeasureBar>
<GroupBar>
<Groups>
<Group>
…
<GroupAddButton>
<FilterBar>
<Filters>
<Filter>
…
<FilterAddButton>
<ActionsMenu>
<OptionsMenu>
…
エキスプローラのコンポーネントツリー
MeasureBar GroupBar ActionsMenuFilterBarControlBar
Data Event
再利用可能なコンポーネン
トを基礎に開発

33. Wave Analytics ダッシュボード Salesforce CRMダッシュボード
ダッシュボード グリッドレイアウト
GridLayoutコンポーネント、関連するUtilやサービスを
再利用可能に設計、実装
その結果、Salesforce CRMのダッシュボードにも再利用

34. Wave UIにおける重要な理念
モジュラーな
コードベース
再利用可能な
コンポーネント
プロダクト
アグノスティック
ビジュアリゼー
ションの最適化

35. Wave UI コードベース
​コードベースのモジュール化は必要不可欠
​クライアントアプリケーテョンの開発環境も飛躍的に向上
​Wave UIもそれら開発ツールを使用
Browserify Gulp
Backbone React

36. Wave Client コードベース
​Before
Wave
Client/Common
ETL Explorer Dashboard Éclair
Lightning Dashboard
Wave
Lightning Dashboard

37. Wave Client コードベース
​Now and Future
Wave Common
Wave
ETL Explorer Dashboard Éclair
Query
Builder
Lightning
Lightning Common
Dashboard Reports Home
App
Framewor
k
Finder
Analytics Common

38. Wave UIにおける重要な理念
モジュラーな
コードベース
再利用可能な
コンポーネント
プロダクト
アグノスティック
ビジュアリゼー
ションの最適化

39. プロダクトに依存しないデザイン
​取り組みの一つとして、データサービスオブジェクトのリファクタリング
​データサービスの主な役割
• 必要なデータセットメタデータのロード（API）
• クエリメタデータからSAQLクエリの生成
• SAQLクエリの実行
• クエリ実行後のリスナーへの通知
• クエリエラーの際のハンドリング
データサービス
データセットのロード
SAQLクエリ生成
クエリ実行
リスナーへの通知

40. データサービスオブジェクトのリファクタリング
​依存するサービスをデータオブジェクトから切り離す
​実行時に生成するDependencyを決定（ファクトリーメソッドなど）
​共通のインタフェースを定義
• 実行時に供給するクラスはインタフェースを実装
データサービス
データセットのロード
SAQLクエリ生成
クエリ実行
リスナーへの通知
ファクトリ・メソッド
SAQLBuilder
SOQLBuilder
他のクエリ言語（SQL）
API エンドポイント
を実行時に決定

41. Wave UIにおける重要な理念
モジュラーな
コードベース
再利用可能な
コンポーネント
プロダクト
アグノスティック
ビジュアリゼー
ションの最適化

42. Wave Lightning Wave Mobile
ÉclairNG
​Javascriptベースのチャートライブラリ
​プロダクト、プラットフォームに依存しない
​Wave, Lightning Reporting & Dashboard, Wave Mobileで使用

43. ÉclairNG スタック
Chart Script
Javascriptによるチャートの定義（設定、インタラクションの定義）
Utils、プリパッケージチャート
Scene Graph API
(Layout Management, Scrolling, Tweening, Scaling..)
Renderer API (Common Interface)
Desktop (HTML5 Canvas) iOS (Open GL ES)

44. ビジュアリゼーションの流れ in Wave
アセットデータのロード（API）
ChartWidget 生成
Lens StateからSAQLクエリ生成
SAQLクエリ実行
CanvasController 生成
クエリ結果からViz Model生成
チャートの表示（Éclair）
Lens State
ChartWidget
Data Service
CanvasController
Viz Model
Éclair
WaveUI
Lens API Endpoint Query API Endpoint

45. インタラクション #1
ユーザアクション
（条件、グループ、指標、並び替えの追加、変更、削除）
イベントハンドラーがLens State変更
Lens StateからSAQLクエリ生成
SAQLクエリ実行
CanvasControllerへ通知
クエリ結果からViz Model生成
チャートの表示（Éclair）
​ユーザアクションによるクエリシェープの変更
Lens State
ChartWidget
Data Service
CanvasController
Viz Model
Éclair
WaveUI
Lens API Endpoint Query API Endpoint

46. インタラクション #2
ユーザアクション
（チャートの変更）
イベントハンドラーが 新しいCanvasController生成
クエリ結果からViz Model生成
(クエリ結果を再利用）
チャートの表示（Éclair）
​ユーザインタラクションによるチャートの変更
Lens State
ChartWidget
Data Service
CanvasController
Viz Model
Éclair
WaveUI
Lens API Endpoint Query API Endpoint

47. インタラクション #3
ユーザアクション
（前/次のステートへ、初期ビューへ戻る）
HistoryManagerからLens Stateを取得
Lens StateからSAQLクエリ生成（Dataサービス）
QueryCacheからクエリ結果を取得
CanvasControllerへ通知
クエリ結果からViz Model生成
チャートの表示（Éclair）
​ヒストリー・ナビゲーション
Lens State
ChartWidget
Data Service
CanvasController
Viz Model
Éclair
WaveUI
HistoryManager
QueryCache
（ブラウザメモリ）

48. まとめ
​Waveのアーキテクチャ
Ø 論理構成
Ø データセットの仕組み
Ø SAQL、クエリエンジン
​Wave UI
Ø モジューラなコードベース
Ø 再利用可能なコンポーネントをベースにしたUI開発とその利点
Ø 特定のプロダクトに特化しないデザイン
Ø ビジュアリゼーションとインタラクティブな機能の仕組み
モジュラーな
コードベース
再利用可能な
コンポーネント
プロダクト
アグノスティック
ビジュアリゼー
ションの最適化

49. thank y u