Processing のコーディングを快速にするために、外部エディタを利用しよう。今回は Sublime Text 2 というテキストエディタを用いる。Sublime Text 2 はパッケージ（プラグイン）により簡単にカスタマイズができることなどから人気があり、実際使いやすい。

※ Sublime Text 3 の場合の Sublime Package Control のインストール方法を追記（2014年4月16日）

Sublime Text 2 のインストール

公式サイトからダウンロードしてインストールする→ Sublime Text - Download

Processing用パッケージのインストール

最初に、パッケージを管理するための「Sublime Package Control」をインストールし、それを利用して Processing用のパッケージをインストールする。

Sublime Package Control をインストール

  • Sublime Text 2 を起動する
  • メニューの View → Show Console を選択し、コンソールを開く
  • 画面下部に開いたコンソールに、以下のコードをコピペしてリターンキーを叩く
  • 完了後 Sublime Text 2 再起動する

sublime-text-2-processing-1

コピペするコード（Sublime Text 2 の場合）↓

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

コピペするコード（Sublime Text 3 の場合）↓

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

sublime-text-2-processing-2

Package Control から Processing用パッケージをインストールする

  • メニューの Tools → Command Pallete を選択（ショートカットは command+shift+P)
  • Command Pallete が開くのでそこに「install」と入力
    • タイプするたびにコマンドの候補が絞りこまれるので「Package Control: Install Package」を見つけて選択しリターンキーを叩く
  • ダウンロード可能なパッケージが一覧されるので、「Processing」と入力して「Processing」パッケージを絞込み、選択してエンターキーを叩く

sublime-text-2-processing-3

sublime-text-2-processing-4

sublime-text-2-processing-5

これでProcessing用パッケージのインストールが完了。

Processing側の準備（MacOSXの場合）

Processing は version 2.0 Beta 6 以降をインストールしておく。これらのバージョンでないと、Sublime Text 2 で最新のProcessingパッケージが利用できない。

  • Processingを起動し、メニューの Tools → Install "processing-java" を選択
  • すべてのユーザーに対してインストールするか質問してくるのでそれでよければ「YES」を、現在のユーザーだけにインストールする場合は「NO」のボタンを押す

sublime-text-2-processing-6

sublime-text-2-processing-7

これで準備は完了。

※Processing をバージョンアップした際に、Subline Text 2 のパッケージが動作しなくなった場合は、この操作を再実行して"processing-java"を再インストールする。

※WindowsやLinuxについては、こちらを参照

使ってみる

プロジェクトの新規作成

  • Processing は起動していなくても良い
  • Sublime Text 2 を起動する
  • コードを書く前にまずpdeファイル保存する
    • プロジェクト名を決める（例：sketch_test）
    • その名前でフォルダを新規作成する
    • そのフォルダの中に同じ名前で拡張子「.pde」を付けて保存する（例：sketch_test.pde）

sublime-text-2-processing-8

※上記の操作がややこしいという人は、Processingで新規にsketchを保存してから、そのpdeファイルを Sublime Text 2で開くという手順でもよい。

これで入力補完が機能するようになるので、ゴリゴリとコードを書いていこう

入力保管機能を利用してコードを書く

  • setup と入力
    • se とタイプしたところで、候補の中から setup を選択しリターンキーを叩く
  • すると、ひな形となるコードが自動的に挿入される

sublime-text-2-processing-10

sublime-text-2-processing-9

続いてsetup関数の中でsize（ウィンドウの高さと幅）を指定しよう。

  • size と入力
  • si とタイプしたところで、候補の中から size を選択しリターンキーを叩く
  • size(512, 512); が挿入される

このように少ないタイプ数でコードを書くことができる。さらにtabキーを利用することでパラメータも快速に入力ができる。

  • 幅を指定する場所が選択されているので、任意の値を入力する
  • 入力後tabキーを叩くと、高さを設定する箇所が選択されるので、任意の値を入力する

sublime-text-2-processing-12

続けてdraw関数の中にもコードを書いてプログラムを完成させよう。

実行する

  • 保存する（保存した段階のコードで実行される）
  • Build System が「Automatic」になっていることを確認（メニューのTools → Build System） ※Processingを選択しても良い
  • メニューの Tools → Build を選択（ショートカットは command+B)
  • コードが実行される

sublime-text-2-processing-11

参照したページ