---
title: "Qlik Senseでエクステンション開発解説：リセットボタン ＜第二回: ボタン表示の実装＞"
description: "Qlik Sense（クリックセンス）でエクステンション開発する方法についてお調べですか？本記事では、Qlik Senseでエクステンション開発する方法について解説しています。連載となっており今回は、リセットボタン ＜第二回: ボタン表示の実装＞です。"
---

[Qlik Senseナレッジ - INSIGHT LAB](https://knowledge.insight-lab.co.jp/qliksense)

# [Qlik Senseでエクステンション開発解説：リセットボタン ＜第二回: ボタン表示の実装＞](https://knowledge.insight-lab.co.jp/qliksense/extension/reset-button-implementation)

 作成者: [hiro](https://knowledge.insight-lab.co.jp/qliksense/author/hiro)｜2020年6月08日

こんにちは。hiroです。

 

前回はエクステンション開発の下準備について解説しました。

 

[**第1回「下準備」の記事はこちら**](https://knowledge.insight-lab.co.jp/qliksense/extension/extension-reset-button-preparation)

 

 

今回はボタンを表示する処理を実装し、実際に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)](https://www.qlikspace.net/qlik-sense%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%86%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA%E5%85%A5%E9%96%80%EF%BC%88%EF%BC%92%EF%BC%89-%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E3%83%86/#i-4)のページなどが参考になります。

 

# ボタンの実装

それではエクステンションの実装に移ります。

エクステンションは「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は [こちらのサイト](https://saruwakakun.com/html-css/reference/buttons)を参考にさせていただきました。

 

ディレクトリ構成は次のようになります。

```
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"をシートに設置します。次のようなボタンが表示されクリックできれば完了です。

 

<https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/1_2_1.png>

 

 

 

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

エクステンションを開発する中で、コードは書いたもののうまく動かず様々修正を加えていくことになります。ですが、ここで一つ注意点があります。

それは、 **コードを変えた結果は即座に反映されない**ということです。コードの変更を反映させるためには開いているアプリケーションを一度閉じ、再度ターミナルからアプリケーションを開かなければなりません。

ですので、コードを修正するときは

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);  
}  
};

} );

 

この記事は、以上です。 

 

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

 

  [**シリーズ最終回となる第3回「Qlik Senseでエクステンション開発解説：リセットボタン ＜第三回: リセット機能の実装＞」の記事はこちら**](https://knowledge.insight-lab.co.jp/qliksense/extension/reset-button-function)

[完全な記事を表示](https://knowledge.insight-lab.co.jp/qliksense/extension/reset-button-implementation)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "hiro"
  },
  "dateModified" : "2020-12-03T05:33:31.049Z",
  "datePublished" : "2020-06-08T09:19:53Z",
  "headline" : "Qlik Senseでエクステンション開発解説：リセットボタン ＜第二回: ボタン表示の実装＞",
  "image" : {
    "@type" : "ImageObject",
    "height" : 169,
    "url" : "https://download.insight-lab.co.jp/hubfs/Imported_Blog_Media/1_2_1-300x169.png",
    "width" : 300
  },
  "mainEntityOfPage" : "https://knowledge.insight-lab.co.jp/qliksense/extension/reset-button-implementation",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "QlikSenseナレッジ"
  }
}
```