マイクラのコマンドをシンタックスハイライトできるツールを作った
タイトルの通りこんなものを作りました。反省点などを振り返る記事です。
使ってください 🫠
てことで完成したので使ってください！！
動機 💣
初めて動画投稿をしてみようと思ったのですが、マイクラのコマンドを動画内で説明しようと思ったときに、単色だとめっちゃ見にくい上に味気ないのでほしくなりました。
「もう既にそういうツールあるかなー」と思い、探しても見つからなかったので作りました。（探し方が下手だっただけかも）
ちなみに、マイクラのコマンドじゃなくて、ちゃんとしたソースコード用で似たようなツールはCarbonとかです。
大まかな仕様 📖
コマンドのシンタックスハイライト
一番重要な部分ですが、がっつりパーサーを実装するとかはしてないです。あくまで簡易的なものなので、実際のマイクラ内のコマンド入力の挙動とは違う点もあると思います。
あと、実際のマイクラ内では構文エラーがあると赤文字になりますが、それは対応していません。
大まかな挙動は、まずスペースで分割し、先頭にスラッシュが付いている、runサブコマンドの直後、もしくは特定のキーワードの場合は灰色、それ以外は色付き文字で描画しています。
特定のキーワードとは、/executeコマンドのサブコマンド(as, if, run)や/fillコマンドのreplaceオプションなど、マイクラ内のコマンド入力で灰色で表示される部分です。よく使いそうなコマンドのキーワードは対応しましたが、すべてカバーは出来ていないです。気が向いたら増やしていきます。
既知の変な挙動としては、座標指定に~ ~ ~または^ ^ ^を使った際、~abc ~ ~とチルダやキャレットの後ろに数字以外がついても一つの座標として扱われます。
これはあまり問題になることはないと思うので、このままにしておきます。
フォント
画像生成に使うフォントは Google Fonts の DotGothic16 を使いました。実際のマイクラの英数字よりかはドットが細かいのですが、ひらがなも漢字も対応していて全体的にバランスが良いのでこれに決めました。
ハマったポイント 🕳️
fillText()の基準点はベースライン
canvas にテキストを描きたくて、普通にfillText("Hello, World.", 0, 0)って書いても、canvas が真っ白のままで謎でした。色々試してたら、テキストの左下ベースラインが基準点ぽいってことが分かりました。
なのできれいに全体を表示させたいときは細かい調整が必要です。CSS のスタイルがfillText()でも一部引き継がれるっていう話も聞いたので、canvas にvertical-align: bottom;とかを設定したら左下にできるかも。（未検証）
canvas の width 属性などを変更するとコンテキストがリセットされる
あまり試せていないのですが、canvas をリサイズすると canvas のコンテキストの属性が一部リセットされました。これに気付かず滅茶苦茶時間使いました。
少なくともctx.fontはリセットされました。フォントを最初に設定しておいたのに、全然違うフォントで描画されました。
文字列の中身が数値かどうかの判定
最初は、isNaN()を使っていたのですが、isNaN()では空文字列も数値と判定されてしまい都合が悪かったです。そこで次はNumber.isFinite()を使ったのですが、これは文字列型ではfalseを返します。
結局、Number()を使いました。これは、文字列型でも数値以外だとNaNを返すのでこれで判定が簡単にできます。
なんだかんだで CSS に一番時間を使ってしまった 😵
体感なので正確には分かりませんが、多分 CSS に一番時間を割いてしまいました。
恥ずかしながら、今まで CSS フレームワークをなんとなく使わずに避けていました。ただ、全部直書きではなく Tailwind とかのフレームワークを使えばもっと効率的にかけたのかもと今さら後悔してます…。勉強せねば。
最後に 🎮
自分用に細々としたツールを作ることは今までもありましたが、自分以外も使えるように公開するのは初めてだったので良い経験になりました。
X始めました🐣フォローしてもらえると嬉しいです！
Discussion