Alteryx Analytics Cloud の App Builderを使って分析Webアプリを作ってみた！

こんにちは、まつおかです。

Alteryx Analytics Cloudの製品について続々とブログが上がって来ていますが・・・

私は今回「App Builder」という機能を使って分析Webアプリを作ってみましたので、その手順をご紹介したいと思います。

Alteryx App Builderとは

Alteryx App BuilderはAlteryx Analytics Cloudに含まれており、ノーコードで分析Webアプリを簡単に構築することのできるツールです。

分析Webアプリ構築手順

今回はチョコレートの売上データを使用し、ラジオボタンで中カテゴリを選択すると、年代別の売上表とグラフを表示するWebアプリを作成します。

構築手順は以下となります。

1. Orchestrateキャンバスでデータフローを作成
2. Designキャンバスでレイアウトを作成
3. 公開

Webアプリ作ってみた！

1. Orchestrateキャンバスでデータフローを作成

まず、Orchestrateキャンバスでアプリのデータフローを構築します。
データフローは Alteryx Designer Cloud 同様、左に表示されているツールパレットから対象のツールを配置し繋げて作成します。

アプリで使用するデータはcsv形式のデータを直接入力したり、Alteryx Analytics Cloudのデータセットを使用する他に、Alteryx Designer Cloudで作成したワークフローを連携することもできます。
今回は事前にAlteryx Designer Cloudで作成したワークフローを使用しました。

Designer Cloudを使ったワークフローの構築についてはこちらをご参照ください。

• Alteryx Analytics CloudのDesigner Cloudを使ってみた #Alteryx | DevelopersIO
• Alteryx Analytics Cloudを早速使ってみました | DevelopersIO

ワークフローを連携する場合は、左のツールパレットのIntegrationsにある「Workflow」をキャンバスにドラッグし、右の設定画面で接続するワークフローを選択します。

次に、Output Table Nameでワークフローの中のどのツールからの出力データを使用するか選択します。なんと、ワークフローの途中時点のデータを使用することもできるのです！

設定画面の「View Details」ボタンをクリックするとワークフローが表示されますので、ツール名の記憶が定かでなくてもここで確認することができ安心です。

今回は商品の売上データとマスタデータを結合・加工した上で、中カテゴリ、商品、年代でグループ化し売上を合計したデータを使用します。
App Builderに連携したデータは、Designer Cloud同様、下部の結果ウィンドウで確認することができます。

アプリでは中カテゴリを選択すると年代別の売上が表示されるという動きになりますので、まずは中カテゴリ、年代でグループ化し売上を合計する処理を追加します。App Builderではデータの加工をすることもできますので、データ連携時に表示するデータの状態に整形されていなくても問題ありません。

集計
集計にはツールパレットのLogicにある「Aggregate」を使用します。設定自体はDesigner Cloudの「Summarize」ツールやDesigner Desktopの「集計」ツールと同様です。

これでデータの加工ができましたので、次は中カテゴリをラジオボタンに表示し、選択されたデータのみにする処理を追加します。

対象のデータからラジオボタンとフィルタツールへの接続はこちらのようになります。

ラジオボタン
ツールパレットのInteractiveにある「Radio」をドラッグして接続します。

Label Sourceがラジオボタンに表示される文字列で、Value Sourceが実際のデータとして次のフィルタに渡されるデータです。今回はどちらも中カテゴリを使用しますので同じものを選択します。ラジオボタンのラベルとして表示するのは中カテゴリだけど、フィルタには対となるコードを渡したい場合Value Sourceはコードのフィールドを選択することになると思います。

フィルタ
ツールパレットのLogicにある「Filter」をドラッグし、Vと書いてある入力アンカーにRadioツールを、何も書いてない方の入力アンカーにAggregateツールを接続します。

「Set filter to」はValueを選択し、Columnは「中カテゴリ」、Operatorは「＝」を選択することで、中カテゴリがラジオボタンで選択された値と一致するという条件が設定できます。

ソート
あとはデータを年代別に並べ替えればデータの準備は完了です。
データの並べ替えにはツールパレットのLogicにある「Sort」をドラッグし接続します。

Columnは並べ替えるフィールド「年代」を選択、昇順にしますのでSort Directionは「ascending」を選択します。

データの準備が完了したので、最後にアプリに表示する表とグラフの設定をします。

表はツールパレットのDisplayにある「Table」、グラフは今回棒グラフを使いますので「Bar Chart」をSortツールに接続します。

表
TableツールはOrchestrate側で設定するものはありません。何を表示するかなどはDesign側の設定になります。

グラフ
Bar ChartツールはX軸、Y軸に表示するフィールドを選択します。今回はX軸に年代、Y軸に売上を設定しています。

これでOrchestrate側でのデータフローの作成は完了です！

2. Designキャンバスでレイアウトを作成

次にDesignキャンバスでレイアウトの設定をします。

まずは上部にBulding Blocksから「Heading」と「Paragraph」をドラッグで配置して設定画面のContentにアプリのタイトルと説明分を入力し、表やグラフとの間にスペースを設けるため「Spacer」を配置しました。青い斜線部分がSpacerですが、これがないと全部上に詰められてしまいます。。。

次ににWorkflow Toolsから「ラジオボタン」「表」「グラフ」をそれぞれ配置しました。

ラジオボタン
ラジオボタンは Labelに「中カテゴリ」と入力し、リストの上に表示する設定をしたのみです。

表
表は「Columns to include」で表示させるフィールド「年代」「売上」を選択し、行の高さを最小にしたかったため「Border Width」を1にしました。

グラフ
グラフは表と合わせて縦棒ではなく横棒にしたかったので「Invert Axes」にチェックを入れました。また、Y軸にラベルを表示するため「Y-Axis Label」に「売上」と入力しました。

これでDesign側の設定も完了しましたので、一度右上にある目のアイコンをクリックしてプレビュー画面を見てみます。

ラジオボタンで何も選択されていないので、表やグラフも表示されていないですが、中カテゴリを選択すると・・・

表とグラフが表示されました！すごい！

ちなみに、右上のPCのようなアイコン「Select screen size prebiew」をクリックすると、異なるデバイスでの見え方を確認することもできます。

3. 公開

アプリが完成しましたが、また他のユーザは見られませんので、右上の「Publish」ボタンをクリックしアプリを公開します。
「custom-path」にパスを入力してPublishボタンをクリックすれば、設定したパスで他のユーザもアプリを利用することができるようになります。

さいごに

以上、初めてApp Builderを使ってWebアプリを作成した手順のご紹介でした。

いやあ、こんな手軽に分析Webアプリが作成できるとは！
普段Designer CloudやDesigner Desktopを利用している人であればフローの構築は慣れたものですし、レイアウトも全く難しい箇所はありませんでした。

まだまだ使っていない機能や設定もありますので、今後も新しい発見をご紹介したいと思います！