エディタとして Sublime Text 2 を利用する

2012年11月23日 / 2025年3月21日更新

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 の場合）↓

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)

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

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

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

Processing側の準備（MacOSXの場合）

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

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

これで準備は完了。

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

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

使ってみる

プロジェクトの新規作成

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

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

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

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

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

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

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

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

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

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

実行する

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

Proessing 学習ノート