AngularJSなどの汎用的なウェブ技術を利用して、標準では提供されていない新たなビジュアライゼーション部品をエクステンションとして作成することが可能です。World”の簡単なエクステンションの開発を通じて、エクステンション開発の基本的な流れとプロジェクトのファイル構成について確認したいと思います。Desktopの導入を事前に行って下さい。Dashboard」のサンプルアプリを使用します。以下のリンクからサンプルアプリをダウンロードします。Dashboard.qvf」のアプリを以下のディレクトリにコピーします。Hubにアクセスします。(Chromeの利用が推奨されます。Desktopが稼働している場合のみ利用可能ですのでご注意ください。New」をクリックします。以下を入力・選択して「Create」をクリックします。template以下の編集画面が立ち上がります。World”の文字列を表示するシンプルなエクステンションを作成してみたいと思います。World”に修正します。World”に修正し、「Save」ボタンをクリックします。ウェブブラウザから以下のURLを開き、Hubを開きます。DesktopからもHubを開くことは出来ますが、エクステンション開発時にはウェブブラウザからHubを開いて動作を確認する方が作業上便利です。Dashboard」のアプリを開いてシートを新規作成し、編集モードに入ります。World」という名称のチャート部品が追加されていることを確認します。World」という文字列を表示されたことを確認します。World”エクステンションで基本的な動きを確認しましたので、次にエクステンション・プロジェクトに作成されたファイルの役割を確認したいと思います。作成したエクステンション・プロジェクトの実態は以下のフォルダに保存されています。C:\Users\%username%\Documents\Qlik\Sense\Extensions\MyExtensionQEXTファイルQEXTファイルはエクステンション名やアイコンなど、エクステンションに関わるメタデータを管理するファイルになります。このファイルでは以下の様な項目を管理することが可能です。エクステンションの名称を指定します。World”を指定して以下の形でライブラリやプレビューに名称が表示されていました。エクステンションの説明を記述します。descriptionの内容は以下の様にプレビューに説明が表示されます。ライブラリやプレビューに表示されるアイコンを指定します。以下のアイコンが指定可能で、デフォルトでは”extension”となっています。抜粋)ここで例えば”icon”に”table”を指定すると、以下の様にライブラリとプレビューにテーブルのアイコンが表示されます。プレビューに表示するイメージを指定します。このpreviewの指定が省略された場合には、上記のiconのイメージが表示されます。ここで例えば、preview.pngをエクステンション・プロジェクトのフォルダ(C:\Users\%username%\Documents\Qlik\Sense\Extensions\MyExtension)に配置し、上記の形で”preview”に”preview.jpg”のアイコン名を指定すると、以下の様にプレビューやWorkbench上のアイコンにテーブルのアイコンが表示されます。画像のフォーマットはPNG形式で、140×140のサイズのイメージファイルを利用することが推奨されます。その他、以下の様な項目が設定可能となっています。エクステンションのタイプを指定します。ビジュアライゼーション用のエクステンションは必ず”visualization”を指定する必要があります。エクステンションのバージョンを指定します。エクステンションの作成者を記入します。Javascript(JS)ファイルJavascriptファイルはエクステンションを実行する主なコードを含むファイルとなり、エクステンションの開発は主にこのファイル上で行います。このJavascriptのファイルには最低限defineとpaintの項目が含まれます。先頭に配置されたこのdefineコマンドにより、jQueryやCSSなど他のコードへの参照を追加することができます。(Javascriptモジュールの依存性を管理するRequireJSのdefineが利用されています。)例えば、以下の様にdefineに’jquery’を追加し、functionの引数に$を追加すると、$(“..”)の一般的なjQueryの形式でjQueryの処理を記述することができます。paintメソッドはビジュアライゼーションを描画するためのメソッドで、描画を行うタイミングで毎回呼び出されます。paintメソッドは以下の引数を受け取ることができます。id=”display”></div>を追加する処理を行っています。jquery”の文字列をその<div>タグ内に追加しています。上記の結果は以下の形となります。同様にCSSへの参照を追加することができます。CSSについては次のCSSファイルの説明の中で見ていきたいと思います。CSSファイルCSSファイルを追加してビジュアライゼーションのスタイルを調整することが出来ます。以下、CSSファイルを追加する手順をご説明します。file」をクリックします。ファイル名を指定して「Create」をクリックします。ここではstyle.cssと入力します。追加されたCSSファイルに記述を追加します。classが設定されます。以下ではビジュアライゼーション中の”display”のclass属性を持つ<div>タグ内のテキストを赤字で表示するよう指定しています。red;}「MyExtension.js」ファイルタブを開き、以下の形でCSSファイルへの参照を追加します。);CSSが適用され、以下の様にエクステンション内の文字が赤字で表示されるようになります。Senseが含むRequireJSプラグインを利用してCSSの内容をドキュメントヘッダーに注入する方法になりますが、以下のステートメントを追加してCSSへの参照リンクのみをヘッダーに加える方法もあります。Pluginを利用することも可能です。この時は「$(“<style>”)・・・」の処理は不要です。);wbfolder.wblファイルWorkbench上では非表示となっていますが、エクステンション・プロジェクトのフォルダ内にwbfolder.wblファイルが作成されます。このファイルには、以下の形でプロジェクトに含まれるファイル名の一覧が含まれています。World”の文字列を表示するシンプルなエクステンションの作成を通じて、新規エクステンション作成の手順やエクステンション・プロジェクトに含まれるファイルの役割などについて確認してきました。Senseエンジンで集計されたデータを表示する処理を組み込んでいきたいと思います。