R Shinyで簡単にナビゲーションバーのUIを作る方法と実例を紹介

本記事は、Shiny Advent Calendar 2017の3日目の記事です。

---

今回は、Shiny100本ノックの第7回目となります。

Shinyって何？ということはまず以下を読んでみてください。
www.randpy.tokyo

Shinyでは、レイアウトを色々自由に変更するためのメソッドが事前に用意されています。
今回は、その中からナビゲーションバーを簡単に作る、ということをやってみます。

完成形イメージ

まず完成形イメージを貼っておきます。

画面上部にナビゲーションバーがあります。
それぞれクリックすると、各画面に遷移することができます。

なお、一番右のバーはクリックすると更にメニューが表示さるようになっています。

普通に書くとちょっと面倒なこのような表示形式も、ShinyのnavbarPageメソッドを使えば簡単です。

コードを紹介

まず先にサンプルコードを紹介しておきます。
基本的にこのままui.Rとserver.Rをコピペすれば動くはずです。

server.R

library(shiny)

shinyServer(function(input, output) {
   
  output$distPlot <- renderPlot({
    
    x    <- faithful[, 2] 
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    
    hist(x, breaks = bins, col = 'darkgray', border = 'white')
    
  })  
})

ui.R

library(shiny)

shinyUI(navbarPage("Navbar サンプル",
           tabPanel("ページ1",sidebarLayout(
             sidebarPanel(
               sliderInput("bins",
                   "Number of bins:",
                   min = 1,
                   max = 50,
                   value = 30)
             ),
             mainPanel(
               plotOutput("distPlot")
             )
            )),
           tabPanel("ページ2",
                    h2("何か適当なテキスト")),
           navbarMenu("自己紹介",
             tabPanel("名前",
                      h2("私の名前はNp-Urです。")
             ),
             tabPanel("好きな食べ物",h2("私は寿司が好きです。"))
           )
))

navbarPageメソッドの使い方

navbarPageメソッドは以下のように用います。

navbarPage("title",
  tabPanel("subtitle1", ~),
  tabPanel("subtitle2", ~),
  navbarMenu("subtitle3",
    tabPanel("subsubtitle1", ~),
    tabPanel("subsubtitle2", ~)
)

titleやsubtitleという箇所は以下のように対応しています。

navbarPageの下にtabPanelを重ねて書くことで、各ページを作ることができます。
「~」のところは、具体的なuiコードを書いてもらえればOKです。

また、navbarPageの下でnavbarMenuを書くと、タブ部分の下に更にメニューを作ることもできます。非常に便利ですね！

そして非常に簡単ですね！！

私が前に作ったGoogleアナリティクスのデータを引っ張ってくるShinyアプリケーションでは、

• 1つ目のタブでGoogle 認証
• 2つ目のタブでAPIのリクエストを指定してグラフ出力

という風にナビゲーションバーを使っていました。
www.randpy.tokyo

一つのページに色々詰め込みすぎると、分かりづらくなることがあるので、その際はナビゲーションバーを使ってみてください！

まとめ

Shinyではデフォルトで便利なメソッドが用意されているので、それをうまく使うことで高速で綺麗なWebアプリケーションを作ることができます。

是非参考にしてみてください。