GUI プログラミング教育支援システム－正しい実行結果と正しくない実行結果の理解支援－
河田 進*
The Support System to Instruct GUI Programming-The Support to make the learners recognize a corrected or uncorrected Execution Result-

Susumu KAWATA

Abstract
GUI プログラミング演習において，正しいプログラムの実行結果，誤りのあるプログラムの実行結果およびその原因を参照することで，学習者プログラムの誤り原因を学習者自身で発見し修正するための支援を行うシステムを開発している。しかし GUI プログラムの実行結果を観察することは容易ではない。本論文では，動画として記録した実行結果の観察を容易にするための方法を示す。

Keywords : GUI プログラミング，動画，振る舞い，課題理解

GUI を活用し，美的で利用者を引きつけるための工夫

1. はじめにがなされたものが多い。そのため，正しい実行結果とGUI を活用したプログラムにおいては，実行結果は正しくない実行結果を比較する際，実行結果（画面）画面上の多地点に現れる。また，時間による変化が結の注目する場所が多く存在することになる。また，時果である場合も多い。プログラム作成者は当然これら間と共に画面の状態が変化する場合が多いため誤りをの結果が正しく現れることを確認しなければならない。

見逃して，プログラムが終了した後ではもう発見する

しかしプログラミング初級者にとってこれらを観察すことができない場合もある。

ることは容易ではない。もちろん，正しいプログラム

GUI プログラムの振る舞いを可視化するための方の振る舞いの観察と理解ができなければ，正しいプロ法が提案されている 2) 3)。実行画面とソースコードグラムを作ることはできない。

や活用部品の構造図などを利用して，今プログラムのプログラミング学習において，プログラムの実行どの部分が実行されているかを認識させる方法である。

結果をテキストで得る場合，正しい結果と正しくない

我々は，プログラムがどの様に動作しなければな結果を比較し，誤り原因を特定することは容易ではならないかを理解することが最も重要であると考えていいが，注目すべき場所が少ないので違いの認識はそれる。つまり課題理解が最重要である。そのためには正ほど困難ではない。我々はテキストとして得られる実しい実行結果を正しく観察できなければならない。ま行結果の差から，プログラムの誤りを自発的に発見すた，誤りのあるプログラムの実行結果と正しい実行結

1)るための支援システム を開発し，利用している。

果を比較し，その違いを認識できなければならない。

しかし，最近は単体のコンピュータで動作するプ

そこで実行画面を動画として録画し，再生時に注ログラムも，Web ブラウザ上で動作するプログラムも目すべき場所とそのタイミングが容易に把握できるよう支援を行うことで，動作内容の理解を支援する。
尚，＊

１）のシステムを改造してこの支援方法を組み込んだ

香川高等専門学校情報工学科

システム（以下本システムと略す）を開発することで，109

独立行政法人国立高等専門学校機構香川高等専門学校研究紀要 6(2015)

GUI プログラミングにおいても，学習者が自発的に誤C 「正しい実行結果」と一致しない場合は，「正しくりを発見・修正できるようになることを期待している。

ない実行結果」の解説一覧から該当するものがあるかを検討し，該当すると思われる「正しくない実行結果」の動画を再生参照する。C-1 該当する

2. システム構成「正しくない実行結果」が存在する場合は「確認本システムの構成を図 1 に示す。

ボタン」を押すことで，「誤り原因の一覧」を参照して原因を検証する。
C-1-1 学習者プログラムの誤り原因が「誤り原因の一

2.1 学習者の利用方法
学習者は VisualBasic でプログラミングを行って覧」から特定できた場合は「確認ボタン」を押すいる。プログラムの実行結果が得られた後のシステムことで，学習者が判断した状況や誤り原因が学習の利用方法について以下に示す。

履歴として登録される。

A 認証付きログイン後，課題一覧からプログラムを作

C-1-2 学習者プログラムの誤り原因が「誤り原因の一成中の課題を選び，その後まず「正しい実行結果」

覧」に存在しないと判断した場合は「同じ誤り原の動画を再生参照する。

因未確認ボタン」を押すことで，教師による指導B 学習者プログラムの実行結果が，システムが提示を受けることができる。

する正しい実行結果と一致すると判断した場合はC-2 該当する「正しくない実行結果」が存在しない場「完成ボタン」を押すことで「仮完成情報」がシ合は「同じ結果未確認ボタン」を押すことで，教ステムに登録される。

師に新しい状況を通知できる。

ＧＵＩプログラミング学習支援システム

学習者
プ ログ ラムの実行結果

状況・原因状況・原因登録サブシステム

支援ＤＢ
登録

検索

教師用クライアント

状況・原因テーブル

原因検索
サブシステム
状況コード

抽出

原因一覧

動画テーブル

動画検索
サブシステム

課題コード抽出

学習者用クライアント

比較学習者
プロ グラ ムの実行結果

動画登録

正しい実行結果
または正しくない
実行結果

画面キャプチャおよび動画編集ソフト
教師用クライアント

正しい
プロ グ ラムの実行結果

図１ システム構成図
2.2 教師の役割

110河田進 : GUI プログラミング教育支援システム グ正しい実行結果と正しくない実行結果の理解支援グシステムを効果的に運用して学習効果を向上させ(3) ストップボタンを押すとタイマーは停止し，経過るためには，教師の存在が重要である。以下では教師時間が９秒から１０秒以内であれば成功，９秒未の役割を示す。

満や１０秒を超えた場合は失敗と表示する。

(1) 支援ＤＢへの情報登録
図２から図５に例を示す。

支援ＤＢに「出現するかもしれない正しくない実行結果とその状況」や「正しくない実行結果が生じる原因」がまだ蓄積されていない状態では，学習者はシステムを利用できない。そのため，教師は学習者プログラムの実行結果に該当する「正しくない実行結果」の動画が存在しないという通知を元に，新しい「正しくない実行結果」の動画と状況や誤り原因を支援ＤＢに蓄積する。
(2) 学習者の状況判断に対する指導教師は 2.1 で示した「学習者が判断した状況や誤図２ 初期画面り原因」と学習者プログラムの実行結果を観察し，学習者の判断ミスを指導することで，学習者の理解を支援する。
(3) 学習者プログラムの添削
仮完成情報に基づき，学習者プログラムを添削し，誤りがあると判断した場合はプログラムの再検討や動画の再視聴を学習者に指示する。
3. 動画の作成方法

図３ スタートを押した直後実行結果を動画として記録した後次のような処理を施すことで学習者が動作内容を理解しやすくする。
。
①動画内に吹き出しなどを挿入する。
②指摘画面と同じ静止画を一定時間表示させることで擬似的な一時停止状態を作り，指摘内容を確認しやすくする。
正しい実行結果に対しては，変化が生じる場所や生じる内容を指摘する。

図４ ２秒経過後正しくない実行結果の場合，以下のような事柄が考えられるので，それぞれに対して指摘を行う。
①正しい変化に対し，間違った変化を生じている。
②正しい変化に対し，変化が生じていない。
③生じないはずの変化が生じている
3.1 正しい実行結果の例
体内時間を測定するゲームプログラムを題材として示す。プログラムの大まかな流れは以下のようにな

図５ ストップボタンを押した直後る。
(1) スタートボタンを押すとタイマーが動き出す。
(2) ２秒経つとタイマーが表示されなくなる。
3.2 正しくない実行結果の例と原因

111

独立行政法人国立高等専門学校機構香川高等専門学校研究紀要 6(2015)

3.1 の題材において図６から図８のような指摘を吹き出しなどを付けることで観察を容易にすることを行う。

提案した。
今後は実際の演習において活用し，課題の理解度向上のための有用性や自主的な誤り原因特定に対する効果を検証する。また，実行結果がテキストである場合と比べて，正しい実行結果や正しくない実行結果の動画作成は教師の負担が大きくなると予想される。少ない負担でこの作業を行う工夫を考案したい。
参考文献
図６ ボタンのラベルがスタートのまま「プログラム状況
1) 河田，宮武，鰆目，高城，矢野，

原因１：ボタンのラベルを変更していない

認識行動支援システム」，高専教育 第 34 号，原因２：ボタンのラベルをスタートに変更していpp.239-244，2010

る2) 佐藤，志築，田中，「実行トレースと画面変化の対応を可視化することによる GUI プログラム理解支援システム」，
情報処理学会論文誌. プログラミン
グ 2(3), pp.1-19, 20093) 久永, 柴山, 高橋，「Java Swing による GUI プロ
グラムの 3 次元視覚化ツールの構築」，
日本ソフト
ウエア科学会大会論文集，pp.165-168，2000

図７ タイマーが消えない
原因１：２秒経過の判断をしていない
原因２：表示プロパティの設定が非表示になっていない

図８ 変化しないはずのボタンラベルが変化した
原因１：ラベルを変更するボタンオブジェクトを間違えている
4. おわりに実行結果の正しさを確認しにくい GUI プログラミ
ングにおいて，正しい実行結果や正しくない実行結果を動画として保存し，さらに動画に着目すべき箇所に112