体験型ワークショップ用ソフトウェアの開発

(1)

体験型ワークショップ用��ト��アの開発

原田康徳 [email protected] NTT コミュニケーション科学基礎研究所概要もともとアートや研修などの現場で行われてきた体験型ワークショップ(体験型学習，表現活動)も，近年コンピュータを用いたものが見られるようになってきた．特に子どもを対象としたワークショップはブームになりつつある．本発表は著者が開発したビジュアル言語 Viscuit を用いた様々な子供向けワークショップの経験を紹介するとともに，スムーズにワークショップを進行する上で，システムをどのように開発するべきであるかを考察する．１．はじめに　IT を用いた体験型ワークショップがブームである．もともと，問題解決，トレーニングの手法，アーティストによる表現活動であった体験型ワークショップであるが，最近では子ども向け創造性教育の視点で注目を集めるようになってきた．たとえば，日本において，子ども向け参加型創造・表現活動を推進する NPO　CANVAS が主催するイベント，ワークショップコレクション 1)は，2004 年からスタートしたが，出展されたワークショップ数と来場者は図１のようにうなぎのぼりである．また，2008 年の 70 件あるワークショップの内訳は，アナログアートが主流ではあるが，コンピュータや電子工作など IT が関係しているワークショップも２３件にのぼり，子どもの表現活動に IT の力は不可欠になってきている．　著者は Viscuit2)の普及活動の一環として 2005 年から 3 年間，同ワークショップコレクションに出展している．また，それ以外にも年間数回のワークショップを開催し，成功を収めて来ている．たとえば，2008 年夏休みに行われた ICC キッズプログラムにおいては，1 ヶ月半の会期で合計 1 万作品が子どもたちによって作られた．Viscuit を目当てに何度も来場してくれた子どももいた．　この ICC での成功で重要な点は，説明員（ナビゲータ）は非常に少ないトレーニングしか積んでいないにもかかわらず，大きなトラブルもなく進行できたことである．通常，創造性をもたらすソフトウェアは，ペイントソフトのようによく知られた操作法のものでない限り，説明員の仕事は非常に負荷が大きく，長い訓練を必要とするものである．Viscuit はその敷居が非常に低かったと考えることができるであろう．　Viscuit がそのようなシステムに変化したのは，数多くのワークショップの経験と改良によるものである．ワークショップの本番中にシステムのアップデートをしたことも少なくない．　本稿は，これまでの著者の経験と考察を整理するものである．ただし，科学的な裏づけはしていないので，体験談として読んでもらいたい．また，体験型ワークショップというエキサイティングな領域に，より多くの IT 系研究者が興味を持ってもらうことも願って書く．２．IT を用いた体験型ワークショップの実例　体験型ワークショップとはどういうものであろうか．きちんとした形式が決まっているものではないが，標準的なスタイルは次のようなものである．図 1:ワークショップコレクションの来場者数とワークショップ数 2004 2005 2006 2007 2008 0 2000 4000 6000 8000 10000 12000 0 10 20 30 40 50 60 70 80 ワークショップ数来場数

(2)

１）準備　参加者の緊張を取り除く．参加者やスタッフの名前を覚えるなど．２）説明　これからやることの説明．直接説明する場合もあるし，物語風に間接的に説明する場合もある．たとえば，「あなたは探検隊の隊長です．いま無人島に居ます」のようなスタイル．３）技術的な説明，注意事項　もうひとつメタな説明．ソフトの操作法とか，ルールとか，休憩時間，進行とか．４）制作開始　個人で作る，グループで作るなど．ディスカッションの時間がとられる場合もある．５）制作終了６）発表会　それぞれの作品について発表しあう．７）振り返りワークショップの形態や時間などでいくつかは省略される場合もあるが，IT を使ったワークショップの場合，特徴的なのは３）と４）である．アナログの素材を使ったワークショップでは，基本的な道具の注意事項（たとえばカッターはこう使うと危ない）程度でよいのであるが，ソフトウェアは説明が非常に難しい．口頭で 1 回説明した程度ではほとんど理解されないので，技術的説明と制作を何度も細かいステップに分けなければならないこともある．　ワークショップでは進行役の他に，参加者の細かなケアのためのスタッフがいる．これらのスタッフをファシリテータと呼ぶが，ファシリテータの質と人数の充実度がワークショップの成功に大きく関わってくる．理想的には，経験豊かなファシリテータが参加者 4 名程度に一人の割合で担当する．しかし，必ずしもすべてのワークショップでファシリテータが充実しているわけではない．人件費に関わるので，潤沢な予算がない場合，ファシリテータをボランティアで募る場合も少なくない．し，人数が極端に少ない場合もある．　このように，IT を使ったワークショップの場合，とくにファシリテータに高いスキルが求められているにもかかわらず，そうも行かないのが現状である．そこで，ワークショップに適したソフトウェアと，進行スタイルの改良が求められているのである．３．ワークショップ用ソフトウェア　ワークショップのためのソフトウェアは一般的なソフトウェアにはない性質や実行条件がある．　一般的なソフトウェアが使用されるのは，家庭や職場などユーザが単独の場合が多く，マニュアル，操作ヘルプなどが充実している必要がある．それに対して，ワークショップではファシリテータがついていることで，操作法，使いやすさに関して，一般的なソフトウェアよりも基準がゆるくできる．　ところが，対象が大人用，子ども用で比べると，ダブルクリックや右ボタンメニューなど子どもが操作しにくい（教えにくい）アクションや，文字による解説など，子ども用のインタフェースのデザインで制約を受ける．　少し，話がそれるが，ソフトウェアのレベルをやさしい順で示すと，１）　デモレベル：製作者のみが操作できる．バグが残っていたりして，特定の操作列を無意識に回避したりする．２）　大人用ソフトウェア：解説者が横についていることで，操作できる．３）　大人用製品：解説者がいない状態で操作できる．４）　子ども用ソフトウェア：解説者が横についていることで，子どもが操作できる．５）　子ども用製品：解説者がいない状態で，子どもが操作できる．ここで，２）以上だと大人用のワークショップで使えるソフトウェア，４）以上だと，子ども用のワークショップで使えるソフトウェア，ということになる．子ども用の製品を作るのは非常に難しいけれど，ワークショップを対象として間にはさむことで，製品化一歩手前の状態でシステムを鍛えることができる．　一方，ワークショップの実情を踏まえて，その進行を直接支援する機能を入れることも重要である．例をいくつか列挙しよう．

(3)

１）　ファシリテータ支援　基本的に優秀なファシリテータが充実していれば，どんなソフトウェアであってもワークショップは実施できる．これは逆に見ると，優秀なファシリテータが少ない状況でも問題が顕在化しないように，システムができることはできるだけやらせるということでもある．これが最後には製品レベルのデザインへとつながる．２）　準備・後片付けの支援　ソフトウェアを PC にインストールする手間がある．PC は数十台におよぶ場合もあるので，インストールの手順が一つ少ないだけでも大きな改善になる．開発途中のシステムの場合，本番直前まで変更が行われ，インストールはさらにその後となる．また，PC を借りている場合など，終了後にインストールしたソフトウェアを削除することを求められる場合もある．　Web ベースでアプリケーションを配布すれば，手間が非常に楽になる．アプリケーションの起動パラメータは URL のパラメータとして指定し，様々な状況でアプリケーションの振る舞いを替えたいい場合でも，Web ページのリンクのクリックを替えればよいだけである．　外部のネットワークが安定していれば，サーバを外部に置くこともできる．ワークショップの進行中から作品ができるたびにインターネットに作品が公開され，インターネットのダイナミック感を直接子どもたちに体験させることになる．３）　発表会向け支援　発表会は，大きなスクリーンにつないだ PC 上で行うことが多い．みんなに見せるという行為が，非常に重要であり，その演出に大きなスクリーンは適している（各自の制作している PC の周りを回って歩くということでも，発表会は可能であるが，効果は格段に違う）．参加者が制作した作品がローカルなマシン上に保存されるのであれば，それを一つの PC に集める必要がある．その作業はそれなりに時間がかかる（参加者自らできない場合が多い）ので，ワークショップの進行上の工夫が必要となる．　サーバ上に作品が保存されるようなシステム構成であれば，発表会はサーバ上に保存された作品を見せることで，簡単に実現できる．発表会ではなくても，進行途中で誰かの作品を取り上げて，それに対したコメントを参加者全員に伝えたい場合も，サーバ上のその際も問題なく実行できる．　発表会にはその他の形式がある．随時参加型のワークショップや，参加者が作品を作る速度が一定でない場合などは，作品ができる度にみんなに見せることができればよい．４）　ダイナミック性　ワークショップ自身がもつ現場のダイナミックな性質を生かしたシステムが重要である．ワークショップは最初に計画した通りに進まなくても，参加者の様子や突発的な出来事に対して，それを生かした柔軟な対応が非常に重要である．前準備に時間がかかるシステムでは，そういった対応は難しい．５）　広い応用　ワークショップの一つのプログラムは学習上の学びを持った場合もあるし，単体のソフトウェアが様々な学びにつなげられるのが理想である．たとえば，円の面積の理解を支援するソフトウェアのような特定の目的の教材とはそこが異なる．応用が広いことは４）のダイナミック性にもつながる．４．ワークショップ対応ビスケット　ここではビスケットのワークショップに対応した拡張について述べる．４．１．Wiki 的なインタフェース　ボタン，アイコン，GUI コントロールなどがテキスト編集によって簡単に生成できる．たとえば,背景の色を指定するには　#background C1 C2 というテキストを画面に置く．C1　C2 はある整数のテキスト表現である．するとそのテキストは「はいけいのいろ」という名前のボタンに変化し，置き換わる．そのボタンをクリックするとことで，背景の色を選択する GUI コントロールが表示され，それを操作して背景色を決定すると，画面の背景色が変化するととともに，内部のテキスト表現においてその色の整数値 C1，C2 が置き換わる（２つの色を指定するのは２色でグラデーションの表現をするためである）．　このインタフェースには次のような特徴がある．

(4)

● 色の選択などパラメータの指定が特殊な場合，専用の GUI コントロールが使用できる． ● しかし，そのデータ表現はテキストという汎用のものであり，テキストレベルの編集も（Shift+クリックによって）いつでも可能である． ● ボタンの配置を自由に変更できる． ● ワークショップの進行上不要なボタンを表示させなくてすむ． ● ボタンの表示名を変更できる（参加者の対象によっては平仮名や英語などを使い分ける必要がある） ● システムの拡張が容易（Web アプリであるから，将来的には外部のサイトで拡張させることも視野に入れる）　ドキュメント自身の属性としてもこのテキスト表記は使われている．#background 0 0 は背景が 0（黒）であることを示す属性でもある．このテキストが置かれているドキュメントは，背景が黒く表示される．同様に，内部状態＋特殊 GUI のものに，グリッド，アニメーションの動作速度，作品のタイトル，作者名などがある．　その他の GUI コントロールには，単純に命令を送るだけのもの（対象の図形のサイズを変更する，編集モードにするなど），アイコンとして Viscuit のルールの中に入れて特殊な働きのするもの（キーが押されたかどうかの条件，音を鳴らすというアクションなど）がある．４．２．Web アプリ　最初のバージョンの Viscuit はダウンロード型のアプリケーションであった．しかし，作品の保存などワークショップの進行上の問題などのため，今のバージョンは Web アプリとして実装してある．最近の RIA 技術の進歩により， Viscuit 程度の処理はまったく問題なく動作できている．　Web アプリの一つの特徴として，動作の様々な引数は URL の中に埋め込むことができるということがある．４．３．展示用の工夫　ワークショップの形態に応じて，発表会や展示など様々に作品を表示する方法がある．　ICC の展示では，プロジェクター 2 台をつなげたスクリーンを巨大なキャンバスとして，参加者が作ったアニメーションをそこに放すという仕組みを使った．キャンバスは沢山のコチャコチャと動くアニメーションでいっぱいになり，その中から自分が作った作品を探して喜ぶ（図２）．この形式のワークショップは，参加者全体で一つの世界観を共有し（宇宙，海，森など）その世界観にあった，動くものを，参加者全員で作成するというものである．この表示法の特徴は，連続的に使用できるという点である．表示用の PC も Web のクライアントとして実装されるが，定期的にサーバをチェックし，新しく作品が作られると，画面にその作品のアニメーションを追加する．PC の能力に依存するが，スクリーンに最大に表示できるアニメーション数を決めておき，それを越えると古い作品から順に消えて行く．１０人程度の参加者で１時間のワークショップを行うと，最初の頃に保存した作品は消えてしまうので，最後の発表会では，もう一度，スクリーンを最初に戻して，作品を鑑賞するなど行われる．　一方，Viscuit の作品は参加者各自が１つのページに閉じているのが多い．これを連続的に，順に表示するようにしたのが，図３である．連続的であればどのような配置でもよいのであるが，ここではヒルベルト曲線を用いて，時間軸に沿った１次元の作品列を，２次元上に配図 2:巨大キャンバスによる展示

(5)

置している．表示用プログラムはヒルベルト曲線に沿ってスクロールするので，画面を見てて飽きない．また，作品が連続して投稿されても，２次元上を無限に使うことができる．単純には横か縦のどちらかの幅を固定して，順に作品を並べるのであろうが，それだと，スクロールが単調な動きしかせず，つまらない．４．４．表現力向上のための工夫一般に，ワークショップでは，短時間の制作で表現力が豊かな作品が求められている．そのため，数多くの表には見えない工夫がなされている．たとえば，色紙をつかうワークショップでは，準備されている紙の色は，どのような組み合わせでもきれいな配色になるような色の紙だけを用意することがある．これによって，綺麗な配色のノウハウがなくても，ほどほどにいい作品が生まれる．一方で，それをやりすぎると，大人の息がかかりすぎたものとなってしまい，子どもの創造性を引き出すチャンスを奪ってしまう．このバランスは非常に難しい． Viscuit ではお絵かきの部分でいくつかの工夫をしている．図４は Viscuit のペイント部分である．多くの参加者は，ペイントを開いたときに，描きたいペンの色を選択することなく，描き始める．初期状態の色が常に同じであれば，その色のアニメーションが非常に多くなってしまう．そこで，初期状態として選択されている色はランダムに（ただし，明度と彩度は明るく鮮やかな範囲で）設定するようにした．　左下にあるカラフルというスライドバーは作った絵に色上の揺らぎを追加するものである．揺らがせる色相の範囲をこのスライドバーで指定する．ここでは赤い傘の絵を描いたが，カラフルを１８０度最大にすることで，すべての色相の傘が作られる．この絵をステージ上に配置する際に，揺らぎのための乱数が決定され，それにしたがって，様々な色の傘が表示されることになる．　以上の，工夫はどれもほどほどな介入である点に注意して欲しい．細かなところまで自分で作りこみたい人には関係ないが，あまり気にせずに作品を作っても，ひどい結果にはならないような工夫である．４．５．描画領域　ペイントの描画領域が円である点も注意して欲しい．学校や幼稚園で習う絵は四角い画用紙に描く．四角いキャンバスのペイントのときに，好きな絵を描くように指示すると，何人かは，四角いキャンバスを紙として絵を描いてしまう．地平線があって山があって，空があって，太陽があって，というタイプの絵である．このような絵は Viscuit のアニメーションにはまったく適さないので，なんとかそういった絵を描かせない工夫が必要であった．そこで描画領域を円としている．　しかし，円を画用紙のようにして絵を描く子どもはいなくなったが，円を塗りつぶして，丸い絵にする子どもは増えた．たとえば，ドラえもんやアンパンマンのようなキャラクターの顔などである．５．作品紹介子どもたちがワークショップ等で作った作品を紹介しよう．図 3:ヒルベルト曲線に沿ったページ単位の作品の展示図 4:Viscuit_{のペイント}

(6)

図５はサッカーをするアニメーションである．目の前にボールが来るとそれを蹴って飛ばしている．ボールを切り上げた後，きちんと足を戻す動作も作られているので，連続してボールを蹴り続ける．　図６は列車のアニメーションである．線路の上を動くようにアニメーションが作られているが．動き自体は単純なものであるが，この作品で注目すべきは，背景を絵で作っている点である．Viscuit には背景を直接描画する機能はない．そのかわり，背景の山，手前の家を Viscuit のキャラクターで作られた絵を沢山配置することで作っている．　白黒の図ではわかりにくいが，家のや山の部分の色が異なっているのは，それぞれの絵が「カラフル」属性を持っているからである．　図７は色が変化する作品．図８は雪が静かに降る作品．図９は蝶を虫取り網で捕まえるゲームである．　いずれも Web サイトにてアニメーションの現物を見て欲しい 3)．謝辞ワークショップの進行にあたって，子ども文化コミュニティと SPINAL DESIGN 社のご協力を頂いた．参考文献 1) ワークショップコレクション： http://www.wsc.or.jp/ 2) Viscuit: http://www.viscuit.com/ 3) Viscuit の作品： http://develop.viscuit.com/3.0/prosym.html 図 5:_{サッカーをするアニメーション} 図 8:_{クリスマス} 図 7:_キラキラ図 9:ちょう図 6:_列車