開発環境を整える VSCode と Text2Frame のご紹介

はじめに

シナリオを執筆する際、ツクールのエディタに直接記述している方とテキストエディタで文章を書いてから後でエディタにコピペする方、大きく分けてこの二通りの作り方があると思います。

今回は先にテキストエディタで記述している方に向けて便利なツールを紹介する記事となっています。

導入するツール（プラグイン）は 2 つ 「Text2Frame」と「Visual Studio Code」です。それぞれのリンクを張っておきます。

• Text2Frame
  https://github.com/yktsr/Text2Frame-MV

• Visual Studio Code
  https://azure.microsoft.com/ja-jp/products/visual-studio-code/

Text2Frame

外部のファイルに記述したテキストをツクールのエディタに読み込んでくれるプラグインです。専用のタグを記述することでメッセージ以外のコマンドも読み込むことができます。

言葉だけでは分かりづらいので実際に使用しているところを動画に撮影しました。

便利ですね！だけどタグを打ち込むのが面倒くさい！と思った方も多いハズ
そこで Visual Studio Code （以下 VSCode）の出番となるわけです。

Visual Studio Code

プラグインの開発からデバッグ、ツクールのプラグイン開発に関わらずありとあらゆる分野で活用されているプログラマー向けのコードエディタですが、高機能なメモ帳としても活用できます。

今回は高機能なメモ帳として活用していくための機能を少し紹介したいと思います。

どんなことができるのか

すごい使い方をしている人では藤井太洋さんというSF作家さん。
こちらの方は小説執筆用にかなりカスタマイズをして使用されているみたいです。

https://twitter.com/t_trace/status/1536875267615993856?s=20&t=xBBG4mY6NwklXkAOEFyvzA

関連記事
https://forest.watch.impress.co.jp/docs/review/1417878.html
https://logmi.jp/tech/articles/325715

ここまでのことをするには VSCode の拡張方法を詳しく知る必要がありますし、自分もそのあたりのことは詳しくありませんので紹介するに留めさせていただきますが、こんなこともできるんだ！という可能性を感じていただければなと思います。
（ツクールのシナリオの記述がしやすくなる拡張、誰か作ってくれないかなぁ）

入力補完（コードスニペット）

VSCode の強力な機能として入力補完を行うコードスニペットを独自に定義することができることです。コードスニペット？なんのことやらという感じだと思いますが一般的にはスニペットとは断片という意味で、辞書登録機能のようなものです。

辞書登録と違うのは完全に入力して変換をするというわけではなく、一部の文字を入力するだけで、補完される候補として提案してくれるということです。

これも言葉では伝わりづらいため動画にしました。

また、あくまでVSCodeのワークスペース（ツクールのプロジェクトみたいなもの）にしか影響が無いということです。これによってゲームのプロジェクトごとに固有の設定をすることが可能です。

たとえば登場するキャラクターはゲームによって異なってきます。
プロジェクト固有のプラグインやコモンイベントを呼び出すこともあるでしょう。

それを辞書登録してしまうと、他のプロジェクトでゲームを作るときに邪魔になります。
個別のプロジェクトごとに設定できたほうが都合がいいわけです。

コードスニペットの定義方法

.vscode フォルダの中に任意の名前で拡張子 .code-snippets というファイルを置きます。中身は次のように記述します。

{
	"unique name":{
		"prefix": "namebox",
		"body": "<Name:$1>",
		"description": "名前欄の指定"
	},
}

• unique name
  任意の文字列です。スニペットを識別するために被らない名前である必要があります。

• prefix
  ここに記述された文字列を入力した際に、候補として提案されるようになります。

• body
  ここの内容が、スニペットを選択した際にエディタに記述されます。

• description
  スニペットの説明です

説明されただけでは分かりづらいと思いますので、コードスニペットの定義ファイルを含め、Text2Frame の設定も行っているプロジェクトを配布します。試しに使ってみてください。

.vscode というフォルダがある場所を、VSCode で開くだけでOKです。
インストール方法などは特に難しいことは無いと思いますので割愛します。わからなかったら調べてみてくださいね。

ゲーム開発する上で VSCode は様々な事に活用することができます。
今回は Text2Frame との連携についてでしたが、以前記事にした git と連携することも可能です。開発環境を整える第一歩として VSCode の導入はいかがでしょうか。

それではよいツクールライフを！