asciinema playerで大きな端末録画を共有する

asciinema playerで大きな端末録画を共有する Kenichiro Matohara(matoken) <[email protected]> 1

matoken @ 鹿児島の右下の山奥から参加好きなLinuxディストリビューションは Debian map: © OpenStreetMap contributors Kenichiro
Matohara(matoken) https://matoken.org [email protected] 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~~ \ '.-" <'_><o\ | /_.'-._ `\\ / /^\ `"--(/"` / \ _ _ _ / \ _ _ _ [ ]_[ ]_[ ]/ _ _ \[ ]_[ ]_[ ] |_=__-_ =_|_[ ]_[ ]_|_=-___-__| ( ( .:/ | _- = | =_ = _ |= ) | ) ) ,,///;, ,;/ |= -[] |- = _ = |_ (_[] | ( ( ( o:::::::;;/// | =_ |= - ___ | ( )= | ) ) >::::::::;;\\\ |= []- |- /| |\ |= (=[] | ( ( ( ''\\\\\'' ';\ |- =_ | =| | | | |-( )- | ) ) ) | | | | | | | ( | 画像リンク eval(T=%(eval(%(E=27.chr;Z=32.chr;$ ><<E+"[2J";K=->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<<a=3 :...............................: 1i-31;31.time s{|y|s[y/2+ 5][58]=Z};g =z.map{|b,h|x,y=a.rect;g&&s[y/2+5][x+58]=g;I[1,a,b,s, g];a,g=b,h};sleep(61-Time.now.sec);;;}).gsub( /^(.{26}):.{32}/){$1}.split*"")##)) 7

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 <!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> 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

asciinema playerで大きな端末録画を共有する

asciinema playerで大きな端末録画を共有する

Kenichiro MATOHARA

More Decks by Kenichiro MATOHARA

Other Decks in Technology

Featured

Transcript

asciinema playerで大きな端末録画を共有する Kenichiro Matohara(matoken) <[email protected]> 1

matoken @ 鹿児島の右下の山奥から参加好きなLinuxディストリビューションは Debian map: © OpenStreetMap contributors Kenichiro

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

1 再生 2 asciinema.org のURL を再生 3 出力結果をcat 4 asciinema.org

asciinema.orgの録画の埋め込み例プレイヤー埋め込み _ _ _ _ _a_ _{.`=`.}_ _ _

ttyrecからasciinema に変換 ttyrec で保存したデータを asciinema の asciicast形式に変換 asciinema/ttyrec2asciicast: ttyrec to

asciinema player asciinema.org はサイズ制限があり(8MB?)大きな asciicast は upload できない asciinema: upload

asciinema player をダウンロード以下のような埋め込み html を用意 1 埋め込みたいcastファイルここでは demo.cast $

httpd 経由でアクセス k $ python -m http.server 8000 -d .

奥付発表 2024-11-09(sat) 発表者利用ソフトウェア + ライセンス東海道らぐの万鹿博覧会ライトニングトーク大会 in 大阪南港