Tableau Desktop 10 新機能 : Web Data Connector 2.0 (WDC 2.0) #tableau

Tableau 10 新機能紹介シリーズ、当エントリは『Web Data Connector 2.0』 ( 以下 WDC 2.0 ) に関する、正式リリース前の先取り内容紹介となります。WDC は Tableau 9.1 から実装された機能ですが、Tableau 10 のリリースにあわせて機能が改善されたので、使用方法とサンプルを紹介します。

• Coming Soon
• Tableau 10 新機能紹介 ｜ シリーズ ｜ Developers.IO

WDC 1.0 に関する記事

以前書いた WDC 記事を併せてご覧いただくことをお薦めいたします。
[Tableau] Web データコネクタ (WDC) 機能を使ってみた

Tableau 公式の WDC 2.0 サンプル

Tableau 公式の GitHub ページに webdataconnector リポジトリがあります。2016 年 6 月現在、dev ブランチが WDC 2.0 の開発ブランチとなっていますので、一式ダウンロードすることでサンプルを動かすことが可能です。
https://github.com/tableau/webdataconnector/tree/dev

WDC 2.0 新機能

• 複数テーブル取得可能に
  ( 1.0 系では単一のテーブルのみ取得できました )
• テーブルおよびデータ情報取得メソッドの新規実装
  ( 1.0 系の WDC コンテンツも下位互換サポートされています )

一見少なく見えるかもしれませんが、かなり強化された印象があります。

WDC 2.0 の構築

SDK の取得

下記のいずれかから入手可能です

• Tableau Web Data Connector
  http://tableau.github.io/webdataconnector/
• API
  https://connectors.tableau.com/libs/tableauwdc-2.0.0-beta.js

WDC 2.0 の初期化

var myWDC = tableau.makeConnector();

1.0 系と変わりません。

スキーマ情報取得 ( 構築 )

複数テーブルの情報をまとめて返す wdc.getSchema(schemaCallback) メソッドが新規に実装されました。引数の schemaCallback コールバック関数を実行することで処理の完了となるため、非同期処理を交えた構築処理にも柔軟に対応できます。従来の wdc.getColumnHeaders(), tableau.headersCallback() メソッドよりも直観的な実装で分り易いですね。

myWDC.getSchema = function(schemaCallback) {
  var colsA = [{
    'id'       : 'ticker',
    'alias'    : 'ticker',
    'dataType' : tableau.dataTypeEnum.string
  }, {
  …
  {
    'id'       : 'low',
    'alias'    : 'low',
    'dataType' : tableau.dataTypeEnum.float
  }];

  var colsB = [{
    'id'       : 'ticker',
    'alias'    : 'ticker',
    'dataType' : tableau.dataTypeEnum.string
  }, {
  …
  {
    'id'       : 'low',
    'alias'    : 'low',
    'dataType' : tableau.dataTypeEnum.float
  }];

  var tableInfoA = {
    id      : 'tabaleIdA',
    alias   : 'Table A',
    columns : colsA //NOTE:同一カラム情報を複数テーブルに適用させたい場合、使いまわしはできないので注意 ( 要 deep copy )
  };

  var tableInfoB = {
    id      : 'tabaleIdB',
    alias   : 'Table B',
    columns : colsB //NOTE:同一カラム情報を複数テーブルに適用させたい場合、使いまわしはできないので注意 ( 要 deep copy )
  };

  schemaCallback([tableInfoA, tableInfoB]);
};

データ取得 ( 生成 )

スキーマ情報取得と同様に、複数テーブルのデータをまとめて返す wdc.getData(table, doneCallback) メソッドが新規に実装されました。前述の『 getSchema() メソッドで定義したテーブル数』の回数分実行されて、データ所属元のテーブル ( スキーマ情報に紐づくテーブル ) オブジェクトである table と、データ生成の完了の役割をもつ doneCallback コールバック関数が引数として渡されます。テーブルオブジェクトに関連するデータは table.appendRows() メソッドで追加します。これらに関しても、従来の wdc.getTableData(), tableau.dataCallback() メソッドよりも直観的な実装で分り易くなっています。

myWDC.getData = function(table, doneCallback) {
  var tableData = [];
  $.ajax({
    'url' : connectionUri,
    'dataType' : 'json'
  })
  .done(function (result) {
    $.each(result, function(i, q) {
      tableData.push({
        'ticker': result[i].Symbol,
        …
        'low'   : result[i].Low
      });
    });
    table.appendRows(tableData); //NOTE:テーブルデータ付与
    doneCallback();
  });
};

WDC 2.0 登録

var myWDC = tableau.registerConnector(myWDC);

これも 1.0 系と変わりません。

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

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

tableau.connectionData プロパティが不要になりました。( 1.0 からの移行時に、残しておくとクラッシュするので要注意です )

WDC 2.0 サンプル

1.0 系の記事を書いたときに作成したサンプルを改造して、Amazon と Google の株価情報を Yahoo! Finance API 経由で取得する WDC サンプルを用意しました。

以前のサンプルでは、押下したボタンの銘柄を 1 つだけ選択することができましたが、今回のサンプルではまとめて 2 つの情報を返します。

具体的なコードは下記をご確認ください。

Tableau Desktop から WDC 2.0 サンプルに接続

1.0 系と手順は同じです。

サンプルをブラウザで開く

画面に表示される URL をクリップボードにコピーしてください。
https://embed.plnkr.co/TbjSHw/

Tableau 10 を起動して [接続] -> [Web データコネクタ] を開く

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

AMZN & GOOGL ボタンを押してデータソースを抽出

抽出完了

Tableau Desktop 10 では、取得したデータが閲覧できるようになりました。また、「表」欄に取得したテーブルが 2 つ表示されていることも確認できます。

まとめ

Tableau WDC 2.0 についてまとめました。機能面、実装面、どちらに関しても従来バージョンに比べて強化されたことが分ります。あとは、この機能を利用してどのように各テーブル、各ビューを料理するか…でしょうか。