asciinema playerで大き な端末録画を共有 する Kenichiro Matohara(matoken) 1

matoken @ 鹿児島の右下の山奥から参加 好きなLinuxディストリビューションは Debian map: © OpenStreetMap contributors Kenichiro Matohara(matoken) https://matoken.org matoken@inari.opencocon.org 2

端末操作の録画再生 script/scriptreplay util-linuxやbsdutilsにあるのでたいていの環境で動く ttyrec/ttyplay(termrec) タイミング情報も同じファイルに書いてくれるので個人的にはこち らを使うことが多い asciinema ターミナルを録画，再生およびWeb共有ができるサービスおよび ソフトウェア asciinema.orgにアップロードしてWebに埋め込むこともできて 便利 4

aciinema利用例 1 認証(要ウェブブラウザ) 2 録画とアップロード 3 demo.cast というファイルに録画 $ sudo apt install asciinema $ asciinema auth $ asciinema rec $ asciinema rec demo.cast 1 2 3 5

1 再生 2 asciinema.org のURL を再生 3 出力結果をcat 4 asciinema.org へ upload $ asciinema play demo.cast $ asciinema play https://asciinema.org/a/difqlgx86ym6emrmd8u62yqu8 $ asciinema cat demo.cast $ asciinema upload demo.cast 1 2 3 4 6

asciinema.orgの録画の埋め込み例 プレイヤー埋め込み _ _ _ _ _a_ _{.`=`.}_ _ _ _{.`=`.}_ {/ ' _ {.' _ '.} {.`'`.} {.' _ '.} {| . ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~{ \~~{/ .'~'. \}~~{/ .-. \}~~{/ .'~'. \}~{/ | ^^^^ ^^^ ^^^ ^^^ ^^^^ ^^^^ ^^^ ^^^ ^^^ ^^^^ ^^^^ ^^^ ^^^ ^^^^ ^^^^ ^^^ ^^ ^^^^ ^^^^ ^^^ ^^ ^^^^ ^^^^ ^^ ^^^^ ^^^ ^^^^^^ ^^ ^^^^ ^^^ ^^^^^^ ^^ ^^^^ ,--,_ __ _\.-__'-. T~~ \ '.-" <'_>::::::::;;\\\ |= []- |- /| |\ |= (=[] | ( ( ( ''\\\\\'' ';\ |- =_ | =| | | | |-( )- | ) ) ) | | | | | | | ( | 画像リンク eval(T=%(eval(%(E=27.chr;Z=32.chr;$ ><q{(q-q*(1-3844.0/q.abs2)**0.5) /2};I=->f,a,b,z,t=p{(a-b).abs>(f<1?1:1-(K[a]-c=K[b]). abs)?I[f,c= (a+b)/2,b,I [f,a,c,z,t],t :''''''''''''''''''''''''''''''': ]:f<1?(x,y=b. rect;d="'."[y%2 : : ];c=z[y/2+5];c[ x+=58]=t||(c[x]== : : d||Z==c[x]?d:?:)) :(puts(E+"[H"+$/+I[ : : 0,c,0,I[0,b,c,z.map (&:b)]]*$/);t||I[0,b : : ,c,z,Z];sleep(0.01)) ;z};s=(Z*25+"eval(T= : : %("+T+"))").lines.ma p{|l|l.chomp.ljust(90 : ,---. ,---. ,---. ,---. : )};loop{z=0i-31,[-1.0 ,Z];h=10i-30;a="5?GUV : | | | . | | | | : XIIPCM.AAN&,HY/ZZZO7[ &,HY3'CE<5SM5.OOJ+BBT : | | --< | | | | : 3LV+A&YQ.STT[MF.KUVXP K+&[AOOJ'&5?GU57-B5SI : | | | ' | | | | : 51>E<5PCMF.K,DXPD+SM7 .77'";i=92;"Q+3_.DW'` : `---' `---' `---' `---' : HAD,A11R`NK+HILJ/D'&F 1.CG371|BE@355?5A7@@ : : ??7|3-5-".scan(/../) {a.gsub!("%c"%i-=1,$ : : &)};Time.now.strftim e("%H:%M").bytes{|c : : |q=h;a.split(?&)[c- 48].scan(/([0-8]) : : |./){$1?q+=(n=$1. hex)%3-1+(n/3-1 : : )*2i:z<<[q,$&]} ;h+=6};z<

ttyrecからasciinema に変換 ttyrec で保存したデータを asciinema の asciicast形式に変換 asciinema/ttyrec2asciicast: ttyrec to asciicast converter $ git clone https://github.com/asciinema/ttyrec2asciicast $ python3 ./ttyrec2asciicast/ttyrec2asciicast.py input.ttyrec output.cast 8

asciinema player asciinema.org はサイズ制限があり(8MB?)大きな asciicast は upload できない asciinema: upload failed: Sorry, the size of your recording exceeds the server-configured limit. をセルフホストするのは大袈裟 だけならお手軽に利用可能 asciinema server asciinema player 9

asciinema player をダウンロード 以下のような埋め込み html を用意 1 埋め込みたいcastファイルここでは demo.cast $ 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 ... ... ... ... AsciinemaPlayer.create('/demo.cast', document.getElementById('demo')); 1 10

httpd 経由でアクセス k $ python -m http.server 8000 -d . -b localhost & $ xdg-open http://localhost:8000/demo.html 11

まとめ ターミナル操作を録画，再生ツール asciinemaはasciine.orgへのアップロード・Web埋め込みもでき て共有に便利 asciinema playerはコピー&ペーストもできて便利 ttyrecからasciinema変換もできるのでとりあえずttyrecで録画 しておくと便利 色々アップロードしてみよう(内容には注意) 12

奥付 発表 2024-11-09(sat) 発表者 利用ソフトウェア + ライセンス 東海道らぐの万鹿博覧会ライトニングトーク大会 in 大阪南港 Kenichiro Matohara(matoken) Neovim Asciidoctor Reveal.js CC BY 4.0 13

No content