Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@gak_t12(Gaku TASHIRO)

Tableau WDC 2.0 チュートリアルしてみる

Posted at

Tableau WDC 2.0 Tutorial

このトピックは、Get　Startedが完了したことを前提にしている。もしまだやってなかったら、戻って開発環境の整備を行ってください

このチュートリアルが終わったらアメリカの地震情報のデータを取ってきて先週分の表示をすることができるようになるはず。
今回学ぶことは

  • HTMLページの作成
  • コネクターの実装
  • イベントリスナーの追加
  • コネクタのテスト
  • スキーマ定義
  • データの取得
  • TableauでVIZる

もし上のことを全部すっ飛ばしてソースコードを見たい場合は、 Examples/earthquakeUSGS.(js|html) を見ればが、お約束しますが、一からそれを構築すれば、これ以上のことができるはず

注意1：今回作成するearthquakeWDCですが、Examples/earthquakeUSGS とは別名だけどやってることは一緒です
注意2：ブラウザにはTableau内製（QTWebkit）を使っているので、最新のES6な機能は対応していないものもある。WDCを構築する際に、新しい機能を利用したい場合は、polyfill＝「標準となったメソッドが存在しない場合に、自分で供給してしまう方法」を使用する必要があります　
参考：PolyfillとPonyfill

HTMLページの作成

webdataconnectorディレクトリ直下に earthquakeWDC.html を作成する (READMEと同じ階層）

earthquakeWDC.html
<html>

<head>
    <title>USGS Earthquake Feed</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="earthquakeWDC.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">
                <button type="button" id="submitButton" class="btn btn-success" style="margin: 10px;">Get Earthquake Data!</button>
            </div>
        </div>
    </div>
</body>

</html>

headタグ内

  • meta タグでは、キャッシュしません！と宣言
  • bootstrap.min.css, bootstrap.min.jsはデザイン関連（CSS/JSフレームワーク）
  • jueqy.min.jsは、WDCの動き（Ajax）用のライブラリ
  • tableauwdc-2.3.latest.jsはTableauWDCのメインライブラリ
  • earthquakeWDC.js まだ作ってないので、このHTMLを動かすと、エラーでますｗ＞コンソール。　ここでは自作するWDCのJavascriptになります。

bodyタグ内は、シンプルなボタンなどを実装。もし必要なら綺麗に書き換えてね（Bootstrapを使用してるようだ）
このhtmlは、データを取得する前のTableauWDC起動した際に起きるミニブラウザに表示される

#コネクターの実装
では、自作でJavascriptを書いて、WDCを実装しましょう。
ファイル名は、earthquakeWDC.js、earthquakeWDC.htmlと同じ階層に作りましょう

earthquakeWDC.js
(function () {
    var myConnector = tableau.makeConnector();
    myConnector.getSchema = function (schemaCallback) {
      //Do Something
    };
    myConnector.getData = function (table, doneCallback) {
      //Do Something
    };
    tableau.registerConnector(myConnector);
})();
  • 直ちに呼び出される関数式にコードがラップされ、ローカルスコープが作成されます。
  • 2行目tableauオブジェクトはここでは宣言されてないが、tableauwdc-2.3.latest.jsで宣言されてるので使える
  • 2行目：makeConnectorは、コンストラクタ
  • 3行目：getSchema データのスキーマ定義
  • 6行目：getData　実際にデータの取得ロジック
  • 7行目：registerConnector 初期化の前にValidateする・・・らしい

#イベントリスナーの追加
earthquakeWDC.jsで、 「コネクタの実装」でかいたコードの後ろにつける。
イベントリスナーの設定で、こちらのボタンを押したらデータ取り込み関連が起動する
（ボタン無しで取り込むようにもできるが、今回は割愛）

（略）
tableau.registerConnector(myConnector);
})();

$(document).ready(function () {
    $("#submitButton").click(function () {
        tableau.connectionName = "USGS Earthquake Feed";
        tableau.submit();
    });
});
  • $(document).ready jQueryのコード。ページのロード時に読み込まれる
  • イベントは id: submitButton をクリックしたら発火する
  • tableau.connectionName ページ内のボタンの名前
  • tableau.submit データがTableauでValidationされて、問題なければ送られる

#コネクタのテスト
Get Startedでやってると思うけど、Simulator入れてなかったら戻ってやってね

  • ターミナルを開き、webdataconnector のトップレベルへチェンジディレクトリ
  • npm start でテストサーバを起動
  • シミュレータを開く　http://localhost:8888/Simulator/index.html
  • シミュレータのURLに../earthquakeWDC.htmlを入力して、Enter
  • 【ボタン】Start Interactive Phase　をクリック
    • コネクタページが開く
  • Get Earthquake Data!　をクリック
    • コネクタページが閉じる

ここで注意は、エラーが出るかどうか。もしでたら、ブラウザのコンソール（Chromeならデベロッパーツール）を開いて、デバッグしてみてください

追加：ログ出力でデバッグする方法

myConnector.getSchema = function (schemaCallback) {
    tableau.log("Hello WDC!");
};

tableau.logを書けば、ログがコンソールに出るので参考にするべし（ print debugですね　）

#スキーマの定義
スキーマの定義で、データをTableauが取り込む形でどうマッピングするかを定義している

myConnector.getSchema = function (schemaCallback) {
    var cols = [
    {id: "id",  dataType: tableau.dataTypeEnum.string}, 
    {id: "mag", alias: "magnitude", dataType: tableau.dataTypeEnum.float　},
　　　　　　 {id: "title",alias: "title",dataType: tableau.dataTypeEnum.string}, 
　　　　　　　　{id: "location",dataType: tableau.dataTypeEnum.geometry}
　　　　　　　];
    var tableSchema = {
        id: "earthquakeFeed",alias: "Earthquakes with magnitude greater than 4.5 in the last seven days",columns: cols
    };
    schemaCallback([tableSchema]);
};
  • getSchema はschemaCallbackを引数に取る
  • colsは、JavaScriptのオブジェク配列。
    • idは a-z, A-Z, 0-9, _ のみが使える。
  • tableSchema はテーブル名の定義など
    • idは a-z, A-Z, 0-9, _ のみが使える。
  • schemaCallback は、tableSchemaを引数に

データの取得

スキーマの定義ができたら、データを取得して、Tableauに投げつけることができます

myConnector.getData = function(table, doneCallback) {
    $.getJSON("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson", function(resp) {
        var feat = resp.features,tableData = [];

        // Iterate over the JSON object
        for (var i = 0, len = feat.length; i < len; i++) {
            tableData.push({
                "id": feat[i].id,
                "mag": feat[i].properties.mag,
                "title": feat[i].properties.title,
                "location": feat[i].geometry
            });
        }

        table.appendRows(tableData);
        doneCallback();
    });
};
  • getData functionは、2つの引数を取ります。tableとdoneCallback
    • tableは　tableauに送るデータを保持するObject
    • doneCallback はデータ取得が終わったことをTableauに知らせる
  • $.getJSONは、jQueryで地震情報をJSON形式で取得する。で、取得データはrespへ格納される
  • forは繰り返しでtableDataへ格納する
  • table.appendRows(tableData)は、JavascriptオブジェクトのtableDataをtableへ追加する
  • (doneCallback();でデータ取り込みが終わったことを宣言する)
{
"type": "FeatureCollection",
"metadata": {
"generated": 1528424595000,
"url": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson",
"title": "USGS Magnitude 4.5+ Earthquakes, Past Week",
"status": 200,
"api": "1.5.8",
"count": 92
},
"features": [
{
"type": "Feature",
"properties": {
"mag": 4.8,
"place": "40km ESE of Pamandzi, Mayotte",
"time": 1528419406150,
"updated": 1528421334705,

この例では、JSONデータは上記のようになるので、

var feat = resp.features,tableData = [];
``
として、`features`の配列を for でまわす形で、取得し、詰め込んでる

#動かしてみよう
シミュレータで動かして、
- Get Earthquake Data! をクリック
- Fetch Table Data　をクリックしてデータ取得

![alt](http://tableau.github.io/webdataconnector/assets/wdc_sim_earthquake_geodata.png)

となればOK
その後は、TableauでVIZる

![alt](http://tableau.github.io/webdataconnector/assets/wdc_tableau_earthquake_geo_json.png)
2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?