ProcessingをMacのVisual Studio Codeで動かす

環境を揃えたいTomi（@nouns_is）です。Processing の公式IDEはかなり良くできていると思うのだけれど、コードを書くなら普段使い慣れているエディタで書きたい…という欲望を叶えるために、Visual Studio Code で Processing を動かしてみた。

ProcessingとVisual Studio Codeをインストール

どちらも普通にインストールするだけなので、サクッとインストール。

https://processing.org/

https://code.visualstudio.com/

Processing に「processing-java」をインストール

Processingを起動して、メニューバーの「ツール」から「”processing-java”をインストール」を選択し、インストール。パスワードを要求されたら、PCのパスワードを入力しよう。

正しくインストールされたか確認するには、ターミナルを起動して「processing-java」入力し、エラーが出ずに何やら情報が表示されれば正常にインストールされている。

 VSCodeに拡張機能「Processing Language」をインストール

続いて、Visual Studio Code（以後VSCode）の設定。拡張機能である「Processing Language」をインストールしよう。これを追加するとシンタックスハイライトやコード補完をしてくれるようになるのでコーディングがとても捗る。

左メニューから「拡張機能」をクリック（Shift + ⌘ + X）して「Processing Language」を検索し、インストール。インストールしたらVSCodeを再起動することで有効化できる。　

Processingのファイル（.pde）作成

準備は整ったので、いよいよVSCodeでProcessingを実行していきたい。まずはProcessingの（.pde）ファイルを作成しよう。この際気をつける点として、フォルダの名前と（.pde）ファイルの名前は同じ名前にする必要がある。Processingで新規で作成すると必ずその仕様になるので、うまく動かない場合はProcessingで作っちゃうのも手だ。

VSCodeにて、作成したフォルダ（今回は「VSTest」フォルダ）を開き（.pde）ファイルにコードを記述して保存しよう。

void setup() {
    size(512, 512);
}

void draw() {
   ellipse(width/2, height/2, 100, 100);
}

ビルドタスク（tasks.json）の作成

書いたコードを早速実行したいところだけど、このままでは実行できないのでビルドタスク（tasks.json）を作成する。この作業自体はプロジェクトごとに一回だけ作っておけば、次回以降はコードを書く→実行だけでOK。

上部の検索ウィンドウから「コマンドの表示と実行」を選択するか、ショートカット（Shift + ⌘ + P）でコマンドパレットを表示。

「Processing」と入力すると Processing に関わるコマンドが出てくるので「Create Task File」を選択。

すると、開いていたフォルダの中に不可視ファイル「.vscode」が作成され、中に「tasks.json」があることが確認できる。

Processingを実行する

ようやくここまで辿り着いた。あとは実行するだけだ。Shift + ⌘ + B にて記述したコードを Processing で実行しよう。

Processing の公式IDEも本当によくできていて、大好きなのだが…ことコードを書くなら普段使い慣れているVSCodeも大好きなので、今回はVSCodeで動かす方法の記録を残しておいた。皆様も、お好きな環境で Processing を楽しんでいただきたい。

それではまた。