Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

参考⽂献いきなりですけど参考⽂献です。公式チュートリアル 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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Shinyとは

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

アプリの⽴ち上げ（実⾏）⽅法カレントディレクトリでとすると、ブラウザか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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

ui詳細

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

sidebarLayout ちなみにsidebarPanelは増やせる。 fluidPage( titlePanel("title panel"), sidebarLayout( sidebarPanel("sidebar panel"), mainPanel("main panel") ), sidebarLayout( sidebarPanel("sidebar panel"), mainPanel("main panel") ) ) 22/52

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Control widget

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

円の⾯積計算アプリの例

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

hogeOutputとrenderHogeの対応 37/52

Slide 38

Slide 38 text

ヒストグラムアプリの例

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

その他応⽤

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Shinyアプリの共有⽅法

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

まとめ

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Enjoy!