Sublime TextでProcessingのsketchを作成する

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

準備

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

導入

準備

SublimeText用のProcessingプラグインは

https://github.com/b-g/processing-sublime

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-java

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の設定が有効になります。

filetype

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

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

processing-set

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

実行

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

おわりに

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

参考ページ

http://www.d-improvement.jp/learning/processing/tutorial/sublime-text-2.html

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

Sublime TextでProcessingのsketchを作成する” への7件のコメント

  1. 参考にさせて無事にインストールまではすることができたのですが、上手くビルドができません。環境変数も設定できていますし、補完機能も有効になっているのでインストールはできているのですが。。。
    以下のようなエラーがでました。

    [Error 2] The system cannot find the file specified
    [cmd: [u’processing-java’, u’–sketch=C:\\Users\\admin\\Desktop\\Laboratory\\processing\\extractUsers’, u’–output=C:\\Users\\admin\\Desktop\\Laboratory\\processing\\extractUsers/build-tmp’, u’–run’, u’–force’]]
    [dir: C:\Users\admin\Desktop\Laboratory\processing\extractUsers]
    [path: C:\Program Files\Common Files\Microsoft Shared\Windows Live;C:\Program Files (x86)\Common Files\Microsoft Shared\Windows Live;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Intel\Services\IPT\;C:\Program Files (x86)\Common Files\Lenovo;C:\Program Files (x86)\Windows Live\Shared;C:\SWTOOLS\ReadyApps;C:\Program Files (x86)\OpenNI\bin;C:\Program Files (x86)\PrimeSense\NITE\bin;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;C:\develop\processing1.5.1]
    [Finished]

    エラーを見る限り、ファイルを発見できていないということはわかるのですが・・・
    解決策をご教授お願いしできないでしょうか。
    当方の開発環境はWindows764bitHomePremiumSP1です。
    お手数とは思いますが是非お願いします。

    • ogawaさんこんにちは。
      エラーを拝見した所、使っているProcessingは1.5.1ではないですか?
      PackageControllerからインストールすると、最新のProcessing Bundle for Sublime 2がインストールされると思いますが、その場合、2.0b5以降対応となっているようです。
      それ以前のバージョンは、同パッケージのREADME.mdを読む限り
      >If you have to stick for some reason to an old Processing verion e.g. 1.5.1 you can use the old version of this bundle.
      古い1.5.1に対応したバージョンをインストールする必要があるようです。

      下記のURLは古い1.5.1に対応したバージョンのページです。インストールしてみてはいかがでしょうか。
      https://github.com/b-g/processing-sublime/tree/v1.0_Processing_1.5.1

      • お早い返信、ありがとうございます。
        教えていただいたバージョンのものを解凍して
        ~\Sublime Text 2\Packages\Processing
        にコピーして試してみたのですが自動補完はされるもののビルドして実行することができなくなってしまいました。。。
        (エラーも出なければ実行結果もでません)

        もう少し格闘してみたいとおもいます。
        貴重な情報をありがとうございました。

        • 追記です。

          processingのv2をダウンロードしてpathに追加したところ無事に動きました。
          これでストレスフリーで開発ができそうです!
          本当にありがとうございました:D

          Ogawa

  2. 二人対戦のテニスゲームを作りたいのですがどのよーに作ればいいとおもいますか?
    参考にプログラムなどを作ってもらえれば光栄です

    • 伝統的なPONGというゲームがありますので、そちらを参考にしてください。
      検索するとすぐみつかります。

コメントを残す

メールアドレスが公開されることはありません。