More Related Content
Similar to Tableau Developers Club - Web Data Connector Deep Dive (20)
Tableau Developers Club - Web Data Connector Deep Dive
- 4. Web Data ConnectorはWebサーバからサーブされる必
要があります
該当のhtml/jsファイルを直接ブラウザにドラッグアンドドロップしても、動作しません
必ず”http://”またはhttps://スキームでアクセスする必要があります
前回使ったwebrick.exeや”python –mSimpleHTTPServer”など、簡易的な方
法でOK
もちろん、別の(用途)のWebサーバにおいておくことも可
- 5. Web Data Connectorは、なぜ「子ブラウザ」を開くのか
TableauがWDC拡張として読み込むコードが安全かどうかは一概にはわからない
「子ブラウザ」を開く理由は、そのURL欄で提供されているJavaScriptリソースを、
httpサーバのホスト名や、httpsの証明書で確認するため
ポップアップした「子ブラウザ」上で「接続」ボタンを押すことは、ユーザーがそのWDC
コードの実行を許可することと同義
- 7. Web Data Connector 読み込みHTMLの骨格
<html>
<meta http-equiv="Cache-Control" content="no-store" />
<head>
<title>WDC for WORLD BANK indicator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
type="text/javascript"></script>
<script src="https://connectors.tableau.com/libs/tableauwdc-2.1latest.js"
type="text/javascript"></script>
<script src=“wb_wdc.js" type="text/javascript"></script>
</head>
<body>
<br>
<button type="button" id="submitButton">Get Stock Data</button>
</body>
</html>
Wdc.js読み込み
自作JS読み込み
トリガー
- 8. Web Data Connector 登録JavaScriptの骨格
(function () {
var myConnector = tableau.makeConnector();
myConnector.getSchema = function (schemaCallback) {
var tableInfo = {
...省略 //スキーマ定義JSON
};
schemaCallback([tableInfo]);
};
myConnector.getData = function(table, doneCallback) {
$.getJSON("http://apiserver.com/NY.GDP.MKTP.CD?format=json", function(resp) {
var tableData = [];
...省略 //取得データをループで回して
tableData.push(//アイテムごとにJSON化しtableDataへプッシュ//);
}
table.appendRows(tableData);
doneCallback();
});
};
tableau.registerConnector(myConnector);
})();
$(document).ready(function () {
$("#submitButton").click(function () {
tableau.submit();
});
});
tableauオブジェクトイ
ンスタンス作成
スキーマデータ定義
実データ取得
tableData配列に格納
コネクタ登録
トリガー->コネクタ
submit
- 11. JSONデータの表現
配列 (Array)
文字列や数値などを並置したもの
角カッコ、スクエアブラケット内に、要素をカンマ区切りで並置
例 [“リンゴ”, “バナナ”, 34, 400]
連想配列 (Hash, Dictionary)
キーとその値のペアの集合
波カッコ、カーリーブラケット内に、「”キー1”: 値1, “キー2”:値2, ….」の形式で表現
例: {"郵便番号":"915-0023","県名":"福井県"}
配列と連想配列はそれぞれがそれぞれの要素として持つことができる
例： [{"郵便番号":"915-0023","県名":"福井県"}, {"郵便番号":"196-0002","県名":"東京都"}]
- 12. JSONデータの操作
配列の要素にアクセス
要素番号を[n]としてアクセス(インデックスは0から開始)
ary = [“リンゴ”, “バナナ”, 34, 400]
ary[1] // -> バナナ
連想配列 の要素にアクセス
要素の値は[キー]としてアクセス
hash = {"郵便番号":"915-0023","県名":"福井県"}
hash[“郵便番号”] // -> “915-0023”
複合データへのアクセス
data = [{"郵便番号":"915-0023","県名":"福井県"}, {"郵便番号":"196-0002","県名":"東京
都"}]
data[1][“県名”] // -> “東京都”
- 13. 次回予告
日時:第2回 6月7日(木) 19:00 受付開始
場所: Tableau Hub @ GINZA SIX
これまでの1回、1.5回のイベントを経験して、「こんなWDCつくってみた！」とか「開発中ここに悩んだ」な
ど、体験談をシェアする会です
「ネタ」を共有いただける方は、ふるってTDC#wdcチャンネルにポストください
詳しくは : URL : https://techplay.jp/event/669194
