チュートリアルの目次はこちら。
Shiny アプリの構造を理解したところで、最初のアプリをゼロから構築します。
このレッスンでは、アプリのユーザーインターフェイスを構築する方法を説明します。ユーザーインターフェイスをレイアウトし、テキスト、画像、その他の HTML 要素を Shiny アプリに追加する方法を学びます。
レッスン 1で作成したApp-1アプリを使用します。まず、app.Rファイルを開きます。以下のスクリプトと一致するように編集します。
library(shiny)
library(bslib)
# Define UI ----
ui <- page_sidebar(
)
# Define server logic ----
server <- function(input, output) {
}
# Run the app ----
shinyApp(ui = ui, server = server)
このコードは、Shinyアプリを作成するために必要最低限のものです。結果として、空白のユーザーインターフェイスを備えた空のアプリが作成されます。これは、このレッスンの適切な開始点となります。
レイアウト
サイドバー付きのページを作成するにはpage_sidebar機能を使用します。page_sidebar関数内に要素を配置することで、アプリのユーザーインターフェイスをレイアウトします。以下のui関数は、タイトル、サイドバー パネル、メイン パネルを備えたユーザーインターフェイスを作成します。
ui <- page_sidebar(
title = "title panel",
sidebar = sidebar("sidebar"),
"main contents"
)
page_sidebarへ追加の要素を加えることで、ページのメインパネルに要素を追加できます。
デフォルトでは、サイドバーパネルはアプリの左側に表示されます。sidebarにオプションposition = "right"を指定すると、右側に移動できます。
ui <- page_sidebar(
title = "title panel",
sidebar = sidebar("Sidebar", position = "right"),
"Main contents"
)
page_sidebarはページを満たすサイドバー レイアウトを作成します。これは、サイドバーのあるページを簡単に作成する方法です。ページ上のどこにでも表示できるフローティングタイプのサイドバーレイアウトを作成する場合は、page_fluidとlayout_sidebarを使用します。
ui <- page_fluid(
layout_sidebar(
sidebar = sidebar("Sidebar"),
"Main contents"
)
)
より高度なレイアウトを作成することもできます。たとえば、page_navbarはナビゲーション バーを含む複数ページのユーザーインターフェイスを作成します。または、layout_columnsまたはlayout_rowsを使用して、グリッドシステムによりレイアウトを構築することもできます。これらの高度なオプションについて詳しく知りたい場合は、「Shinyアプリケーション レイアウトガイド」を参照してください。このチュートリアルではこのままlayout_sidebarを使う形で進めていきます。(訳検討, Layout_sidebarはこの後で出てこない)
カード
カードは、最新のユーザーインターフェイスの一般的な構成単位です。Shiny アプリではcard関数を使ってカードを作成できます。
ui <- page_sidebar(
title = "title panel",
sidebar = sidebar("Sidebar"),
card()
)
card()関数はボーダーとパディングを備えた通常のコンテナを作成します。
カードを使用して関連情報をグループ化します。card()関数に引数を指定して、カードにコンテンツを追加します。
ui <- page_sidebar(
title = "title panel",
sidebar = sidebar("Sidebar"),
card(
"Card content"
)
)
card_header()、card_footer()、card_image()関数などを使用して要素をカードに追加することもできます。たとえば、card_header()関数でヘッダーを追加します。
ui <- page_sidebar(
title = "title panel",
sidebar = sidebar("Sidebar"),
card(
card_header("Card header"),
"Card body"
)
)
カードの詳細については、bslibのカードに関する記事を参照してください。
バリューボックス
バリューボックスも便利な UI コンポーネントです。バリューボックスを使用して、アプリ内の重要な値を強調表示します。
value_box()関数を使用してバリューボックスを作成します。titleおよびvalue引数を使用して、バリューボックスのタイトルと値を定義します。
ui <- page_sidebar(
...
value_box(
title = "Value box",
value = 100
),
...
)
必要に応じて、バリューボックスのtheme、showcase引数を使用してアイコンなどの UI 要素をバリューボックスに追加します。注: ブートストラップアイコンを使用するには，bsicons::bs_icon()関数 を使用します。
ui <- page_sidebar(
title = "title panel",
sidebar = sidebar("Sidebar"),
value_box(
title = "Value box",
value = 100,
showcase = bsicons::bs_icon("bar-chart"),
theme = "teal"
),
card("Card"),
card("Another card")
)
複数のバリューボックスをアプリに追加する方法など、バリューボックスの詳細については、bslibのバリューボックスに関する記事を参照してください。
Your turn
Shiny のレイアウト、カード、バリュー ボックス機能を使用して、魅力的で便利なユーザー インターフェイスを作成できます。以下の写真の Shiny アプリを再作成して、これらの機能をどの程度理解しているかを確認してください。このチュートリアルの例を使用して作業し、テストしてください。
app.Rスクリプトは [模範解答] ボタンの下にありますが、単にコピーして貼り付けるだけは望ましくありません。次に進む前に、コードがどのように機能するかを必ず理解してください。
模範解答
library(shiny)
library(bslib)
# Define UI
ui <- page_sidebar(
title = "My Shiny App",
sidebar = sidebar(
"Shiny is available on CRAN, so you can install it in the usual way from your R console:",
code('install.packages("shiny")'),
),
card(
card_header("Introducing Shiny"),
"Shiny is a package from Posit that makes it incredibly easy to build interactive web applications with R.
For an introduction and live examples, visit the Shiny homepage (https://shiny.posit.co).",
card_image("www/shiny.svg", height = "300px"),
card_footer("Shiny is a product of Posit.")
)
)
# Define server logic ----
server <- function(input, output) {
}
# Run the app ----
shinyApp(ui = ui, server = server)
要約
新しいスキルを使用すると、次のことが可能になります。
page_*関数を使用してユーザーインターフェイスを作成する- カードを作成し、それにコンテンツを追加する
- バリューボックスを作成する
ユーザーインターフェイスに単純なコンテンツを配置できるようになったので、ウィジェットなどのより複雑なコンテンツを配置する方法を見てみましょう。ウィジェットは、ユーザーがアプリを制御するために使用できるインタラクティブな Web 要素です。これらはレッスン 3の主題でもあります。
コメント