Export HTML Slide as PDF

HTMLなSlideをPDFにexportする.

  1. HTML Slide
  2. Export HTML Slide
  3. See Also

HTML Slide

最近 yusukebe/revealgo が話題となり MarkdownでHTML Slideのgenerateが再燃(?)しているが、 HTML Slideで困るのがSlideの共有だ.

普段Remark.jsを使ってMarkdownからHTML Slideをgenerateしているのだが、 以前Kaizen PlatformでのTech Talk #4で Slide を発表した際、共有のために iframe でこのSlideを埋め込んだ Blog post を作り共有していた.

/20160213/share_lisp_1.gif

今更ながらふと、PhantomJSなどでScreenshotを撮り、それをPDFに変換し、 Speaker Deck や SlideShare にuploadして共有できないかと考えた.

Export HTML Slide

そんなTool作ろうとしたところで、とりあえず調べてみると DeckTape というProjectが見つかった.

About DeckTape

DeckTapeは

DeckTape is a high-quality PDF exporter for HTML5 presentation frameworks.

らしい.

SupportしているFrameworkは

で、使用していた Remark.js もsupportされていた.

とりあえずこれを使ってSpeaker Deckにuploadしてみる.

Install

DeckTapeのREADMEの Install sectionを見ると、PhantomJSのforked versionを使用しているとのこと. これを見てやめようかと思ったが、READMEを少し読んでいくと Docker なるsectionがあり、どうもDocker imageを配布しているようなので、Docker imageでInstallすることにする.

$ docker pull astefanutti/decktape

簡単だ.

Run

とりあえず

$ docker run astefanutti/decktape -h

してみると、

$ docker run astefanutti/decktape -h

Usage: phantomjs decktape.js [options] [command] <url> <filename>

command      one of: automatic, csss, deck, dzslides, flowtime, generic, impress, remark, reveal, shower, slidy
url          URL of the slides deck
filename     Filename of the output PDF file

Options:
   -s, --size                Size of the slides deck viewport: <width>x<height>  [1280x720]
   -p, --pause               Duration in milliseconds before each slide is exported  [1000]
   --screenshots             Capture each slide as an image  [false]
   --screenshots-directory   Screenshots output directory  [screenshots]
   --screenshots-size        Screenshots resolution, can be repeated
   --screenshots-format      Screenshots image format, one of [jpg, png]  [png]

Defaults to the automatic command.
Iterates over the available plugins, picks the compatible one for presentation at the 
specified <url> and uses it to export and write the PDF into the specified <filename>.

と表示され、ちゃんと動いてることが分かった.

Docker imageなので良い感じににcurrent directoryをmountして、さらにScreen sizeを指定して

$ docker run --rm -v `pwd`:/pwd astefanutti/decktape -s 1240x930 https://blog.rudolph-miller.com/slide/2015/10/29/about-lisp/ /pwd/lisp.pdf

を実行すると

Loading page https://blog.rudolph-miller.com/slide/2015/10/29/about-lisp/ ...

Loading page finished with status: success
Remark JS DeckTape plugin activated
Printing slide #88      (1/88) ...

と読み込まれ、Remark.js製ということも判別でき、処理が始まったようだ.

最後に

Printed 88 slides

と表示されて、処理は終了. lisp.pdf にPDFが生成されていた.

Upload

あとはこの生成された lisp.pdf をSpeaker Deckにuploadすると、

のようにちゃんと処理できていることが分かる.


これでなんの気兼ねもなく、これからもMarkdownでSlideを作れる.

めでたし.


See Also