【R】[shiny] Shiny appにいい感じのFooterをつける

shiny appにFooterをつけたい

予約投稿機能を知りました、フライングしてすみません、、

用意するのは、

• app.R
• style.css

の２つです。

Bassicなshiny app、shinydashboard、shinymaterialの3パターンについて、常に下部に固定されるFooterの設置方法をまとめていきます。

Basic app

　標準的なshiny appにFooterを加えます。

Before

---

app.R

library(shiny)

ui <- tagList(

  fluidPage(
     titlePanel("Add fixedFooter to your Shiny app"),

     sidebarLayout(
        sidebarPanel( tags$p("space") ),
        mainPanel( tags$p("space") )
     ),

     includeCSS("style.css")
  )
)
server <- function(input, output) {}   

shinyApp(ui = ui, server = server)

style.css

body { 
  background-color: #394857; 
  font-family:'Futura';
  color: white; 
}

.col-sm-4 { 
  color:#223344;
}

After

app.R

library(shiny)

ui <- tagList(

  fluidPage(
     titlePanel("Add fixedFooter to your Shiny app"),

     sidebarLayout(
        sidebarPanel( tags$p("space") ),
        mainPanel( tags$p("space") )
     ),
     tags$footer(
        tags$a(href = "https://qiita.com/sasaki_K_sasaki", "qiita@sasaki_K_sasaki"),
        tags$a(href = "https://github.com/sasakiK", icon("github"))
     ),
     includeCSS("style.css")
  )
)

server <- function(input, output) {}   

shinyApp(ui = ui, server = server)

style.css

body { 
  background-color: #394857; 
  font-family:'Futura';
  color: white; 
}

.col-sm-4 { 
  color:#223344;
}

/*以下、追加*/
div.container-fluid{
  padding-right:0;
  padding-left:0;
}

a {
  color:#223344; 
  font-size:18px;
}

footer {
  background-color:#a1a8b5;
  text-align:center;
  width:100%;
  bottom: 0;
  position: fixed;
}

少しだけ説明を加えます！

app.Rに以下の4行を追加します

app.R

tags$footer(
  tags$a(href = "link to ..", "label"),
  tags$a(href = "link to github", icon("github"))
)

フッターをつけるときに、左右に微妙にスペースがあると個人的に嫌だったので以下のコードで削ります。

style.css

div.container-fluid{
  padding-right:0;
  padding-left:0;
}

aタグの色が、デフォルトだと青色になるのでなんとなく変えます。

style.css

a {
  color:#223344; 
  font-size:18px;
}

position:fixedとbottom:0;で常に画面の下部に固定します。

style.css

footer {
  background-color:#a1a8b5;
  text-align:center;
  width:100%;
  bottom: 0;
  position: fixed;
}

shinydashboard

shinydashboardにFooterをつけてみます。

Before

app.R

ui <- tagList(
  dashboardPage(skin = "black",
    dashboardHeader(title = "fixedFooter"),
    dashboardSidebar(),
    dashboardBody()
  )
)
server <- function(input, output) {}   
shinyApp(ui = ui, server = server)

style.cssは使わず

After

app.R

ui <- tagList(
  dashboardPage(skin = "black",
    dashboardHeader(title = "fixedFooter"),
    dashboardSidebar(),
    dashboardBody()
  ),
  tags$footer(
    tags$a(href = "https://qiita.com/sasaki_K_sasaki", "qiita@sasaki_K_sasaki"),
    tags$a(href = "https://github.com/sasakiK", icon("github"))
  ),
  includeCSS("style.css")
)
server <- function(input, output) {}   
shinyApp(ui = ui, server = server)

style.css

a {
  color:#223344; 
  font-size:18px;
}

footer {
  background-color:#a1a8b5;
  text-align:center;
  width:100%;
  bottom: 0;
  position: fixed;
}

ここで、footer {}の箇所でz-indexを以下のように指定すると、Sidebarの部分までフッターを表示させることができます！z-indexは要素の重なりを指定するプロパティのようで、値が大きい要素を前面に持ってくることができるみたいです。

style.css

footer {
  background-color:#a1a8b5;
  text-align:center;
  width:100%;
  bottom: 0;
  position: fixed;
  z-index:1000;
}

shinymaterial

shinymaterialで作ったappにFooterをつけてみます。
shinymaterialパッケージの紹介はコチラをどうぞ

Before

app.R

ui <- material_page(title = "Add fixedFooter to your shiny app",

      includeCSS("style.css")

)
server <- function(input, output) {}   

shinyApp(ui = ui, server = server)

style.css

body {
  background-color: #394857;  
  font-family:'Futura';
  color: white;
}

nav {
  font-family: 'Gill Sans', cursive;
  background-color: #a1a8b5;
}

After

app.R

ui <- material_page(title = "Add fixedFooter to your shiny app",

      includeCSS("style.css"),

      tags$footer(
        tags$a(href = "https://qiita.com/sasaki_K_sasaki", "qiita@sasaki_K_sasaki"),
        tags$a(href = "https://github.com/sasakiK", icon("github"))
      )
)
server <- function(input, output) {}   

shinyApp(ui = ui, server = server)

style.css

body {
  background-color: #394857;  
  font-family:'Futura';
  color: white;
}

nav {
  font-family: 'Gill Sans', cursive;
  background-color: #a1a8b5;
}

a {
  color:#223344; 
  font-size:18px;
}
footer {
  background-color:#a1a8b5;
  text-align:center;
  width:100%;
  bottom: 0;
  position: fixed;
}

公開されているshiny appを見ていて、フッターが付いているものをあまり見かけなかったので簡単にまとめました

是非試してみてください！

参考

フッターを常に最下部（一番下）に表示する２つの方法
Footer alignment in shinyapp dashboard