日本ソフトウェア科学会第 31 回大会 (2014 年度) 講演論文集

Processing アプリケーション開発のための視覚的ドメイン特化言語の実装
栗原 あずさ

佐々木 晃

脇田 建

細部 博史

本研究では，アートやデザインのためのプログラミング言語である Processing をビジュアルブロックによって記述するドメイン特化言語 (以下 DSL) の開発について述べる．Processing は視覚的な表現を平易なコードで実現できるため，主に芸術・教育分野においてデザイナや学生によって利用される．しかし，学生の多くは非プログラマであるためプログラミングの理解にはコストがかかる．そこで，ブロックベースの DSL を用いて Processing のコードを記述する．ブロックは自然言語で表現され，色や形状で視覚的に区別されるため可読性が高い．ブロックを組み合わせることで視覚的・直感的なコーディングが可能になり，プログラミングの習得にかけるコストを削減できる．開発環境は WEB アプリケーションとして提供されるため，導入にかけるコストも少ない．また，コーディングから実行まで一つのウィンドウで行うため，テストや修正が容易である．

ングを行うことで，ユーザが表現したいものと直接関1 はじめに係のない構文エラーなどのデバッグに大きな時間を割

Processing [3] は，Java をベースに開発されたアーくことになる．

トやデザインのためのプログラミング言語である．

本研究では，Processing のコードをテキストではProcessing は簡潔な表現で視覚的な結果を得られるなく視覚的なブロックで記述するドメイン特化言語ことから，そのユーザは幅広く，アーティストやデザ（以下 DSL）を作成した．以前の研究 [9] では，様々イナだけでなく大学生や高校生にもプログラミングなプログラミング言語に変換可能なブロックを作成教育の一環として用いられている．学生の多くは非プした．本稿では，変換する言語を Processing に限定

ログラマであり，初めて触れる言語が Processing でし，実行環境を内包した，開発環境の設計と実装につあるという学生も少なくない．こういった初学者がプいて述べる．

ログラミングを学ぶ際，よく挙げられる問題に，(1)DSL にはブロックのエディタ，ブロックから Pro-プログラムのフローが理解できない，(2) 関数のはた

cessing のコードへのトランスレータおよび Process-らきを理解できない，(3) デバッグができない，など

ing の実行環境が含まれており，WEB アプリケーがある．これらの問題が解決できないままプログラミションとして提供される．ブロックベースの言語にはScratch [6] や blockly [4] などがある．ユーザは，関Implementation of a Visual Domain-Specific Language for Developing Applications in Processing.
Azusa Kurihara, 法政大学大学院情報科学研究科, Graduate School of Computer and Information Sciences,Hosei University.
Akira Sasaki, Hiroshi Hosobe, 法政大学情報科学部, Faculty of Computer and Information Sciences, HoseiUniversity.
Ken Wakita, 東京工業大学大学院情報理工学研究科,
Graduate School of Information Science and Engineering, Tokyo Institute of Technology.

数や命令をキーボードで入力する代わりに，パレットからブロックをドラッグ&ドロップし，LEGO ブロックのように直感的に組み合わせることでプログラミングを行う．ブロックは関数や命令として構文的に完成しているため，構文エラーは原理的に発生しない．
これを用いて，前述の三つの問題を，(1) ブロックの形状によって分岐や繰り返しなどの流れが可視化されている，(2) ブロックのはたらきが日本語で記述されているため，関数や変数の意味が取りやすい，(3)PDE と Sublime Text は入力補完やデバッガなどコードに変更があるたびに実行結果を更新すること

IDE の基本的な機能を備えているが，これらは関数で命令やパラメータの意味を取りやすくする，という名やプログラムのフローなどを理解しているプログ

方法で解決を図る．

ラマのための機能である．従って初学者がこれらの機

また，本 DSL は Processing のコードの可視化だ

能を効果的に利用することはできない．

けでなく，Processing の機能を制限・拡張した．配列やテーブルなどの高度なデータ構造など初学者には

2. 2 実装

不要な高度な機能を排除し，コードのテンプレートをProcessing は Java の API として実装されている．

用意することでプログラミングモード (2. 3 節) を一

Processing のコードは PDE のプリプロセッサによっつに限定した．Processing の機能を制限することでて Java や Android，Python などのコードに変換さ言語設計を単純化し，理解すべき内容を最小限に抑えれる．また，Processing から派生したプロジェクトた．また，Processing のプログラミングで頻繁に用に processing.js がある．processing.js は JavaScript

いられるコードのパターンを，「tips」として一つのブのライブラリとして実装され，HTML5 のキャンバスロックにまとめることで，単なる関数のブロック化で要素に実行結果を表示する．

はない，初学者の利用に特化した Processing の拡張を実現した．
初学者が視覚的 DSL を用いることで Processing のしくみを理解すると共に，順次実行，分岐，反復など

2. 3 言語仕様
Processing には static（基本），active（連続），Java の三つのプログラミングモードがある．のプログラムの基礎的な動きを理解することで，テキstatic モード: Processing で最も単純なモード．

ストベースの Processing や他のプログラミング言語イベントや関数呼び出しは存在せず，コードは命への移行を容易にする．

令のみで構成される．すべての命令が一度だけ実行されるため，静止画を得るにはこのモードが多2 Processing
本節では Processing の開発環境，実装，言語仕様について述べる．

く利用される．

acive モード:

setup()， draw() の二つの関数を利用できる． setup() はアプリケーションの開始時に一度だけ呼び出され， draw() はデフォ

2. 1 開発環境

ルトでは 1/60 秒に一度自動で呼び出される．マ

Processing は Processing Development Environ-

ウスおよびキーボードのイベントハンドラが実

ment (以下 PDE) と呼ばれる IDE を備えている．

装されており，主にアニメーションやインタラク

PDE はテキストエディタやメッセージエリアなどをティブな表現のためのモードである．

備えており，実行ボタンを押すことで別ウィンドウJava モード: 本来の Java にもっとも近い記述がに結果が表示される．PDE には PDE X [5]，Tweak

可能なモード．アプレットなど Java とほぼ同様[7] などのモードが存在する．これらは既存の PDEの機能を利用できる.

を拡張し，入力補完やエラーチェック，実行中のパラメータ変更などを可能にした．

また，processing.js では日本語の描画が可能である

Sublime Text [8] にも Processing のプラグインがが，PDE は日本語入力をサポートしておらず，公式日存在する．Sublime Text はテキストエディタとして本語リファレンスも存在しない． Processing のコーも豊富な機能を備えており，様々な言語のためのプラド自体も関数や変数名が英語で記述されているため，グインが存在する．Processing のプラグインを導入

非英語話者には可読性が低い．

することで，コードの入力補完を可能にする．

図1

DSL の外観．左から，パレット，ワークスペース，ポップアップ（キャンバスとプログラム）．

本稿の DSL は，ブロックベースの視覚的言語か

3 視覚的 DSL の設計

ら Processing のコードを生成する外部 DSL であり，本節では，ブロックを用いて Processing のコード

JavaScript のライブラリである processing.js を内部を記述する視覚的 DSL の設計について述べる．

DSL として用いて Processing のコードを実行している．

3. 1 内部 DSL と外部 DSLDSL の対義語は，C 言語や Java などの汎用言語である．汎用言語は多くの機能を持ち，様々な分野の問題解決に利用される．対して DSL は限られた分野

3. 2 画面レイアウト
視覚的 DSL の画面は，パレット，ワークスペース，ポップアップに分割される．図 1 に外観を示す．の問題解決に利用される．DSL は目的の分野に関すパレットには現在利用できるブロックが色ごとに表る様々な命令を備えているため，汎用言語と比較して示されている．ブロックを，変数に関係するもの，フコードの量は少なく，よりプログラミングしやすい．

ローを制御するもの，イベントハンドラなどに分類しDSL には内部 DSL と外部 DSL がある．内部 DSL

色分けすることで，プログラム全体の可読性を高め

はホスト言語の内部で完結する DSL である．ホストる．パレットを見ることで用意されている関数を把握

言語の API やライブラリとして実装され，ホスト言できるため，リファレンスとしての意味も持つ．

語と同じ言語で記述される．Processing は Java の，ユーザは，ブロックをパレットからワークスペース

processing.js や jQuery は JavaScript の内部 DSL とにドラッグ&ドロップする．ワークスペースにおいて言える．外部 DSL は，ホスト言語のコードを生成すブロックを組み合わせたり切り離したりすることでプる DSL であり，ホスト言語とは異なる言語で記述さログラミングを行う (3. 3 節)．コンパイルはコードにれる．Ruby に対する Ruby on Rails などが例に挙げ変更があるたびに自動で行われる．コードの変化がリられる．外部 DSL を用いることで，ホスト言語を直アルタイムでポップアップ内部のキャンバスに反映さ接書くよりも少ないコードで同じ結果を実現できるたれるため，実行結果を確認しながらパラメータを変め，抽象度や可読性が高まり生産性の向上に繋がる．

更できる．同時に，予期しない実行結果になった際，揃った状態で提供されるため，構文エラーが発生しにくい．また，ブロックを引数の個数や意味を含めた自然言語で表現することで，ユーザに関数や構文の使い方を説明する．例えば，for 文をブロックで表現する
際には，「n 回繰り返す」というブロックに抽象化でき
図2

ブロックの形状の種類．左上からスタート，コマンる．これによって，ユーザはカウンタなどの専門的なド，右上からアウトプット，ルールブロック．

内容に踏み込むことなく繰り返しを利用できる．
プログラムを構築するには，ワークスペース中でバグの箇所の特定が容易である．

ブロックを組み合わせる．これによってコードのパラポップアップには，実行結果のキャンバス，そしてメータの設定や，命令の追加などを行う．パラメータ

ブロックから変換された Processing のコードを表示の設定には，ブロック内のインプットを用いる．図 2

する．実行結果だけでなくコードも確認可能にするこでは，「24」，「true」がインプットに入力されている．とで，Processing の文法や関数，そしてプログラミ

パラメータの設定は，インプットへ直接記述するだけ

ングそのものを理解する手助けとなる．

でなく，カラーピッカー等の GUI での指定，またはブロックを埋め込むことで実現できる．これによって

3. 3 ブロックを用いたプログラミング

キーボードからの入力を更に減らすとともに，入力の本 DSL では，テキストベースではなく，ブロック選択肢を狭めることで型や値域のエラーを減少させベースでのプログラミングを実現した．

る．ブロックを埋め込む際には，インプットの形状にブロックを用いることで，ドラッグ&ドロップで命よって埋め込むことができるブロックの形が変わる．

令を容易に追加および削除可能であり，キーボードのこれによって，文字列や数値，真偽などの型を区別す

入力に不慣れなユーザであってもマウス操作と最小ることができる． 命令の追加は，他のブロックの直限のパラメータ入力でプログラミングを実現できる．

後に追加することができるほか，分岐や繰り返し命令ブロックで記述することで，初心者が陥りがちなミスのブロックにおいては，ブロックの中にも追加するこを減らし，効率的に Processing のアプリケーションとができる．

を開発できる．

ブロックにはスタート，コマンド，アウトプット，既存のブロックベースの言語には Scratch や blockly

ルールブロックなどいくつかの形状がある（図 2）．などがある．これらは，ブロックベースの言語および形状は，ブロックの上下や内部に凹凸があるか否かでその開発環境であり，子供のためのプログラミング学分類される．コマンドブロックは上下に他のブロック習ツールである．特に blockly は，ブロックで記述しを繋げることができるが，スタートブロックはイベン

たプログラムを JavaScript や Python 等，複数の言トハンドラなどの関数名にあたるため，下にのみブ語に変換できる．対して，本稿で述べる視覚的 DSLロックを接続できる．アウトプットブロックは凹凸をは，Processing とその初学者に向けて特化した環境持たず，他のブロックに埋め込むことでコードに追加を実現した．

される．

ブロックは様々な命令や変数を意味する．ブロック
を日本語で記述することで，英語が苦手なユーザにも3. 4 プログラムのテンプレート読み書きがしやすくなる．これにより，単なる関数名

2. 3 節では三つのプログラミングモードについて述や変数名の日本語化ではなく，ブロックのはたらきや引数の意味を示すことができる．テキストベースで記

べた．
本 DSL では，単純化のためにプログラミングモー述する際には，セミコロンを忘れるなどのミスで構ドを active のみに限定する．active モードにおいて文エラーが発生していたが，ブロックは構文の要素がも， setup() のみに命令を記述することで静止画を描画できるため，static モードと active モードを統合する．本稿で想定するユーザは Processing 初学者
およびプログラミング初心者など，Java 未経験者が主であるため，Java モードは使用しない．

active モ ー ド で は ，最 初 に 一 度 だ け 実 行 す

図3

tips

る setup() と，デフォルトでは 1/60 秒ごとに実行する draw() の二つに描画の方法が分かれる． Pro-

4. 1 概要

cessing 初心者は setup() と draw() のはたらきを直本視覚的 DSL は HTML，JavaScript および CSS感的に理解できず，考えていたものと違う結果になるで実装され，WEB アプリケーションとして提供さユーザも多い．また，関数の外側には変数定義以外れる．これはブラウザ上で動作し，インストールやの命令を記述できない．Processing 初学者は，activeダウンロードが不要であるため，導入が容易である．

モードと static モードの混同によるエラーをよく発

本実装にはブロックのプログラミング環境，ブロッ生させる．そこで，正しいコードを直感的に記述できクから Processing のコードに変換するトランスレー

るよう DSL で支援する．

タ，およびブラウザで Processing のコードを実行すプログラム全体のテンプレートは以下の通りである．

る processing.js が含まれている．

// 変数定義
void setup(){// setup の本体

4. 2 ブロックの作成と変換ブロックの作成には，その色と形状，はたらきを}示す日本語のラベル，そして変換規則を定義する必

void draw(){

要がある．この時，アウトプットブロックは変数に，frameRate(n);それ以外のブロックは一行以上の命令に変換される．

// draw の本体

ブロックは変換規則を持つ．例えば，図 2 の「もし}// イベントハンドラなどの関数

true なら」というブロックはif(true){

関数定義を行う setup() と draw() などのブロック
は，「はじめに」「一秒に n 回実行」と日本語でそのは// if 文の内容}たらきを記述し，初めからワークスペースに配置すというコードに変換される．この時，if 文の条件

る．これにより，テンプレートの構造をユーザに示す

式 true は，ブロックのインプットに書かれたものにとともに，Processing のしくみをユーザに理解しや置き換えられる． { }の中のコードは，ブロック内すい形で表示する．

部の凸に接続されたブロックの変換結果で置き換え

また，関数本体に記述されていないコマンドブロッられる．このように，Processing のコードをテンプクは無視され，Processing のコードには反映されなレートとし，引数や関数の本体などを記述すること

い．これにより，プログラミングモードの混同を避で，より複雑なプログラムを作成する．

け，構文エラーを予防する．

また，あらかじめ関数のパラメータを埋めたコードに変換することで，より具体的なはたらきをするブ

4 視覚的 DSL の実装

ロックを定義できる．これにより，関数をただ呼び出

本節では，視覚的 DSL の実装について述べる．

すだけでなく，プログラムの中でよく用いられるコードのパターンを，「tips」という一つのブロックにまとめることができる．例えば，図 3 の「n 回繰り返す」
ブロックは

for(int i=0;i<n;i++){// for 文の内容}

りやすくなる．ブロックの形は型や命令を区別し，エラーが出る繋ぎ方ができないことから，構文エラーが起こりにくい．また，プログラムに変更を加えるたという for 文に，「マウスの xy 座標を表示する」ブ

びに実行結果に反映され，コンパイルが不要である．

ロックはこのため，PDE よりも少ないアクションで実行結果text("("+mouseX+","+mouseY+")",0,10);というコードに変換される．
また， draw() にあたる「一秒に n 回実行」
（図 2）

を確認でき，かつプログラミング中にコードのはたらきをリアルタイムで観察できるため，デバッグがより容易になる．というブロックも tips と言える． draw() という関ブロックの定義においては，Processing のコード数名だけは，ユーザはそのはたらきを理解できない．

を単純にブロック化するだけでなく，for 文などを抽そこで， frameRate(n); という命令をブロックに含象化し，より高度な機能を持つブロックを作成した．

めることで，より明示的な表現のブロックを実現した

これにより，プログラムの記述に使われるブロックの（3. 4 節）．

数は少なくなる．Processing のプログラムによく使こういったブロックを用意しておくことで，ユーザわれる tips をブロックとしてあらかじめ提供するこがこれらを再定義する必要が無くなるため，プログラとで，ブロックの種類が増え，同時に DSL の機能がム全体のブロック数が減り可読性が高まる．

豊富になる．
本稿ではブロックを Processing のコードに変換し5 サンプルプログラムたが，ブロックの変換規則，日本語の表記，プログラ

図 1 にて記述したブロックについて述べる．4. 2 節

ムのテンプレートを変えることで，他の言語に対するにおけるプログラム全体のテンプレートを元に，変ブロックベースの DSL を作成することができる．例

数定義，setup の本体，draw の本体の三か所を埋めえば，processing.js と同様に 2D や 3D の描画に優れる．今回のプログラムにはイベントハンドラのブロッた Data-Driven Documents （D3） [1]，three.js [2]クを用いない．
変数定義では，float 型変数 x を定義する．単純化などの JavaScript のライブラリや，JavaScript そのものもブロックで表現することが可能である．のため，ユーザが定義する数値の型は全て float，初ブロックという GUI はプログラミングに慣れて期値は 0 にする．setup の本体には，キャンバスの色いないユーザのためのものであり，Processing もまと大きさ，そして draw() で描画する線の太さを設定た学生など非プログラマがユーザに含まれている．

する．キャンバスの色は GUI のカラーピッカーを用

Processing をブロックで記述し，コードと実行結果いて指定できる．draw の本体では， draw() の呼びを見比べることができる環境を作成することで，ブ出しのタイミングを 1/24 秒に設定し，線を描画する．

ロックの記述で物足りなくなったユーザがテキスト

その際，線を引くたびにその色と位置をランダムに変ベースの記述に移行しやすいようにした．

化させる．乱数は「ランダムな値:0 n」で得られる．

今後の課題に，プログラミング教育に特化した視覚

線の色の指定には，キャンバスの色と同じく GUI を的 DSL の実装と，より大規模かつ複雑なプログラム用いることもできるが，このプログラムでは引数に乱の記述が挙げられる．

数を用いるため，「線の色を R(red)G(green)B(blue)

プログラミング教育においては，段階を踏んで命透明度 (alpha) にする」 というブロックを使用した．

令を理解し利用する．本 DSL では，図形の描画のほか，分岐，繰り返し，変数の定義といった機能が利用

6 考察と課題できる．これらの機能に慣れたユーザに配列やマク

本視覚的 DSL において，ブロックは日本語で表現ロ機能を提供することで，より複雑なプログラムをされるため，関数のはたらきや引数の意味などが取記述可能にする．また，プログラムの文脈によってブロックの利用の可否を切り替えることで，文脈に沿わ能の作成と，Processing 以外の言語での DSL の作成ないブロックを排除する．例えば，キャンバスの 2Dが挙げられる．プログラミング教育に特化した DSLモードと 3D モードの切り替えや，RGBA モードととは，段階を踏んで様々な関数や命令に触れることがHUE モードの切り替えによって，二種類のブロックでき，プログラマのレベルやプログラムの文脈ごとの混同を避け，エラーを防ぐ．にブロックを利用可能か設定できるものである．まプログラムの規模が大きくなり複雑化するにつれ，た，以前の研究 [9] で述べた視覚的 DSL では，ブロッブロックの数は増加する．ワークスペースの広さに

クの日本語表記と変換規則を新たに定義することで，は限界があることから，ブロックの数を減らし，長いProcessing 以外の言語をブロックで表現することがコードにおいても可読性の高さを維持する必要があできる．これにより，Processing 以外の言語にも特る．以前の研究 [9] では，マクロブロックを定義可能化することが可能な，より汎用的なブロックベースのにすることで，ブロックの表現の幅を広げた．マクロ言語の作成を支援する．

ブロックは，いくつかのブロックをまとめて一つのブロックとして表現する．Processing のコードにおい謝辞 本研究は JSPS 科研費 25540029 の助成を受けたものである．ては，マクロは新たな関数の定義として実装される．
参 考 文 献7 おわりに本稿では，Processing 初学者を対象とした，Pro-cessing のしくみおよびプログラムの基本的な構造を理解するための視覚的 DSL の設計と実装について述
べた．

Processing のコードに変換可能なブロックを用いてプログラミングを行い，コードの変更はリアルタイムで実行結果に反映される．このため，デバッグにおいては問題となる箇所の切り出しが容易になる．
ブロックの作成においては，高度な機能を排除し，頻繁に使用されるコードを一つのブロックとして定義した．これにより，単なる Processing のコードの可視化ではなく，初学者の Processing の理解に特化した DSL を作成した．
今後の課題には，プログラミング教育に特化した機[1] Bostock, M.: D3.js, 2011. http://d3js.org/.
[2] Cabello, R.: Three.js, 2010. http://threejs.
org/.
[3] Casey Reas, B. F.: Processing.org, 2001. https://www.processing.org/.
[4] Fraser, N. et al.: blockly - A visual programming editor, 2012. https://code.google.com/p/blockly/.
[5] Moharana, M.: PDE X, 2013. https://github.
com/processing/processing-experimental.
[6] Resnick, M. et al.: Scratch: Programmingfor All, Communications of the ACM, Vol. 52,No. 11(2009), pp. 60–67.
[7] Sasson, G.: Tweak Mode, 2013.
http://galsasson.com/tweakmode/.
[8] Skinner, J.: Sublime Text: The text editor you’ll
fall in love with, 2008. http://www.sublimetext.
com/.
[9] 栗原あずさ, 佐々木晃, 脇田建: ビジュアルブロック
を採用したドメイン特化言語とその開発ツールの実現手法, 信学技報, Vol. 113, No. 489(2014), pp. 97–102.