R MarkdownでBootstrap 4を使う

Bootstrap 4って？

Bootstrapはレスポンシブデザインといって、PC・スマホなど閲覧デバイスの違い、ウィンドウサイズの変更に応じて最適なレイアウトを提供できるフレームワークです。 従来rmarkdownパッケージが提供しているBootstrapのバージョンは3で今回は4です。 主な変更点に関しては以下に纏められています。

Migrating to v4
https://getbootstrap.com/docs/4.0/migration/

R Markdownユーザーが主に影響を受けそうなところは後ほど説明します。

基本の使い方

今のところオプション機能なので、使用するには必要なパッケージを入れて、YAMLフロントマターで利用を宣言する必要があります。

2021/1/21現在、Bootstrap 4はGitHub版のrmarkdownパッケージで利用可能です。 また、利用には追加でbslibというパッケージが必要です。 以下のコマンドでインストールしましょう。

remotes::install_github(c("rstudio/rmarkdown", "rstudio/bslib"))

インストールできたら、 Rmdファイルのフロントマターのoutputフィールドにhtml_documentを指定し、 theme引数を適宜指定するだけです¹。 最低限必要なものにversion: 4があります²。 versionを省略するか3にすると従来のBootstrap 3が適用されます。

output:
  html_document:
    theme:
      version: 4

テーマの指定

Bootstrap 3でよければ従来通り、theme引数に"cosmo"などの文字列を指定できます。 Bootstrap 4では更にテーマを指定するには以下のようにbootswatch要素を指定します。

output:
  html_document:
    theme:
      version: 4
      bootswatch: darkly

ちなみにこれが、このページの設定です。 従来のtheme引数に指定していた私がbootswatch要素にそのまま指定できます。 ただし、bslibパッケージの活躍により、利用可能なテーマは以下の通り増えました。 bootswatch要素を指定すればBootstrap 3利用時もすべてのテーマを利用できます。

bslib::bootswatch_themes()

##  [1] "cerulean"  "cosmo"     "cyborg"    "darkly"    "flatly"   
##  [6] "journal"   "litera"    "lumen"     "lux"       "materia"  
## [11] "minty"     "pulse"     "sandstone" "simplex"   "sketchy"  
## [16] "slate"     "solar"     "spacelab"  "superhero" "united"   
## [21] "yeti"

何が変わったの？

フォント周りが色々変わった

デフォルトフォントが変わった

適用するテーマによってフォントが変わりますが以下のように、使用候補となるフォントが増えました。 ブラウザはCSSのfont-family³プロパティに指定されたフォントリストから利用するフォントを選択します。 先頭にあるほど優先度が高く、

• インストールされているか
• 文字をレンダリング可能か

の2点を基準に1文字ずつ使うフォントを決定します。 沢山指定しておけば、良い感じの表示を実現できる可能性があがりそうですね。

具体的には以下のように変更されています（rmarkdown::html_documentの標準的な出力で比較）。 Robotoのようにモダンなフォント、Noto Sansのように多くの文字をレンダリング可能なフォント、Segoe UI Emojiのように絵文字に特価したフォント、色々とありますね。

• Bootstrap 3
  • Helvetica Neue
  • Helvetica
  • Arial
  • sans-serif
• Bootstrap 4
  • -apple-system
  • BlinkMacSystemFont
  • Segoe UI
  • Roboto
  • Helvetica Neue
  • Arial
  • Noto Sans
  • sans-serif
  • Apple Color Emoji
  • Segoe UI Emoji
  • Segoe UI Symbol
  • Noto Color Emoji

フォントサイズが大きくなった

基準となる文字サイズが14pxから16pxになりました。

フォントサイズが調整しやすくなった

また、見出しや段落などの各要素のフォントサイズは基準サイズの16pxからの相対値になりました（rem単位）。 たとえば、2remなら32pxですね。 以下のようにhtml要素に対してフォントサイズを変更してやれば、ページ内の各要素のフォントサイズも相対的に変更されます。

html {font-size: 18px;}

Rmdファイル上ではcssチャンクを使うだけで簡単にフォントサイズを変更できますね。

```{css, echo=FALSE}
html {font-size: 18px;}
``

Bootstrap 3ではフォントサイズがpxという絶対的な単位だったので、こういった変更が困難でした。

テーマが増え、カスタマイズも簡単になった

使えるテーマが増えた点は既に紹介した通りです。 実は、YAMLフロントマターにおてhtml_document関数のtheme引数に名前付きリストを指定すると、 リストは更にbslib::bs_theme関数の引数化します。 そしてこの関数は引数に応じてテーマの調整を可能としています。

output:
  html_document:
    theme:
      version: 4   # 3も可能。
      bootswatch: darkly
      bg: beige # 背景色。fgの指定が必須。
      fg: black # 表面色。文字色のことっぽい。

ちなみにbslib::bs_theme関数の引数は以下の通り。

names(formals(bslib::bs_theme))

##  [1] "version"      "bootswatch"   "..."          "bg"          
##  [5] "fg"           "primary"      "secondary"    "success"     
##  [9] "info"         "warning"      "danger"       "base_font"   
## [13] "code_font"    "heading_font"

可変長引数（...）以降がテーマ調整用の引数ですね。 これらの引数はCSSを動的に生成するためのフレームワークに引数として渡されています。 可変長引数もちゃんと渡されるので、他にも色々な調整が可能です。

利用可能な引数は以下のリンクから確認してください。 なお、html_document関数で指定するには-を_に置換してください。

https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss

たとえばfont_size_base要素を指定すれば、基準となるフォントのサイズを変更可能です。 この方法ならBootstrap 3であってもフォントサイズを一元的に変更できます。 ただし、使える単位がBootstrap 4のremに対し、Bootstrap 3の場合はpxです。

感想と展望

従来のrmarkdown::html_document関数でテーマをカスタマイズするには、css引数にCSSファイルを指定する必要がありました。 これが減らせるのはとっても簡便で良いですね。 実はtheme引数には文字列、リストの他にbslib::bs_themeの実行結果を与えることも可能です。

output:
  html_document:
    theme: !expr bslib::bs_theme(version = 4)

!exprはR言語として評価してね、というキーワードです。 これ、言い変えるとbslib::bs_theme関数の返り値に準拠したカスタム関数を利用できます。 パッケージとしてカスタムテーマを提供する時とっても便利そうですよね。 私は前からHonokaという日本語向けのBootstrapテーマを使ってみたいと思っていました。

https://honokak.osaka/

bslibパッケージの挙動を参考に実装したいと思います。 パッケージ化するとしたらhonokadown::honoka_documentとかかなあ？

Enjoy!!

---

1. html_documentはrmarkdown::html_document関数です。YAMLフロントマターで、html_documentの下の階層に指定した値は、html_document関数の引数扱いになるため、theme引数と呼んでいます。↩︎

2. YAMLフロントマターにおいて、html_documentの引数の値として、名前: 値のペアを指定すると、名前付きリストになります。このため、theme引数の下にversion: 4とあればリストのversion要素を記述した扱いになります。↩︎

3. https://developer.mozilla.org/ja/docs/Web/CSS/font-family↩︎