Trelloのようなスクロールしないと全体が見えないページの全体像を一枚の画像にする方法
会社のチームで使っているtrelloのボードが広くなってきたので、全部が見えるようにして画像にしてみた。
— Akiya Mizukoshi (@Akiyah) 2016年7月21日
trelloにこの全部表示機能があったらいいな。 pic.twitter.com/4k5g0powjD
先日こんなツイートをしたのですが、Trelloの全体を1枚のスクリーンショットにするのは、結構大変でした。 ブラウザ内で縮小表示して、ブラウザを精一杯大きくしてスクリーンショットを撮る、という感じで。
で、もっと簡単にやりたくて、考えていて、さっき方法がわかったので書いておきます。
使うツールは、まずはブラウザとしてChromeで、その拡張機能として下記の二つを使います。
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に縮小したものがこれです。
前にtweetした時の画像は、どうも縦の長さがまだ十分ではなかったようですね。 この機能、やっぱりTrelloに欲しいなー。