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フォルダーを使うよりも、僕個人としてはこちらの方が慣れているし、いいかなと思ってしまいますね．．．