HiZy わかりやすい作図道具を備えた直感的作図ソフトウェア

(1)

2004 年度卒業論文

わかりやすい作図道具を備えた直感的作図ソフトウェア HiZy

2005 年 2 月 2 日提出

指導：筧捷彦教授

早稲田大学理工学部情報学科筧研究室

学籍番号： 1G01P050-0

(2)

第 1 _{章序論}

1.1 研究の背景

本研究では，小中学校の授業で補助教材として役に立つ作図ソフトウェアの作製を目的としている。研究着手のきっかけは，ある教科書会社の教材編集会議で，現在学校教育の場で作図ソフトウェアが必要とされていることを知ったことにあった。

近年，多くの小中学校にパソコンが設置された。このことから，情報系の授業だけでなく様々な授業においてパソコンを利用したいという要望が高まっている。数学の幾何学の授業もその中のひとつである。パソコンを使って作図を行う作図ソフトウェアは既に複数あるが，授業で使うことはできない。作図ソフトウェアの操作が，パソコン初心者の小中学生にとって非常に難しいからである。

小中学校では，安価なソフトウェアで小中学生が使いこなせるような作図ソフトウェアが求められている。また，小中学校のパソコンには大きな問題がある。小中学校のパソコンには，セキュリティ上の関係からインターネット接続に制限があるという問題である。サーバに常時アクセスするソフトウェアは使うことができず，スタンドアローンのソフトウェアが望ましい。これらの要件を満たす作図ソフトウェアのプロトタイプを作製することが，本研究の具体的な目標である。

作製した作図ソフトウェアを“HiZy”と名付けた。HiZyという名は，たくさんの応募の中から選び抜いて決めた。

(5)

1.2 作図ソフトウェア作製の方針

本研究では，パソコン初心者である小中学生を対象にするということから，直感的な作図ソフトウェアの作製を目標とした。そこで，どのようにして“直感的”ということを満たすかに重点を置いた。

1.2.1 “直感的”な作図ソフトウェア

“直感的”な作図ソフトウェアとは，考えずとも使い方がわかり，簡単に操作することができる作図ソフトウェアのことである。実際に紙の上で作図をするときは，定規とコンパスだけで作図ができる。定規とコンパスの使い方はわかっているので，本物の定規やコンパスと同じような道具を備えた作図ソフトウェアならパソコン初心者の小中学生にも使いこなすことができる。

1.2.2 “直感的”を満たすための方法

“直感的”を満たすひとつの方法として“わかりやすい作図道具”を作図画面上に用意し，これを用いて作図することを考えた。作図道具とは，定規とコンパスのことである。“わかりやすい作図道具”とは，視覚的にわかりやすく，操作もわかりやすいという，ふたつの“わかりやすさ”を兼ね備えた作図道具のことである。一度説明を聞けば，作図ソフトウェア利用者が好き勝手に操作することのできるような作図道具である。

視覚的なわかりやすさ

作図に使用する道具は，本物の定規やコンパスに似せて作製した。実際，紙の上で定規やコンパスを使って作図したことのある者なら，それが何で，どのような機能があるのかということがわかるように心掛けた。

操作のわかりやすさ

作図の動作ごとにマウス操作が異なると，パソコン初心者にわかりにくい。作製した作図道具では，すべての操作はマウスの移動とマウスの左ボタンのクリックとドラッグでできるようになっている。マウスの右ボタンは使わない。

(6)

1.3 使用言語

作図ソフトウェア作製において，Nigari System言語[1][2]とJava言語を用いた。研究着手から，作図道具作製まではNigari System言語を用いた。どのようにすれば直感的でわかりやすい作図道具になるのかを種々試みるには，簡単にプログラム作成ができるNigari System言語が便利であった。

定規やコンパスといった個々の作図道具作製が進み，作図道具をひとつの画面上で動かしてみることを試みた。このとき，Nigari System言語は未だ開発中の言語であり，実装されていない部分による仕様の影響でうまく動かすことができないという問題が起こった。この問題に伴い，Nigari

System言語の基盤でもあるJava言語へと移行した。

(7)

第 2 章従来の作図ソフトウェアとの相違点

2.1 従来の作図ソフトウェアの評価

本研究と同じ分野で有名な作図ソフトウェア“Geometric Constructor”[3]

と“シンデレラ”[4] を例として取り挙げ，特徴を述べる。

従来の作図ソフトウェアは，いずれも多機能ではあるがメニュー項目が多く，操作が難しい。操作方法をある程度知らないと，簡単な作図であっても操作が複雑で混乱することもある。多機能ゆえに，動作ごとに異なる操作をしなければならないことが多いので，パソコン初心者にとっては扱いが難しいといえる。

2.1.1 Geometric Constructor

Geometric Constructorはメニュー項目で動作を選び，作図を行う。メニュー項目は，図2.1のように言葉で表示され，アイコンは使用されていない。言葉で表示されているので，例えば図2.1では，傍接円や九点円といった数学の用語や定理の知識を必要とする。

動作ごとにマウスの左クリック，右クリック，ダブルクリックを使い分ける必要がある。ある程度パソコンに慣れていて，数学の知識がある者であれば操作はできるが，説明書を読まないとわからないことも多い。

(8)

作図は，基本的に点を生成するところから始まる。そして，その点を基に直線や円を描くことができる。

例として，何も描画されていないところに新しい点を生成する方法を述べる。メニュー項目から“作図→点→新しい点の追加→自由な新しい点” を選択する。作図画面上でマウスの左クリックを押すことで，新しい点を生成することができる。新しい点は，左クリックを押すたびに，クリックした回数だけ生成することができる。しかし，この状態ではメニュー項目を選択することもできず，新しい点を生成する動作を中止することができない。この動作を中止するためには，マウスの右クリックを使う必要がある。作図画面上でマウスの右クリックを押すことで，ようやく新しい点を生成する動作を中止することができる。点ひとつ描くのにも，左クリック，

右クリックを使い分ける必要があり，操作が複雑である。

Geometric Constructorでは，難しい作図を直線や円などの該当要素を選ぶだけで実行することができる。図2.2では，既に描いてある円Aと円 Bを選択し，2円の共通外接線を描いた。作図方法は，まず，メニュー項目から“作図→直線→2円の共通外接線”を選択する。そして，既に描いてある円Aと円Bを選択するだけで，2円の共通外接線を描くことができる。数学の用語や定理を知っていれば，このように簡単に作図することができる。しかし，数学の用語や定理を知らないと何もできない。

マウス操作の複雑さと，数学の用語や定理を知っている必要があるということから，パソコン初心者の小中学生がGeometric Constructorを簡単に使うことは難しいといえる。

図2.2: Geometric Constructorでの作図例

(9)

2.1.2 シンデレラ

シンデレラは，数学者によって作られた。数学の理論を意識して作られた作図ソフトウェアである。

シンデレラでは，作図の動作をシンデレラ実行画面の上と下にある複数のアイコンから指定する。シンデレラには，作図画面上の点や直線，円を選択すると，選択された要素の色が青色から白色に変わる(これをシンデレラではハイライトと呼ぶ。)という特徴がある。ハイライトは，目で見て変化がわかるので視覚的にわかりやすい。

シンデレラでの作図の例として，図2.3のような線分ABの垂直二等分線を取り挙げ，実際に紙の上で作図するときと，シンデレラで作図するときの各々の作図方法を述べる。

図2.3: シンデレラでの作図例

紙の上に定規とコンパスを用いて線分ABの垂直二等分線を描くときは，まず，線分を成す2点A，Bから，線分ABの半分よりもやや長めにコンパスで半径を取る。その半径を維持したまま，点Aと点Bを中心とする円(弧)を描き，2点で交わるようにする。そして，その2点を直線で結ぶことによって線分ABの垂直二等分線ができる。

一方，シンデレラで同様の方法によって，線分ABの垂直二等分線を描

(10)

図2.3に示す線分ABの垂直二等分線の作図方法では，まず，“円を加える”というアイコンを選択する。“円を加える”アイコンでは，任意の点を中心とし，半径が自由に決められる円を描くことができる。操作方法は，中心にしたいところをマウスで左クリックする。そのままマウスをドラッグすると，中心からドラッグしたところまでを半径とする円を描くことができる。このとき，円周上に点が1つ現れる。これは，シンデレラの仕様であり，図2.3において，点Aを中心とする円を描いたとき，点Cがこれにあたる。点Cを動かすことによって，作図後も円Aの半径を変えることができる。

次に，線分ACを半径とする円を，点Bを中心として描く。このとき用いるのは“コンパス”のアイコンである。先程の“円を加える”アイコンでは，円Aと同じ半径の円を正確に描くことができないので，違うアイコンを用いる。“コンパス”のアイコンでは，ただ円や弧を描くのではなく，

2点間の距離を測り，それを他の場所へ移すことができる。つまり，任意の点を中心とし，予め測った長さを半径とするような円を描くのである。

“コンパス”のアイコンを選び，2点C，Aをマウスの左クリックで選択する。すると，2点間の距離を半径とし，2点目に選んだ点が円の中心となるような円が現れ，マウスカーソルにくっついてくる。図2.4で，2つある円のうち，右の白色の円がこれにあたる。この状態で，点Bをマウスで左クリックして選ぶと，点Bを中心とし，半径の長さが線分ACの円を描くことができる。

図2.4: マウスカーソルにくっついてくる円

(11)

最後に“直線を加える”アイコンで，直線ABの垂直二等分線を描く。

円Aと円Bによってできた2つの交点のうち，片方をマウスで左クリックし，そのままドラッグしてマウスカーソルをもう片方の交点まで持ってきて，マウスを離す。マウスの左ボタンを押す，マウスをドラッグする，

マウスを離すという3つの行為で直線が描ける。ここまでの作業を間違えることなく実行することで，直線ABの垂直二等分線をシンデレラで作図することができる。

シンデレラを扱うには，まず，どのアイコンでどのような作図ができるのかを詳しく知る必要がある。シンデレラのアイコンは数多い。アイコンの機能をよく知らずに思い通りの作図をすることは難しい。

シンデレラには数学の定理を自動的に確認する機能や，ユークリッド幾何，双曲幾何，楕円幾何を簡単に切り替える機能など，数学的に優れた機能がたくさんある。数学的に優れた作図ソフトウェアではあるが，数多いアイコンや，作図の操作に慣れるのに時間がかかるため，パソコン初心者の小中学生には扱いにくい。本格的に数学を学習する者や，パソコン上級者に向いているといえる。

(12)

2.2 作製した作図ソフトウェア HiZy

本研究で作製した作図ソフトウェアHiZyの作図画面を図2.5に示す。

HiZyの作図画面は，Java言語のアプレットとして実装した。図2.5は，

HiZyを使って，角の二等分線を作図した後の作図画面である。見てみると，作図画面上には，Geometric Constructorのようなメニュー項目もなく，左下の3つのボタン以外にはシンデレラのようなメニューアイコンも見当たらない。その代わりに，作図画面上に3つの作図道具らしきものが置いてあるのがわかる。

図2.5: HiZyの作図画面

(13)

作図道具は全部で3つ。定規とコンパス，そして点を生成するためのピンである。HiZyでは，従来の作図ソフトウェアとは違い，3つの作図道具のみで作図を行うことができる。

定規とコンパスは実物の形状に似せて作製したので，ひと目見れば，それが何でどのような機能をもっているのかがわかるだろう。もしわからずとも，試しにマウスで適当に動かしてみれば，それが何であるのかが直感的にわかるように心掛けて作製した。

ピンとピン刺しは，マチ針をイメージして作製した。鉛筆で点を描くという案もあったが，鉛筆は“何かを描くもの”という印象が強く，点を描くのには直感的ではないと判断した。

図2.5で描いた角の二等分線の作図は，紙の上での作図と同じように行った。作図方法は，まず，点Bを中心として，直線ABと直線BCにそれぞれ交点ができるような適当な半径の弧をコンパスで描く。次に，弧と直線AB，直線BCでできた2点の交点から，それぞれ一定の半径を保ちコンパスで弧を描き交点を作る。できた交点と点Bを定規を使って直線で結べば，角の二等分線が描ける。

HiZyは，パソコン初心者である小中学生向けに作製した。すべての操作はマウスの移動とマウスの左ボタンのクリックとドラッグのみでできるので，一度説明を聞けば，パソコン初心者でも気軽に操作することができる。数学的の用語や定理を知らなくとも，作図道具を操作し，簡単に線や円を描くことができる。また，作図道具を用いることで，何かを操作する楽しさを味わいながら，作図することができる。

HiZyのソースリストは，参考文献[5]を参照されたい。

(14)

第 3 _{章作図道具の設計}

3.1 作図ソフトウェアの機能

作図ソフトウェアの機能は，ふたつに分けることができる。作図する機能と作図後に描いた図形を動かす機能である。作図ソフトウェアを作製する上で，このふたつの機能を満たす必要がある。

HiZyでは，ふたつの機能のうち，作図する機能は実装した。作図後に描いた図形を動かす機能は，仕様の検討は終わっているが，実装はまだしていない。

この章では，作図する機能について述べる。作図後に描いた図形を動かす機能については，第4章に述べる。

3.2 作図に必要な道具

紙の上で作図を行うときに描かれる図形は，点，線，円(弧)である。これらの図形を描くために必要な道具は，定規とコンパス，そして点を生成する道具の3つである。3つの道具があれば，作図ができる。

このことから，作図ソフトウェア作製において，3つの作図道具を実装した。定規とコンパス，そしてピンである。実装の際，より直感的な作図ができるように，定規とコンパスの機能は本物の定規やコンパスの機能に似せ，どのように動かせるのが自然な動きなのか試行錯誤した。実際に定規やコンパスを動かして紙の上に作図をしてみたり，教授や先輩，仲間の意見を取り入れ，改良を重ねた。

作図道具作製は，次の通りに分担して行った。

コンパス，ピン：水越定規：清水

本論文では，定規の実装方法について述べる。コンパス，ピンについては水越[6]を参照されたい。

また，作図道具作製に伴い必要となった，描いた図形を再描画する方法 (3.6参照)とその他の機能(3.7参照)は清水が担当した。

(15)

3.3 定規の外部仕様

定規は，線を描く道具である。実際，紙の上に定規で線を描くときは，

定規を適宜移動させたり，傾けたりする。そして，1点を通る線や2点を結ぶ線を描くときなどは，点に定規をピタッとくっつけてから，定規の縁をなぞって線を描く。

3.3.1 HiZyの定規

本研究で作製した定規オブジェクトを図3.1に示す。

図3.1: HiZyの定規

図3.1の定規の上下は，目盛が付いている方を定規の上，付いていない方を定規の下とする。

HiZyの定規でできる3つの動作と，1つの機能について述べる。

定規の移動

図3.1の定規の水色に塗られた部分をマウスでドラッグすると，定規を平行移動することができる。このとき，マウスカーソルの位置は，定規に対して相対的な位置関係を保つ。定規の移動が可能な領域にマウスカーソルが入ると，マウスカーソルの形が図3.2から図3.3に変化する。

定規の回転

図3.1の定規の左右にある赤色の丸をマウスでドラッグすると，定規を回転することができる。左右どちらの赤色の丸をドラッグするかで，回転の中心が変わる。左の赤色の丸をドラッグすると，定規の右上を中心に回転する。右の赤色の丸をドラッグすると，定規の左上を中心に回転する。

定規の回転が可能な領域にマウスカーソルが入ると，マウスカーソルの形が図3.2から図3.4に変化する。

(16)

定規で線を描く

図3.1の定規の上の目盛付近をマウスでドラッグすると，定規で線を描くことができる。実際，紙の上に定規で線を描くときは，定規外部(目盛の上)の定規の縁をなぞる。定規外部の定規の縁をドラッグしても，目盛内部をドラッグしても線が描けるように，線が描ける領域は広めに取ってある。定規の線が描ける領域にマウスカーソルが入ると，マウスカーソルの形が図3.2から図3.5に変化する。

図3.2: 通常カーソル図3.3: 移動カーソル

図3.4: 回転カーソル図3.5: 描画カーソル

定規が任意の点にピタッとくっつく機能

図3.1の定規は，任意の点Aに近付くと，自動で点Aにピタッとくっつくことができる。定規が点Aにくっついた状態で線を描くと，点Aを通る線が描ける。このとき，定規がくっついている点Aのことを“^てんてん添点” と呼ぶこととする。

添点が1つのとき，定規を回転させると，定規は添点を中心に回転する。図3.1の左右どちらの赤色の丸をドラッグして回転しても，添点を中心に回転する。定規を移動すると，添点から定規を離すことができる。

添点が2つのときの状態を図3.6に示す。定規の目盛にくっついている赤い点が添点である。一度，2点の任意の点に定規がピタッとくっつくと，

定規は動かなくなる。2つの添点から定規を離したいときは，定規が動かなくなったとき，一旦マウスを離してドラッグを中止する。その後，定規を移動するか，回転すると定規を添点から離すことができる。定規の移動と定規の回転では，添点からの離れ方が変わってくる。

図3.6の状態のとき，一旦ドラッグを中止し，定規を移動すると，定規は2つの添点から離れる。

図3.6の状態のとき，一旦ドラッグを中止し，定規を回転すると，定規は1つの添点から離れる。左右の赤色の丸をマウスでドラッグし，定規を

(17)

回転させる。このとき，ドラックした赤色の丸に近い方の添点が定規から離れる。つまり，図3.7のように，右の赤色の丸をマウスでドラッグすると，2つある添点のうち，右側の添点から定規が離れるということである。

図 3.6: 2つの添点

図 3.7: 1つの添点から定規が離れる

(18)

3.4 定規の内部仕様と実装方法

定規は5つの四角パーツでできている。図3.8では，それぞれのパーツが色で塗り分けされている。

各々のパーツの機能や役目は，次の通りである。

水色のパーツ：定規の平行移動機能

オレンジ色，緑色のパーツ：定規の回転機能青色のパーツ：定規で線を描く機能

赤色のパーツ：定規の外枠

図3.8: 定規の5つのパーツ

定規は上下左右にただ平行移動するだけでなく，傾けて使用する道具である。Java言語には，傾いた四角形を描く既存のメソッドがないため，傾いた四角形を生成，描画するメソッドを実装した。

また，任意の点が傾いた四角形の内部にあるのか，外部にあるのかを判定するメソッドを実装した。5つの四角パーツは，それぞれ傾いた四角形でできているので，このメソッドにより，マウスカーソルがどのパーツの内部にあるのかがわかる。どの機能を実行すべきかを簡単に判定することができる。

3.4.1 傾いた四角形の実装方法

Java言語の座標系は，実行画面の一番左上が原点(0,0)となる。原点から水平方向の右に行くほどxの値が大きくなる。逆に，原点から水平方向の左に行くほどxの値が小さくなる。また，原点から上下方向の下に行くほどyの値が大きくなる。逆に，原点から上下方向の上に行くほどyの値が小さくなる。

(19)

傾いた四角形は，Java言語の座標系で実装した。傾いた四角形のオブジェクトを生成するRotatedRectangleクラスの仕様は，次の通りである。

public RotatedRectangle(doublex,doubley,doublew,doubleh,doubler) x：傾いた四角形の左上のx座標

y：傾いた四角形の左上のy座標 w：傾いた四角形の幅

h：傾いた四角形の高さ

r：傾いた四角形とx軸に平行な直線の成す角

このクラスのオブジェクトに対し，mnメソッドとisInsideメソッド(共に3.4.2参照)を使うことができる。

傾いた四角形の描画は，GraphicsクラスのdrawPolygonメソッドを使用した。画面上に描画するのに必要となる四角形の4つの頂点は，それぞれ回転行列を用いて求めている。傾いた四角形の例を図3.9に示す。

図3.9: 傾いた四角形の例

(20)

3.4.2 傾いた四角形における任意の点の内部判定

本研究で定規のプログラムを組むに当たり，すべての計算はベクトルを使って行った。任意の点が傾いた四角形の内部にあるかどうかの判定にも，

ベクトルを使った。

図3.10では，角度rだけ傾いた四角形の2辺が，それぞれ−→ a，−→

b となっ

ている。傾いた四角形の幅w，高さhとすると，−→ a と−→

b は成分表示で，

次の通りに書き表すことができる。

−

→a = (wcosr, wsinr)

−

→b = (−hsinr, hcosr)

図 3.10: ベクトルで考える傾いた四角形

また図3.11では，図3.10に任意の点T(tx, ty)を加えた。このとき，角度rだけ傾いた四角形の左上を点Sとすると，ベクトル−→

STは，2つの実数m，nを用いて次の通りに書き表すことができる。

−→ST =m−→ a +n−→

b

(21)

図3.11: ベクトルで考える任意の点つまり，−→

ST = (stx, sty)，−→

a = (a_x, a_y)，−→

b = (b_x, b_y)とすると，次の通りに書き表すことができる。

Ã stx sty

!

=

Ã a_x b_x a_y b_y

! Ã m n

!

(3.1) 図3.11からもわかるように，0≤m≤1かつ0≤n≤1であれば，点 T は，傾いた四角形の内部(外枠上を含む。)にある。

このことより，点T(tx, ty)について，その相対座標(m, n)を求めれば，

傾いた四角形の内部にあるかどうかがわかる。mとnは内部判定以外にも有用であるので，mとnの値を求めるメソッドmn(inttx, intty)を実装した。引数は任意の点の座標で，戻り値はMandN型のオブジェクトで

ある。MandN型のオブジェクトは，2実数(m, n)を値をとしてもつ。

式(3.1)で，mとn以外は既知数なので，次の式を解くことによって，

mとnを求めることができる。

Ã m n

!

= 1

a_xb_y−a_yb_x

Ã b_y −b_x

−a_y a_x

! Ã stx sty

!

任意の点が傾いた四角形の内部にあるかどうかを判定するメソッドとしてisInside(MandNmn)も実装した。引数は2実数(m, n)を取り，戻り値はboolean型である。このメソッドでは，0≤m≤1かつ0≤n≤1のと

(22)

3.4.3 定規の機能の実装方法

ここでは，“3.3.1 HiZyの定規”で述べた定規の機能で，特筆すべき機能の実装方法を述べる。

線を描く機能

線は，GraphicsクラスのdrawLineメソッドを使って画面に描画している。メソッドdrawLineは，始点と終点の2点を結ぶ線を描画する。始点と終点の2点を求める計算には，mnメソッド(3.4.2参照)を使用した。

まず，mnメソッドを使い，マウスカーソルの位置から定規の縁に垂直な座標を計算する。マウスカーソルの座標をmnメソッドに渡すと，2実

数(m, n)が返ってくる。定規の左上から相対的に考えると，マウスカー

ソルの位置は，次のように表すことができる。

m−→ a +n−→

b

ここで，n= 0のときの座標は，定規の縁の上(定規の縁の延長線上を含む。)にある。このことから，マウスカーソルの位置から定規の縁に垂直な座標は，定規の左上からm−→

a の位置であるといえる。

m−→

a は定規の左上からの相対座標である。始点と終点の2点は，定規の左上からの相対座標で決める。定規上で，定規の左上から一番近いときの座標と，一番遠いときの座標を覚えておく。つまり，0≤m≤1で，m の値が一番小さいときの座標と，一番大きいときの座標を覚えておく。本研究では，mの値が一番小さいときを始点，一番大きいときを終点とした。マウスのドラッグが終わり，線を描き終わるまで，マウスをドラッグするたびに座標の計算を行い，始点と終点を更新する。

線の描画について，マウスをドラッグしている間，座標の更新に伴い，

始点と終点を結ぶ線を描画する。これにより，マウスドラッグ中でも線の描画を確認することができる。

マウスを離したとき，最終的に覚えておいた2点が，描画した線の始点，終点となる。

x座標の値の大小で始点と終点を決めようとすると，定規が90度，270 度回転したときなど，定規の縁がy軸と平行な状態になったとき，線の描画ができなくなるので，このような描画方法を採用した。

(23)

任意の点にピタッとくっつく機能

任意の1点にくっついた状態で定規を回転させると，その点を中心に定規を回転できる。ここでは，定規の回転の中心を変えるメソッドchange- Center(double m, double n)について述べる。

引数のmとnは，“3.4.2 傾いた四角形における任意の点の内部判定”

で出てきたmとnで，mnメソッドを使って求めることができる。添点 (3.3.1参照)の座標をmnメソッドに渡すと，2実数(m, n)が返ってくる。

このmとnをchangeCenterメソッドに渡すと，回転の中心をその添点に

することができる。

添点がひとつもないとき，図3.1の定規の左の赤色の丸で定規を回転させると，(m, n) = (1,0)をchangeCenterメソッドに渡し，定規の右上が回転の中心となる。また，右の赤色の丸で定規を回転させると，(m, n) = (0,0)

をchangeCenterメソッドに渡し，定規の左上が回転の中心となる。

3.5 定規の変遷

ここまで述べてきた定規になるまでには，多くの試行錯誤があった。新しい機能を実装する上で，それに伴い定規の形も変化してきた。ここでは，簡単に現在の定規に至るまでを記す。

3.5.1 形状の変遷

定規は，本研究中盤まではずっと図3.12のような形状であった。ひと目見て，これが定規とはなかなかわからない形をしていた。

図 3.12: 当初の定規

(24)

図3.12の定規の簡単な使い方を述べる。まず，赤色の四角をマウスでドラッグすると，定規の平行移動ができる。緑色の四角をマウスでドラッグすると，定規の左上を中心に回転することができる。黒色の四角を2点，

マウスで左クリックすると，2点からそれぞれ定規の縁に垂直な座標に始点と終点，2つの点が現れ，線を描画できる。青色の四角をマウスでドラッグすると，定規が伸び縮みし，長さを変えることができる。

図3.13では，この定規を使って平行線を描いた。定規は移動するとき常に平行移動を行うので，定規を回転しない限り，定規の移動だけで平行線を描くことができる。図3.13は，定規の長さを伸ばし，傾かせた状態で線を1本描き，少し下に移動させてからもう1本線を描こうとして，始点と終点の2点を選んだ状態である。1本目の線には始点と終点はないが，

2本目の線には小さなオレンジ色の始点と終点が表示されていることが確認できる。この後，定規を移動すると，始点と終点は消え，描いた線だけが残る。

図3.13: 当初の定規での作図

現在の定規(図3.1)の形状は線対称である。これに対し，当初の定規(図

3.12)は，定規の片方に青色の四角が出っ張っていたり，定規の左上を中

心に回転することしかできなかったりと，形的にも機能的にも左右の偏りがあった。どのような機能がより本物の定規に近く，わかりやすいのか。

機能が充実していくに従い，その上で，定規の形状は適宜変化してきた。

どのような形が本物の定規に近く，備えたい機能を盛り込むことができるのかを模索してきた結果，現在の線対称な形状の定規にたどり着いた。

(25)

3.5.2 機能の変遷

図3.12の当初の定規には，定規の伸び縮み機能のような現在の定規にはない機能もあった。しかし，現在の定規にある大切な機能，例えば，任意の点にピタッとくっつく機能は，この定規には実装されていない。

定規の主な機能である回転機能，線を描く機能の変遷と，定規の伸び縮み機能について述べる。

回転機能

図3.12の当初の定規は，定規の左上を中心として回転することしかできない。現在の定規では，任意の点を中心として定規を回転することができる。

線を描く機能

図3.12の当初の定規は，線を描くとき2点を選んで線を描く。決められた領域内で2点を選び，マウスで左クリックする必要があった。その際，

1点目を左クリックしてしまうと，正確に線を描くため定規が動かなくなるので，初めて定規を使う者は，定規が動かなくなることに戸惑うことが多かった。

実際，紙の上に定規で線を描くときは，じりじりと線を描いていくので，現在の定規のようにドラッグした分だけ線が描けるという方が直感的であり，より自然な線の描き方であるといえる。

定規の伸び縮み機能

図3.12の当初の定規には，青色の四角が出っ張っている部分をドラッグすると，定規が伸び縮みし，長さが変わるという機能があった。実物の定規には，伸び縮みする機能はないということから，この機能は使用しないことに決まった。

3.6 描いた図形を再描画する方法

“2.2作製した作図ソフトウェアHiZy”で述べたように，HiZyの作図画面は，Java言語のアプレットとして実装した。再描画には，Componentク

(26)

ると，画面をクリアしてから，Componentクラスのpaintメソッドを呼び出して再描画を行う。

paintメソッドでは，3つの作図道具を描画する。再描画を行うと，paint

メソッドで描画が指示されているもの(3つの作図道具)以外は消えてしまう。つまり，paintメソッドで描画するものの中に，作図画面上に描いた図形を追加すれば，作図画面上に描いた図形が消えることはない。ここでは，再描画しても描いた図形が消えないための方法について述べる。

HiZyで描かれる図形は，点，線，円(弧)である。これらの図形が再描画されたとき消えないためには，描かれたときに各々の図形の情報を覚えておく必要がある。

図形の情報を覚えておくために，Vectorクラスを用いた。Vectorクラスのベクトルを使うことで，点，線，円(弧)などのさまざまな種類のオブジェクトを同じベクトルに追加することができる。

それぞれ，点，線，円(弧)の情報を覚えておくために，点クラス，線クラス，円(弧)クラスを用意した。

点クラスのオブジェクトは，その点の座標を保存している。

線クラスのオブジェクトは，線分を表す。具体的には，その線分の両端の点の座標を保存している。

円(弧)クラスのオブジェクトは，その円に外接する正方形の左上の点の座標，円の直径，描き始めの角度，描き終わりの角度を保存している。

点，線，円(弧)を追加するためのベクトルを，図形ベクトルと呼ぶこととする。作図画面上に図形を描くたびに，各々のオブジェクトに図形の情報を保存し，図形ベクトルに追加する。

図形ベクトルで覚えた図形の描画をpaintメソッドで行えば，作図画面上に描いた図形は再描画されても消えなくなる。

3.7 その他の機能

その他の機能として“全消去機能”と“ひとつ戻る機能”を実装した。全消去機能は，描画した図形をすべて消去する機能であり，ひとつ戻る機能は，一番最後に描画した図形を消去する機能である。

全消去機能は，“3.6図形の保存方法”で記した図形ベクトルのすべての要素を消去すれば実装できる。

ひとつ戻る機能は，“3.6図形の保存方法”で記した図形ベクトルの一番最後の要素を消去すれば実装できる。

(27)

第 4 _{章作図の制約条件}

4.1 制約条件

制約条件とは，作図後に描いた図形を動かすための取り決めである。点，

線，円の各要素について制約条件を決める必要がある。制約条件は，作図画面上に図形が描かれた時点で決まる。

この章では，点，線，円の各要素の制約条件について述べる。点，線，

円のそれぞれの制約条件は，図形の形や位置だけでは決まらない。どのような状況で作図画面上に描き加えたかによって決まる性質(分類)である。

分類した点，線，円は，作図ソフトウェア利用者が簡単にわかるように，

それぞれを違う色で表示する。白黒(モノクロ)で表示したいときは，描画したすべての図形を黒色に変換する機能を使う。

また，分類した点，線，円を動かすときには，動きの制限が伴う。動きの制限を決めるに当たり，従来のソフトウェアや紙の上での作図を参考にした。作図後，描いた図形がどのように動くのが自然なのかを検討した。

4.2 点の制約条件

点は，自由点，半自由点，従属点の3種類に分けることができる。自由点は赤色，半自由点は緑色，従属点は青色で表示する。ここでは，それぞれの点の説明と動きの制限について述べる。

4.2.1 自由点

図4.1の点Aのように，線上でも円上でもないところに描いた点を自由点と呼ぶ。

自由点は，マウスでドラッグして作図画面上を自由に動かすことができる。

(28)

図 4.1: 自由点の例

4.2.2 半自由点

図4.2の点B，Cのように，線上，円周上に描いた点を半自由点と呼ぶ。

半自由点は，図4.2で示す矢印のように，その線上，円周上のみをマウスでドラッグして自由に動かすことができる。

図4.2: 半自由点の例

4.2.3 従属点

図4.3の点D，E，Fのように，線と線，線と円，円と円などの図形の交点に描いた点を従属点と呼ぶ。

従属点は，それ自体をマウスでドラッグして自由に動かすことはできない。従属している図形の動きに従って動く。

図 4.3: 従属点の例

(29)

4.3 線の制約条件

線は，自由線，半自由線，従属線の3種類に分けることができる。自由線は赤色，半自由線は緑色，従属線は青色で表示する。ここでは，それぞれの線の説明と動きの制限について述べる。

4.3.1 自由線

図4.4の線mのように，点上でないところに描いた線を自由線と呼ぶ。

自由線は，マウスでドラッグして作図画面上を自由に平行移動することができる。

図 4.4: 自由線の例

4.3.2 半自由線

図4.5の線nのように，1点を通るように描いた線を半自由線と呼ぶ。

半自由線は，マウスでドラッグして線を動かすと，図4.5で示す矢印のように，その点を中心に回転することができる。また，マウスでドラッグして点を動かすと，線における点の位置を相対的に保ちながら，線を平行移動することができる。

(30)

4.3.3 従属線

図4.6の線kのように，2点を通るように描いた線を従属線と呼ぶ。

図 4.6: 従属線の例

従属線は，それ自体をマウスでドラッグして自由に動かすことはできない。従属している図形，つまり，2点の動きに従って動く。

従属線の動きの例を図4.7に記す。図4.7で示す矢印のように，点Aをマウスでドラッグして動かす。この移動後の点を，点A⁰とする。このとき，点Bは動かない。線kは点Aの動きに従い，線k⁰の位置まで，2点 A⁰，Bを通るようにして動く。

図4.7: 従属線の動きの例

(31)

4.4 円の制約条件

円の制約条件では，円の中心と円の円周について，それぞれ制約条件を決める必要がある。

円の中心の制約条件は，“4.2点の制約条件”と同じように考え，点と同じように扱う。

円の円周の制約条件は，4種類に分けることができる。“円周が何も通らない円”は赤色，“円周が1点を通る円”は水色，“円周が2点を通る円” は緑色，“円周が3点を通る円”は青色で表示する。ここでは，それぞれの円の説明と，動きの制限について述べる。

4.4.1 円周が何も通らない円

図4.8の円Oのように，点上でないところを通る円周を描いたとき，その円を“円周が何も通らない円”と呼ぶ。

円周をマウスでドラッグして動かすと，中心は動かず，半径を自由に変えることができる。

中心をマウスでドラッグして動かすと，半径を一定に保ったまま円全体を動かすことができる。

HiZyでは，コンパスで円を描いたとき，円の中心は表示されないが，ここでは，円の中心が作図画面上に表示されるものとする。

図 4.8: 円周が何も通らない円の例

(32)

4.4.2 円周が1点を通る円

図4.9の円Pのように，1点を通る円周を描いたとき，その円を“円周が1点を通る円”と呼ぶ。

図 4.9: 円周が1点を通る円の例

円周上の1点をマウスでドラッグして動かすと，中心は動かず，図4.10 で示す矢印のように，半径を自由に変えることができる。

中心をマウスでドラッグして動かすと，円周上の1点は動かず，図4.11 で示す矢印のように，円周が1点を通ったまま，半径を自由に変えることができる。

この円の半径は，中心と円周上の1点の2点間の距離から成る。

図 4.10: 円周上の1点の動きの例図4.11: 中心の動きの例

2点を通る円周を描いたとき，その円を“円周が2点を通る円”と呼ぶ。

円周上の1点をマウスでドラッグして動かすと，円周がこの点と，もうひとつの1点を通ったまま，半径を変えることができる。このとき，中心は，動かした点と，もうひとつの点の垂直二等分線上に，一定の比を保ちながら移動する。具体的には，図4.12における，m:nの比を保ちながら移動する。

中心をマウスでドラッグして動かすと，図4.12のような2点の垂直二等分線上を中心が動き，円全体を動かすことができる。

この円の半径は，中心と円周上の1点の2点間の距離から成る。

(33)

図4.12: 垂直二等分線と一定の比

3点を通る円周を描いたとき，その円を“円周が3点を通る円”と呼ぶ。

円周上の1点をマウスでドラッグして動かすと，円周がこの点と，残りの2点を通ったまま，半径を変えることができる。このとき，図4.13のように，3点の垂直二等分線同士の交点が中心となる。

中心は，3点に従属している。マウスでドラッグして動かすことはできない。

図4.13: 3点で決まる中心

(34)

第 5 章アンケートによる考察

5.1 アンケートの目的

このアンケートを行うことで，本研究で作製した作図ソフトウェアHiZy の使いやすさや，わかりやすさ，従来の作図ソフトウェアと比べたときの評価を調査する。また，改善点やその他の意見等を参考とし，作図ソフトウェアの改良に活用する。

5.2 アンケート実施の情景

アンケート実施に伴い，作図ソフトウェアHiZyと，従来の作図ソフトウェア(Geometric Constructorかシンデレラの片方，または両方)を使ってもらう。その際，すべての作図ソフトウェアにおいて操作前に簡単な説明を行う。HiZyの操作マニュアルは用意されているが，使用するかどうかは任意とする。使用したアンケートの内容とその結果，操作マニュアルは付録を参照されたい。

HiZyの操作は，練習問題を通して慣れてもらう。練習問題は全部で7 問。操作する者の実力に合わせて挑戦してもらう。練習問題の内容は付録を参照されたい。

5.3 評価対象

主にパソコン初心者をアンケートの対象とした。また，HiZyの今後の改良のために，パソコン上級者にもアンケートを行った。

アンケート協力者は合計15名。年齢，性別，職業は次の通りである。

括弧内の数字は該当人数を表す。

年齢：20代未満(4)，20代(7)，30代以上(4) 性別：男(12)，女(3)

職業：学生(10)，社会人(3)，主婦(2)，その他(0)

(35)

5.4 アンケート結果の分析

アンケートの内容は，3つの作図道具それぞれの評価とHiZyの総合評価に分かれている。ここでは，定規の評価とHiZyの総合評価について，

アンケート結果を基に分析する。

5.4.1 定規の評価

実際，HiZyの定規を使ってもらった上で，定規が使いやすかったかどうかを“はい”か“いいえ”で答えてもらった。

15名中12名が使いやすかった，つまり“はい”と答えた。使いやすかった理由を，予め用意しておいた選択肢の中から複数回答可能という形で選んでもらうと，図5.1のような結果になった。

図 5.1: 定規が使いやすかった理由

図5.1のアンケート結果からもわかるように，初めてHiZyを使う者にとって，マウスの移動とマウスの左ボタンですべての操作ができることは，使いやすさの重要な要素である。

また，本物の定規と同じような機能を備えているので，なんとなく操作することができたという回答も多かった。

15名に定規のマニュアルを読んだかどうか，3つの選択肢から選んでもらった結果は次の通りである。括弧内の数字は該当人数を表す。

・よく読んだ(0)

(36)

これらの結果から，マニュアルをあまり読まなくても，定規を操作することができ，使いやすいと答えた者が多かったことがわかる。

定規を使った上で，定規で使いにくかったことや定規に欲しい機能を具体的に聞くと，次のような回答や要望が得られた。

定規で使いにくかったこと

・点にくっついたとき，定規の移動がしにくかったこと

・定規の回転が，思うようにできなかったこと

・線を描く方法がシックリこなかったこと定規に欲しい機能

・定規の長さを変える機能

・長さを測る機能

・点にくっついたとき，わかりやすく見せる機能

・点にくっついたとき，ドラッグしなくても線が描ける機能これらの意見から，定規の改善点がまだ多く残っていることがわかった。

特に，定規が任意の点にくっついたときの操作をもう少しわかりやすく改良する必要がある。

5.4.2 HiZyの総合評価

HiZyを使ってみて使いやすかったかどうかを聞いた。4つの選択肢から選択してもらった結果は次の通りである。括弧内の数字は該当人数を表す。

・非常に使いやすかった(3) ・使いやすかった(12) ・使いにくかった(0) ・非常に使いにくかった(0)

使いやすかったと答えた者の中で，操作マニュアル(説明書)を読まなくても，なんとなく操作ができたのが良かったと答える者が多かった。

(37)

また，従来の作図ソフトウェアと比較して，HiZyが使いやすかったかどうかを聞いた。4つの選択肢から選択してもらった結果は次の通りである。括弧内の数字は該当人数を表す。

・非常に使いやすかった(3) ・使いやすかった(11) ・使いにくかった(1) ・非常に使いにくかった(0)

大部分の者がHiZyの方が使いやすかったと答えた。従来のソフトウェアと比較したとき，HiZyの方が使いやすいと答えた理由を聞くと，次のような回答が得られた。

・従来のソフトウェアに比べ，操作が単純だった。

・作図道具がわかりやすかった。

・本物の作図道具と同じような動きをするので，簡単に使えた。

・従来のソフトウェアは説明書を読まないとわからないが，HiZyは説明書がなくてもなんとなく使えた。

・点に近付けると作図道具が点にくっついた。

・直感的だった。

従来のソフトウェアと比較したとき，HiZyの方が使いにくかったと答えた理由として，次のような回答が得られた。

・慣れてくると描画までの段階が面倒になる。

・従来のソフトウェアに比べ，機能が充実していない。

・消したい図形を選んで消すことができない。

使いやすかった理由から，HiZyが当初の狙い通りに作製できていることがわかる。しかし，現在のHiZyには，使いにくかった理由に挙げたような改善すべき点があることも確かである。

HiZyの今後の改善点として，次のことが考えられる。

・制約条件を含めた実装をする。

・選択した図形を消せるようにする。

(38)

第 6 _{章結論}

パソコン初心者が作図ソフトウェアを利用するときに重要なことは，まず，操作がわかりやすいことである。また，説明書を読まなくても，なんとなく操作できることも重要となる。説明書を読まずに操作ができるということは，直感的であるといえる。

本研究では，わかりやすく，直感的な作図ソフトウェアを作製した。HiZy を使えば，数学の用語や定理を知らなくとも，わかりやすい作図道具を用いて直感的に作図することができる。操作が複雑であったり，数学的な知識がないと作図ができないというのは，パソコン初心者にとって扱いにくく，作図をするための大きな壁となる。

作図ソフトウェアHiZyは，まだ作製途中ではあるが，アンケート結果からもわかるように，従来の作図ソフトウェアとは一味違った提案として，

良い評価を得ることができた。

(39)

謝辞

本研究は，筧捷彦教授のご指導の下で行われました。毎週行われていた進捗状況発表会では，数々の有用なアドバイスをいただきました。時には厳しく，そして温かく，私たちの研究に熱心に付き合って下さいました筧教授に，この場を借りまして心より感謝致します。

また，作図ソフトウェア作製過程において，多くの相談に乗って下さり，

たくさんの参考意見や助言を下さった長慎也先輩にも深く感謝致します。

そして，多くの時間苦難を共にし，一緒に研究に取り組んだ水越拓也君，

アンケートに協力して下さった方々，本当にありがとうございました。

この一年間，一生懸命研究に取り組んで参りましたが，ここまで研究が進みましたのは，皆様のご援助があってのことだと思います。

(40)

参考文献

[1] 筧研究室：「Nigari System」，

hhttp://taurus.kake.inf o.waseda.ac.jp/N igari/soywiki/wiki.cgii， (2004/12/27アクセス)

[2] 長慎也，甲斐宗徳，川合晶，日野孝昭，前島真一，筧捷彦：「Nigari

- Java言語へも移行しやすい初学者向けプログラミング言語」，

hhttp://www.kake.inf o.waseda.ac.jp/ cho/res/nigari−SIGCSE.pdf i， (2004/12/27アクセス)

[3] 飯島康之：「Forum of Geometric Constructor」，

hhttp://www.auemath.aichi−edu.ac.jp/teacher/iijima/i， (2004/12/26アクセス)

[4] J.リヒター・ゲバート，U.H.コルテンカンプ：『シンデレラ幾何学

のためのグラフィックス』阿原一志訳，シュプリンガー・フェアラーク東京株式会社，東京，2003．

[5] 筧研究室：「筧研究室Wiki」，

hhttp://taurus.kake.inf o.waseda.ac.jp/wikiOf Kake/wiki.cgii， (2005/1/31アクセス)

[6] 水越拓也：「初等幾何学教育のための直感的作図ソフトウェアHiZy」，

2005年度早稲田大学理工学部情報学科卒業論文．

(41)

付録

練習問題

問題1. ピンを使って点を描け。

問題2. 定規を使って点A，Bを結ぶ線を描け。

問題3. コンパスを使って点Aを中心とする円を描け。

問題4. 線分ABの垂直二等分線を描け。

問題5. ∠ABCの角の二等分線を描け。

問題6. △ABCの内心を描け。

問題7. △ABCの外心を描け。

アンケート内容と結果

それぞれの設問に対する回答を，各選択肢の後ろの括弧内に数字で示す。

質問1. あなたは普段どれくらいパソコンを使用しますか？

1. 毎日使う(7)

2. 1週間に3，4回使う(1) 3. 1週間に1，2回使う(2) 4. 2週間に1，2回使う(0)

5. 必要なとき以外，ほとんど使わない(5)

質問2. パソコンの主な用途をお答え下さい。複数回答可。

1. インターネット(13)

2. (4)

(42)

5. ゲーム(6) 6. その他(1)

質問3. 小中学生時代，あなたは作図が好きでしたか？

1. 非常に好きだった(1) 2. 好きだった(6) 3. 普通だった(4) 4. 嫌いだった(3) 5. 非常に嫌いだった(1) 質問4. ピンについてお聞きします。

4-1. 使いやすかったですか？

はい/いいえ(13/2)

4-2. 4-1で“はい”と答えた方にお聞きします。

使いやすかった理由をお答え下さい。複数回答可。

1. デザインと機能が一致していたから(1)

2. マウスの左ボタンのみの操作で点が描けたから(10) 3. なんとなくカンで使うことができたから(4)

4. その他(1)

4-3. 4-1で“いいえ”と答えた方にお聞きします。

使いにくかった理由をお答え下さい。複数回答可。

1. デザインと機能が合っていないから(1) 2. 操作がわかりにくいから(0)

3. 描きたいところに点が描けなかったから(0) 4. その他(2)

4-4. あなたは説明書のピンの項目を読みましたか？

1. よく読んだ(1) 2. 流し読みをした(5) 3. 読まなかった(9)

4-5. ピンに欲しい機能はありますか？ご自由にお答え下さい。(6)

(43)

質問5. コンパスについてお聞きします。

2. マウスの左ボタンのみの操作で円(弧)が描けたから(5) 3. なんとなくカンで使うことができたから(5)

4. その他(2)

3. 描きたいところに円(弧)が描けなかったから(0) 4. その他(1)

☆コンパスの機能についてお聞きします。(5-4・5-5)

5-4. それぞれの機能について使いやすさを評価して下さい。

・コンパス全体の移動

使いやすい/使いにくい(15/0)

・鉛筆のみの移動

・コンパスで円(弧)を描く使いやすい/使いにくい(15/0)

5-5. 点にピタッとくっつく機能は役に立ちましたか？

5-6. あなたは説明書のコンパスの項目を読みましたか？

5-7. コンパスに欲しい機能はありますか？ご自由にお答え下さい。

(4)

(44)

質問6. 定規についてお聞きします。

2. マウスの左ボタンのみの操作で線が描けたから(6) 3. なんとなくカンで使うことができたから(6) 4. その他(1)

3. 描きたいところに線が描けなかったから(1) 4. その他(2)

☆定規の機能についてお聞きします。(6-4・6-5)

6-4. それぞれの機能について使いやすさを評価して下さい。

・定規の移動

・定規の回転

・定規で線を描く

6-5. 点にピタッとくっつく機能は役に立ちましたか？

6-6. あなたは説明書の定規の項目を読みましたか？

6-7. 定規に欲しい機能はありますか？ご自由にお答え下さい。(6)

(45)

質問7. 練習問題は簡単でしたか？

質問8. “HiZy”は総合的に使いやすかったですか？

1. 非常に使いやすかった(3) 2. 使いやすかった(12) 3. 使いにくかった(0) 4. 非常に使いにくかった(0)

質問9. 従来の作図ソフトウェアと比べて，使いやすかったですか？

1. 非常に使いやすかった(3) 2. 使いやすかった(11) 3. 使いにくかった(1) 4. 非常に使いにくかった(0)

質問10. 質問9の回答の理由を，ご自由にお書き下さい。(11)

(46)

操作マニュアル

マニュアルは全部で3枚。わかりやすくするため，図を多く用いた。

(47)

(48)