[Tableau] Web データコネクタ (WDC) 機能を使ってみた

車輪開発大好きおたいがです。こんにちは。( 挨拶 )

今回、Tableau 9.1 から実装された Web データコネクタ ( 以後 WDC ) を試してみたので、実際に動かすまでに行った工程をまとめておきます。

WDC とは、Web に接続してデータを抽出するためのコネクタ機能 ( JavaScript コードを含む HTML ファイル ) です。

WDC の構築

Web Data Connector SDK の取得

WDC には専用の JavaScript SDK が用意されており、下記 URL のいずれかから取得することが可能です。

• Web Data Connector SDK - Resources
  http://community.tableau.com/thread/178867
• API
  https://public.tableau.com/javascripts/api/tableauwdc-1.1.0.js

WDC 初期化

var myWDC = tableau.makeConnector();

tableau.makeConnector() メソッド
http://onlinehelp.tableau.com/current/api/wdc/ja-jp/WDC/wdc_ref.htm#tableau_functions_makeConnector

データソースのフィールド情報取得 ( 構築 )

myWDC.getColumnHeaders = function() {
  var fieldNames = ['Field_1', 'Field_2', 'Field_3', 'Field_4', 'Field_5', 'Field_6'];
  var fieldTypes = ['string', 'date', 'float', 'float', 'float', 'float'];
  tableau.headersCallback(fieldNames, fieldTypes);
};

wdc.getColumnHeaders() メソッドでフックして、tableau.headersCallback() メソッドで値を返却します。

wdc.getColumnHeaders() メソッド
http://onlinehelp.tableau.com/current/api/wdc/ja-jp/WDC/wdc_ref.htm#connector_getColumnHeaders

データ取得 ( 生成 )

myWDC.getTableData = function(lastRecordToken) {
  var dataToReturn = [];
  var hasMoreData = false; //データソースにデータがさらに存在するかどうかを示すブール値
  …
  dataToReturn.push({
    'Field_1' : 'hoge',
    'Field_2' : new Date(),
    'Field_3' : 1.234,
    'Field_4' : 1.234,
    'Field_5' : 1.234,
    'Field_6' : 1.234
  });
  …
  tableau.dataCallback(dataToReturn, lastRecordToken, hasMoreData);
};

wdc.getTableData() メソッドでフックして、tableau.dataCallback() メソッドで値を返却します。

wdc.getTableData() メソッド
http://onlinehelp.tableau.com/current/api/wdc/ja-jp/WDC/wdc_ref.htm#connector_getTableData

WDC 登録

tableau.registerConnector(myWDC);

tableau.registerConnector() メソッド
http://onlinehelp.tableau.com/current/api/wdc/ja-jp/WDC/wdc_ref.htm#tableau_functions_registerConnector

データ収集トリガー時の処理

var submitHandler = function() {
  tableau.connectionName = 'Stock Data for ' + dataName;
  tableau.connectionData = dataName;
  tableau.submit();
};

tableau.submit() メソッド
http://onlinehelp.tableau.com/current/api/wdc/ja-jp/WDC/wdc_ref.htm#tableau_functions_submit

WDC サンプル

私たちの業種に馴染みのある米国主要銘柄 (Amazon, Twitter, Google, Apple) の株価情報を Yahoo! Finance API 経由で取得する WDC サンプルを用意しました。

具体的な実装コードはこちらをご確認ください。

Tableau Desktop から WDC 接続

Tableau Desktop から前述のサンプル WDC に 接続して、データソースを抽出します。

[接続] -> [Web データコネクタ] を開く

上記サンプル URL を入力して WDC を展開

任意の銘柄ボタンを押してデータソースを抽出

抽出完了

あとはお好みで可視化してください

さいごに

Tableau Web データコネクタを使用すれば、Web を経由したデータソースの構築が可能なので、簡単に色々なマッシュアップ WDC を作ることができ、可視化・分析がより一層捗りそうな気がしました。