ProcessingをMeryでコーディングから実行までできるようにした

お久しぶりです，エディタ戦争にはあまり興味のないWGGです

ちょっとProcessingをMeryで開発できるようにしてみました．

(この記事はMeryが実行できるWindows向けの内容です)

　　　　　　　　　　 f:id:wgg00sh:20160821174746p:plain

あらすじ

ちょっとProcessingの勉強してる
メモ帳代わりにテキストエディタはMery使ってる
最近Processingのエディタにちょっと不満感じてた
Meryってどうやらプラグインとかでプログラミング用の補完機能とか色々機能追加できるらしい
じゃあProcesingをMeryで開発できるようにしよう！←今ここ

Processing #とは

電子アートとビジュアルデザインのためのプログラミング言語であり、統合開発環境である。(Processing - Wikipedia)

javaを簡単にして，グラフィック機能に特化した感じの言語です．

実行結果で目に見える部分に直接的に関わる内容以外は極力コードとして書かない，という特徴があります．

例

f:id:wgg00sh:20160821175901p:plain

マウスカーソルを中心に円を描き続けるプログラムです．

2行目...Windowサイズの決定(使用しているディスプレイと同じにする)
5行目...メインループ，drawメソッドが毎秒60回呼び出され続けます．
6行目...画面を指定した色で塗りつぶす(今回は黒)
7行目...マウスカーソルの座標を中心に半径300pixelの円を描く

とまぁこんな感じです．

Mery #とは

プラグインやマクロも利用できる、Unicode対応の高機能かつ多機能なテキストエディター。拡張子別の色分け、単語補完、正規表現対応の検索・置換・ GREP、さらにキーカスタマイズやカラー印刷など、テキストファイルを快適に編集するための便利な機能が数多く搭載されており、原稿執筆やソースコードの編集など幅広いテキスト編集に対応する。また、レジストリを使用しないため、USBメモリなどで持ち運ぶことも可能だ。プラグインには、指定した条件をもとに編集中のテキストを階層表示できる“アウトライン”や、編集中のHTML ファイルを内蔵Webブラウザーでプレビューできる“Webプレビュー”などが用意されている。アウトラインは標準で同梱されており、Webプレビューなどは作者ページにて公開されている。マクロエンジンにはWSHが採用されているため、VBScriptやJavaScriptでマクロを記述することが可能。(Mery - 窓の杜ライブラリ)

僕は普段テキストエディタにこのMeryを使用しているのですが，使い始めた理由は「メモ帳より使いやすいテキストエディタを探してた」だけです，特にプログラミング用に使うことは考えていませんでした．

f:id:wgg00sh:20160821180902p:plain

こんな感じの，普通に使う分にはメモ帳を結構便利にしたって感じのエディタです．

折り返しの文字数を指定できたり，改行文字やタブ文字，ファイル末尾を可視化できるオプションがついています．

TO DO

さて，MeryでProcesingを開発したいのですが，何をすれば達成できたといえるか?です．

大体以下の要素があれば問題なく開発できるでしょうか．

Meryから，Processingのプログラムを実行
予約語などの色付け
Processingで使用できる単語の補完機能
オートインデント

今回，このうち3まで一応実装が完了して，とりあえず使えるレベルになったので記事を書いてみました．

1.MeryからProcessingのプログラムの実行

Meryには，外部ツールを実行する機能が備わっていて，実行したいプログラムのパスを入力しておくと，すぐに起動できます．またコマンドライン引数も自由に指定することができます．

問題は，どうやってProcessingのプログラムを実行するかですが...

殆ど同じことをしている記事が既にあったので参考にしました．

hoshi-sano.hatenablog.com

どうやら，「processing-java.exe」というプログラムを使用することで解決できそうです．このProcessing-java.exeはProcessingをダウンロードすると同じフォルダにデフォルトで入っています．

コマンドライン引数の指定ですが，仕様が変わったのか，上記記事と同じコマンドでは実行できませんでした．

f:id:wgg00sh:20160821195411p:plain

--run コマンドは一番後ろに書かないといけないのかな??

とりあえず従って適当に書き直してみました

f:id:wgg00sh:20160821195622p:plain

どうやらこれで動くみたいですね．スケッチがちゃんと表示されるのを確認できました．

ということで，これをMeryから実行します．

上の画像の通り，Processingは「スケッチ」と呼ばれるファイル集合で1つの作品を構成しているので，編集中のpdeファイルではなく，そのpdeファイルを保存しているディレクトリを引数に渡します．

なので，Meryから「外部ツールの設定」でprocessin-java.exeを追加して...

引数に

--sketch=$(Dir) --run

これで，Meryで編集中のProcessingファイルをすぐに実行できるようになりました．

あとはショートカットキーで本家と同じようにCtrl+Rとか好きなキーに割り当てて，すぐに起動できるようにしましょう．

ただし，本家エディタと違って，保存しないと変更内容が反映されないので注意．

2.予約語などの色付け

Processingのエディタを確認してみると，いくつか文字に色分けがされているのがわかります．

f:id:wgg00sh:20160821210736p:plain

普通の黒文字以外の文字は全部で9種類存在して，以下のように分類できます．

黄色(int Stringなど型名)
薄緑?(void breakなどの予約語)
黄緑?(for switchなどの制御文)
ピンク(displayWidthなど，Processingであらかじめ使用されている変数「システム変数」)
水色(size()など，Processingであらかじめ用意されている関数「組み込み関数」)
太文字水色(setup()など，ごく一部の組み込み関数)
薄茶色?(PI など，Processingで用意されている定数)
紫(文字列)
灰色(コメント)

対してMeryでは，「強調文字」という機能を使うことによって，8種類色を追加+コメント及び文字列に対応する文字を追加できるので，基本文字の他に10色追加することができるようです．

強調文字列に登録するには「表示」→「編集モード」→「編集モードの設定」で設定画面を開き，新しい言語を追加します．「新規作成」でProcessingを追加して，プロパティの部分で，まずは関連付けに拡張子「pde」を紐づけます．これでpdeファイルを開くと自動的にこのプロファイルで強調文字の判断を行ってくれるようになります．

文字列，コメント以外の7つの強調文字を登録していきます．

この2つは「構文」からコメント，文字列と判定する文法を指定することで適用できます．

さて，問題は強調文字へ登録するリストなのですが，Processingで使われている文字列をまとめたリストがどこに存在するかわからなかったので，とりあえず公式サイトのここをコピーしてきて，リスト化しました．

Language Reference (API) \ Processing 2+

また，僕はどちらかというとProcessingよりもVisual Studioの配色のほうが気に入っていたので，少し変更してみました．

あと，強調文字列は現在7個しか使用していないので，Processingには備わっていない，「数値への色付け」を正規表現を使用して8つ目の協調文字列に登録してみました．