Bootstrapを活用したR Shinyのカスタマイズ【カウントダウンカレンダー2017冬14日目】

全国1000万人のShinyファンの皆様こんにちは、51代のげんたろうです。 去年はMIDI研としてこんな音楽理論の記事を書いていました。一年の間に一体何があったのでしょうか。

統計解析のプログラミング言語であるR言語の、Webアプリケーションを作るためのライブラリが「Shiny」です。 Shinyの公式チュートリアルは英語のみで提供されていますが、それを日本語訳したサイトもたくさんあるので、導入とかはそっちを見てくださいお願いします。

Shinyの記事ということで、統計班の話というよりweb班の話に近くなりますが、今回はそこからも外れてデザイン班寄りの記事になると思います。

今回の記事で使用する、RとIDEのバージョンです。 R：R version 3.4.3 "Kite-Eating Tree" RStudio：Version 1.1.383

Rのバージョンのコードネームって面白いですよね。スヌーピーで有名な漫画「ピーナッツ」のエピソードから名前がとられるのが慣習のようですが、執筆時点での最新版は、作中で凧を揚げると必ず現れる有名なキャラクター(?)の名前からとられています。

RStudioはバージョン1.1になってから見た目が少し変わりました。 今回の記事に大きく影響するところでは、Shinyアプリを新規作成した時の構成が、今まで「ui.R」と「server.R」の2つだったのが、「app.R」にまとめられました。今までもこういう書き方はできたのですが、こっちが推奨になったということなのでしょうか。

CSS…もといBootstrapはいいぞ

本題に入ります。デフォルトのShinyアプリをRun Appして、ブラウザでソースコードを見てみてください。

<link href="shared/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

Shinyもまた、Bootstrapをベースにデザインされているようです。 Bootstrapとは何ぞや、という前に少しCSSの話をします。

近年のウェブサイトでは、デザインの記述に関する部分をCSSファイルとして、HTMLファイル本体から分離させることが当たり前になりました。 そうすると何が楽かというと、ウェブサイトの内容は変えないままデザインだけリニューアルしようというときに、パーツごとにHTMLファイルを編集しなくとも、CSSファイルを書き換えるだけで一発で済むのです。

CSSファイルにいろいろなパーツの設計図を、名前(classの属性値など)を付けて書き並べて、HTMLファイルで <div class="名前"/> の形で呼び出すのが基本です。 設計図を書き並べる・・・面倒くさいですね。そんなセンスないというか、カラーコードも考慮して設計できる自信がないというか。 誰かが作った恰好いい設計図を使えるとしたら、とても便利ですね。でも、パーツの名前が人によって変わってしまったら、リニューアルするときにHTMLファイルもいちいち書き換える必要が出てきてしまいます。

というわけで、そのあたりの規格をかっちり決めてしまった「CSSフレームワーク」の登場です。そして、その代表格が「Bootstrap」です。 様々なパーツが用意されているだけでなく、同じファイルでもデバイスによって表示を変えられるレスポンシブデザインのウェブサイトが簡単に作れます。 MIS.Wのサイトで使われているWordPressもBootstrapベースのCSSが使われています。

ここまでCSSの話をして何が言いたかったのかというと、Bootstrapベースのテーマを入れることでShinyもデザインを簡単にカスタマイズできるということです！ (ここまでRのコードを何も書いていない)

ShinyにCSSテーマを適用してみる

Shinyにも使えるBootstrapテーマって何があるんでしょうか。公式サイトでも紹介されている、定番のテーマは「Bootswatch」のものです。 最近BootstrapのV4が登場して、Bootswatchのテーマもそれに対応したそうですが、Shinyは今もV3ベースなので、Bootswatchのテーマも以前のV3仕様のテーマを使うことに注意しましょう。 適当にデザインを決めて、「Download」ボタンを押してください。

https://bootswatch.com/3/cerulean/bootstrap.min.css

こんな感じのアドレスで、延々と続く文字列の羅列のファイルが出てきますが、これが今回ぶち込むCSSファイルです。 ShinyのUIのほうにこんな感じで書き足してください。

fluidPage(theme = "https://bootswatch.com/3/cerulean/bootstrap.min.css",

実行してみます。 確かに文字青くなったりしたけど…？なんか地味だ… サンプルの上にある青いやつがほしい！Shinyで作れるのか？作れます。

上にあるバーはBootstrapでは「Navbar」と呼ばれています。 ShinyでNavbarを出すには、UIで「fluidPage」とあるところを「navbarPage」に置き換えます。 そして「tabPanel」でメニューを作って、中にタブごとの内容を書きます。 諸々いじったものがこちらになります。(3分クッキング風)

ui <- navbarPage("Sample", theme = "https://bootswatch.com/3/cerulean/bootstrap.min.css",
   
    tabPanel("Faithful", icon = icon("bar-chart"),
   
     # Application title
     titlePanel("Old Faithful Geyser Data"),
     
     # Sidebar with a slider input for number of bins 
     sidebarLayout(
        sidebarPanel(
           sliderInput("bins",
                       "Number of bins:",
                       min = 1,
                       max = 50,
                       value = 30)
        ),
        
        # Show a plot of the generated distribution
        mainPanel(
           plotOutput("distPlot")
        )
     )
   ),
   tabPanel("Other", icon = icon("pie-chart"))
)

tabPanelでは上のコードのような形で「Font Awesome」などのアイコンを使うことができます。 というわけで実行。 ああいいですねー。

Shinyデザイン沼へのいざない

Shinyでは、先ほど出てきたような<div class="名前"/>と言ったことを書かなくても、すでに用意されている関数が良いようにやってくれます。 しかし、自分で属性を指定する書き方もできます。 デザインに凝りだすと、Bootswatchだけでは物足りなくなってきます。もっときゃわゆいテーマはないのか。ネットで見つけたBootstrapテーマがShinyでも使えるかどうかをひたすら試してみました。 今回紹介するのは「Nico」という、「Honoka」というBootstrapテーマをもとに作られたテーマです。 お気づきかもしれませんが、どちらも「ラブライブ！」に登場するアイドルユニット「μ's」のメンバーの名前が由来です。

ローカルに保存したCSSファイルを使用するには、作業ディレクトリ(Rprojファイルがある場所)に「www」というフォルダを作り、そこにCSSファイルを置きます。 たとえばCSSのファイル名がbootstrap.min.cssであれば、theme = "bootstrap.min.css"の形で指定します。パスを指定する際に"www/"は必要ありません。

inverse = TRUEとすることで、navbarの代わりにnavbar-inverseを使ったり、tags$pを使うことで<p>に相当するものを使えるようにしたり、ほかにもいろいろ見た目をカスタマイズすることができます。サンプルにいろいろ書き足してみたものがこちら。

ui <- navbarPage("Sample", theme = "bootstrap.min.css", inverse = TRUE,
   
    tabPanel("Faithful", icon = icon("bar-chart"),
   
     # Application title
     titlePanel("Old Faithful Geyser Data"),
     
     # Sidebar with a slider input for number of bins 
     sidebarLayout(
        sidebarPanel(
           sliderInput("bins",
                       tags$p(class = "text-info", "Number of bins:"),
                       min = 1,
                       max = 50,
                       value = 30),
           actionButton("go","Go", class="btn-primary")
        ),
        
        # Show a plot of the generated distribution
        mainPanel(
           plotOutput("distPlot")
        )
     )
   ),
   tabPanel("Other", icon = icon("pie-chart"))
)

これをNicoテーマで実行してみます。

いいピンクだ…

でも、ここまでやるとほかにも気になる箇所が出てきますね？直したくなりますね？ こうして、Rが統計プログラミング言語であったことを忘れ、デザインの向上に全力を尽くすようになるのです…

ここまで読んでいただきありがとうございました。 明日はいよいよ最終日、50代のQさんによる記事です。