Tableau JavaScript API + WordPress によるアウトプット

Tableau JavaScript API 概要

Developer Portal を覗いてみたところ JavaScript API, REST API, Document API や Tableau SDK などの情報があった。これらのうちアプトプットに利用できそうな Tableau JavaScript API を利用してみる。

tableau-2.js を読み込んで、vizContainer() を呼び出し、その中で作成したビューを読み込むだけで利用できる。

そのため、特にプログラムの知識がなくても OK という点も Tableau っぽい。これだけで、Tableau サーバや tableau public に保存・蓄積された view を簡単に活かせる点が素晴らしい。

ただし、セキュリティ面で外部から参照されるためアウトプットが前提であるにせよ気になるところだ。Tableau サーバー上ではビューにパーミッションを設定できるようになっている。
既存では管理者の他にゲストユーザが登録されており操作の制限はかけられるが API 呼び出しによる外部からの直接参照についてはどうなんだろうか。今度、中の人に聞いてみるかな。。

WordPress との連携

WordPress + Tableau JavaScript API で既存のブログとも連携できるぞと。ちょっとリサイズがうまくいっていないけど。

やり方

tableau-2.js の読み込み

function.php に load_tableau_js_api() 関数を追加。投稿記事の表示の際だけロードするようにしています。固定ページなら post を page にする。

function load_tableau_js_api() {
    if(get_post_type() === 'post'){
        wp_enqueue_script('tableau', 'https://public.tableau.com/javascripts/api/tableau-2.js');
    }
}
add_action('wp_enqueue_scripts', 'load_tableau_js_api');

記事への投稿内容


    function initViz() {
        var containerDiv = document.getElementById("vizContainer"),
            url = "http://public.tableau.com/views/RegionalSampleWorkbook/Economy",
            options = {
                hideTabs: true,
                onFirstInteractive: function () {
                    console.log("Run this code when the viz has finished loading.");
                }
            };
        var viz = new tableau.Viz(containerDiv, url, options); 
        // Create a viz object and embed it in the container div.
    }
    $(document).ready( function(){
        initViz();
    });
スポンサーリンク