【R】 [shiny] Material Designのshiny アプリケーションを作る

# shiny appをMaterial Designで実装する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/b148af42-6ed5-751d-dec1-33dd3b570bd7.png)

この記事の内容で、[このようなアプリケーション](https://sasakik.shinyapps.io/material_app/)が実装できるようになります!


## Material Design とは？

![Material_Design.svg.png](https://qiita-image-store.s3.amazonaws.com/0/143058/71f0440b-2423-4c8b-36b6-a5723820e352.png)


[マテリアルデザイン - wikipedia](https://ja.wikipedia.org/wiki/%E3%83%9E%E3%83%86%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3)

>マテリアルデザイン（Material Design）は、アメリカ合衆国のGoogle社が提唱したユーザーエクスペリエンスデザインの体系[1]、およびそれを実現する開発技術や手法、デザイン、試みなどの包括的呼称[2]


2014年にGoogleが発表したデザインとのことです。
詳細は[こちらに](https://material.io/guidelines/#)

私が知る限りでは、shinyのアプリケーションといえば

１．tutorialのデザイン
<img width="960" alt="shiny hello.png" src="https://qiita-image-store.s3.amazonaws.com/0/143058/c2cc7b04-f9ed-e52d-4d85-90612907db38.png">
[Rstudio Welcome to Shinyより](https://shiny.rstudio.com/tutorial/written-tutorial/lesson1/)

２．shiny themesのデザイン
![shiny themes.png](https://qiita-image-store.s3.amazonaws.com/0/143058/12614fd9-cb09-910e-7f87-54d0468ec77c.png)

[Rstudio Shiny Themesより](https://rstudio.github.io/shinythemes/)

３．shinydashboardのデザイン
![dashboard.png](https://qiita-image-store.s3.amazonaws.com/0/143058/95049c2e-43eb-0069-f881-f9ccdc1958a7.png)
[Rstudio shinydashboardより](http://rstudio.github.io/shinydashboard/)


のようなデザインのものが多いと思います。
これらとは少し違うデザインを作りたいってなった時に、１~３ (他にもたくさんあると思います)のベースにたいして、CSS・JSで装飾していくイメージでした。

## shinymaterial

そんなときに、新しい選択肢になりそうな[shinymaterial](https://github.com/ericrayanderson/shinymaterial)パッケージを発見しました！

イメージ：[shinymaterial](https://ericrayanderson.github.io/shinymaterial/)
![shinymaterials_TOP.png](https://qiita-image-store.s3.amazonaws.com/0/143058/8ad0ced1-c229-d666-716e-e86942a31542.png)


shinymaterialの特徴をいくつかいれたappを作ってみました！

## 使い方

まずパッケージを導入しましょう

```r:console
# どちらかから
# CRAN version: 
install.packages("shinymaterial", dependencies = TRUE)
# Development version: 
devtools::install_github("ericrayanderson/shinymaterial")
```

問題なく完了したら、次のコードを実行してみてください！

```r:console

library(shiny)
library(shinymaterial)

ui <- material_page(title = "Material Design",
                    tags$br(),
                    font_color = "cyan darken-5",
                    nav_bar_color = "cyan darken-5",
                     
                    material_parallax(
                      image_source = "https://github.com/sasakiK/FreeStockPhotos/blob/master/pexels-photo%20(1).jpg?raw=true"
                    ),
                    material_row(
                      tags$br(),
                      div(h2("Features"), align = "center")
                    ),
                    
                    material_row( # ---------------
                      material_column(width = 4,
                                      material_button(
                                        input_id = "button",
                                        label = "BUTTON",
                                        depth = 5,
                                        color = "cyan darken-5"
                                      ), align = "center"
                                      ),
                      material_column(width = 4,
                                      material_switch(
                                        input_id = "switch",
                                        label = "switch",
                                        off_label = "Off",
                                        on_label = "On"
                                      ), align = "center"
                                      ),
                      material_column(width = 4,
                                      material_text_box(
                                        input_id = "text_box",
                                        label = "text box",
                                        color = "#ef5350"
                                      ), align = "center"
                                      )
                    ),
                    tags$br(),
                    
                    material_row( # ---------------
                      material_column(width = 4,
                                      material_dropdown(
                                        input_id = "example_dropdown",
                                        label = "Drop down",
                                        choices = c("Chicken" = "c",
                                                    "Steak" = "s",
                                                    "Fish" = "f"),
                                        selected = c("c"),
                                        multiple = FALSE,
                                        color = "#ef5350"
                                      ), align = "center"
                                     ),
                      material_column(width = 4,
                                      material_input(
                                        type = "slider",
                                        input_id = "input_slider",
                                        label = "slider",
                                        min_value = 5,
                                        max_value = 15,
                                        initial_value = 10,
                                        color = "teal"
                                      ), align = "center"
                                     ),
                      material_column(width = 4,
                                      material_checkbox(
                                        input_id = "checkbox",
                                        label = "checkbox"
                                      ), align = "center"
                                     )
                    ),
                    tags$br(),
                    
                    material_row( # ---------------
                      material_column(width = 4,
                                      material_number_box(
                                        input_id = "number_box",
                                        label = "number_box",
                                        min_value = 5,
                                        max_value = 15,
                                        initial_value = 10
                                      ), align = "center"
                                     ),
                      material_column(width = 4,
                                      material_input(
                                        type = "password_box",
                                        input_id = "input_password_box",
                                        label = "password_box"
                                      ), align = "center"
                                     ),
                      material_column(width = 4,
                                      material_date_picker(
                                        input_id = "date_picker",
                                        label = "Date picker"
                                      ), align = "center"
                                     )
                    ), tags$br(),
                    
                    material_parallax(
                      image_source = "https://github.com/sasakiK/FreeStockPhotos/blob/master/pexels-photo-247528.jpeg?raw=true"
                    ),
                    
                    material_row( tags$br(), tags$br(),
                      material_column(width = 12,
                        material_modal(
                          modal_id = "showcase_modal",
                          button_text = "Card",
                          button_icon = "open_in_browser",
                          title = " ",
                          div( material_card(
                                title = "Material Card",
                                img(src="https://github.com/sasakiK/FreeStockPhotos/blob/master/pexels-photo-306533.jpeg?raw=true", height = "100%", width = "100%")
                               ), align = "center")
                        ),
                        tags$br(),
                        div(helpText("@sasaki_K_sasaki"), align = "center", style = "color:grey;"), align = "center"
                      )
                    )
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

```

こんなページが立ち上がると思います！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/7a3f577a-beba-5b96-462c-a307bf3df840.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/0d68f26e-66e8-2960-142d-421d3e8a2fae.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/b3e54a37-b5be-a52a-2dd5-8e3ca78d8439.png)

細かく紹介していきます！

## Features 

### Parallax:視差効果(パララックス)

>Webデザインにおけるパララックスはスクロールなどの動作に応じて、複数のレイヤー（層）にある要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト」を演出する手法を指します。
[パララックス入門～スクロールで魅力あるWebサイトに～](https://www.wan55.co.jp/column/detail/id=313)


```r:ui
material_parallax( image_source = "url" ),
```
`image_source`に画像のpath・urlを渡すと、その画像を上手く使っていい感じにしてくれます。

### material_button

![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/6bd8fc09-fba2-4d40-c3fe-8228dddef6d4.png)

```r:ui
material_button(input_id = "button_id",
                label = "BUTTON",
                depth = 2,
                color = "cyan darken-5"),
```

`depth`は影のサイズを変えられる引数みたいです。

(左から`depth = 0`,`depth = 3`,`depth = 5`)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/50132fbc-ad6c-b1ee-5931-118ce27d4a1a.png)![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/011124a3-7c8b-3ae9-dd33-900d69705a28.png)![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/d7d7775a-57f0-1497-4e3c-1f401b7ed5aa.png)

###　material_switch

![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/d6f06e2e-391c-5d9a-f2b1-60c687db4c63.png)

```r:ui
material_switch(input_id = "switch",
                label = "switch",
                off_label = "Off",
                on_label = "On")
```


### material_text_box

![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/d482542a-c3e6-7694-6c8e-8aa9991f75f6.png)

```r:ui
material_text_box(input_id = "text_box",
                  label = "text box",
                  color = "#ef5350")
```

### material_dropdown

![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/08a2d865-ba8e-3dd1-7e02-eb8396c8ce60.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/3b471749-ad40-05c2-235b-2cbe0b94df88.png)

```r:ui
material_dropdown(input_id = "dropdown",
                  label = "Drop down",
                  choices = c("Chicken" = "c",
                              "Steak" = "s",
                              "Fish" = "f"),
                  selected = c("c"),
                  multiple = FALSE,
                  color = "#ef5350")
```

### input (slider)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/0e4a2196-1bcc-d8c2-e2d9-2231325dcf57.png)


```r:ui
material_input(type = "slider",
               input_id = "input_slider",
               label = "slider",
               min_value = 5,
               max_value = 15,
               initial_value = 10,
               color = "teal")
```


### material_checkbox

![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/0496a082-6d1e-7a1a-755b-b765f250f137.png)
click ↓
![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/98004751-912b-7398-af85-29faa53af212.png)

```r:ui
material_checkbox(input_id = "checkbox",
                  label = "checkbox")
```


### number_box

![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/43b2dc34-15f0-68d1-7121-c35cbef40a01.png)

```r:ui

material_number_box(input_id = "number_box",
                    label = "number_box",
                    min_value = 5,
                    max_value = 15,
                    initial_value = 10)

```

### input (password_box)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/6f61bd17-c441-9f28-55cf-bebd7e79ec6b.png)


```r:ui
material_input(type = "password_box",
               input_id = "input_password_box",
               label = "password_box")
```

### date_picker

![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/40e4c54d-ca97-ff62-ce51-5b7ddaecb80c.png)
click ↓
![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/a38caf2b-13c1-9625-af17-7ea66bbf8851.png)

```r:ui

material_date_picker(input_id = "date_picker",
                     label = "Date picker")

```

### modal window

モーダルウィンドウとは
>Webデザインでのモーダルウィンドウとは、背景が黒や白くなって親ページの上に子ページが立ち上がるものを言います。主に、ログインフォームや登録フォームなどを、インラインで表示させるのに使われます。[
ログインフォームなどで使う、かっこいいモーダルウィンドウのデザインまとめ](http://webrocketsmagazine.com/entry/20111212/cool-modal-window-website.html)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/15d80df6-edf4-cfd0-4073-399463f1754b.png)
click ↓
![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/8ac2a080-8551-ea60-1d7c-0896ae6b3fe5.png)


```r:ui
material_modal(modal_id = "showcase_modal",
               button_text = "Card",
               button_icon = "open_in_browser",
               title = " ",
　　　　　　　　　div(#今回はここにmaterial_cardを配置
                   ))
```

### material_card

![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/48a36b9e-04b0-13ce-d19a-403ae9379aad.png)

```r:ui
material_card(title = "Material Card",
              img(src="画像url", height = "100%", width = "100%")
              )
```
material_cardも、`depth`で影のサイズを指定できます！


## まとめ

今回は[shinymaterial](https://ericrayanderson.github.io/shinymaterial/)を使った簡単なアプリの例と、その特徴を挙げてみました。

まだまだshinyにはたくさんデザインのパターンがあるようで、ワクワクします！
是非、触れてみてください！


## 参考

[shinymaterial](https://ericrayanderson.github.io/shinymaterial/)
[パララックス入門～スクロールで魅力あるWebサイトに～](https://www.wan55.co.jp/column/detail/id=313)
[ログインフォームなどで使う、かっこいいモーダルウィンドウのデザインまとめ](http://webrocketsmagazine.com/entry/20111212/cool-modal-window-website.html)
[Free stock photos](https://www.pexels.com/)