Alteryx謹製の動的ダッシュボード作成ツールFlightDeckを使ってみる(基本的な仕組み編)

こんにちは、小澤です。

AlteryxでPredictive系のツールなどを使っていると、出力に動的なレポートが含まれるものがあります。

この仕組みは、Rのhtmlwidgetを使って実現しています。

• AlteryxでRツールから動的なグラフを出力する ｜ DevelopersIO

とはいえ、このUIを全部作るのはなかなか大変そうです。

そんなこのUIをよきに計らってくれるのが今回紹介するFlightDeckというパッケージとなっています。 FlightDeckはAlteryx外のRからも直接使えるパッケージとなっています。

FlightDeckを使ってみる

FlightDeckはAlteryxのGithubで公開されています。

• alteryx/flightdeck: Interactive Dashboard for Predictive Models
• Interactive Dashboards for Predictive Models • flightdeck

早速どのように使うのかを見ていきましょう。

インストール

まずはインストールと行きたいところですが、FlightDeckはCRANに登録されていないのでGithubから入れる必要があります。 以下のどちらかの方法でインストールが可能です。

# リポジトリを指定してインストール
install.packages("flightdeck",
  repos = c(getOption('repos'), alteryx = 'https://alteryx.github.io/drat')
)

# あるいはdevtoolsを使う
devtools::install_github('alteryx/flightdeck')

なお、AlteryxのPredictiveツールに含まれるRを利用する場合はインストールの必要はありません。

動かしてみる

FlightDeckで生成される内容は以下の3つに分かれます。

• Header : 上部のタイトルが表示される部分
• Sidebar : 左側のメニュー
• Body : 右側の本体部分

Headerには、タイトルの表示とメニューの表示/非表示の切り替えを行うボタンが表示されます。

Sidebarはメニューになっており、Bodyに表示する内容を複数ページに分けて切り替えることが可能になっています。

Body部分には表示するパーツを配置していき画面の構成を作成していきます。

では、まず基本的なパーツであるInfoBoxを作成してみましょう。InfoBoxはテキストや数値などを表示するためのパーツです。

library(flightdeck)

# InfoBoxの作成
# 1行目に表示するテキスト、2行目に表示するテキスト、3行目に表示するテキストの順で指定可能
# colorで左側の色、iconで左側に表示するアイコンを指定する
infobox1 <- fdInfoBox('何らかの指標', '80.7%', color = 'blue', icon = fdIcon('chart-line', lib = 'entypo'))

# 作成したパーツ単体の結果を確認する場合はfdPreview関数に渡す
infobox1 %>% fdPreview()

結果は以下のようになります。

このようなfdXX系の関数でパーツを作成していきBody部分を組み立てていきます。

複数のパーツを横に並べるには、fdRow関数を使います。

row1 <- fdRow(
  fdInfoBox("マッカラン", "40%", "スコッチ", color = 'green', icon = fdIcon("check")),
  fdInfoBox("ラフロイグ", "40%", "スコッチ", color = 'green', icon = fdIcon("check"))
)
row1 %>% fdPreview()

これで以下のような表示となります(※ 横幅が狭い場合項目が縦に並ぶ場合があります)。

このように1行に表示するものをfdRowで表現し、それを複数組み合わせることでBodyの1ページ分に表示させる内容を定義します。

1ページに含む情報を表現するにはfdPage関数の引数にfdRowを渡してやります。

row2 <- fdRow(
  fdInfoBox("白州", "43%", "ジャパニーズ", color = 'blue', icon = fdIcon("check")),
  fdInfoBox("ジムビーム", "40%", "バーボン", color = 'blue', icon = fdIcon("check"))
)

# fdPageにfdRowを渡す
# FlightDeckでは複数ページを切り替えて表示できるので、
# id引数でこのページを表す一意な値を与えるとともに初期状態で表示するかをdisplay引数に渡す
page1 <- fdPage(row1, row2, id = 'page1', display=TRUE)

page1 %>% fdPreview()

結果は以下のようになります。

さて、ではこの内容をBodyとして全体を組み立ててみましょう。

# dfSidebarMenuでSidebar部分に表示するリストを定義する
# 表示項目名、項目の左側に表示されるアイコン、クリックしたときに表示するページのidの3つ指定する
sidebar <- fdSidebarMenu(
  fdMenuItem('Page1', icon = fdIcon('th'), pageName = 'page1')
)

# Header, Sidebar, Bodyをそれぞれ指定して全体を組み立てる
fdBoard(
  fdHeader(title = "FlightDeckだよ"),
  fdSidebar(sidebar),
  fdBody(page1)
)

結果は以下のようになります。

なお、ここまでの画像はすべてRStudioのViewerをキャプチャしたものとなっていますが、動的なレポートとしてこのままRMarkdownやShinyなどで利用することも可能です。

複数ページ作るには？

さて、Sidebarによる画面切り替えでBodyは複数ページを持つことが可能です。 その方法を見てみましょう。

先ほどのスクリプトを以下のように書き換えてみます。

row1 <- fdRow(
  fdInfoBox("マッカラン", "40%", "スコッチ", color = 'green', icon = fdIcon("check")),
  fdInfoBox("ラフロイグ", "40%", "スコッチ", color = 'green', icon = fdIcon("check"))
)
row2 <- fdRow(
  fdInfoBox("白州", "43%", "ジャパニーズ", color = 'blue', icon = fdIcon("check")),
  fdInfoBox("ジムビーム", "40%", "バーボン", color = 'blue', icon = fdIcon("check"))
)

# row1はpage1に配置
page1 <- fdPage(row1, id = 'page1', display=TRUE)
# row2はpage2に配置
# page2は切り替えた際に初めて表示させるのでdisplayはFALSE
page2 <- fdPage(row2, id = 'page2', display=FALSE)

# Sidebarの引数にもpage1, page2両方を渡す
sidebar <- fdSidebarMenu(
  fdMenuItem('Page1', icon = fdIcon('th'), pageName = 'page1'),
  fdMenuItem('Page2', icon = fdIcon('th'), pageName = 'page2')
)

# Bodyの項目として複数のページを指定
fdBoard(
  fdHeader(title = "FlightDeckだよ"),
  fdSidebar(sidebar),
  fdBody(page1, page2)
)

結果は1ページ目、2ページ目でそれぞれ以下のようになります。

FlightDeckで利用可能なパーツについて

さて、ここまででFlightDeckを構成する要素とそれぞれの組み立て方を解説しました。 あとは、Body部分に配置する要素をいい感じに組み合わせていけば素敵なダッシュボードが作成できます。

とはいえ、実はこの部分はパーツを組み立てるための関数を使っていくのみです。 fdで始まる各種関数でBodyを構成する要素を組み立て可能です。

ここまでの解説が長くなってしまったので、具体的にどのようなパーツが利用可能かは、別途書かせていただきたいと思います。 先行して見たいよーって方は公式のリファレンスをご参照ください。

• Function reference • flightdeck

おわりに

今回は、Alteryx謹製のRから利用可能なインタラクティブダッシュボードを作るためのパッケージであるFlightDeckを紹介しました。

ダッシュボード内にどのような情報を入れることができるのかについては、今後解説していきたいと思います。 ぜひ、お楽しみに！

Alteryxの導入なら、クラスメソッドにおまかせください

日本初のAlteryxビジネスパートナーであるクラスメソッドが、Alteryxの導入から活用方法までサポートします。14日間の無料トライアルも実施中ですので、お気軽にご相談ください。