Download to read offline
![参考：使い方（デモ流れ）
＜準備＞
✓ [出題者] Tableauアンケートダッシュボードが埋め込まれたWEB画面にアクセス、スクリーンに投影
✓ →ワークブックはSpreadSheetを参照している
✓ →画面は常にリロードされている
＜アンケート開始＞
✓ [出題者] SpreadSheetの質問テーブルに質問を記入
✓ [出題者] WEB画面上の入力BOXに質問番号を入力
✓ [回答者] Slack上のチャンネルで質問に対して1~4を入力
✓ →Slack上のデータがSpreadSheetの回答テーブルに連携
✓ →SpreadSheetの回答テーブルを見ているTableauダッシュボードのデータがスクリーン上に可視化
＜アンケート切り替え＞
✓ [出題者] 画面上のResetボタンをクリック
✓ → SpreadSheetの回答テーブル・質問テーブルを空にする
✓ →Tableauダッシュボードをフィルタかけてデータを空にする](https://image.slidesharecdn.com/tdcjsapi2realtimesurveybuiltwithtableau-190614030042/75/Tableau-JavaScript-API-2-Real-Time-Survey-Built-with-Tableau-8-2048.jpg)
![参考：App Scriptの完成コード
✓ ④整える状態まで完了した、完成系ソースコード
✓ SpreadSheetのURLは各自差し替え
function doPost(e) {
//Slackのチャンネルに設定したOutgoing WebHooksのトークン
var token = "TZoyko96Y5cBnxeZS8HzdS8H";
if (token != e.parameter.token) {
throw new Error("invalid token.");
}
var user = e.parameter.user_name;
var value = e.parameter.text;
updateSheet(user,value);
}
function updateSheet(user,value) {
var url = "https://docs.google.com/spreadsheets/d/1Sd3UQRi4qIaGO9graFPERMbqnxQ9zkwHCPiZPzCzbdI/edit";
var spreadsheet = SpreadsheetApp.openByUrl(url);
var sheet = spreadsheet.getSheetByName('dev_ans');
var lastRow = sheet.getLastRow();
//resetと入力された場合はデータを空にする
if (value=="reset") {
sheet.deleteRows(2, lastRow-1);
}
//全角入力の数字は半角に変換
if (value.match(/^[^¥x01-¥x7E¥xA1-¥xDF]+$/)) {
value = String.fromCharCode(value.charCodeAt(0) - 65248);
}
//value値は数字(１～４)のみ転記
if (value.match(/[1234]/)) {
sheet.getRange('A'+String(lastRow+1)).setValue(value);
sheet.getRange('B'+String(lastRow+1)).setValue(user);
sheet.getRange('C'+String(lastRow+1)).setValue(lastRow);
}
}](https://image.slidesharecdn.com/tdcjsapi2realtimesurveybuiltwithtableau-190614030042/75/Tableau-JavaScript-API-2-Real-Time-Survey-Built-with-Tableau-11-2048.jpg)
Tableau JavaScript API #2 - Real Time Survey Built with Tableau
- 1. #import sys #import tableausdkimport* #import tableausdk.HyperExtract import* def createHyper(filename): try: hyper = Extract(filename) if (not hyper.hasTable(‘Extract’): schema = TableDefinition() schema.setDefaultCollation.EN_GB) schema.addColumn(‘ClubJoinDate’, Type.DATETIME) schema.addColumn(‘IsTableauUser’, Type.BOOLEAN) schema.addColumn(‘Name’, Type.UNICODE_STRING) table = hyper.addTable(‘Extract’, schema) if (table == None): print ‘A fatal error occurred’ exit (-1) except TableauException, e: print ‘A fatal error occurred:’, e exit (-1) return hyper def populateHyper(hyper): try: table = hyper.openTable(‘Extract’) schema = table.getTableDefinition() Tableau Developers Club /*Season2*/ Tableau JavaScript API #2 - Real Time Survey Built with Tableau NTT Data | Naomichi Takahashi
- 2. Hi, I am NaomichiTakahashi - 70kun NTTデータ 製造ITイノベーション事業本部 コンサルティング&マーケティング事業部 http://70kun.com/ ✓ 2015年よりTableauビジネスに参画、製造業を中心にTableauの導入支援/開発/トレーニングを実施. ✓ 現在はTableau × Alteryxを使ったデータ加工から可視化までの構築プロジェクトに携わっています. ✓ また、週末にはWEBデザイン、フロントエンド技術を強みにWEBサイト構築、アプリ開発をいくつか受託しています. ✓ My Portfolio site -> takahashinoo@nttdata.co.jp Tableauに限らず、分析や開発のご相談、いつでもお待ちしております！！ Desktopトレーニング 力入れてます!!
- 3. Today’s Goal ✓ JavaScriptAPIの実践編 ✓ 実際にプロダクトを作ってみる
- 4. WEBページ・アプリケーション TableauレポートURL Java Script コード what'sthe Tableau JS API ✓ Tableau Server or Online上にあるワークシートをWEB画面に埋め込むときに使うAPI ✓ アクセス/フィルター制御、データ取得、レイアウト変更が可能 ✓ 埋め込み先のページに合わせたレイアウトや処理を組みたい場合にJS APIの利用が便利！
- 5. 何ができるの？ -> Tableau表現の拡張 ■JSAPIならではのメリット ★：特にgood ・自動リロード(アニメーションみたい) ・ダッシュボード内の情報を取得 ・外部APIとの連携(DataRobotやAmazon) ・データの入力と反映★ ・WEB画面に埋め込める(スタイル自由自在)★ ・利用履歴が取得できる ■JS APIの主要な関数 ・Basic Embed ・filter ・change param ・Resize ・Get Data ・Respond to Events ・Select Marks
- 6. 本日の内容 -> リアルタイムアンケート可視化 ✓スクリーン（画面）に投影されている1~4の４択の質問に対してSlackで回答 ✓ 回答データがGoogle SpreadSheetに即時連携され、そのデータをTableauで可視化 Slack上で選択肢 1~4を入力 POST情報が SpreadSheetに連携 Tableauワークブックで 即時反映
- 7. システム構成（データの流れ） ✓ SpreadSheetの質問テーブルにあらかじめ質問内容を記載しておく ✓ Slack上で1~4の数字を入力（＝回答）すると、Webhook&AppScriptがSpreadSheetの回答テーブルに即時転記する ✓質問＆回答をJOINしたテーブルを参照しているTableauワークブックが埋め込まれているWEB画面がリロード表示している ✓ Slack上で「reset」の数字を入力すると、Webhook&AppScriptがSpreadSheetの回答テーブルを空にする 回答者 Outgoing Webhooks Google App Script Slack → Spreadsheet 転記プログラム Google Spreadsheet 質問 テーブル 回答 テーブル Tableau Server サーベイ ワークブック WEB画面 HTML (CSS/JS) 質問者 Slack ４ 質問者質問者 reset 自動 リロード 入力 入力 空にする POST 内容を 入力する 手動 書き換え 埋め込み アクセス
- 8. 参考：使い方（デモ流れ） ＜準備＞ ✓ [出題者] Tableauアンケートダッシュボードが埋め込まれたWEB画面にアクセス、スクリーンに投影 ✓→ワークブックはSpreadSheetを参照している ✓ →画面は常にリロードされている ＜アンケート開始＞ ✓ [出題者] SpreadSheetの質問テーブルに質問を記入 ✓ [出題者] WEB画面上の入力BOXに質問番号を入力 ✓ [回答者] Slack上のチャンネルで質問に対して1~4を入力 ✓ →Slack上のデータがSpreadSheetの回答テーブルに連携 ✓ →SpreadSheetの回答テーブルを見ているTableauダッシュボードのデータがスクリーン上に可視化 ＜アンケート切り替え＞ ✓ [出題者] 画面上のResetボタンをクリック ✓ → SpreadSheetの回答テーブル・質問テーブルを空にする ✓ →Tableauダッシュボードをフィルタかけてデータを空にする
- 9. 開発の流れ ✓ Step.1：Slack⇔AppScriptの連携の仕組みを構築 ✓ Step.2：AppScript内でSlack→Spreadsheet転記プログラムを記述・デプロイ、Spreadsheet用意 ✓Step.3：Spreadsheetを参照したTableauワークブックを作成、Serverにパブリッシュ ✓ Step.4：Serverにあるワークブックを埋め込んだWEB画面を作成 Outgoing Webhooks Google App Script Slack → Spreadsheet 転記プログラム Google Spreadsheet 質問 テーブル 回答 テーブル Tableau Server サーベイ ワークブック WEB画面 HTML (CSS/JS) Slack ４ reset Step.1 Step.2 Step.3 Step.4
- 10. 参考：開発の流れ（詳細） 【共通】１．Slack環境のセットアップ Slack Webhookを指定したチェンネルに設定 https:/tableau-dev-club.slack.com/apps/manage/custom-integrations 検索窓からOutgoing Webhooksを探してクリック 「AddConfiguration」ボタンをクリック 「Add Outgoing Webhooks integration」ボタンをクリック Channelを設定(必須) → Webhook URLはメモしておく（TZoyko96Y5cBnxeZS8HzdS8H） 【各自】２．Google App Scriptセットアップ GoogleSpreadsheet新規開く ツール>スクリプトエディタ選択 Scriptファイルを保存 メニュー(ファイル) 版を管理 新しいバージョンを保存 メニュー(公開) ウェブアプリケーションとして導入 プロジェクトバージョンを「新規作成」 導入 許可を確認 > 許可 現在のウェブアプリケーションのURLがエンドポイントなのでメモしておく 【各自】３．Outgoing WebhooksにAppScriptのエンドポイントを設定 ※エンドポイントがわかったので、それをSlackのOutgoing Webhooksに設定 Outgoing Webhooks設定画面を開き、URL(s)にエンドポイントを記載 https:/tableau-dev-club.slack.com/apps/manage/custom-integrations 【各自】４．App Script上でコーディング スクリプト作成ステップ ①動く、②呼びだす、③渡す、④整える 【各自】５．Tableauワークブック作成 Google Spreadsheetの共有したシートURLを入力してデータソース指定 ダッシュボードをTableau Serverにパブリッシュ →パブリッシュしたURLをメモしておく 【各自】６．画面に埋め込む URL埋め込み リフレッシュ（3000ミリ秒） ✓ 今回はSlackチャンネルは共通、その他AppScript, Tableauワークブック, Tableau Server, WEB画面は個々で開発
- 11. 参考：App Scriptの完成コード ✓ ④整える状態まで完了した、完成系ソースコード ✓SpreadSheetのURLは各自差し替え function doPost(e) { //Slackのチャンネルに設定したOutgoing WebHooksのトークン var token = "TZoyko96Y5cBnxeZS8HzdS8H"; if (token != e.parameter.token) { throw new Error("invalid token."); } var user = e.parameter.user_name; var value = e.parameter.text; updateSheet(user,value); } function updateSheet(user,value) { var url = "https://docs.google.com/spreadsheets/d/1Sd3UQRi4qIaGO9graFPERMbqnxQ9zkwHCPiZPzCzbdI/edit"; var spreadsheet = SpreadsheetApp.openByUrl(url); var sheet = spreadsheet.getSheetByName('dev_ans'); var lastRow = sheet.getLastRow(); //resetと入力された場合はデータを空にする if (value=="reset") { sheet.deleteRows(2, lastRow-1); } //全角入力の数字は半角に変換 if (value.match(/^[^¥x01-¥x7E¥xA1-¥xDF]+$/)) { value = String.fromCharCode(value.charCodeAt(0) - 65248); } //value値は数字(１～４)のみ転記 if (value.match(/[1234]/)) { sheet.getRange('A'+String(lastRow+1)).setValue(value); sheet.getRange('B'+String(lastRow+1)).setValue(user); sheet.getRange('C'+String(lastRow+1)).setValue(lastRow); } }
- 12. 参考：HTMLの完成コード ✓ 完成系ソースコード ✓ レポートURLは各自差し替えのこと <!DOCTYPEhtml> <html lang="ja"> <head> <title>JSsample</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="http://public.tableau.com/javascripts/api/tableau-2.min.js"></script> </head> <style type="text/css"> iframe{ margin: 20px auto 0 auto; } </style> <body onload="initViz()"> </body> <script type="text/javascript"> function initViz() { var containerDiv = document.getElementById("vizContainer"), url = "http://3.112.226.110/t/tdc/views/surveydashboard_naomichi/surveydashboard", options = { hideTabs: false, hideToolbar: true, onFirstInteractive: function () { console.log("initViz_OK"); var sheet = viz.getWorkbook().getActiveSheet(); var workbook = viz.getWorkbook(); } }; viz = new tableau.Viz(containerDiv, url, options); setInterval(function () {viz.refreshDataAsync() }, 3000); } </script> </html>
- 13. 参考：リファレンス ✓ Google AppsScriptで勤怠管理用のSlack Botを作りました http://tech.furyu.jp/blog/?p=6476 ✓ Slack上のメッセージをGoogleAppsScriptで受け取ってよしなに使う https://qiita.com/kyo_nanba/items/83b646357d592eb9a87b ✓ SlackとGoogleAppsScript(GAS)を連携する手順・事例★good https://tech.tabilabo.co.jp/598/ ✓ SlackのOutgoing WebHooksとGoogleAppsScriptで簡単な会話botを作ってみた★good https://qiita.com/pistaman/items/a542119ea28871960477 ✓ 環境構築はいらないよ GASでサクッとbotをつくろう★good https://www.slideshare.net/AyaSuzuki9/gasbot-83171149 ✓ 【GoogleAppsScript】スプレッドシート操作(セルへのデータ書き込み偏) https://qiita.com/chihiro/items/20a54865c15966e807ee