三行要約

⚙️TUI（ターミナル）でおしゃれなアプリを作りたい方必見！ライブラリとサイトを紹介！⚙️

🤩コマンドラインツールの開発はRustのclapとratatuiがおすすめ🤩

👾画像ファイルから自動でASCIIアートを生成するサイトを発見した！👾

はじめに

どうも！Helloween Head's Depotです！

本日の記事では、TUIツールを作るにあたって、おすすめだったサービスやクレート等について紹介させていただきます！

最近少し着手し始めたCLIツールがあるのですが、その道すがらTUIでおしゃれな演出をするために色々工夫を凝らしており、幾つかお役に立てそうなTIPSを見つけたので共有したく書きました！

ちなみに今の所、こんなものが作れちゃいました！！（技術者特有のめっちゃ自慢）

ベルトコンベアー上に並ぶファイルたちをリストから選択することでパッケージング（■のやつ）をし、全てパッケージングを終えると横にあるアイコンが変化するという感じです！

これは今作っているCLIツールのおまけ機能として実装したのですが、、、ここだけの秘密ですよ。（まぁ実はGitHubにPublicリポジトリ出してるので一瞬でバレますが。）

技術スタック

　今回のプログラムはRustで制作しました。主に以下の2つのクレートを用いております。(特に2個目が重要！！)

clapクレート

clap は、RustでCLIツールを作る際にコマンドライン引数やサブコマンドを簡単に扱えるようにしてくれるクレートです。

mytool pack sample.txt
mytool list

のようなコマンドを作る際に、pack や list といったサブコマンド、オプション、引数の解析をまとめて担当してくれます。

自前で std::env::args() をひたすら解析することもできますが、規模が少し大きくなるだけでかなり大変です。CLIツールをRustで作るなら、とりあえず候補に入れておいて損はないクレートだと思います。

ratatuiクレート

ratatui は、RustでTUI（Terminal User Interface）を作るためのクレートです。

普通のCLIが文字を上から順番に出力していくのに対して、ratatuiを使うとターミナルの中に、

枠

リスト

表

ゲージ

タブ

テキスト入力欄

などを配置して、GUIアプリのような画面を作ることができます。

今回冒頭でお見せした、ベルトコンベアーや選択リスト、アイコンの切り替えといった演出も、主にratatuiを利用して実装しています。

要するに今回の構成をかなり雑に言うと、

clap = CLIコマンドそのものを管理する係

ratatui = アプリ起動後のターミナル画面のUIを管理する係

です。

CLIツールとしての機能をclapで整理しつつ、見た目や操作部分をratatuiで作る、という組み合わせはかなり扱いやすいと思います。

ASCII artを作ってくれるサイト

Ratatuiクレートはターミナル上にTextFieldやボタン、選択リスト等普段GUIアプリで使われるものをターミナルでも使えるようにするための豊富な機能が存在します。

ところが、！！！！！！

飽くまでもRatatuiはTUIを作るためのクレート。

　演出面を凝らせる事はできても、演出の素体となるアセット（今回でいう所の左側のアイコン）等を提供している訳ではありません。じゃあ、自分で作ればじゃないか？そう思うかもしれません。……しかしながら、これを手打ちでやるのは狂気の沙汰、AntigravityやCodex等のAI Agentに画像を張り付けて作れと指示してもうまいこと生成してくれません。

　実際に試しました。何回も試してよく分からない異物ができるだけ。ただでさえ欠乏気味のトークンを無駄に削ってしまいました。お読みの皆さまには同じ轍を踏まないことをお勧めいたします...

そこで私、あるサイトを見つけたのです!

image-to-ascii Googleで検索すると上に出てきます。

Image to ASCIIというサイト。ここに画像を投げてつまみを色々調整するだけでその画像をASCIIで書いたものを生成してくれます。

一応このサイト内でも明るさや鮮やかさ等画像の諸変数を調整して描画したいものを目立たせることが可能ですが、最初からFigma等でコントラストのはっきりした入力用画像を作っておくとスムーズにいきます。

画面操作

以下のパラメータが特に重要です。

Characters : で出力されるASCIIアートの大きさを調整。
SpaceDensity : で空白（スペース）をどの程度多く使うかを調整できます。値を上げると余白が増えて疎な表現になり、下げると文字が詰まって密度の高い表現ができます。
ASCII gradient : どのような文字でアートを生成するのかを変更できます。数字、矢印、アルファベット、、、なんか色々です。（一部のやつは画像のレイアウトから結構崩れちゃったりします。。。そこだけ注意⚠️）

今やエンジニアに留まらずあらゆる知的活動に用いられるAIでもできない事が一介のウェブサイトが易々と行う。なんか凄いカタルシスに思えませんか？（いや、私だけですかね。。。）

おわりに

以上今回はTUIツール内で派手な演出をしたい場合に有用になるWebサイトImage to ASCIIについて共有させていただきました。今回Gifでお見せしたおまけ演出については一応私のGitHubの公開リポジトリ内にソースコードがございますが、もしもご要望等あれば次回以降の投稿でお話させていただければと存じます。

面白かった、役に立ったとお思いでしたら是非是非💗をお願いします！
今後も不定期にはなりますが、ニッチにお役に立つ技術情報を地道にお届けしようと考えています。フォローもいただけると非常に励みになります！

ここまでお読みいただきありがとうございました！また次回！

🎃Helloween Head's Depot🎃