shinyをjQueryで拡張する


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

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

![スクリーンショット 2017-12-15 午後7.10.55.png](https://qiita-image-store.s3.amazonaws.com/0/143058/ed0cccc3-75f7-700d-6ed7-042e04589216.png)

今回は以下のappに、[Flexslider](https://woocommerce.com/flexslider/)を使ったslideを設置してみようと思います。
読者の方々のshiny appに導入して、とりあえず動くところをゴールに設定して書きます！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/cd8ddc93-150f-0d59-e9df-a95041808631.png)

## 0. はじめに

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

フォルダ

　![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/79f042d5-d14f-3d97-cc22-41ab24707b72.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](https://qiita-image-store.s3.amazonaws.com/0/143058/74b4cae1-9e1d-03d5-0839-9180a282c3be.png)


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

[Flexslider](https://woocommerce.com/flexslider/)のページから、
プラグイン本体をダウンロードしてください。

![スクリーンショット 2017-12-03 午後3.21.57.png](https://qiita-image-store.s3.amazonaws.com/0/143058/fccbb301-8677-05e4-5e6d-84b6c2a5c5ab.png)


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

![スクリーンショット 2017-12-05 午後8.31.04.png](https://qiita-image-store.s3.amazonaws.com/0/143058/061a3cca-64f1-bd3d-a39b-d794c3e9669f.png)


↓　自分のフォルダへ

![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/a877f87b-c361-f1fe-d6fa-f879925b814e.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](https://qiita-image-store.s3.amazonaws.com/0/143058/a4753d09-a845-1e9b-7423-3b1565f16abd.png)




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

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

< >が文字化けしてしまう
![図1.jpg](https://qiita-image-store.s3.amazonaws.com/0/143058/cfd13041-5158-6f27-608f-fa00f9ec8f86.jpeg)





**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の設置は完了です。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="und" dir="ltr"><a href="https://t.co/7qrGRGfSP0">pic.twitter.com/7qrGRGfSP0</a></p>&mdash; sasaki_K_sasaki (@sasaki_K_sasaki) <a href="https://twitter.com/sasaki_K_sasaki/status/938074544882974720?ref_src=twsrc%5Etfw">2017年12月5日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


### オプションを変えてみる

Flexsliderはオプションを簡単に変更できるのが利点みたいです。
[こちらのサイト](http://demo.html-coding.co.jp/sbc/2012/C04-08/flexslider/)にとても丁寧にまとまってます！

いくつか試してみます。

**manual controls**

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

イメージ
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/143058/fb0228f0-251b-256b-2a14-4488fb6a2faa.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](https://qiita-image-store.s3.amazonaws.com/0/143058/ed0cccc3-75f7-700d-6ed7-042e04589216.png)

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

イメージ2

<blockquote class="twitter-tweet" data-lang="ja"><p lang="und" dir="ltr"><a href="https://t.co/zPPEfq9X2a">pic.twitter.com/zPPEfq9X2a</a></p>&mdash; sasaki_K_sasaki (@sasaki_K_sasaki) <a href="https://twitter.com/sasaki_K_sasaki/status/941608936888659968?ref_src=twsrc%5Etfw">2017年12月15日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


画像ファイルを用意します。画像は[Free stock photos](https://www.pexels.com/)からお借りしています。

![スクリーンショット 2017-12-15 午後7.09.40.png](https://qiita-image-store.s3.amazonaws.com/0/143058/e6876b29-68b0-39f6-b52c-897b2f539e06.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](https://qiita-image-store.s3.amazonaws.com/0/143058/d52ce64f-6cbb-b929-1443-fd4c1d465fcd.png)

app.Rのスクリプトを作って、![スクリーンショット 2017-12-15 午後7.22.12.png](https://qiita-image-store.s3.amazonaws.com/0/143058/b92bda2b-b43c-7299-6e2b-c0328a1078b7.png)　から実行すると上手くスライダーができると思います！

![スクリーンショット 2017-12-15 午後7.24.52.png](https://qiita-image-store.s3.amazonaws.com/0/143058/ec75e072-71c8-5962-bff1-3d3a20459c24.png)


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

## 参考

[Flexslider](https://woocommerce.com/flexslider/)
[04-08:Fexslider 2](http://demo.html-coding.co.jp/sbc/2012/C04-08/flexslider/)
[Free stock photos](https://www.pexels.com/)