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

1B41
2018/3/5

なぞるインタラクションを模擬する第三角法習得補助教材
光永 法明1,a)岡田 隆†1

概要：中学校技術・家庭科 技術分野では第三角法による投影法を学習する．投影法の学習について教材・教具の提案や教育実践がこれまで多く報告されている．一方で投影法の理解を苦手とする生徒は，投影法の理解の前提となる，立体の形状の把握が苦手な可能性がある．本報告では，そういった生徒が立体の輪郭をなぞるインタラクションを模擬した体験により形状を把握する練習ができ，投影法の理解を補助する教材として開発した TraceIt について概要と中学生が利用した結果について報告する．実際に利用した中学生は少なかったが，理解の補助につながる可能性が示唆された．

1. はじめに中学校技術・家庭科技術分野（以下，技術科）では，構想の表示方法を知り，製作図をかけるようになることが求められている [1]．技術科では，一般に製作図に第三角法による正投影が指導される．第三角法による正投影で用いられる投影法の理解，つまり，立体と第三角法による正投影図（以下，三面図）の関係の理解が必要であるが，生徒には必ずしも容易ではない．そのため，これまでに教材・教具などが提案され，授業実践が報告されてきた．たとえば正投影は立体をみたままに書くのではなく投影面へ投影された外形を書くことを理解できるよう，アクリル板を用いた教材 [2] が提案されている．また 3D CAD が一般的になる以前より，透明な教材とパソコン上で立体を描くことで理解を深める教育実践が報告されている [3]．
一方で投影法の理解の前に立体の形状の把握が必要であると考えられるが，その点を指摘した研究報告は筆者が調べた中では見当たらなかった．立体の形状の把握は，実際の立体であれば輪郭をなぞったり，頂点を触るなどすれば易しいと考えられる．しかしながら複数の立体模型を実際に用意し，生徒に手渡すことが難しい場合も多いと考えられる．そこで，筆者らはコンピュータ上で立体を表示し，立体の輪郭をクリックし，輪郭をなぞるようにマウスをドラッグすると三面図上での対応点を表示し，投影法の理解を補助する教材 TraceIt を開発してきた [4], [5]．本報告では，それらを整理し報告する．

2. 投影法の理解を補助する教材 TraceIt
TraceIt の開発には Processing 言語 (Processing IDE
バージョン 2) を用い，OpenGL ライブラリと PPopup-Menu ライブラリ [8] を使っている．Processing が動作す
る OS のうち，Windows, Mac OS X 上での動作を確認している．

TraceIt の画面を図 1 に示す．画面上部は現在の状態等を表示するステータスエリアで，表示する立体を選択するボタンとチュートリアル開始のボタンがある．左下が三面図で，三面図の左上が平面図，左下が正面図，右下が右側面図である．三面図の右が立体表示（投影面の表示を含む）である．画面右は，各種設定ボタンのあるツールエリアである．

2.1 立体の形状把握のための補助
立体の形状を把握するために，様々な角度から観察し，手に取り立体の輪郭をなぞるインタラクションをコンピュータ上で模擬する．立体の向きを変えるには，立体上を右クリックしてドラッグするか，ツールエリアの [回転] ボタンをクリックして立体上で左クリックしてドラッグする．[回転リセット] ボタンをクリックすると，立体の向きを初期値に戻す．
実際の立体の輪郭線をなぞるインタラクションの模擬として，輪郭線をクリックし線上をドラッグするとそれが分かるよう太線で表示する．図 1 では立体図の右上の部分は以前になぞった輪郭が太線で表示されており，O から A までをドラッグしたところである．ステータスエリアには，

1†1a)

大阪教育大学
現在，羽曳野市立高鷲南中学校
mitunaga@cc.osaka-kyoiku.ac.jp© 2018 Information Processing Society of Japan

なぞった輪郭線の本数を表示している．

341

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

図 1

1B41
2018/3/5

TraceIt の画面を示す．頂点 O, A 等は説明用であり使用時には表示されない．

2.2 投影法の理解の補助
投影法の理解を助けるため立体を覆うように第三角法にズへの挑戦を促す．なぞり終えていない場合はダイアログに，なぞっていない輪郭線の本数を表示する．

よる正投影の投影面（正面，平面，右側面）を表示する．

[三面図クイズ] ボタンをクリックすると，三面図の問題投影面は非表示にもできる．[投影面展開] ボタンをクリッを出題する．三面図上のランダムに 1 箇所の線分が太線もクすると，投影面に立体の各頂点が投影される様子を，正しくは丸で表示されるので，対応する立体図の輪郭線をな面，平面，右側面の順にアニメーションで表示してから，ぞって解答する．

平面，右側面が正面に並ぶように展開するアニメーションを表示する．

2.4 ブラウザで動作する TraceIt

また図 1 のように，立体図上をクリック，ドラッグする

Processing IDE や Processing IDE で作成した TraceItと対応する三面図上の点，線分が分かるよう丸あるいは太を動作させるバイナリをダウンロードすることなく利用し線を表示する．たとえば，立体図の点 A をクリックするたいという要望に応えるため，TraceIt をブラウザで動作さ（もしくはドラッグして，マウスカーソルがその位置にあせる．そこで Javascript 言語で書かれた Processing.js ラる）と，平面図の点 A1 ，正面図の点 A2 ，右側面図の点 A3

イブラリ [7] を用いる．Processing.js を使うと Processingに丸を表示する．点上の丸はマウスボタンを押している間言語のプログラムを少ない修正でブラウザ上で動作させらだけ表示する．点 O から点 A までの輪郭線をドラッグすれる．TraceIt も多少の書き換えで，Windows と Mac OSると，ドラッグされている部分の線分 OA，平面図の線分

X 上での Mozilla Firefox, Google Chrome と Mac OS X 上

O1 A1 ，正面図の線分 O2 A2 が太線になり，右側面図の点の Safari で動作するようになった．

A3 に丸を表示する．なぞった線分は図 1 の L, L1 , L2 , L3のように太線のままで，なぞった部分がわかる．

一方で，Windows 上の Internet Explorer, Edge，AndroidOS の Chrome，iOS の Safari ではうまく動作しなかった．

図 1 の三面図上の任意の点をクリックするとその点と，また動作するブラウザでも動作が重く感じることがあっそれに対応する立体を覆う投影面上の点に丸を表示する．

た．動作が遅いのは，ウィンドウ内の描画とマウスやキー

そして，立体図には投影面から垂直に立体に向けて投影線ボードなどの処理を毎秒 30 回行っていることが一つの要を表示し，三面図のほかの面には投影線を表示する．

因と考えられる．

2.3 なぞりによる学習

3. TraceIt の評価

立体図，三面図はどちらも立体の輪郭線を平面上に表し

大阪教育大学 教員養成課程 技術教育専攻の学部生 12 名たものである．正しく平面上で立体を表現するには，立体と大学院生 2 名に TraceIt (Processing 版) を実際に使用しのすべての輪郭を把握し，どのように表現するか理解するてもらい，使用感を質問紙を用いてたずねた．使用感をた必要がある．そこで，なぞった輪郭線を太線で表示するだ

ずねる質問は 6 つで，回答は 1 全くそう思わない，2 そうけでなく，立体の輪郭をすべてなぞったかを判定する機思わない，3 ややそう思わない，4 どちらでもない，5 や能を設けている．[なぞれたかを判定] ボタンをクリックすやそう思う，6 そう思う，7 非常にそう思う，からあてはると，その判定をする．なぞり終えていればダイアログにまるものを選び，数値にをつける．また自由記述で気づい「すべてなぞり終わったよ！」と表示し，別の立体やクイたことを記入してもらった．使用感の質問と回答の平均値© 2018 Information Processing Society of Japan342

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

表 1

1B41
2018/3/5

TraceIt の使用感をたずねる質問と回答の平均値

質問

図 2

回答の平均値Q1. 初めてみたとき，直感的に本教材の使い方がわかりましたか？

5.4

Q2. 本教材の操作性はどうですか？

6.1

Q3. 三面図と立体図との対応関係はわかりやすかったですか？

6.4

Q4. 本教材を用いると，三面図に対する理解が容易になると思いますか？

5.9

Q5. 本教材を用いることで，三面図に対する理解が深まると思いますか？

5.9

Q6. 本教材を授業等で使ってみたいですか？

5.9

理解度調査で提示した立体の三面図
図 3 理解度調査で提示した回答の選択肢を表 1 に示す．
表 1 をみると Q2〜Q6 の評価は 5.9 以上であり，直感的に操作でき，操作性や，図の表示に問題はなく，三面図の理解につながる教材で，授業に利用したい教材であると評価されたと考える．一方で，初見での使い方の分かりやすさ (Q1) については平均値が 5.4 と他の回答よりやや低い．
これは本教材の導入に少し難しさがあり，最初に表示するチュートリアルに改善が必要かもしれない．自由記述への回答では，正面図とする面を変更したい，新しい立体を簡単に追加できるとよいという要望があった．

4. 中学生を対象とする調査
神戸市内の公立中学校の 2 年生を対象に，技術科で第三角法の指導をし演習をする前（演習前）と演習後に調査を

図 4

演習前後での正解数毎の全回答者に占める割合．演習前より後の方が正解数が多い方に偏る．

行った．調査は技術科教員が技術科の時間に最初の 5 分を使って多肢選択式の小テスト形式で行った．図 2 にあげるを利用した生徒 6 人の場合は得点が下がる生徒はいなかっ

5 つの三面図について，対応する等角法で描かれた図形をた．TraceIt では図 2 の (d) と (e) の図について学ぶことが選択肢 (図 3) から選び回答する．演習前の小テスト後にできる．しかし，それらを誤答している生徒もおり，丸暗TraceIt (ブラウザ版，インターネット上に公開したサーバ

記で解いたとは考えにくく，TraceIt に一定の効果がある上に用意) を紹介する．演習前後で同じ小テストとし，授可能性が示唆される．また利用した生徒の一人が小テスト業成績には含めないことを伝えている．小テストは欠席をの余白に「とても楽しく学べてます」と感想をくれた．

除き 144 名の回答を得た．TraceIt を利用した生徒は 6 名であった．

TraceIt の利用者が少なかったのは中学校の PC のブラウザが Internet Explorer のみで利用できなかったこと，ま図 4 に演習前後の正解数毎の全回答者に占める割合をた家庭の PC でも Firefox，Chrome などがインストールさ示す．演習後はより多くの問題に正解する生徒が多い．1

れていないことが多くブラウザのインストールのハードル

問 1 点とし各生徒の演習前後での得点差を計算し，得点差が高かったためである．これは調査日に近い 2017 年 4 月

毎の人数を求めた (図 5)．図 5 をみると演習前後で得点がのデスクトップブラウザのシェアの調査結果 [9] で Chrome

変化しない生徒も多い．これは問題が簡単で演習前で 4 問のシェアが 59%, Internet Explorer のシェアが 18%とする

正解している生徒も多いためと考える．理由は不明であるのと大きく異なる．

が演習後に得点の下がる生徒が 23 人いた．一方で TraceIt© 2018 Information Processing Society of Japan343

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

図 5

1B41
2018/3/5

演習前後での得点差毎の人数

5. まとめ
本報告では立体をなぞるインタラクションを模擬した投影法の理解を補助する教材 TraceIt の開発について報告した．実際の中学生に利用してもらったところ，TraceIt による学習の効果があることが示唆されたが，利用者が少なかった．利用者が少なかったのは中学校や中学生の家庭で利用しているブラウザに対応できていなかったためと考える．今後は対応ブラウザを増やす等して効果を再度確かめたい．
謝辞 調査に協力いただいた神戸市立櫨谷中学校の奈良明香教諭に感謝する．
参考文献[1][2]
[3]

[4]

[5]

[6]
[7]
[8]

[9]

文部科学省: 中学校学習指導要領解説 技術・家庭編, 平成
29 年 6 月.
原雅敏他著: 技術教育の方法と実践. 技術教育研究会編,
pp.61 77, 明治図書 (1983)
川俣純：コンピュータで立体をグリグリ動かそう -空間的思考力を育てる製図学習を目指して-, 技術教育研究,
vol.49, pp.60-65 (1997)
岡田隆, 光永法明：輪郭をなぞる動作をコンピュータ上で模擬した第三角法の習得を補助する教材の開発，日本産業技術教育学会 近畿支部 第 32 回研究発表会講演論文集, pp.51-52 (2015)
光永法明, 岡田隆：ブラウザで動作する輪郭をなぞる動作を模擬した第三角法習得補助教材. 日本産業技術教育学会
近畿支部 第 34 回研究発表会講演論文集, pp.36-37 (2017)
Processing:
入 手 先 ⟨https://processing.org/⟩(2017/12/25 日閲覧)
Processing.js:
入 手 先 ⟨http://processingjs.org/⟩(2017/12/25 日閲覧)
Hiroyoshi Houchi, Shigeo Yoshida:
PPopupMenu
入 手 先 ⟨https://github.com/hixi-hyi/ppopupmenu⟩(2017/12/25 日閲覧)
後 藤 大 地：IE の 減 少 続 く - 4 月 ブ ラ ウ ザ
シ ェ ア, マ イ ナ ビ ニ ュ ー ス, 2017/5/3. 入 手 先⟨http://news.mynavi.jp/news/2017/05/03/128/⟩(2017/12/25 日閲覧)

© 2018 Information Processing Society of Japan344