サイトの仕組み

3ページの階層構造

index.html                  トップページ
guide/index.html            1段下の解説ページ
demo/shinylive/index.html    2段下のアプリページ
assets/style.css            共通デザイン
assets/shinylive-embed.js    埋め込み処理
demo/shinylive/app.R         アプリのソース

すべてのページで共通CSSを使用し、相対パスでリンクしています。

Cloudflare Pagesに公開

1. ZIPを展開します。
2. index.htmlが直下にあるwebsiteフォルダーを選びます。
3. PagesのDirect Uploadでそのフォルダー全体をアップロードします。
4. 発行されたURLで3ページの移動とアプリを確認します。

外部埋め込みと自己ホストの違い

本サンプルはshinylive.io/r/app/をiframeで表示します。サイト自体にはHTML・CSS・JavaScript・Rソースのみを配置し、Shinylive実行環境は含めていません。

Quarto＋Shinyliveで出力したファイル一式を自分のサイトに配置する方式とは異なります。外部サービスやCDNへの接続が制限される環境では動作しない場合があります。

Shinylive体験へ →