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

# shiny appにFooterをつけたい


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

![img3.png](https://qiita-image-store.s3.amazonaws.com/0/143058/b771d335-cdcc-1f26-8acc-84ec6a9b8b57.png)

用意するのは、

- app.R
- style.css

の２つです。

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

## Basic app

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

###**Before**
---
![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/721121a7-1b5b-7ae1-2e0a-4db4ffb55cf7.png)

```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**
---
![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/72a1afa8-bc94-00c9-201f-a09650a07ca4.png)

```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**
---
![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/dc4a49a2-b0da-a4a2-1b7d-45034b9bd402.png)

```app.R

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

```

`style.css`は使わず


**After**
---
![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/99a55dd7-5869-ba08-24c6-e67cb6657f8d.png)

```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;
}
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/81276e41-eeed-64ee-0d71-5b2f38fa31c5.png)


## shinymaterial

shinymaterialで作ったappにFooterをつけてみます。
shinymaterialパッケージの紹介は[コチラ](https://qiita.com/sasaki_K_sasaki/items/fed6ba0a84acafc11870)をどうぞ

**Before**
---
![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/f75ac720-d20e-8eb3-9d88-cb8def79a532.png)

```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**
---
![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/4842bef4-54e4-384c-5259-c5af85006457.png)

```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を見ていて、フッターが付いているものをあまり見かけなかったので簡単にまとめました

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

# 参考

[フッターを常に最下部（一番下）に表示する２つの方法](https://webkikaku.co.jp/blog/htmlcss/footer-bottom/)
[Footer alignment in shinyapp dashboard](https://stackoverflow.com/questions/38939827/footer-alignment-in-shiny-app-dashboard)