Qlik Analytics plugin for Visual Studio

Qlik Sense

2016.04.17

気がついたら、こんなものがリリースされていました。
Qlik Analytics plugin for Visual Studio
面白そうだったので、早速試してみる事に。
環境として、Visual Studio 2015が必要になります。
個人利用であれば、Community版が無料で活用できるので早速インストール。
Visual Studio Community

インストールが完了したら起動します。
こんな画面が出ます。

まずは、Qlik Analytics plugin for Visual Studioのプラグインをインストールします。
[ツール]＞[拡張機能と更新プログラム]＞[オンライン]＞[検索ボックスに「Qlik」]＞[Qlik Analytics for Visual Studio]＞[ダウンロード]

プラグインのインストールが完了したら、プラグインを活用します。
[表示]＞[その他のウインドウ]＞[Qlik Analytics plugin for Visual Studio]

するとこんなウインドウが出てきます。

このウインドウがQlikのオブジェクトを表示する為のHTMLソース精製機となっているようです。
使い方は簡単。
まずは、Qlik Sense Desktopを起動します。
次にプラグインのウインドウの左上の三段重ねになっているマークを押します。

すると、ログイン情報を入力するウインドウが表示されるので、Hostの欄に


http://localhost:4848
localhost

と入力してConnectボタンを押します。この際にラジオボタンは[Logged on user]にしてください。
※Qlik Sense Enterprise版では[Other credentials]を利用する場合があります。

接続が正しく出来ると以下のようにQlik Senseの情報が出てきます。

あとはサーバー側で表示されるHTMLソースと表示したいビジュアライゼーションのHTMLソースをコピーするだけ。

ちなみに、サーバー側を選択したときのHTMLソースはjavascriptとcssのライブラリになっているので、<head>タグ内に記述、ビジュアライゼーションのHTMLソースは<body>タグ内に記述してください。
具体的なサンプルとなるソースコードは以下の通りです。


<head>
<link rel = "stylesheet" href="http://localhost:4848/resources/autogenerated/qlik-styles.css">
<script src="http://localhost:4848/resources/assets/external/requirejs/require.js"></script>
    <script>
        var config = {
            host: 'localhost',
            prefix: '/',
            port: 4848,
            isSecure:false
        };
        require.config( {
            baseUrl: ( config.isSecure? "https://" : "http://" ) + config.host + (config.port? ":" + config.port: "") + config.prefix + "resources"
        });
            var qlikApps = [];
        require(["js/qlik"], function ( qlik ){
            qlik.setOnError(function(error) {{
                alert(error.message);
            }});
            function attach(elem){{
                var appid = elem.dataset.qlikAppid;
                var objid = elem.dataset.qlikObjid;
                var app = qlikApps[appid];
                if (!app){{
                    app = qlik.openApp(appid, config);
                    qlikApps[appid] = app;
                }}
                app.getObject(elem, objid);
            }}
            var elems = document.getElementsByClassName('qlik-embed');
            var ix = 0;
            for (; ix < elems.length; ++ix){{
            attach(elems[ix]);
            }}
        });
    </script>
    <!--Static height to show qlik object, this can be modified.-->
    <style>
        .qlik-embed {
            height: 300px;
        }
    </style>
</head>
<body>
<div class="qlik-embed" data-qlik-objid="LveAC" data-qlik-appid="D:\マイドキュメント\Qlik\Sense\Apps\sample.qvf"></div>
</body>

これをブラウザで開くとこんな感じに表示されます。

Qlik Sense Desktopで表示されるものと同じものが表示されていますね。
Desktop版の場合、自身でしか閲覧することができませんが、Enterprise版の場合は、社内で共有して見たりできるのかもしれません。
夢が膨らむプラグインですね。
ぶっちゃけ、これ、一度HTMLソースを取得したら二度と使わないんじゃ・・・なんて思ってないですよ。
そもそもVisual Studio 2015 Communityは会社で使えないからどうしよう。。。と思って、家でとりあえず個人として試してみて、上のように思ったなんて事は絶対にないですよ。