やったこと

Tableauの豊富にある外部データ連携のうちの1つ、Webデータコネクタ(WDC)を試してみました。

基本的にチュートリアルの通りに進めています。

構成

・Tableau Desktop
・HTMLファイル1つ
・通信用JavaScriptファイル1つ
・データ返却用API（別途用意）

※WDCのAuthenticationは利用せず、自社APIの認証機構を利用しました。

HTMLファイル

ほぼサンプルの通りですが、WDC用データを動的に作成できるようパラメータを3つ用意しています。

index.html

<html>

<head>
    <title>VALUES Data Connect Sample</title>
    <meta http-equiv="Cache-Control" content="no-store" />

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" crossorigin="anonymous"></script>

    <script src="https://connectors.tableau.com/libs/tableauwdc-2.3.latest.js" type="text/javascript"></script>
    <script src="values_wdc.js" type="text/javascript"></script>
</head>

<body>
    <div class="container container-table">
        <div class="row vertical-center-row">
            <div class="text-center col-md-4 col-md-offset-4">
                prease input your API Key:<input type="text" id="apikey" value=""><br>
                param1:<input type="text" id="param1" value="xxxxxx"><br>
                param2:<input type="text" id="param2" value="xxxxxxxxxxxxx"><br>
                param3:<input type="text" id="param3" value="xxx"><br>
                <button type="button" id="submitButton" class="btn btn-success" style="margin: 10px;">Get VALUES Data!</button>
                <br>


            </div>
        </div>
    </div>
</body>

</html>

通信用JavaScriptファイル

こちらもサンプルを参考に、取得したデータを配列にpushしていけば良いだけなので簡単です。
APIの都合上、application/jsonでPOSTで、リクエストヘッダの追加などが必要なのでサンプルとは異なります。

なおtableau.connectionNameが接続名、tableSchema.aliasが表の名前になります。
今回のようにフォームデータを連携する場合、後述のように読み込み時に

tableau.connectionData
という風にしてデータを連携する必要があります。

values_wdc.js

    var myConnector = tableau.makeConnector();

    myConnector.getSchema = function (schemaCallback) {
    var cols = [
//割愛
        ];

    var tableSchema = {
        id: "test_table",
        alias: "xxxxxxxxxxxx",
        columns: cols
    };

    schemaCallback([tableSchema]);
    };

    myConnector.getData = function (table, doneCallback) {
        var args = JSON.parse(tableau.connectionData);
        str_param1 = args.param1;
        str_param2 = args.param2;
        str_param3 = args.param3;
        str_apikey = args.apikey;

        rdata = {param1:str_param1,param2:str_param2, param3:str_param3}
        $.ajax({
            beforeSend: function(request) {
                request.setRequestHeader("Content-Type", 'application/json');
                request.setRequestHeader("API-KEY", str_apikey);
            },
            contentType: 'application/json',
            type:'POST',
            dataType: "json",
            data:JSON.stringify(rdata),
            url: '/xxxxxxx/wdctestapi',
            success: function(resp) {
                //Your code
                var feat = resp.result,
                    tableData = [];

                // Iterate over the JSON object
                for (var i = 0, len = feat.length; i < len; i++) {
                    tableData.push({
// 割愛
                    });
                }

                table.appendRows(tableData);
                doneCallback();

            }
        });
    };

    tableau.registerConnector(myConnector);


})();


$(document).ready(function () {

    $("#submitButton").click(function () {
        var param1 = document.getElementById('param1').value;
        var param2 = document.getElementById('param2').value;
        var param3 = document.getElementById('param3').value;
        var apikey = document.getElementById('apikey').value;
        tableau.connectionData = JSON.stringify({ param1: param1, param2: param2, param3: param3, apikey: apikey });

        tableau.connectionName = "VALUES DataConnect Test";
        tableau.submit();

    });

});

Tableau Desktopからの接続

こちらも簡単で、データソースから「Webデータコネクタ」を選択して、WEBサーバに置いた上述のHTMLファイルを指定するだけです。すると以下の画像のようなブラウザが立ち上がり、ボタンを押すことで他のデータソース同様にデータを取り込むことが出来ました。

1回こうしてHTMLが挟まるため、自由度や拡張性が高くなり、今回はパラメータで指定した項目により、返却されるデータが動的に変わる感じにしています。

以上、簡単にTableauに自社データを取り込めることを確認しました。

所感

getSchemaでデータを定義し、getDataでデータを取得するという、非常に簡単な流れで構築できるのが印象的でした。元データがWeb経由から来るのは、やはりかなりイケている感があります。

一方、WDC経由で次々とデータセットを追加してUNIONしていく・・・ということを考えたのですが現時点ではUnionには対応していないように見えます。これが出来たらもっとTableauとWebが繋がるな～と思うので淡く期待しています。