8

slick私はjavascript ライブラリ ( http://kenwheeler.github.io/slick/ )に感銘を受け、光沢のあるアプリ/フレックスボード ページに組み込みたいと考えています。

R でパッケージを使用してhtmlwidgets、slick js ライブラリを組み込みたいので、オンライン ドキュメント ( http://www.htmlwidgets.org/develop_intro.html ) で提案されているように、実行してパッケージを作成することから始めました。以下...

devtools::create("slick")              
setwd("slick")                          
htmlwidgets::scaffoldWidget("slick")

https://github.com/kenwheeler/slick/archive/1.6.0.zipから js ライブラリをダウンロードしました

このようなファイル構造になるように、パッケージの構造に配置しました。

R/
| slick.R

inst/
|-- htmlwidgets/
|   |-- slick.js
|   |-- slick.yaml
|   |-- lib/
|   |   |-- slick-1.6.0/
|   |   |   |-- slick/
|   |   |   |   |-- slick.min.js 
|   |   |   |   |-- slick.js
|   |   |   |   |-- slick.css
|   |   |   |   |-- slick-theme.css

私のslick.yamlファイルは次のようになります...

dependencies:
  - name: slick
    version: 1.6.0
    src: htmlwidgets/lib/slick-1.6.0
    script:
        - slick/slick.min.js
        - slick/slick.js
    stylesheet: 
        - slick/slick.css
        - slick/slick-theme.css

しかし、URLのベクトルを取得して光沢のあるアプリに表示できるようにinst/htmlwidget/slick.jsファイルとファイルを調整する方法については、本当に行き詰まっています。R/slick.Rこの理由は、提供された例と同様の入力データの概念と一致しないように見えるためです。

再現性と、パッケージの例で提供されているものと同じ URL を使用するために、コンテンツとして使用したいプレースホルダー img URL のベクトルを提供しています。カルーセル内の各画像。

image_vec <- paste0("http://placehold.it/350x300?text=",seq(1:9))

ひょっとしたら、こんなものを使う必要があるのでしょうか? ...

lapply(image_vec,function(y){div(img(src=y))})

いつものように、これに関する助けをいただければ幸いです。

編集

新しいslick.yamlファイルは次のようになります... @NicE の回答投稿の後...何か不足していますか?

dependencies:
  - name: jquery
    version: 3.1.0
    src: htmlwidgets/lib
    script:
      - jquery-3.1.0.min.js
  - name: slick
    version: 1.6.0
    src: htmlwidgets/lib/slick-1.6.0
    script:
        - slick/slick.min.js
        - slick/slick.js
    stylesheet: 
        - slick/slick.css
        - slick/slick-theme.css

そして今、私のファイル構造は次のようになります:

R/
| slick.R

inst/
|-- htmlwidgets/
|   |-- slick.js
|   |-- slick.yaml
|   |-- lib/
|   |   |-- jquery-3.1.0.min.js
|   |   |-- slick-1.6.0/
|   |   |   |-- slick/
|   |   |   |   |-- slick.min.js 
|   |   |   |   |-- slick.js
|   |   |   |   |-- slick.css
|   |   |   |   |-- slick-theme.css

そして私の/inst/htmlwidgets/slick.js見た目は次のようになります

HTMLWidgets.widget({

  name: 'slick',

  type: 'output',

  factory: function(el, width, height) {

    // TODO: define shared variables for this instance
    // create new slick object witht the given id?
    var sl = new slick(el.id);



    return {

          renderValue: function(x) {
                    //add class to the div and center it
                    el.setAttribute("class",x.class);
                    el.style.margin = "auto";

                    //add images to the div
                    content='';    
                    for(var image in x.message)
                    {
                      content += '<div><img src="' + x.message[image] + '"/></div>';
                    }
                    el.innerHTML = content;

                    //initialize the slider.
                    $(document).ready(function(){
                      $("."+x.class).slick(x.options);      
                    });

      },

      resize: function(width, height) {

        // TODO: code to re-render the widget with a new size

      }

    };
  }
});
4

1 に答える 1

3

を使用した試みは次のhtmlwidgets_0.6とおりです。

依存関係については、yamlファイルは同じように見えます。上記の jQuery を追加しただけですslick。

dependencies:
  - name: jquery
    version: 3.1.0
    src: htmlwidgets/lib
    script:
      - jquery-3.1.0.min.js
  - name: slick ...

ここで取得して、libフォルダに入れることができます。

このslick.Rファイルでは、slick関数の引数を変更してオプションを追加し、xすべての引数を JS コードに転送するように変更する必要があります。

slick <- function(message, class="slick_slider", options = list(), width = NULL, height = NULL) {

  # forward options using x
  x = list(
    message = message,
    class = class,
    options = options
  )
...

では、slick.js主に を変更しrenderValueて、画像/コンテンツを に追加しdiv、カルーセルを表示する必要があります。

renderValue: function(x) {
          //add class to the div and center it
          el.setAttribute("class",x.class)
          el.style.margin = "auto";

          //add images to the div
          content='';    
          for(var image in x.message)
          {
            content += '<div><img src="' + x.message[image] + '"/></div>';
          }
          el.innerHTML = content;

          //initialize the slider.
          $(document).ready(function(){
            $("."+x.class).slick(x.options);      
          });

        }

を使用してインストールしたら、アプリdevtools::install()で使用できます。shiny

library(shiny)
library(htmlwidgets)
library(slick)

server <- function(input, output) {
  output$test_slick <- renderSlick({    
    slick(paste0("http://placehold.it/350x300?text=",1:9),
          options=list(dots=TRUE,autoplay=TRUE))
})
}

ui <- fluidPage(
  tags$style(HTML("body {background-color: #2682d5}")),
  slickOutput('test_slick',width="350px",height="300px")
)

shinyApp(ui = ui, server = server)
于 2016-08-03T12:06:50.310 に答える