THE INSTITUTE OF ELECTRONICS, INFORMATION AND COMMUNICATION ENGINEERS TECHNICAL REPORT OF IEICE. 19-98 144-1 19-98 144-1 56-8531 1-3 C3PV C3PV C3PV 1 Java Programming Process Visualization for Supporting Students in Programming Exercise Syun SAITO, Makoto YAMADA, Hiroshi IGAKI, Shinji KUSUMOTO, Akifumi INOUE, Abstract and Tohru HOSHI School of Computer and Science, Tokyo University of Technology 144-1, Katakura, Hachioji, Tokyo, 19-98 Japan Graduate School of Bionics, Computer and Media Science, Tokyo University of Technology 144-1, katakura, Hachioji, Tokyo, 19-98 Japan Graduate School of Information Science and Technology, Osaka University 1-3, machikaneyama, Toyonaka, Osaka, 56-8531 Japan In this paper, we propose a Coding Process Visualizer in Programming Practice (C3PV). The C3PV records coding processes of students in the view point of LOC, operation records of our online editor, interval of time required for correcting errors. In the C3PV, such records indicate some students whose development progresses are delayed relatively. With using the C3PV, teachers can acquire students who need support. In the experiments of this paper, we confirmed that 88% of students indicated by C3PV have needed actual support by teachers to proceed with their subjects. Key words Programming Exercise, Education Support, Progress Management, Deverlopper Metrics 1. 1
TA(Teaching Assintant) [1] [] [3] C3PV(Coding Process Visualizer in Programming Practice) C3PV LOC(Lines Of Code) 4 C3PV TA C3PV C3PV /TA /TA 45 84% C3PV 3 4 5 6.. 1. TA CAPES [1] CAPES [4] [] TA R1 R R3 LOC 3. C3PV 3. 1 C3PV 1 C3PV
教室 コーディング C3PV コーディング過程の記録 化 可 視 オンラインエディタ コントローラ領域 サーバ 過 程 の 受講生 受講生用PC コ ー デ ィ ン グ 受講生支援 講師 エディタ領域 データベース 講師用PC コーディング過程ビュー 図 1 コーディング過程可視化システム C3PV の概要 出力領域 タによる開発環境を提供する 受講生のコーディング過程は オンラインエディタを通じて記録 コーディング過程ビューと 図 オンラインエディタを用いた Java プログラムのコーディング して可視化され 講師に提示される 表1 C3PV におけるオンラインエディタとコーディング過程ビュー は受講生および講師の PC 環境にブラウザが入っていれば利用 できるため 環境のセットアップは非常に簡単である C3PV は受講生のオンラインエディタ上のコーディング過程から各種 のメトリクスを収集する その結果をコーディング過程ビュー エディタ領域ログの種別 ログ種別名 内容 inserttext 一行以内の文字を入力 removetext 一行以内の文字を削除 insertlines 複数行の文字列を入力 removelines 複数行の文字列を削除 に可視化することで 受講生ごとの多様な遅延状況に講師が対 表 エディタ領域ログの例 応できるようになる 総 LOC や課題ごとのコーディング時間 といったメトリクスはコーディング対象のプログラミング言語 ID SID 時刻 1 文字列 に依存しないため様々な言語の演習に適用可能である 以降では C3PV の各構成要素と収集 可視化する 4 種類の メトリクスについて述べる ログ種別 1--1 15:.476 int x = 4; insertlines 開始行 開始列 終端行 終端列 1 3 int y = 3; 1--1 15:31.793 3 removetext 8 9 3 1--1 15:3.44 5 inserttext 8 9 4 1--1 15:39.643 int x = 4; removelines 1 3 int y = 5; 3. オンラインエディタを用いたコーディング過程の記録 表3 本稿で提案する C3PV において受講生は図 に示すオンラ インエディタにブラウザからアクセスし コーディングを行う コントロール領域ログの種別 ログ種別名 内容 newopen 対象の課題が初めてエディタで開かれた open newopen 以降に対象課題がエディタで開かれた save [Save] ボタンがクリックされた ドを記述し Save(保存) Compile(コンパイル) Run(実行) autosave C3PV がソースコードを自動保存した チェック待ちに変更 (課題提出) をコントローラ領域で選択する close ブラウザを閉じる等して受講生がエディタから離れた 受講生が Compile あるいは Run を選択すると 出力領域にコ compile [Compile] ボタンがクリックされた ンパイル結果あるいは実行結果が表示される エディタ領域で run [Run] ボタンがクリックされた は Ace [5] と呼ばれる OSS のコードエディタを利用すること submit [チェック待ちに変更] ボタンがクリックされた オンラインエディタはコントローラ領域とエディタ領域 出力 領域から構成されている 受講生はエディタ領域にソースコー で インデントやハイライトといったエディタに求められる基 本的な機能を実現している C3PV はこのオンラインエディタ 5 に書き換えた後 removetext と inserttext その 行の文 を通じて 受講生一人ひとりのコーディング過程を記録する を切り取っている removelines) ことを確認できる 3.. 1 エディタ領域ログ 3.. コントロール領域ログ C3PV は受講生がエディタ領域において行う操作とその時刻 C3PV は受講生がコントロール領域において行う操作とその をエディタ領域ログとして記録する ここで収集されるログの 時刻をコントロール領域ログとして記録する ここで収集され 種別を表 1 に示す エディタ領域において受講生はアルファ るログの種別を表 3 に示す autosave のみ C3PV による自動 ベットの文字入力や削除 コピー&ペースト カット&ペースト 保存を表し それ以外は全て受講生の行った振る舞いとして記 を行う C3PV は受講生による文字 (列) の入力/削除を検知し 録される 自動保存は newopen もしくは open が記録されてか エディタ領域ログとして記録する 表 に実際に C3PV が収 ら close が記録されるまでの間 1 分おきに呼び出される ま 集したエディタ領域ログの例を示す この例では SID に対 た エディタのページがブラウザが閉じられたり 別のページ 応するソースコードについて 初めに int 型の変数 x y を初 へ遷移したりすることによって表示されなくなったときに close 期化した 行の文を貼り付け insertlines y の値を 3 から が記録される 3
4 SID ID 1 syuns newopen 1--1 15:3: Java 4 syuns autosave 1--1 15:31: Java 3:...world! ) 3 syuns compile 1--1 15:31:5 Java 3:...world! ) 3: ; expected 5 syuns run 1--1 15:31: Java 3:...world! ); hello, world! 6 syuns save 1--1 15:31:5 Java 7 syuns submit 1--1 15:31:3 Java 8 syuns close 1--1 15:31:35 Java 4 C3PV hello, world! Java ID syuns newopen C3PV autosave syuns [Compile] compile [Run] run syuns [Save] save [ ] submit close 3. 3 4 M1: LOC M: M3: M4: M1: LOC LOC M1 1 M: newopen open submit M M3: / & 1 1 M3 (1) (4) 4 (1) a () a (3) class (4) class M4: / / M4 3. 4 M1 M4 3 3(a) ID LOC 3(b) 3(c) 5 5,1,15 3(d) ( ) 4(a) ID 4(b) 4 4
5 1 II Java 9 A B /TA 1/3 1/4 16 1 3 M1 M4 ID X1115D M1,M LOC M1 M4 4. 4. 1 C3PV edubasecloud [6] (Xeon.4GHz CPU 8 4GB) OS CentOS5.6 DBMS Apache/..3 MySQL/5..77 PHP/5.3.3 ZendFramework/1.11. JavaScript jquery/1.7. Ace/.. [5] 4. Ideone Ideone.com [7] API Ideone 4 SOAP 4. 3 C3PV C3PV ID C3PV 3 5. 5. 1 5 II 1 Java A B 3 3 TA 4 M1 M4 /TA 6 1 /TA ID 3 4 5 6 5. 6 C3PV /TA /TA C3PV 5
(a) M1 M4 (b) M1 M4 4 6 /TA 1 31 9(1) 6 35 1() 1 1 31 C3PV 1 3 4 (8%) 33 3 (97%) 3 1 1 1 6 1 ( 3 ) C3PV 1 7 /TA C3PV M1 M4 M3 M3( ) M1 M M4 M3 ( & 7 C3PV M1 M M3 M4 M1 M M3 M4 1 17() (5) 1() 1() 3 4 1 3 15() 1() 9() (1) 3 5 4 6 6. C3PV 8 Java Ideone M1 M4 C3PV M3( ) [1] vol.j91-d no. pp.8 9 Feb. 8 [] 18 pp.1 6 March 7 [3] (collaboration agent / ). ET, vol.14 no.73 pp.19 4 Feb. 5 [4]. ET, vol.14 no.48 pp.7 1 4 [5] Ace(ajax.org cloud9 editor), http://ace.ajax.org/. Feb. 1,1. [6] edubasecloud, http://edubase.jp/cloud/. Feb. 1,1. [7] Ideone, http://ideone.com/. Feb. 1,1. 6