読者です 読者をやめる 読者になる 読者になる

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

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

 

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

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

          f:id:wgg00sh:20160821174746p:plain

 

あらすじ

  1. ちょっとProcessingの勉強してる
  2. メモ帳代わりにテキストエディタはMery使ってる
  3. 最近Processingのエディタにちょっと不満感じてた
  4. Meryってどうやらプラグインとかでプログラミング用の補完機能とか色々機能追加できるらしい
  5. じゃあ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が採用されているため、VBScriptJavaScriptでマクロを記述することが可 能。(Mery - 窓の杜ライブラリ)

 

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

f:id:wgg00sh:20160821180902p:plain

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

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

 

 

TO DO

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

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

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

 今回,このうち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種類存在して,以下のように分類できます.

 

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

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

 

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

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

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

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

Language Reference (API) \ Processing 2+

 

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

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

 

結果がこんな感じ

f:id:wgg00sh:20160821213401p:plain

正直だいぶそれっぽくなったんじゃないでしょうか??

 

3.Processingで使用できる単語の補完機能

これは殆ど2と同じです.

Meryの実行ファイルが置かれたフォルダの中に「Ext」というフォルダがあるので,その中に,「(拡張子).txt」という名前のファイルを置くだけで,そのファイルに書かれた単語が全て補完機能に使用できます.

2.で作成したリストを全て箇条書きで書き綴って,ファイル名を"pde.txt"にして,放り込むと,こんな感じに補完できるようになります.

f:id:wgg00sh:20160821213912p:plain

ある程度文字を入力して「Ctrl+Space」を押すと,候補が表示されます.

 

まとめ

まあこんな感じで,ProcessingをMeryで開発することができるようになりました.

Twitterに挙げた動画がこんな感じ

 

しかし,まだ少し問題点があります.

1.オートインデント

Processingにはオートインデントという強力な機能があります.

どんなに汚く書かれたコードでもCtrl+Tを押すだけで,一瞬でインデントを揃えてくれます

 

 f:id:wgg00sh:20160821214319p:plain   f:id:wgg00sh:20160821214354p:plain

 

Meryでこの機能を実現するには,テキストデータを処理するマクロをJSで書く必要があるようです.今回は時間が足りなかったので,また今度実装しようと思います.

 

2.同名のシステム変数と組み込み関数

Processingには時々,システム変数と組み込み関数が同じ名前になっている場合があります

代表的なのが「mousePressed」

f:id:wgg00sh:20160821220618p:plain

"mousePressed"と書くと,マウスがクリックされているかどうかをboolean型で渡しますが

"mousePressed()"はマウスがクリックされたときに呼び出されるメソッドになります.

Meryの強調文字列は指定した文字列全体にそのフォントを適用するので,例えば,「setup()」のような場合,「setup」の部分だけを指定することで括弧に色がつくことを防げるのですが,括弧を除いた文字列がシステム変数と同じになってしまう場合,Meryではその判断をする方法がわかりませんでした.

そのため現状では,システム変数のほうの色に統一しています.

 

3.辞書リストの情報量不足

2.3.でそれぞれProcessingで使われている単語を集めたリストを作成したのですが,圧倒的に情報量が足りていないです.

公式サイトの例のページに書かれていた分では,定数はPIなど5つだったのですが,そこには関数に渡すパラメータの定数が示されていません.

例えば,size()関数は,第3引数にP2D,P3Dといった引数を渡して描画モードを指定することができるのですが,その指定する文字列はsize()関数のページを見なければ書いておらず,すべての関数を見回るのは大変なので現在は妥協して無視しています.

 

配布について

MeryWikiの構文ファイル置き場を見る限り,Processing用の拡張データは見つからなかったのですが,今回作ったものはまだ未完成ですので,配布については今のところ未定です.

 

参考サイト

MeryWiki

Processing を好きなエディタでコーディングしてコマンドラインから実行する - 雑念日記

Language Reference (API) \ Processing 2+

Meryにぜひ登録したい外部ツール・ツール設定編 - komorebikoboshiのブログ

よくある質問 - MeryWiki

Son-of-Obsidian - MeryWiki