Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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<

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content