本記事は、Shiny Advent Calendar 2018の22日目の記事です。
そして、Shiny100本ノックの第40弾です。
今回は、Shinyにjqueryを導入してみます。
shinyjquiライブラリ
JQueryを使うためのshiny用のライブラリとして、shinyjquiがあるため、今回はそちらを利用していきます。まだインストールしてない方は先にインストールしておきましょう。
install.packages("shinyjqui")
試作アプリ
今回試しに作ったアプリは以下のようなものになります。
画像からだとわかりづらいですが、上のsliderInputはドラッグして移動できるようになっています。
(中途半端な位置に動かされてるのがわかるかと思います。)
下のプロットに関しては、ドラッグしてサイズを変えられるようになっています。
shinyjquiを使うとこれらの機能が簡単に実装できちゃいます。具体的なコードについて見ていきましょう。
実装コード
app.R
library(shiny) library(shinyjqui) ui <- fluidPage( titlePanel("Old Faithful Geyser Data"), jqui_draggable( sliderInput("bins", "Number of bins:", min = 1, max = 50, value = 30), options = list(axis="x") ), jqui_resizable(plotOutput("distPlot", width = "400px", height = "400px")) ) server <- function(input, output) { output$distPlot <- renderPlot({ x <- faithful[, 2] bins <- seq(min(x), max(x), length.out = input$bins + 1) hist(x, breaks = bins, col = 'darkgray', border = 'white') }) } shinyApp(ui = ui, server = server)
ドラッグを可能にするには、jqui_draggableを使います。
jqui_draggable( sliderInput(), options = list(axis="x") )
使い方は簡単でドラッグできるようにしたい要素をjqui_draggable内に記述するだけです。
optionとしては、axisで、x軸方向のみドラッグ可、y軸方向のみドラッグ可の設定ができます。
ドラッグのpixel幅を指定したい場合は、list(grid = c(80, 80))のような形で可能です。この設定だと縦軸、横軸ともに80pxずつ動くことになります。
要素のサイズを変更可能にするには、 jqui_resizableを利用します。こちらも実装は簡単で、サイズ変更可能にしたい要素をjqui_resizableで囲むだけです。
終わりに
今回はshinyjquiを使った簡単なアプリを作ってみました。javascriptをいちから書くのは大変なので、便利なライブラリは使ってUIを独自カスタマイズするといいかなと思います。