【Ubuntu】【asciinema】GitHubに載せる動画を作成する【SW】

fish-shell のパッケージマネージャである oh-my-fish の GitHub ページを見ていると、プラグインの紹介をしている外国人の多くが asciinema というサイトに使用例の動画を投稿しており、良さそうであったため導入してみる。*1

asciinema 公式サイト

https://asciinema.org/
 

使用方法

初回投稿

Ubuntu 18.04 LTS に導入する。
Getting started - asciinema に従い導入する。
 

1. apt-get install asciinema として asciinema をインストールする

以下、公式インストール手順に従う。

% sudo apt-get install asciinema

もしくは以下を実行する。

% sudo apt-add-repository ppa:zanchey/asciinema
% sudo apt-get update
% sudo apt-get install asciinema

 

2. 録画をする

% asciinema rec

( Ctrl-d あるいは exit と入力すれば終了する。 )

asciinema: recording finished
asciinema: press <enter> to upload to asciinema.org, <ctrl-c> to save locally

https://asciinema.org/a/HnjDVJ0oTXNzwQDSqRE6PyI2B


 

3. asciinema.orig にアップロードする
ユニークな URL にアップロードされた。

% asciinema auth
Open the following URL in a web browser to link your install ID with your asciinema.org user account:

https://asciinema.org/connect/046591a3-d528-XXXX-YYYY-ZZZZZZZZZZZZ

This will associate all recordings uploaded from this machine (past and future ones) to your account, and allow you to manage them (change title/theme, delete) at asciinema.org.

 

4. Web ブラウザを使って、アップロードされた URL にアクセスする。
以下のようにログイン画面に遷移する。
f:id:dnkrnka:20180619212502p:plain:w800
 
まだ、アカウントが無いので、「Log in」ボタンの左に登録したいメールアドレスを入力する。(斬新な登録方法だ..)
 
すると以下のような画面が出るのでメールを見る。
f:id:dnkrnka:20180619212842p:plain:w800

 

5. メールに記載されたリンクをクリックしてアカウント登録する
登録が完了すると、以下のように動画がアップロードされている。

f:id:dnkrnka:20180619213213p:plain:w800
 

投稿した動画の削除

以下のように投稿した動画のページに移動して、画面右下にあるプルダウンメニュから削除する。
f:id:dnkrnka:20180619214801p:plain:w800

 

実践での例 - タイトルを付与して録画を投稿する。

1. 録画の開始

このとき引数にファイルパスを指定すると、ローカル上に録画ファイルが作成される。

% asciinema rec -t demo_fishingz.cast

(--snip--)

 

2. exit を入力して録画を終了する

% exit
asciinema: recording finished
asciinema: press <enter> to upload to asciinema.org, <ctrl-c> to save locally

https://asciinema.org/a/gzFcszqxqfXpI0EDVyrachRS0

 

3. 収録した内容をチェックする

% asciinema play https://asciinema.org/a/gzFcszqxqfXpI0EDVyrachRS0

仮にローカルに保存していた場合は、asciinema play /path/to/cast-file などとする。
 

4. 投稿する

% asciinema auth

以下の通り投稿された。
f:id:dnkrnka:20180619221659p:plain

 

5. 閲覧する

 

asciinema.org

*1:実際に使ってみたところ、script コマンドの挙動と似ている気がしたが、動画を組み立てる仕組みがわからない。