ShinyをCSSで拡張しようぜ!(その2) - Rでつくるウェブアプリケーション -
ShinyのCSSでの拡張第2弾
今日は、昨日書いた記事の続きを書きます。昨日の記事では、wwwフォルダーの中にCSSファイルを入れて拡張しようということを行ったわけですけど、別の方法もあります。それが、紹介することです。HTMLをご存知の方は知っていると思いますが、HTMLファイルの中にCSSをstyleタグをつけて書くことができます。これは、shinyでも同じようにできます。書き方は、簡単です。
CSSをHTMLのヘッダーに入れる方法
CSSをHTMLのヘッダーに入れるためには、tagsの関数とHTML関数を用います。shinyの公式ブログによれば、HTML()という関数は、ShinyがHTMLであると認識しないようにするための関数だそうです。次のように書くと、CSSを読み込めます。
library(shiny) #define UI shinyUI(fluidPage( tags$head( tags$style(HTML(" @import url('http://fonts.googleapis.com/css?family=Lobster|Cabin:400,700'); h1{ font-family:'Lobster',cursive; font-family:500; line-height:1.1; color:#48ca3b; } " )) ), headerPanel("New Application"), sidebarPanel( sliderInput("obs", "Number of observations:",min = 1, max = 1000, value = 500) ), mainPanel(plotOutput("distPlot")) ) )
CSSを外部にファイルを置いて、読み込むこともできます。
その場合の方が幾分簡単です。CSSファイルを以下のように作成します。このCSSファイルの置き場は昨日の記事のように「www」フォルダーの中には入れません。ui.Rと同じディレクトリにおく、または
なんらかのサブディレクトリを作成して、その中に入れて、link指定を変更するようにします。
@import url("http://fonts.googleapis.com/css?family=Lobster|Cabin:400,700"); h1 { font-family: 'Lobster', cursive; font-weight: 500; line-height: 1.1; color: #ad1d28; } body { background-color: #fff; }
そして、ui.Rの方を以下のように変更します。
shinyUI(fluidPage( includeCSS("styles.css"), headerPanel("New Application"), sidebarPanel( sliderInput("obs", "Number of observations:", min = 1, max = 1000, value = 500) ), mainPanel(plotOutput("distPlot")) ))
これで完成です。一応ウェブアプリケーションということですから、外部にファイルを置いた方がいい気がしますけども。。。こんな感じで、比較的簡単にCSSを自作して使うこともできます。wwwフォルダーを使うよりも、僕個人としてはこちらの方が慣れているし、いいかなと思ってしまいますね...