• Windows Terminal ベスト設定 第18回「Sixcelグラフィックス基礎編」

プレビュー版Windows Terminal v1.22には、Sixelと呼ばれるグラフィクス機能が搭載されている。

Sixelグラフィックスは、1978年に発表されたDEC(現HP社)のVT330で採用されたグラフィックス表示機能の1つ。同時最大256色表示、ターミナルの1文字あたり10×20ドットの解像度で描画が行える。たとえば、80文字×25行のウィンドウサイズの場合、最大800×500ピクセルの描画が行える。

Sixelグラフィックスは、もともと、ユーザー定義文字のためのグラフィックスパターン指定であったため、ターミナルの文字サイズとSixelピクセルのサイズは比例している。ターミナルの文字の横幅の1/10がSixelの1ピクセルのサイズになる。Windowsの描画ピクセルとは独立しているので注意が必要だ。

色は、最大同時256色で、うち1色(カラーレジスタ0)が背景色となる。ただし、Sixelピクセルの0ビットは、ターミナルの背景色を使うのか、現在の色をそのまま残すのかをエスケープシーケンスのオプションパラメーターで指定できる。

なお、カラーレジスタは、いわゆる「カラーパレット」なので、後から色定義を変更すると、それ以前に同じカラーレジスタ番号で描画したピクセルの色が変わってしまうので注意されたい。逆に描画後にカラーレジスタ定義を変更することで色を変えるアニメーションを作ることも可能だ。

カラーパレットは、メモリが高価な時代の8bit CPUを採用したBASICマシンなどで採用されていたが、最近では、フルカラー指定が普通になり、カラーパレットを知る人は少なくなった。

今回は、このSixelグラフィックスについて解説を行う。表01)は、Sixel関連の用語と定義(本記事独自の用語を含む)である。適宜参照していただきたい。

  • ■表01

アプリケーションで画像ファイルを表示

Sixelグラフィックスに対応しているターミナルエミュレーターは少なくない。Sixelに対応したターミナルエミュレーターのリストが、Are We Sixel Yet?にある。

また、グラフィックスアプリケーションの中にもSixel出力が可能なものがある。たとえば、WindowsやLinuxで利用できる「ImageMagick」などがある。インストールは、Linuxならパッケージ管理コマンドで、Windowsならwingetで行える。


※Ubuntu(Linux)の場合
sudo apt update
sudo apt install imagemagick -y

※Windowsの場合(事前にWingetのインストールが必要)
winget install ImageMagick.ImageMagick

ImageMagickでは、端末内で、


magick <画像ファイルパス> <オプション> sixel:

とすることで、Sixelエスケープシーケンスが出力され、端末内に画像ファイルを表示することができる。

デジカメなどの画像ファイルは、Sixelで端末内に表示するには、大きすぎるので「-resize 40%」などといったオプションの指定が不可避である。

また、Linuxには、「LibSixel」がある。付属コマンドとして、img2sixelがあり、画像ファイルをターミナル内に表示できる。

インストールは、Linuxのパッケージマネージャーで行う。debian/Ubuntu系なら、以下のコマンドでimg2sixelコマンドが利用可能になる。


sudo apt install libsixel-bin

なお、同時に「libsixel1」(ランタイム)もインストールされる。

使い方としては、


img2sixel 画像ファイルパス -w 800px

などのようにする。img2sixelコマンドにはmanページも用意されているが、通常は、「-w <ピクセル単位幅>px」、「-h <ピクセル単位高さ>px」で、ウィンドウ内に収まるように調整するぐらいだ。

前述のようにターミナルのSixelは、カラーパレットで最大256色表示なので、デザリングやパレット定義を使って、フルカラー画像を表示している。一般に、フルカラー画像であっても、フルカラー(RGB各8bit。約1678万色)すべてを使うことはないため、カラーパレットの定義で対応可能な場合もある。

画像内で使われている色数が256色に比べて多い場合、「デザリング」(通信のテザリングと混同しないように注意)を使い、複数ドットで色を近似させる。img2sixelでもデザリング処理が行われており、そのアルゴリズムは「-d」オプションで指定できる。サポートされているアルゴリズムを(表02)に示す。他のオプションなどに関しては、manページを参照されたい。

  • ■表02

Sixelエスケープシーケンス

次は、Sixelグラフィックのエスケープシーケンスを見ていくことにしよう。WindowsターミナルのSixelグラフィックスは、旧DEC社のVT-300シリーズのエスケープシーケンスをベースとしている。

Sixelグラフィックスは、ターミナルの文字サイズを基準に表示ドットのサイズが変動する。ターミナルのプロファイル指定で大きな文字を指定すれば、大きなドットが使われ、Sixelグラフィックスと文字サイズの関係は常に一定になる。

ターミナルのウィンドウ内がx文字、y行の場合、Sixelグラフィックスは最大10xドット×20yドットの解像度となる(Y方向はアスペクト比で変わる)。たとえば、80文字30行なら、最大800(=80×10)×600(=30×20)ドットのグラフィック表示が可能になる。

Sixelの表示には、「Sixel Display Mode(SDM)」があり、これをオンオフすることで、動作が切り替わる。Sixelの表示モードには、ユーザー定義文字の描画を想定した「スクロールモード」と、グラフィックスの表示を想定した「非スクロールモード」がある。これをSixel Display Modeで切り替える(表03)。デフォルトはスクロールモードが有効(SDM無効)になっている。

  • ■表03

Sixelグラフィックス描画のエスケープシーケンスは、


CSI <アスペクト比> ";" <背景色モード> ";" <水平グリッドサイズ> ";" "q" <Sixelグラフィック文字> ST

だが、オプション指定をすべて省略して以下のようにも指定できる。


CSI "q" <Sixelグラフィック文字> ST

「<アスペクト比>」は、Sixelの描画ピクセルの縦横比を表す数値を指定する。ただし、横幅は常に1ピクセルと固定になるため、アスペクト比は、実際には縦方向のピクセル数を表す。(表04)は、アスペクト比の指定値と縦横比および縦ピクセル数などを示すものだ。簡単にいうと、アスペクト比を指定することで、1 Sixelピクセルの縦方向の長さ(ドット数)を指定できる。Sixel文字に対応する縦方向のピクセルサイズは、このドット数に6をかけたものになる。たとえば、7(アスペクト比 1:1)が指定されたとき、Sixel文字の1ピクセルは1ドットとなり、Sixel文字は6ドットとなる。これは、デフォルトの「2:1」の半分になるため、ターミナルの1文字は20ピクセル、Sixel文字で3文字と2ピクセルに相当する。

  • ■表04

同じく2(同5:1)が指定されると、Sixelピクセルは、5ドット分となり、1つのSixel文字は、30ドットに相当し、1文字は、4ピクセルで表すことが可能になる。

なお、Sixelのアスペクト比は、後述するRaster Attributesで、Sixel 1文字単位で指定が可能である。エスケープシーケンス内のアスペクト比は、Raster Attributes/アスペクト比のデフォルト値を指定するものだ。

「<背景色モード>」は、Sixelピクセルの0の値が現在の色を維持するか、デフォルトの背景色とするのかを切り替える。この値が0または2の場合、Pixelピクセル中の0は、ピクセルをデフォルトの背景色で描画する。1の場合には、ピクセルは元の値のままとなる。

「<水平グリッドサイズ>」は、ピクセルの横方向の大きさを指定するものだが、VT300シリーズでは、固定した値が使われており、この指定は無視されている。

Sixel文字

Sixel文字は、大きく、「カラーレジスタ指定」と「Sixelピクセル指定」、「Sixel特殊文字」の3つに別れる。

「カラーレジスタ指定」は、「カラーレジスタ定義」と「カラーレジスタ呼び出し」の2つがある。「カラーレジスタ定義」は、カラーレジスタ(パレット)に具体的な色を定義するもので、RGBあるいはHSLで色指定が行える。具体的には、


“#” <レジスタ番号> “;” <カラー指定方式> “;” <カラー指定>

というパターンを取る。<レジスタ番号>は、0から255が指定可能で、0はPixelピクセルの0のビットに対応する色(背景色)となる。このためPixelピクセルの1のビットに対応する色(描画色)には、1から255の値を使う。

なお、このカラーレジスタは、一般的にいう「カラーパレット」であり、同じカラーレジスタ番号のピクセルは、最後に定義したカラーレジスタ定義に従う。逆に言うと、異なる色を定義して一回描画しても、あとからカラーレジスタ定義で指定した色に変えることができる。

「カラー指定方式」には、RGBとHSLの2つの方式が利用できる。RGB方式では、赤(Red)、緑(Green)、青(Blue)の3原色の割合を0から100%の数値で表す。

これに対してHSLは、色をHue(色相)、Saturation(彩度)、Lightness(輝度)の3つのパラメーターで色を表す。色相は、0から360°(0°が赤、120°が緑、240°が青、360°は0°と同じ赤)、彩度と輝度は0から100%の値で表す。

「カラーレジスタ呼び出し」は、“#”に続けてカラーレジスタ番号を指定したもの。たとえば「#254」とすれば、254番のカラーレジスタを表示色に指定したことを意味する。

Windowsターミナルは、カラーレジスタに予め色を割り当ててある(写真01)。以下のPowerShellコマンドは、その割り当てを表示するもの。


cls;write-host "`e[?80l`eP2;1;0;q$(0..15|%{"#$_!10;~"})--$(16..123|%{"#+$_!10;~"})--$(124..231|%{"#+$_!10;~"})--$(232..255|%{"#+$_!10;~"})`e\`e[12;1H"
  • 写真01: 本文にあるコマンドを使ってカラーレジスタを表示した。ただし、この写真では、レジスタ番号も表示させている。

1行目が#0~#15で、ここはターミナル設定のカラースキームのCampbellと同じ色が割り当てられている。2行目が#16から。ここは、6段階で次の色に切り替わる。4行目は、#232からで、黒から白の24段階のグレースケールが定義されている。

次回は、Sixel文字およびSixel特殊文字を解説する。

》 Windows Terminal ベスト設定 連載バックナンバー
https://news.mynavi.jp/tag/winterminal/