情報処理学会 インタラクション 2015
IPSJ Interaction 2015

A28
2015/3/5

TheareFourze:舞台演出手法を取り入れた CG とセンサ連携を実現する Processing 言語向けライブラリの提案
樫村 健人†1菅谷 みどり†1

概要：近年マイコン Arduino と連携しやすい言語および総合開発環境である Processing が注目されている．これらを使うとセンサと CG の連携アプリケーションを書くことができるが，それについての抽象モデルや開発環境は十分といえるものがなく，初心者にとっては難しいものとなっている．TheatreFourze は CG とセンサの連携を舞台演出手法を取り入れ解釈しやすくしたライブラリである．本論文で提案するライブラリの機能，実例，および行った評価実験の考察を述べる．

TheatreFourze: the Proposal of Library of Processing forSensors and CG, which Accepts the Model of Theatrical Stage
Production
KASHIMURA KENTO†1 SUGAYA MIDORI†1

Abstract: Recently, total development environment Processing, which is known to be easy to connect withmicrocomputer Arduino, is gathering attention. Using Arduino and Processing, we can make an application ofsensor and CG, but there is not good abstract model or enough development environment, and it is difficult for
beginners to make such an application. TheatreFourze is a library which accepts the model of theatrical stage
production for connection of sensor and CG.
In this paper, we state the function of library, some example, and examination of the experimentation.

1. はじめにムを書く経験が浅い場合，コードが複雑化しやすく，可読性の低下や，コードの再利用性が低くなる問題がある．．

近年，マイコンの一つである Arduino[1]の普及により，本来であれば，Processing は，キーボードやマウスなどセンサを用いたハードウエアデバイスと，コンピュータとの入力イベントを抽象化し，扱いやすくしていることから，を連携させ，様々なインタラクティブデバイスが開発されこうした問題は軽減されるべきであるが，多様なセンサかている.また，演習授業などにも取り込まれ[2]，教育用のらの入力イベントを利用しようとした場合，イベントと教材としても利用されている．Arduino は，マイコンを用CG の関連が分かりづらくなる問題がある．

いた開発の敷居を下げ，ハードウエアを扱いやすくする一本研究では，問題を解決するために，プログラミング経方で，既存のホストコンピュータ上のソフトウエアで制御験が比較的浅い開発者にも分かりやすいメタファを与え，が可能である．そのため，ホスト側のコンピュータと連携それを用いた開発のためのライブラリを提供することによした様々な表現が可能となっている[1]．こうした中，我々

り，センサから得られる実世界の情報と CG によるプログ

はマイコンから取り込んだセンサ情報を,コンピュータ上ラミングをしやすくすることを目的とした Processing 言のコンピュータグラフィックス（以降，CG）と連携させる語上で動作するライブラリを提案する．本提案では，提案環境として Arduino と Processing[3] を用いた新しいデするモデルとそれに基づくライブラリである

ジタルデバイスを提案した[4]．マイコンを用いて様々なセTheatreFourze の設計とその評価について述べる．本論文

ンサ入力を CG に応用することは，現実世界の情報と，コンの構成は以下の通りとなる．まず 2 節にて，センサと CGピュータの中の仮想情報である CG による表現の多様化にの連携アプリケーションの開発における課題をまとめ，3つながり，新しいインタラクションデバイス開発の可能性節にて提案を行う．4 節にて具体的な設計を述べ，5 節にてを拡大すると期待できる．

実験と評価を示し,6 節で全体のまとめを述べる．

しかし，マイコン上のセンサ入力を CG に対応づけて扱うためには，センサ入力ごとのイベントを CG に対応づけるた

2. 課題

めのコードをその都度記述する必要がある．特にプログラ

2.1 既存研究†1 芝浦工業大学 工学部
Shibaura institute of Technology© 2015 Information Processing Society of Japan

センサを用いた開発環境として，様々なセンサプラット

258

フォーム(センシングプラットフォーム) が提案されていードとなる問題が発生した. こうした問題は，コードの可る[5][6]．FreeMotion が提供するセンサプラットフォーム

読性の低下や再利用性の低下につながる．

は[5] センサを搭載したハードウエア(多くの場合スマー

このように，if 文を大量に記述しなくてはならなくなる理トフォン)と開発支援のための API やドライバのセットと由として，値域が異なるセンサを複数使用し，それに合わなっている．つまり，開発者が選んだセンサを用いることせて CG を変える処理の記述をするには分岐やケース文をはできないため，多様なセンサ入力を扱うための開発を行多用しなくてはならないことが要因の一つと考えられる．

う際には不向きである．

こうしたセンサ値を利用したイベント処理の記述は，初心また，Processing[3]は Java をベースにし，図形描画に者にとって難しいものとなってしまうことが多い．

特化した言語および総合開発環境である．Processing の特Processing ではキーボードやマウスのイベントは抽象化徴として Java のグラフィックライブラリなどと比較して，されているが，センサ入力と CG を組み合わせた処理の汎イベントを待ち受けるイベントリスナのサーバをプログラ

用化は，まだ達成されていない．

マが記述する必要がない．複数のスレッドを切り替えて，イベント処理をするためには，マルチスレッド処理を意識する必要があるが，こうした部分は Processing では隠蔽

3. ライブラリの提供
3.1 研究の目的されており，イベント処理を初心者でも簡単に扱うことが本研究では，上記の問題を解決するために，まず，多様できる利点がある. しかし Processing は，イベントを扱なセンサ入力を一般化し，CG を連携させるためのクラス

うマウスの位置座標の取得が mouseX, mouseY といったを設計し，そのクラス内でのメソッドを分かり易く定義す短い記述で行えることでマウスの状態を扱うことは簡易化

ること，この一連のフレームワークをライブラリとして提されているが，多様なセンサ入力を標準的に扱うための方供することで，問題を解決するものとした．

法は明示されておらず，開発者がその都度，センサ入力と，センサと CG を組み合わせについては，その連携を扱うCG の対応づけを書かなくてはならない問題があり，これための抽象モデルを検討した結果，舞台演出というメタフにより，センサ入力を用いたプログラミングの難易度があァを取り入れたクラス設計を行うものとした．開発者は，がってしまう問題については，具体的な解決策は提示され単純な対応づけ，ということだけではなく，概念的な統合ていない．

に関するイメージを持つことで，連携部分を記述しやすくすることを目指した．これは初心者のセンサと CG の連携

2.2 問題このように，多様なセンサ入力を可能とする Processing

アプリケーションの理解を助け，ライブラリにより短いコードでの連携実現およびコーディングにかかる時間の短縮

言語の開発環境でも，センサ入力と CG との連携機能を有を目的としている．

していないため，開発者は連携部分のプログラムを自分で3.2 舞台演出メタファを取り入れたクラス設計書く必要がある．

本研究の基本アイディアとして舞台演出のメタファを取り入れたクラスを設計する．まず，舞台演出について述べる．

表１ センサ入力を扱うコードの一部
hl = arduino.digitalRead(inputA8);
sun = arduino.analogRead(input1);

舞台演出においては，演出家が役者をもとに舞台を構成す

if (hl==1) lightsw=1;
if (hl==0&&lightsw==1) {if (houselight==1)houselight=0;
else houselight=1;
lightsw=0;}
if (houselight==0) {if (sun>150) light=0;
else light=1;}

ン開発では，センサからの入力イベントに応じて，個別のる．舞台では，役者ごとに，演技ときっかけを個別に演出する．これに対して，CG とセンサの連携アプリケーショ振る舞いをする CG がある．
入力に応じて，振る舞いを変更する，という部分は，キューに応じて，演技を変更する舞台での役者の振る舞いに類似ていることから，センサによって振る舞いを変更するCG を役者とみなすものとした．役者の振る舞いを演技，入力されるセンサイベントを舞台におけるきっかけ(Cue)と考えて，全体の舞台を構成すると考えることで，連携ア具体的例をあげて説明する．我々が開発したアプリケープリケーションの開発を行うことができないかと考えた．

ションにて[3]，光センサとタクトスイッチを用いて CG のつまり開発者が，あたかも演出家であるかのように役者明るさを変える処理を行ったコードを表１に示した．処理(CG)ときっかけ(センサイベント)を組み合わせることで初を記述するために，常にマイコンの入力値を変数に多応さ心者であっても連携のイメージをしやすくすることを目指せ，それに対応する CG の動作を記述する必要があるため，した．

12 行で 5 つの if が出現するという非常に分かりづらいコ© 2015 Information Processing Society of Japan259

4. ライブラリの設計

Y 位置を変更して返す処理を行う．

4.1 ライブラリの構成舞台演出手法を取り入れた開発環境は TheatreFourze と名付けた．ここで，Theatre とは，劇場を意味し，舞台演出モチーフにプログラミングを行うものとした. 舞台演出概念（図 1）．

図 2

Actor, Act, Cue の 3 つのクラスの関係図

図 1 舞台演出概念の導入．
4.2 記述例
ライブラリでは役者，演技，きっかけをそれぞれクラスとして扱うものとした．CG は，画面上に目にみえて振る舞いを行うために，役者である Actor クラスとした．また，その役者の振る舞いを Act クラスとした．センサからの入力は（イベント）は，舞台上で役者の振る舞いを変更する

Processing には最初に一度だけ実行する setup()とその後ループで実行され続ける draw()の 2 つの関数がある．
TheatreFourze では setup()で役者の宣言，CG の指定，演技の指定，きっかけの指定を行う．以上の処理を以下に記述した．
表 2

ためのきっかけ（Cue）と考えることができることから，記述例

Cue クラスとし，これら 3 つのクラスで舞台を構成するも1: Actor actor;のとした．

2: actor=new Actor(this, arduino);

Actor クラスは画像のロードと表示，Act クラスは画像の X

3: actor.setImage("kashi.png");

位置，Y 位置の変更，そして Cue クラスはセンサの値を適

4: actor.setAct(Act.Right, Act.Left");

切にマッピングする機能とした．対応づけを複雑化しない

5: actor.setCue(Cue.Light, 0, 1);

ようにするため Cue クラスでは一つのセンサ値のみを指定するものとした． 一般的に，扱うセンサの種類により取得できる値の範囲は異なり，それがセンサ値を扱うことが難しい要因の一つとなっている．従来は，開発者はその都度異なる値を利用していたが，本提案では，下記の式(1) を用いることで，これらの値の範囲を一定に扱うことができ

図3

るようにした．ここで，Val は，現在のセンサの値，Max は記述例 1 での役者（CG）の移動センサの最大値，Min は最小値，Num は区分値である．
ここで区分値とは，大小の２段階や，大中小の３段階など，分かり易い区分とする．
なお本ライブラリで指定しているセンサの場合，最大値と最小値をライブラリの内部に設定する，しかし，それ以外の場合，最大値と最小値の設定が必要となる．

(𝑉𝑎𝑙 − 𝑀𝑖𝑛) ∗ 𝑁𝑢𝑚 / 𝑀𝑎𝑥 – 𝑀𝑖𝑛…(1)
各クラスの関係図を，図 2 に示した．。Actor クラスと Cue
クラスに識別番号のやりとりを行う。Cue クラスはセンサ値をマッピングしたものを識別番号として Actor クラスに送る。Actor クラスは Act クラスに対して演技(CG の動き)の指定を行い Act クラスは Actor クラスに対して役者の X，© 2015 Information Processing Society of Japan

図４

役者の演技をきっかけ(Cue）で切り替える

1,2 行目で示した Actor の宣言は一般的な変数宣言と同じ よう に new で 生 成を行う ． 3 行目 の CG の 指定 はsetImage メソッドで行い，引数は String 型でフルパスとファイル名である．なお，Processing のアプリケーションフォルダ直下もしくは data フォルダに格納されている場
合はファイル名のみの指定で画像がロードできる．4 行目

260

で示す演技の指定である setAct メソッドは複数の引数を5.2 初心者によるライブラリ利用の効果とり，内部で定義している Act クラスに演技としてセット

次に，実際にセンサと CG を連携させるプログラムの開発する．これにより，CG が動くようになる．そして 5 行目にまだ慣れていない初心者に対して，本ライブラリを実際の setCue メソッドではセンサ名，int 型でセンサが接続さに利用してもらい，その効果測定を行った．

れているポート，さらに演技を区分分けする数を Cue クラ効果の測定では，ライブラリの有無で作りやすさに差がスにセットする．この 5 行の記述により，「Arduino のアあるか（1）開発の達成度（2） 開発時間を調査し，次に(3)

ナログポート 0 に接続されている光センサの値によってアンケートで印象を確かめることとした．被験者は本学学CG"kashi.png"が左右に動く」という状態を作成する．

生 14 名とした．なお被験者は，Processing および Arduinodraw()では Actor クラスのメソッドである Actor.draw()による実習講義の受講者[2]とし, Processing による CG 製を記述するのみである．ライブラリを使わずにセンサと作，Arduino を用いたセンサの基礎的な実習は既に終わっ

CG の連携をしようとした場合，draw 関数内で，Arduinoた段階で，簡単な CG とセンサの連携アプリケーションをクラスのメソッドでセンサのアナログ値を取得，取得した

作ったこともあるがプログラミング経験は比較的浅い開発

アナログ値をマッピング，マッピングした値によって処理者であるとした．14 人は， 2 人で 1 つの班を組んでいるの決定など複数のコードを記述しなくてはならないが，ラことから，計 7 つの班を対象とした調査を行った．調査でイブラリを導入することで処理をライブラリ内部で行うたは，提案したライブラリ有りの場合，無しの場合，の両方め明確に簡易化できる．の開発環境で同じアプリケーションを開発してもらい，開発にかかった差を確認した．

5. 評価

開発内容は，Arduino 側のセンサとして，可変抵抗器を提案手法による効果の評価として，本研究では，主に２つ用いて任意の CG を上下左右に移動させる単純なプログラの評価を行った．一つは，プログラムの記述量コード量のムとした．ライブラリが有る場合と，無い場合の実行順序削減効果，二つ目は，ユーザビリティについての調査を行に差が出る場合を考慮して，先にライブラリが有る開発環った．

境で開発を行う手順 A のグループと，先にライブラリが無5.1 コード量の削減

い開発環境で行うグループと手順 B で行うグループに分け

まず我々は，提案するライブラリの導入によるコード量て実施した．これを表 4 に示した．両グループには実施後，の削減効果を評価した．具体的には，センサと CG の連携アンケートに回答してもらった．なお，制限時間は 12 分によるサービスを行うプログラム対象とし，ライブラリをとし，その時間内に作成できなかったかどうかを明確にで導入/導入なし，の２つのコードを比較した．プログラムはきるようにした．

同等の機能を持つものとした．アプリケーションは「橙色

表4の屋根のお家」[4]と「かしむらガチャ」という 2 つのプロ

実験(一回目)実験(二回目)

対象

グループごとの手順

グラムを用いた．
「橙色の屋根のお家」はドールハウス型の手順 A

ライブラリ有りライブラリ無し

3 つの班

デバイスに搭載されたセンサで現実の情報を取得し、ディ

手順 B

ライブラリ無し

ライブラリ有り

4 つの班

スプレイに表示されている CG に反映させるというアプリケーションである．
「かしむらガチャ」はカプセルトイを模して可変抵抗器をハンドル代わりに用いるジョークプログ
ラムである．両者を書き換えた結果は以下の表 1 にまとめた．
表 3 ライブラリを導入し書き換えた際のプログラムの行数
橙色の屋根の家

かしむらガチャライブラリ無し

247

148

ライブラリ有り

75

63「橙色の屋根のお家」では 247 行だったプログラムがライブラリを導入することで 75 行まで削減できた．また「かしむらガチャ」は 148 行だったプログラムが 63 行に削減できた．いずれのプログラムも元の半分以下の行数で同等のプログラムを再現出来た．プログラムのコード量はコメントアウトや個人の癖など様々な要因により増減するが，それを加味しても有用性を示す結果であると考える．

© 2015 Information Processing Society of Japan

5.3 初心者に対する利用効率(1) 開発の達成度の比較
センサと CG を連携させるプログラム課題を完成できたか否かの結果を表 5 にまとめた．
表 5 完成した班の数の比較
完成した班ライブラリ有り

手順 A

2 班/3 班

手順 B

4 班/4 班ライブラリ無し--

完成しなかった班-手順 A

0 班/3 班

手順 B

2 班/4 班

手順 A で実験を行ったグループでは，ライブラリ有りでは3 つの班のうち 2 つの班がプログラムを完成したしできたが，無しの状態では１つの班も完成しなかった．残りの 1つの班はライブラリの有無に関わらず完成できなかった．
手順 B で行ったグループは 4 つの班のうち 2 つの班はライ261

ブラリ無しではプログラムを完成できなかったが，ライブラリ有りではできた．残りの 2 つの班はライブラリの有無に関わらず完成できた．総合するとライブラリ有りでは 7つの班のうち 6 つの班が完成したが，ライブラリ無しでは2 つの班しか完成しなかった．
この事から，ライブラリ導入効果は明らかであったが，特に先に，ライブラリ無しの状態で試行した班の方は，ライブラリ導入効果が高い結果となった．
(2) 開発にかかった時間(1) にて，ライブラリを用いて開発した際に，完成した班については，開発にかかった時間を調査した．以下に示す
表 6，表 7 は手順 A および手順 B の各班のプログラムの完

図5

ライブラリを使いやすいと感じたか成までにかかった時間をまとめた．
表6

表7

手順 A におけるプログラム完成までにかかった時間
手順 A

ライブラリ有りライブラリ無し

A-16 分 50 秒

-A-2--A-3

6 分 20 秒-

手順 B におけるプログラム完成までにかかった時間
手順 B

ライブラリ無し

ライブラリ有りB-1

11 分 50 秒

5 分 15 秒

B-2-

3 分 40 秒

B-3-

6 分 15 秒

B-4

10 分 20 秒

8分

図6ライブラリを用いてコードを書くのが楽か

表 6 に示したように A-1，A-3 はライブラリ有りの状態ではプログラムを完成出来たが，ライブラリ無しではできなかった．表 7 の B-2，B-3 も同じようにライブラリ有りの状態でしかプログラムを完成できなかった．統合すると 7つの班のうち 4 つの班がライブラリなしではプログラムを完成できなかったということになる，ライブラリの有無に関わらず完成できた B-1，B-4 についてもライブラリを導入することで完成までの時間が短くなっていることがわかる．
(3) 利用調査アンケートの結果さらに，調査の対象となった受講生に，実施後アンケートを行い，その結果を図 5,6,7 にまとめた．アンケートでは図 5，図 7 において手順によって差異が見られた．図 5における差異は，手順 A では 3 つの班のうち 2 つの班がライブラリ有りの状態でしかプログラムを完成させられなかったことにより，ライブラリへの依存度が手順 B の 4 つの班よりも高く，より必要性に駆られたため，「とてもそう思う」という意見が多く見られたことによる．また図 7 における差異は被験者の人数が少ないことによる誤差であると思われる．

図7

初心者にとって扱いやすいと思う

図 6 に示した「ライブラリを用いてコードを書くのが楽か」という問いに対して 14 人全員が「とてもそう思う」「そう思う」と回答している．これによりライブラリの有用性が示された．しかし図 5 に示した「初心者にとって扱いやすいと思うか」という問いに対しては被験者の約 3 分の 1が「あまりそう思わない」と回答しており，提案する抽象モデルが初心者にとって扱いやすいかは調査の必要があり，改良の余地がある．今回は舞台演出をモデルのメタファとして用いたが，他のメタファの場合を用いない場合との比© 2015 Information Processing Society of Japan262

較が必要である．このことは今後の課題とする．

6. まとめCG とセンサの連携アプリケーションを書く際に，舞台演出手法を取り入れた抽象モデルおよびそのモデルを元に作ったライブラリ TheatreFourze を使うことで，プログラムが書きやすくなるかの評価を行った．今後は，開発したプラットフォームの評価を進め，その有効性を明確にしたい．
また舞台演出以外のメタファによるモデルなどの調査も進めていく必要がある．

参考文献
1) Arduino http://www.arduino.cc/2) 菅谷みどり, Arduino とセンサーを教材とした HCI デバイス製作演習の実践, インタラクション 2014 論文集, pp.221223(2014)3) Processing https://www.processing.org/
4) 渡辺 柚佳子,岡田 佳子,大澤 博隆, 情報処理学会研究報告.
UBI, 2014-UBI-43, pp.1-6 (2014).
5) FreeMotion, SensorPlatform
http://www.sensorplatforms.com/
6) 安藤拓生,高梨千賀子,兵藤友博,徳田昭雄,八重樫文,守政毅,後藤智, セイコーエプソン社における要素技術を用いた新市場開拓,『立命館経営学』第 52 巻第 2・3 号 (2013).

© 2015 Information Processing Society of Japan

263