はじめに

Qlik Sense 3.0で新たにウィジェット(Widget)と呼ばれる機能が追加され、ウェブデザインの最低限のスキルさえあればより手軽にカスタムのビジュアライゼーション部品を作成することが出来るようになりました。

このエントリでは、まずこのウィジェットのコンセプトについてご説明を行い、簡単なウィジェットの作成を通じてウィジェット・エディタの基本操作や作成手順をご紹介したいと思います。そして今後のエントリでアクションボタンの作成やカスタムテーブルの作成など、Qlik Senseの利用の幅をより広げるのに有用なウィジェットの作成方法について掘り下げていきたいと思います。

ウィジェット(Widget)とは?

ウィジェット(Widget)とは、高度なプログラミングのスキルを必要とせずに作成・利用できる、カスタムのビジュアライゼーション部品などのアプリオブジェクトです。このウィジェットにより、例えば以下の様なデザインを施したカスタムのKPIパネル、テーブル、アクションボタンなどを作成して利用することができます。

image

ウィジェットの他にこれまでも、汎用的なウェブ技術とQlik Senseのチャートを組み合わせて新たなカスタムウェブサイトを構築する「マッシュアップ」や、拡張機能として独自にビジュアライゼーションなどの部品を開発できる「エクステンション」などを作成することが可能でした。ただ、これらのマッシュアップやエクステンションの開発にはJavaScript、jQuery、RequireJSなどの知識が求められるため、これらの言語に習熟していないユーザーや開発者にとっては敷居がやや高くなっていました。

image

そのような中、「標準チャートを拡張したいが難しい開発はしたくない」といったニーズに応えるため、新たに追加されたのがこのウィジェットになります。ウィジェットではJavaScriptを使ったプログラミングが不要で、よりシンプルな手順でデザインを行ってビジュアライゼーション部品を作成することが出来ます。

ウィジェット作成に必要となるスキル

ウィジェット作成において、これまでのご説明の通りJavaScriptを使ったプログラミングは必要ではありませんが、部品のデザインなどを行う必要はありますのでQlik Sense製品の基本的な知識に加えて、以下のウェブ技術に関するスキルが必要となります。

  1. HTML
  2. CSS (+Less)
  3. Angular.jsの基本

image

ビジュアライゼーション部品のプロパティ設定などはドラッグ&ドロップの設定で行うことができ、ビジュアライゼーション部品のデザインや見た目はウェブサイトのデザインを行うような形でHTMLやCSSを利用します。また、Angular.jsは主にアクションやデータの扱いを定義するために、基本的な知識が必要となります。

基本的なウィジェット作成の手順

では、実際に簡単なウィジェットの作成を通じて、基本的な操作や作成方法を確認していきたいと思います。ウィジェットの作成はDev Hub上のウィジェット・エディタ上で行いますので、そこから始めていきたいと思います。

Dev Hubへのアクセス

Qlik Sense Desktopを立ち上げて「メニュー」から「Dev Hub」を選択してDev Hubにアクセスします。ウェブブラウザから以下のURLを開いて直接Dev Hubへアクセスすることも可能です。(Chromeの利用が推奨されます。また、Dev HubはQlik Sense Desktopが稼働している場合のみ利用可能ですのでご注意ください。)

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

1

Dev Hubが開きます。Qlik Sense 3.0より前のバージョンでは「Single Configurator」「Extension Editor」「Mashup editor」「Engine API Explorer」の4つのエディタが提供されていましたが、Qlik Sense 3.0より「Widget editor」が追加されました。このエディタ上でウィジェットの作成・編集を行います。

2

ウィジェット・ライブラリの新規作成

各ウィジェットは一つのビジュアライゼーション部品に当たりますが、個別のウィジェットをバラバラに扱うのは管理上非常に面倒です。その様な面倒を避けるため、複数のウィジェットを一つに纏めるための器として「ウィジェット・ライブラリ」をまず作成し、その中にウィジェットを作成していきます。そして、このウィジェットライブラリの単位で再利用・管理を行うことができます。

Dev Hubトップ画面右上の「+」ボタンをクリックし、「Create new widget library」を選択します。

3

「Name」の欄に「widget-tutorial」と入力し、「Create」をクリックします。

4

「widget-tutorial」という名称の新規ウィジェット・ライブラリが作成され、ウィジェット・エディタの画面が表示されます。

image

ウィジェットの新規作成

ウィジェット・ライブラリが作成されましたので、その中に新たなウィジェットを作成します。左上のメニューから「Create new widget」を選択します。

5

「Name」の欄に「Hello World」と入力し、「Create」をクリックします。

6

左側の一覧に「Hello World」のウィジェットが追加されたことを確認します。

image

HTMLとCSSの編集

ここでは赤の太字で「Hello World」と表示のみを行うシンプルなウィジェットを作成します。HTMLとCSSの各エディタ上に以下の入力を行います。

・HTML

<div class="hello-world">
Hello World
</div>

・CSS

.hello-world {
	color: red;
	font-weight: bold;
}

7

上記の例では、<div>タグに”hello-world”のclassを付加しています。そして、CSSで”hello-world”のclass指定を行い(CSSではピリオドの後にクラス名を記述することでクラスの指定を行うことができます)、色が赤(color: red)で、太字(font-weight: bold)のスタイルの適用を行っています。

プレビューの確認

右上のアプリ選択プルダウン上で任意のアプリを選択します。(ここでは「Executive Dashboard.qvf」を選択しています。) アプリの選択を行うとプレビューが表示されますので、以下の通り正しく表示されていることを確認します。

8

プロパティの追加

上記の例ではハードコードされた固定値の「Hello World」が表示されていました。次はプロパティパネル上でメッセージを入力し、その値が表示されるようにプロパティの制御を追加したいと思います。画面右下のプロパティパネルの「Edit」ボタンをクリックします。

9

プロパティのコンポーネント一覧が表示されますので、「Header」をドラッグし、右側の「General」ヘッダーの下にドロップします。

10

追加された「Settings」という名称のヘッダー左側の▼ボタンをクリックして展開します。

11

「Input field」をドラッグして「Settings」ヘッダーの配下にドロップします。

12

追加された「Property1」右側の「Edit item」アイコンをクリックし、以下を入力して「Done」をクリックします。(「Label」はプロパティパネルに表示されるプロパティ名、「Reference」はHTMLやCSSからこのプロパティの参照を行うためのIDにそれぞれ当たります)

  • Label: メッセージ
  • Reference: message

13

画面右下のプロパティパネルの「Edit」ボタンをクリックしてプロパティの編集を完了します。

14

プロパティの参照

HTMLエディタ上で”Hello World”を削除し、カーソルを<div>タブの間に合わせたままで「Insert」ボタンをクリックします。

15

Insertウインドウを利用することで、ボタンやアイコンなどのUI部品をワンクリックで挿入を行うことができます。ここでは「Property references」のタブを選択します。

16

ドロップダウンから先ほど追加した「Settings」ヘッダーを選択し、「message」のプロパティを選択して「Insert with curly braces」をクリックします。

17

HTMLエディタに以下形でプロパティへの参照が追加されます。プロパティへは{{settings.<Reference ID>}}の形式で参照が可能となっています。

18

(参考) チャートのタイトルやサブタイトルなどは標準で利用可能となっており、以下の形で参照が可能です。

  • タイトル: {{settings.title}}
  • サブタイトル: {{settings.subtitle}}
  • 脚注: {{settings.footnote}}

image

左上の「Save」ボタンをクリックしてウィジェットを保存します。

20

右側プロパティパネルの「メッセージ」プロパティに任意の文字列を入力すると、プレビュー上にその値が表示されることを確認します。

19

アプリでのウィジェットの利用

任意のアプリを開いて編集モードに入ります。(既にQlik Senseのアプリを開いている場合にはウィジェットの作成・編集を反映させるために「F5」を押して画面を再ロードして下さい。) 「カスタムオブジェクト」のタブをクリックすると、「widget-tutorial」のウィジェット・ライブラリが表示され、そこに「Hello World」のウィジェットが含まれていることを確認します。

21

ドラッグ&ドロップでシートに「Hello World」のウィジェットを追加します。

22

「メッセージ」のプロパティに値を入力すると、その値がウィジェット上に反映されることを確認します。

23

ウィジェット・ライブラリのエクスポートとインポート

作成したウィジェット・ライブラリはエクスポートを行って、Qlik Sense Enterpriseのサーバーなどの他の環境に移行を行うといった形で管理・再利用を行うことができます。

エクスポートはDev Hubのトップ画面から対象のウィジェット・ライブラリを右クリックし、「Export library」を選択することが実行することができます。

24

また、インポートはDev Hubトップ画面右上の「+」ボタンをクリックし、「Import widget library」を選択することで行うことができます。

25

 

ウィジェット作成における推奨事項

ここまでで、ウィジェットの基本的なコンセプトと、ウィジェット・ライブラリの作成、ウィジェットの作成、HTML・CSSの編集、プロパティの追加・利用、アプリでの利用といった一通りのウィジェット作成と利用の流れをみてきました。次にウィジェット作成に当たっての推奨事項をご説明させて頂きます。

ウィジェット利用全般について

1. ウィジェットを汎用的に作成する

先ほどの手順では「メッセージ」のプロパティを追加して表示される値をプロパティの定義で変更可能としました。そのような形で値をウィジェットの中にハードコードするのではなく、プロパティ化して変更可能とし、ウィジェットの汎用性を高めることが推奨されます。

2. レスポンシブなデザインを施す

様々なデバイスや画面サイズに応じて適切な表示が行えるよう、レスポンシブなデザインを心がけることが推奨されます。ウィジェットでは以下のCSS属性を利用することが可能です。

  • min-width
  • max-width
  • min-height
  • max-height

例えば、以下の形でCSSに[max-width~=”200px”]を追加することで、エクステンション表示領域のピクセルが200px以下の場合と、それより大きい場合のフォントサイズなどの表示を変えることができます。

image

プレビュー上でウィジェットの表示サイズを変更することができ、それによりレスポンシブデザインの確認を行うことができます。

image image

3. 宣言的な記述のみを含める

ウィジェットの作成にはHTMLやCSS/Lessを使った宣言的な記述のみを含めます。JavaScriptを使ったフローの制御などが必要な場合には、ウィジェットではなくエクステンションの作成を検討することが勧められます。

CSSのスタイリングについて

1. idを利用せず、classを利用する

HTML要素においてidの指定が可能ですが、idはページ内において一意である必要性があるため、idをウィジェットで利用すると、1シート内で1種類のウィジェットを複数子利用した時に問題が発生する可能性があります。

それを避けるために先ほどの形でclassを利用することが推奨されます。

image

2. インライン・スタイルを利用することを避け、HTMLとスタイル定義を分けて管理する

スタイル定義は以下の形でstyle属性を利用してHTMLに埋め込むことも可能です。

image

ただし、このインライン・スタイルでは管理性や再利用性、可読性に欠けるため、先ほどの形でHTMLとCSSに分けて管理することが推奨されます。

image

3. CSSでパラメータを利用する

ある値を複数の個所で利用している場合、変更への対応容易性や管理性を高めるために変数を利用して一か所で定義することが推奨されます。例えば以下の例では、@colorの変数を先頭で定義し、その変数を複数の個所で再利用しています。

image

ウィジェット・サンプルの利用

Qlik Senseには以下の様なKPIパネルやテーブルなどのウィジェットを含んだサンプルが提供されており、ウィジェット作成に当たって参考にすると非常に有効です。ここではそのサンプルの利用方法をご説明します。

image

以下のフォルダを開きます。

  • Qlik Sense Desktop: C:\Users\%username%\Documents\Qlik\Examples\Extensions
  • Qlik Sense Enterprise: C:\ProgramData\Qlik\Examples\Extensions

image

widget-examplesフォルダを含んだzipファイルを作成します。

image

Dev Hubトップ画面右上の「+」ボタンをクリックし、「Import widget library」を選択します。

25

widget-examplesのzipファイルを選択します。

image

インポートが成功すると以下のメッセージが表示されます。

image

以下の形で「widget-examples」のウィジェット・ライブラリが追加されますので、このウィジェット・ライブラリを開くとウィジェットを参照することが出来ます。

26

まとめ

以上、まずこのウィジェットのコンセプトや、ウィジェットの基本的な作成手順をご紹介しました。以降のエントリでは、アクションボタンの作成やカスタムテーブルの作成などの方法についてご説明していきたいと思います。