【snapline】Chromeのキャプチャータイムラインからgif画像を作成

僕は仕事なんかでよくGif画像を取ります。GithubのIssueとかで説明するときダラダラ文章を書くより、Gif画像をドーーーンと置いてしまったほうが分かりやすいんですよね。

他のキャプチャアプリとかKapとか使ってもいいんですが、キチンとサイズを図ってキャプチャしたい場合におすすめです。

ちなみにChromeだけの話なので、入ってない方は入れるなりしてください😇

Snaplineのインストール

タイトルに入れてる通り、あとでこのパッケージを使って変換するので入れておいてください。

npm i -g snapline

画面の動作を記録する

とりあえずはキャプチャしたいページにアクセスして、開発者ツールを開きます。

起動したらtimelineタブを開いて、Screenshotsという項目だけにチェックを入れます。これで準備完了です。

Setting

左上のレコードボタンをクリックして(Macだったら「cmd + e」同時押しでもいけます)キャプチャしたいページで撮りたい動作を操作します。終わりたい時は、もう一度レコードボタンを押すだけです。

撮ったら連続した画像の上で右クリックして好きな場所に保存してください。

Recorded

変換

snaplineコマンドを叩きます。以下のように叩きます。

snapline <保存したファイル> -o <変換後の名前>.gif

コマンドが実行されて、カレントディレクトリに<変換後の名前>.gifがあれば大丈夫です!

ちなみに、このブログをキャプチャした感じを置いときます😀

captured