読者です 読者をやめる 読者になる 読者になる

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

もはや仕事で使えるかわかりませんが、パーツごとのページロードのタイミングを知りたくてやったことのメモです。

これを書いてあるとおりにやるだけです。

blog.gospodarets.com

  1. Open the "Timeline" Tab in Dev Tools ( Chrome browser )
  2. Activate "Screenshots" checkbox
  3. Click "Record"
  4. Do stuff in your page you want to see in result video
  5. Stop recording
  6. Right click anywhere on the timeline data-> "Save Timeline Data..."
  7. Upload a created file via "Choose File..." button or just drag-n-drop it in the browser window

ただ、ページのロードを撮りたいだけの場合は手順がちょびっとだけ違いますので、それを書きます。

  1. Chromeデベロッパツールの"Timeline" タブを開きます。
  2. "Screenshots" チェックボックスにチェックを入れます。
  3. 再読み込みボタンをクリックします。ロードが終わると録画も自動的に終了します。
  4. タイムラインのデータを右クリックして、 "Save Timeline Data..." でjsonファイルを保存します。f:id:Akiyah:20160505021154p:plain
  5. 上記のページでjsonファイルをドラッグ&ドロップします。するとアニメーションgifが生成されます。

    f:id:Akiyah:20160505022013g:plain

いまあらためてみると、右下に時間が表示されていますが、この時間にそったアニメーションではないですね。