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