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

3A10
2018/3/5

MR Code Weaver: 投影型ミクストリアリティによるタンジブルなプログラミング学習ツール
坂本恋†1

大島登志一†1

概要：本研究では，小学生以下の子どもがプログラミングを始める際の最初の足がかりとなるプログラミング学習ツールを検討する．このツールは，物理的な形状を持ったパーツを直接手で組み合わせることでプログラミングを行うことができるタンジブルな（触れられる）ユーザインタフェースをもつ．これにより，一般的なプログラミング言語における学習の入門段階で障壁となる，キーボードを介した文字入力や，使用するプログラミング言語における厳密な構文規則の要求，複数人での共同的な学習の難しさなどの問題の解決を試みる．

MR Code Weaver: Programming Educational Tool
with Physical Mixed Reality Interface

REN SAKAMOTO†1TOSHIKAZU OHSHIMA†1

Abstract: We propose a new tool for programming education for children. We focus on teaching common feature ofprogramming, which are sequence, selection and iteration. We adopt physical user interface by using mixed reality in order toavoid difficulty of coding with a keyboard and/or studying about syntax and notation of programming language, which are notessential for novice of programming. The system provide Papert’s Logo-like graphical feedback as result of execution of programin order to show apparently if the program is correct or not.

1. はじめに *【*の文字書式「隠し文字」】の興味を持続させるプログラミングコンテンツを擁していることも必須の要件と捉えて開発を行う．

情報技術や輸送技術の発展にともなう社会の IT 化とグ今回開発したプログラミング学習ツールでは，プログラ

ローバル化により，子どものころからのプログラミング学ミング操作をタンジブルユーザインタフェースを介して行習が注目されている．平成 29（西暦 2017）年 3 月に公示さい，プログラム実行結果の提示をプロジェクションによるれた，平成 32（西暦 2020）年 4 月 1 日より施行される小学ミクストリアリティ表現によって行った．タンジブルユー

校 学 習 指 導 要 領 [3]では，「児童がプログラミングを体験ザインタフェースを採用することによってキーボード入力しながら，コンピュータに意図した処理を行わせるためにを排し，さらに複数人での共同作業やディスカッションを必要な論理的思考力を身に付けるための学習活動」を計画行うことも可能にする．

的に実施するようにと明記され，プログラミング学習が必修となることが決まった．
しかし，プログラミングを小学校で学習するためには解2. 関連研究
本研究のプログラミング学習ツールが目指す方針を以下決しなければならない問題点も多い．例えば，一般的なプに三つ挙げる．

ログラミング言語におけるキーボード入力はそれ自体がス（１）実行結果がグラフィカルであるキルを要するため，入門段階では大きな負荷となる．その（２）プログラミング操作がグラフィカルである結果，子どもの学習意欲を減退させ，学習の継続から遠ざ（３）手で触れられる物体であるけてしまう．こうした問題点は，プログラミング学習ツー

これらに関連する先行研究を以下に示す．

ルの改善によって克服されるべきである．

2.1 図形を描くプログラミング言語

本研究では，プログラミング言語の構文規則ではなく，子どもがプログラミングを学ぶためには，まずプログラ

プログラミングに普遍的な概念を学ぶことができる学習ツ

ミングにたいして興味を持ち，学習を継続する必要がある．

ールの開発を目的とする．それに加え，本研究を進めていそのため，プログラムの実行結果は子どもにとっても分か

くうえでは，先行研究が取り組んでいきたような，子どもりやすいものでなければならない．MIT の Papert らは，子ど も が プ ロ グ ラ ミ ング を 学ぶ こ と の で き る 言 語と し て†1 立命館大学映像学部
College of Image Arts and Sciences, Ritsumeikan University© 2018 Information Processing Society of Japan

Logo[2][3]を開発した．これは，図 1 のような画面上に描か895

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

3A10
2018/3/5

れたタートル（亀）をプログラムによって動かし，その軌グを用いたものは玩具にもある．LEGO MINDSTORMS[5]跡によって図形を描くことができるプログラミング言語では，インテリジェントブロックと呼ばれる頭脳部品に，通ある．プログラムは「前へ進め」「右へ回れ」といった命令

常の LEGO ブロックやモータ，センサなどを組み合わせてから成り，そのプログラミングはキーボード入力によってロボットを組み立てることができる．組み立てたロボット行われる．

は，2.2 で挙げた Scratch のような専用のビジュアルプログ

本研究ではこの Logo を参考に，キャラクタを命令によって動かし，その軌跡によって図形を描くプロトタイプを制作した．

ラミング言語や，他のさまざまな言語によってプログラムし，動かして遊ぶことができる．

3. システムデザイン
3.1 想定するプログラミング内容
今回は小学生程度の子どもを対象とし，プログラミングにおける最も基礎的な考え方を身につけることを目標とする．本稿ではその基礎的な考え方を，一つ一つ順番に命令を実行していく「逐次処理」，条件に応じて実行する処理を分岐させる「条件分岐」，条件のもとで同じ処理を繰り返す「反復処理」の三つと定義した．
それらを学習するためのコンテンツとして，2.1 で関連
図 1Logo の実行結果研究に挙げた Logo を参考に，キャラクタを動かしてその軌跡によって図形を描くコンテンツを制作した．プログラ

2.2 キーボード入力が不要なプログラミング言語

ムで描く図形の例を図 3 に示す．Logo は，実行結果が期待

2.1 で挙げた Logo はキーボードによる文字入力を必要と通りなのか（そうでない場合にはどこが間違っていたのか）した．MIT Media Lab の Lifelong Kindergarten Group は，命を分かりやすい形でフィードバックすることができるため，令を表す画面上のブロックをマウスポインタによって組み実行結果の確認が容易である．また，間違いを修正（デバ合わせてプログラミングを行うことで，キーボードによるッグ）する上でも，ユーザは自分の身体でタートルと同じ文字入力をほとんど不要にしたプログラミング言語

動きをすれば良いため，プログラミングを学び始めたばか

Scratch[4]を開発した．これによりユーザはキャラクタアニ

りの子どもにも取り組みやすいコンテンツといえる．

メーションを作ったり，インタラクティブなコンテンツを作ったりできる．Scratch のグラフィカルユーザインタフェースを図 2 に示す．このような，キーボードによる文字入力を必要としないプログラミング言語はビジュアルプログ
ラミング言語と呼ばれ，Scratch のほかにも数多く存在する．
プログラミングへの敷居を低くすることができるため，子どものプログラミング学習の現在の主流となっている．

図 3

図 2

Scratch のグラフィカルユーザインタフェース

プログラムで描く図形の例

3.2 ユーザインタフェースのデザイン
本研究ではプログラムを構成する一つ一つの命令や，そ2.3 プログラム可能な玩具
子どもの創造性と思考力を育む手段としてプログラミン© 2018 Information Processing Society of Japan

れに関わる数値を物理的なタイルに置き換え，手で直接触れながらプログラミングを学ぶことができるタンジブルユ

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

ーザインタフェースを採用した．ユーザはタイルをテーブ

3A10
2018/3/5

れがとりうるオペランドを組み合わせる．

ル上に配置し，命令を実行したい順番に繋いでいく．また，プログラムに OUT 命令が追加されると，システムは実すでに繋いであるタイル同士の間に，後からタイルを追加行モードへと切り替わる．実行前処理でエラーの有無をチすることも可能にした．これにより，プログラムのバグをェックし，エラーが見つかれば実行されずに編集モードへ修正したり，プログラムを発展させたりといった柔軟な学切り替わる．エラーが見つからなければ開始命令から順に習が可能となる．

処理され，終了命令まで処理されると再び編集モードへ切

3.3 プログラムのモデルり替わる．

本研究では，ノイマン型コンピュータによる逐次実行型のプログラムを想定している．すなわち，開始と終了が定義されていて，開始から終了にいたるまで順序立てて実行されるものである．本研究では，プログラムの開始と終了を，それぞれ開始命令と終了命令として割り当てる．開始
命令に任意の命令を追加していくことでプログラミングを行い，最後に終了命令を追加することでプログラムが実行される．
3.4 プログラムの構成要素
プログラムの「命令」は，「オペコード」と「オペランド」から構成される．オペコードは，命令の種類を表すものであり，オペランドは，命令に関する数値を表すものである．
オペランドの内容はオペコードによって異なる．例えば，

図 4システムの状態遷移図

キャラクタを前進させるオペコードには，距離を表すオペランドを組み合わせることができる．
本システムでは，以下のような種類の命令を使用する．

4. 実装
4.1 システム構成（１）開始と終了

図 5 に示すように，本システムは PC，カメラ，プロジェプログラムの開始と終了を，それぞれ「IN」「OUT」命令

クタ，テーブル，マーカの描かれたタイル群といった要素とする．オペランドは組み合わされない．

によって構成される．カメラとプロジェクタは PC に接続（２）条件分岐され，それぞれ三脚によってテーブルの周囲に固定されて条件分岐を「IF」命令とする．真か偽の値をとるオペランいる．カメラはテーブル上のマーカを撮影し，プロジェクドが組み合わされる．

タは図 6 のようにテーブル上に映像を投影する．カメラが（３）反復処理

取得したマーカの写った画像は PC で処理され，マーカ同反復処理の開始と終了を，それぞれ「REPEAT BEGIN」士の距離を計測するのに用いられる．マーカ同士の距離に「REPEAT END」命令とする．REPEAT BEGIN には反復す

応じて PC はプログラムを編集し，プログラムが実行される回数の値をとるオペランドが組み合わされ，REPEATると，実行結果がプロジェクタによってテーブル上に表示

END にはオペランドは組み合わされない．

される．

（４）前進
キャラクタの前進を「FORWARD」命令とする．前進する
距離の値をとるオペランドが組み合わされる．
（５）右旋回と左旋回キャラクタの右旋回と左旋回をそれぞれ「RIGHT」「LEFT」命令とする．マイナスとプラスがプログラムの本質ではないため，右旋回と左旋回とした．回転角の値をとるオペランドが組み合わされる．
3.5 プログラムの編集と実行
図 4 に示すように，本システムは開始時にプログラム編集モードとなる．ここでユーザはオペコードおよびオペランドを入力する．ユーザは，プログラムの開始点である IN
命令に続けて，オペコードを追加し，オペコードには，そ© 2018 Information Processing Society of Japan図 5

インスタレーション構成図897

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

図 6

テーブルに投影した映像とタイル形インタフェース

4.2 プロジェクションによる映像の提示
本システムでは，タイルを配置するテーブルの上部にプ

3A10
2018/3/5

図7

キャラクタによって描かれる図形の例

5. 評価実験と考察

ロジェクタを設置し，そこから映像の投影を行うことで，試作しているシステムの現状までの機能をテストし，研

タイルによるプログラミング操作と映像による実行結果の究的な方向性を評価するための予備実験を行った．マーカ確認を同時に可能にした．テーブルへのプロジェクションによるユーザインタフェースの操作性と，視覚的なフィーの様子を図 6 に示す．今回はキャラクタが図形を描く実行

ドバックによるプログラミング学習効果の検証を着眼点と結果と，ユーザプログラムの状態を表す文字列を投影した．

した．今回の実験では，学習者に提示するプログラミング

マーカの位置情報取得にカメラによる画像認識を用いるタスクの形式が本システムと同様である Logo（ACSLogo

関係上，マーカに人や物の影ができるとマーカが意図した

For Mac OS X[6]）を比較対象とした．

とおりに認識されないことがある．テーブル上のマーカを

実験は 4 名の学生に協力してもらい，2 人ずつのグルー置く領域に白色の映像を投影することによって，人や物のプに分けて行った．一方のグループには Logo を，もう一影をなくしマーカを鮮明に撮影することで，影による画像方のグループには本システムを体験してもらい，共通のプ認識への影響を低減させている．

ログラミング課題に取り組んでもらった．

また本稿の段階では未実装であるが，プロジェクション実験では両グループに同じ内容のレジュメが配布され，を用いることにより，タイルの周囲に情報を提示すること被験者はその内容に従って課題の達成を目指す．レジュメができるという利点もある．ユーザがプログラミングを行には，それぞれのグループの体験するシステムの基本的ななっている最中に，操作上のヒントや，エラーの原因とな操作方法が同じ書式で説明してある．こちらからは実験のっている箇所を示すことなどが可能となる．

大枠だけを説明し，操作方法の説明についてはレジュメに

4.3 画像認識によるユーザプログラムの入力よってできるだけ両グループとも同じ説明となるようにし本システムは，タイルに描かれたマーカをカメラで撮た．加えて，プログラムによって描く図柄を両グループ共影・画像処理し，マーカ間の距離を計測することでタイル通の課題として 4 問出題し，50 分間でプログラムを成功さ同士がつながっているかどうかを判断している．その計測せた時間と数を測った．また，実験後にはアンケートに回には ARToolKit を利用した．

答してもらい，課題とシステムについてのフィードバック

タイルの上面にはマーカが描かれており，カメラでリアを得た．

ルタイムに撮影したマーカ画像をコンピュータで処理する

はじめに，アンケートによって被験者のプログラミングことで，それぞれのタイルの位置を認識することができる．

経験について把握したところ，4 名全員が大学の授業等でマーカ同士の距離が閾値より短ければ，タイル同士が繋がプログラミングを学んだことがあると回答した．しかし，ったとみなし，コンピュータ側のユーザプログラムで命令プログラミングが好きと回答したのは 2 名で，得意と回答の追加を行う．また長ければ，タイル同士が離れたとみなした者はいなかった．つまり，逐次処理や繰り返しなどの，し，命令の削除を行う．

プログラミングに関する基礎知識は持っているが，プログ4.4 本システムを利用したプログラムの実行例

ラミングに熟達したものはいないとして理解できる．これ本システムを利用したプログラムの実行例を図 7 に示す．
ユーザのプログラムが実行されると，テーブル上にプロジェクションされたキャラクタが命令にしたがって動き，こうした図形が描かれる．

© 2018 Information Processing Society of Japanを踏まえて考察を行う．
【ユーザインタフェースについて】被験者が課題の各問に要した時間の測定結果を表 1 に示す．結果として，4 問目まで時間内に達成できたのは 1 名898

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

3A10
2018/3/5

だけであった．全体としては Logo より本システムのほう

表 1

被験者が各タスクに要した時間がやや時間がかかっている．本システムでの操作手順の習得に時間がかかった分，Logo よりも時間が必要であったことが，実験の観察からも見てとられた．また，タイルを探すことや並べることにも時間がかかっていると考えられる．
すなわち，被験者の属性として，キーボードによる文字入力に慣れていたので Logo のほうが，早くプログラミング
表 2 アンケートの回答結果できたのではないかと推測される．
実験後に行なったアンケート結果を表 2 に示す．アンケートでは，Logo グループの方がプログラミング操作をより簡単に理解できたと回答した．また，プログラミング操作自体に関しては，Spider グループの一名があまり簡単に行えなかったと回答している．
今回のレジュメのように，文章による操作手順の説明と，物理的形状をもつタンジブルインタフェースの相性が良くないとも考えることができる．タンジブルインタフェースの手順を説明する際には，実際に目の前で実演するか，動画によるチュートリアルを見せることでより簡単な理解につながると考えられる．
マーカに描かれているピクトグラムの意味はよく理解できたと回答されているが，間違えて配置する様子も観察さ示するなど，システムにはそれらの課題を解決することがれた．ピクトグラムをおぼえることが新たなプログラミンできそうな機能上の余白がまだまだ残っている．今回の予グ上の負担とならないよう，文字も載せるなどの工夫を施

備的な実験を踏まえて改善を進め，プログラミング経験のす必要がある．

ない小学生以下の子どもたちにも実際に体験してもらいた【実行結果のグラフィカルな表現について】い．マーカの種類であったり，表現しうる情報量であった

実験後のアンケートの結果，思い通りにプログラミングり，物理的に多くのマーカを整理してアクセスしやすくすができたか，思い通りにいかなかった場合にうまく修正でる方法も必要となる．このような，さまざまな観点からシきたかについては，個人差のある結果となった．しかし，ステムの改善と実験とを繰り返しながら，総合的によりよキャラクタを動かして図形を描くというタスクは，正しいいプログラミング学習ツールを研究していく．

かどうかがわかりやすく興味が持てたと全員が回答している．キャラクタを前進や回転などの命令によって動かすと謝辞

本プロジェクトに協力されている立命館大学映いう実行結果の具体性が，インタフェースであるマーカの像学部の大島研究室各位に感謝します．本研究は，JSPS 科ピクトグラムとの相性が良いとも考えられる．

研費 16K00288 の助成を受けたものです．

6. おわりに

参考文献

本研究の目的は，小学生程度の児童がプログラミングの[1]

基礎概念を学ぶにあたって、敷居を下げるという試みであ[2]った．キーボード入力や厳格な命令の記述を排除し，プログラムに手で直接触れることのできるタンジブルユーザイ[3]

ンタフェースと，目で見てわかりやすく興味を持続させる[4]

グラフィカルな結果のフィードバックを採用した試作シス
テムの実験により，これらの負荷を取り除くことができる可能性が認められた．一方で，プログラミングになれた人[5]には，ピクトグラムよりも文字による命令の記載、マーカよりもコードの打ち込みのほうが効率がよい．すなわち，習熟レベルによる使いやすさの違いについては別途検討を[6]

文部科学省. 小学校学習指導要領. 文部科学省告示第六十三号. 平成 29 年 3 月 31 日.
Papert, S.. On making a theorem for a child. ACM '72 Proceedingsof the ACM annual conference, 1972, vol. 1, pp. 345 – 349.
シーモア・パパート『マインドストーム―子供、コンピューター、そして強力なアイデア』未来社, 1995
Maloney, J., Resnick, M., Rusk, N. and Eastmound, E.. The scratch
programming language and environment. ACM Transactions on
Computing Education, 2010, vol. 10, no. 4, Article No. 16.
doi>10.1145/1868358.1868363
Patterson-McNeill, H. and Binkerd, C. L.. Resources for usinglego Mindstorms. Journal of Computing Sciences in Colleges,
vol. 16, no. 3, March 2001, pp. 48 – 55.
“ACSLogo For Mac OS X”.
http://www.alancsmith.co.uk/logo/, (参照 2017-12-20).

行う必要がある。
プロジェクションによる操作ガイドや学習のヒントを表© 2018 Information Processing Society of Japan899