Shinyチュートリアル レッスン3: コントロールウィジェットを追加する

この記事は約10分で読めます。

この記事はShiny公式チュートリアルを翻訳したものです。
公式サイト: https://shiny.posit.co/r/getstarted/shiny-basics/lesson1/index.html

チュートリアルの目次はこちら。

このレッスンでは、Shiny アプリにコントロール ウィジェットを追加する方法を説明します。ウィジェットとはユーザーがインタラクティブに操作できるWeb要素です。ウィジェットは、ユーザーが Shiny アプリにメッセージ (命令) を送信する方法を提供します。

Shinyウィジェットはユーザーから値を受け取ります。ユーザーがウィジェットを変更すると、値も変更されます。このことについては，レッスン4で学べます。

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

Shinyには，事前に構築されたウィジェット群が付属しており、それぞれがR関数で作成されます。たとえば、Shiny には、アクションボタンを作成するactionButtonという名前の関数や、スライダーバーを作成するsliderInputという名前の関数があります。

標準の Shiny ウィジェットは次のとおりです。

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

これらのウィジェットの一部は、ユーザーインターフェイスを構築するための人気のあるオープン ソースフレームワークであるTwitter Bootstrapプロジェクトを使用して構築されています。

ウィジェットの追加

レッスン 2で他のタイプの HTML コンテンツを追加したのと同じ方法で、Web ページにウィジェットを追加できます。

各ウィジェット関数には複数の引数が必要です。各ウィジェットの最初の 2 つの引数は次のとおりです。

  • ウィジェットの名前:この名前はユーザーには表示されませんが、ウィジェットの値にアクセスするために使用できます。名前は文字列にする必要があります。
  • ラベル: このラベルはアプリのウィジェットとともに表示されます。文字列である必要がありますが、空の文字列””でもかまいません。

この例では、名前は「action」、ラベルは「Action」です:
actionButton("action", label = "Action")

残りの引数は、ウィジェットがその仕事を行うために何が必要かに応じて、ウィジェットごとに異なります。これらには、初期値、範囲、インクリメントなどが含まれます。ウィジェットに必要な正確な引数は、ウィジェット関数のヘルプ ページ (例: ?selectInput) で見つけることができます。

以下のapp.Rスクリプトは、上の図のアプリを作成します。あなたのApp-1/app.Rスクリプトをこれに合わせて変更し、アプリを起動してください ( runApp(“App-1”)，Run Appを選択するか、ショートカットを使用して起動します)。

各ウィジェットを試して、その機能の感触をつかんでください。ウィジェット関数の値を変更して、その結果を観察しましょう。この Shinyアプリのレイアウトスキームに興味がある場合は、アプリケーションレイアウトガイドの説明をお読みください。このレッスンでは、この少し複雑なレイアウトスキームについては説明しませんが、レイアウトスキームが何を行うかに注目するのは興味深いことです。

library(shiny)

# Define UI ----
ui <- page_fluid(
  titlePanel("Basic widgets"),
  layout_columns(
    col_width = 3,
    card(
      card_header("Buttons"),
      actionButton("action", "Action"),
      submitButton("Submit")
    ),
    card(
      card_header("Single checkbox"),
      checkboxInput("checkbox", "Choice A", value = TRUE)
    ),
    card(
      card_header("Checkbox group"),
      checkboxGroupInput(
        "checkGroup",
        "Select all that apply",
        choices = list("Choice 1" = 1, "Choice 2" = 2, "Choice 3" = 3),
        selected = 1
      )
    ),
    card(
      card_header("Date input"),
      dateInput("date", "Select date", value = "2014-01-01")
    ),
    card(
      card_header("Date range input"),
      dateRangeInput("dates", "Select dates")
    ),
    card(
      card_header("File input"),
      fileInput("file", label = NULL)
    ),
    card(
      card_header("Help text"),
      helpText(
        "Note: help text isn't a true widget,",
        "but it provides an easy way to add text to",
        "accompany other widgets."
      )
    ),
    card(
      card_header("Numeric input"),
      numericInput("num", "Input number", value = 1)
    ),
    card(
      card_header("Radio buttons"),
      radioButtons(
        "radio",
        "Select option",
        choices = list("Choice 1" = 1, "Choice 2" = 2, "Choice 3" = 3),
        selected = 1
      )
    ),
    card(
      card_header("Select box"),
      selectInput(
        "select",
        "Select option",
        choices = list("Choice 1" = 1, "Choice 2" = 2, "Choice 3" = 3),
        selected = 1
      )
    ),
    card(
      card_header("Sliders"),
      sliderInput(
        "slider1",
        "Set value",
        min = 0,
        max = 100,
        value = 50
      ),
      sliderInput(
        "slider2",
        "Set value range",
        min = 0,
        max = 100,
        value = c(25, 75)
      )
    ),
    card(
      card_header("Text input"),
      textInput("text", label = NULL, value = "Enter text...")
    )
  )
)

# Define server logic ----
server <- function(input, output) {

}

# Run the app ----
shinyApp(ui = ui, server = server)

Your turn

uiを書き換えて、以下に表示されるユーザーインターフェイスを作成しましょう。この Shiny アプリは基本的な Shinyレイアウト (列なし) を使用しており、上に示したウィジェットが 3 つ含まれていることに注意してください。選択ボックスの他の値は、アプリの画像の下に表示されています。

模範解答

次に進む前に、uiが以下に表示されているものと同じであることを確認してください。このスクリプトは、レッスン 4とレッスン 5 (リンク張る)で、国勢調査データを視覚化するアプリの一部として使用します。

特に、セレクトボックスウィジェットの名前が「var」、スライダーウィジェットの名前が「range」であることを確認してください。

また、スライダーウィジェットには1つではなく2つの値があることにも注意してください。

ui <- page_sidebar(
  title = "censusVis",
  sidebar = sidebar(
    helpText(
      "Create demographic maps with information from the 2010 US Census."
    ),
    selectInput(
      "var",
      label = "Choose a variable to display",
      choices = 
        list(
          "Percent White", 
          "Percent Black", 
          "Percent Hispanic", 
          "Percent Asian"
        ),
      selected = "Percent White"
    ),
    sliderInput("range",
                label = "Range of interest:",
                min = 0, max = 100, value = c(0, 100))
  )
)

要約

完全に機能するウィジェットを Shiny アプリに簡単に追加できます。

  • Shiny は、これらのウィジェットを作成するための関数ファミリーを提供します。
  • 各関数には名前とラベルが必要です。
  • 一部のウィジェットは、そのジョブを実行するために特定の指示を必要とします。
  • 他のタイプの HTML コンテンツを追加するのと同じように、Shiny アプリにウィジェットを追加します (レッスン 2を参照)。

Go Further

Shinyウィジェットギャラリーには、Shinyアプリにウィジェットをすばやく追加するために使用できるテンプレートが用意されています。

テンプレートを使用するには、ギャラリーにアクセスしてください。ギャラリーには Shiny の各ウィジェットが表示され、入力に応じてウィジェットの値がどのように変化するかを確認できます。

必要なウィジェットを選択し、ウィジェットの下にある「コードを表示」ボタンをクリックします。ギャラリーでは、ウィジェットを説明するサンプル アプリが表示されます。ウィジェットを使用するには、例のapp.Rファイル内のコードをコピーして，あなたのapp.Rファイルに貼り付けます。

レッスン 4では、ウィジェットをリアクティブ出力 (ユーザーがウィジェットを変更するたびに自身を更新するオブジェクト) に接続する方法を学びます。

コメント