Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Kyoko Matsumura
September 28, 2019

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

Kyoko Matsumura

September 28, 2019
Tweet

More Decks by Kyoko Matsumura

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  6. Shinyとは

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  11. 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

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  17. ui詳細

    View Slide

  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('
    A numeric input:


    ')
    )
    18/52

    View Slide

  19. 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

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  26. Control widget

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  32. 円の⾯積計算アプリの例

    View Slide

  33. とりあえず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

  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

    View Slide

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

    View Slide

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

    View Slide

  37. hogeOutputとrenderHogeの対応
    37/52

    View Slide

  38. ヒストグラムアプリの例

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  44. その他応⽤

    View Slide

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

    View Slide

  46. Shinyアプリの共有⽅法

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  50. まとめ

    View Slide

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

    View Slide

  52. Enjoy!

    View Slide