第81回 TokyoR 初心者セッション2 はじめてのShiny

はじめてのShiny
第81回 TokyoR 初⼼者セッション2
@kyyonko
2019/09/28

View Slide

⾃⼰紹介
Twitterなど
都内IT系企業勤務
近況
·
@kyyonko
アイコンはハイキューの⽉島（ググろう）
パンダ本翻訳
-
-
-
·
5⽉に転職してはや5ヶ⽉
データサイエンティストと⾒せかけた
ただの集計屋
-
-
·
仕事がぼっちでつらい
さすがにからは変わるかな…
-
-
2/52

View Slide

いきなりですが…
参考⽂献

View Slide

参考⽂献
いきなりですけど参考⽂献です。
公式チュートリアル
https://shiny.rstudio.com/tutorial/
公式チュートリアルの⽇本語訳（by @hoxo_mさん）←ちょっと古め
https://qiita.com/hoxo_m/items/c8365117f3444fb51df4
Shiny Tutorial（スッキリしていてわかりやすい） https://bookdown.org/weicheng/shinyTutorial/
Up-urさんのブログ
https://www.randpy.tokyo/entry/shiny_5
Shiny Developer Series（機能⾯でのアップデートを追えたりする）
https://shinydevseries.com/
shinydashboard
https://rstudio.github.io/shinydashboard/
·
動画もある
その他ドキュメントも本当に豊富
http://shiny.rstudio.com/articles/
-
-
·
·
·
·
·
4/52

View Slide

ご協⼒ありがとうございました。
とりあえずRstudio公式とShiny Tutorialをベ
ースに進めます。
アンケート
5/52

View Slide

Shinyとは

View Slide

Shinyとは
いいところ
微妙なところ
RStudio社が開発した、R⾔語で簡単にWebアプリケーションを作るための
フレームワーク
·
Rだけ知っていればできる
（※多少のHTML, CSS, JavaScriptなどの知識があったらよりよい）
Rで分析した結果を簡易BIとして共有できる
パッケージ化されているので、イチから他⾔語のフレームワーク（Ruby on RailsとかDjangoとか）
で作らなくていい
アプリケーションにしては必要なファイル数が少なめで覚えることが少なくて簡単
·
·
·
·
Rでしか作れないので商⽤にするにはちょっと微妙
簡単なだけあって柔軟性はちょっと低いかも？
ちょっと重い
·
·
·
7/52

View Slide

実際のShinyの例
http://shiny.rstudio.com/gallery/
https://www.rstudio.com/products/shiny/shiny-user-showcase/
·
·
8/52

View Slide

このセッションではとりあえず、このあとの話を聞くための基礎事項をお伝えします。
作ってみる

View Slide

⽤意するもの
Rstudio
別にRそのままでもターミナルでもいいけれどあったら便利なのでRstudioを⽤意しましょう
shinyパッケージ
⼊れてなければ⼊れましょう
ワーキングディレクトリ
user/hoge/shinyみたいな親のディレクトリ⽤意して、その下に作りたいアプリのディレクトリを作
りましょう。これがアプリの名前になります。
例えば、「App-1」というディレクトリを作った例：
とりあえず、カレントディレクトリはuser/hoge/shinyとして話を勧めましょう。
install.packages("shiny")
.
└── App-1
10/52

View Slide

Shinyの構成要素
最⼩限が以下の2つ：uiとserver
ui.R
server.R
ui.Rとserver.Rは2つに分けることもできるが、中のコードだけまとめてApp.Rというファイルにするこ
ともできる。詳細は後述。
ui = user interface（ユーザーインターフェース）
簡単に⾔うと⾒た⽬についての設計を⾏うファイル。HTMLみたいなもの（というか実質HTML）
·
·
⽂字・図表が出てくる
プルダウンやラジオボタンで何かを選べるようにする
テキストを⼊⼒したりする
-
-
-
uiを実現するために裏で処理を⾏うためのコードを書くファイル
·
11/52

View Slide

Shinyの構成要素
最⼩限じゃないもの
今回は詳細・製作例など割愛するがこんな感じのものがある。
helper.R / global.R
その他⾃作関数のファイルなど
·
ui, server通しての共通の処理を書いたりする
ui, serverでは動かすたびにコードが実⾏されるが、⼀度で済ませたい重い処理（データ読み込
みなど）をここで書いたりする。
-
-
·
Shinyアプリで使いたい⾃作関数は別でファイルにしておき、Shinyアプリのディレクトリに置
いておいてsourceで呼んだりできる。
-
12/52

View Slide

ファイル作成
本当に最⼩限だったらこれだけで動く。真っ⽩なページになります。
おまじないみたいなものと思っててください。
ui.R
server.R
ファイル構成はこんな感じ。
fluidPage(
)
function(input, output) {
}
├── App-1
├── server.R
└── ui.R
13/52

View Slide

アプリの⽴ち上げ（実⾏）⽅法
カレントディレクトリで
とすると、ブラウザかRstudio内のブラウザが⽴ち上がる。 URL欄にはhttp://127.0.0.1:4842/とか
出る。
でもOK。
Rstudioを使っている場合はもっと簡単にできて、ui.Rかserver.Rの右上の
「▶Run App」ボタンを押すだけで実⾏できる。
runApp('App-1')
runApp('~/user/hoge/shiny/App-1')
14/52

View Slide

App.R
ファイル構成：
ui.Rとserver.Rの2ファイルに分けなくても、両⽅の要素を盛り込んだ1つのファイルapp.Rにしても
よい。
その場合は末尾にshinyApp(ui = ui, server = server)をつける
·
·
library(shiny)
ui <- fluidPage(
)
server <- function(input, output) {
}
# shinyApp(ui, server) でも⼤丈夫
shinyApp(ui = ui, server = server)
├── App-1
└── app.R
15/52

View Slide

どっちがいいの？
2ファイルに分けるのと1ファイルにするのどちらがいいのかは特にどちらが推奨というのはないら
しい？
·
詳細はこのあたりをご覧ください（※r-wakalang（後述）加⼊後）
https://r-wakalang.slack.com/archives/C07DY6RB2/p1568799232002200
-
16/52

View Slide

ui詳細

View Slide

HTMLとの対応関係
HTMLを編集する気分で書ける。
fluidPage(
h1("Hello Shiny!"),
hr(),
p(strong("bold font "), em("italic font")),
p(code("code block")),
a(href="http://www.google.com", "link to Google"),
HTML('
A numeric input:

')
)
18/52

View Slide

HTMLとの対応関係
HTML5対応している。画像を⽤意したら画像⼊れることもできるよ。
p A paragraph of text
h1 A first level header
h2 A second level header
h3 A third level header
h4 A fourth level header
h5 A fifth level header
h6 A sixth level header
a A hyper link
br
A line break (e.g. a blank line)
div A division of text with a uniform style
span An in-line division of text with a uniform style
pre Text ‘as is’ in a fixed width font
code A formatted block of code
img An image
strong Bold text
em Italicized text
HTML Directly passes a character string as HTML code
19/52

View Slide

レイアウト
ui.RのfluidPage()関数は、⾃動で使っているブラウザのウィンドウに合
わせて表⽰させたいものを表⽰してくれるもの。
そのままでもいいけど、ブロックに分けてレイアウトできる。
https://bookdown.org/weicheng/shinyTutorial/ui.html
レイアウトの詳細は
http://shiny.rstudio.com/articles/layout-guide.html
よく使われるのはsidebarLayoutとかfluidRowとか。
·
·
·
·
レイアウトに「panel」と呼ばれる要素を追加していくことで⾊々な
ものを表⽰できる。
panelにも⾊々な種類がある。
-
-
20/52

View Slide

ui.R
server.R
titlePanel
タイトルパネル。アプリのタイトルを書ける
sidebarLayout
下に表⽰させたいものを書ける
sidebarPanelかmainPanelだけにするとエ
ラーになるので、 sidebarLayoutを使うとき
は両⽅書きましょう。
sidebarLayout
fluidPage(
titlePanel("title panel"),
sidebarLayout(
sidebarPanel("sidebar panel"),
mainPanel("main panel")
)
)
function(input, output) {
}
sidebarPanel：サイドバーパネル。グレ
ーの四⾓に囲まれる
mainPanel：メインパネル。⽩い広いスペ
ースに表⽰される
·
·
21/52

View Slide

sidebarLayout
ちなみにsidebarPanelは増やせる。
fluidPage(
sidebarLayout(
),
sidebarLayout(
)
)
22/52

View Slide

sidebarLayout
ちなみに、sidebarPanelはデフォルトは左だが右にすることもできる。
position = "right"を追記すればOK。
fluidPage(
sidebarLayout(
),
sidebarLayout(position = "right",
)
)
23/52

View Slide

fluidRow
サイドのパネルがいらない場合などに使え
る。
まずrowを指定する。
·
·
fluidPage(
# Application title
titlePanel("sample"),
fluidRow(
"row1"
),
fluidRow(
"row2"
),
fluidRow(
"row3"
)
)
24/52

View Slide

fluidRow
rowの中にcolumn（列）を追記する。
列ができます。columnの前の数字は列の⼤きさ。画像貼るスペースあんまりないのでやってみてくだ
さい。
fluidPage(
# Application title
titlePanel("sample"),
fluidRow(
column(3, "col1"),
column(3, "col2")
),
fluidRow(
"row2"
),
fluidRow(
"row3"
)
)
25/52

View Slide

Control widget

View Slide

Control widget
widget（ウィジェット）
Shinyアプリケーションに司令を送って操作させるためのもの。代表的なものは以下。ボタンや、ラジ
オボタン、⽇付範囲、スライドバーなど。
27/52

View Slide

Control widgetの例
数字を⼊⼒できるようにした。これにはウィジェットnumericInputを⽤いた。
# ui
library(shiny)
fluidPage(
titlePanel("Hello Shiny!"),
sidebarLayout(
sidebarPanel(
numericInput("numInput", "A numeric input:", value = 7, min = 1, max = 30)
),
mainPanel(
p(strong("bold font "), em("italic font")),
p(code("code block")),
a(href="http://www.google.com", "link to Google"))
)
)
28/52

View Slide

Control widgetの例
1つ⽬の引数
"numInput"：変数名と思ってください。
2つ⽬の引数
"A numeric input:"：ウィジェットの上に表⽰される⽂字
numericInput("numInput", "A numeric input:", value = 7, min = 1, max = 30)
⼊⼒した数字がここに格納されるイメージ
·
# イメージ
numInput <- 7
value：デフォルト値
min：今回の⼊⼒ウィジェットで扱える最⼩値
max：今回の⼊⼒ウィジェットで扱える最⼤値
·
·
·
29/52

View Slide

ボタンなど諸々の設置の仕⽅はわかったが、これを動かしてアプリケーションに活かす⽅
法はどうするかについて学んでいく。
server詳細

View Slide

server
reactive
uiでは出⼒する画⾯の調整のみを⾏った。
もう⼀つのファイル、serverでは、uiで定められた画⾯の変更に合わせて動作させる裏の仕組みを書
きます。
·
·
いつも適切な和訳が⾒当たらなくて困っている。「反応的」…？
·
とりあえず「ボタン押したらそれに対して出てくる数値（データ）とか図表とかが変わる反応」的な
イメージで良いと思います。
·
31/52

View Slide

円の⾯積計算アプリの例

View Slide

とりあえずui
library(shiny)
fluidPage(
titlePanel("円の⾯積を計算します"),
sidebarLayout(
sidebarPanel(
numericInput("numInput", "半径を⼊れてください：", value = 7, min = 1, max = 30)
),
mainPanel(
textOutput("txt")
)
)
)
sidebarPanelに半径（cm）を⼊れる枠を⽤意する。
mainPanelになにかあるけれども詳細は後述。
·
·
33/52

View Slide

server
library(shiny)
shinyServer(function(input, output) {
output$txt = renderText({
paste0("円の⾯積は: ", pi*input$numInput^2)
})
})
shinyServer(function(input, output))の部分はおまじない。
output$txt
paste0はみんな知ってる⽂字列結合関数です（shiny関係ない）
·
·
セットの名前
output$（固定名）とtxt（⾊々変えられる変数の名前）に別れていると思っててください
この変数にrenderText()関数を⼊れることで、{}内の⽂字を出⼒させます。
renderText()関数はinput$numInputの値を受け取って、計算して、その計算結果を⽂字列と
して返してくれます。
-
-
-
-
·
34/52

View Slide

実⾏例
実⾏するとこうなる。
数字を変えると⾯積も変わる。
35/52

View Slide

hogeOutputとrenderHoge
ここでuiに話を戻すと
で、textOutput()関数で「テキストとして出⼒したい変数名」を指定する。ここではその「変数名」
が"txt"。
textOutput("txt")
この例ではテキストにしたけれども⾊々ある。
uiの「hogeOutput」とserverの「renderHoge」はセットで使われる。
·
·
36/52

View Slide

hogeOutputとrenderHogeの対応
37/52

View Slide

ヒストグラムアプリの例

View Slide

これにアプリ名を⼊れてディレクトリを指定するとこんなコードが
⾃動で⽣成される。
デフォルトのアプリ
ここまで「ui.R」と「server.R」⽤意してね〜って⾔ってたけど、実はRstudioでShinyを作るときはメ
ニューで簡単に作れる。
39/52

View Slide

ui.R
library(shiny)
# Define UI for application that draws a histogram
shinyUI(fluidPage(
# Application title
titlePanel("Old Faithful Geyser Data"),
# Sidebar with a slider input for number of bins
sidebarLayout(
sidebarPanel(
sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30)
),
# Show a plot of the generated distribution
mainPanel(
plotOutput("distPlot")
)
)
))
40/52

View Slide

server.R
library(shiny)
# Define server logic required to draw a histogram
shinyServer(function(input, output) {
output$distPlot <- renderPlot({
# generate bins based on input$bins from ui.R
x <- faithful[, 2]
bins <- seq(min(x), max(x), length.out = input$bins + 1)
# draw the histogram with the specified number of bins
hist(x, breaks = bins, col = 'darkgray', border = 'white')
})
})
41/52

View Slide

できるアプリ
やってること
となります。
uiのsidebarPanel内sliderInputでヒストグラムのbinの下図を指定して変数"bins"に渡している
serverではまずfaithfulデータセットの2列⽬を取り出し、uiのbinsで指定した個数のbinを指定し
てヒストグラムを描写するようにdistPlot変数に指⽰
uiのmainPanel内にdistPlotをplotOutput("distPlot")関数で出⼒
·
·
·
42/52

View Slide

今⽇はtextとplotを例にしたけど、⾊々使ってみてね！
43/52

View Slide

その他応⽤

View Slide

その他応⽤
このままだと⽩いし殺⾵景だけども、⾊々⾃分でいじったりできる。
パッケージでお⼿軽に⾒た⽬いじるにはshinydashboardがキレイで良い。
https://rstudio.github.io/shinydashboard/
·
HTML, CSS, JavaScriptなど知っていたら便利
-
·
45/52

View Slide

Shinyアプリの共有⽅法

View Slide

共有⽅法
出来上がったShinyアプリケーションを共有する⽅法は⼤きく分けて2つある。
1. Rファイル（ui.R, server.R, その他）を渡す
2. Webページとして共有する
47/52

View Slide

Rファイルを渡す
ui.R, server.R, その他を渡す
渡す相⼿もRを持っていれば、渡した相⼿に実⾏してもらう
·
·
48/52

View Slide

Webページとして共有する
shinyapps.io
Shiny Server
RStudio Connect
要するにWebサイトにして⾒せる
相⼿にR環境がなくても（Rが使えなくても）OK
·
·
https://www.shinyapps.io/
RStudio社が提供する Shiny アプリ専⽤のホスティングサービス
·
·
https://github.com/rstudio/shiny-server/blob/master/README.md
Shinyアプリをホストするために設計されたWebサーバ
無料。オープンソースであり、GitHub上でコードが公開されている
Linuxサーバが必要
·
·
·
·
https://www.rstudio.com/products/connect/
新しいサービス。Shinyに限らず⾊々なR製のものをRStudioからパブリッシュできる
·
·
49/52

View Slide

まとめ

View Slide

まとめ
さくっとShinyとは、Shinyの基本要素について説明しました。
みんな使ってみてね。⼿を動かして覚えるのが⼀番。
詰まったらslack r-wakalangの#package-shiny部屋で質問してみよう
https://qiita.com/uri/items/5583e91bb5301ed5a4ba
·
·
公式チュートリアルがなんだかんだ⼀番いいかも
-
·
51/52

View Slide

Enjoy!

View Slide

第81回 TokyoR 初心者セッション2 はじめてのShiny

第81回 TokyoR 初心者セッション2 はじめてのShiny

Kyoko Matsumura

More Decks by Kyoko Matsumura

Other Decks in Programming

Featured

Transcript