::ハブろぐhavelog.ayumusato.comaho.muReveal.jsのスクリーンショットをPhantomJSでガンガン撮る2012-10-03Gistぺたり短いながら、phantomjsの便利なAPIが詰まってたので貼ってみた。FrameworkいわゆるHTMLスライドのフレームワークです。最初からある程度かっこよく作られていて、そのままでも十分使えると思います。APIもちゃんと整備されているので、コントロールを追加することもできます。複数のテーマが用意されている複数のトランジションが用意されているMarkdownで書ける(data-markdownを付与したsectionのみ)nodeでKeynoteみたいなスライドウインドウ+スピーカーノートウインドウの連携ができるなどなど。今用意している最中のスライドでは、これを使ってみています。Exportを参考に、?print-pdfを末尾につけてアクセスすれば良いです。きれいに出力してくれます。data-stateというのを絡めた、背景全面のコントロールにはJavaScriptが必要なため、通常の印刷ではそのあたりの再現がうまくいきません。フォントのこともあるしなー、とか色々ございまして。phantomjsでスクショとる遊びしたことあった!という流れです。全体としては、phantomjsでページを開いて、順番にスライドを進めながら都度pngファイルを出力する、という簡単な処理です。moduleのあたりを利用しています。//...});ページを開いたあとの処理は、page.openのコールバックとして渡します。スライドの枚数を数えるループでまわす前に、スライドの枚数を数えます。document.querySelector('.slides').children.length;});page.evaluateで、ページ内のJavaScriptにアクセスできて、returnで結果を返せば値を取得できます。ページをめくるループをぶん回してキューを作って1枚ずつ処理させてるだけですが、ページめくりも先ほどと同様にpage.evaluateで行えます。i);page.evaluateへの引数として、変数を送ることもできるので、それをReveal側のnavigateToメソッドに渡してページを進めていきます。PNGでスクショを撮るpage.renderでスクリーンショットを撮ります。指定したファイル名で拡張子を判別してくれますが、これをpdfにすると印刷のPDF出力も利用できたりします。ほんとに印刷と同じような扱いになるので、今回のケースでは意味がありません。1000);タイマーを仕込んでいるのは、主にスライドのトランジションが終わるまでの待ち時間です。トランジションをオフにすれば、ある程度高速で回せますが、タイマーなしだとReveal側のJS処理が追いついていなかったりするので、少なくとも100ms程度はあったほうがよいでしょう。キューがなくなったらphantom.exitで処理を終えます。phantomjs楽しいなぁphantomjsはこれまでヘッドレステストなどで利用していましたが、こういう用途でも遊べると楽しいですね。資料用にサイトのスクリーンショットを大量に撮りたいときにも便利かもしれません。HTMLの生成JavaScriptよ。文明を捨て、自然に還れ。セミナー&ワークショップ資料公開JavaScriptよ。文明を捨て、自然に還れ。Sato又の名をあほむ。名古屋と渋谷を反復横跳びするWebフロントエンドエンジニア。Web関連技術をアレしたり温泉に浸かったりします。