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

2012年11月23日

このエントリーをはてなブックマークに追加

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


参照したページ

このエントリーをはてなブックマークに追加

Archives

以下の記事は、2011年度に筆者が大学での授業で利用していた補足資料です。現在、これらをベースに本ウェブサイトを再構築しています。完了するまで一時的に掲載します。


About

筆者: @mathatelle

ジェネラティブ・アート -Processingによる実践ガイド Processing: A Programming Handbook for Visual Designers and Artists Learning Processing: A Beginner's Guide to Programming Images, Animation, and Interaction (Morgan Kaufmann Series in Computer Graphics and Geometric Modeling) Processingをはじめよう (Make: PROJECTS) Built with Processing[Ver. 1.x対応版] -デザイン/アートのためのプログラミング入門 Processing アニメーションプログラミング入門 デザイン言語 Processing入門 - 楽しく学ぶコンピュテーショナルデザイン Processingプログラミング入門―Javaベースのオープンソース統合開発環境 ProcessingでかんたんAndroidプログラミング FORM+CODE -デザイン/アート/建築における、かたちとコード Form+Code in Design, Art, and Architecture (Design Briefs) Generative Art: A Practical Guide Using Processing Generative Gestaltung ビジュアライジング・データ ―Processingによる情報視覚化手法 ARプログラミング—Processingでつくる拡張現実感のレシピ— Arduinoをはじめよう 第2版 (Make:PROJECTS) +GAINER―PHYSICAL COMPUTING WITH GAINER Beyond Interaction ―メディアアートのためのopenFrameworksプログラミング入門 ビューティフルビジュアライゼーション ビジュアル・コンプレキシティ ―情報パターンのマッピング