コードやコマンド出力を画像化するコマンドラインツール「Freeze」の紹介
Charm がまた最高なツールを出してました。
例えばこういうコマンドを実行すると、
$ freeze main.js \
--window \
--show-line-numbers \
--border.radius 8 \
--shadow.blur 4 \
--margin 12
こういう画像を作れます。
こういうの
この記事では Freeze の基本的な使い方について簡単に紹介します。
インストール
Homebrew を使用している場合は brew install でインストールできます。
$ brew install charmbracelet/tap/freeze
もしくは go install でインストールすることもできます。
$ go install github.com/charmbracelet/freeze@latest
その他のインストール方法については公式の README をご参照ください。
基本的な使い方
基本的には以下のように、 freeze コマンドに画像化したいファイルを渡すだけです。
$ freeze <ファイル名>
# 例
$ freeze main.js
今回は以下のような内容の main.js を例にします。
function fibonacci(length) {
let nums = [0, 1];
for (let i = 2; i < length; i++) {
nums[i] = nums[i - 1] + nums[i - 2];
}
return nums;
}
console.log(fibonacci(10));
// => [
// 0, 1, 1, 2, 3,
// 5, 8, 13, 21, 34
// ]
freeze コマンドを実行してみます。
$ freeze main.js
次のような画像が freeze.png という名前で保存されます。
出力された画像
素敵ですね。
画像はデフォルトでは freeze.png という名前で保存されますが、 -o もしくは --output フラグで名前を指定することもできます。
# hoge.png という名前で保存
$ freeze main.js --output hoge.png
また、保存ファイル名の拡張子によって画像形式を指定することもできます。
v0.1.6 時点では PNG, WebP, SVG に対応しています。
# PNG 形式で保存
$ freeze main.js --output out.png
# WebP 形式で保存
$ freeze main.js --output out.webp
# SVG 形式で保存
$ freeze main.js --output out.svg
コマンドの実行結果を画像化
Freeze が画像化できるのはファイルだけではありません。
--execute フラグにコマンドを指定すると、そのコマンドの出力を画像化することもできます。
# eza を実行してみる
$ freeze --execute 'eza -alh'
ちゃんと色もつく
すごい。
見た目のカスタマイズ
フラグによって画像の見た目をカスタマイズすることができます。
ここではいくつかの例を紹介します。
フォント
--font.family フラグでフォントを指定することができます。
デフォルトは JetBrains Mono です。
今回は例として Unifont を指定してみます。
# Unifont を指定 (ローカルにフォントがインストールされている必要があります)
$ freeze main.js --font.family 'Unifont'
出力された画像
mac のウィンドウっぽくする
--window フラグを指定すると mac のウィンドウっぽくなります。
$ freeze main.js --window
出力された画像
枠線
枠線を設定することもできます。
-
--border.width: 枠線の幅 -
--border.color: 枠線の色 -
--border.radius: 角の丸み
$ freeze main.js --border.width 8 --border.color "#ff0000" --border.radius 8
出力された画像
行番号
--show-line-numbers フラグを指定すると行番号が表示されます。
$ freeze main.js --show-line-numbers
出力された画像
ここで紹介したのは一部ですが、他にも様々なオプションが用意されています。
- シンタックスハイライトのテーマ
- 影
- margin, padding
- フォントサイズ
- etc...
詳しくは公式の README をご参照ください。
設定ファイル
毎回フラグを指定するのは面倒なので、自分で設定ファイルを作成して使い回すことも可能です。
例えば freeze --interactive を実行すると対話的に設定を行うことができます。
公式の README より引用
freeze --interactive で行った設定はローカルに保存され、次回以降は -c もしくは --config フラグに user を指定することで再利用することができます。
# `freeze --interactive` で作成した設定を使う
$ freeze main.js --config user
デフォルトで用意されている設定もあります。
例えば -c もしくは --config フラグに full を指定すると mac のスクショっぽくなります。
$ freeze main.js --config full
mac のスクショっぽい
設定ファイルについて詳しくは公式の README をご参照ください。
まとめ
最高すぎます。
Charm は他にも最高なツールや Go ライブラリをたくさん出しているので、興味があればこれらもチェックしてみてください。
Discussion