Application)を含むダイナミックなウェブアプリケーションの構築や、MVCに基づいたアプリケーション設計を支援するオープンソースのJavaScriptフレームワークです。Senseには標準機能としてAngularJSが組み込まれており、エクステンション開発においてもこのAngularJSを活用することができます。ここではその手順についてご説明します。Hubにアクセスします。(Chromeの利用が推奨されます。Desktopが稼働している場合のみ利用可能ですのでご注意ください。new」をクリックして以下を入力・選択して新たなエクステンションのプロジェクトを作成します。templateAngularJSによる基本的な表示まず、MyAngularJS.jsを開いて、以下の形に修正します。AngularJSでは、制御はコントローラー(Controller)、表示はビュー(View)/テンプレートといった形で役割分担を行います。テンプレートとして「template.ng.html」を読み込み、templateメソッドで設定しています。paintメソッドはAngularJSを利用する場合には不要です。paintメソッドの代わりに、AngularJSを利用する場合にはcontollerメソッドを追加してコントローラーを定義し、ここに制御の処理を実装します。$scopeはスコープオブジェクトと呼ばれ、コントローラとテンプレートの橋渡しを行います。AngularJS”を格納しています。);次に、「template.ng.html」という名称のファイルを新たに追加し、以下を入力します。qv-extensionをルートのHTML要素に含める必要があります。コントローラーで$scopeに作成されたmsg変数を表示します。AngularJSでは、{{変数名}}という形式で参照します。Senseアプリのシート上に追加すると、以下の形で表示されます。AngularJSを用いたテーブルの表示AngularJSを使って基本的なエクステンションの表示は確認しましたので、次にテーブルにデータを表示する処理を実装します。MyAngularJS.jsの以下の形に修正して、property.jsとinitialProperties.jsを読み込む設定を行います。);properties.jsファイルを新たに作成して以下を入力します。}})initialProperties.jsファイルを新たに作成して以下を入力します。);template.ng.htmlファイルに以下形でテーブルを追加します。ng-bindといったAngularJSのディレクティブと呼ばれる制御命令を利用しています。ng-repeatは指定された配列から順に要素を取り出してループ処理を行います。ここでは、例えばlayout.qHyperCube.qDimensionInfoで軸の要素をループ処理で取り出し、その要素をdimという変数で参照可能としています。ng-bindはモデルをビューにバインドします。ここでは、例えばdim.qFallbackTitleにより、軸の名称をモデルとして<th>の要素にバインドして表示させます。</table></div>以上の修正を完了し、エクステンションを表示して問題なくテーブルのデータが表示されることを確認します。まとめこのエントリでは、AngularJSを使ってエクステンションを開発する手順についてご説明しました。以下の情報もAngularJSを使ったエクステンションの開発に有用ですので、こちらもご参照ください。Pagingに公開されています。今回はAngularJSのディレクティブで「layout.qHyperCube~」といった形式でデータを参照しましたが、qlik.tableメソッドを利用すると、コードを短縮することができます。template」がこのメソッドを利用していますので、実装例としてこのテンプレートが参考になります。Extensions」に公開されています。