Visual Studio CodeでCAを制作する │ コメントアートのためのブログ

はじめまして。wayiです。

ニコニコ動画(Re:仮)では積み/nakaが主に作られそうなので、個人的にこの2つを作るのに一番向いていると思うVisual Studio Code(以下VSCode)での作り方を解説しようと思います。

書くの遅かったせいで(Re:仮)の寿命があと半日になってしまった。

1. なぜVSCodeを使うのか
2. 準備
3. 欠点

なぜVSCodeを使うのか

行間が自由に設定できる
特定の文字をハイライトできる
ウィンドウを透過できる(windows限定)

主に1が便利で、積みも高さ固定もVSCodeだけで作れます。2と3は拡張機能です。

(VSCodeと実際に投稿したコメントの表示が完全に一致したせいでコメントが見えなくなって一致したことが逆にわかりにくくなってしまった画像)

準備

インストール　(公式ページ)
わからなかったらググってください。メモ帳として使うだけなのでインストール時の設定はなんでもいいです。
左端の拡張機能（四角が一つ離れているアイコン）をクリックして以下の拡張機能を検索しインストール
Highlight
Color Picker(任意あると便利)
GlassIt-VSC (windows限定)

　こうなればok

左下の歯車をクリック→設定　以下の設定を変更

Editor:Font Family 游ゴシック　(macの場合游ゴシック体)
Editor:Mouse Wheel Zoom オン
Editor>Suggest: Show Words オフ
Editor>Unicode Highlight: Ambiguous Characters オフ
Editor>Unicode Highlight: Invisible Characters オフ
Hightlight: Max Matches 999999999999(大きければOK)

設定の右上にある設定(JSON)を開くをクリック

この位置に以下をコピペ（上のカンマは必須　カラコは適当に設定したので自由に変更してください）
文字の追加の仕方は見ればわかると思います　//U+~の部分はわかりやすくするだけなので必要ないです

,
        //U+2003
        "( )":[{
        "backgroundColor":"#854242"
        }],
        //U+2000
        "( )":[{
        "backgroundColor":"#886543"
        }],
        //U+2004
        "( )":[{
        "backgroundColor":"#7c783e"
        }],
        //U+2005
        "( )":[{
        "backgroundColor":"#408040"
        }],
        //U+2006
        "( )":[{
        "backgroundColor":"#45458a"
        }],
        //U+2588
        "(█)":[{
        "color":"#8f8f8f"
        }],
        //全角スペース
        "(　)":[{
        "backgroundColor":"#81425f"
        }]

ファイル→新しいテキストファイル　または　ファイルを開く　または　フォルダーを開く
文字の大きさ、行間を合わせる
設定からEditor: Font SizeとEditor: Line Heightの数値を変更します
(Line Heightについて：行間を0にしたい場合は1　8以上の数字はピクセル数)
ctrl+スクロールでズーム、(GlassIt-VSCが導入されていれば)ctrl+alt+zとctrl+alt+cでウィンドウの透過率を操作できるので、再生ウィンドウと重ねて合っているかを確かめながら調整します。
自分の環境だと積みはlineheight 23 fontsize 18でした(冒頭の本社がそれ)
合うときは適当でも完全に一致するし、合わないときはどうしようもないほどズレます　ここだけ面倒

おい pic.twitter.com/7hvkPOt8Lt

— wayi (@wayi445) March 5, 2024