ShinyLive アプリを GitHub ページの pkgdown Web サイトに統合する

ShinyLive アプリを GitHub ページの pkgdown Web サイトに統合する
ShinyLive アプリを GitHub ページの pkgdown Web サイトに統合する
Gerald Girard
2024年12月28日土曜日 10:25:29

ShinyLive を使用して非プログラマ向けのインタラクティブ性を強化する

GitHub Pages でデータセットとヘルパー関数をホストすることは、リソースにアクセスできるようにする優れた方法です。 R を使用する開発者にとって、対話性の統合により、特にデータを探索する非プログラマにとって、ユーザー エンゲージメントがさらに強化されます。 ShinyLive は、このようなインタラクティブ機能を pkgdown Web サイトに直接埋め込むための実用的なソリューションを提供します。

Shiny アプリを R パッケージまたは GitHub Pages に組み込むためのリソースは利用可能ですが、ShinyLive と pkgdown Web サイトを効果的に組み合わせる方法については知識のギャップが残っています。データセットとヘルパー関数を含む小さな R パッケージを管理している人は、データ探索を直観的でユーザーフレンドリーにすることを目指しているでしょう。 ShinyLive はこのギャップを埋めることができます。

Shiny アプリを pkgdown Web サイトの「記事」セクションに組み込むと、R パッケージのドキュメントを過負荷にすることなく、インタラクティブな機能を提供する合理的な方法が提供されます。この方法により、コーディングに不慣れなユーザーでもデータを簡単にサブセット化して視覚化できます。これは開発者にとってもユーザーにとっても双方にメリットがあります。 🚀

たとえば、ユーザーが人口統計によって人口データをフィルターできる健康データセットを想像してください。 ShinyLive を使用すると、このアプリを GitHub Pages に構築してデプロイできるため、データに動的にアクセスできるようになります。この記事では、既存のアプリ設定を使用してこれを段階的に実現する方法を説明します。 🛠️

指示 使用例
selectInput Shiny UI でオプションを選択するためのドロップダウン メニューを作成するために使用されます。例: selectInput("var", "変数の選択:", Choices = names(mtcars))。これにより、変数選択のための動的なユーザー入力が可能になります。
sliderInput Shiny にスライダー入力ウィジェットを作成して、ユーザーが値の範囲を選択できるようにします。例: sliderInput("range", "フィルター範囲:"、最小 = 0、最大 = 100、値 = c(25, 75))。インタラクティブなフィルタリングには不可欠です。
renderPlot Shiny サーバー ロジックで使用され、ユーザー入力に基づいて動的にプロットを生成します。例: 出力$プロット
filter A function from dplyr to subset data based on conditions. Example: filter(get(input$var) >dplyr から条件に基づいてデータをサブセット化する関数。例: filter(get(input$var) >= input$range[1])。ユーザー定義のフィルターをデータセットに適用する場合に便利です。
aes_string x 軸や y 軸などの外観をプログラムで設定するために ggplot2 で使用されます。例: aes_string(x = input$var)。動的なプロット生成に最適です。
geom_histogram ヒストグラム視覚化を作成するための ggplot2 レイヤー。例: geom_histogram(ビン = 10、塗りつぶし = "青"、色 = "白")。アプリ内の分布を視覚化するのに役立ちます。
uses 再利用可能なアクションを指定するための GitHub Actions の YAML 構文。例：actions/checkout@v3 を使用します。事前定義されたワークフローとのシームレスな統合を保証します。
shinylive.js Shiny アプリをブラウザーで実行するための JavaScript ライブラリ。例: 。静的 HTML ページへの Shiny アプリの埋め込みを有効にします。
Shinylive.App 指定された HTML コンテナーで ShinyLive アプリを初期化して実行します。例: const app = new Shinylive.App("#shiny-app");。ブラウザベースのアプリ機能を提供します。
sliderInput 数値範囲選択のためのスライダー入力を作成します。例: sliderInput("range", "フィルター範囲:"、最小 = 0、最大 = 100、値 = c(25, 75))。ユーザー向けのダイナミック レンジ フィルタリングを追加します。

Shinylive を使用したインタラクティブなデータ探索ツールの作成

R と Shiny を使用して構築された最初のスクリプトは、ユーザーがデータセットを対話的に探索できるようにする動的インターフェイスの作成に重点を置いています。の 選択入力 このコマンドは、ユーザーがドロップダウン メニューから変数を動的に選択して、ニーズに合わせてアプリを調整できるようにするために不可欠です。とペアリング スライダー入力を使用すると、特定の範囲の値を選択してデータをフィルタリングすることで、探索をさらに絞り込むことができます。たとえば、次のようなデータセットでは、 MTカーの場合、ユーザーは変数として「mpg」を選択し、スライダーを使用して走行距離 20 ～ 30 の車を分離できます。この組み合わせにより、ユーザーフレンドリーで直感的なインターフェイスが保証されます。 🚀

サーバー側のロジックは、ユーザー入力に基づいてリアクティブな出力を生成することで UI を補完します。ここで、 レンダリングプロット この関数は非常に重要です。この関数は、フィルタリングされたデータセットを処理し、その場で動的な視覚化を生成します。 dplyr の統合 フィルター 関数はデータセットのシームレスなサブセット化を可能にしますが、ggplot2 の関数は geom_histogram 視覚的に魅力的で有益なプロットを保証します。ユーザーが年齢範囲をフィルタリングし、健康指標の分布を即座に確認できる健康データセットを想像してください。このスクリプトにより、開発者は最小限の労力でそのような対話性が可能になります。

2 番目のスクリプトは、GitHub Actions を使用したデプロイメントの自動化に焦点を当てています。これは、pkgdown Web サイトを効率的に維持および更新するために特に重要です。を活用することで、 デプロイ-app.yaml ファイルを使用すると、更新のプッシュと ShinyLive アプリのデプロイのプロセスを自動化できます。次のようなキーコマンド アクション/チェックアウト@v3 Shinylive 固有のセットアップがワークフローにシームレスに統合されている間、リポジトリからの最新のコードが使用されていることを確認します。たとえば、新しいフィルターや機能を使用してアプリを更新することを想像してください。この自動化により、変更がオンラインで即時に反映されるため、時間を節約し、手動エラーを減らすことができます。 ⚙️

3 番目の解決策には、静的 HTML ファイルで Shiny アプリをラップすることが含まれます。を使用することで シャイニーライブ.jsを使用すると、開発者はアプリを pkgdown Web サイトに直接埋め込み、アクティブな R サーバーの必要性を回避できます。この方法により、R をインストールしていなくてもユーザーがアプリにアクセスできるようになり、アクセシビリティが向上します。たとえば、教師は人口データに関するインタラクティブなアプリを生徒と共有し、生徒はブラウザから直接そのアプリを探索できます。このソリューションは、複雑なデータセットを魅力的で教育的なエクスペリエンスに変換するため、コーディングをしない人にとっては特に価値があります。 🌐

Shinylive を使用した pkgdown Web サイトへの Shiny アプリの埋め込み

解決策 1: フロントエンドとバックエンドの統合のための Shinylive を使用した R

# app.R
# Load necessary libraries
library(shiny)
library(dplyr)
library(ggplot2)

# UI definition
ui <- fluidPage(
  titlePanel("Interactive Data Viewer"),
  sidebarLayout(
    sidebarPanel(
      selectInput("var", "Select Variable:",
                  choices = names(mtcars)),
      sliderInput("range", "Filter Range:",
                  min = 0, max = 100, value = c(25, 75))
    ),
    mainPanel(plotOutput("plot"))
  )
)

# Server logic
server <- function(input, output) {
  output$plot <- renderPlot({
    data <- mtcars %>%
      filter(get(input$var) >= input$range[1],
             get(input$var) <= input$range[2])
    ggplot(data, aes_string(x = input$var)) +
      geom_histogram(bins = 10, fill = "blue", color = "white")
  })
}

# Run the app
shinyApp(ui, server)

GitHub アクションを使用した Shinylive のデプロイ

ソリューション 2: GitHub Actions と Shinylive を使用したデプロイメントの自動化

# deploy-app.yaml
# Workflow configuration
name: Deploy ShinyLive App

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repository
      uses: actions/checkout@v3

    - name: Set up R
      uses: r-lib/actions/setup-r@v2

    - name: Install dependencies
      run: |
        Rscript -e "install.packages(c('shiny', 'shinylive'))"

    - name: Deploy app
      uses: posit-dev/r-shinylive@actions-v1
      with:
        app-dir: ./

Shiny アプリの静的 HTML ラッパーの追加

解決策 3: pkgdown 統合のために Shiny アプリを静的 HTML でラップする

< !-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Interactive Shiny App</title>
  <script src="shinylive.js"></script>
</head>
<body>
  <div id="shiny-app"></div>
  <script>
    const app = new Shinylive.App("#shiny-app");
    app.run();
  </script>
</body>
</html>

ShinyLive による pkgdown Web サイトのアクセシビリティとパフォーマンスの強化

を使用することによる強力な利点の 1 つ シャイニーライブ アクティブな R サーバーに依存せずにスタンドアロンの対話性を可能にする機能です。これにより、GitHub Pages などの静的プラットフォームでアプリをホストするのに最適になります。継続的なサーバーサポートを必要とする従来の Shiny アプリとは異なり、ShinyLive はアプリケーションを自己完結型の JavaScript バンドルに変換します。このバンドルは pkgdown Web サイトに直接埋め込むことができるため、ユーザーはどのブラウザからでもデータセットをシームレスに探索できます。たとえば、R パッケージに大気質メトリクスのデータセットが含まれている場合、ユーザーは追加のソフトウェアをインストールすることなく、データを動的にフィルタリングして視覚化できます。 🌍

もう 1 つの利点は、次のような適応性があることです。 非コーディング者。ドロップダウンやスライダーなどの機能を組み込むことで、誰でもデータを操作できる環境を作成できます。たとえば、医療専門家は、コードを 1 行も記述することなく、年齢グループまたは地域を選択して人口データを調べることができます。 ShinyLive と GitHub Pages を組み合わせることで、これらのインタラクティブな機能に簡単にアクセスでき、直感的に操作できるようになり、プロジェクトがより幅広い視聴者に大きな影響を与えるようになります。 🧩

さらに、ShinyLive は、アプリの実行に必要なリソースを最適化することで、pkgdown Web サイトのパフォーマンスを向上させます。ロジック全体が JavaScript にコンパイルされるため、アプリの読み込みが速くなり、よりスムーズな対話性が実現します。これは、プロットのレンダリングやフィルターの適用によって遅延が発生する可能性がある大規模なデータセットを表示する場合に特に役立ちます。その結果、最新の Web 標準とアクセシビリティの期待に沿ったプロフェッショナル グレードのユーザー エクスペリエンスが実現します。 🚀

pkgdown Web サイトでの ShinyLive の使用に関するよくある質問

  1. Shiny アプリを pkgdown Web サイトに埋め込むにはどうすればよいですか?
  2. 使用できます ShinyLive Shiny アプリを JavaScript バンドルに変換し、 Articles pkgdown Web サイトのセクション。
  3. ShinyLive アプリにはライブ R サーバーが必要ですか?
  4. いいえ、ShinyLive アプリはスタンドアロンであり、アクティブな R サーバーを必要とせずにブラウザーで直接実行できます。
  5. 変更を GitHub にプッシュするときにアプリを自動的に更新できますか?
  6. はい、使用できます GitHub Actions 導入を自動化します。のようなワークフロー deploy-app.yaml あなたの代わりにこれを処理できます。
  7. どのような種類のユーザー インタラクションを含めることができますか?
  8. などの機能を追加できます selectInput ドロップダウンの場合と sliderInput 数値範囲を指定してアプリを高度にインタラクティブにします。
  9. ShinyLive はプログラマ以外にも適していますか?
  10. 絶対に！ ShinyLive を使用すると、プログラマ以外でもインタラクティブなウィジェットを通じてデータを探索できるため、アクセシビリティに優れたツールになります。

インタラクティブなデータ探索が簡単に

ShinyLive は、pkgdown Web サイトにインタラクティブ性を統合するためのユーザーフレンドリーなソリューションを提供します。 Shiny アプリをブラウザ対応の JavaScript バンドルに変換することで、あらゆるスキル レベルのユーザーにとって魅力的なデータ視覚化への扉が開かれます。たとえば、単純なドロップダウン メニューとスライダーを使用して、人口統計に関するデータセットを探索できます。 🌟

ShinyLive と GitHub Actions を組み合わせると、展開プロセスが合理化され、Web サイトを簡単に最新の状態に保つことができます。開発者であろうとデータ専門家であろうと、このアプローチは技術的なコンテンツと直感的なユーザー エクスペリエンスの間のギャップを埋め、データ ストーリーを Web ブラウザー上で生き生きとしたものにします。 📊

リソースと参考資料
  1. コンテンツと例は、公式 ShinyLive ドキュメントとチュートリアルからインスピレーションを得ています。詳細については、次のサイトを参照してください。 ShinyLive の紹介 。
  2. 導入ワークフローは、 ShinyLive GitHub リポジトリ これには、サンプルの GitHub Actions ワークフローと統合のヒントが含まれています。
  3. pkgdown 統合戦略は、 pkgdown ドキュメント 、R パッケージのドキュメント Web サイトの作成と管理に関する洞察を提供します。
  4. 追加のインスピレーションは、次の場所で実際の例を調べることで得られました。 SC 人口 GitHub ページ 、pkgdown での ShinyLive の実際のアプリケーションを紹介します。