reveal.jsはHTMLもしくはmark-downで記述した内容をスライドのように見せるためのライブラリです。HTMLなのでWEBにupしてしまえば閲覧可能な状態にはできるのですが、やはりslideshareにもupしたいということもあります。
reveal.jsのREADMEにはブラウザのエクスポート機能を用いたPDF化の方法が紹介されています。しかしこれが結構なフラワーパークで、あれがあれであれな感じです(つまりちゃんと出ない)。そこで今回は、別の方法として紹介されている decktape を使ってPDF化を試してみます。
decktape とは...
HTML5 プレゼンテーションフレームワーク用のPDF生成するためのツールです。
フォントの埋め込み、選択可能なテキスト、ハイパーリンク、SVGグラフィックスオブジェクト、ファイル圧縮などの機能をサポートしています。
インストール
とりあえずgit cloneします。
$ git clone --depth 1 https://github.com/astefanutti/decktape.git
Cloning into 'decktape'...
remote: Counting objects: 31, done.
remote: Compressing objects: 100% (28/28), done.
remote: Total 31 (delta 7), reused 14 (delta 0), pack-reused 0
Unpacking objects: 100% (31/31), done.
Checking connectivity... done.
ディレクトリを移動します。
$ cd decktape
phantomjsを使うのでphantomjsをインストールします。
$ curl -L http://astefanutti.github.io/decktape/downloads/phantomjs-osx-cocoa-x86-64 -o bin/phantomjs
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 178 100 178 0 0 287 0 --:--:-- --:--:-- --:--:-- 962
0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0
100 16.7M 100 16.7M 0 0 1096k 0 0:00:15 0:00:15 --:--:-- 1844k
$ chmod +x bin/phantomjs
$
PDFを出力
ではPDFを出力します。phantomjsを使ってdecktape.jsを実行します。第一引数にはHTML5 Presentationフレームワーク名を指定します。今回はreveal.jsを使っているのでrevealを指定しました。どれを指定するかはusageで確認できます。第二引数にはスライドがあるURLまたはファイル名を指定します。第三引数は出力するファイル名です。
$ bin/phantomjs decktape.js reveal "http://127.0.0.1:8000/freedom_hill/20150816/#/" test.pdf
Loading page http://127.0.0.1:8000/freedom_hill/20150816/#/ ...
〜省略〜
http://127.0.0.1:8000/bower_components/threejs/examples/js/controls/TrackballControls.js:8 in global code
Loading page finished with status: success
Reveal JS DeckTape plugin activated
Printing slide #/47 (52/48) ...
Printed 52 slides
$
出力できました。52/48と分子が分母より多いのは、スライド内にfragmentなどの指定をしているとHTMLの1ページが2ページになるからです。
出力した結果をslideshareにuploadしておきました。
http://www.slideshare.net/TakesxiSximada/ss-51770003