Np-Urのデータ分析教室

オーブンソースデータなどWeb上から入手できるデータを用いて、RとPython両方使って分析した結果を書いていきます

【Shiny100本ノック No.2】Google Data StudioもどきをRで作る

記念すべきShiny100ノックの第1回を執筆してから3週間近くたってしまいました。

ちょっと忙しくて更新が止まってしまっていましたが、今後は週1本以上の更新ペースで頑張って執筆していくので、皆さま応援お願いします。

さて、前回は皆大好き(?)Google アナリティクスのAPIをShinyから叩いてデータを取得してみる、ということをやってみました。
www.randpy.tokyo

これはGoogleが提供するQuery Explorerというツールを簡単にRで実現したものになります。

せっかくRを使っているので、第2回では前回やったデータ取得に加えてグラフ化までをやっていきましょう。

ちなみに、Google Data Studioをご存知でしょうか?
Google Data Studioとは、GoogleアナリティクスやGoogle Adwords などからAPI経由でデータを取得して、グラフ化するツールです。

Google Data Studioは最近かなり注目されているサービスですが、RユーザーならShinyで同じような機能を作っちゃいましょう!

今回作成するShinyアプリのイメージ

今回は第1回でも登場しましたが、navbarPageとtabPanelを使って2つのタブを持つアプリを作ります。
1つ目はAPIでデータ取得するGoogleアナリティクスアカウントを選ぶページ。2つ目は実際にmetricsやdimensionを指定してデータを取得する機能とグラフ出力するページです。

1ページ目のイメージ

f:id:Np-Ur:20170821031027p:plain
まず、Googleアカウントに連携して、そこから対象のGoogle アナリティクスアカウントを選択します。

2ページ目のイメージ

f:id:Np-Ur:20170821031041p:plain
前半部分は第1回と同様の機能です。

後半部分で

  • 円グラフ
  • 棒グラフ(タイプ1、タイプ2)
  • 散布図
  • 折れ線グラフ
  • 面グラフ

のうち出力したいグラフの種類を選択します。

選択後ボタンをクリックすると、自動でグラフが出力されるという機能です。

事前準備

いつも通り、コードはGithubにアップしてあります。
github.com
こちらのディレクトリを手元にダウンロードしてもらえれば、動くはずです。

なお、GoogleアナリティクスAPIを使うにあたって、

  • クライアントID
  • クライアントシークレット

が必要なので、まだ取得していない方はGoogle Developer Consoleを参考に取得しておいてください。

取得できたらserver.Rファイル内の、10行目と11行目に入力しておいてください。

そして扱うライブラリですが、

install.packages("shiny", dependencies = TRUE)
install.packages("googleAnalyticsR", dependencies = TRUE)
install.packages("googleAuthR", dependencies = TRUE)
install.packages("listviewer", dependencies = TRUE)
install.packages("ggplot2", dependencies = TRUE)
install.packages("gridExtra", dependencies = TRUE)
install.packages("Rmisc", dependencies = TRUE)

このあたりは事前にインストールしておいてください。

コード解説

server.Rとui.Rのそれぞれ前半部分は第1回記事で説明した内容なので割愛します。
後半から解説していきます。

グラフの出力例を表示する

ユーザーにとって、グラフ出力するボタンを押す前に、いったいどんなグラフが出力されるか確認しておきたいですよね?
そこで、select boxで選んだグラフに関して、それぞれ出力例を表示してあげるとユーザーフレンドリーでしょう。

対象となるui.Rコードは以下の部分。

server.Rコードは以下の部分です。

まず、ui.R側でグラフを選択し、それをserver.R側で受け取り、どんなグラフ出力例を表示するかをui.Rに送って表示します。
ui.R → server.R → ui.R
というshinyではよくある流れですね。

グラフ出力例の画像は事前にスクショをとってserver.Rやui.Rと同じディレクトリに保存しておきましょう。
なお、最初にあげたGithubディレクトリにはすでに画像が入っているのでそのまま使ってもらって問題ないです!

ちなみに画像をserver.Rからui.Rに送る際にはrenderImageを使い、受け取った画像をui.Rで出力するときはimageOutputを使います。
詳しくは、公式サイトのShiny - Render images in a Shiny appを見てもらうのが良いと思います。

円グラフの出力

ここからは、円グラフを出力する処理について説明します。
該当するui.Rのコードは

でserver.Rのコードは

となっています。
74行目の以下の処理で

input_graph_type = input$graph_type

とありますが、ここでui.R側で選択されたグラフの種類を受け取って、それごとにグラフ出力のコードを書いています。

ui.R側は非常に簡単ですね。グラフ出力するためのトリガーである、actionButtonとserver.R側から送られたグラフをplotOutputを使って出力する処理を書くだけです。

sever.R側はちょっと厄介。どうしてかというと、dimensionsの数やmetricsの数をどれだけユーザーが入力してくるか分からないからです。

dimensionの数が2以上であれば、それらを結合した項目にする必要があります。
例えば、User Type(New UserかReturning User)とDevice Category(PCかスマホかタブレット)でdimensionを指定した場合は、

  • New UserでPC
  • New Userでスマホ
  • New Userでタブレット
  • Returning UserでPC
  • Returning Userでスマホ
  • Returning Userでタブレット

という2×3で6つのラベルを持つ円グラフが出力されてほしいわけです。

3つdimensionを指定したら、更にラベルは増えていきます(まあそんなに多くdimension指定したら、意味わからないグラフになってしまうのでやる人は少ないと思いますが…)。

ということで、上記のことを考慮した処理を、75行目から83行目にて書いています。

また、metricsの数が多くなれば、その数だけ円グラフを出力してあげる必要があります。例えば、ユニークユーザー数に関する円グラフと、セッション数に関する円グラフとか。

複数のグラフをまとめるために、いくつか方法はあるのでしょうが、今回はmultiplotという関数を用いています。
引数にグラフをlist形式で渡すのと、何列表示にするのかを 「cols=2」みたいに指定するだけでOKです。簡単ですね!

そのあたりは85行目から95行目に書いてあります。

なお、グラフ描写にはggplot2を使っています。
ggplot2で円グラフを書くためには、まずgeom_bar()にて積み上げ型の棒グラフ表示を作っあとに、coord_polarという処理をします。

デフォルトの円グラフだと、各ラベルの数値が見えないので、geom_text()を使って数字を表示しています。
そしてそれだけだと、謎の位置に数字が表示されてしまって非常に見にくいため、position = position_stack(vjust = 0.5)を指定して各扇形の中央に数値が表示されるにしています。

もっと多彩な表現をしたい方は、公式サイトのPolar coordinatesを見てもらうのが良いと思います!

円グラフ以外の出力処理についても、大体上で説明したことをやっているのでコードを読んでもらえれば分かると思います。
なので割愛させてください。

まとめと次回予定

今回は次回に引き続いて、Google Data Studioみたいに、

  • API経由のデータ取得
  • グラフによるデータ可視化

という2つの機能をShinyにて作りました。

別にこんなことしなくてもGoogle Data Studio使えばよいだろう、と言われてしまいそうですが…。
Googleのツールが有能すぎてなんか悔しいので、「そ、そんぐらいRで簡単に作れるし!」と言いたいがために書いてみました。

ただ、せっかくShinyなのでもう少しインタラクティブに書くべきですよね。ggplot2をそこまで生かしきれていない気もするし…。
そこで次回ですが、グラフの色など見た目をUI側で指定して、もっと柔軟なグラフ化をしてみます!

そして更に、せっかく作ったグラフは、他の人に共有できるようにパワーポイントなどにまとめてみたいですよね?
ということで、作ったグラフを元にパワーポイントを作成してダウンロードする機能を作っていきましょう!!

【Shiny100本ノック No.3】はこちらから。
www.randpy.tokyo