shiny appをMaterial Designで実装する
この記事の内容で、このようなアプリケーションが実装できるようになります!
Material Design とは？
マテリアルデザイン（Material Design）は、アメリカ合衆国のGoogle社が提唱したユーザーエクスペリエンスデザインの体系[1]、およびそれを実現する開発技術や手法、デザイン、試みなどの包括的呼称[2]
2014年にGoogleが発表したデザインとのことです。
詳細はこちらに
私が知る限りでは、shinyのアプリケーションといえば
１．tutorialのデザイン
Rstudio Welcome to Shinyより
２．shiny themesのデザイン
３．shinydashboardのデザイン
Rstudio shinydashboardより
のようなデザインのものが多いと思います。
これらとは少し違うデザインを作りたいってなった時に、１~３ (他にもたくさんあると思います)のベースにたいして、CSS・JSで装飾していくイメージでした。
shinymaterial
そんなときに、新しい選択肢になりそうなshinymaterialパッケージを発見しました！
イメージ：shinymaterial
shinymaterialの特徴をいくつかいれたappを作ってみました！
使い方
まずパッケージを導入しましょう
# どちらかから
# CRAN version:
install.packages("shinymaterial", dependencies = TRUE)
# Development version:
devtools::install_github("ericrayanderson/shinymaterial")
問題なく完了したら、次のコードを実行してみてください！
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)
こんなページが立ち上がると思います！
細かく紹介していきます！
Features
Parallax:視差効果(パララックス)
Webデザインにおけるパララックスはスクロールなどの動作に応じて、複数のレイヤー（層）にある要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト」を演出する手法を指します。
パララックス入門～スクロールで魅力あるWebサイトに～
material_parallax( image_source = "url" ),
image_sourceに画像のpath・urlを渡すと、その画像を上手く使っていい感じにしてくれます。
material_button
material_button(input_id = "button_id",
label = "BUTTON",
depth = 2,
color = "cyan darken-5"),
depthは影のサイズを変えられる引数みたいです。
(左からdepth = 0,depth = 3,depth = 5)
### material_switch
material_switch(input_id = "switch",
label = "switch",
off_label = "Off",
on_label = "On")
material_text_box
material_text_box(input_id = "text_box",
label = "text box",
color = "#ef5350")
material_dropdown
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)
material_input(type = "slider",
input_id = "input_slider",
label = "slider",
min_value = 5,
max_value = 15,
initial_value = 10,
color = "teal")
material_checkbox
click ↓
material_checkbox(input_id = "checkbox",
label = "checkbox")
number_box
material_number_box(input_id = "number_box",
label = "number_box",
min_value = 5,
max_value = 15,
initial_value = 10)
input (password_box)
material_input(type = "password_box",
input_id = "input_password_box",
label = "password_box")
date_picker
click ↓
material_date_picker(input_id = "date_picker",
label = "Date picker")
modal window
モーダルウィンドウとは
Webデザインでのモーダルウィンドウとは、背景が黒や白くなって親ページの上に子ページが立ち上がるものを言います。主に、ログインフォームや登録フォームなどを、インラインで表示させるのに使われます。
ログインフォームなどで使う、かっこいいモーダルウィンドウのデザインまとめ
click ↓
material_modal(modal_id = "showcase_modal",
button_text = "Card",
button_icon = "open_in_browser",
title = " ",
div(#今回はここにmaterial_cardを配置
))
material_card
material_card(title = "Material Card",
img(src="画像url", height = "100%", width = "100%")
)
material_cardも、depthで影のサイズを指定できます！
まとめ
今回はshinymaterialを使った簡単なアプリの例と、その特徴を挙げてみました。
まだまだshinyにはたくさんデザインのパターンがあるようで、ワクワクします！
是非、触れてみてください！
参考
shinymaterial
パララックス入門～スクロールで魅力あるWebサイトに～
ログインフォームなどで使う、かっこいいモーダルウィンドウのデザインまとめ
Free stock photos