LoginSignup
3

More than 5 years have passed since last update.

shinyをjQueryで拡張する

Last updated at Posted at 2017-12-15

R Shiny Advent Calendar 2017の16日目の記事です。クリスマスが近づいてきました!

shiny appにjQueryプラグインを設置する

スクリーンショット 2017-12-15 午後7.10.55.png

今回は以下のappに、Flexsliderを使ったslideを設置してみようと思います。
読者の方々のshiny appに導入して、とりあえず動くところをゴールに設定して書きます!

image.png

0. はじめに

以下のファイル構造でまず用意します。cssファイルは最初は必要ないかもしれません。
Advent Calendarなのでクリスマスカラーにしました!

フォルダ

 image.png

app.R
library(shiny)

ui <- tagList(

  fluidPage(title="Flexslider",
    tags$h1("Flexslider")
  ),
  includeCSS("www/style.css")
)

server <- function(input, output, session){}

shinyApp(ui = ui, server = server)

style.css

body {
  background-color: #9B2E46;
  font-family: 'Comic sans MS';
  color: white;
  text-align: center;
}

ちなみに、fluidPage()titile引数に文字列を指定すると、今回のようにBrowserのタブにタイトルが表示されます

image.png

1. flexsliderをダウンロードする

Flexsliderのページから、
プラグイン本体をダウンロードしてください。

スクリーンショット 2017-12-03 午後3.21.57.png

ダウロードしたフォルダを解凍して、以下の赤で囲んだファイル・フォルダを取り出して自分のappフォルダに移します。

スクリーンショット 2017-12-05 午後8.31.04.png

↓ 自分のフォルダへ

image.png
(flexsilder.cssはcssフォルダの中へ)

フォルダの構成に決まりはおそらくありませんが、コードの中でpathを丁寧に記述していく必要があります。
上は今回のコードに対応するファイル構成ですので、参考までに。
※ jquery.flexslider-min.jsを使うか、jquery.flexslider.jsを使うかはおまかせします。

2.app.Rのなかでプラグインをよみこむ

uiの中に、フォルダに移したプラグインを読み込むコードと、slideを設置するコードを加えます。

app.R
library(shiny)

ui <- tagList(

  fluidPage(title="Flexslider",
    tags$h1("Flexslider")
  ),


ui <- tagList(

  fluidPage(title="Flexslider",

    tags$h1("Flexslider")
  ),

 # プラグイン読み込み ---
  tags$head(
    HTML('
         <head>
         <link rel="stylesheet" type="text/css" href="css/flexslider.css">
         <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
         <script type="text/javascript" src="js/jquery.flexslider-min.js"></script>

         <script type="text/javascript" charset="utf-8">
          $(window).load(function() {
          $(".flexslider").flexslider({
           animation: "slide"
          });
         });
         </script>       
         </head>
         ')
  ),

# slide 設置 ---
  fluidPage( 

    shiny::column(width = 12,
      div(class = "flexslider",
          tags$ul( class = "slides",
                   tags$li(tags$h1(" this is slide1 ")  ),
                   tags$li(tags$h1(" this is slide2 ")  ),
                   tags$li(tags$h1(" this is slide3 ")  )
          )
      )
    )
  ),

  includeCSS("www/style.css")
)

server <- function(input, output, session){}

shinyApp(ui = ui, server = server)

pathがちゃんと通っていれば、slideが出現してくれるはずです!
1.のフォルダ構成と異なる形でjquery.flexslider-min.jsなどを配置している場合は、pathをいい感じに調整してください!

イメージ
image.png

3. flexslider.cssを一部変更する

デフォルトのまま使うと、以下のようにnavigationが文字化けしてしまうので、flexslider.cssを一部変更します。(環境によっては不要かもしれないです)

< >が文字化けしてしまう
図1.jpg

Before

flexslider.css
@font-face {
  font-family: 'flexslider-icon';
  src: url('fonts/flexslider-icon.eot');
  src: url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('fonts/flexslider-icon.woff') format('woff'), url('fonts/flexslider-icon.ttf') format('truetype'), url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}

After

flexslider.css
@font-face {
  font-family: 'flexslider-icon';
  src: url('../fonts/flexslider-icon.eot');
  src: url('../fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('../fonts/flexslider-icon.woff') format('woff'), url('../fonts/flexslider-icon.ttf') format('truetype'), url('../fonts/flexslider-icon.svg#flexslider-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}

ここまでで一番BasicなFlexsliderの設置は完了です。

オプションを変えてみる

Flexsliderはオプションを簡単に変更できるのが利点みたいです。
こちらのサイトにとても丁寧にまとまってます!

いくつか試してみます。

manual controls

自作のコントロールボタンを設置できます

イメージ
図1.png

app.R

library(shiny)

ui <- tagList(

  fluidPage(title="Flexslider",

            tags$h1("Flexslider"),

            tags$head(
              HTML('
                   <head>
                   <link rel="stylesheet" type="text/css" href="css/flexslider.css">
                   <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
                   <script type="text/javascript" src="js/jquery.flexslider-min.js"></script>

                   <script type="text/javascript" charset="utf-8">
                   $(window).load(function() {
                   $(".flexslider").flexslider({

                   manualControls: "#hoge a",
                   animation: "slide"

                   });
                   });
                   </script>


                   </head>
                   ')
              ),

            fluidPage( 
              shiny::column(width = 12,
                div(class = "flexslider",
                  fluidRow(
                    shiny::column(width = 12,
                                  tags$ul( class = "slides",
                                          tags$li( tags$h1(" this is slide1 ")  ),
                                          tags$li( tags$h1(" this is slide2 ")  ),
                                          tags$li( tags$h1(" this is slide3 ")  )
                                          )
                                  )
                                ),
                  fluidRow(
                    shiny::column(width = 12,
                      div(id = "hoge",
                          tags$a( herf="#", "1"), tags$span(" "),
                          tags$a( herf="#", "2"), tags$span(" "),
                          tags$a( herf="#", "3")
                          )
                    )
                  )
                )
              )
            ),

            includeCSS("www/css/style.css")
              )
            )

server <- function(input, output, session){}

shinyApp(ui = ui, server = server)

サムネイル表示

イメージ
スクリーンショット 2017-12-15 午後7.10.55.png

サムネイルをクリックするとスライダーが動きます。

イメージ2

画像ファイルを用意します。画像はFree stock photosからお借りしています。

スクリーンショット 2017-12-15 午後7.09.40.png

app.R

library(shiny)

ui <- tagList(

  fluidPage(title="Flexslider",

            tags$h1("Flexslider"),

            tags$head(
              HTML('
                   <head>
                   <link rel="stylesheet" type="text/css" href="css/flexslider.css">
                   <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
                   <script type="text/javascript" src="js/jquery.flexslider-min.js"></script>

                   <script type="text/javascript" charset="utf-8">
                   $(window).load(function() {
                   $(".flexslider").flexslider({

                    animation: "slide",
                    controlNav: "thumbnails",


                   });
                   });
                   </script>


                   </head>
                   ')
              ),

            fluidPage(
              shiny::column(width = 12,
                div(class = "flexslider",
                    tags$ul( class = "slides",
                             tags$li(`data-thumb` = "images/image1.png", tags$img(src = "images/image1.png")  ),
                              tags$li(`data-thumb` = "images/image2.png", tags$img(src = "images/image2.png")  ),
                              tags$li(`data-thumb` = "images/image3.png", tags$img(src = "images/image3.png")  ),
                              tags$li(`data-thumb` = "images/image4.png", tags$img(src = "images/image4.png")  )
                            )
                    )
              )
            ),

            includeCSS("www/css/style.css")
          )
)

server <- function(input, output, session){}

shinyApp(ui = ui, server = server)


こちらのappについては、以下のコードからイメージがつかめると思います。
よろしければ実行してみてください!

console.R
library(shiny)
runGitHub(repo = "Flexslider_qiita", username = "sasakiK")

少し時間がかかるかもしれませんが、アプリが起動すると思います!

注意点

※コンソールに上のコードをコピペ&実行すると、(ディレクトリなど配慮しても)私の環境ではこうなります…

スクリーンショット 2017-12-15 午後7.23.33.png

app.Rのスクリプトを作って、スクリーンショット 2017-12-15 午後7.22.12.png から実行すると上手くスライダーができると思います!

スクリーンショット 2017-12-15 午後7.24.52.png

気分あげていきましょう!

参考

Flexslider
04-08:Fexslider 2
Free stock photos

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3