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

[Tableau WDC 2.0 Tutorial](http://tableau.github.io/webdataconnector/docs/wdc_tutorial)

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

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

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

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

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

# HTMLページの作成
`webdataconnector`ディレクトリ直下に `earthquakeWDC.html` を作成する (`README`と同じ階層）

```html: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`と同じ階層に作りましょう

```javascript: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`で、 「コネクタの実装」でかいたコードの後ろにつける。
イベントリスナーの設定で、こちらのボタンを押したらデータ取り込み関連が起動する
（ボタン無しで取り込むようにもできるが、今回は割愛）

```earthquakeWDC
（略）
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)