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

★★★ お知らせ ★★★

◆ エンジニア業務環境アンケート結果 ◆
エンジニアが自分の働き方にどういったことで満足していて、不満を感じているのか、働きたい会社像として何を求めているのか、業務環境調査を実施しました。ぜひご覧ください。
アンケート結果はこちらから

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

Processing

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

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

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

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

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を開けると思います。

Processing展開後

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

Processing警告画面

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

Processing画面

もしこの画面が怖いなと思う方がいましたら次節の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拡張機能サンプル

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

ProcessingLanguage設定

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

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

Config作成

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

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

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

保存して「Ctrl+Shift+B」を押すと実行できれば成功です。もし実行できない場合は以下の2点をチェックしてみてください。

  • ディレクトリとファイルの名前が異なる
  • Path設定が異なる

OpenProcessing

OpenProcessingについて

サイトはこちらです。こちらでは、オンラインのエディタが存在しています。登録まで書くと大変長い記事になるので、とてもわかり易い記事を見つけたので共有しておきます。

終わりに

お疲れ様でした。これにて環境構築が終了しました。今後は、この環境を使って開発を進めていきます。環境構築はあらゆる言語で必要となっていて、最初の障壁になります。標準のIDEの場合だと面倒な設定は必要ないので楽ですね。

次の記事はProcessing開発における基礎知識パックの予定です。年末の遊びの結果でもありますのでよろしくお願いします。前回の「Google Apps Scripシリーズ」はこちらから。

それではいい開発Lifeを~





ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!


ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる