小顔のヒト属新種ホモ・ナレディを発見、南ア | ナショナルジオグラフィック日本版サイト
という記事の大元記事がこちら。
This Face Changes the Human Story. But How?
しかし、残念ながら、印刷しようとすると文章だけになってしまう。 CSS を見ると@media print {…}みたいな設定がある。これのせいでおそらく画像付き印刷が出来ない。
参考：印刷時にのみ有効になるスタイルを作る - スタイルシートTIPS ふぁくとりー
PhantomJS でスクリーンショット撮ってみる（その１）
スクリーンショット撮ってからそれを印刷してみればいいんじゃね？と思ってやってみた。
個人的には Watir-Webdriver を常用しているのでそれで。
（参考：Watir Webdriverの使い方の例： StackOverflow 日本版へログインする - 別館 子子子子子子（ねこのここねこ））
$ pry > require 'watir-webdriver' > browser = Watir::Browser.new(:phantomjs) #=> #<Watir::Browser:0x..fe7c39098c5589344 url="about:blank" title=""> > browser.goto("http://news.nationalgeographic.com/2015/09/150910-human-evolution-change/#") #=> "http://news.nationalgeographic.com/2015/09/150910-human-evolution-change/#" > browser.screenshot.save('ng.png') #=> #<File:ng.png (closed)> > browser.quit
さてこのスクリーンショットを…と思ったのだけど、なぜか画像の幅が400pxでスマホ画面のスクリーンショットになってしまった。
PhantomJS でスクリーンショット撮ってみる（その２）
ということで画面幅を広くしよう。
画面幅は
browser.window.resize_to(800, 600)Setting browser window size in Watir-webdriver - Stack Overflow
とかで指定出来るようなので1024px幅にしてみる。
$ pry > require 'watir-webdriver' > browser = Watir::Browser.new(:phantomjs) #=> #<Watir::Browser:0x..fe7c39098c5589344 url="about:blank" title=""> > browser.window.resize_to(1024, 800) #=> #<struct Selenium::WebDriver::Dimension width=1024, height=800> > browser.goto("http://news.nationalgeographic.com/2015/09/150910-human-evolution-change/#") #=> "http://news.nationalgeographic.com/2015/09/150910-human-evolution-change/#" > browser.screenshot.save('ng_w1024.png') #=> #<File:ng_w1024.png (closed)> > browser.quit
これでいい幅のスクリーンショットが撮れた。
縦長画像を印刷するには
単純にプレビュー.app などの画像ソフトを使うと、1イメージ1枚しか印刷出来ない。分割はどうするのかと思ってググる。
LibreOfficeの表計算ドキュメントを使えば、簡単にA4縦の横幅いっぱいで複数ページに分割して印刷することが出来ました。
縦長画像を複数ページに分割して印刷する - NoteBook
ということで LibreOffice を使って印刷できました^^。
