shiny-bslib

bslib を使ったモダンな Shiny アプリ

bslib の Bootstrap 5 コンポーネントとレイアウトを使用して、プロフェッショナルな Shiny ダッシュボードを構築します。このスキルでは、従来の Shiny の手法に代わる、モダンな UI/UX パターンに焦点を当てます。

クイックスタート

単一ページのダッシュボード：

library(shiny)
library(bslib)

ui <- page_sidebar(
  title = "My Dashboard",
  theme = bs_theme(version = 5),  # "shiny" preset by default
  sidebar = sidebar(
    selectInput("variable", "Variable", choices = names(mtcars))
  ),
  layout_column_wrap(
    width = 1/3,
    fill = FALSE,
    value_box(title = "Users", value = "1,234", theme = "primary"),
    value_box(title = "Revenue", value = "$56K", theme = "success"),
    value_box(title = "Growth", value = "+18%", theme = "info")
  ),
  card(
    full_screen = TRUE,
    card_header("Plot"),
    plotOutput("plot")
  )
)

server <- function(input, output, session) {
  output$plot <- renderPlot({
    hist(mtcars[[input$variable]], main = input$variable)
  })
}

shinyApp(ui, server)

複数ページのダッシュボード：

ui <- page_navbar(
  title = "Analytics Platform",
  theme = bs_theme(version = 5),
  nav_panel("Overview", overview_ui),
  nav_panel("Analysis", analysis_ui),
  nav_panel("Reports", reports_ui)
)

基本概念

ページレイアウト

• page_sidebar() -- サイドバー付きの単一ページダッシュボード（最も一般的）
• page_navbar() -- 上部ナビゲーションバー付きの複数ページアプリ
• page_fillable() -- カスタム配置向けのビューポートいっぱいに広がるレイアウト
• page_fluid() -- 長文コンテンツ向けのスクロール可能なレイアウト

詳しくは、page-layouts.mdをご覧ください。

グリッドシステム

• layout_column_wrap() -- 自動折り返しに対応した均等なグリッド（ほとんどのケースで推奨）
• layout_columns() -- 細かく調整できる12列の Bootstrap グリッド

詳しくは、grid-layouts.mdをご覧ください。

カード

ダッシュボードのコンテンツを格納する主要なコンテナです。ヘッダー、フッター、複数の本文セクション、全画面表示への拡大に対応しています。

詳しくは、cards.mdをご覧ください。

バリューボックス

アイコン、スパークライン、組み込みのテーマ設定を任意で使用して、主要な指標や KPI を表示します。

詳しくは、value-boxes.mdをご覧ください。

ナビゲーション

• ページレベル：複数ページアプリ向けのpage_navbar()
• コンポーネントレベル：タブ付きコンテンツ向けのnavset_card_underline()、navset_tab()、navset_pill()

詳しくは、navigation.mdをご覧ください。

サイドバー

• ページレベル：page_sidebar()またはpage_navbar(sidebar = ...)
• コンポーネントレベル：カード内のlayout_sidebar()
• 条件付きコンテンツ、動的な開閉、アコーディオンに対応
• デフォルトでresizable = TRUE — デスクトップでは、ユーザーが端をドラッグしてサイズを変更できます

詳しくは、sidebars.mdをご覧ください。

領域いっぱいに広がるレイアウト

フィルシステムは、利用可能な領域を満たすようにコンポーネントをリサイズする方法を制御します。主な概念は、フィル可能なコンテナ、フィルアイテム、フィルキャリアです。コンテナに高さが定義されている場合にフィルが有効になります。

詳しくは、filling.mdをご覧ください。

テーマ設定

• 手軽にスタイルを設定できる、Bootswatch テーマ対応の**bs_theme()**
• カスタムカラー：bg、fg、primaryは、数百の CSS ルールに影響します
• フォント：タイポグラフィ向けのfont_google()
• 動的なテーマ設定：input_dark_mode() + session$setCurrentTheme()

詳しくは、theming.mdをご覧ください。

UI コンポーネント

• アコーディオン -- 折りたたみ可能なセクション。サイドバーで特に便利です
• ツールチップ -- ホバー時に表示されるヘルプテキスト
• ポップオーバー -- クリックすると表示される、補助的な UI や入力項目用のコンテナ
• トースト -- 一時的な通知メッセージ
• ツールバー -- カードのヘッダーやフッター向けの、ボタン、選択項目、区切り線をまとめたコンパクトな横長の領域

詳しくは、accordions.md、tooltips-popovers.md、toasts.md、toolbars.mdをご覧ください。

アイコン

推奨：bsiconsパッケージ（Bootstrap Icons、bslib 向けに設計）：

bsicons::bs_icon("graph-up")
bsicons::bs_icon("people", size = "2em")

アイコン一覧：https://icons.getbootstrap.com/

代替：fontawesomeパッケージ：

fontawesome::fa("envelope")

アイコンのみのトリガーのアクセシビリティ： アイコンがツールチップ、ポップオーバー、その他同様のインタラクティブ要素の唯一のトリガーとして使われる場合（テキストを伴わない場合）、スクリーンリーダーからアクセスできる必要があります。デフォルトでは、アイコンパッケージはアイコンに装飾用のマーク（aria-hidden="true"）を付け、支援技術から隠します。

• bsicons::bs_icon()：titleを指定します — これによりa11y = "sem"が自動的に設定されます

  tooltip(
    bs_icon("info-circle", title = "More information"),
    "Tooltip content here"
  )
  

• fontawesome::fa()：a11y = "sem"を設定し、titleを指定します

  tooltip(
    fa("circle-info", a11y = "sem", title = "More information"),
    "Tooltip content here"
  )
  

titleには、アイコン自体（例：「情報アイコン」）ではなく、トリガーの目的（例：「詳細情報」、「設定」）を説明する内容を指定してください。

特殊な入力

• input_switch() -- トグルスイッチ（最新のチェックボックスの代替）
• input_dark_mode() -- ダークモードの切り替え
• input_task_button() -- 長時間実行される操作用のボタン
• input_code_editor() -- シンタックスハイライト機能付きコードエディター
• input_submit_textarea() -- 明示的な送信機能付きテキストエリア

詳しいガイダンスについては、inputs.md をご覧ください。

よくあるワークフロー

ダッシュボードの構築

1. ページレイアウトを選択します：page_sidebar()（シングルページ）または page_navbar()（マルチページ）
2. bs_theme() でテーマを追加します（手早く始めるには Bootswatch もご検討ください）
3. フィルターやコントロール用の入力を含むサイドバーを作成します
4. 主要な指標のための値ボックスを上部に追加します（コンテナーでは fill = FALSE に設定します）
5. layout_column_wrap() または layout_columns() でカードを配置します
6. すべての可視化カードで full_screen = TRUE を有効にします
7. プロットのテーマ設定に thematic::thematic_shiny() を追加します

既存アプリのモダナイズ

従来のパターンと最新の同等機能を完全に対応付けた一覧については、migration.md をご覧ください。主な手順は次のとおりです。

1. fluidPage() を page_sidebar() または page_navbar() に置き換えます
2. fluidRow()／column() を layout_columns() に置き換えます
3. 出力を card(full_screen = TRUE) で囲みます
4. theme = bs_theme(version = 5) を追加します
5. 主要な指標を value_box() コンポーネントに変換します
6. tabsetPanel() を navset_card_underline() に置き換えます

ガイドライン

1. 従来の同等機能（fluidPage()、navbarPage()）より、bslib のページ関数（page_sidebar()、page_navbar()、page_fillable()、page_fluid()）を優先してください
2. グリッドレイアウトには fluidRow()／column() ではなく、layout_column_wrap() または layout_columns() を使用してください。これらは領域を埋めるレイアウトに対応していません
3. ダッシュボードを構築する際は、出力を card(full_screen = TRUE) で囲んでください。全画面表示への拡張は非常に便利な機能です
4. 値ボックスを含む layout_column_wrap() コンテナーでは、fill = FALSE に設定してください（高さを埋めるように伸縮させる必要はありません）
5. Bootstrap のバージョンを固定してください：theme = bs_theme(version = 5) またはプリセットテーマを含めます
6. base R と ggplot2 のプロットをアプリのテーマに合わせるため、サーバーで thematic::thematic_shiny() を使用してください
7. 列幅を自動調整するには、layout_column_wrap() で width = "250px" のようなレスポンシブな幅を使用してください
8. サイドバーに多くのコントロールがある場合は、accordion() で入力をグループ化してください
9. 従来の Shiny パターンと最新の bslib の同等機能との対応については、migration.md をご覧ください

よくあるエラーを避ける

1. card() コンテナーを直接入れ子にすることは避けてください。navset_card_*() 関数はすでにカードです。nav_panel() のコンテンツは card() で囲まず、そのまま中に配置してください
2. 複数の要素をレイアウトする場合にのみ、layout_columns() と layout_column_wrap() を使用してください。子要素が1つだけの場合は、コンテナー関数に直接渡してください
3. page_*() 関数を入れ子にしないでください。アプリごとにトップレベルのページ関数を1つだけ使用してください

リファレンスファイル

• migration.md -- レガシーな Shiny から最新の bslib への移行ガイド
• page-layouts.md -- ページレベルのレイアウト関数とパターン
• grid-layouts.md -- 複数列のグリッドシステム
• cards.md -- カードコンポーネントと機能
• value-boxes.md -- 指標や KPI 向けのバリューボックス
• navigation.md -- ナビゲーションコンテナーとパターン
• sidebars.md -- サイドバーレイアウトと構成
• filling.md -- サイズ調整可能なコンテナーとフィルアイテム
• theming.md -- 基本的なテーマ設定（色、フォント、Bootswatch）。高度なテーマ設定については shiny-bslib-theming スキルを参照してください
• accordions.md -- 折りたたみ可能なセクションとサイドバーの構成
• tooltips-popovers.md -- ホバー時のツールチップとクリックで表示されるポップオーバー
• toasts.md -- 一時的な通知メッセージ
• toolbars.md -- カードのヘッダーとフッター向けのツールバーコンポーネント
• inputs.md -- bslib 固有の入力ウィジェット
• best-practices.md -- bslib 固有のパターンとよくある注意点