2015/11/9 サンプルコードのダウンロードリンクを追加しました。

はじめに

このエントリでは、D3.jsやBootstrapなどのライブラリを利用した、Qlik Sense Mashupの開発方法をご説明します。

以前のQlik Senseでマッシュアップのサイトを作成のエントリでは、汎用的なウェブ部品にQlik Senseのチャート部品をドラッグ&ドロップで組み合わせてMashupサイトを作成する手順をご説明しました。

そのような方法に加え、Qlik Senseから集計結果を受け取ってD3.jsでチャートで表示したり、Bootstrapのドロップダウンで一覧表示させるなどAPI経由で連携してQlik Senseを集計用エンジンと利用し、UI部品についてはニーズに合わせて自由かつ柔軟に開発する方法も提供されています。ここでは、主にD3.jsやBootstrapを利用して以下の様なイメージの画面を作成する方法をご説明します。

image

では、以下の部品の作成方法を一つ一つご説明していきたいと思います。

  • フィールド選択を行うドロップダウン(Bootstrap)
  • 選択解除のボタン(Bootstrap)
  • KPIパネル(Bootstrap)
  • 棒グラフ(D3.js)

作成するマッシュアップのサンプルコードは以下からダウンロードが可能です。解凍したMashupDemoフォルダを「C:\Users\%username%\Documents\Qlik\Sense\Extensions」以下にコピーすることで利用が可能です。

>> マッシュアップのサンプルコードをダウンロード

準備

サンプルアプリのダウンロード

まず、Qlik Sense Desktopをインストールされていない方は、以下のサイトからダウンロードしてインストールします。(当手順はQlik Sense 2.0で確認を行っています。)

image

また、今回作成するMashupでは「Exective Dashboard」のサンプルアプリを使用します。当アプリの追加が必要な場合には、以下のリンクからサンプルアプリをダウンロードします。

>> Executive Dashboardアプリのダウンロード

ダウンロードしたZipファイルを解凍し、中に含まれる「Executive Dashboard.qvf」のアプリを以下のディレクトリにコピーします。

  • C:\Users\%username%\Documents\Qlik\Sense\Apps

image

Mashupプロジェクトの作成

ウェブブラウザから以下のURLを開き、Dev Hubにアクセスします。(Chromeの利用が推奨されます。また、Dev HubはQlik Sense Desktopが稼働している場合のみ利用可能ですのでご注意ください。)

http://localhost:4848/dev-hub/

image

「Create New」をクリックします。

1

以下を入力・選択して「Create」をクリックします。

  • Name: MashupDemo
  • Template: Basic mashup template with absolute positioning

1

以下の編集画面が立ち上がります。

レイアウトのブランク化

初期状態では幾つかグレーのボックスがレイアウトに配置されています。ここでは、レイアウトを一旦ブランクの状態にしてから作業を始めたいと思います。

MashupDemo.htmlのタブを開いて、以下のグレーでハイライトされた<style>タグを削除します。

image

さらに、以下のグレーでハイライトされた<div>タグを削除して保存します。

image

Layoutタブを開き、画面がブランクになったことを確認します。

image

Bootstrapへの参照の追加

Bootstrapはウェブデザインを行うためのオープンソースのフレームワークで、ナビゲーション、ボタンなどのHTMLとCSSのテンプレートが含まれています。まず、Bootstrapへの参照を追加し、Bootstrapを使った簡単なデザインをレイアウトに追加します。

MashupDemo.htmlのタブを開いて、以下のコードを下記イメージのグレーでハイライトされたHeaderセクションの個所に追加します。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

image

以下のコードを下記イメージのグレーでハイライトされたbodyタグ内の個所に追加します。

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Mashup Demo</a>
    </div>
    <div id="navbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Dashboard</a></li>
        <li><a href="#about">About</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <div class="page-header">
     
  </div>
  <!--/.page-header-->  
</div>
<!--/.container-->

image

「View」ボタンをクリックして、画面に以下の様なページヘッダーが追加されたことを確認します。

image

フィールド選択を行うドロップダウンの追加

以下の様なイメージの、「Product Type」フィールドの選択を行うドロップダウンを追加します。

image

Field Listの作成

まず、Dev Hub上で「Field List」を追加し、Qlik Senseアプリから指定したフィールドのデータを取得し、コールバック関数に渡す設定を行います。

左上のプルダウンから「Executive Dashboard」のアプリを選択します。

2

左側メニューから「Lists」タブを開き、「Add List」 ボタンをクリックします。

2

以下の通りに選択・入力を行って、「Add」をクリックします。ここでは、「Product Type Desc」のフィールドを50行取得して、「productType」という名称のコールバック関数を呼び出す設定を行っています。

3

MashupDemo.jsタブを開き、以下のコードが追加されたことを確認します。取得するフィールドリストと呼び出されるコールバック関数の定義を行う「app.createList」メソッドなどが上記のウィザード上の設定で追加されました。メソッドの詳細については、Qlik Sense Help: createList methodをご参照下さい。

image

ドロップダウンのページへの追加

次にページへドロップダウンの部品を追加します。この時点ではページに部品を追加するだけで、「Product Type」の一覧はまだ表示されません。

MashupDemo.htmlタブを開き、<div class=”page-header”>の行の後に以下のHTMLコードを追加して保存します。

<div class="dropdown" style="float:left" >
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" >Product Type <span class="caret"></span></button>
    <ul class="dropdown-menu noclose" data-stoppropagation="true">
    </ul>
</div>
<!--/.dropdown-->
<div class="after"></div>

image

画面右上の「+」のボタンをクリックします。

4

名前に「MashupDemo.css」と入力し、「Create」ボタンをクリックします。

1

MashupDemo.cssタブを開き、以下のCSSコードを追加します。

body {
  padding-top: 70px;
  padding-bottom: 30px;
}
body,
.navbar-fixed-top,
.navbar-fixed-bottom {
  min-width: 970px;
}
/* Finesse the page header spacing */
.page-header {
  margin-bottom: 30px;
}
.page-header .lead {
  margin-bottom: 10px;
}
.after {
  clear: both;
}
li {
  margin-top: 5px;
  margin-left: 10px
}

image

MashupDemo.htmlタブを開き、以下のコードをHeaderセクションに追加して保存します。

<link rel="stylesheet" href="./mashupdemo.css">

image

「View」ボタンをクリックして、画面に以下の様な形でドロップダウンが追加されたことを確認します。

image

フィールド一覧表示のためのコールバック関数の修正

現状ではドロップダウンをクリックしても何も表示されない状態となっていますので、次にコールバック関数を修正して「Product Type」の一覧を表示させるようにします。

MashupDemo.jsを開き、以下のコードを「productType」コールバック関数内に追加して保存します。


$(".dropdown-menu").empty();
 
var qDataPages = reply.qListObject.qDataPages[0];
 
$.each(qDataPages.qMatrix, function(){
  var item = this[0];
  var style = "";
   
  if(item.qState == "S") {
    style = " style=\"color:red;\"";
  }
   
  $(".dropdown-menu").append("<li " + style  + ">" + item.qText + "</li>");       
});

image

上記ではまず、empty()による処理でページ上のドロップダウンに含まれる一覧をクリアしています。「Product Type」のフィールド一覧はqListObject.qDataPages[0].qMatrixの配列として取得されます。その中に要素として含まれるqStateが「S」の場合にはこの行が選択された状態であることを示しているため、「S」を含む行は文字を赤で表示する制御を行っています。qTextはフィールドのラベル(=データの中身)が格納されており、それらの一覧を<li>タグで括って最後にドロップダウンメニューの一覧に追加する処理をおこなっています。

「View」ボタンをクリックして、画面に以下の様な形でドロップダウンの一覧がされることを確認します。

image

ドロップダウンへのクリックアクションの追加

作成したドロップダウン上のアイテムをユーザーがクリックすると選択・選択の解除を行えるようにします。ここではドロップダウンメニューにクリックイベントを追加し、Qlik Senseのqlik.app.field.selectValuesメソッドを使ってクリック時に選択を行う処理を実行するようにします。

以下のコードを「productType」コールバック関数の末尾に追加して保存します。

$(".dropdown-menu li").click(function(){
  var arr = [];
  arr.push($(this).text());
  app.field("Product Group Desc").selectValues(arr, true, true);
});

image

「View」ボタンをクリックして、以下の様な形でドロップダウン上のアイテムをクリックするとアイテムが選択され、アイテムが赤字に変わることを確認します。

image

Dropdown Menus Enhancementの追加

ここまででドロップダウンを表示してクリックで選択・選択解除を行うことが可能となりました。ただ、現状ではクリックするとメニューが閉じてしまう状況となっていますので、操作性の観点からクリックしても閉じないようにしたいと思います。以下のサイトにそれを実現するDropdown Menus Enhancementというコードが公開されていますので、そのコードを参照して利用することにします。

http://behigh.github.io/bootstrap_dropdowns_enhancement/ 

MashupDemo.htmlタブを開き、以下のコードをHeaderセクションに追加します。

<link rel="stylesheet" href="///cdn.rawgit.com/behigh/bootstrap_dropdowns_enhancement/master/dist/css/dropdowns-enhancement.css">
<script src="//cdn.rawgit.com/behigh/bootstrap_dropdowns_enhancement/master/dist/js/dropdowns-enhancement.js"></script>

image

「View」ボタンをクリックして、ドロップダウン上のアイテムをクリックしてもメニューが閉じずに選択が実行されることを確認します。

image

選択解除ボタンの追加

選択解除ボタンを追加し、qlik.app.clearAllメソッドを呼び出して選択解除を実行する処理を組み込みます。

MashupDemo.htmlタブを開き、以下のコードを追加して保存します。

<button  style="float:right" type="button" id="clear-selection" class="btn btn-primary">Clear selection</button>

image

MashupDemo.jsタブを開き、以下のコードをrequireセクションの内部に追加して保存します。

//clear all selections
$("#clear-selection").click(function(){
    app.clearAll();
});

image

「View」ボタンをクリックして、選択解除ボタンにより選択が解除されることを確認します。

image

まとめ

以上、前編ではフィールドの選択を行うドロップダウンの追加と、選択解除ボタンの追加を行うための手順をご説明しました。以下の後編では引き続き、Qlik Sense Mashup開発のKPIパネルの追加とD3.jsを使った棒グラフの追加の内容についてご説明していきたいと思います。

>>D3やBootstrapを使ったより高度なQlik Sense Mashupの開発(後編)