ProcessingをVSCodeに移行してみた

最近、Processingの勉強を始めました。初めはPDE上で実行していましたが、VSCodeの方が見た目的にも好きだし、外部エディタってなんかかっこよくね！？などなどさまざま理由から、VSCodeへの移行を試みました。

この記事では、私が実際に移行した際につまづいた点や注意すべき点について、綴ります。尚、筆者はろくに記事を書いたことがないため、ダメ出しや改善点もバンバン出していただきたいと思います。ぜひコメントで私を罵ってください（）

移行するにあたって参考にした記事はこちら
[ProcessingをVisual Studio Codeで動かしたい](https://qiita.com/jacynthe/items/d31eaa77496295c10556)
[Visual Studio CodeでProcessingを動かす](https://qiita.com/JotaroS/items/12e8b650057ed154ddad)

筆者のMacOS・ソフトウェアのバージョン
- MacOS：Mojave 10.14.4
- VSCode：1.38.0
- Processing：3.5.3

※この記事ではVSCodeやProcessingのダウンロード・インストールが完了していることを前提として進めていきます（その辺は他の記事漁ってちょ）。

# 1. processing-javaをインストール
何やらこのファイルをインストールする必要があるようです。
私は初めにこれをインストールし忘れて、「できねえじゃねえかこのやろう」とあたふたしていました。

Processingを開いた状態で、
`ツール → "processing-java"をインストール`
でインストールできます。
<img width="553" alt="スクリーンショット 2019-09-10 12.10.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324611/1a31dc46-e60f-5da7-dc6e-73a0563d2936.png">

# 2. フォルダやファイルを作成して実行する
この辺りから少しややこしくなってきます（少なくとも私はとっても苦労した）。

どこでもよい（多分）ので、フォルダを作成します。私の場合はユーザディレクトリに `Processing_test` という名前で作成しました。
そしてこれをVSCodeで開きます。
<img width="1280" alt="スクリーンショット 2019-09-10 12.25.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324611/b8057b64-38aa-371c-19de-de7a4aad36d0.png">
いつも通り、Welcomeが出てきますね。
次に、適当にフォルダとpdeファイルを作成して、実行します。
ここで気をつけてもらいたいのが、**pdeファイルのファイル名をそのフォルダ名と同じにする**ということです。Processingファイルはフォルダ名とファイル名が同じでなければ実行できません（多分）。なぜこのような仕様なのかはよくわかりませんが。
ずべこべ言わずその通りにやってみます。

`Processing_test` に `testフォルダ` を作成してその中に `test.pde` を作成しました。
<img width="739" alt="スクリーンショット 2019-09-10 12.37.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324611/440d9830-5860-412a-0600-a2c3a6d2ad0b.png">
そして適当にプログラムを書きます。

```java:test.pde
size(500, 500);
background(255);
```

500×500の白いウィンドウを表示するプログラムを書きました。これを実行します。
実行するには `command + Shift + B` を使うと便利です。

すると、このように表示されます。
<img width="711" alt="スクリーンショット 2019-09-10 12.48.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324611/fe4fc7ad-b89e-b270-45c3-1bff7214cd25.png">
なんと書いてあるかというと
`No build task to run found. Configure Build Task…`
日本語に訳すと
`実行するビルドタスクがありません。タスクを構成する…`
という意味になります。
まあ簡単にいうと、「このままじゃ実行できねえぜ兄弟」みたいな感じでしょう。

# 3. jsonファイルを設定する
このままでは実行できないため、実行できるようにするためのファイルを作成します。

先ほど表示された
`No build task to run found. Configure Build Task…（実行するビルドタスクがありません。タスクを構成する…）`
から
`Create tasks.json file from template（テンプレートからtasks.jsonを生成）`
さらに
`Others Example to run an arbitary external command（Others　任意の外部コマンドを実行する例）`
と進んでいきます。

ここまで進むと自動的に `tasks.json` というファイルが作成されます。
<img width="760" alt="スクリーンショット 2019-09-10 12.56.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324611/f4e1ad7e-7913-b647-9484-4a1aab957da1.png">
このファイルを編集していきますが、これは人によって異なる（下に説明有り）ので、参考程度に筆者のtasks.jsonを載せておきます。

```json:tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run",
      "command": "/usr/local/bin/processing-java",
      "type": "process",
      "args": [
        "--force",
        "--sketch=${fileDirname}",
        "--run"
      ],
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    }
  ]
}
```

このファイルを編集する際に、`command` と `--sketch=${}` の部分に注意してください。
まず、`command` の部分は初めにインストールした `processing-java.exe` が存在するパスを指定する必要があります。筆者のprocessing-java.exeは `/usr/local/bin/processing-java` にありました。これは人によって変わる可能性があるみたいなので、頑張って探してください。

次に、`--sketch=${}` の部分で、`{}` の中を弄ることによってオプションを変えることができます。さまざまなオプションがあるため、ここでは省略します。
この部分も人によって変える必要があるため、[こちらの記事](http://mslabo.sakura.ne.jp/WordPress/make/processing%E3%80%80%E9%80%86%E5%BC%95%E3%81%8D%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/visual-studio-code%E3%81%A7processing%E3%82%92%E6%A5%BD%E3%81%97%E3%82%80%E3%81%AB%E3%81%AF/)を参考にしてください。

# 4. 実行する
`tasks.json` を保存して、`test.pde` を実行します。
すると
<img width="926" alt="スクリーンショット 2019-09-10 15.33.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324611/86fb5737-65cc-f0a8-efe9-8960b6dfdd27.png">
無事にウィンドウを表示することができました。

# 同じようにしたのに動かへんやん
という状況になった方に向けて注意点をおさらいします。

1. processing-java.exeはインストールできているか
2. tasks.jsonのcommandの内容は正しいか
3. tasks.jsonの--sketch=${}の{}内は適切か

この3点についてもう一度よく見直してみてください。
試行錯誤もまた一興。

それではまたどこかで。