【完全版】録画ツール Asciinema (zennへの埋め込みも)

はじめに

みなさん、突然ですが、ターミナルの画面をきれいに録画して、共有したい！と思ったことはないでしょうか？

そんな課題を解決するために、今回はAsciinemaというツールを紹介したいと思います！

Asciinemaとは

Asciinemaとは、ターミナルの画面をコマンド一つで録画、リンクを生成、共有・埋め込みが可能になるツールです！

Asciinemaを使えば、ターミナルでのコマンド操作をいちいち文字で送るのではなく、リンクを送るだけで相手に教える事ができます！

環境設定などの複雑な操作も、動画にしておけば、誰でも何度でも同じ用に自分の端末で操作することが可能になります

Assciinemaの便利さをなんとなく理解したところで、早速インストールしていきましょう！

インストール

※今回はmac osでのインストール方法となります。今回紹介するやり方以外にも、様々な方法があるため、詳しくは公式のダウンロード方法を御覧ください

この記事では、Homebrewというmac os のパッケージ管理ツールを利用してAsciinemaをインストールします。
Homebrew？なにそれ、インストールされてないんですけど...という方は、こちらの記事を是非参照してみてください！
https://zenn.dev/sawao/articles/e7e90d43f2c7f9

それでは、インストールしていきます

$ brew install asciinema

これで、Asciinemaのインストールが完了しました！

次に、Asciinemaの認証をしていきます。

認証

Asciinemaは、アカウントを作成しなくても使ます。ですが、クライアントとアカウントを関連づけていない場合は、アップロードした動画を管理できず、7日間で自動的にアーカイブされてしまいます。ですので、アカウントを作成したほうが断然便利です。

アカウント作成方法

1. まずは公式サイトにアクセス
   

2. 次に、右上にあるLog in/ Sign upボタンをクリック
   

3. そして、Log in と書いてある入力ボックスにメールアドレスを入力
   

4. 入力したメール宛に、認証コードが届くので、そのリンクをクリックして、アカウント作成完了です！

アカウント作成が完了したら、以下コマンドを実行しましょう！

$ asciinema auth

そうすると、URLが表示されるかと思います！
そのURLをコピーし、ブラウザで開くことで、クライアントとアカウントが関連付けられ、認証が完了します。

録画の仕方

それでは実際に、ターミナルの画面を録画していきましょう！

以下のコマンドを入力します

$ asciinema rec

そうすると、録画が開始されます！

録画を終わらせたいときは、control + d を押しましょう

録画が終わり、下記のメッセージが表示されるかと思います

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

今回は、URLにして共有したいので、Enter Keyを押します

そうすると、画面にURLが表示されるので、そのURLを command を押しながらクリック！

ブラウザでAsciinemaのサイトが立ち上がり、録画した動画が表示されていたら成功です！

zenn記事への埋め込み方

さて、この記事の題名にもあるように、Asciinemaで撮影したターミナルの録画を、zennの記事に埋め込んでいきます

さきほどのURLのページを開くと、右下にShare, Download, Settingsの３つのボタンが表示されるかと思います

Shareをクリックします。
すると、こんな感じで、共有や埋め込むいろいろな方法が表示されるかと思います

そのなかで、markdownのところのコードをコピし、zennの記事に貼り付けます

そうすると、zennにAsciinemaの動画が表示されるはずです！

<サンプル>

終わりに

以上で、Asciinemaのインストールと、使い方の解説が完了しました！

皆さんも誰かに操作を共有したい時、もしくはzennやqiitaなどの記事に貼り付けたい時などは、手軽に使用してみると良いかもしれません！