Windows Terminal ベスト設定第19回 Sixelグラフィックス「応用編」

今回は、前回の続きで、Sixelグラフィックスの具体的な描画方法などを解説する。前回と同じく、Sixel関連用語を（表01）に示す。Sixel文字Sixelグラフィックスは、エスケープシーケンス内で、ASCIIコードの“?”（0x3F）から"~"（0x7E）までの文字を使い縦6ピクセルのパターンを表す。これを本記事ではSixel文字と呼ぶ。Sixel文字の描画位置は、Sixelポインタで決まる。Sixelポインタは、Sixelディスプレイモード（SDM。Sixel Display Mode）に応じて、初期値が決まる。SDMが有効な場合、Sixel初期位置は、ターミナルの左上（0,0）に設定される。SDMが有効な場合のSixelポインタの初期値は、Sixelエスケープシーケンスを実行するごとにターミナル右上にリセットされる。SDMが無効な場合、現在のカーソル位置がSixelポインタの初期位置となる。これは、CUP（Cursor Position。CSI ＜Y＞ ";" ＜X＞H）のようなカーソル位置変更エスケープシーケンスを実行するごとに変化する。Sixelポインタは、Sixel文字を出力するごとに右側に1ピクセル移動する。また、（表02）以下の文字により、Sixelポインタが再設定される。“$”は、Sixelグラフィックスのキャリッジリターン（CR）に対応し、Sixelポインタを初期位置に戻す。Sixelグラフィックスでは、一度に1色しか描画できないため、Sixelに複数色で描画する場合、CRで位置を戻して、異なる色で描画を行う。たとえば、以下のPowerShellコマンドは、画面右上に、複数の色で描画を行う（写真01）。cls;write-host "`e[?80l`eP2;1;0;q#1!20;~$#2!3;@#3!3;A#4!3;C#5!3;G#6!3;O#7!3;_$#8!3;C#9!3;G#10!3;O#11!3;_#12!3;@#13!3;A`e\`e[5;1H"なお、1つのSixelエスケープシーケンス内でSixelに対して異なる色で描画を行う場合、ゼロになっているSixelピクセル描画は、Sixelエスケープシーケンスの背景モードにかかわらず、元の値を維持し、デフォルトの背景色での描画を行わない。このため、背景色モードを2（背景色で描画）に変更した下記のエスケープシーケンスでも、おなじ結果が得られる。cls;write-host "`e[?80l`eP2;1;2;q#1!20;~$#2!3;@#3!3;A#4!3;C#5!3;G#6!3;O#7!3;_$#8!3;C#9!3;G#10!3;O#11!3;_#12!3;@#13!3;A`e\`e[10;1H"ただし、背景色での描画が無効になるのは、単一のSixelエスケープシーケンス内のみで、複数のSixelエスケープシーケンスを使う場合、上書きしたときに、背景色モードに従った描画が行われる（写真02）。cls;write-host "`e[?80l`eP2;0;;q#1!20;~$#2!3;@#3!3;A#4!3;C#5!3;G#6!3;O#7!3;_`e\`eP2;0;;q#8!3;C#9!3;G#10!3;O#11!3;_#12!3;@#13!3;A`e\`e[2;1H"これに対して“-”は、ニューライン（NewLine。CR+LF）を表す。SixelポインタのX位置は、初期値に戻り、Y位置は、6ピクセル下に移動する。なお、物理画面上での移動距離は、現在のアスペクト比に応じて異なる。なお、単一のSixelエスケープシーケンス内では、NewLineを使ったあと、以前のY位置に戻ることはできない。この場合、一回、Sixelエスケープシーケンスを終了させ、新規にエスケープシーケンスを開始することで、以前のSixelポインタ初期値（カーソル位置または、画面左上）に復帰させることができる。また、SDMが無効の場合には、CUPなど、カーソル位置を変更するエスケープシーケンスを実行してもよい（このときSixelエスケープシーケンスは、一回終了させなければならない）。「"」は、ラスターアトリビュート（Raster Attribute）と呼ばれ、後続するSixel文字のアスペクト比を指定する。書式は以下のようなものだ。“"” ＜Pan＞ “;” ＜Pad＞ “;” ＜Ph＞ “;” ＜Pv＞ラスターアトリビュートでは、＜Pan＞と＜Pad＞を使い、後続するSixelピクセルの1ピクセルの縦方向サイズを指定する。1 Sixelピクセルの縦方向のドット数は、Round(＜Pan＞÷＜Pad＞)※ただしRound(X)は、Xに最も近い整数を返す関数となる。なお、現行のWindowsターミナルでは、＜Pan＞の最大値は、6 Sixelピクセル（=Sixel）がターミナル表示領域のY方向のサイズと同じになるまで指定できる（写真03）。具体的には、Round(ターミナルの表示行数×20÷6)となる。PowerShellであれば、以下の式で最大値を求めることができる。[int]((20*$host.UI.RawUI.WindowSize.Height)/6)なお、＜Pan＞にこれ以上の値を指定しても、Sixelピクセルの縦方向のサイズはかわらない。Sixelエスケープシーケンスの「背景モード」が0または2の場合に、ラスターアトリビュートが、Sixel文字より前に配置されると、＜Ph＞と＜Pv＞で指定された指定範囲をデフォルトの背景色（黒）でクリアする（写真04）。＜Ph＞と＜Pv＞ともに、単位はSixelドットである。このため、Pv=20、Ph=10で半角文字1文字分の範囲となる。たとえば、以下のようなラスターアトリビュート指定は、"1;1;100;100では、縦5行、横10文字の範囲がクリア（背景モードが0または2の場合）される。ただし、現在のWindowsターミナルの実装では、Sixel文字でのピクセル描画後のラスターアトリビュートの指定では、＜Ph＞と＜Pv＞の指定にかかわらず、Sixelポインタ初期値から、ターミナル右下までをクリアする。つまり、＜Ph＞と＜Pv＞で指定範囲のクリアを行うには、Sixel描画を行う前にラスターアトリビュートを指定しておく必要がある。この数値は、描画されるグラフィックスのサイズを、エスケープシーケンスを出力するアプリケーションに伝えるためにも使われるというが、実際には、範囲を超えての描画も可能なため、参考情報でしかない。任意の座標に点を描画するグラフィックスの基本は、指定された座標に点を描画することである。ここでは、Sixelグラフィックスで指定された座標に点を打つことを考える。アスペクト比指定やラスターアトリビュートにより、Sixelの縦方向のピクセルサイズが異なり、Y方向の座標指定方法が違ってくる。ここでは、話を簡単にするため、アスペクト比は、1:1で固定であるとする。Sixelグラフィックスは、SDM（Sixel Display Mode）により、Sixelポインタ初期値が異なる。このため、SDMにより点を描画する方法が異なる。SDMが無効の場合、Sixelポインタの初期位置は、文字カーソル位置となる。任意の座標にSixelを描画するには、最も近い文字位置に文字カーソルを移動させ、その後、Sixelポインタを動かして、描画位置を指定する必要がある。水平方向への移動は、ビットパターンがすべてゼロの“?”をピクセル数出力して、Sixelポインタを動かす。垂直方向は、6ピクセルごとにニューライン（“-”）を出力して移動させる。このとき、水平位置がSixelポインタ初期値に戻るため、エスケープシーケンス内では、先に垂直方向を指定し、その後、水平位置を“?”で合わせる。（リスト01）は、Sixelでドットを打つためのPowerShellのスクリプト（抜粋）である。完全なコードは、筆者のGitHubに置いてある。■リスト01# 文字カーソル位置$cposx= [math]::Floor( $x / 10);$cposy= [math]::Floor( $y / 20);# エスケープシーケンス出力用文字列変数の初期化、CUPで文字カーソル位置を移動$outstring = "${CSI}$(1+$cposy);$(1+$cposx)H"# Sixelのエスケープシーケンス開始。描画色は$cで指定$outstring += "${SIXELS}#${c}";# 文字カーソル位置からのオフセット$sx = $x - $cposx * 10$sy = $y - $cposy * 20# y方向のSixel行数（Sixel New Lineの数）$nCr=[Math]::Floor( $sy / 6)# Sixel New Lineの出力$outstring += "-" * $nCr# x方向のオフセットがゼロでなければオールゼロのSixelを必要数描画if($sx -gt 0) { $outstring += '$'+('?'*$sx)}# Sixel内の1のビットを計算$wp=[math]::Pow( 2,$sy % 6)# Sixel文字に変換$outstring +=[char]([int][char]'?'+[int]$wp)# ST(String Terminator)を最後に追加$outstring += $ST描画は、SDM無効で行っている。というのは、Sixelを描画する座標を指定するのに、カーソル移動を使うのが簡単だからだ。SDM有効の場合、常に画面左上がSixelポインタとなるため、座標移動が煩雑になるからだ。指定された座標から、最も近い文字カーソル位置を求め、変数$cposx、$cposyに保存する。これを使って、VTエスケープシーケンスCUPで文字カーソルを移動させる。ただし、エスケープシーケンスはすぐに出力するのではなく、変数$outstringに追加していき、最後にまとめて出力する。次にSixelエスケープシーケンスを開始し、カラーレジスタ番号を描画色として指定する。次に、文字カーソル位置からのSixelでの水平、垂直のオフセットを計算し、$sx、$syに保存する。Sixelは縦方向は6ピクセルごとにNewLineで行を移動させる必要がある。オフセット$syから必要なNewLineの数（$nCr）を求め出力する。水平方向のオフセット$sxがゼロでなければ、すべてゼロのSixel文字“?”を$sx個出力して、Sixelポインタを横に動かす。次にドットのSixel文字内での位置（$wp）を求めて、Sixel文字を作る。最後に、Sixelエスケープシーケンスを終了させるST（String Terminator。Esc \）を出力して終わる。PowerShellでは、「$host.UI.RawUI.WindowSize」で、コンソールの文字数（Width）、行数（Height）を調べることができる。$host.UI.RawUI.WindowSizeSixelでのグラフィック座標は、それぞれに10、20をかけたものになる。今、コンソールが80文字40行だとすると、コンソールの表示領域は、800（=80×10）ドット×800（=40×20）ドットとなる。Sixelグラフィックスは、ツールを使って、画像ファイルの表示に利用できるほか、コンソール内にグラフィックス描画を行うことも可能になる。かつては、Unix上でLaTexのプレビューなどを行わせることもあったようだ。ただ、当時と違い、Windowsターミナルは、シリアル接続ではなく、仮想TTY経由なので描画はかなり高速になる。ツールによってはアニメーションGIFの表示も可能だ。》 Windows Terminal ベスト設定 連載バックナンバーhttps://news.mynavi.jp/tag/winterminal/