ShinyでJQuery を使うための、shinyjquiライブラリの導入

本記事は、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を独自カスタマイズするといいかなと思います。