情報処理学会研究報告
IPSJ SIG Technical Report

Vol.2017-CE-139 No.3
2017/3/11

指差しインタフェース：
授業中の児童生徒の考えの変容の可視化機能の実装
山崎紗耶†

加藤直樹†

概要：今日の学校現場では，教師の一方向的な講義形式の授業ではなく，児童生徒が能動的に参加する授業が必要とされている．そこで，稲葉らは指差しインタフェースを開発し，児童の考えを表す指差しを教室全体で共有し，主体的な学習を支援することを可能とした．本稿では，特に，学習指導要領の改善及び必要な方策等にある，育成を目指す資質・能力の中の学習を見通し振り返る力に着目し，稲葉らのシステムに，児童の意見の集約を保存し変化が一目で分かる機能を加え，授業の振り返りを容易にする試みについて述べる．

Finger Pointing interfaces:
Implementation of the visualization capabilities of transformationsof student’s ideas in the class
SAYA YAMAZAKI†NAOKI KATO†

Abstract: In today’s school, it is not needed teacher’s one-way class, but interactive teaching. Inaba has developed a pointing
interface and made it possible to encourage proactive learning by sharing finger pointings which shows student’s idea in class. This
paper focuses the ability of expecting and reflecting learning in next curriculum guidelines. We made reflection of teaching easierby adding a function which stores aggregation of student’s thoughts and shows it at glance to Inaba’s system.

課題の対応に生かせることを実できるような、学びの深ま

1. はじめにりも重要になる」とあるように，「主体的・対話的で深い学

1.1 研究の背景び」の実現を求めている[2]．
「主体的・対話的で深い学び」

学校現場に電子黒板や実物投影機，デジタル教科書などの具体的な内容については，次のように整理されている．

が導入され，児童生徒や教師にとって新たな学習空間が形「①学ぶことに興味や関心を持ち、自己のキャリア形成の成されはじめている．文部科学省によると，電子黒板の整方向性と関連付けながら、見通しを持って粘り強く取り組

備状況は前年度に比べ 11,653 台増加し，さらに，タブレッ

み，自己の学習活動を振り返って次につなげる「主体的なト型コンピュータの台数においては平成 27 年度に比べ学び」が実現できているか。……

97,737 台，平成 26 年度に比べ 181,077 台増加し，2 年で 3.5②子供同士の協働，教職員や地域の人との対話，先哲の倍に増加している[1］．今後，情報通信技術（ICT：Informa-

考え方を手掛かりに考えること等を通じ，自己の考えを広tion and Communication Technology）を活用した学習環

げ深める「対話的な学び」が実現できているか。……

境はより身近なものとなってくるだろう．

③習得・活用・探究という学びの過程の中で、各教科等また，幼稚園，小学校，中学校，高等学校及び特別支の特質に応じた「見方・考え方」を働かせながら，知識を援学校の学習指導要領等の改善及び必要な方策等について相互に関連付けてより深く理解したり、情報を精査して考（答申）では，「どのように学ぶか」という観点において，えを形成したり、問題を見いだして解決策を考えたり、思知識・技能，思考力・判断力等，学びに向かう力・人間性

いや考えを基に創造したりすることに向かう「深い学び」

等の 3 つを身につけていくために「学びの過程において子が実現できているか。」

供たちが、主体的に学ぶことの意味と自分の人生や社会のこれら三つの視点を満たすためにも，教員による一方向在り方を結び付けたり、多様な人との対話を通じて考えを的な講義形式の教育とは異なり，児童生徒の能動的な授業広げたりしていることが重要である。また、単に知識を記の参加を取り入れていく主体的な学習が求められる．

憶する学びにとどまらず、身につけた資質・能力が様々な† 東京学芸大学

Tokyo Gakugei University.

ⓒ 2017 Information Processing Society of Japan1

情報処理学会研究報告
IPSJ SIG Technical Report
1.2 双方向的な授業を支援する ICT 機器の研究

Vol.2017-CE-139 No.3
2017/3/11

能，指差しの対象となる資料を電子黒板上からキャプチャ双方向的な授業を可能にする方法として ICT 活用が注目することができるキャプチャ機能，そのキャプチャした画され，特にクリッカーを導入した授業が数多く研究されて像を児童用端末に送信することができる端末連携機能を実いる．クリッカーはリアルタイムの設問提示・回答のグラ装した（図２）．このシステムによって，教師が提示した資フ化が可能であり，児童生徒の理解度をその場で確認する料に対する児童生徒の考えを表す指差しを，教師と児童生ことができる．これにより教師が，児童生徒が理解してい徒全員で共有し，主体的な学習を支援することを可能にしると思い込んで授業を先へ先へと進めてしまうといった事た．

態を未然に防ぎ，児童生徒の理解度を常に把握しながら授2.2 投票機能の拡張業を組み立てることができる．さらに，児童生徒の考えが稲葉らは，二択の質問への考えを可視化するために，２瞬時に解答分布グラフに反映されることは，児童生徒の授つの範囲をあらかじめ設定し，それぞれの範囲内を指差し業への参加意識を芽生えさせる．そして，匿名性を保ちなた児童生徒の数を表示する機能を提案した．

がら解答できるため，挙手などではなかなか参加しない児

しかし，実際の授業では，たとえば「一番早くメトロノー童生徒も，能動的な学習に抵抗感なく引き込むことができムを動かすことができるのは重りをどこに動かした場合でる[3]．

しょう」という発問をしたときには，二択では足りず新た

また，稲葉らは，挙手をした児童生徒を指して発表する
形態の授業では，挙手し発表した児童生徒しか主体的な学な投票する範囲を足す必要がある．また，自分の好きなところに投票する範囲をつくらなければならない．

習が出来ているといえず，教師が児童生徒全員に問題提起

そこで，本研究では任意の場所に，任意の数の範囲をし，その問題を児童生徒一人一人全員が考え，全員が発表指定し，その範囲に入った指差しの数を表示できるようにし，またそれを教室全体で共有することで，児童生徒中心する機能を提案する．の活動が主となった協働的な授業進行ができるとの考えをもった．そこから，電子黒板と学習者用端末を活用して，児童生徒の考えを表す指差しを全体で共有することを可能とし，主体的，協働的な学習の実践を支援することを目指したシステムを提案，開発した[4]．
1.3 研究の目的
本研究では，稲葉らの研究を発展させ，「幼稚園、小学校、中学校、高等学校及び特別支援学校の学習指導要領等の改善及び必要な方策等について（答申）」[2]にあるように，「育成を目指す資質・能力として，教科等を越えた全ての学習の基盤として育まれ活用される資質・能力の中に，見通し振り返る学習を通じて，学習を見通し振り返る力」を児童生徒に身につけさせることを目指す．
本稿では，授業の振り返りにおいて児童の意見の変化が

図１

稲葉らの開発した指差しインタフェース [4]Figure1 Finger Ponting interfaces by Inaba [4].

一目で分かるようにすること，指差しインタフェースを用いて児童生徒がより主体的な学びを展開できるようにすることを目的として行った稲葉らのシステムの改良について述べる．

2. 指差しインタフェースの新たな機能の提案
2.1 指差しインタフェース
稲葉らは，教師が提示した資料（板書や画像など様々なものを含む）に対して，学習者が端末を用いて指差した先を表示し（表示するものをポインタと呼ぶ），教師と学習者全体で共有することで，自分の考えと友達の考えを比較し，様々な考え方があることを認めながら学習していく効果を向上させるシステムを提案した（図１）．
児童がタッチした座標を取得し，サーバーに送信，他の図２

端末連携機能，キャプチャ機能

Figure2 Device link function and capture function.

児童用端末や教師用端末に送信してポインタを表示する機ⓒ 2017 Information Processing Society of Japan2

情報処理学会研究報告
IPSJ SIG Technical Report
2.3 個人特定機能の提案

Vol.2017-CE-139 No.3
2017/3/11

3.1 投票機能

稲葉らのシステムではポインタは赤い丸で統一されて投票機能の項目に加えたい箇所を自由線，図形で囲むこいる．しかし，授業中，電子黒板に表示されたポインタをとで，投票する項目を設定できるようにする．これにより，基に児童生徒に発表をさせたいときなど，授業内容によっいくつも，好きな箇所を投票機能の範囲として使用するこては誰がどのポインタなのか一目で分かった方がよい場合とができる．

がある．

範囲が固定されている投票機能では，賛成か反対か問う

そこで，ポインタに別々の色をつけたり，ポインタ自体場面や 2 つの選択肢からどちらか選ぶ場面で使用する．投を数字に変更したりして，児童生徒ごとで異なるポインタ票する場所を設定する手間を省くため，投票する場所は実で表示できるようにする．

装する段階で設定しておく．

2.4 表示非表示切り替え機能の提案
稲葉らのシステムでは，学習者用端末上にもすべての児童生徒のポインタが表示される．しかし，指差しを行うときに，自分以外の児童生徒のポインタが見えてしまうと，算数の図形をなかま分けする授業など，画像によっては投票する範囲にしたい場所が複雑になっている場合がある．
そのため自由線の範囲を指定できるようにする（図３）．
範囲が，複雑な形ではなくきれいに設定したいときなど，発問に対して深く考えずに，周りの児童生徒のポインタに画像や授業の内容によっては範囲を指定するときに，自由合わせてしまう場合がある．そこで，指差しを行うときは線より，ある程度形が決まっている図形の方が使いやすい

自分以外のポインタを非表示にする．

場合がある．そこで，四角形と円形でも範囲を設定できる

2.5 履歴機能の提案ようにする．

学習を通して，他の児童生徒の考え，意見を聞き，話し

3.2 個人特定機能

合ううちに，前と自分の考えが変化していくことがある．

どの指差しがどの児童生徒なのかすぐに分かるように，児童生徒の指差しの変化を見られるようにすることで，ポインタを児童生徒ごとに固有の色や数字に変えられるよ

振り返りを容易にでき，また，授業中にどのように考えを変えたのかを比較することができる．すると授業の一連の流れをまとめることができると考えられる．

うにする．
発表する児童生徒だけどの指差しなのか知りたい場合
は，全体の匿名性は守りつつ，発表者だけ特定できるよう個人特定機能と組み合わせることで，授業中にどの児童に色で（図４），すべての指差しがどの児童生徒なのか知り生徒がどのような考えの変化を行ったのかを教師が把握し，たい場合は，出席番号と関連付けることで全員を特定するどうして意見をこのように変えたのか，その児童生徒に直ことが出来るように数字で（図５）ポインタを区別できる

接聞き，その返答から全体に新たな発問をし，授業を展開ようにする．

していくことができる．また，授業が終わった後に教師が色で区別する場合は，児童生徒ごとに全て違う色でポイ

児童一人一人の意見の変化を確認し，まとめ，児童生徒のンタを表示し，一目でポインタ同士を区別できるようにす

評価や授業の反省に利用することが容易になる．

る．数字で区別する場合は，出席番号や班の番号と関連付

2.6 解答停止機能の提案

けることで，どの指差しがどの児童生徒か，またはどの班

学習者用端末で指差しを行う時間と他の児童生徒や教かがすぐ分かるようにする．

師の話を聞く時間の切り替えをはっきりさせるために，児童生徒がタブレットを操作してもポインタの位置は変化しないようにできる機能を追加する．

3. 機能と UI の設計

3.3 表示非表示切り替え機能
教師側で操作することで，児童用端末における他の児童生徒のポインタの表示・非表示の切り替えができるようにする（図６）．

教師用端末と児童用端末に分けて UI を設計する．ここでは教師用端末での操作と電子黒板上での操作は同じこととする．
教師用端末では機能を操作するためのボタンを表示し，児童用端末では操作するボタンは表示せず，キャプチャした背景画像と自分のポインタのみ表示するようにする．教師用端末で表示するボタンは児童に見えるようにする必要はないため，電子黒板で操作する際に見える程度の大きさにする．
教師用端末には学習者の指差しを示すポインタをすべて表示する．

ⓒ 2017 Information Processing Society of Japan

図３

投票機能における自由線で範囲を指定する機能

Figure3 The function of specifying the areas by free line.

3

情報処理学会研究報告
IPSJ SIG Technical Report

Vol.2017-CE-139 No.3
2017/3/11

図６

表示非表示切り替え機能

Figure6 The function of indication and non-indication.
さらに，動的履歴機能では，児童生徒全体の変化の流れをみるときのために，２つの場面での指差しのポインタを直線的に移動する方法と，授業中の児童生徒がどのように図４ポインタを色で分ける例

Figure4 Categorizing by point’s colors.

悩んだのか，どのように意見を変えたのかを授業後に振り返るときのために，児童生徒がたどった指差しの軌跡をすべて表示する方法の２通りで振り返ることが出来るようにする．
動的履歴機能において，全体の流れを見るときも個人の指差しの軌跡を見るときも，履歴を残しておきたい場面のときに，教師用端末にあるボタン（以下，履歴保存ボタンとする）を押すことでその時点からの履歴を残していき，別のボタン（以下，履歴再生ボタンとする）で残した履歴を電子黒板に表示していくようにする（図７）．
また，履歴を残す時間が長ければ長いほど，表示するときにも時間がかかってしまい，授業中，他の活動をする時間が減ってしまう．そこで，速さの度合いが目で見てすぐ分かるようにするためスライドバーを使って，ポインタの動きを再生する速さを変えることができるようにする．
3.5 解答停止機能

図５

ポインタを数字で分ける例

Figure5 An example of categorizing point’s number.

教師が，児童生徒にタブレットを操作するのではなく，電子黒板や発表する児童に注目して欲しいときに，児童生徒がタブレットをタッチしてもポインタが動かないように児童生徒が指差しする際に他の児童生徒の意見に惑わする．教師が解答停止ボタンを押した瞬間に児童用端末がされることがないよう，基本的には児童用端末には自分の動かせなくなるように，もう一度押すとポインタが動くよ

ポインタの位置しか表示せず，教師用端末では全員分のポインタの位置を表示できるようにする．
3.4 履歴機能
児童生徒の意見の変化を見られるようにする方法として，任意の２場面での指差しの状況を並べて比較できるようにする方法（静的履歴機能）と，その２場面の間の指差しの動きで変化を見られるようにする方法（動的履歴機能）の２つを提供する．
授業中，ある発問をした際に，この２つの機能を使用して，最初の指差しと，話し合いや議論をした後の指差しを比較することで，授業のまとめ時に振り返り，授業全体の流れが整理できる．

図７

動的履歴機能における表示の仕方

Figure7 Two dynamic indicate functions of transformationsof student’s ideas.

ⓒ 2017 Information Processing Society of Japan4

情報処理学会研究報告
IPSJ SIG Technical Report

Vol.2017-CE-139 No.3
2017/3/11

うにする．

4. 実装
4.1 開発環境
本システムでは，稲葉らが試作したシステムと同様，OSに依存することなく web ブラウザ上で動くように HTML5と JavaScript を開発言語とした．教師用端末と児童用端末の通信では，サーバーとクライアントで双方向通信ができる WebSocket を利用した．
電子黒板から指差しの対象となるキャプチャした画像を送信するためには Apache HTTP Server を使用した．また，指差しの情報を送受信するためには電子黒板と，児童用端末の双方向かつリアルタイムな処理を行うことが可能な
Node.js を使用した．
実装するにあたって，HTML で図形，自由線を描画できるようにするために，JavaScript ベースで図を描くことがで

図８

きる Canvas を使用した．

静的履歴機能Figure8 the static indicatie function of transformations

4.2 システムの実装

of student’s ideas.

4.2.1 投票機能の実装方法
投票機能では，投票する範囲にあたる図形，自由線の中にポインタがあるかないかを判定するためには，canvas の5. 履歴機能を使用した授業実践

メソッドのうちの 1 つである，isPointInPath を使用した．

5.1 授業実践の概要

4.2.2 個人特定機能の実装方法

小平市立小平第七小学校の 5 年生少人数クラスで，実装個人特定機能では，誰がどのポインタなのか，色と数字した履歴機能を使用した授業を筆者が行った．習熟度別にで特定できるようにした．1 学級は大体 35 人前後と考え，3 つに分けたクラスのうち，習熟度は一番下のクラスであ40 通りのポインタの種類を用意した．

り，1 人 1 台タブレット端末を配布して行った．

数字でポインタを特定する際には，丸に囲まれた数字の内容は算数「百分率とグラフ」の 8 時間目であり，割合画像を表示することでポインタを表示した．背景の画像とを表すグラフの導入である．教科書は東京書籍社「新しい同化して見えづらくならないように，数字の周り，丸に囲算数 5 下」を使用した．

まれている内部だけ背景を白くした．
4.2.3 履歴機能の実装方法
履歴機能において，履歴を残し表示する方法を，静的履
歴機能と動的履歴機能で分けて実装した．
静的履歴機能では，保存のボタンを押した時の状態（指差しの位置と背景となっている画像）を画像として保存（キャプチャ）し，任意の二つの状態を並べて表示することができるようにした（図８）．
児童生徒の指差しの軌跡全てを振り返る場合は，記録し教科書 66 ページの表と独自で作った表の帯グラフ，円グラフの色と県を消し，どこに何が入るかわからない帯グ
ラフ，円グラフを用意する（図９）．教科書は使わず，帯グ
ラフの中のどこに何県が入るか考えていきながら，帯グラ
フ，円グラフの特徴に気付けるようにすることが授業のめあてである．
帯グラフ，円グラフに何が入るのか自分の考えを示すと
きに本システムの指差し表示機能を使用し，授業の最後に授業の流れを振り返ることを目的として履歴機能を使用した座標を利用してポインタ表示する．履歴記録開始時と終た．

了時の二点間の変化だけを振り返る場合には，二点をそれ5.2 結果

ぞれ始点と終点として，css の transition プロパティを使っ

ここでは，今回の授業実践で得られた結果を述べる．授て，移り変わりをアニメーションで表示する．二点間を移業中，話し合う時間にはお互いのタブレットを覗き見なが動する際は，すべての児童生徒のポインタの移動を把握でら活発に話し合う姿が見られた．また，発問をしてすぐにきるようにする必要から，すべてのポインタの移動開始と解答するため，間違えている児童に机間指導で対応したり，終了のタイミングを同じにし，同時に始点から出発し同時間違えた児童の考えを使って授業を広げたりすることがでに終点に到着するようにした．

きた．
今回の授業では児童の考えの妨げになると考え児童用端末に他の児童のポインタを表示しなかったが，どこが多ⓒ 2017 Information Processing Society of Japan5

情報処理学会研究報告
IPSJ SIG Technical Report

Vol.2017-CE-139 No.3
2017/3/11

いのか一目で分かるようにするため，電子黒板には児童のポインタをすべて表示した．それにより，授業をやっている中で，児童は児童用端末をタッチするときに，電子黒板

Figure10 The scene of class using the system.
であるという課題も指摘いただいた．
2 点間を移動して振り返る機能は，例えば道徳の授業で，を見て他の児童のポインタを見て変えることが多くあった．

自分がやりたいこととやりたくないこと，世間一般の良い

また，今回の実践中に「和歌山県はどこか」という発問

ことと悪いことを 4 つの象限に分け自分の考えに一番近いに対し児童が指差しをし，自分の考えを話し合って答えをところを授業の前に指差し，話し合った後にもう一度指差出した後に，「熊本県はどこか」という発問をした．すると，し，変化を動的に見て振り返るという授業であれば，落と決められた時間を過ぎても和歌山県の場所にポインタを置しどころがあり，児童が自分のポインタや全体の履歴の変いている児童が見られた（図１０）．

化を見ることができるため有効であるという評価をいただ

5.3 評価いた（図１１）．

考察するにあたって授業の様子を撮影した映像を，本学藤原裕特命教授に見ていただき，ご意見をいただいた．

また，電子黒板上であっても自分以外のポインタが見えてしまうということは，使用する際には教材・題材の特質を理解したうえで使用しないと考えない子どもを育ててし本システムを使用して，児童の指差し位置を逐次保存し，どの児童がどこで躓いているのかを見る事で，必要な子に必要な手で対処することができるため，評価につなげる機能としては有効である．一方で，2 点間で動的に振り返るまう危険性があるという課題も指摘いただいた．
5.4 考察
授業実践の考察を，結果と評価からシステムの機能に注目して次に述べる．には，背景の画像にしっかり意味がある上で，全体として電子黒板をみて自分の解答を変えてしまう児童がいる

どのような動きをしたのかを見せることで児童に学びがな

問題に対しては，電子黒板においても，児童がポインタをいとアニメーションにして動かす意味がないという評価を押している間は電子黒板に表示せず，児童が全員児童用端いただいた．

末をタッチした後に，すべてのポインタを表示する機能を一方で，児童が児童用端末をタッチした瞬間ではなく児追加するといった対処が必要である．

童が全員タッチした後にすべてのポインタを提示する機違う発問をしてもそのままポインタの位置が同じまま

能，授業内での複数回行う発問ごとに電子黒板に表示されの児童に対しては，前の発問の答えをしっかり理解しておているポインタをすべて消し，リセットする機能が必要らず，本当にそこが答えだと思ってポインタを指しているのか，まだ考えている途中でポインタを動かしていないのかが今のシステムのままでは教師が判断することができな
い．そこで，1 つ発問をした後に電子黒板に表示されているポインタを一度すべて消し，リセットする機能を追加することで解決できると考える．
今回の授業では，履歴機能を，授業を振り返りまとめる事を目的に使用したが，藤原裕特命教授の評価を基にする

図９

県と色を消した帯グラフと円グラフ

Figure9 Two band charts and a circle chart
without colors and the name of prefecture.

図１１
図１０

授業中の使用風景ⓒ 2017 Information Processing Society of Japan

履歴機能を使用する時の四象限の図の例

Figure11 The example of four quadrants

6情報処理学会研究報告
IPSJ SIG Technical Report

Vol.2017-CE-139 No.3
2017/3/11

when the indicate function of transformationsof student’s ideas is used.と，道徳などの正解のない問題を考えていく授業の方が授

参考文献

業全体を通した自分の考えの変化を児童個人が振り返りま[1] 文部科学省 平成 27 年度 学校における教育の情報とめることができるため，主体的な学びを支援することができるという点で有効であると考えられる．
藤原裕特命教授の，指差しに匿名性があることは児童が授業中に自分の考えを指差す際に良いという評価から，その点においては主体的な学びを支援することができたと考えられるが，本研究で追加した新たな機能で主体的な学びを支援することを示すには、今回の授業構成では教材・題材を生かした授業ではなかったこと，二点間の振り返りを化の実態等に関する調査結果 (2016)[2] 文部科学省 幼稚園、小学校、中学校、高等学校及び特別支援学校の学習指導要領等の改善及び必要な方策等について（答申）(2016)[3] 兼田真之他：クリッカーを用いたピア・インストラク
ションの授業実践，物理教育 57-2 pp.103-107 (2009)[4] 稲葉他：板書や掲示物を場とした協働的な学習を支援する指差しインタフェース，ヒューマンインタフェー
スシンポジウム 2014 論文集, pp.193-196 (2014)

見せることによって児童に学びがあったというには難しいことから，教材・題材を生かした授業，例えば道徳の授業での評価実験が必要である．
5.5 授業実践のまとめ
今回の授業実践では，常に児童のポインタの位置を保存し，後に振り返ることで，評価につなげるという面では有効である可能性が示された．しかし指差しインタフェースを使用して児童がさらに主体的な学びが展開できるようにするためには，児童の考える力を育てるために，一斉に児童のポインタを表示する機能などさらに新たな機能を足す必要があること，二点間の直線で履歴を振り返るときには，教材・題材のもっている特質を理解した上で，児童に学びがあるときでないと効果的に使用することができないということが分かった．

6. おわりに
本稿では，主体的，協働的な学習の実践を支援することを目的として稲葉らが開発した指差しインタフェースに，児童生徒，教師が授業の振り返りを容易にできるようにすること，また，指差しインタフェースを用いて児童生徒がより主体的な学びを展開できるようにすることを目的として行った，児童の意見の変化を一目で見ることができる履
歴機能，どのポインタが誰のものなのかを明らかにする個
人特定機能といった新しい機能の追加，実装について述べた．
授業実践からは，児童の思考の過程を保存する履歴機能が有効である可能性が示された．また，追加する必要がある機能や改良すべき点を知ることができた．
今後はさらに多くの授業で使用，評価し，システムの改善，新たな機能の提案，開発をしていくことが課題である．
また，新たな機能によって指差しインタフェースを用いて児童生徒がより主体的な学びを展開することができるかを評価する実験を行うこと，及びそれぞれの機能が主体的・対話的で深い学びにつながる授業（単元）を探っていきたい．

ⓒ 2017 Information Processing Society of Japan7