Upgrade to Pro — share decks privately, control downloads, hide ads and more …

xaringanパッケージの内容をちょっとだけ

 xaringanパッケージの内容をちょっとだけ

Yakitori.R #02 (fukuoka.R #16)

Kazuhiro Maeda

October 11, 2019
Tweet

More Decks by Kazuhiro Maeda

Other Decks in Technology

Transcript

  1. xaringan
    パッケージの内容をちょっとだけ
    fukuoka.R / Yakitori.R
    kazutan
    2019-10-11

    View full-size slide

  2. 今⽇のお話
    xaringanパッケージとは
    実はエグい実装その1
    実はエグい実装その2
    2 / 17

    View full-size slide

  3. xaringan
    パッケージとは
    R NinjaことYihui作のパッケージ
    基本的な情報
    R Markdownでスライドを作成できる
    remark.jsというライブラリを活⽤
    気付いたら世界各地で流⾏った
    このスライドもそうです
    特徴
    renderが軽量
    chunkの評価は別
    リアルタイムで編集をPreviewできる
    他のRmdスライドテンプレートとはちょいちょい書き⽅が違う
    例えばスライド区切りが だったり
    3 / 17

    View full-size slide

  4. xaringan
    、内部的にはかなりエグい
    remark.jsを利⽤している
    remark.jsはmarkdown記法の⽂字列を読み込んでスライド化
    実はこれが問題となる(後述)
    R Ninjaは「隠れ蓑の術」でクリアした
    リアルタイム編集(markdownレンダリング)
    本来R MarkdownはrenderしないとViewerに出せない
    R Ninjaはこれを「無限⽉読」(個⼈的には千⾥眼?)でクリアした
    今⽇はこのあたりを簡単に紹介
    4 / 17

    View full-size slide

  5. おさらい: R Markdown
    の処理
    詳しくは以下の記事を参照: R Markdownの内部とテンプレート開発
    https://kazutan.github.io/TokyoR61/intoTheRmarkdown_d.html
    R Markdown
    の流れ
    系>
    系>
    .md pre_processor
    html, docs,
    pdf...
    output_format
    post_processor
    Pandoc
    .Rmd
    フォーマット
    テンプレ
    pre_knit
    .md
    output_format
    post_knit
    knit
    5 / 17

    View full-size slide

  6. 忍法「隠れ蓑の術」
    課題1
    remark.jsはmarkdown記法を対象とするけど、Pandocを通すと強制的にhtmlにされてしま
    う。どうしたらいいか?
    R Ninjaの回答
    スライドに表⽰させるドキュメント部分をバイパスさせればいい
    は?
    6 / 17

    View full-size slide

  7. 忍法「隠れ蓑の術」 コード部分(1)
    バイパスさせるために、⼀時ファイルを準備
    https://github.com/yihui/xaringan/blob/master/R/render.R#L84
    コメントでも書いてますね
    tmp_md = tempfile('xaringan', fileext = '.md') # store md content here (bypass Pandoc
    7 / 17

    View full-size slide

  8. 忍法「隠れ蓑の術」 コード部分(2)
    以下の処理をpre_processorとして準備
    Rmdファイルからyamlとbodyを分離させる
    body部分をさっきの添付ファイルに書き込む
    https://github.com/yihui/xaringan/blob/master/R/render.R#L172-L185
    pre_processor = function(
    metadata, input_file, runtime, knit_meta, files_dir, output_dir
    ) {
    res = split_yaml_body(input_file)
    write_utf8(res$yaml, input_file)
    res$body = protect_math(res$body)
    content = htmlEscape(yolofy(res$body, yolo))
    Encoding(content) = 'UTF-8'
    write_utf8(content, tmp_md)
    c(
    if (seal) c(' variable', 'title slide=true'),
    if (!identical(body, res$body)) c(' variable', 'math=true')
    )
    },
    8 / 17

    View full-size slide

  9. 忍法「隠れ蓑の術」 コード部分(3)
    pandocによる変換処理の後に、Pandocの挿⼊機能を使って差し込む
    https://github.com/yihui/xaringan/blob/master/R/render.R#L119-L138
    html_document2 = function(
    , includes = list(), mathjax = 'default', pandoc_args = NULL
    ) {
    if (length(includes) 0) includes = list()
    includes$before_body = c(includes$before_body, tmp_md)
    includes$after_body = c(tmp_js, includes$after_body)
    実際には細かい調整とかしてるけど、⼤まかにはこんな感じです
    9 / 17

    View full-size slide

  10. 忍法「無限⽉読」
    課題2
    どうやってリアルタイムレンダリングしてるの?
    R Ninjaの回答
    こんな感じで:
    1. 簡易的なHTTPサーバーを起動させる
    servr パッケージで実現
    2. 必要なライブラリを送る
    remark.jsなど
    3. RmdファイルをHTTPサーバーへ送り、Viewerに表⽰させる
    Viewerについてはこちら
    tubeplayRパッケージはなぜRStudio上でYouTubeを再⽣できるのか
    4. Rmdファイルをモニタリングし、変更を察知したらそれをサーバーへ送る
    rstudioapiを駆使している
    remark.jsがmdを読み込むというのがポイント
    5. 変更を察知したら、Viewerを再読み込みさせる
    10 / 17

    View full-size slide

  11. まとめ
    R Ninjaまじすごい
    11 / 17

    View full-size slide

  12. おまけ
    12 / 17

    View full-size slide

  13. みんなNinja
    になろう
    16 / 17

    View full-size slide

  14. Enjoy!
    17 / 17

    View full-size slide