2023年04月05日 更新

asciinemaでコマンド操作を録画してみよう

どうも、クラゲジュニアです。

CLI上で操作する手順をブログなどにまとめるとき、どうしても冗長になりがちですよね。

今回は、手軽にコンソールの操作手順を動画的に表示できるasciinemaを紹介します。

asciinemaの概要

こちらを御覧ください。

コマンド操作が見えているほかに、typo時のBackspaceやエラー出力なども表示されていることが確認できます。

asciinemaはmacOSやLinuxで動作するコマンドライン記録ツールで、ブログなどのページ上で動画のようにコマンド操作を録画・再生できます。加えて、再生されているコマンドはコピー&ペーストができるため、技術ブログを作る際に適しています。

注意

asciinemaを使用すると、ターミナルの出力がascinemaのサーバーへアップロードされます。アップロードした直後は非公開設定になっていますが、センシティブな情報を公開する際にはご注意ください。

asciinemaのインストール方法

下記のリンクをご参照ください。なお、現状ではwindowsが公式サポートされていないためご注意ください。

https://asciinema.org/docs/installation

使い方

今回はmacOSのターミナルを用いた場合の操作を示します。

下記のコマンドを入力すると、コンソールの録画が開始されます。

asciinema rec

コンソールの録画を終えたい場合はCtrl+Dを入力します。 すると、asciinema: press <enter> to upload to asciinema.org, <ctrl-c> to save locallyを出力されるため、Enterを入力します。

すると、下記のように表示され、動画がasciinemaのサーバーへアップロードされます。

青く反転している箇所のURLにアクセスすると、アップロードされたコマンドの操作を確認できます。 (リンクはアップロードの都度変わります。)

また、Shareをクリックすると共有用のリンクが用意されており、Embed the playerのリンクを使うことで冒頭のサンプルのように埋め込むことができます。

以上です。