gentelellaShiny で良い感じのダッシュボードを作ってみる

本記事は、Shiny Advent Calendar 2018の9日目の記事です。

---

そして、Shiny100本ノックの第32弾です。

今回は、gentelellaShiny というライブラリを使って、Shinyアプリケーションを作成してみます。

gentelellaShiny とは？

gentelellaShiny は、GentellelaというBootstrapで管理画面を作成するフレームワークを簡単に利用するためのライブラリです。

Shinyで管理画面のようなUIを作る際は、shinydashboard というライブラリを使うことが多いです。しかし、大体似たようなデザインになってしまうので、gentelellaShiny を使って普段とは趣向の異なるUIを持つShinyアプリケーションを作ってみましょう。

インストールからサンプルアプリ起動まで

まず、gentelellaShiny をインストールしましょう。CRANには無いので、Githubからインストールします。

Rコンソールで以下を実行してください。

> library(devtools)
> install_github("MarkEdmondson1234/gentelellaShiny")

正常にインストールできたら、以下のコマンドでサンプルアプリケーションを立ち上げられるので、gentelellaShinyのイメージを掴んでみましょう。

> gentelellaShiny::gentelellaGallery()

shinydashboard とはまた違ったいい感じのデザインですね！
次節でオリジナルのアプリケーションを作ってみます。

gentelellaGallery を使ったサンプルコード

完成形のアプリケーションがこちらです。

サイドバー、メインパネル、ナビゲーションバーがあります。

ui.R

server.R側はシンプルですが、ui.Rは少しだけ記述量が多いです。

library(gentelellaShiny)
library(shiny)

# Define UI for application that draws a histogram
shinyUI(gentelellaPageCustom(
  title = "gentelellaShinyのサンプルアプリケーション",
  navbar = gentelellaNavbar(
    navbarItems = notif(
      id = "menunotif",
      icon = "envelope-o",
      status = "primary",
      notifItem(
        title = "Notifiction",
        date = "1 min ago",
        img = paste0("https://image.flaticon.com/icons/svg/163/163813.svg"),
        "Notifictionです。"
        )
      )
    ),
  sidebar = gentelellaSidebar(
    sidebarDate(),
    sidebarMenu(
      sidebarItem(
        "Tab 1",
        tabName = "tab1", 
        icon = "bar-chart", 
        badgeName = "new",
        badgeStatus = "danger"
      ),
      sidebarItem(
        "Tab 2",
        tabName = "tab2", 
        icon = "info"
      )
    )
  ),
  body = gentelellaBody(
    tabItems(
      tabItem(
        tabName = "tab1",
        fluidRow(
          column(
            width = 4, 
            sliderInput(
              "obs", "Number of observations:",
              min = 0, max = 1000, value = 500)
          ),
          column(
            width = 8, plotOutput("distPlot"))
        )
      ),
      tabItem(
        tabName = "tab2",
        jumbotron(
          title = "gentelellaShiny",
          "これは、gentelellaShinyで作成しました。")
        )
      )
    )
  )
)

shinydashboard を使ったことがある方は、大体記法が一緒なのですぐに使えるのではと思います。

• dashboardSidebar の代わりにgentelellaSidebar
• dashboardBodyの代わりにgentelellaBody

を使います。gentelellaSidebarとgentelellaBodyの紐づけは、shinydashboard と同様にtabName を使います。

また、以下の部分で、通知を表示するUIを作成しています。

      notifItem(
        title = "Notifiction",
        date = "1 min ago",
        img = paste0("https://image.flaticon.com/icons/svg/163/163813.svg"),
        "Notifictionです。"
        )

server.R

library(gentelellaShiny)
library(shiny)

shinyServer(function(input, output, session) {
  output$distPlot <- renderPlot({
    hist(rnorm(input$obs))
  })
})

server.R側は、ヒストグラムを表示しているだけなので説明は省略します。

最後に

今回は、gentelellaGallery ライブラリの使い方を紹介しました。shinydashboard に飽きたら試しに導入してみるとよいでしょう。まだ含まれる関数のほとんどを使えていないので、また別記事にて紹介しようと思います。

なお、shinydashboard の使い方については、こちらの本でも紹介しているので、よろしければ是非ご購入お願いします。

CRANにはあがっていないが、Github上で公開されている便利なライブラリは色々あるので、良さそうなものがあれば今後も本サイトで紹介させていただきます。