termtosvg – matoken's blog https://matoken.org/blog Is there no plan B? Wed, 04 Jul 2018 22:41:39 +0000 ja hourly 1 https://wordpress.org/?v=6.9 https://matoken.org/blog/wp-content/uploads/2025/03/cropped-1865f695c4eecc844385acef2f078255036adccd42c254580ea3844543ab56d9-32x32.jpeg termtosvg – matoken's blog https://matoken.org/blog 32 32 端末での操作をSVG形式で記録する termtosvg https://matoken.org/blog/2018/07/05/record-operation-on-terminal-in-svg-format-termtosvg/ https://matoken.org/blog/2018/07/05/record-operation-on-terminal-in-svg-format-termtosvg/#respond Wed, 04 Jul 2018 22:40:54 +0000 http://matoken.org/blog/?p=1983
  • nbedos/termtosvg: Record terminal sessions as SVG animations
  • ttyrec/playみたいに端末操作を録画出来るアプリケーション.再生はウェブブラウザなどでできます.

    導入はpipで

    $ pip3 install termtosvg
    $ termtosvg -h
    usage: termtosvg [output_file] [--font FONT] [--theme THEME] [--help] [--verbose]
    Record a terminal session and render an SVG animation on the fly
    
    positional arguments:
      output_file    optional filename of the SVG animation; if missing, a random
                     filename will be automatically generated
    
    optional arguments:
      -h, --help     show this help message and exit
      --font FONT    font to specify in the CSS portion of the SVG animation
                     (DejaVu Sans Mono, Monaco...). If the font is not installed
                     on the viewer's machine, the browser will display a default
                     monospaced font instead.
      --theme THEME  color theme used to render the terminal session (circus,
                     classic-dark, classic-light, dracula, isotope, marrakesh,
                     material, monokai, solarized-dark, solarized-light, zenburn)
      -v, --verbose  increase log messages verbosity
    
    See also 'termtosvg record --help' and 'termtosvg render --help'
    

    導入後実行するとそのまま端末に戻ってexitするまでの操作を記録してくれる.exitするとSVGを書き出してそのファイル名を教えてくれる.

    mk@T430s:~ (551)$ termtosvg
    Recording started, enter "exit" command or Control-D to end
    mk@T430s:~ (554)$ cowsay -f duck "hello termtosvg!"
     __________________
    < hello termtosvg! >
     ------------------
     \
      \
       \ >()_
          (__)__ _
    mk@T430s:~ (555)$ cowsay -f duck "hello termtosvg!"|lolcat
     __________________
    < hello termtosvg! >
     ------------------
     \
      \
       \ >()_
          (__)__ _
    mk@T430s:~ (556)$ exit
    Recording ended, SVG animation is /tmp/termtosvg_vpd7hh0z.svg
    

    出来上がったファイルはSVGなので中を見てコピペとか出来なくはない.

    $ xmllint --format /tmp/termtosvg_vpd7hh0z.svg|head
    <?xml version="1.0" encoding="utf-8"?>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full" height="408" version="1.1" width="640">
      <defs>
        <style type="text/css"><![CDATA[* {font-family: "DejaVu Sans Mono", monospace; font-style: normal; font-size: 14px}
    text {dominant-baseline: text-before-edge}
    .bold {font-weight: bold}
    .background {fill: #002b36}]]></style>
        <g id="1">
          <text fill="#93a1a1" lengthAdjust="spacingAndGlyphs" textLength="144" x="0">mk@T430s:~ (554)$ </text>
          <text fill="#002b36" lengthAdjust="spacingAndGlyphs" textLength="8" x="144"> </text>
    

    以下にexampleがある

    サーバにアップロードして共有だとasciinemaが便利だけどこれはこれでファイル一個なので便利そうです.
    Python製でライセンスはBSD 3-Clause Licenseです.

    ]]>
    https://matoken.org/blog/2018/07/05/record-operation-on-terminal-in-svg-format-termtosvg/feed/ 0