Help us understand the problem. What is going on with this article?

RStudio Shiny チュートリアル レッスン3 コントロールウィジェットを追加しよう

More than 3 years have passed since last update.

この記事は Shiny 公式サイトのチュートリアルを翻訳したものです。
http://shiny.rstudio.com/tutorial/lesson3/

チュートリアル目次:http://d.hatena.ne.jp/hoxo_m/20151222/p1

LESSON3 コントロールウィジェットを追加しよう

ウィジェットとは何でしょうか? Shiny におけるウィジェットとは、Web用のガジェットのことです。Shiny アプリはユーザーと交信し、彼らが見たいものについて表示を変える必要があります。そのために使われるのがウィジェットです。

Shiny ウィジェットは、ユーザーの与えた値を収集します。ユーザーがウィジェットの値を変えると、Shiny アプリに使われる値も更新されます。このインタラクションについてはレッスン4で見ていきます。

コントロールウィジェット

basic-widgets.png
shiny パッケージには、基本的なウィジェットセットが入っています。対応する関数には、目的に合った名前が付けられています。例えば、actionButton はアクションボタンを生成し、sliderInput はサイドバーを表示させます。

標準的な Shiny ウィジェットは、以下の通りです。

関数 ウィジェット
actionButton アクションボタン
checkboxGroupInput チェックボックスグループ
checkboxInput チェックボックス
dateInput 日付選択用カレンダー
dateRangeInput 日付の範囲選択用のカレンダーペア
fileInput ファイルアップロードコントロールウィザード
helpText インプットフォームに追加できるヘルプテキスト
numericInput 数値入力用フィールド
radioButtons ラジオボタン
selectInput セレクトボックス
sliderInput スライダーバー
submitButton 送信ボタン
textInput テキスト入力用フィールド

これらのウィジェットは、Twitter Bootstrap により作られています。Twitter Bootstrap は、ユーザーインターフェースを作成するための有名なオープンソースフレームワークです。

ウィジェットを追加しよう

ウィジェット関数は、ui.R 中の sidebarPanel または mainPanel 内に配置します。これは、レッスン2で学んだ HTML 要素を追加する方法と同じです。

各ウィジェット関数には、いくつかの引数を入れます。これらの引数は次のシンタックスに従う必要があります。

  • ウィジェット名: この名前はユーザーには表示されませんが、ウィジェットの値にアクセスするために必要となります。文字列を入力して下さい。
  • ラベル: このラベルはアプリの中で、ウィジェットの上に表示されます。これも文字列である必要がありますが、空文字 "" でもかまいません。

例えば、ウィジェット名を "action"、ラベルを "Action" とすると、
actionButton("action", label = "Action")
となります。

残りの引数は、ウィジェットごとに異なります。そのウィジェットがどのコントロールに対応するかによりますが、初期値、範囲、増加単位などが考えられます。特定のウィジェット関数の引数について知りたかったら、ヘルプページを見て下さい(例えば、?selectInput)。

下記に、上で示した画像のアプリを作るための ui.R を示します。App-1ui.R を変更して、アプリを起動して下さい(起動方法は憶えていますか? runApp("App-1")、Run App ボタン、ショートカットの3つの方法があります)。

各ウィジェットがどんなものかを知るために、このアプリで遊んでみて下さい。ウィジェット関数の引数の値を変更して、どう反映されるのか試してみるといいでしょう。このアプリのレイアウトに興味を持った方は、Application layout guideを読んでみて下さい。このチュートリアルでは、このちょっと複雑なレイアウトについては教えていませんが、興味を持ってもらえる話題だと思います。

# ui.R

shinyUI(fluidPage(
  titlePanel("Basic widgets"),

  fluidRow(

    column(3,
      h3("Buttons"),
      actionButton("action", label = "Action"),
      br(),
      br(), 
      submitButton("Submit")),

    column(3,
      h3("Single checkbox"),
      checkboxInput("checkbox", label = "Choice A", value = TRUE)),

    column(3, 
      checkboxGroupInput("checkGroup", 
        label = h3("Checkbox group"), 
        choices = list("Choice 1" = 1, 
           "Choice 2" = 2, "Choice 3" = 3),
        selected = 1)),

    column(3, 
      dateInput("date", 
        label = h3("Date input"), 
        value = "2014-01-01"))   
  ),

  fluidRow(

    column(3,
      dateRangeInput("dates", label = h3("Date range"))),

    column(3,
      fileInput("file", label = h3("File input"))),

    column(3, 
      h3("Help text"),
      helpText("Note: help text isn't a true widget,", 
        "but it provides an easy way to add text to",
        "accompany other widgets.")),

    column(3, 
      numericInput("num", 
        label = h3("Numeric input"), 
        value = 1))   
  ),

  fluidRow(

    column(3,
      radioButtons("radio", label = h3("Radio buttons"),
        choices = list("Choice 1" = 1, "Choice 2" = 2,
                       "Choice 3" = 3),selected = 1)),

    column(3,
      selectInput("select", label = h3("Select box"), 
        choices = list("Choice 1" = 1, "Choice 2" = 2,
                       "Choice 3" = 3), selected = 1)),

    column(3, 
      sliderInput("slider1", label = h3("Sliders"),
        min = 0, max = 100, value = 50),
      sliderInput("slider2", "",
        min = 0, max = 100, value = c(25, 75))
      ),

    column(3, 
      textInput("text", label = h3("Text input"), 
        value = "Enter text..."))   
  )

))
  • 注:ヘルプテキストは厳密にはウィジェットとは言えませんが、他のウィジェットに簡単にテキストを追加できるという機能を提供しています。

やってみよう

下記に示すユーザーインターフェースを持つように ui.R を作成して下さい。この Shiny アプリは、基本的な Shiny レイアウトを使用していて、上に示したウィジェットのうち 3 つを含んでいることに注意して下さい。セレクトボックスに必要な情報は、画像の下の方に示しています。

このアプリを作成する際、セレクトボックスウィジェットの名前を "var" に、スライダーウイジェットの名前を "range" にして下さい。これらの名前はユーザーインターフェースには表れませんが、レッスン4でこのアプリを "reactive" に改造するときに必要となります。

ヒント:上記のセレクトボックスの例では選択肢にリストを使用していますが、もう一つ書き方があります。今回はもう一つの方を使って書くようにして下さい。(選択肢を list() でなく c() で書く)
censusvis.png
select-box.png

まとめ

Shiny アプリに簡単にウィジェットを追加することができました。

  • Shiny はウィジェットを生成する関数を持っている
  • 各関数には名前とラベルを与える必要がある
  • 一部のウィジェット関数にはさらなる引数が必要であり、それは対応するウィジェットによる
  • ウィジェットを Shiny アプリに追加する方法は、レッスン2で見た HTML 要素を追加する方法と同じである

レッスン4では、"reactive" な出力について見ていきます。また、どうやってウィジェットをオブジェクトに接続するかを学びます。ウィジェットを接続すると、ユーザーの意図をウィジェットを通してオブジェクトに伝えることができるようになります。

hoxo_m
ホクソエム (hoxo_m) は架空のデータ分析者であり、日本の若手のデータ分析者集団のペンネームである。当初このデータ分析者集団は秘密結社として活動し、ホクソエムを一個人として活動させ続けた。
https://blog.hoxo-m.com/
hoxom
Machine Learning and Data Analysis Company for Your Smiles :)
http://hoxo-m.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした