お問い合わせ
2 分で読むことができます。

Qlik Senseのエクステンションで文字列を表示してみよう!

執筆者 BI LAB編集室 更新日時 2015年12月24日

Qlik Senseのエクステンションで文字列を表示してみよう!

基本的な作成方法を理解するために、エクステンション開発で文字列表示をする方法を解説します。

 

 

以下の記事で作成したエクステンションを開きます。

「エクステンションの作り方」の記事はこちら


3.1.1

 

Qlik Dev HubはこちらのURLから開けます→http://localhost:4848/dev-hub/

エクステンションは

  • QEXTファイル
  • JavaScriptファイル
  • WBLファイル

の3つのファイルで構成されています。

テンプレートによっては、ファイルHTMLも含まれています)今回は文字列表示および動作確認のみ行いますので、QEXTファイルとJavaScriptファイルのみ変更を行います。

先に何も編集していないエクステンションを確認しましょう。

ブラウザから確認するために、次のURLを開いてください。
Qlik Sense Desktop ハブ→http://localhost:4848/hub
※こちらもURLもQlik sense Desk topが動作していないと開けません。

Qlik Sense Desktop ハブを開きます。

「アプリの新規作成」または既存のアプリを開き、編集画面へ進んでください。

チャートライブラリに、作成したチャート部品が確認できます。


12.24.1

 

 

また、チャート部品をドラッグ&ドロップすると、エクステンション名で設定した「sample1」が文字列として表示されます。


3.1.3

 

では、動作確認のために編集していきます。

まず、QEXTファイルについて
QEXTファイルにはメタデータが含まれます。

Qlik senseで表示される際の名前・タイプ・説明・アイコン等の設定を行うことができます。

今回は動作を確認したいので、名前と説明のみ変更します。
こちらがQEXTファイルです。設定項目はいくつかありますが、nameとdescriptionを下記のように修正します。

name: Hello world
description: Qlik sense visualization extension

3.1.4

 

次にエクステンションを実行する、JavaScriptファイルを編集します。

3.1.5

 

JavaScriptファイルには、「define」と「paint」が必ず含まれます。

defineコマンドは他のコードへの参照を追加することができます。

paintメゾットは、ビジュアライゼーションを描画するために使用します。

新しいデータをレンタリングする必要があるたびに呼び出されます。

上記のJavaScriptでPaintは「$element」を引数として受け取っています。


$elementはビジュアライゼーションをレンタリングする必要があるHTML要素を含むjQueryラッパーです。

表示されている文字列を変更するために、以下の修正を行います。

$element.html( "Qlik Sense" );

3.1.6

 

修正後「Save」し、ブラウザを更新して、チャート部品が変更されているか見てみましょう。
12.24

3.1.8

 

修正が反映されており、ちゃんと動作していることが確認できましたね!!

本記事は、以上です。

Qlik Senseを体験してみませんか?

INSIGHT LABではQlik紹介セミナーを定期開催しています。Qlik SenseとQlikViewの簡単な製品概要から、Qlikの特性である「連想技術」のご紹介、デモを通してQlik SenseとQlikViewの操作感や美しいインターフェースをご覧いただきます。企業の大切な資産である膨大なデータからビジネスを発見する 「Business Discovery」を是非ご体験ください。

詳細はこちら

BI LAB編集室

執筆者 BI LAB編集室

BI LAB(データ活用研究所)編集室です。 BI、AI、DWHなどデータ活用に関するトレンドやニュースやコラムをほぼ毎日配信しています。押さえておきたい基本知識から、最新ニュース、事例インタビューやお役立ち情報・セミナーレポートまで、データ活用の専門家ならではの視点と情報量でお届けします。