サイドバーのレイアウト

レイアウト関数を使うと、UI 内で入力と出力を見やすく配置できます。適切なレイアウトは Shiny アプリの見た目を良くするだけでなく、ユーザー体験の向上にもつながります。

この演習では、流行の名前の人気度を探索できる Shiny アプリのレイアウトを変更します。完成したアプリは次のような見た目になります。

An app where the name selector appears in the left sidebar, while the graph appears on the right in the main panel

この演習はコースの一部です

Rで作るShiny Webアプリケーション

コースを見る

演習の手順

名前セレクターがサイドバーに、プロットとテーブルが右側のメインパネルに表示されるように、このアプリのレイアウトを変更してください。

実践的なインタラクティブ演習

このサンプルコードを完成させて、この演習に挑戦してみましょう。

ui <- fluidPage(
  # MODIFY CODE BELOW: Wrap in a sidebarLayout
    # MODIFY CODE BELOW: Wrap in a sidebarPanel
    selectInput('name', 'Select Name', top_trendy_names$name),
    # MODIFY CODE BELOW: Wrap in a mainPanel
    plotly::plotlyOutput('plot_trendy_names'),
    DT::DTOutput('table_trendy_names')
)

# DO NOT MODIFY
server <- function(input, output, session){
  # Function to plot trends in a name
  plot_trends <- function(){
     babynames %>% 
      filter(name == input$name) %>% 
      ggplot(aes(x = year, y = n)) +
      geom_col()
  }
  output$plot_trendy_names <- plotly::renderPlotly({
    plot_trends()
  })
  
  output$table_trendy_names <- DT::renderDT({
    babynames %>% 
      filter(name == input$name)
  })
}

shinyApp(ui = ui, server = server)

コードを編集して実行