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

【エクステンション開発解説】リセットボタン <第二回: ボタン表示の実装>

執筆者 hiro 更新日時 2020年6月08日

Topics: Extension

こんにちは。hiroです。
前回はエクステンション開発の下準備について解説いたしました。
今回はボタンを表示する処理を実装し、実際にQlik Sense上でボタンを表示するところまで解説していきます。
  1.  下準備
  2.  ボタン表示の実装 (今回)
  3.  リセット機能の実装

 

 (エクステンション名).jsの返り値

前回の記事で『(エクステンション名).jsの返り値がエクステンションの実体になる』と説明しました。そこで、まずは返り値に含まれる各属性が一体どういった役割があるのか詳しく説明してきます。(エクステンション名).jsの返り値は次のようなオブジェクトでした。
define( [ "qlik"
],
function ( qlik) {
return {
support : {
......
},
paint: function ($element) {
......
}
};

} );

上記の例では"support", "paint"の二つの属性を持っている形になっています。この二つに"initialProperties", "definition"の二つを加えた、計四つの属性を持つオブジェクトがエクステンションの実体となります。
それぞれがどういう役割なのか詳しく説明していきます。

paint

paintはメソッドとして定義される、エクステンション開発で肝となる部分です。ここで記述された関数に従って実際のアプリ上において描写が行われます。また、次回説明しますがアクションに対する処理もこちらに記述していきます。
設定する関数の引数には"$element"以外にも様々とることができます。返り値を設定する必要はありません。

support

描写されたエクステンションの設定をしていきます。"support"の下位に設定を記述したオブジェクトを置きます。
設定できるのは以下の三つで、それ以外は"definition"で変更可能な設定として定義していきます。
設定名 内容 定義型 default
snapshot スナップショットを可能にするかどうか boolean false
export 結果のエクスポートを可能にするかどうか boolean false
exportData データのエクスポートを可能にするかどうか boolean true

definition

エクステンションの設定のうち、変更可能なものについての定義を記述していきます。ここで記述したものが、シート上でチャートのプロパティとして表示され、Qlik Sense上で変更できるようになります。
より詳しい説明は実際に"definition"を記述していく切り替えスライダーの作成のときに行います。

initialProperties

オブジェクトが最初に生成されるときに用いられるプロパティを指定していきます。今回のリセットボタンの作成および切り替えスライダーの作成どちらでも使用しません。
具体的な内容につきましては こちら(Qlik Space)のページなどが参考になります。

 

ボタンの実装

それではエクステンションの実装に移ります。
エクステンションは「HTMLで表示内容を作る→html()で描写」という流れで作成されています。QlikSenseで表示されているあれこれはHTMLで記述されていると考えて問題ありません。
なので、極論を言ってしまえばJavaScriptでHTMLのスクリプトを文字列で作成し、それをhtml()で描写すればエクステンションとしては機能します。ですが、スクリプトを文字列で作成するのは手間がかかるため、大まかな内容をHTMLファイルに記述し、それを微調整してから描写する形で作っていきます。
今回作成するのはリセットボタンですので、ボタンが一つ表示できれば事足ります。
そこで以下のようなHTMLを作成します。
test1.html
<div qv-extension class="npsod-canvas">
<button class="btn-sqare">Reset</button>
</div>
最初のdivタグに'qv-extension class="npsod-canvas"'が入ることに注意してください。このファイルを(エクステンション名).jsのあるフォルダに保存します。
続けてCSSファイルも作成します。同様に以下のようなCSSファイルを作成し、同じフォルダに保存します。
test1.css

.btn-square {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #668ad8;/*ボタン色*/
color: #FFF;
border-bottom: solid 3px #627295;
border-radius: 2px;

}
.btn-square:active {
/*ボタンを押したとき*/
-webkit-transform: translateY(2px);
transform: translateY(2px);/*下に動く*/
border-bottom: none;/*線を消す*/
}

CSSは こちらのサイトを参考にさせていただきました。
ディレクトリ構成は次のようになります。
test1
|- test1.js
|- test1.qext
|- wbfolder.wbl
|- test1.html
|- test1.css
これでHTML, CSSが用意できました。あとはpaintメソッドを実装していくだけです。
まず作成したHTML, CSSを読み込みます。方法はdefineでモジュールを読み込むときと同じく、配列に各ファイルのパスを書いた文字列を入れ、続く関数に受け口となる引数を用意します。
ただし、HTML, CSSファイルのパスの前に"text!"を入れるのを忘れないでください。これを忘れると読み込まれなくなります。
test1.js

define( [
"qlik",
"text!./test1.html",
"text!./test1.css"
],
function ( qlik, btn_html, btn_css) {
......
} );

これで"test1.html"が"btn_html"に、"test1.css"が"btn_css"に格納されました。次に、読み込んだCSSが適用されるようにします。
そのために読み込んだCSSを受け取った引数(今回はbtn_css)を使い、functionの直下に"$("<style>").html(btn_css).appendTo("head")"を追加します。
test1.js

define( [
"qlik",
"text!./test1.html",
"text!./test1.css"
],
function ( qlik, btn_html, btn_css) {
$("<style>").html(btn_css).appendTo("head");
return {
......
}
} );

これによりHTML文の頭にstyle節が挿入され、CSSが適用されるようになります。
最後にHTMLを描写します。描写するにはpaintメソッド内で"$element.html(HTML文)"を実行します。
test1.js

define( [
"qlik",
"text!./test1.html",
"text!./test1.css"
],
function ( qlik, btn_html, btn_css) {
$("<style>").html(btn_css).appendTo("head");
return {
support : {
......
},
paint: function ($element) {
$element.html(btn_html);
}
};

} );

これでボタンの実装は完了です。続けて動作確認に移ります。
Qlik Senseを開き、適当なアプリで今作った"test1"を設置してみます。作ったエクステンションはシート編集画面の『カスタムオブジェクト』→『エクステンション』に表示されるので、そこから"test1"をシートに設置します。次のようなボタンが表示されクリックできれば完了です。

 

コードを変えたのに反映されない……

エクステンションを開発する中で、コードは書いたもののうまく動かず様々修正を加えていくことになります。ですが、ここで一つ注意点があります。
それは、 コードを変えた結果は即座に反映されないということです。コードの変更を反映させるためには開いているアプリケーションを一度閉じ、再度ターミナルからアプリケーションを開かなければなりません。
ですので、コードを修正するときは
  1. コードを修正
  2. ファイルを保存(しないと反映されない)
  3. アプリケーションを閉じて再度開いて動作を確認
という手順を踏むことになります。

最後に、今回のまとめとして全体のJavaScriptを載せておきます。

test1.js

define( [
"qlik",
"text!./test1.html",
"text!./test1.css"
],
function ( qlik, btn_html, btn_css) {
$("<style>").html(btn_css).appendTo("head");
return {
support : {
snapshot: true,
export: true,
exportData : false
},
paint: function ($element) {
$element.html(btn_html);
}
};

} );

次回でリセット機能を実装し、リセットボタンを完成させます。
hiro

執筆者 hiro