Processingのエディタでフォントを変更して日本語の文字化けに対応する



Processingのエディタでデザインやアート、CGをプログラミングで生成していきますが、Processingのエディタを使っていく上で、コードを書いている途中にコメントを残すことがあります。または、文字を使ったデザイン、アートを作成することも。

しかし、エディタに日本語で文字を入力すると文字化けすることがあります。これはエディタのデフォルトのフォントが日本語に対応していないフォントになっているからです。

Processingで制作していく中で、エディタのフォントを日本語に対応したフォントに変更しておくと開発がしやすいかと思います。
ここではProcessingのエディタのフォントを変更する方法をご説明します。

あまり操作の違いはありませんが、Windows PCとMacと両方の画面で説明していきます。

エディタのフォント変更


Processingのエディタのフォントの変更は、エディタの設定を変更していきますが、古いバージョン（バージョン4.4以前）と最新バージョンでは、設定画面が異なります。

最初に古いバージョンの設定画面で見ていきます。
まずはWindows PCから。

Processingのエディタのツールバーから「ファイル」と選択して「設定」へ進みます。

Processingのエディタのフォントを変更する（Windows）



設定の画面が表示されます。
「エディタとコンソールのフォント」の項目からフォントの選択ができます。

WindowsとMacではOSが違うため異なるフォントが表示されます。
（OSのアップデートにより変わる場合もあります）

◯Windows
・DialogInput
・UD デジタル 教科書体 N-B
・UD デジタル 教科書体 N-R

◯Mac
・DialogInput
・Menlo

選択して「OK」をクリックすれば変更完了です。

Processingのエディタとコンソールのフォントを変更する（Windows）



さぐりさぐりなので、他にも見やすいフォントがあるかもしれません。
上記で紹介したフォントは個人的に半角英数字や記号、日本語とすべて見やすいと思ったものです。
MSゴシックなどの日本語に対応したフォントもありますが、半角英数字や記号がキレイに表示されないためコロン「:」やセミコロン「;」の違いが見にくかったりするので間違えてエラーをおこしたり、エラーを発見するのに苦労します。
DialogInputに関しては、WindowsとMacの両方で選択できると思います。

他にもフォントサイズの設定もあります。
デフォルトでは12となっていて少し小さく感じます。
なので僕は14に設定しています。

Macの場合は、
Processingを利用している状態から、画面上のツールバーの「Processing」から「設定」に進みます。

Processingのエディタのフォントを変更する（macOS）



設定画面が表示されます。
画面はほとんどWindowsを同じになります。
「エディタとコンソールのフォント」の項目からフォントの選択ができます。

Processingのエディタとコンソールのフォントを変更する（macOS）

最新バージョンでのエディタのフォント変更

Processingのバージョン4.4以降では、設定画面のデザインが変更されました。

まずは、Windows PCでの変更方法から。
Processingのエディタのツールバーから「ファイル」と選択して「設定」へ進みます。

Processingのエディタのフォント変更（Windows）



設定画面の「Appearance」のメニューより、エディタとコンソールのフォントの項目でフォントが変更できます。

Processingの設定にてエディタとコンソールのフォントを変更する（Windows）



Macの場合は、
画面上のツールバーの「Processing」から「Preferences」に進みます。

Processingのエディタのフォント変更（macOS）



こちらもWindowsと同じく、設定画面の「Appearance」のメニューより、エディタとコンソールのフォントの項目でフォントが変更できます。

Processingの設定にてエディタとコンソールのフォントを変更する（macOS）



エディタのフォントの変更は以上になります。

コメントも簡単に英語で入れるのであればいいですが、日本語で入れたほうがわかりやすいという方は開発がしやすいようにエディタのフォントは変更しておきましょう。