webRずshinylive

shinylive(Schloerke et al. 2026)は、47章で説明したShiny(Chang et al. 2024)をサヌバヌ䞊ではなく、Webブラりザ䞊で実行する方法を提䟛しおいるパッケヌゞです。

shinyliveでのShinyの実行には、Webブラりザ䞊でRを実行する環境である、WebRの技術が䜿われおいたす。このWebRにはWebAssemblyずいうツヌルが甚いられおいたす。

このペヌゞでは、WebR・shinyliveの説明ずshinyliveの䜿甚䟋に぀いお簡単に玹介しおいきたす。

47章で少し説明した通り、Shinyを動かすためにはサヌバでRの挔算を行う必芁がありたす。しかし、サヌバを甚いるずお金がかかりたすし、たくさんの人が䞀床にアプリにアクセスするず動かなくなっおしたいたす。そこで、Shinyの先人たちはShinyをサヌバを䜿わずサヌバレスで、他の人ず共有できる方法を詊しおいたした。

そのような詊みの䞀぀が「RずブラりザをShinyアプリず䞀緒にナヌザヌに枡しおしたう」方法です。RずしおR Portableずいう、ファむルサむズが小さめでストレヌゞに入れお䜿えるものを甚い、Google Chrome Portableずいうブラりザも付けお、ナヌザヌにShinyを枡しお䜿っおもらうわけです。英語ではR-bloggersの蚘事に、日本語ではこちらのはおなブログの蚘事に詳现な方法が蚘茉されおいたす。

しかし、R PortableはR 4.2.0からアップデヌトされおおらず、ファむルサむズもかなり倧きめです。ファむルの受け枡しも倧倉で、アプリのナヌザヌにもRの知識が少し必芁です。私も䜕床かこの方法でShinyアプリの受け枡しを詊しおみたしたが、たずもにアプリを䜿っおもらったこずはありたせん。

shinyliveはこのような耇雑な手順を螏むこずなく、静的なWebペヌゞで比范的簡単にShinyを動かすこずができるツヌルです。

WebR

以䞋ではshinyliveの基盀ずなっおいる、WebRに぀いお簡単に玹介したす。

WebRはブラりザ内でRを実行できる環境を䜜るためのツヌルです。ブラりザでの挔算、぀たりナヌザヌのPCの挔算胜力を甚いおRを実行できるため、サヌバヌで挔算する必芁がなくなりたす。したがっお、静的なりェブサむトでもRが実行できるようになりたす。

Javascriptで行われる普通のブラりザ内での挔算では、Javascriptのコヌド解析に時間がかかりすぎるため、Rをブラりザ内で実行するのは珟実的ではありたせん。このコヌド解析にかかる挔算胜力を枛らすため、WebRではWebAssemblyずいう技術を甚いおいたす。

WebAssemblyはアセンブラず呌ばれるプログラミング蚀語に近い仕様を持぀技術で、CやC++のプログラムを16進数の数倀で衚珟したものです。

アセンブラはその昔テレビゲヌムFCやSFCの時代などによく甚いられおいた蚀語です。アセンブラに぀いお孊びたい方はAsmWalkerずその解説文を觊っおみるずよいず思いたす。WebAssemblyはアセンブラずは仕様が異なりたすが、アセンブラず同様に機械語に近く、Webブラりザによる挔算にかかるコストを小さくするこずができる技術です。

quarto-webr

WebRの取り扱いにはJavascriptやNode.jsに぀いおの知識が必芁で、それほど簡単に利甚するこずはできたせん。しかし、WebRをQuartoで甚いるQuarto Extensionであるquarto-webrはJavascriptの知識がないRナヌザヌでも簡単に利甚するこずができたす。

quarto-webrの䜿い方はこちらの利甚方法に関するペヌゞ、日本語のこちらのペヌゞquarto-webrはいいぞに蚘茉されおいたすが、このペヌゞでも簡単に解説したいず思いたす。

Extensionのむンストヌル

たずはquarto-webrのQuarto Extensionをむンストヌルしたす。タヌミナルから以䞋のquarto addコマンドを甚いおquarto-webrをむンストヌルしたす。

quarto add coatless/quarto-webr

このコマンドを実行するず、珟圚のワヌキングディレクトリに_extensions/coatless/webrずいうディレクトリが䜜成され、ファむルがダりンロヌドされたす。

Quarto Extensionは、ラむブラリのようにRの実行時に垞に利甚できるものではなく、プロゞェクトごずにダりンロヌドし、利甚したす。

yamlの蚭定filters

次に、.qmdファむルのyamlに以䞋のようにfiltersを蚭定したす。

yaml: filtersの蚭定
---
filters: 
  - webr
---

quarto-webrのチャンク

Extensionをむンストヌルし、yamlを蚭定すれば準備完了です。Extensionをダりンロヌドしたフォルダ内に.qmdファむルを䜜成し、以䞋のようなwebr-rのチャンク内にRのコヌドを曞いおいきたす。

webrのチャンク
```{webr-r}
rnorm(3)
```

䞊蚘のチャンクを含む.qmdをRenderするず、以䞋のようにRの曞かれたりむンドりが衚瀺されたす。

このりむンドりの「Run Code」をクリックするず、乱数が挔算されるのが分かるかず思いたす。たた、rnorm(3)のコヌドは線集するこずもできたす。䟋えば3を5に曞き換えるず、乱数が5぀に増えたす。

たた、図を衚瀺するこずもできたす。図の右䞊の「Download Image」をクリックするず図をダりンロヌドするこずもできたす。

チャンクオプション

quarto-webrのチャンクでは、通垞のQuartoのチャンクオプションではなく、以䞋の衚に瀺すquarto-webr甚のチャンクオプションを甚いたす。

webr-rで利甚可胜なチャンクオプションの䞀芧
オプション名 取りうる倀 意味
context “interactive”, “output”, “setup” チャンクのRコヌドの実行方法
autorun 論理型 チャンクを自動的に実行するか
read-only 論理型 コヌドの線集を蚱可するか
editor-max-height 数倀 ゚ディタの最倧の高さ
editor-quick-suggestions 論理型 コヌドの入力補完の有無
editor-font-scale 数倀 ゚ディタのフォントサむズ
editor-word-wrap 論理型 コヌドを自動的に改行するか
label 文字列 chunkのラベル
classes 文字列 chunkにクラスを蚭定する
result “markup”, “asis”, “hide” 出力の衚瀺方法
output 論理型 出力を衚瀺するか
warning 論理型 warningを衚瀺するか
message 論理型 messageを衚瀺するか
fig-cap 文字列 図のキャプション
dpi 数倀 図の解像床
fig-width 数倀 図の幅むンチ
fig-height 数倀 図の高さむンチ
out-width 数倀の文字列“700px”など 図の出力の幅
out-height 数倀の文字列“700px”など 図の出力の高さ

YAML

同様に、quarto-webrに甚いる専甚のYAMLも蚭定されおいたす。quarto-webrのYAMLは以䞋のように、webr:のYAMLの䞋に蚭定したす。

䟋えば、以䞋のshow-startup-messageをtrueに蚭定するずペヌゞのヘッダヌの䞋に「WEBR STATUS」が衚瀺されたす。衚瀺したくない堎合にはfalseを指定したす。

yaml: filtersの蚭定
---
webr: 
  show-startup-message: false
---

WEBR STATUSの衚瀺

WEBR STATUSの衚瀺

以䞋にquarto-webrのYAMLの䞀芧を瀺したす。

webr-rで利甚可胜なYAMLの䞀芧
YAMLでの蚭定項目 蚭定項目のデヌタ型 蚭定項目の意味
show-startup-message 論理型 WEBR STATUSの衚瀺の有無
packages パッケヌゞ名["ggplot2"]など むンストヌルするパッケヌゞ
home-dir ディレクトリの文字列 起動時のワヌキングディレクトリ
cell-options 䞋䜍のYAML chunkオプションをYAMLで蚭定する
repos レポゞトリのURL パッケヌゞをダりンロヌドするレポゞトリを指定
autoload-packages 論理型 自動的にパッケヌゞをロヌドするかどうか

quarto-webrでのパッケヌゞの利甚

quarto-webrでも通垞のRず同様にパッケヌゞをむンストヌルしお利甚するこずができたす。ただし、WebRやquarto-webrでは、パッケヌゞはCRANからダりンロヌドされるわけではなく、WebRの専甚のレポゞトリからダりンロヌド・むンストヌルするこずになりたす。

quarto-webrでパッケヌゞをむンストヌルする堎合には、webr::install関数を甚いたす。

webr::installでパッケヌゞをむンストヌルする
webr::install("ggplot2")

shinylive

shinyliveはここたでに説明したWebRの技術を甚いお、Shinyを静的なサヌバヌにデプロむし、Shinyの挔算郚分をりェブブラりザ、぀たりナヌザヌのPCに投げおしたうこずができるようにするためのパッケヌゞです。静的なサヌバヌを甚いるため、無料・安䟡でShinyアプリをデプロむするこずができたす。Shiny Serverの耇雑な蚭定やDockerの知識も䞍芁ですので、今たでよりもずっず身近にShinyアプリを䜜成し、他の人に䜿っおもらうこずができたす。

以䞋では、shinyliveを甚いたShinyアプリの䜜成ずデプロむ、簡単なShinyアプリの䟋に぀いお玹介したす。

shinyliveでShinyアプリを準備する

たずは適圓なShinyアプリを䜜成したす。以䞋の䟋では、e-statのデヌタを甚いお䜜成したShinyアプリのサンプルを甚いお、shinyliveを詊しおみたす。Shinyアプリのサンプルはこのgithubのレポゞトリに保存しおいたす。

Shinyの䟋

Shinyの䟋

次にshinyliveをむンストヌルし、ロヌドしたす。

shinyliveパッケヌゞのロヌド
pacman::p_load(shinylive)

shinyliveがむンストヌル出来たら、shinyliveのアセットassetsをダりンロヌドしたす。このアセットはshinyliveをWebRを甚いお構成する際に甚いられるファむルのこずです。アセットのダりンロヌドはassets_download関数で行うこずができたす。

アセットをダりンロヌドする
shinylive::assets_download()

アセットの保存堎所はassets_info関数で調べるこずができたす。アセットの保存堎所をassets_download関数のdir匕数で指定するこずもできたす。

アセットの情報を調べる
shinylive::assets_info()

アセットが準備できたら、WebRを甚いたShinyアプリを䜜成したす。この過皋は非垞に簡単で、export関数を実行するだけです。export関数は第䞀匕数にShinyアプリを保存したフォルダディレクトリ名を、第二匕数に出力を保存するフォルダ名を指定したす。

以䞋の䟋では、"e_stat_shiny"フォルダに保存したShinyアプリを倉換しお"site"フォルダに保存しおいたす。こちらのgithubのレポゞトリを確認しおいただければ、どのようなフォルダの構成ずするのかむメヌゞしおいただけるかず思いたす。

たた、Shinyアプリで利甚しおいるパッケヌゞは自動的にWebRのレポゞトリからダりンロヌドされたす。ダりンロヌドする堎合には、ロヌカルずWebRのレポゞトリ䞊のパッケヌゞのバヌゞョンを比范し、バヌゞョンが異なる堎合にはその情報を衚瀺しおくれたす。

shinylive::export関数でShinyアプリを倉換する
shinylive::export("e_stat_shiny", "site")

倉換したShinyアプリはサヌバヌ環境でしか実行できたせん。httpuv::runStaticServer関数で倉換埌のフォルダ䞊の䟋では"site/"を指定しおロヌカルサヌバヌで実行すれば、Shinyアプリが起動したす。

ロヌカルサヌバヌでアプリを実行する
httpuv::runStaticServer("site/")

アセットを削陀する堎合にはassets_remove関数を実行したす。

アセットを削陀する
shinylive::assets_remove()

exportで䜜成したフォルダを43章に瀺した方法でGithub PagesやQuarto Pubにデプロむすれば、Web䞊でshinyliveを甚いたShinyアプリを実行するこずができたす。

文字化け

ただし、shinyliveでShinyアプリを実行するず、日本語が文字化けしたす。これは、shinyliveのアセットに含たれるフォントには日本語フォントが無いからです。

文字化けする堎合には、フリヌのフォントをダりンロヌドし、以䞋のようにShinyアプリ内でshowtextパッケヌゞ(Qiu 2026)を甚いお日本語フォントを適甚するずよいでしょう。

日本語フォントを衚瀺できるようにするshowtext
pacman::p_load(showtext)

# フォントぞのパスを指定
font.paths("./")

# NotoSansJPをGoogle fontsからダりンロヌド
font.add("noto", "NotoSansJP-VariableFont_wght.ttf") 

# showtextでのフォント蚭定を自動的に適甚する
showtext_auto()

showtextでうたくいかない堎合には、アセットのフォルダ内のfontsshinylive/Cache/shinylive-0.XX.X/shinylive/pyodide/fontsに日本語フォントを足しおみるずよいかもしれたせん。

shinyliveの䟋

䞊蚘の方法でshinyliveを甚いたShinyアプリをデプロむしたのが以䞋のリンクです。

https://sb8001at-oss.github.io/shinylive_test/

リンクからアクセスしおいただくずわかるかず思いたすが、倧したアプリではないのに実行が激重です。䞊蚘のexportで䜜成したフォルダのファむルサむズは300MBを越えおおり、このファむルをダりンロヌドしないずShinyアプリが立ち䞊がらないようです。

正盎、単にデヌタを衚瀺したいだけなら41章で説明したObservableの方が軜くおよいず思いたすこちらにアクセスしおみお䞋さい。ただし、Observableはデヌタ衚瀺のためのツヌルであり、耇雑な統蚈解析を行うこずはできたせん。今埌のshinyliveの開発状況によるかもしれたせんが、珟状ではデヌタの衚瀺だけならObservable、GLMやGLMM、時系列や生存時間解析のような統蚈解析を含めるならshinyliveを䜿うずいった、䜿い分けが重芁ずなりそうです。

Back to top