始める無料で始める

テーマ

Shiny では、アプリのテーマを簡単にカスタマイズできます。Shiny の UI 関数は、Web アプリケーション構築で広く使われる Twitter Bootstrap を利用しています。Bootswatch は Bootstrap を拡張し、最小限のコード変更でアプリの外観を切り替えられるようにします。

この演習では、アプリにタイトルパネルを追加し、テーマセレクターでさまざまなテーマを試したあと、好みのテーマを適用します。

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

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

コースを見る

演習の手順

  • アプリを実行し、右上のテーマセレクターで Bootswatch のさまざまなテーマを試してみてください。
  • ページに適切なタイトルを追加します。
  • themeSelector() を、あなたが選んだテーマに置き換えます。

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

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

ui <- fluidPage(
  # CODE BELOW: Add a titlePanel with an appropriate title
  
  # REPLACE CODE BELOW: with theme = shinythemes::shinytheme("")
  shinythemes::themeSelector(),
  sidebarLayout(
    sidebarPanel(
      selectInput('name', 'Select Name', top_trendy_names$name)
    ),
    mainPanel(
      tabsetPanel(
        tabPanel('Plot', plotly::plotlyOutput('plot_trendy_names')),
        tabPanel('Table', DT::DTOutput('table_trendy_names'))
      )
    )
  )
)

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)
コードを編集して実行