asciicast形式のファイルをasciinema playerで共有する

asciinema という端末を録画再生と共有の出来るツールやサービスがあります.

共有のためにはデフォルトでは asciinema.org にアップロードしますが,サイズの制限があり大きなものは共有できません.

$ asciinema rec sl_lolcat.cast (1)
asciinema: recording asciicast to sl.cast
asciinema: press <ctrl-d> or type "exit" when you're done
$ (2)
^d (3)
exit
asciinema: recording finished
asciinema: asciicast saved to sl.cast
$ ls -l sl_lolcat.cast
-rw-rw-r-- 1 matoken matoken 35881291 10月 21 06:51 sl_lolcat.cast
$ asciinema upload sl_lolcat.cast (4)
asciinema: upload failed: Sorry, the size of your recording exceeds the server-configured limit.
  1. asciinema コマンドで sl_lolcat.cast というファイル名で録画

  2. 録画したい操作

  3. <Ctrl-d> で録画終了

  4. ファイルサイズが大きいので asciinema.org へのアップロードに失敗

asciinema server 🏛️ をセルフホストすることできますがちょっと大げさ.asciinema player だけならお手軽そうなので試してみました.

asciinema player の releases page 🏛️ から asciinema-player.min.js と asciinema-player.css を入手します.

$ wget https://github.com/asciinema/asciinema-player/releases/latest/download/asciinema-player.css \
       https://github.com/asciinema/asciinema-player/releases/latest/download/asciinema-player.min.js

同じ場所に共有したい cast ファイルを置き,以下のような html ファイルを用意, /demo.cast 部分を自分の cast ファイルと置き換えます.

<!DOCTYPE html>
<html>
<head>
  ...
  <link rel="stylesheet" type="text/css" href="/asciinema-player.css" />
  ...
</head>
<body>
  ...
  <div id="demo"></div>
  ...
  <script src="/asciinema-player.min.js"></script>
  <script>
    AsciinemaPlayer.create('/demo.cast', document.getElementById('demo'));
  </script>
</body>
</html>

適当な httpd 経由でアクセスしてみると埋め込めました.そのまま再生できます :)

$ python -m http.server 8000 -d . -b localhost &
$ xdg-open http://localhost:8000/test.html

これを使うと大きな cast ファイルでも共有しやすくなりそうです.

SEE ALSO
環境
$ dpkg-query -W asciinema
asciinema       2.4.0-1
$ lsb_release -dr
Description:    Debian GNU/Linux trixie/sid
Release:        n/a
$ arch
x86_64

One thought to “asciicast形式のファイルをasciinema playerで共有する”

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

Your post must include a link to this post.

How does this work?
Write a response on your own website and include a link to this post. Then submit your response’s URL here. Your response may appear here after moderation. To update or remove it, edit or delete your original post and submit the same URL again. Learn more about Webmentions.