Trelloのようなスクロールしないと全体が見えないページの全体像を一枚の画像にする方法

先日こんなツイートをしたのですが、Trelloの全体を1枚のスクリーンショットにするのは、結構大変でした。 ブラウザ内で縮小表示して、ブラウザを精一杯大きくしてスクリーンショットを撮る、という感じで。

で、もっと簡単にやりたくて、考えていて、さっき方法がわかったので書いておきます。

使うツールは、まずはブラウザとしてChromeで、その拡張機能として下記の二つを使います。

chrome.google.com

chrome.google.com

Ignore X-Frame headers - Chrome Web Store の方は、クリックジャック対策に必要なX-Frame-Optionsを無視するという危険なプラグインなので、作業が終わったら無効にしておきましょうね。

さて、スクリーンショットを撮りたいTrelloのURLをチェックしておいて、下のような内容のファイルを作ります。 ファイル名はindex.htmlとでもしておけば良いでしょう。 src="..."の部分にTrelloのURLを書きます。

<body style="margin:0px">
<iframe src="https://trello.com/xxxxxxxxxx"
  style="height:2000px; width:2000px; border:0px">
</iframe>
</body>

このファイルをブラウザで開くと、(iframeの中に)Trelloのボードが表示されます。 ここでは、高さ(height)2000px、幅(width)2000pxにしているので、横とか縦にスクロールすると思います。 その中のTrelloのボードの一番下に横のスクロールバーが表示されていたら、widthの値をもっと大きくします。 また、Trelloのリストの中で縦にスクロールするものがあったら、heightの値をもっと大きくします。 まあ、とにかく、大雑把でもいいのでこの数字をおっきくするわけです。 私が今回撮ったボードでは、高さ5000px、幅6000pxでした。

十分に大きくしたら、 Full Page Screen Capture - Chrome Web Store のアイコンをクリックすれば、一枚の画像にしてくれます。

それを1/10に縮小したものがこれです。

f:id:Akiyah:20160725195353p:plain

前にtweetした時の画像は、どうも縦の長さがまだ十分ではなかったようですね。 この機能、やっぱりTrelloに欲しいなー。