Processing環境をシンプルに Visual Studio Code

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください

【4/18開催】VSCode Dev Containersで楽々開発環境構築祭り〜Python/Reactなどなど〜
Visual Studio Codeの拡張機能であるDev Containersを使ってReactとかPythonとかSpring Bootとかの開発環境をラクチンで構築する方法を紹介するイベントです。
https://tech-lab.connpass.com/event/311864/

どもども！平社員の龍ちゃんです。今回は、Processingという言語についての導入記事となっています。Processingについては、こちらの記事で紹介しています。今回は、開発環境の構築について紹介していきます。

1 Processing
2 環境構築
3 終わりに

Processing

ここではProcessingって何？という部分について書いていこうと思います。Processingはプログラミング言語と統合開発環境のセットなのです。得意とする領域はビジュアル作成になります。僕がプログラミングを学びたい人にあったときに進める言語リストの上位に入っています。その理由としては、3点あります。

素早く開発開始できる
情報が多く手に入る
ビジュアル特化なので目に見えた成果が得られる

以上の3点がProcessingを初心者に進める理由ですが、素早く開発開始（環境構築）に関しては次章で解説していきます。「情報が多く手に入る」と「ビジュアル特価なので目に見えた成果が得られる」に関しては字面の通りですね。情報共有が広く行われている言語ですので、調べれば情報はすぐ出てきます。また、簡単な模様であれば環境構築を含めて30分程度で作れるので、達成感が得やすいです。

具体的に僕が、Processingを使用してやったことがあるリストを以下に示しています。

できることに関してはこれからシリーズ記事で公開していこうと思いますので、今回は「Processingはアートやゲームを作ることができるんだ～」程度の認識を持っていただければ良いと思います。

おそらく、この記事にたどり着くまでにProcessingの導入は終わっているかと思いますが環境構築について説明していきますね。

環境構築

Processingの環境を構築する方法としては、ざっくりと2通りあります。

【超簡単】Processing標準のIDE
【超便利】Visual Studio Code
【オンライン】OpenProcessing

標準のIDEを使う場合は、ネットの回線が良ければ5分程度で終了します。Visual Studio Codeの場合でも、30分程度で終わります。Visual Studio Codeをすでに使っている場合では、Visual Studio Codeを使用することを強くおすすめします。「なにそれ？」状態の方は、標準のIDEを使用しましょう。どちらも解説はするので、始めていきましょうか。

Processing標準のIDE

超簡単な環境構築を始めていきます。こちらの場合だと、簡単3ステップで環境構築が終了します。

Processingをダウンロード
ダウンロードファイルを解凍
processing.exeを実行

順を追って説明していきます。「Processingをダウンロード」ですが、こちらのサイトからProcessingを対応するOSのバージョンを選んでダウンロードしてください。ダウンロードしたファイルを解凍して開くと以下のようなファイルがのぞけると思います。この「processing.exe」を開くと標準のIDEを開けると思います。

ここで1つ注意点があります。PCに標準で入っているセキュリティソフトが動作して、警告を出してくるかと思います。Windowsであれば以下の画面ですね。おそらくですが、Macでも似たような画面が出ると思います。思い切って実行してください。

実行方法は、詳細情報をクリックしたら実行ボタン出てきますよ。Macの場合だとこちらに書いてありますが、Ctrlキーを押しながら実行ですね。実行ができて、以下の画面が出れば成功です。

もしこの画面が怖いなと思う方がいましたら次節のVisual Studio Codeでの構築にトライしてみましょう。警告は出ないので…

Visual Studio Code

こちらの環境構築では、前述の環境構築よりもステップが多いです。

Processingをダウンロード
ダウンロードファイルを解凍
Visual Studio Code拡張機能［Processing Language・Processing Formatter］のインストール
ビルドタスクを構築
色々設定

最初の2ステップは標準のIDEと同様の手順になります。Visual Studio Codeの拡張機能は以下の画像の順番で検索してインストールしましょう。赤枠をクリックしたら検索が出てきます。

検索したら以下のロゴと一致しているか確認できたら良いですね。検索するキーワードは「Processing Language・Processing Formatter」の2つです。

「Processing Language」の歯車ボタンをクリックして英語版なら「Extention Settings」をクリックしてください。日本語なら設定とかの表記ですね。

赤枠部分を書き換える必要があります。これは、Processingを解凍した場所のPathを入力する必要があります。人によって変わるので自分のPathを入力してください。

作業用のディレクトリを用意しましょう。「ProcessingProgram」とかにして奥とわかりやすくていいですね。次はビルドタスクを作成する必要があります。作業用のディレクトリをVisual Studio Codeで開いて、「Ctrl+Shift+B」を押すと以下の画面が出てきます。あとは以下の画面に従って手を動かしてみてください。

すると「.vscode」というディレクトリと「tasks.json」というファイルができているかと思います。ひとまず、そのファイルができていれば一段落です。次は「tasks.json」を書き換えていきましょう。

以下に書き換える内容を記述しています。これを「tasks.json」にコピー＆ペーストしてください。command部分の「xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx」を自分のPathに書き換えます。僕の場合だと「C:\\Users\\processing-4.1.1\\processing-java.exe」ですね。

これで実行準備は整いました。では実際にコードを書いていきましょう。Processingの実行ファイルは「.pde」になります。ここで注意点があります。ディレクトリ名と実行ファイルの名前は同一の名前である必要があります。ディレクトリ名を「mainSketch」でディレクトリ内のファイルを「mainSketch.pde」で保存します。これが一致していないと実行できません。