目次
Freezeとは
Freezeは以下のようにコードの書かれたファイルやコマンドを指定するだけで、画像生成ができるツールです。
例えばadd.jsというファイルを作成して、「freeze add.js」を実行すると、下図のような画像が生成されます。
// add.js
function add(a, b) {
return a + b
}
console.log(add(1, 2))
freeze add.js
デフォルトだと生成された画像名はfreeze.pngになるので、任意の名前で書き出す場合は「-o add.png」のように追記します。
freeze add.js -o add.pngFreezeの使い方
Freezeを使用するには、まず以下のいずれかのコマンドでインストールします。
# macOS or Linux
brew install charmbracelet/tap/freeze
# Arch Linux (btw)
pacman -S freeze
# Nix
nix-env -iA nixpkgs.charm-freeze
# Go
go install github.com/charmbracelet/freeze@latestHomebrewが使用可能であれば、brewコマンドでインストールで良いです。
brew install charmbracelet/tap/freezeインストールが完了すれば前述のように「freeze ファイル名」を指定するだけで画像生成ができます。
生成される画像ファイルの容量が大きい
Freezeで生成される画像ファイルの容量は大きいので、Webサイトなどに貼り付ける際は、pngquantを使用することをオススメします。
pngquantを使用すれば画像容量を大幅に削減できます。
この記事に貼られているアイキャッチ画像は、Freezeの生成画像は書き出し時は約71KBでしたが、pngquantを使用することで、約11KBまで削減できました。
画像の横幅を指定する
書き出される画像の横幅を指定する際は「-W 300」のように横幅を指定します。
freeze add.js -W 300
画像の背景色を変更する
Freezeのデフォルトの背景色は黒(#000000)です。
背景色を変更する場合は-bオプションで「-b #2e3440」のように指定します。
freeze add.js -b #2e3440
macOS風のウィンドウ画像にする
「--window」を追記することで、macOS風のウィンドウ画像にできます。(左上に3色の丸が追加される)
freeze add.js --window画像を角丸にする
「-r 5」を追記することで、画像を角丸にできます。
数値が大きいほど、角丸の半径が大きくなります。
freeze add.js -r 5
画像に行番号を追加する
「--show-line-numbers」を追記すると画像に行番号が追加されます。
freeze add.js --show-line-numbers
画像の余白を削除する
「-p 0」を追記すると画像の余白を削除できます。(完全にはなくなりません)
freeze add.js --show-line-numbers -p 0
余白をすべて削除すると見た目が悪いので、「-p 10,0,0,0」のようにして上だけ少し余白を付けるとバランスが良くなります。
freeze add.js --show-line-numbers -p 10,0,0,0
特定の行だけ画像化する
「--lines 1,3」のように行数の開始と終了を指定することで、特定の行だけ画像化できます。
コマンドの実行結果を画像化する
Freezeは「ls -la」のようなコマンドの実行結果も画像化できます。
やり方は「freeze --execute "ls -la"」でコマンドを実行するだけです。
freeze --execute "ls -l"
色付けは元のコマンドの実行結果が反映されます。
lsではなくexaを使用すると色付けされた状態で画像化されます。
freeze --execute "exa -l"
公式ドキュメントは一部間違っているので注意
Freezeの詳しい使い方は公式GitHubに記載されています。
charmbracelet/freeze: Generate images of code and terminal output
しかし、「--show-line-numbers」が記載されていなかったり、Display window controls.が「-w」でも使用可能と書かれていますが、実際は使えないなど、記述内容が正確ではない部分があるので注意が必要です。
GitHubに記載されているドキュメントよりも「freeze --help」実行時に見られるヘルプの記述のほうが正確です。
freeze --help
Generate images of code and terminal output. 📸
USAGE
freeze main.go [-o code.svg] [--flags]
freeze --execute "ls -la" [--flags]
-i --interactive Use an interactive form for configuration options.
SETTINGS
-c --config Base configuration file or template.
-l --language Language of code file.
-t --theme Theme to use for syntax highlighting.
-o --output Output location for .svg, .png, or .webp.
-x --execute Capture output of command execution.
CUSTOMIZATION
-b --background Apply a background fill.
-m --margin Apply margin to the window.
-p --padding Apply padding to the code.
--window Display window controls.
-W --width Width of terminal window.
-H --height Height of terminal window.
-r --border.radius Corner radius of window.
--border.width Border width thickness.
--border.color Border color.
--shadow.blur Shadow Gaussian Blur.
--shadow.x Shadow offset x coordinate.
--shadow.y Shadow offset y coordinate.
--font.family Font family to use for code.
--font.file Font file to embed.
--font.size Font size to use for code.
--font.ligatures Use ligatures in the font.
--line-height Line height relative to font size.
--lines Lines to capture (start,end).
--show-line-numbersそのため、使用する際のオプションなどはコマンドのヘルプを参照したほうが良いでしょう。
