読者です 読者をやめる 読者になる 読者になる

ふんわり R-tips

ぜんぜんわからない、俺たちは雰囲気でRをやっている

ShinyアプリケーションとBootstrap

Shiny

このエントリは、Shiny公式サイトのApplication layout guideを抜粋・翻訳・追記したものです。

Shiny - Application layout guide

Bootstrapのグリッド

Bootstrapのグリッドには、流動(fluid)と固定(fixed)の2種類があります。大半のShinyアプリケーションでは流動グリッドが推奨されます。navbarPage()sidebarLayout()のような関数はデフォルトで流動グリッドになっています。

Bootstrapにおけるグリッドとは、12分割の列に分割したレイアウトです。流動グリッドは、ページのサイズが変わると動的にコンポーネントのサイズを変えます。流動グリッドのデフォルトで940pixelを占めており、他の幅ではBootstrapのレスポンシブなレイアウトによりサイズが動的に変わります。

以下で、公式Bootstrapの2グリッドの説明におけるHTMLコードをRコードに変換して説明します。

流動グリッド

Bootstrapのグリッドは、それぞれ柔軟に列や行に分割できる12個の列を利用します。流動グリッドのレイアウトを作成するためには、fluidPage()関数を利用します。グリッド内で行を作成するためには、fluidRow()関数を使用します。行内で列を作成するためには、column()関数を使用します。

Shinyアプリケーションである比に分割したレイアウトを作成するコードの例を示します。columnの幅に2と12を指定して、合計12となっています。

shinyUI(fluidPage(
  fluidRow(
    column(2,
      "sidebar"
    ),
    column(10,
      "main"
    )
  )
))

列のオフセット設定

UIのコンポーネントをより精密に配置するために、列の場所のオフセットを設定することができます。列を右に動かすには、column()関数にoffsetパラメータを追加します。列全体に対して、それぞれのオフセットを含めて合計12になるようにします。

f:id:phmpk:20170115153048p:plain

上のレイアウトを作成するために、shinyアプリケーションでは以下のコードを記述します。

shinyUI(fluidPage(
  fluidRow(
    column(4,
      "4"
    ),
    column(4, offset = 4,
      "4 offset 4"
    )      
  ),
  fluidRow(
    column(3, offset = 3,
      "3 offset 3"
    ),
    column(3, offset = 3,
      "3 offset 3"
    )  
  )
))

列のネスト

流動グリッドでネストさせるときには、それぞれの列のネスト段階で合計12まで列を設定します。

f:id:phmpk:20170115153110p:plain

上図のレイアウトを作成するために、shinyアプリケーションでは以下のコードを記述します。

shinyUI(fluidPage(
  fluidRow(
    column(12,
      "Fluid 12",
      fluidRow(
        column(6,
          "Fluid 6",
          fluidRow(
            column(6, 
              "Fluid 6"),
            column(6,
              "Fluid 6")
          )
        ),
        column(width = 6,
          "Fluid 6")
      )
    )
  )
))

それぞれのfluidRow()関数で列の合計は12までになっています。

固定グリッド

固定グリッドも12分割の列を利用して、デフォルトで940pixelの固定幅となります。Bootstrapのレスポンシブなレイアウト(Shinyのデフォルト)では、レイアウトを見る環境に依存して724から1170pixelまでの流動幅となります。

固定グリッドのメリットは、環境に依存せず、全てのユーザに同じレイアウトを表示させられることです。流動グリッドが推奨されており、固定グリッドではより細かい設定まで記述しなければ、正しく表示されない場合があります。

固定グリッドの使い方

Shinyでの固定グリッドの使い方は、ほぼ流動グリッドと同一です。相違点は、グリッドをビルドするために、fixedPage()fixedRow()を使用することです。

以下のコードは上で述べたシンプルなサイドバーレイアウトをfixed gridで記述した例です。

shinyUI(fixedPage(
  fixedRow(
    column(2,
      "sidebar"
    ),
    column(10,
      "main"
    )
  )
))

列のネスト

固定グリッドでは、ネストされた各列の幅は、親の列の数まで合計が合うように指定する必要があります。。以下は、fixedRow()で幅9の列の中に幅6と3の2つの列をネストさせた例です。

f:id:phmpk:20170115153303p:plain

Shinyアプリケーションで作成するときのコードの例は以下のとおりです。

fixedRow(
  column(9,
    "Level 1 column",
    fixedRow(
      column(6,
        "Level 2"
      ),
      column(3,
        "Level 2"
      )
    )
  )
)

レスポンシブレイアウト

Bootstrapのグリッドは、レスポンシブなCSSをサポートしています。レスポンシブなCSSは、異なるサイズのデバイスにあわせて自動的にレイアウトを変える機能です。

レスポンシブなレイアウトはShinyのすべてのページにおいてデフォルトで有効になっています。無効にするには、fluidPage(), fixedPage関数にresponsive = FALSEを渡します。

レスポンシブなレイアウトでサポートするデバイス

レスポンシブなレイアウトが有効になっているとき、以下のように対応するレイアウトの幅が選ばれます。

レイアウト幅 列幅 Gutter幅
大画面 1200px以上 70px 30px
デフォルト 980px以上 60px 20px
タブレット 768px以上 42px 20px
スマホからタブレット 767px以下 流動のみ(固定幅なし) 流動のみ(固定幅なし)
スマホ 480px以下 流動のみ(固定幅なし) 流動のみ(固定幅なし)

小さいスクリーンサイズでは、固定グリッドのページレイアウトを使用していても列幅は自動的に流動グリッドになります。

アプリケーションテーマ

Shinyアプリケーションは、デフォルトでBootstrapウェブフレームワークのビジュアルテーマとなります。もしアプリケーションの見た目を変えるなら、Bootstrapテーマ変更が可能です。fluidPage(), fixedPage, nabvarPage()関数でthemeパラメータを用いて、アプリケーションに適用するBootstrap CSSスタイルシートを指定します。

Bootstrapテーマは基本的には一つのCSSソースファイルで指定します(関連する画像やCSS、フォントはこの限りではありません)。アプリケーションのディレクトリ内でwww/bootstrap.cssの場所にテーマを保存すると、以下のコードで指定します。

shinyUI(fluidPage(theme = "bootstrap.css",
                  
  titlePanel("My Application")
  
  # application UI              
))