Qlik Senseでマッシュアップのサイトを作成
目次
はじめに
Qlik Senseのチャート部品と、汎用的なウェブの部品とを組み合わせたマッシュアップサイトを作成する手順をご紹介します。Qlik Sense Desktopに標準で付属しているDev Hubを利用することで、Qlik Senseのチャートをドラッグ&ドロップで画面上に配置したり、HTMLやCSSを利用して画像や動画などの他の汎用的なウェブ部品を配置してウェブサイトをデザインすることが出来ます。
ここでは、以下の2種類のマッシュアップサイトを作成する手順をご説明します。
まず、Qlik Senseのチャート、背景画像、動画などを埋め込んだマッシュアップサイトの作成を行います。
次に、レスポンシブなWebデザインを簡単に構築できることで人気のある「Bootstrap」のテンプレートを利用し、Qlik Senseのチャートを組み合わせて、以下のようなマッシュアップを作成する手順をご説明します。
サンプルサプリのQlik Sense Desktopへの追加
まず、Qlik Sense Desktopをインストールされていない方は、以下のサイトからダウンロードしてインストールします。
また、今回作成するマッシュアップサイトで利用するQlik SenseアプリをQlik Sense Desktopに追加します。以下のリンクからサンプルアプリをダウンロードします。
ダウンロードしたZipファイルを解凍し、中に含まれる「Sales Analysis.qvf」のアプリを以下のディレクトリにコピーします。
- C:\Users\%username%\Documents\Qlik\Sense\Apps
Qlik Sense Desktopを起動して、追加した「Sales Analysis」アプリが追加されていることを確認します。（Qlik Sense Desktopは立ち上げたままにします。）
「Sales Analysis」アプリを開き、以下の様なシートが含まれていることを確認します。今回は、これらのQlik Sense部品を利用してマッシュアップサイトを作成します。
マッシュアップ・プロジェクトの作成
ウェブブラウザから以下のURLを開き、Dev Hubにアクセスします。（Chromeの利用が推奨されます。また、Qlik Sense Desktopを利用している場合、Dev HubはQlik Sense Desktopが裏で稼働している場合のみウェブブラウザから利用可能ですのでご注意ください。）
http://localhost:4848/dev-hub/
「Create New」をクリックします。
以下を入力・選択して「Create」をクリックします。
- Name: Test
- Template: Basic mashup template with absolute positioning
以下の編集画面が立ち上がります。
シンプルなマッシュアップの作成
まず、Qlik Senseのチャート、背景画像、動画などを埋め込んだ以下の様なシンプルなマッシュアップサイトの作成方法をご説明します。
左上のプルダウンから「Sales Analysis」のアプリを選択します。
デザインの左側の選択バーから「商品カテゴリフィルタ」をデザインの左のボックスにドラッグ＆ドロップします。
デザインの左側の選択バーから「都道府県別ランキング」をデザインの右のボックスにドラッグ＆ドロップします。
画面下部の「Show selections Bar」のチェックボックスをONにし、ウェブページ上部に選択バーを表示させます。
次にページの背景画像を設定します。以下のURLから画像をダウンロードして下さい。
ダウンロードした画像を以下のディレクトリにコピーします。
- C:\Users\%username%\Documents\Qlik\Sense\Extensions\Test
「Test.html」のタグを開きます。
<body>タグを以下の様に修正し、ダウンロードした画像を背景画像に設定します。
<body style="overflow:auto; background-image:url(ConnectingCircles-01.png)">
次に動画をページに埋め込みます。<div>タグのidがQV03～QV06となっている行を削除します。
以下のタグを削除した行の位置にコピーします。
<iframe style="position: absolute; top: 300px; left: 320px; width: 400px; height: 200px;" src="https://www.youtube.com/embed/hYBMECY4Yoo" frameborder="0" allowfullscreen></iframe> 
画面下部の「View」ボタンをクリックします。
以下の様に完成したマッシュアップサイトが表示されます。マッシュアップサイト上のQlik Senseチャートの部品内で、項目のフィルタリングなどの操作が可能なことを確認します。
この様にマッシュアップを作成することで、画像や動画などのソーシャルコンテンツと組み合わせてQlik Senseチャートを活用することが可能となります。
「Bootstrap」のテンプレートを活用したマッシュアップの作成
次に、Bootstrapを利用している標準テンプレート(Basic single page mashup)を利用して以下の様なマッシュアップの作成を行います。Qlik SenseではHTML、CSS、JavaScriptなどを利用したウェブページのデザインをテンプレートとして活用し、Qlik Senseチャートと組み合わせてマッシュアップを作成することが可能です。
Dev Hubのトップメニューを再度開き、以下を入力して新たなマッシュアッププロジェクトを作成して編集画面を開きます。
- Name: Mashup
- Template: Basic single page mashup
「Layout」タブ上のデザインが以下の様な表示となっていることを確認します。
左上のプルダウンから「Sales Analysis」のアプリを選択します。
左側の選択バーから「商品カテゴリ別売上構成比」をデザインの左のボックスにドラッグ＆ドロップします。
「商品売上ツリーマップ」をデザインの真ん中のボックスにドラッグ＆ドロップします。
「商品カテゴリフィルタ」をデザインの右側のボックスにドラッグ＆ドロップします。
上部メニューの「View」ボタンをクリックします。
以下の様に完成したマッシュアップサイトが表示されます。マッシュアップサイト上のQlik Senseチャートの部品内で項目のフィルタリングなどの操作ができたり、上部の「ClearAll」などのボタンで操作可能なことを確認します。
Qlik Sense Enterpriseでのマッシュアップの公開
Qlik Sense アプリの公開
最後に、作成したマッシュアップサイトをQlik Sense Enterprise上に公開する手順をご説明します。QMC(Qlik Management Console)を開き、左側から「Manage Content」＞「Apps」をクリックします。
- QMC URL: https://<サーバー名>/qmc
「Import」をクリックします。
「ファイルを選択」をクリックします。
最初のステップでダウンロードした「Sales Analysis.qvf」を以下のディレクトリから指定します。
- C:\Users\%username%\Documents\Qlik\Sense\Apps
「Import」をクリックします。
インポートが完了したことを確認して「Sales Analysis」を選択し、「Publish」をクリックします。
公開先のストリームを選択して、「OK」をクリックします。
ストリームに公開されたことを確認します。
アプリIDのマッシュアップサイトへの設定
ハブを開き、公開した「Sales Analysis」を選択します。
- ハブ URL: https://<サーバー名>/hub
アプリが表示されたブラウザの画面上でURLを確認し、以下の部分のアプリIDをコピーして控えます。
Dev Hubの画面に戻って「Mashup.js」タブを開き、「openApp」で始まる以下の個所のアプリ名を上記で取得したアプリIDに置き換え、プロジェクトを保存します。
マッシュアップサイトの公開
以下のディレクトリを開き、「Mashup」ディレクトリを圧縮して「Mashup.zip」を作成します。
- C:\Users\%username%\Documents\Qlik\Sense\Extensions
QMCのトップメニューに戻り、「Manage Resources」＞「Extensions」を選択します。
「Import」をクリックします。
「ファイルを選択」をクリックします。
以下のディレクトリを開き、「Mashup.zip」を選択します。
- C:\Users\%username%\Documents\Qlik\Sense\Extensions
「Import」をクリックします。
Mashupのマッシュアップがインポートされたことを確認します。
以下のURLを開き、サーバー上に配置されたマッシュアップのサイトが表示されたことを確認します。(URLの形式は https://[ServerName]/extensions/[MashupName]/[MashupName].html となります。)
まとめ
以上の様に、Qlik Senseでは標準で付属しているDev Hubを利用することで、Qlik Senseの部品と、ウェブ部品とを組み合わせたマッシュアップサイトを柔軟に作成することが出来ます。また、このエントリでは、利用するとレスポンシブなWebデザインを簡単に構築できることで人気な「Bootstrap」と組み合わせてマッシュアップサイトを作成する手順をご説明しましたが、HTML、CSS、jQueryなど他の様々な部品と組み合わせてサイトを作成することが可能となっています。
