第28回:エディタひとつで完結させる
公開日:2026年07月17日チェッカーを、エディタに進化させる
前回作ったチェッカーを見て、あることに気づきました。「このチェッカー上で、テキスト入力や配置指定など必要なものを全て指定できて、保存・読み込みできれば、これだけで完結するのでは」と。つまり、チェッカーをエディタに進化させるのが今回の目的です。
セーブとロードまで、これひとつで完結させたい
テキスト修正や配置指定などを全て指定できて、JSONのセーブ/ロードができるエディタにして。これだけで完結させたい。
ドラッグで動かせるエディタが、ひとつのHTMLで届いた
全フィールドの編集に加えて、テキスト枠をドラッグで移動・幅変更できるエディタがひとつのHTMLで上がってきました。描画ルールはゲーム本体と揃えてあるので、エディタで見た目が合っていれば本体でも同じに出ます。枠がはみ出すとマゼンタの点線で警告もしてくれます。
数値を勘で入れるより、見ながら詰めるほうが速い
テキスト位置やフォントサイズは、数値を勘で入れるよりも「見ながらドラッグで詰める」方が圧倒的に速い。これは私のこだわりでもあります。Excel版は一括入力の補助として残しつつ、日常の編集はこのエディタひとつで回すことにしました。
日本語と英語で、フォントサイズを分けたい
エディタができたので、次は日本語と英語でフォントサイズを別々に指定できるようにしたい。文の長さが言語で違うので、同じサイズだとどちらかが崩れるのです。
AI:エディタのドラッグ配置は、実際の編集で使いやすかったですか?
私:かなり良いね。最初座標指定にしようとしてたけど、やはり直接動かせるのは直感的で良い。
ツールをひとつに閉じ込める利点
エディタをひとつのHTMLに閉じ込めたのには理由があります。ビルドも環境構築もいらず、ファイルをブラウザで開くだけで動く。同じフォルダのJSONを自動で読み、なければファイル選択に切り替わる。そして何より、ゲーム本体と同じ描画ルールでプレビューするので、「エディタで見た目が合っていれば本体でも同じに出る」。この安心感が大きい。Excelと変換ツールも残しましたが、日常の編集はこのエディタひとつで回るようになりました。道具は、少ない手順で目的に届くほど良い、と改めて感じます。
ローカル編集のための小さな配慮
ブラウザでファイルを直接開く(file://)と、セキュリティ制限で同じフォルダのJSONを自動では読めません。そこで、読めないときは「ファイルを選ぶ」操作に切り替わるようにしてもらいました。こういう小さな配慮があるかないかで、手元での編集のしやすさが大きく変わります。