ターミナルを共有するい ろいろ Kenichiro Matohara(matoken) 1

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

最近 先月の textlint + Neovim スライド修正した 回線の問題で git clone がコケていたらしい…… 10月より鹿児島最低賃金 897円 → 953円に ThinkPad X260 をヤフオクで2kほどで入手 3

ThinkPad X260 12.5インチ(1366x768)/Intel Core i3-6100U 2.3GHz/RAM 4GB(DDR4)/ストレ ージなし(SATA 2.5インチ)ジャンク リヤバッテリー23kWh(8割ほど)，フロント内蔵バッテリーなし → 3時間ほど すぐフリーズする ThinkPad Yoga260 から RAM と電源(角型，扱いやすい)を，T430 か ら SSD 移植 RAM 4GB → 8GB， SSD なし → 1TB 重量1.4kgほど OS Debian bookworm → ParrotOS lory → 変えるかも? ビデオミーティングも可能な持ち運び laptop にする予定 4

5

ドッキングステーション(330円) https://inari.opencocon.org/@matoken/113277038079869917 6

ターミナルを共有するいろいろ aha という端末の結果を HTML に変換してくれるツールを知る 色付きの出力などがきれいに出る 画像と違いコピー&ペーストもできるしサイズも小さい 端末の出力を保存するものをまとめてみた theZiz/aha: Ansi HTML Adapter 7

stdin

)~ \oo /|___|,'* wWwWwWwWwWwWwWwWwW
…​
"Have you mooed today?"…​

< $ unbuffer apt moo moo | aha -b | xsel -b > apt-moo.html __ _______~(..)~ ,----\(oo) /|____|,' /\ /\ wWwWwWwWwWwWwWwWwWwWwWwWwWwWw ..."Have you mooed today?"... https:// 8

端末を保存する script ttyrec termrec 9

script 端末セッションを記録する 内にある Debian では bsdutils のものを使っているよう 作業時にログを録っておいてトラブル時やドキュメント作成時などに参照，流れてしまったログ を参照など scriptlive/scriptreplay で再生可能(だけど普通のテキストビュワーで見がち) util-linux 10

— 4.4.1. セッションの記録 ここで強くお勧めしたいのですが、/usr/bin/script プログラムを 使って、このアップグレードセッションの記録を取るようにしましょ う。こうすれば、何らかの問題が生じたときに何が起こったかを記録 しておくことができ、必要に応じてバグ報告に正確な情報を含めるこ とができます。記録を開始するには次のように入力します。 # script -t 2>~/upgrade-bookwormstep.time -a ~/upgrade-bookwormstep.script https://www.debian.org/releases/stable/i386/release-notes/ch- upgrading.ja.html#record-session 11

ttyrec/ttyplay 端末操作用レコーダおよびプレイヤ script と似たもの タイミング情報も同じファイルに書いてくれるので個人的にはこちらを使うことが多い $ sudo apt install ttyrec $ ttyrec rec.ttyrec 操作 ^c $ ttyplay rec.ttyrec 12

termrec ttyrec のファイルを再生できる 巻き戻しや，圧縮ファイルの再生が出来るのが便利 telnet proxy も(未検証) 一時停止/再開， + 速度up, + 速度down, 速度等速, 1フレームず つ進める, 10秒巻き戻し， 1分巻き戻し, 10分巻き戻し, 10秒スキップ, 1分 スキップ, 10分スキップ, 最初に戻る, 終了 1KB: software/termrec $ sudo apt install termrec $ termplay ./rec.ttyrec.zst space + F - S 1 Enter ← ↓ PgDn → ↑ PgUp R Q 13

Jettyplay(未検証) GUI で巻き戻しや圧縮ファイルの対応，URL 読み込みなどもあるらしい Jettyplay 14

端末を保存して公開 asciinema ttyre → asciinema 変換 15

asciinema 端末を保存して公開するツールやサービス asciinema rec で録画，終了時に asciinema.org にアップロードできる アップロードしたものはウェブブラウザ上で再生可能(Xterm.js 利用) blog などに埋め込んだりも asciinema ウェブプレイヤーはセルフホストも可能 asciinema.org にアップロードできない大きなものなどに Xterm.js は対応しているので Sixel も対応してほしい 端末操作を Web で共有出来る asciinema – matoken’s meme 16

1 認証(要ウェブブラウザ) 2 録画とアップロード 3 demo.cast というファイルに録画 4 再生 5 asciinema.org のURL を再生 6 出力結果をcat 7 asciinema.org へ upload $ sudo apt install asciinema $ asciinema auth $ asciinema rec $ asciinema rec demo.cast $ asciinema play demo.cast $ asciinema play https://asciinema.org/a/difqlgx86ym6emrmd8u62yqu8 $ asciinema cat demo.cast $ asciinema upload demo.cast 1 2 3 4 5 6 7 17

埋め込み例 プレイヤー埋め込み _ _ _ _ _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 19

端末を HTML で保存 aha terminal-to-html 20

aha 端末の結果を HTML に変換 画像でのスクリーンショットより小さくなるのが便利 1 lolcat で色を付けようとしているが，後ろにパイプがあるので気を利かせて色を付けな い…… 2 --force オプションで色を強制 3 apt コマンドでカラフルな牛が出力されるはずがパイプがあるので気を利かせて色を付け ない 4 expect 内の unbuffer で色を強制 theZiz/aha: Ansi HTML Adapter $ sudo apt install aha $ aha -h | aha --black > aha_-h.html $ cowsay hello | lolcat | aha -b > lolcat.html $ cowsay hello | lolcat --force | aha -b > lolcat.html -preview $ apt moo moo | aha -b -n $ unbuffer apt moo moo | aha -b -n 1 2 3 4 21

terminal-to-html buildkite/terminal-to-html: Converts arbitrary shell output (with ANSI) into beautifully rendered HTML $ go install github.com/buildkite/terminal-to-html/v3/cmd/terminal-to-html@latest $ unbuffer apt moo moo | terminal-to-html -preview > apt-moo-moo2.html 22

aha で表現できなかったしっぽの点滅が再現 できている (__) _______~(..)~ ,----\(oo) /|____|,' * /\ /\ wWwWwWwWwWwWwWwWwWwWwWwWwWwWw ..."Have you mooed today?"... 23

端末を画像，動画で保存 24

termtosvg > Note: As of June 2020 I do not have time to maintain termtosvg anymore and this repository is now read-only. asciinema と違い単体のファイルでウェブブラウザで再生出来るのが便利 コピペも可能 テキストエディタで編集できなくもない お手軽だが長い録画だと重くなりブラウザが反応しなくなる nbedos/termtosvg: Record terminal sessions as SVG animations $ sudo apt install termtosvg $ termtosvg Recording started, enter "exit" command or Control-D to end ^d exit Rendering ended, SVG animation is /tmp/termtosvg_s3rhpnr9.svg $ xmllint --format termtosvg_s3rhpnr9.svg 25

matoken@tp-l13:~$ 26

ttygif ttyrec で録画したデータを gif に変換 大量のスクリーンショットを録っているだけなので透過背景や重なった他のウィンドウなども録 画されるので注意 icholy/ttygif: Convert terminal recordings to animated gifs $ sudo apt install ttygif $ ttyrec nyancat.ttyrec $ ttygif nyancat.ttyrec Creating Animated GIF ... this can take a while Created: tty.gif in the current directory! ffmpegでgifからmp4に変換した動画がInstagramに投稿できない – matoken’s meme 27

28

スクリーンキャストアプリなどで録画 崩れたりせず自分の環境を正確に見せることが出来る 最近は vokoscreenNG を利用 OS の前などは仮想マシンや HDMI-USB キャプチャ経由 Screencast vokoscreenNG for Windows and Linux 29

フレームバッファを動画で録画 フレームバッファの録画，背景画像なども録画できる $ ffmpeg -f fbdev -i /dev/fb0 fb.mp4 フレームバッファで焼かれるあひるを録画する(あひる焼き Advent Calendar 2015) – matoken’s meme 30

端末を共有 GNU screen tmate ttyd 31

GNU screen マルチユーザがサポートされており，LAN 内で1つの画面を多人数で視聴したり，同時に操 作したりできる ロギング機能もあり，指定時に操作ログを録ったり，自動的に全ログを録ることも出来る GNU screen 32

tmate tmux からフォークして共有機能を実装したもの tmate.io を利用し，NAT を超えてWeb/SSHで端末を共有できる(セルフホストも可能) (Sixelに対応して欲しい) tmate • Instant terminal sharing $ sudo apt install tmate $ tmate Tip: if you wish to use tmate only for remote access, run: tmate -F [0/0] To see the following messages again, run in a tmate session: tmate show-messages Press or to continue --------------------------------------------------------------------- Connecting to ssh.tmate.io... Note: clear your terminal before sharing readonly access web session read only: https://tmate.io/t/ro-VDPYzytNrDNCC4LBRYH27ZJCc ssh session read only: ssh ro-VDPYzytNrDNCC4LBRYH27ZJCc@sgp1.tmate.io web session: https://tmate.io/t/n8MwFFf9DwYfA4wFz8eW54djx ssh session: ssh n8MwFFf9DwYfA4wFz8eW54djx@sgp1.tmate.io 33

ttyd 新しい仮想端末を起動し，ウェブ共有できる tsl0922/ttyd: Share your terminal over the web $ sudo apt install ttyd $ ttyd -p 8080 nyancat $ xdg-open http://localhost:8080/ $ ttyd --writable -p 8080 tmux new -A -s ttyd & $ ngrok http 8080 34

まとめ いろいろな方法で端末を共有 録画して再生，共有．リアルタイムに共有など とりあえず ttyrec で録画しておいたら後で変換できる gif なども便利だがファイルサイズが大きくなりがちなので svg もしくはいっそ動画にしたほう が良さそう 類似ツールはたくさんあるので良さそうなものを教えてください 35

発表後追記 参加者のログ取得方法 クライアント側のターミナルエミュレータでログを録る ターゲットが組み込み機器なのでリソースも限られるという事情も 作業時にログを録る tmux でログを取れるよう設定して 36

奥付 発表 2024-10-20(sun) 発表者 利用ソフトウェア + ライセンス 鹿児島Linux勉強会 2024.10(オンライン開催) Kenichiro Matohara(matoken) Neovim Asciidoctor Reveal.js CC BY 4.0 37