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

2B-49
2019/3/6

黒板上での図形描画を支援するインタフェースの提案
秀徳祐太†

加藤直樹†

概要：小学校算数科「図形」領域の授業では，授業者が図形を提示しながら授業を行う必要があり，黒板に綺麗に簡単に素早く図形を描画することが重要である．本稿では，授業者が黒板上に書いた図形の 1 辺もしくは 2 辺を描くと，次に続く描画を導くガイドを表示することによって，図形描画に必要な点や辺の決定を支援するインタフェースを提案し，そのインタフェースの実現可能性と有用性を検証するために実装したシステムの設計と試作について述べる．

1. はじめに素早くできるようすることを目標に，授業者が黒板上に図形の 1 辺もしくは 2 辺を描くと，次に続く描画を導くガイ

平成 29 年 3 月に公示された次期小学校学習指導要領でドを表示する図形描画支援インタフェースを提案する．表は，「図形」領域を「図形を構成する要素などに着目して図示するガイドは，簡単さと素早さのために，高さや向きと形の性質を考察したり，それを活用したりする資質・能力

いった図形の属性の指示をせずに描画ができるようなものを育む」領域と位置付け，現行学習指導要領の「量と測定」とする．たとえば二等辺三角形を描画する際は，1 辺を描領域で取り扱っていた図形の面積の計算が「図形」領域にいた後に次の 1 辺の端点を決定し辺を描くことが難しいこ移行されている．図形の性質とそれを用いた考察や計量がとを助けるために，その端点となる点が存在しうる場所をより重要になっている．

示すガイドを表示する．

黒板を用いた授業で図形を扱う場合，黒板に直接図形を2.2 描画支援ガイドの設計描いたり，授業前に授業で使用する図形を拡大印刷した模ガイドは小学校算数科で扱う図形のうち，直角三角形，造紙等を用いたりするが，後者は授業準備に時間や手間が正方形，長方形，二等辺三角形，正三角形，平行四辺形，かかる問題がある．一方，黒板上の決められたスペースにひし形，台形，円を対象とする．

綺麗に素早く図形を描くことは，特に経験の浅い教員や算ここでは説明のため，授業者が最初に引いた 1 辺の左端数に長けていない教員にとって簡単ではない．綺麗な図形を点 A，右端を点 B，3 つ目の点を点 C，それ以降の点をを描くために黒板用のコンパスや分度器等の教具を用いる

点 D と表記する．と，時間がかかってしまう問題もある．

2.2.1 直角三角形の補助ガイド

これらの問題に対しては情報通信技術を適用した機器を用いた支援が有効と期待されている．図形を提示するこ

直角三角形を描画する際には，1 辺を描いた後に，どの角を直角にするかによって 3 点目を取る位置が変わる．とに対しては大型提示装置，特に提示した図形に書き込み

角 A もしくは角 B が直角となる場合は，点 C は点 A もながら説明するためには電子黒板の利用が有効である．ししくは点 B を通る辺 AB の垂線上になるため，点 A と点 B

かし，電子黒板の普通教室における普及率が 26.8％にとどにその垂線を表示する．角 C が直角となる場合は，点 C はまっている点[1]，黒板は板面が広いことによって，複数の辺 AB が直径となる円上となるため，辺 AB を直径とする情報を同時に提示できる点，必要な情報を授業中残してお円を表示する（図 1）．

き授業の流れを最初から最後まで見渡せるようにできる点

2.2.2 二等辺三角形及び正三角形の補助ガイドなどから，黒板を利用することにも十分なメリットがある．

二等辺三角形を描画する際には，1 辺を描いた後に，どそこで本稿では，黒板への図形の描画を，綺麗に，簡単の辺を底辺とするか，どの 2 辺を等しくするかによって 3に，素早くできるように支援するインタフェースを提案し，そのインタフェースの実現可能性と有用性を検証するため点目を取る位置が変わる．
辺 AB が底辺となる場合は，点 C は辺 AB の垂直二等分に実装したシステムの設計と試作について述べる．

線上になるため，辺 AB の垂直二等分線を表示する．辺 AB

2. 図形描画支援インタフェースの設計が斜辺となる場合は，点 C は辺 AB を半径とする円上にな

2.1 基本コンセプト
本研究では，黒板への図形の描画を，綺麗に，簡単に，るため，それぞれ点 A，B を中心とし，辺 AB を半径とする円を表示する．
正三角形を描画する際には，最初に書いた 1 辺の長さと他の 2 辺の長さが等しくなる 3 点目を示したい．その点 C†東京学芸大学
Tokyo Gakugei University© 2019 Information Processing Society of Japanは上記の二等辺三角形の補助ガイドとして表示した点 A，654

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

図12B-49
2019/3/6

図5

直角三角形のガイド

2 辺に対するガイド

2.2.3 正方形及び長方形の補助ガイド
正方形を描画する場合，最初の 1 辺を描いたときに，その辺を含む正方形の他の 2 点の取り方は 2 通りとなる．辺AD と辺 BC が最初に描いた辺 AB と等しい長さかつ垂直となるように点 C，D をとれば良いので，その 2 点を表示する．（図 3）．
長方形を描画する場合， 1 辺を描いた後の 2 点が同じ高さとなる必要がある．点 C，D は点 A 並びに点 B を通る辺AB の垂線上の点となるため，その垂線上の点を等間隔で表示することで高さを合わせやすいようにする（図 3）．
図2二等辺三角形及び正三角形のガイド

2.2.4 円の補助ガイド
円を描画する際には，中心からの距離が等しくなるように円を構成する点をとることが難しい．
最初に描画した辺 AB を描画したい円の半径とみなし，辺 AB が半径となる円をそれぞれ点 A， B を中心として 2つ表示する．円をなぞって描画したあとに辺 AB を消すことで円のみを残すことができる（図 4）．
2.2.5 ひし形の補助ガイド
ひし形を描画する際には，最初の 1 辺を描いた後にその辺と等しい長さになるように隣り合う辺を描き，残りの 2辺がどちらも向かい合う辺と平行になるように描く．

図3

正方形及び長方形のガイド

点 C は辺 AB を半径とする円上になるため，それぞれ点A，B を中心とし，辺 AB を半径とする円を表示する（図 4）．
辺 AC が引かれた後，最後の点 D は点 C を通り辺 AB と平行な線と，点 B を通り辺 AC に平行な線の交点となるため，その 2 つの線を表示する（図 5）．
2.2.6 平行四辺形及び台形の補助ガイド
平行四辺形を描画する際は．ひし形と同様に隣り合う２辺を描いた後に，向かい合う 2 辺の組がどちらも平行となるように残りの点をとる．
2 辺 AB，AC を描いた後，点 D は点 C を通り辺 AB と平行な線と，点 B を通り辺 AC に平行な線の交点となるた

図4

円及びひし形の 2 辺目のガイド

め，その 2 つの線を表示する．
台形を描画する際には，隣り合う 2 辺を描いた後に，向B を中心とした 2 つの円の交点になるため，二等辺三角形の補助ガイドと同様となる（図 3）．

© 2019 Information Processing Society of Japan

かい合う 2 辺の組のどちらかが平行となるように残りの点をとる．

655

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

2 辺 AB，AC を描いた後，点 D は，点 C を通り辺 ABと平行な線もしくは点 B を通り辺 AC に平行な線上になる
ため，その 2 つの線を表示する（図 5）．
2.3 表示ガイド切り替え
前節で設計したガイドはほぼ同じ表示要素からなるため，

2B-49
2019/3/6

2.4.2 白線検出
白線検出の実装には，差分抽出，色抽出，輪郭抽出，直線検出，色空間の変換処理を用いる．
白線検出までの画像処理として，まず授業者が図形の辺となる白線を描く直前の黒板の画像と描いた直後の黒板の基本的に，すべてのガイドを同時に表示する．なお，描い画像を RGB 色空間として取得する．それぞれの画像に対た線が 1 本の場合は，ひし形，平行四辺形，台形以外のガして HSV 色空間に変換する．この処理によって，彩度やイド（図 7），2 本の場合は，ひし形，平行四辺形，台形の明度による白線の抽出が可能となる．この画像同士を差分ガイドだけを表示する．

検出処理にかける．この処理によって，白線を描く直前とただし，すべてのガイドを表示すると見にくい，わかり直後の画像で変化した部分が求められる．

づらいことも考えられる．そこで，表示するガイドを切り次に，授業者が線を描いた直後の画像を色検出にかける替えられるようにもする．切り替えは，授業内で描く図形ことで，線が描かれた後の画像内の白色の部分を抽出し，が一意に決まっている場合のためにシステムを起動した時

この画像と差分検出の結果として得られた画像の一致部分と，決まっていない，決めるのが面倒な場合のためにシスを求めることで，線が描かれた後に増えた白い部分を取得

テム利用時のどちらでもできるようにする．後者においてする．

は，操作時に操作部分を見なくても操作できるトグル型と，さらにこの画像に輪郭検出をかけることで，線が描かれ素早く目的のガイドを表示できるように図形を選択する型

た後に増えた白い部分の輪郭を取得する．その輪郭情報にの両方を用意する（図 7）．

対して直線検出を行うことで，線が描かれた後に増えた白2.4 実装方法の設計

い直線部分を求めることができる．

2.4.1 基本方針

以上の処理を行うことによって得られる，線が描かれた

前節で記したガイドの表示には黒板に投影できる状態

後に増えた白い直線部分を黒板に引かれた白線とみなすこで設置してあるプロジェクタ型大型提示装置を用いる．まとで，授業者がチョークで引いた白線の検出を可能としてた，表示するガイドを決定するには黒板に描いた線を認識いる．

する必要がある．そのために黒板面をカメラで撮影する．

3. 図形描画支援システムの試作
提案する図形描画支援インタフェースの実装可能性の検証，及び評価のために，インタフェースを実装した図形描画支援システムを試作した．
3.1 ターゲット環境
黒板面を撮影する web カメラとしてロジクール社のWebcam Pro 9000 を用いた．黒板面にガイド等を表示するためのプロジェクタ型の大型提示装置としてリコー社のWX4141N を使用した．Web カメラとプロジェクタを接続したパーソナルコンピュータの OS は Windows10 とした．

図6

1 辺に対するガイド

3.2 操作方法
3.2.1 授業前の操作
授業前に行う支援インタフェース使用のための準備を簡単に素早くできるよう，パソコン上でマウスのみの操作で行えるようにした．ここで行う操作は，表示するガイドの指定，キャリブレーション，色検出のためのチョークの色の指定である．
(1) 表示ガイドの指定
前節 2.3 で記した通り，必要であれば，システム起動時に表示するガイドを選択する．
(2) キャリブレーション
本システムでは，描いた線に合わせてガイドを表示する
ために，カメラからの入力とプロジェクタからの出力の座

図7選択型とトグル型© 2019 Information Processing Society of Japan

標系を合わせることが必要となる．カメラやプロジェクタ

656

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

2B-49
2019/3/6の配置は授業を行う教室によって変わるため，それに対応にした．また，全表示と書かれたボタンでは全種類のガイさせるための設定を行う．

ドを表示し，非表示と書かれたボタンでは非表示にできる．

(3) チョークの色の指定
教室の明るさ等によって，チョークの白線検出に用いる

4. おわりに

画像内の白線が持つ HSV 色空間における色相，彩度，明本研究では，小学校算数科の授業を対象とし，黒板への度の数値も変わるため，授業前に制御用のパソコンに映し図形の描画を，綺麗に，簡単に，素早くできるようするこた黒板面の画像内にある白線をクリックすることで教室にとを目的として，授業者が黒板上に図形の 1 辺もしくは 2合わせて白線の持つ値を事前に取得，調整を行う．

辺を描くと，その後の描画を導くガイドを表示する図形描

3.2.2 授業中の操作

画支援インタフェースの提案と，実現可能性と有用性の検

授業中の操作は，授業の進行をなるべく妨げないように，携帯型デバイスから指示する方法によって，チョークを持ったまま行えるようにした．

証のためにこのインタフェースを実装したシステムの設計と試作を行った．
ガイドは小学校算数科で扱う図形のうち，直角三角形，正方形，長方形，二等辺三角形，正三角形，平行四辺形，(1) 白線描画の画像取得
前節 2.4.2 で述べた通り，授業者が描画した白線の検出

ひし形，台形，円を対象とし，高さや向きといった図形のには，線を描く直前と直後の黒板面の画像が必要となる．

属性の指示をせずに描画ができるように設計し，その表示ここを自動化することは現状難しかったため，授業者が描を切り替える機能を実装した．

画する図形が平行四辺形，台形，ひし形以外の場合は最初

今後は提案したシステムの評価実験を通し，システムをの 1 辺，平行四辺形，台形の場合は 2 辺，ひし形の場合は使用して描いた場合と，しないで描いた場合に対して，図最初の 1 辺と次の 1 辺の 2 回とも，描く直前と直後で，そ形を描くための点の決定が簡単にできたか，描いた図形がれぞれ携帯型デバイスの画面上に配置した描画開始・終了綺麗であったか，図形を描くことにどれほど時間がかかっ

ボタンをタッチすることで黒板面の画像を取得する合図とたかを比較し，提案したインタフェースの有用性を検証すした．描画開始と描画終了を同時に選択する場面がないた

る．それをもとに，より簡単に，綺麗に，素早く図形を描

めボタンはトグル型として，描画開始と描画終了の表記がくことのできる図形描画支援インタフェースと操作方法の切り替わるようにした（図 8）．

設計を行う．また，小学校算数科で扱う図形である多角形(2) 補助ガイド表示切り替えについてのガイドの設計も進める．

前節 3.2.1 で述べた表示ガイド指定によって，複数の補助ガイドを分けて表示することを選択した場合，描画時に表示ガイドを切り替える必要がある．

参考文献[1] 文部科学省：学校における教育の情報化の実態等に関する調査結果（2018）

この切り替えは，携帯型デバイスの画面上に配置したボタンに対するタッチ操作でガイドの表示切り替えを行えるようにした（図 8）．無地のボタンはタッチ操作を行うたびに表示されるガイドが切り替わるトグルボタンである．片手で持った際に親指との距離が近い画面下部に配置することで画面を見ずに表示切り替えの操作が行えるようにした．
一方画面上部に配置したボタンは図形の種類ごとに分けて，画面を見ながら表示したいガイドを素早く決定できるよう

図8

図形選択方法© 2019 Information Processing Society of Japan657