MR Code Weaver: Programming Educational Tool
with Physical Mixed Reality Interface
TOSHIKAZU OHSHIMA †¹
REN SAKAMOTO†¹

1.はじめに
情報技術や輸送技術の発展にともなう社会のIT化とグローバル化により，子どものころからのプログラミング学習が注目されている．平成29（西暦2017）年3月に公示された，平成32（西暦2020）年4月1日より施行される小学校学習指導要領[3]では， 「児童がプログラミングを体験しながら，コンピュータに意図した処理を行わせるために必要な論理的思考力を身に付けるための学習活動」を計画的に実施するようにと明記され,プログラミング学習が必修となることが決まった.しかし，プログラミングを小学校で学習するためには解決しなければならない問題点も多い．例えば，一般的なプログラミング言語におけるキーボード入力はそれ自体がスキルを要するため，入門段階では大きな負荷となる．その結果，子どもの学習意欲を減退させ，学習の継続から遠ざけてしまう.こうした問題点は，プログラミング学習ツールの改善によって克服されるべきである.本研究では,プログラミング言語の構文規則ではなく,プログラミングに普遍的な概念を学ぶことができる学習ツールの開発を目的とする.それに加え，本研究を進めていくうえでは，先行研究が取り組んでいきたような，子どもの興味を持続させるプログラミングコンテンツを擁していることも必須の要件と捉えて開発を行う.今回開発したプログラミング学習ツールでは，プログラミング操作をタンジプルユーザインタフェースを介して行い、プログラム実行結果の提示をプロジェクションによるミクストリアリティ表現によって行った.タンジプルユーザインタフェースを採用することによってキーボード入力を排し，さらに複数人での共同作業やディスカッションを行うことも可能にする.
2. 関連研究
本研究のプログラミング学習ツールが目指す方針を以下に三つ挙げる. （1）実行結果がグラフィカルである( 2 )プログラミング操作がグラフィカルである（３）手で触れられる物体であるこれらに関連する先行研究を以下に示す.
2.1 図形を描くプログラミング青語
子どもがプログラミングを学ぶためには，まずプログラミングにたいして興味を持ち,学習を継続する必要がある.そのため，プログラムの実行結果は子どもにとっても分かりやすいものでなければならない.  MITのPapertらは，子どもがプログラミングを学ぶことのできる言語としてLogo[2][3]を開発した．これは，図１のような画面上に描かれたタートル（亀）をプログラムによって動かし，その軌跡によって図形を描くことができるプログラミング言語である.プログラムは「前へ進め」「右へ回れ」といった命令から成り，そのプログラミングはキーボード入力によって行われる。本研究ではこのLogoを参考に,キャラクタを命令によって動かし，その軌跡によって図形を描くプロトタイプを制作した.
2.2キーポード入力が不要なプログラミング書語
2.1で挙げたLogoはキーボードによる文字入力を必要とした． MIT Media LabのLifelong Kindergarten Groupは，命令を表す画面上のプロックをマウスポインタによって組み合わせてプログラミングを行うことで，キーボードによる文字入力をほとんど不要にしたプログラミング言語Scratch[4]を開発した．これによりユーザはキャラクタアニメーションを作ったり，インタラクティプなコンテンツを作ったりできる. Scratchのグラフィカルユーザインタフェースを図2に示す. このような，キーボードによる文字入力を必要としないプログラミング言語はビジュアルプログラミング言語と呼ばれ, Scratchのほかにも数多く存在する.プログラミングへの敷居を低くすることができるため，子どものプログラミング学習の現在の主流となっている.
2.3プログラム可能な玩具
子どもの創造性と思考力を育む手段としてプログラミングを用いたものは玩具にもある． LEGO MINDSTORMS[5]は、インテリジェントプロックと呼ばれる頭脳部品に，通常のLEGOプロックやモータ，センサなどを組み合わせてロボットを組み立てることができる.組み立てたロボットはは， 2.2で挙げたScratchのような専用のビジュアルプログラミング言語や，他のさまざまな言語によってプログラムし，動かして遊ぶことができる.
3.システムデザイン
3.1想定するプログラミング内容
今回は小学生程度の子どもを対象とし，プログラミングにおける最も基礎的な考え方を身につけることを目標とする．本稿ではその基礎的な考え方を，一つ一つ順番に命令を実行していく「逐次処理」,条件に応じて実行する処理を分岐させる「条件分岐」,条件のもとで同じ処理を繰り返す「反復処理」の三つと定義した.それらを学習するためのコンテンツとして，2.1で関連研究に挙げたLogoを参考に,キャラクタを動かしてその軌跡によって図形を描くコンテンツを制作した.プログラムで描く図形の例を図3に示す. Logoは，実行結果が期待通りなのか(そうでない場合にはどこが間違っていたのか)を分かりやすい形でフィードバックすることができるため,実行結果の確認が容易である．また，間違いを修正（デバッグ）する上でも，ユーザは自分の身体でタートルと同じ動きをすれば良いため，プログラミングを学び始めたばかりの子どもにも取り組みやすいコンテンツといえる.
3.2ユーザインタフェースのデザイン
本研究ではプログラムを構成する一つ一つの命令や,それに関わる数値を物理的なタイルに置き換え，手で直接触れながらプログラミングを学ぶことができるタンジプルユーザインタフェースを採用した.ユーザはタイルをテープル上に配置し,命令を実行したい順番に繋いでいく.また,すでに繋いであるタイル同士の間に，後からタイルを追加することも可能にした.これにより,プログラムのバグを修正したり，プログラムを発展させたりといった柔軟な学習が可能となる.
3.3プログラムのモデル
本研究では，ノイマン型コンピュータによる逐次実行型のプログラムを想定している．すなわち，開始と終了が定義されていて，開始から終了にいたるまで順序立てて実行されるものである．本研究では，プログラムの開始と終了を，それぞれ開始命令と終了命令として割り当てる．開始命令に任意の命令を追加していくことでプログラミングを行い，最後に終了命令を追加することでプログラムが実行
される.
3.4プログラムの構成要素
プログラムの「命令」は,「オペコード」と「オペランド」から構成される.オペコードは，命令の種類を表すものであり,オペランドは,命令に関する数値を表すものである.オペランドの内容はオペコードによって異なる.例えば,キャラクタを前進させるオペコードには，距離を表すオペランドを組み合わせることができる.本システムでは，以下のような種類の命令を使用する. （1）開始と終了プログラムの開始と終了を,それぞれ「IN」「OUT」命令とする.オペランドは組み合わされない. ( 2 )条件分岐条件分岐を「IF」命令とする．真か偽の値をとるオペランドが組み合わされる. （3）反復処理反復処理の開始と終了を,それぞれ「REPEAT BEGIN」 「REPEAT END」命令とする．REPEAT BEGINには反復する回数の値をとるオペランドが組み合わされ， REPEAT ENDにはオペランドは組み合わされない. ( 4 )前進キャラクタの前進を「FORWARD」命令とする．前進する距離の値をとるオペランドが組み合わされる. （５）右旋回と左旋回キャラクタの右旋回と左旋回をそれぞれ「RIGHT」「LEFT」命令とする.マイナスとプラスがプログラムの本質ではないため，右旋回と左旋回とした．回転角の値をとるオペラ
ンドが組み合わされる.
3.5プログラムの編集と実行
図4に示すように，本システムは開始時にプログラム編集モードとなる. ここでユーザはオペコードおよびオペランドを入力する.ユーザは,プログラムの開始点であるIN命令に続けて，オペコードを追加し，オペコードには,それがとりうるオペランドを組み合わせる.プログラムにOUT命令が追加されると，システムは実行モードへと切り替わる.実行前処理でエラーの有無をチェックし,エラーが見つかれば実行されずに編集モードへ切り替わる．エラーが見つからなければ開始命令から順に処理され，終了命令まで処理されると再び編集モードへ切り替わる.
4. 実装
4.1システム構成
図5に示すように,本システムはPC,カメラ,プロジェクタ,テープル,マーカの描かれたタイル群といった要素によって構成される.カメラとプロジェクタはPCに接続され,それぞれ三脚によってテープルの周囲に固定されている.カメラはテープル上のマーカを撮影し,プロジェクタは図6のようにテープル上に映像を投影する.カメラが取得したマーカの写った画像はPCで処理され，マーカ同士の距離を計測するのに用いられる.マーカ同士の距離に応じてPCはプログラムを編集し，プログラムが実行されると、実行結果がプロジェクタによってテープル上に表示される.
4.2プロジェクションによる映像の提示
本システムでは,タイルを配置するテープルの上部にプロジェクタを設置し，そこから映像の投影を行うことで,タイルによるプログラミング操作と映像による実行結果の確認を同時に可能にした.テープルへのプロジェクションの様子を図6に示す. 今回はキャラクタが図形を描く実行結果と,ユーザプログラムの状態を表す文字列を投影した.マーカの位置情報取得にカメラによる画像認識を用いる関係上，マーカに人や物の影ができるとマーカが意図したとおりに認識されないことがある.テープル上のマーカを置く領域に白色の映像を投影することによって，人や物の影をなくしマーカを鮮明に撮影することで，影による画像認識への影響を低減させている.また本稿の段階では未実装であるが，プロジェクションを用いることにより，タイルの周囲に情報を提示することができるという利点もある.ユーザがプログラミングを行なっている最中に，操作上のヒントや，エラーの原因となっている箇所を示すことなどが可能となる.
4.3 面像駆識によるユーザプログラムの入力
本システムは，タイルに描かれたマーカをカメラで撮影・画像処理し，マーカ問の距離を計測することでタイル同士がつながっているかどうかを判断している．その計測にはARToolKitを利用した.タイルの上面にはマーカが描かれており，カメラでリアルタイムに撮影したマーカ画像をコンピュータで処理することで,それぞれのタイルの位置を認識することができる.マーカ同士の距離が関値より短ければ，タイル同士が繋がったとみなし，コンピュータ側のユーザプログラムで命令の追加を行う.また長ければ,タイル同士が離れたとみな
し，命令の削除を行う.
4.4 本システムを利用したプログラムの実行例
本システムを利用したプログラムの実行例を図7に示す.ユーザのプログラムが実行されると，テープル上にプロジェクションされたキャラクタが命令にしたがって動き，こうした図形が描かれる.
5.評価実験と考察
試作しているシステムの現状までの機能をテストし，研究的な方向性を評価するための予備実験を行った.マーカによるユーザインタフェースの操作性と，視覚的なフィードバックによるプログラミング学習効果の検証を着眼点とした．今回の実験では，学習者に提示するプログラミングタスクの形式が本システムと同様であるLogo (ACSLogo For Mac OS X[6]）を比較対象とした.実験は4名の学生に協力してもらい、人ずつのグループに分けて行った.一方のグループにはLogoを,もう一方のグループには本システムを体験してもらい，共通のプログラミング課題に取り組んでもらった.実験では両グループに同じ内容のレジュメが配布され,被験者はその内容に従って課題の達成を目指す.レジュメには，それぞれのグループの体験するシステムの基本的な操作方法が同じ書式で説明してある．こちらからは実験の大枠だけを説明し，操作方法の説明についてはレジュメによってできるだけ両グループとも同じ説明となるようにした．加えて，プログラムによって描く図柄を両グループ共通の課題として4問出題し、50分問でプログラムを成功させた時間と数を測った．また，実験後にはアンケートに回答してもらい，課題とシステムについてのフィードバックを得た.はじめに，アンケートによって被験者のプログラミング経験について把握したところ，4名全員が大学の授業等でプログラミングを学んだことがあると回答した．しかし,プログラミングが好きと回答したのは２名で，得意と回答した者はいなかった.つまり,逐次処理や繰り返しなどの,プログラミングに関する基礎知識は持っているが，プログラミングに熟達したものはいないとして理解できる. これを踏まえて考察を行う. 【ユーザインタフェースについて】被験者が課題の各問に要した時間の測定結果を表1に示す．結果として，４問目まで時間内に達成できたのは１名だけであった.全体としてはLogoより本システムのほうがやや時間がかかっている.本システムでの操作手順の習得に時間がかかった分, Logoよりも時間が必要であったことが，実験の親察からも見てとられた．また，タイルを探すことや並べることにも時間がかかっていると考えられる.すなわち，被験者の属性として，キーボードによる文字入力に慣れていたのでLogoのほうが，早くプログラミングできたのではないかと推測される.実験後に行なったアンケート結果を表2に示す.アンケートでは, Logoグループの方がプログラミング操作をより簡単に理解できたと回答した．また，プログラミング操作自体に関しては， Spiderグループの一名があまり簡単に行えなかったと回答している.今回のレジュメのように，文章による操作手順の説明と,物理的形状をもつタンジプルインタフェースの相性が良くないとも考えることができる.タンジプルインタフェースの手順を説明する際には，実際に目の前で実演するか，動画によるチュートリアルを見せることでより簡単な理解につながると考えられる.マーカに描かれているピクトグラムの意味はよく理解できたと回答されているが，間違えて配置する様子も親察された.ピクトグラムをおぼえることが新たなプログラミング上の負担とならないよう，文字も載せるなどの工夫を施す必要がある. 【実行結果のグラフィカルな表現について】実験後のアンケートの結果，思い通りにプログラミングができたか，思い通りにいかなかった場合にうまく修正できたかについては，個人差のある結果となった．しかし，キャラクタを動かして図形を描くというタスクは，正しいかどうかがわかりやすく興味が持てたと全員が回答している。キャラクタを前進や回転などの命令によって動かすという実行結果の具体性が，インタフェースであるマーカのピクトグラムとの相性が良いとも考えられる.
6.おわりに
本研究の目的は，小学生程度の児童がプログラミングの基礎概念を学ぶにあたって、敷居を下げるという試みであった.キーボード入力や厳格な命令の記述を排除し,プログラムに手で直接触れることのできるタンジプルユーザインタフェースと，目で見てわかりやすく興味を持続させるグラフィカルな結果のフィードバックを採用した試作システムの実験により，これらの負荷を取り除くことができる可能性が認められた.一方で，プログラミングになれた人には，ピクトグラムよりも文字による命令の記載、マーカよりもコードの打ち込みのほうが効率がよい.すなわち,習熟レベルによる使いやすさの違いについては別途検討を行う必要がある。プロジェクションによる操作ガイドや学習のヒントを表
表２アンケートの回答結果
示するなど，システムにはそれらの課題を解決することができそうな機能上の余白がまだまだ残っている. 今回の予備的な実験を踏まえて改善を進め，プログラミング経験のない小学生以下の子どもたちにも実際に体験してもらいたい.マーカの種類であったり,表現しうる情報量であったり，物理的に多くのマーカを整理してアクセスしやすくする方法も必要となる.このような,さまざまな観点からシステムの改善と実験とを繰り返しながら，総合的によりよいプログラミング学習ツールを研究していく.謝辞本プロジェクトに協力されている立命館大学映像学部の大島研究室各位に感謝します.本研究は，JSPS科研費16K00288の助成を受けたものです.