AlteryxでHTML GUIを使ってマクロのインターフェースを作る

「カスタマーストーリー」を支えるツール特集

#HTML

#Alteryx SDK

#ビッグデータ

#Alteryx

じょんすみす

2018.02.16

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、小澤です。

Alteryx SDKシリーズとしてこれまでConfigファイルとHTHML GUIについて解説していきました。あとはプログラムを実装すればツールの作成が完了するわけですが、この設定は通常のマクロにも利用できます。

今回は、そのやり方を見ていきましょう。

マクロのインターフェースとHTML GUI

従来のマクロでは、インターフェースツールを配置して、Interface Designerでそのレイアウトを設定していました。

これに対して、HTML GUIを利用する際には、Interface Designerに相当する部分を置き換えるものになります。

従来のマクロでは、インターフェースツールを配置したタイミングで自動的にフォームに設定されるため、レイアウトにこだわりがなければInterface Designerをしなくてもマクロの作成ができていました。また、設定値として入力されたものは自動的にインターフェースツールの内容と自動的に結びつけられるため、対応関係も記述する必要がありません。

これに対して、HTML GUIでは

フォームの部品として全てのインターフェースに対応するタグを記述
ワークフローの設定値との対応関係で入力値と設定値の対応関係を記述する

という2つの内容を記述してやる必要があります。 SDKを使ったプログラムの場合はHTML GUIが必須になりますが、一方で従来のインターフェースを利用できるマクロの場合はやることが多くなるだけで面倒に感じるかもしれません。

では、なぜマクロでもHTML GUIを利用するかというとインターフェースツールだけでは対応できない柔軟な画面設計が可能になるからです。例えば、Google Sheets Inputツールでは以下のようなことが可能になっています。

User LoginとDeveloper Loginが選択可能で、それぞれ異なる設定がある
ファイルを選択する際にファイルリストがサジェストされる

User LoginとDeveloper Loginではその選択をしたのちにやるべきことが異なります。このように特定の条件に応じて次の設定項目を変えるということは、従来であればチェックボックスやラジオボタンでon/offが可能ですが、このツールのように画面遷移でそれを行うことはInterface Designerできません。設定が複雑なものになってくると、Interface Designerでそれらを行なってもわかりづらいものになってしまうかもしれません。

また、認証自体をインターフェース上で行うこともHTML GUIだからこそできるものになっています。そのため、一通り設定した後に認証に利用する設定が間違っていたためあちこちやり直しになることもないです。

2つ目のサジェストに関しては、そういったこと自体が従来のインターフェースツールではできないですし、サジェスト対象になるデータやそのあとのファイル内のシート一覧がここで見れるのも認証を先に行なっているからこそになります。

このように HTML GUIではJavaScriptと組み合わせることで従来はできなかった様々な操作に対応できます。

実際に作ってみる

実際にマクロのインターフェースをHTML GUIで作成してみましょう。今回は、以下のマクロのインターフェースを作成します。

Alteryxでマクロを作成する｜ Developers.IO

マクロの中身を確認する

マクロの中身をあらためて確認して見ましょう。

ここでは、必要な項目を簡単に解説しますがより詳細な内容に関しては上記の記事をご覧ください。

Selectツール

まず最初にSelectツールでフィールドの選択を行なっています。ここでは、インターフェースとしてList Boxツールを配置して一覧から対象となるフィールドを選択できるようにしています。

また項目一覧は、Macro Inputツールから取得することで入力データのフィールド一覧を取得しています。

Sortツール

続いて、Sortツールではインターフェースとして2つのDrop Downツールを配置しています。

１つ目は、先ほどのSelectツールと同様、Macro Inputツールからフィールド一覧を取得しています。これはソート対象となる列を選択しています(Sortツールは本来複数列指定可能ですが、ここでは1つだけにしています)。

2つは、昇順・降順を選択するためのものになっています。こちらは、項目を直接入力しています。

HTML GUIから利用するのに必要な設定

従来のマクロでは、一部の機能を利用する場合をのぞいて初期値のままでも問題なかった項目の設定を行います。ツールの設定の左側メニューにある「Annotation」(上から4番目のアイコン)を選択して、Nameに値を設定します。

これは、各種インターフェースツールとMacro Input/Outputに設定する必要がありますので、今回は以下のツール全てで設定します。

Macro Input
Macro Output
List Box
Drop Down * 2

今回は以下のような名前を設定しました。

ツール	Nameの値
Macro Input	Input
Macro Output	Output
List Box	field_list
Drop Down(フィールドを選択する方)	sort_item
Drop Down(昇順・降順を選択する方)	sort_order

これらの名前は、ConfigファイルやHTMLファイルと各インターフェースを紐づけるのに利用します。

Configファイルの作成

続いて、Configファイルを作成します。設定内容は以下のようになります。

<?xml version="1.0"?>
<AlteryxJavaScriptPlugin>
  <EngineSettings EngineDllEntryPoint="MacroTest\Supporting_Macros\macro_test.yxmc" EngineDll="Macro" SDKVersion="10.1"/>
  <Properties>
    <MetaInfo>
      <Name>Macro Test</Name>
      <Description><![CDATA[This is test macro.]]></Description>
      <ToolVersion>1</ToolVersion>
      <CategoryName>JS Macro</CategoryName>
      <Author>John Smith</Author>
       <Icon>MacroTest.png</Icon>
    </MetaInfo>
  </Properties>
  <GuiSettings Help="" Html="MacroTestGui.html" Icon="MacroTest.png" SDKVersion="10.1">
    <InputConnections>
      <Connection Name="Input" AllowMultiple="False" Optional="False" Type="Connection"/>
    </InputConnections>
    <OutputConnections>
      <Connection Name="Output" AllowMultiple="False" Optional="False" Type="Connection"/>
    </OutputConnections>
  </GuiSettings>
</AlteryxJavaScriptPlugin>

内容の詳細はAlteryx SDKの設定ファイルをご覧ください。

ここで、先ほどマクロで設定したMacro Input/OutputのNameをそれぞれConnectionsのName属性として指定しています。今回は入出力はそれぞれ1つづつですが、複数個あってもどれがどの入力かを判断できるようにNameで対応づけています。

HTML GUIのファイル

インターフェース本体であるHTML GUIの内容を見てみましょう。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Location tool</title>
    <script type="text/javascript">
      document.write('<link rel="import" href="' + window.Alteryx.LibDir + '2/lib/includes.html">')
    </script>
    <script type="text/javascript">
      window.TestGUINamespace = {};
      window.TestGUINamespace.field_list_ui = {
        type: 'ListBox',
        widgetId: 'field_list'
      };

      window.TestGUINamespace.sort_item_ui = {
        type: 'DropDown',
        widgetId: 'sort_item'
      }

      window.TestGUINamespace.sort_order_ui = {
        type: 'DropDown',
        widgetId: 'sort_order'
      };
    </script>
</head>
<body>
  <br />
  <h1>XMSG("Select Fields")</h1>
  <ayx data-ui-props='window.TestGUINamespace.field_list_ui'></ayx>

  <h1>XMSG("Sort Item")</h1>
  <ayx data-ui-props='window.TestGUINamespace.sort_item_ui'></ayx>

  <h1>XMSG("Sort Order")</h1>
  <ayx data-ui-props='window.TestGUINamespace.sort_order_ui'></ayx>

  <script type="text/javascript">
    Alteryx.Gui.BeforeLoad = function(manager, AlteryxDataItems, json) {
      var field_list = new AlteryxDataItems.FieldSelectorMulti("field_list", {manager: manager});
      manager.addDataItem(field_list);
      manager.bindDataItemToWidget(field_list, "field_list");

      var sort_item = new AlteryxDataItems.FieldSelector("sort_item", {manager: manager});
      manager.addDataItem(sort_item);
      manager.bindDataItemToWidget(sort_item, "sort_item");

      var sort_order = new AlteryxDataItems.StringSelector("sort_order", {
        optionList: [
          {label: 'XMSG("昇順")', value: "Ascencoding"},
          {label: 'XMSG("降順")', value: "Descencoding"}
        ]}
      );
      manager.addDataItem(sort_order);
      manager.bindDataItemToWidget(sort_order, "sort_order");
    };

    window.Alteryx.Gui.Annotation = function (manager) {
      return 'test';
    };
  </script>
</body>
</html>

前半の36行目までは、Alteryx SDKのHTML GUI設定を見ていただければ、そのまま設定になっているのがわかるかと思います。

その後のJavaScriptの部分ですが、data-item-props属性に対応するものをここで生成しています。 data-item-propsでは、dataNameとdataTypeを指定するわけですが、今回のList BoxやDrop Downのように対象となるリストがある場合は、dataTypeで指定してやる必要があります。ここでは、その設定を行なっています。

まずは、

var field_list = new AlteryxDataItems.FieldSelectorMulti("field_list", {manager: manager});
manager.addDataItem(field_list);
manager.bindDataItemToWidget(field_list, "field_list");

を見ていきましょう。これは、FieldSelectorMultiというdataTypeを設定しています。このようにインスタンスを作成する際に引数が必要な場合は別途作成してやる必要があります。

FieldSelectorMultiでは、ツールに渡されるフィールドをリストの項目として利用するためのものになります。この設定をしてやることで、インターフェースツールでMacro InputツールからList Boxツールに接続していたコネクションと同様のことを行なっています。インスタンスとして生成するがdataType, 1つ目の引数の"field_list"がdataNameの値に対応しています。

また、ここで設定したdataNameの値ですが、ここで設定した値が先ほどマクロのインターフェースツールで設定したNameの値と対応している必要があります。

最後にbindDataItemToWidgetでフォームの部品とこのdata-item-propsを対応づけています。第1引数が先ほど生成したdataTypeに対応するインスタンス、第2引数が対応するフォームのwidegtIdとなっています。

ソート対象の列の設定に関しても内容はほぼ同じです。違いとしてはこちらは、FieldSelectorMultiではなくFieldSelectorを利用しています。これは取得するリストは同じですが以下のような違いがあります。

FeildSelectorMultiは複数選択可のフォームに対して利用する
FieldSelectorは単一選択の場合に利用する

となります。各フォームの要素ごとにどういった型が利用可能かはドキュメントのWidgetsに記載してあります。

最後のソート対象の選択はこれまでの2つと異なり、項目のリストを直接入力しています。

var sort_order = new AlteryxDataItems.StringSelector("sort_order", {
  optionList: [
    {label: 'XMSG("昇順")', value: "Ascencoding"},
    {label: 'XMSG("降順")', value: "Descencoding"}
  ]}
);
manager.addDataItem(sort_order);
manager.bindDataItemToWidget(sort_order, "sort_order");

このような形式で項目を選択するためのものが、StringSelectorとなります。 StringSelectorでは、項目のリストを引数として与えています。

optionListに対して、以下の項目の配列を渡します。

項目	値
label	表示する値
value	設定値として渡される値

マクロを使えるようにする

さて、必要なファイルが揃ったのでこのマクロを使えるようにしましょう。

Alteryxにマクロを認識させる

今回のマクロは「MacroTest」と名前をつけたので、マクロとして認識させるのに以下のファイルを配置します。

MacroTest/
├── MacroTest.png
├── MacroTestConfig.xml
├── MacroTestGui.html
└── Supporting_Macros
    └── macro_test.yxmc

MacroTest.pngは適当な画像を用意します。 MacroTestConfig.xmlは先ほどのもので、この中でhtmlやyxmcファイルのパスを指定しています。設定内容はそちらをご覧ください。

このMacroTestフォルダをAlteryxからマクロとして認識できる場所に配置します。そのパスは以下の2種類のうちどちらかになります。

パス	使い方
%APPDATA%\Alteryx\Tools\	特定のユーザのみで利用可能にする
<Alteryxのインストールフォルダ>\bin\HtmlPlugins\	このPCを利用する全てのユーザで利用可能にする