仕事で使えるスクリーンショット(6) ページのロードのgifアニメを撮る スマートフォン編

 これの続きです。

akiyah.hatenablog.com

 

前回はページのロードを撮りましたが、スマートフォンの場合は縦に長いのでファーストビューしか撮ることができません。それを何とかする技です。

Chormeのデベロッパツールスマートフォンの表示にして、左上のデバイスを選ぶところで "Responsive" にして、高さを十分に高くします。今回は高さ3200で、そのために倍率が19%になっています。

f:id:Akiyah:20160506010653p:plain

その後は、前回の手順どおりTimelineのScreenshotsをチェックしてからリロードして、右クリックで保存して、ここで変換するだけです。

f:id:Akiyah:20160506010703g:plain

ちょっとぼんやりしますが、ページ全体のロードを見るという用途には十分使えると思います。よーく見ていると、一通りページのレンダリングが終わった後に追加されるDOMがあったりして、裏の動きが何となくわかってきますね。