• Tweet

• Tweet

Processingの開発環境(PDE)は決して使い勝手の良い物とは言えません。そこで、Sublime Textで開発することができるようプラグイン(パッケージ)を導入します。これにより、コードの補完と実行が可能になります。完全な代替とはなりませんが、一番利用時間の長いコーディングでは非常に威力を発揮します。

準備

以下の、既存のコンテンツによりSublime TextとPackage Control、Processingのインストールが前提となります。

• Sublime Text
• ProcessingとDebug Mode
  

導入

準備

SublimeText用のProcessingプラグインは

Processing Bundle for Sublime Text 2
https://github.com/b-g/processing-sublime

を利用します。パッケージのインストールの他にProcessingのセッティングも含まれますので注意してください。また、ProcessingのセッティングはWindows、OSX、LINUXでそれぞれ違いますので、注意してください。

Processingのセッティング

Processing側でのセッティングをまず行います。私はMacの環境しかもっておらず、他の環境で確かめられませんので、マニュアルに書いてあることを記しています。

Mac OS X

Processing(PDE)を起動し、メニューのTools->Install Processing-javaをクリックしてください。すべてのユーザに対して有効にするか聞かれますので、良ければ「はい」,現在利用しているユーザだけ有効にするなら「いいえ」を押してください。

Windows

コントロールパネル->システム環境変数のウインドウを開きます。PATHの末尾にセミコロン”;”を付け、processing.exeがあるフォルダを追記します。例:;C¥Program files¥Processing-2.0b6¥

Linux

ターミナルから環境変数のPATHに対して、Processingがインストールされているディレクトリを追加してください。

Processing Bundle for Sublime Text 2インストール

このパッケージをインストールする方法は以下の三種類から選ぶことができます。今回は以前導入したSublime Package Controlを利用して、Sublime Text2のコマンドからインストールを実行します。

1. Sublime Package Controlを利用したインストール
2. gitコマンドを利用したインストール
3. 自分でダウンロード＆インストール

Sublime Textを起動し、メニューのTools->Command Palletをクリックし、コマンドパレットを開きます。コマンドパレットから”install Package”を選び、パッケージの中から”Processing”を選び、インストールして完了です。もし、Package Controlがうまく動作しなければ、3.自分でダウンロード＆インストールを自ら実行してください。詳しくは、公式ページで確認できます。

利用する

sketchのインポート

Processingを起動し、sketchを保存します（今回は例としてplugin_testとして保存しました）。保存したsketchは保存名と同じディレクトリ（フォルダ）に保存され、ソースコードはこのディレクトリの中に同名のpdeファイルとして保存されます。このディレクトリをそのままSublimeTextへドラッグ＆ドロップすれば、必要なファイルがすべてインポートされます。インポートされたファイルなどはメニューのView->Side Bar->Show Side Barで一覧表示することができます。

編集

Side Barから編集したいファイルをダブルクリックし、編集可能状態にして編集を行います。この時、画面の右下に”Processing”と表示されていなければ、Processingの機能が有効に使えません。この場合、メニューのTools->Build System->Processingをクリックしてください。もし、Processingがない場合、インストールに失敗している可能性があります。また、Build SystemはAutomaticにしておけば、pdeファイルが開かれれば通常はProcessingの設定が有効になります。

数多くのsnippetが用意されており、リファレンスの多くは途中まで入力することで、候補が絞られます。

例えば、テキストエリアにsetと入力すると、”set”に関わる候補が現れます。このように同じ名前の候補が上がった場合、判断の基準になるのは、候補名の右側、この画像ですとグレーの文字をヒントに選んでください。

また、マウスやキーなどは同一名のsnippetにまとめられていて、mousePressedもmouseXもすべてmouseから呼び出すようになっているので、注意が必要です。

実行

編集が終わったら、保存し、実行します。メニューのTools->Buildを押すと実行されます。もし、エラーが下のウインドウに出た場合、エラーをダブルクリックすることで、エラー箇所付近にカーソルがジャンプすることができます。

おわりに

今回はSublime TextでProcessingのsketchを編集と実行することができる環境の導入方法をまとめてみました。残念ながら、Sublime TextからはDebug Mode for Processingは利用することはできませんので、その場合、再度Processing(PDE)へ読み込み直し、利用してください。

参考ページ

エディタとして Sublime Text 2 を利用する
http://www.d-improvement.jp/learning/processing/tutorial/sublime-text-2.html