• 検索結果がありません。

初学者向け探索的プログラミング支援環境の提案 22

ドキュメント内 ( ) (ページ 32-37)

本章では初学者向け探索的プログラミング支援環境Pocketsについて述べる.

4.1章でシステムの概要について述べ,4.2章でシステムの提供する機能が3.4章 で述べた要件をどうやって満たしているかについて述べる.

4.1. システムの概要

Pocketsは2.1.1章,3.2章で述べた,井垣らが開発したC3PVを基に拡張する 形で実装している[2].図5にPocketsを使用してJavaの課題を解いている際の PocketsのUIを示す.Pocketsは3つの領域によって構成されている.緑色の枠で 囲っている画面左半分はベースとなっているC3PVが表示されている.使用者は

リビジョン⼀一覧表⽰示領領域

差分⼀一覧表⽰示領領域 C3PVオリジナル領領域

図 5 PocketsによるJavaプログラムのコーディング

C3PVオリジナル領域の中央部に表示されているオンラインエディタにプログラ ムを記述し,領域上部のSave,Compile,Runボタンを押すことでソースコード の保存,コンパイル,実行を行い,その結果が領域下部に表示されるため確認す る.Pocketsでは,使用者がC3PVオリジナル領域のSave,Compile,Runボタ ンを押した時に,リビジョン一覧領域にボタンを押した結果のサムネイルと,差 分一覧領域に過去のソースコードと結果の差分をまとめた差分領域を表示する.

4.2. システムの提供する機能

PocketsはC3PVのオリジナル画面に対し,新たにリビジョン一覧領域と差分

一覧領域を加えた.リビジョン一覧領域ではリビジョン表示機能を,差分一覧表 示領域では差分表示機能と手戻り機能をそれぞれ提供する.

以降,各領域が保持する機能について詳しく述べる.

4.2.1. リビジョン一覧領域

C3PVオリジナル画面でSave,Compile,Runのいずれかのボタンが押された 時,リビジョン一覧領域にそれぞれの動作に対応した色のサムネイルを自動で表 示する(リビジョン表示機能).この領域では,ユーザがいつ,どのような操作 を行ったのかを示す.特に,CompileあるいはRunが実行された時には,コンパ イルエラーや実行時エラーの有無が確認できるようになっている.四角の枠線に は実線と点線があり,実線はそのリビジョンが差分表示領域に表示されているこ とを示している.枠線の色はSave,Compile,Runのいずれが実行されたのかを

図 6 リビジョン表示機能の表示例

示しており,それぞれ黄色,青,赤の色と対応している.四角内右上に表示され ている′′′′及び′′×′′はCompileあるいはRunが実行された際に,異常終了した かどうかを示している.すなわち,′′′′の表示はプログラムが異常終了しなかっ たことのみを示しており,必ずしも正しい結果が出力されたとは限らない.図6 の場合は,ユーザは順にSave,Compile,Runの動作を行い,Compileを行った 時コンパイルエラーが生じたが,その後の修正によりRunを行った時はエラーが 生じなくなったこと例を示している.

4.2.2. 差分一覧表示領域

差分一覧表示領域には,4つ分の差分を表示する領域がある(差分表示機能).

この領域を差分表示領域と定義する.ユーザが任意のリビジョンをサムネイル一

⼿手戻り機能

ピン⽌止め機能

エラーメッセージ リビジョンID

リビジョンに対する 動作内容

表⽰示切切り替え機 表⽰示切切り替え

機能 ソースコード

差分表⽰示機能

(差分表⽰示中)

出⼒力力結果 差分表⽰示機能

(オリジナル表⽰示中)

図 7 差分表示領域の表示例

覧表示領域から選択するか,ユーザのSave,Compile,Runの操作によって新た なリビジョンがデータベースへ保存されるたびに,差分一覧表示領域の右下に新 たな差分表示領域が出現する.なお,差分表示領域は最大4つまでしか表示でき ないようになっており,左上,右上,左下,右下の順で新しい.既に4つ表示さ れている場合には最も古い差分表示領域が削除され,新しいものが右下に追加さ れる.

図7に差分表示領域の例を示す.差分表示機能では,特定のIDのリビジョンと 最新のソースコードの差分が表示される.特定のIDのリビジョンに対して,最 新のソースコードで追加した文字は背景が緑色で下線が引かれ,削除した文字は 背景が赤色になり打ち消し線が引かれる.また,差分表示領域のSource codeと

Outputという文字の左に表示されている目のアイコンをクリックすることで,オ

リジナルのソースコードもしくは出力結果と表示を入れ替えることができる(表 示切り替え機能).出力結果の差分は,標準出力同士あるいは標準エラー出力同 士を比べるようになっており,特定のリビジョンと最新のソースコードの出力結 果が標準出力と標準エラー出力であった場合,混乱を招かないように差分は表示 せず自動でオリジナルの出力結果を表示するようになっている.

各リビジョン表示領域の右上にある矢印アイコンをクリックすることで,クリッ

(a) 特定の差分表示領域のリビジョンへ対する手 戻り

(b) 特定のサムネイルのリビジョンへ対する手 戻り

図 8 手戻りを行う際の通知例

クしたリビジョンの内容とエディタ領域で実装中のソースコードとを入れ替える ことができる(手戻り機能).手戻りを行う際の通知の画面を図8に示す.この機 能により,探索中のユーザがいつでも簡単に手戻りを行うことができるようにな る.また,差分表示領域に表示されていないリビジョンに対しても,サムネイル をクリックすることで手戻りを行うことができる.手戻りを行ったときにエディ タ領域で実装中のソースコードについては,Saveを行ったものとして,新たにリ ビジョン一覧表示領域及び差分表示領域に追加される.

また,特定のリビジョンを差分表示領域に表示し続けておきたい場合は,各リ ビジョン表示領域右上のハートマークを選択する(ピン止め機能).ハートマー クが選択された状態のリビジョンはユーザが変更の基点(プロトタイプ)にして いるとし,新しいリビジョンとの入れ替えが行われない.3.2章で述べた探索的プ ログラミング実態調査においても,特定のリビジョンのソースコードに何回も手 戻りを行っている事例が存在した.特定のリビジョンを差分表示領域に表示し続 けられるようにすることで,この種の手戻りにも対応が可能となると考えられる.

ドキュメント内 ( ) (ページ 32-37)

関連したドキュメント