【VSCode】連番・特定パターンを一括置換!正規表現を使った一括テキスト編集テクニック

Visual Studio Code (VSCode) でコーディングやドキュメント作成を行っていると、特定のパターンを持つテキスト大量に編集置換したい場面がよくありますよね。一つ一つ手作業で修正するのは非常に時間がかかり、ミスも発生しやすくなります。

そんな時、VSCodeに搭載されている検索・置換機能の中でも、「正規表現」を活用することで、複雑な条件に一致する文字列を一括で、かつ正確に変更することが可能です。特に、連番を含む文字列や、特定のフォーマットで記述されたタグなどを、別の形式にまとめて変換したい場合に絶大な効果を発揮します。

この記事では、VSCodeの正規表現を用いた置換機能を使って、連番を含む特定のパターンの文字列を一括で別形式に変換する具体的な手順と、知っておくと便利なVSCodeの検索オプションについて解説します。このテクニックをマスターすれば、テキスト編集の効率が格段に向上するはずです。


この記事の内容

  1. 置換したい文字列の例(連番パターン)
  2. 正規表現を使った置換手順 (VSCode)
  3. VSCode検索・置換の便利オプション
  4. まとめ:正規表現でVSCodeのテキスト編集を効率化

置換したい文字列の例(連番パターン)

今回は例として、以下のような[A1_xxxx](xxxxは4桁の連番)という形式の文字列を、|#A1_xxxx|という形式に一括で変換するケースを考えます。

置換前後の文字列比較例

置換前:


[A1_0001]
[A1_0002]
[A1_0003]
[A1_0004]
[A1_0005]
[A1_0006]
[A1_0007]
[A1_0008]
[A1_0009]
... (続く)

置換後(目標):


|#A1_0001|
|#A1_0002|
|#A1_0003|
|#A1_0004|
|#A1_0005|
|#A1_0006|
|#A1_0007|
|#A1_0008|
|#A1_0009|
... (続く)

これはあくまで一例ですが、ログデータのフォーマット変換、マークダウン記法の変更、特定の命名規則を持つIDの一括編集など、様々な場面で応用できるテクニックです。


正規表現を使った置換手順 (VSCode)

VSCodeで上記の置換を行う手順は以下の通りです。

  1. ファイルを開く: 置換対象のテキストが含まれるファイルをVSCodeで開きます。
  2. 検索・置換バーを表示:
    • Windows/Linux: Ctrl + H キーを押します。(Ctrl + F は検索のみ)
    • Mac: Cmd + Option + F キーを押します。(Cmd + F は検索のみ)

    これにより、検索フィールドと置換フィールドが表示されます。

  3. 正規表現モードを有効化: 検索フィールドの右側にある「.*」アイコン(正規表現を使用)をクリックしてオン(選択状態)にします。

    VSCodeの検索置換バーと正規表現アイコン
  4. 検索パターン(正規表現)を入力: 検索フィールド(上の入力欄)に、置換したい文字列のパターンを正規表現で入力します。今回の例では以下を入力します。
    \[A1_(\d{4})\]

    • \[\] : 角括弧は正規表現で特別な意味を持つため、バックスラッシュ \ を付けて文字そのものとして扱います(エスケープ)。
    • A1_ : この文字列に完全に一致します。
    • (\d{4}) :
      • \d : 任意の数字(0-9)を表します。
      • {4} : 直前の\dがちょうど4回繰り返されることを意味します(つまり4桁の数字)。
      • (...) : カッコで囲むことで、この部分(4桁の数字)を「キャプチャグループ」として後で利用できるようにします。これが$1の正体です。

    この正規表現は、「[A1_ で始まり、4桁の数字が続き、] で終わる」文字列にマッチします。

  5. 置換パターンを入力: 置換フィールド(下の入力欄)に、置換後の文字列形式を入力します。ここでは「キャプチャグループ」を利用します。
    |#A1_$1|

    • |#A1_ : 置換後の文字列の先頭部分です。
    • $1 : 検索パターン内の1番目のキャプチャグループ(\d{4})にマッチした内容(つまり元の4桁の数字)を参照します。
    • | : 置換後の文字列の末尾部分です。

    これにより、元の4桁の数字を保持したまま、前後に指定した文字を追加する形で置換が行われます。

  6. 置換の実行:
    • 置換フィールドの右側にある「すべて置換 (Replace All)」ボタン(アイコンは通常、複数の四角形が重なった形)をクリックします。
    • これにより、ファイル内で検索パターンに一致するすべての箇所が、指定した置換パターンに従って一括で変更されます。(個別に確認しながら置換したい場合は、「置換 (Replace)」ボタンを一つずつ押します)

正規表現のキャプチャグループ($1など)を活用することで、単なる文字列の置き換えだけでなく、元の文字列の一部を保持しながらフォーマットを変換する、といった複雑な置換作業も簡単に行えます。これにより、手作業では時間のかかる定型的な編集作業の効率を大幅に向上させることができます。


VSCode検索・置換の便利オプション

VSCodeの検索・置換バーには、正規表現以外にも便利なオプションがあります。これらを使いこなすことで、より効率的で正確な検索・置換が可能になります。(アイコンは検索フィールドの右側に並んでいます)

  1. 大文字と小文字を区別 (Match Case / Aaアイコン):
    大文字と小文字を区別オプション

    このオプションをオンにすると、検索文字列の大文字と小文字が厳密に区別されます。例えば、「Apple」で検索した場合、「apple」や「APPLE」はヒットしません。特定の変数名や定数名などを正確に検索・置換したい場合に有効です。

  2. 単語単位で検索 (Match Whole Word / [ab]アイコンのようなアイコン):
    単語単位で検索オプション

    このオプションをオンにすると、検索文字列が単語として完全に一致する場合のみヒットします。例えば、「cat」で検索した場合、「category」や「concatenate」に含まれる「cat」は無視され、「cat」(スペースや記号で区切られている) のみがヒットします。意図しない部分的な一致を防ぎたい場合に便利です。

  3. 正規表現を使用 (Use Regular Expression / .*アイコン):

    この記事で解説したように、正規表現を使ってより複雑なパターンマッチングを行うためのオプションです。オンにすることで、\d, [], (), $1 などの正規表現特有の記法が利用可能になります。

これらのオプションを状況に応じて組み合わせることで、より柔軟かつ正確なテキスト検索・置換を実現できます。


まとめ:正規表現でVSCodeのテキスト編集を効率化

VSCodeの検索・置換機能で正規表現を活用することで、手作業では時間と手間がかかる複雑なテキスト編集作業を、迅速かつ正確に行うことができます。特に、連番や特定のフォーマットを持つ文字列を一括で変更したい場合には非常に強力です。

今回紹介したキャプチャグループ($1など)を使った置換パターンは、元のデータの一部を活かしながらフォーマットを変換する上で基本的なテクニックとなります。また、「大文字/小文字の区別」や「単語単位検索」といったオプションと組み合わせることで、より精度の高い操作が可能です。

最初は正規表現の記法に戸惑うかもしれませんが、基本的なパターンをいくつか覚えるだけでも、VSCodeでのテキスト編集の生産性は格段に向上します。日々の開発やドキュメント作成で、ぜひこの強力な機能を活用してみてください。

【Unity】Live2DモデルをUI Canvasに表示する方法 (RenderTexture + RawImage)

UnityでゲームのUIを作成する際、「メニュー画面やステータス画面にキャラクターのLive2Dモデルを表示して、もっとリッチでインタラクティブな画面にしたい!」と考えたことはありませんか?

しかし、実際に試してみると、通常のUI要素(ImageやTextなど)のようにUI Canvas上にLive2DモデルのPrefab(プレハブ)を直接配置しただけでは、うまく表示されないことが多いです。これは、Live2Dモデルの描画方法とUnityのUIシステム(uGUI)の仕組みが異なるためです。

この記事では、この問題を解決し、UnityのUI Canvas上にLive2Dモデルをきれいに表示させるための一般的なテクニックを解説します。具体的には、「RenderTexture」と「RawImage」というUnityの機能を利用して、Live2DモデルをUI要素として埋め込む方法をステップバイステップで紹介します。


前提:実装するUIの構成例

今回は例として、以下のようなボタンで表示を切り替えるシンプルなメニュー画面を想定し、「WindowStatus」の中にLive2Dモデルを表示するケースで解説します。


UICanvas (Canvasコンポーネントを持つGameObject)
 |- WindowItem (アイテム画面のGameObject)
 |- WindowStatus (ステータス画面のGameObject)
 |   |- TextMeshPro (キャラクター名など)
 |   |- Image (背景画像など)
 |   +- Live2DPrefab (ここにLive2Dモデルを表示したいが、直接配置ではうまくいかない)
 |- WindowOption (オプション画面のGameObject)

この構成の `WindowStatus` 内にLive2Dモデルを表示させるために、以下の要素を追加・設定していきます。

  1. Live2DモデルのPrefab: Live2D Cubism SDKを使ってUnityプロジェクトにインポートした際に自動生成されるPrefab。
  2. Live2D表示用の専用カメラ: シーン内の他の要素とは別に、Live2Dモデルだけを撮影するためのカメラ。
  3. RenderTexture: 上記の専用カメラが撮影した映像(Live2Dモデル)を、テクスチャとして描き込むためのアセット。
  4. RawImage: UI Canvas上に配置するコンポーネントで、RenderTextureの内容を画像として表示するもの。

つまり、「Live2D Prefabを専用カメラで撮影し、その映像をRenderTextureに焼き付け、最終的にそのRenderTextureをRawImageコンポーネントを通じてUI Canvas上に表示する」という流れになります。

なお、UI CanvasのRender Mode(「Screen Space – Overlay」、「Screen Space – Camera」、「World Space」)は、どのモードでも基本的にはこの方法で対応可能です。(今回は「Screen Space – Overlay」を想定して進めます)

最終的なHierarchy(ヒエラルキー)構成は以下のようになります。


UICanvas (Canvasコンポーネントを持つGameObject)
 |- WindowItem
 |- WindowStatus (ステータス画面のGameObject)
 |   |- TextMeshPro
 |   |- Image (背景など)
 |   |- RawImage (ここにRenderTextureを設定し、Live2Dモデルを表示) 【追加】
 |   |- Live2D Camera (Live2D撮影用のカメラ) 【追加】
 |   |- Live2D Prefab (表示したいLive2Dモデル) 【追加】
 |- WindowOption

それでは、具体的な手順を見ていきましょう。


UI CanvasにLive2Dモデルを表示する手順 (RenderTexture + RawImage)

Step 1: Live2D撮影用の専用カメラを作成する

まず、UIに表示したいLive2Dモデルだけを撮影するための専用カメラを用意します。シーン内の他のカメラとは別に、このLive2Dモデルだけを映し出す役割を持ちます。

作成方法としては、シーンに既に存在するカメラ(例: Main Camera)を複製(Ctrl+D または Cmd+D)するのが簡単でおすすめです。複製したら、分かりやすい名前(例: `Live2D Camera`)に変更しましょう。

次に、作成した `Live2D Camera` を選択し、Inspectorウィンドウでカメラの設定を確認・変更します。特に重要なのは「Projection」の設定で、これを「Orthographic」(平行投影)に設定します。UIに2D的に表示する場合は、通常 Orthographic が適しています。

カメラの位置やサイズ(Orthographicの場合のSize)を調整して、シーンに配置したLive2Dモデルがカメラのビュー内に適切に収まるようにしてください。

【トラブルシューティング】Live2Dモデル自体が正常に表示されない場合

シーンに配置したLive2DモデルのPrefabが、そもそも正しく表示されない(パーツが欠ける、表示順がおかしいなど)場合は、Live2D PrefabのGameObjectにアタッチされている「CubismRenderController」コンポーネントの設定を確認してください。

特に「Sorting」セクションにある「Mode」の設定が重要です。多くの場合、これを「Back To Front Order」に変更することで、描画順の問題が解決します。

CubismRenderControllerのSorting ModeをBack To Front Orderに変更

参考: モデルの描画順を正常にする (Live2D Manuals&Tutorials)

Step 2: Live2D Prefabに専用レイヤーを設定する

次に、Live2D撮影用カメラがLive2Dモデルだけを識別できるように、Live2DモデルのPrefabに専用のレイヤーを設定します。

  1. Unityエディタ右上の「Layers」ドロップダウンメニューを開き、「Edit Layers…」を選択します。
  2. 「User Layers」の空いている欄(例: Layer 8以降)に、新しいレイヤー名(例: `Live2D`)を入力します。名前は何でも構いません。
  3. シーンに配置したLive2DモデルのPrefabのGameObjectを選択します。
  4. Inspectorウィンドウ右上の「Layer」ドロップダウンメニューを開き、先ほど作成した`Live2D`レイヤーを選択します。「Change children?」と聞かれたら「Yes, change children」を選択し、子オブジェクトにも同じレイヤーを設定します。

Live2D Prefabに作成したLive2Dレイヤーを設定する

Step 3: カメラのCulling Maskを設定する

レイヤー設定が完了したら、各カメラが描画する対象を絞り込みます。

  1. メインカメラ (Main Camera):
    • Main Cameraオブジェクトを選択し、InspectorウィンドウのCameraコンポーネントにある「Culling Mask」ドロップダウンメニューを開きます。
    • 先ほど作成した`Live2D`レイヤーのチェックを外します。これにより、メインカメラはLive2Dモデルを描画しなくなります。
  2. Live2D撮影用カメラ (Live2D Camera):
    • `Live2D Camera`オブジェクトを選択し、同様に「Culling Mask」を開きます。
    • 「Nothing」を選択して一旦全てのチェックを外し、その後、`Live2D`レイヤーのみにチェックを入れます。これにより、このカメラはLive2Dレイヤーが設定されたオブジェクト(つまりLive2Dモデル)だけを描画するようになります。

メインカメラのCulling Mask設定 (Live2Dを除外):

メインカメラのCulling MaskからLive2Dレイヤーを除外

Live2DカメラのCulling Mask設定 (Live2Dのみ選択):

Live2DカメラのCulling MaskでLive2Dレイヤーのみを選択

Step 4: RenderTextureを作成する

Live2D用カメラの映像を焼き付けるための「RenderTexture」アセットを作成します。

  1. Projectウィンドウで右クリックし、Create > RenderTexture を選択します。
  2. 作成されたRenderTextureアセットに分かりやすい名前(例: `Live2DRenderTexture`)を付けます。
  3. 作成したRenderTextureアセットを選択し、Inspectorウィンドウで設定を行います。
    • Size: RenderTextureの解像度を設定します。UI上での表示サイズに合わせて調整しますが、まずは1024 x 10242048 x 2048 程度で試してみると良いでしょう。後でUIに表示した際にLive2Dモデルの表示が粗い場合は、ここの数値を大きくします。
    • Color Format: 通常はデフォルトのままで問題ありませんが、背景透過などを行いたい場合はアルファチャンネル付きのフォーマット(例: ARGB32)を選択します。

Step 1で作成したLive2D用カメラの出力先として、Step 4で作成したRenderTextureを指定します。

  1. `Live2D Camera`オブジェクトを選択します。
  2. InspectorウィンドウのCameraコンポーネントにある「Output Texture」フィールドに、作成した`Live2DRenderTexture`アセットをドラッグ&ドロップで設定します。

Live2DカメラのOutput TextureにRenderTextureを設定する

これで、`Live2D Camera`が捉えたLive2Dモデルの映像が、リアルタイムで`Live2DRenderTexture`に描き込まれる状態になりました。あとは、このRenderTextureをUI上に表示するだけです。

Step 6: RawImageでCanvas上に表示する

最後に、UI Canvas上に「RawImage」コンポーネントを配置し、そこにRenderTextureを表示させます。

  1. Live2Dモデルを表示したいUI要素(例: `WindowStatus` GameObject)を選択します。
  2. 右クリックメニューから UI > Raw Image を選択し、`RawImage`コンポーネントを持つ新しいGameObjectを子として作成します。GameObjectの名前を(例: `Live2DView`)に変更します。
  3. 作成した`Live2DView` GameObjectを選択します。
  4. InspectorウィンドウのRawImageコンポーネントにある「Texture」フィールドに、Step 4で作成した`Live2DRenderTexture`アセットをドラッグ&ドロップで設定します。
  5. Rect Transformコンポーネントを使って、UI上での表示位置とサイズを調整します。

RawImageコンポーネントのTextureにRenderTextureを設定

これで、UnityエディタのGameビュー上で、UI Canvasの指定した位置にLive2Dモデルが表示されるはずです!


最終的な配置と注意点

最終的に、今回作成した以下の要素は、それらを表示するUIパネル(例: `WindowStatus` GameObject)の子オブジェクトとしてまとめておくと管理がしやすいでしょう。

  • Live2D Prefab (Live2Dレイヤー設定済み)
  • Live2D Camera (Culling Mask設定済み、Output Texture設定済み)
  • RawImage GameObject (RenderTexture設定済み)

こうすることで、親である `WindowStatus` GameObjectの表示/非表示 (SetActive(true/false)) を切り替えるだけで、Live2Dモデルの表示も連動してON/OFFされるようになります。

以上が、RenderTextureとRawImageを使ってUnityのUI Canvas上にLive2Dモデルを表示する基本的な手順です。この方法を使えば、メニュー画面やキャラクター詳細画面など、様々なUIでLive2Dを活用できます。