こないだの勉強会で作った資料は、MarkDownで書いたものをrevealjsを使ってスライド化していました。
それだとSlideShareに載せれないのでrevealjsのPDF出力機能を使ってPDF化しました。
revealjsではプレゼン用URLの後ろに「?print-pdf」と付けると、PDF出力用のページを表示してくれるので、それをブラウザのプリント機能からPDF出力させてやればPDF化することが出来ます。
ただ、それだと手でオペレートする必要があって、自動化出来ないのがちょっとイヤな感じでありました。
そしたら勉強会の時に @ktz_alias さんから、phantomjsを使うと自動化出来るよ!というナイス情報を教えていただきました。
結果的にはばっちり動いたのですが、画面サイズ指定などでちょこちょことハマったので使い方の説明を書きたいと思います。
phantomjsをインストールするためにnpmを使います。
自分はWindows環境なのですが、久しぶりにnpmを使おうとしたらなにやらエラーがでて、結局npmというかnode環境自体を入れ直すはめになりましたので、node環境を入れるところから説明します。
今、Windowsでnodeを入れるには、nodeのバージョン管理ツールであるnodistを入れて、そこから入れるのがお薦めのようです。
marcelklehr/nodist: Natural node.js and io.js version manager for windows.
ここからインストーラーをダウンロードしてインストールします。今だと0.7.2が入るはず。
% nodist -v 0.7.2
現在の安定版nodeを入れます。
% nodist stable nodev6.2.0
これでnodeもnpmも入ります。
% node -v v6.2.0 % npm -v 3.5.2
やっと本題のphantomjsを入れます。
すでにnode環境できてる方はここから。
% npm install -g phantomjs
なんかたくさんメッセージが出て、かつ途中でTypeErrorとかエラーが出るのですが、なんとか入ります。
次に、作ったプレゼン資料のrevealjsのディレクトリパスとそれを表示できるURLを調べます。
例えばパスと表示できるURLが
- C:/Users/hoge/Dropbox/Public/exampleslide/reveal.js/
- https://dl.dropboxusercontent.com/u/99999999/exampleslide/index.html
だったとします。
revealjsのpluginの中にphantomjsで出力するための「print-pdf.js」というJSがおまけで入っているので、それを使うとコマンドラインからすぐPDFが吐けるようになっています。
「print-pdf.js」はパラメータとして、PDF用の表示URL、出力ファイル名、あとオプションで画面サイズを「480x350」のようにして渡すことが出来ます。
ただこの画面サイズがくせ者で、実際のサイズはこの2倍になります。
デフォルトでは「960x700」となっており、すると画面サイズが「1920x1400」となるのでたぶん大きすぎるでしょう。
なので「480x350」と指定すると「960x700」のサイズになります。たぶんこれがちょうどいいと思います。
表示URLはPDF出力用のURLにする必要があるので「?print-pdf」を追加してやります。するとコマンドに「?」が含まれてしまうことになるためURLはダブルクォートで括る必要があります。
というわけでまとめると下記のようなコマンドでrevealjsで作ったプレゼン資料をPDFにすることができます。
% phantomjs C:/Users/hoge/Dropbox/Public/exampleslide/reveal.js/plugin/print-pdf/print-pdf.js \ "https://dl.dropboxusercontent.com/u/99999999/exampleslide/index.html?print-pdf" \ exampleslide.pdf 480x350