y.horikoshi2012@gmail.com 
ダッシュボードの画面が自動で更新されない。
開きながら自動で更新されるようにしたいんだけど、どうすればいいの？
今回はこのような疑問に答えていきます！！
筆者は製造業でTableauのダッシュボード開発を主に行っています。
よく製造現場の大モニターに常時ダッシュボードを表示しておくことがあるのですが、自動でデータと画面が更新されるようにしています。
現在、Tableauの標準機能では画面を自動で更新することができないため開発が必要です。
本記事では下記の内容についてまとめています。
- Tableau Serverを用いたビューを自動で更新する方法
- JavaScript APIを用いて［データ更新］ボタンを定期的に実行する方法
コーディングが必要となりますが15分くらいで意外と簡単に出来てしまいますので、ぜひ最後までお付き合いください。
ダッシュボードの画面を自動で更新するための解決策
解決策は2つあります。
①Webページにダッシュボードを埋め込み、ブラウザを定期更新（リロード）する方法
②Webページにダッシュボードを埋め込み、JavaScript APIを用いて、［データ更新］ボタンを定期的に実行する方法
今回は②について解説していきます。
②のJavaScript APIを選択した理由は、実務において有用な実装ができるメソッドが豊富にあるためです。
初期状態でフィルターをかけたりと様々な応用を利かせることができます。
HTML、JavaScriptの実装方法
早速、JavaScript APIを使った実装を行っていきましょう。
まずは、Webページにダッシュボードを埋め込むためのHTMLファイルを作成していきます。
実装にはVScodeなどのエディタを使っていますが、メモ帳などでも構いません。
しかし、エディタを使ったほうが記述ミスなどに気が付きやすいため、おすすめです。
VScodeと検索すれば簡単にダウンロードできますので使ったことがないという方はこの機会に試してみてください。
実際のコードは下記になります。一つずつ何をしているか確認していきましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>テスト</title>
<meta http-equiv="Content-Type" content="text/html;charset-UTF-8"/>
<script type="text/javascript" src="http://192.168.***.***/javascripts/api/tableau-2.9.0.min.js"></script>
</head>
<body onload="initViz()">
<section>
<div id="vizContainer" style="width: 1900px; height: 980px;"></div>
</section>
</body>
<script type="text/javascript">
function initViz() {
var containerDiv = document.getElementById("vizContainer");
var url = 'http://http://192.168.***.***/views/***/***'
var options = {
hideTabs: true,
hideToolbar: false,
onFirstInteractive: function() {
console.log("Run this code when the viz has finished loading.");
}
};
var viz = new tableau.Viz(containerDiv, url, options);
setInterval(function(){viz.refreshDataAsync()}, 3600);
}
</script>
</html>記述内容について細かく解説していきます。
headタグにはTableau ServerからJavaScript APIファイルを呼び出すscriptタグを記述します。
<head>
<title>テスト</title>
<meta http-equiv="Content-Type" content="text/html;charset-UTF-8"/>
<script type="text/javascript" src="http://192.168.***.***/javascripts/api/tableau-2.9.0.min.js"></script>
</head>bodyタグにはwebページを読み込んだタイミングでJavaScriptのイベントが発生する記述とダッシュボードを表示するdivタグを記述します。
<body onload="initViz()">
<section>
<div id="vizContainer" style="width: 1900px; height: 980px;"></div>
</section>
</body>JavaScriptにてダッシュボードを生成する関数を記述していきます。
urlにはTableau Serverにパブリッシュしているダッシュボードの共有用URLをコピペします。
今回の趣旨である［データ更新］ボタンを自動で実行する間隔はオレンジ色の数値で設定していきます。
単位はミリ秒[ms]となりますので900000だと15分毎に［データ更新］ボタンが自動でクリックされることになります。
function initViz() {
var containerDiv = document.getElementById("vizContainer");
var url = 'http://http://192.168.***.***/views/***/***'
var options = {
hideTabs: true,
hideToolbar: false,
onFirstInteractive: function() {
console.log("Run this code when the viz has finished loading.");
}
};
var viz = new tableau.Viz(containerDiv, url, options);
setInterval(function(){viz.refreshDataAsync()}, 900000);
}実装は以上となります。作成したファイルの拡張子をhtmlとして任意の場所に保存しておきましょう。
ブラウザからアクセスして動作確認
作成したHTMLファイルをTableau Serverに配置してWEBブラウザからアクセスできるようにしていきます。
Tableau ServerがインストールされているPCに下記のフォルダがあるかと思いますので、作成したHTMLファイルを配置します。※Windows Serverの場合
¥¥192.168.***.***¥c$¥Tableau¥Tableau Server¥data¥tabsvc¥httpd¥htdocs
WEBブラウザからアクセスするための準備が整いましたので、URLをブラウザに打ち込んでみてください。
正しくアクセスできていればTableauへのログイン情報を求めるページが出てきます。
ログインしてダッシュボードの［データ更新］が自動で行われているか確認していきましょう。
まとめ
いかがだったでしょうか。今回はコーディングが必要であるためHTML、JavaScriptに馴染みのない方には少し難しく感じるかもしれません。
私自身、実務で実装の必要がありましたが、周りに聞ける人がいなくとても苦労しました。
しかし、一度作ってしまえば使い回しが簡単にできますし、このデータ更新の自動化以外にもたくさんのメソッドを使うことができます。
Tableauでできることの幅がものすごく広がりますので、APIリファレンスを見て気になるものを試してみてください。
