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

1. はじめてのShiny 第81回 TokyoR 初⼼者セッション2 @kyyonko 2019/09/28
2. ⾃⼰紹介 Twitterなど 都内IT系企業勤務 近況 · @kyyonko アイコンはハイキューの⽉島（ググろう） パンダ本翻訳 - - - · 5⽉に転職してはや5ヶ⽉ データサイエンティストと⾒せかけた ただの集計屋 - - · 仕事がぼっちでつらい さすがにからは変わるかな… - - 2/52
3. いきなりですが… 参考⽂献
4. 参考⽂献 いきなりですけど参考⽂献です。 公式チュートリアル 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
5. ご協⼒ありがとうございました。 とりあえずRstudio公式とShiny Tutorialをベ ースに進めます。 アンケート 5/52
6. Shinyとは
7. Shinyとは いいところ 微妙なところ RStudio社が開発した、R⾔語で簡単にWebアプリケーションを作るための フレームワーク · Rだけ知っていればできる （※多少のHTML, CSS, JavaScriptなどの知識があったらよりよい） Rで分析した結果を簡易BIとして共有できる パッケージ化されているので、イチから他⾔語のフレームワーク（Ruby on RailsとかDjangoとか） で作らなくていい アプリケーションにしては必要なファイル数が少なめで覚えることが少なくて簡単 · · · · Rでしか作れないので商⽤にするにはちょっと微妙 簡単なだけあって柔軟性はちょっと低いかも？ ちょっと重い · · · 7/52
8. 実際のShinyの例 http://shiny.rstudio.com/gallery/ https://www.rstudio.com/products/shiny/shiny-user-showcase/ · · 8/52
9. このセッションではとりあえず、このあとの話を聞くための基礎事項をお伝えします。 作ってみる
10. ⽤意するもの Rstudio 別にRそのままでもターミナルでもいいけれどあったら便利なのでRstudioを⽤意しましょう shinyパッケージ ⼊れてなければ⼊れましょう ワーキングディレクトリ user/hoge/shinyみたいな親のディレクトリ⽤意して、その下に作りたいアプリのディレクトリを作 りましょう。これがアプリの名前になります。 例えば、「App-1」というディレクトリを作った例： とりあえず、カレントディレクトリはuser/hoge/shinyとして話を勧めましょう。 install.packages("shiny") . └── App-1 10/52
11. Shinyの構成要素 最⼩限が以下の2つ：uiとserver ui.R server.R ui.Rとserver.Rは2つに分けることもできるが、 中のコードだけまとめてApp.Rというファイルにするこ ともできる。 詳細は後述。 ui = user interface（ユーザーインターフェース） 簡単に⾔うと⾒た⽬についての設計を⾏うファイル。HTMLみたいなもの（というか実質HTML） · · ⽂字・図表が出てくる プルダウンやラジオボタンで何かを選べるようにする テキストを⼊⼒したりする - - - uiを実現するために裏で処理を⾏うためのコードを書くファイル · 11/52
12. Shinyの構成要素 最⼩限じゃないもの 今回は詳細・製作例など割愛するがこんな感じのものがある。 helper.R / global.R その他⾃作関数のファイルなど · ui, server通しての共通の処理を書いたりする ui, serverでは動かすたびにコードが実⾏されるが、 ⼀度で済ませたい重い処理（データ読み込 みなど）をここで書いたりする。 - - · Shinyアプリで使いたい⾃作関数は 別でファイルにしておき、Shinyアプリのディレクトリに置 いておいてsourceで呼んだりできる。 - 12/52
13. ファイル作成 本当に最⼩限だったらこれだけで動く。真っ⽩なページになります。 おまじないみたいなものと思っててください。 ui.R server.R ファイル構成はこんな感じ。 fluidPage( ) function(input, output) { } ├── App-1 ├── server.R └── ui.R 13/52
14. アプリの⽴ち上げ（実⾏）⽅法 カレントディレクトリで とすると、ブラウザか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
15. 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
16. どっちがいいの？ 2ファイルに分けるのと1ファイルにするのどちらがいいのかは特にどちらが推奨というのはないら しい？ · 詳細はこのあたりをご覧ください（※r-wakalang（後述）加⼊後） https://r-wakalang.slack.com/archives/C07DY6RB2/p1568799232002200 - 16/52
17. ui詳細
18. 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('<p> <label>A numeric input:</label><br /> <input type="number" name="n" value="7" min="1" max="30" /> </p>') ) 18/52
19. HTMLとの対応関係 HTML5対応している。画像を⽤意したら画像⼊れることもできるよ。 p <p> A paragraph of text h1 <h1> A first level header h2 <h2> A second level header h3 <h3> A third level header h4 <h4> A fourth level header h5 <h5> A fifth level header h6 <h6> A sixth level header a <a> A hyper link br <br> A line break (e.g. a blank line) div <div> A division of text with a uniform style span <span> An in-line division of text with a uniform style pre <pre> Text ‘as is’ in a fixed width font code <code> A formatted block of code img <img> An image strong <strong> Bold text em <em> Italicized text HTML Directly passes a character string as HTML code 19/52
20. レイアウト ui.RのfluidPage()関数は、⾃動で使っているブラウザのウィンドウに合 わせて表⽰させたいものを表⽰してくれるもの。 そのままでもいいけど、ブロックに分けてレイアウトできる。 https://bookdown.org/weicheng/shinyTutorial/ui.html レイアウトの詳細は http://shiny.rstudio.com/articles/layout-guide.html よく使われるのはsidebarLayoutとかfluidRowとか。 · · · · レイアウトに「panel」と呼ばれる要素を追加していくことで⾊々な ものを表⽰できる。 panelにも⾊々な種類がある。 - - 20/52
21. 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
22. sidebarLayout ちなみにsidebarPanelは増やせる。 fluidPage( titlePanel("title panel"), sidebarLayout( sidebarPanel("sidebar panel"), mainPanel("main panel") ), sidebarLayout( sidebarPanel("sidebar panel"), mainPanel("main panel") ) ) 22/52
23. 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
24. fluidRow サイドのパネルがいらない場合などに使え る。 まずrowを指定する。 · · fluidPage( # Application title titlePanel("sample"), fluidRow( "row1" ), fluidRow( "row2" ), fluidRow( "row3" ) ) 24/52
25. fluidRow rowの中にcolumn（列）を追記する。 列ができます。columnの前の数字は列の⼤きさ。 画像貼るスペースあんまりないのでやってみてくだ さい。 fluidPage( # Application title titlePanel("sample"), fluidRow( column(3, "col1"), column(3, "col2") ), fluidRow( "row2" ), fluidRow( "row3" ) ) 25/52
26. Control widget
27. Control widget widget（ウィジェット） Shinyアプリケーションに司令を送って操作させるためのもの。 代表的なものは以下。ボタンや、ラジ オボタン、⽇付範囲、スライドバーなど。 27/52
28. 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
29. 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
30. ボタンなど諸々の設置の仕⽅はわかったが、これを動かしてアプリケーションに活かす⽅ 法はどうするかについて学んでいく。 server詳細
31. server reactive uiでは出⼒する画⾯の調整のみを⾏った。 もう⼀つのファイル、serverでは、uiで定められた画⾯の変更に合わせて動作させる裏の仕組みを書 きます。 · · いつも適切な和訳が⾒当たらなくて困っている。「反応的」…？ · とりあえず「ボタン押したらそれに対して出てくる数値（データ）とか図表とかが変わる反応」的な イメージで良いと思います。 · 31/52
32. 円の⾯積計算アプリの例
33. とりあえずui library(shiny) fluidPage( titlePanel("円の⾯積を計算します"), sidebarLayout( sidebarPanel( numericInput("numInput", "半径を⼊れてください：", value = 7, min = 1, max = 30) ), mainPanel( textOutput("txt") ) ) ) sidebarPanelに半径（cm）を⼊れる枠を⽤意する。 mainPanelになにかあるけれども詳細は後述。 · · 33/52
34. 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
35. 実⾏例 実⾏するとこうなる。 数字を変えると⾯積も変わる。 35/52
36. hogeOutputとrenderHoge ここでuiに話を戻すと で、textOutput()関数で「テキストとして出⼒したい変数名」を指定する。 ここではその「変数名」 が"txt"。 textOutput("txt") この例ではテキストにしたけれども⾊々ある。 uiの「hogeOutput」とserverの「renderHoge」はセットで使われる。 · · 36/52
37. hogeOutputとrenderHogeの対応 37/52
38. ヒストグラムアプリの例
39. これにアプリ名を⼊れてディレクトリを指定するとこんなコードが ⾃動で⽣成される。 デフォルトのアプリ ここまで「ui.R」と「server.R」⽤意してね〜って⾔ってたけど、実はRstudioでShinyを作るときはメ ニューで簡単に作れる。 39/52
40. 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
41. 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
42. できるアプリ やってること となります。 uiのsidebarPanel内sliderInputでヒストグラムのbinの下図を指定して変数"bins"に渡している serverではまずfaithfulデータセットの2列⽬を取り出し、uiのbinsで指定した個数のbinを指定し てヒストグラムを描写するようにdistPlot変数に指⽰ uiのmainPanel内にdistPlotをplotOutput("distPlot")関数で出⼒ · · · 42/52
43. 今⽇はtextとplotを例にしたけど、⾊々使ってみてね！ 43/52
44. その他応⽤
45. その他応⽤ このままだと⽩いし殺⾵景だけども、⾊々⾃分でいじったりできる。 パッケージでお⼿軽に⾒た⽬いじるにはshinydashboardがキレイで良い。 https://rstudio.github.io/shinydashboard/ · HTML, CSS, JavaScriptなど知っていたら便利 - · 45/52
46. Shinyアプリの共有⽅法
47. 共有⽅法 出来上がったShinyアプリケーションを共有する⽅法は⼤きく分けて2つある。 1. Rファイル（ui.R, server.R, その他）を渡す 2. Webページとして共有する 47/52
48. Rファイルを渡す ui.R, server.R, その他を渡す 渡す相⼿もRを持っていれば、渡した相⼿に実⾏してもらう · · 48/52
49. 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
50. まとめ
51. まとめ さくっとShinyとは、Shinyの基本要素について説明しました。 みんな使ってみてね。⼿を動かして覚えるのが⼀番。 詰まったらslack r-wakalangの#package-shiny部屋で質問してみよう https://qiita.com/uri/items/5583e91bb5301ed5a4ba · · 公式チュートリアルがなんだかんだ⼀番いいかも - · 51/52
52. Enjoy!