成蹊大学理工学研究報告
J. Fac. Sci. Tech., Seikei Univ.
Vol.42 No.1 (2005) pp.51-55

Web 技術を用いたプログラミング学習環境の構築
井ノ本 喜彦＊1，甲斐 宗徳＊2

Construction of Programming Learning System with Web Technologies
Yoshihiko INOMOTO＊1, Munenori KAI＊2
ABSTRACT：For the beginner of programming, just by actually performing a series of work of writing,compiling and executing a program, the result of sufficient study is produced. When writing a program,various description to get the same execution result is possible. It is thought that only thechoice-one-of-options-type questions and fill-in-the-blanks-type-questions which many e-learning
systems have adopted are not adequate as a valuation method of programming study. Therefore, even if
an answer in a blank filled by student is not model answer, and if the output result obtained by compilingand executing the whole program is correct, then e-learning system for programming study is expected tojudge it as the correct answer. We developed such an e-learning system that enables a student to describe
a correct program freely. Moreover, functions, such as problem creation support, score determination
support, automatic grading, and student management, were also given so that conveniently also for theteacher who sets a problem. Our system corresponds to and programming study of Java, C and C++.
Keywords：Web based training, Programming study, Java, C, C++(Received March 25, 2005)

１．はじめにではなく，コンパイルおよび実行して得られた出力結果によって正解を判断し，学習者に自由なプログラミング

インターネットの普及とともに web アプリケーションを可能にさせるようなプログラミング学習ソフトの開発が発達し，情報収集に時間と場所を割く必要がなくなりを行った。サーバ側でコンパイルおよび実行を行うと，つつある。それは学習にも影響を及ぼし，講義資料を web同時学習者数が多くなるとサーバにかかる負担が大きく配布する機会も多くなった。また資料だけでなく，選択なってしまう。それを回避するために，コンパイルおよ式の解答を行って自動採点してくれる web サイトを構築

び実行は学習が使用しているクライアント側で行うようすることは比較的容易なこととなってきた。一方，プロにする。また問題を出題する教員にとっても便利なよう

グラミングの授業はソースを書いて実行するまでを実際に，問題作成支援，配点決定支援，自動採点，学習者管に行わなければ技術の習得につながらない。プログラム

理などの機能も持たせることにした。
本システムは Java，では，同じ実行結果を得るのに何種類の記述も可能であC，C++のプログラミングに対応でき，使用する学習者にるため，多くの e-learning システムが採用している選択

基礎的なプログラミング能力を身につけさせることを目式や，記入した解答が正解と完全一致する方式では不十的とする。

分と考えられる。プログラムとして正しい論理構造にな

２．学習者側システムの概要っていて，正しい結果を与えるプログラムであれば正解と判定する方法が必要である。そこで，本研究では，学習者が穴埋めしたり作成したりしたプログラムについて，模範解答と完全一致で正解または不正解の判定をするの＊1＊2

経営・情報工学科学生（現：日立ビジネスソリューション）
情報処理専攻助教授(kai@st.seikei.ac.jp)
Associate Professor, Dept. of Information Sciences

−51−

図1

ログイン画面学習者は管理者から指定された学習者 ID，パスワード

題を選ぶと，図３のような問題文とプログラムの穴埋めを図１のログイン画面で入力し，その後，図２の上段の問題が表示される。プログラムの中の空欄（テキストエ

メニューから，学習したいプログラミング言語の種類や，リア，またはテキストボックス）を問題文に沿って入力

質問用の掲示板，使い始めに必要な設定などの項目を選する。空欄を埋め終わったら，学習者は「確認」ボタン択することができる。

を押し，入力確認画面で空欄に埋めた部分を含むプログ
ラム全体を確認したあと，コンパイルボタンを押す。
すると実行したソース，コンパイル結果，実行結果，得点が表示されたページが表示される。成績として結果を登録する場合，「送信」ボタンを押す。
学習者に入力を促すプログラムの場合，その入力データによって実行結果が変化する。そこで実行結果で正解か否かを判断するために，問題作成時に作成された模範
ソースと，学習者が作成したプログラムを，学習者が入力したデータを用いて両方ともクライアントマシン上で実行し，お互いの出力結果を照らし合わせることで判断している。

図２

メニュー選択画３．管理者(教員)側システムの概要

特にこのシステムを初めて使用する時には，メニューから「設定」を選んで図２のページに行き，パスワード変更を行う。本システムでは，学習者の解答の正解・不管理者は図４に示す，管理者用ログインページで管理正解を判定するために，プログラムをコンパイルおよび者用 ID，パスワードを入力してログインすると以下のこ実行するが，これをサーバ側で行うと，多数の学習者がとができる。

アクセスするときサーバにかかる負荷が非常に大きくなり，結果的に学習者の学習を妨げることになる。そこで，本システムでは，コンパイルや実行はアクセスするクライアント PC で行えるようにしている。そのために，図２の右側のフレームで，無償のコンパイルおよび実行環境を選択してダウンロードし，自分のマシンに必要なインストールを行うことができるようになっている。一度，

図４

管理者用ログイン画面必要な環境をインストールした PC では，そのプログラ
3. 1

ミング言語の学習を繰り返すときには，再度同じ環境を学習者管理インストールする必要はない。
メニュー選択から学習したいプログラミング言語と問図５
図３

問題選択画面−52−

学習者管理画面

管理者としてログイン後，左側のメニューから学習者管理を選ぶと，最初に全学習者の学籍番号，学習者 ID，パスワードが表示される。そこから各学習者の成績画面，パスワード更新画面，学習者 ID 削除画面に移ることができる。また，新規学習者 ID の登録画面に移ることができる。学習者の新規登録や削除の作業は管理者のみが行うことができる。学習者 ID の削除に同意した場合，その学習者の学習者 ID 及びパスワードはもちろんのこと，過去の成績も削除される。
3. 2

問題管理

図５の左側のメニューから問題管理を選ぶと，図６に示す画面が現れる。この画面から問題言語，問題番号を選択することで，指定された問題の一覧が表示される。

図８

一覧では問題言語，問題番号，問題文，配点が表示され，詳細画面，問題削除画面に移ることができる。

問題更新画面る。穴埋め用のプログラムを記述するためには，１行以図６で新規問題作成を選択すると，図７に示す問題作上のテキストボックスにする場合は，コードの行頭に@/成画面に移ることができる。という記号を付ける。行中に穴を空ける場合には，穴に新規問題作成では，表示内容に従ってプログラム言語，相当する部分のコードを@[ ]@で囲む。このようにこの更に何を意図したプログラムなのかを説明する問題文，ツールを利用することで，教員は直接 HTML タグを打た正しいプログラム実行結果，プログラムソースを入力すなくても空欄のあるプログラムや問題文の組み合わせを用意することができる。
図６で各問題の詳細を選ぶと，図８に示すような問題詳細画面が表示される。この問題詳細画面では，問題文，プログラムのソース，実行例，入力データ例，模範解答と配点が表示される。配点の下にある配点変更を選択すると，図９のように配点を変更することも可能である。
学習者がこの問題を解いて，正解したときには，この配点が得点として自動採点される。

図６

問題管理画面図７

問題作成画面

図９−53−

配点変更画面

3. 3

成績管理

図６の画面の左側のメニューから成績管理を選ぶと，自動採点された結果の確認や，教師による採点のし直しなどの作業を行うことができる。成績管理を選び，学習者 ID，問題言語，問題番号を選択することで，図 10 のように，選択された学習者や問題の成績一覧を表示することができる。一覧では学習者 ID，問題言語，問題番号，

図 11

成績詳細画面

int i=5;printf(“i=%d“,i);

図 12

int i=5;printf(“i=5“);

間違いと判定したいプログラムの例

しかし，これを自動的に「間違ったプログラム」と判断するのは難しいので，学習者が記入した解答を一覧表示できるようにし，教員が論理的に間違った答えを見つけることで採点結果を修正できるようにした。このようにして，自動採点の便利さと，きめ細かな採点の両立を
図 10可能にした。

成績管理画面

４．システムの実装について得点，配点，そして学習者がその解答を登録した際のクライアント側のホストアドレスが表示される。一覧のさせ方としては例えば，特定の問題を指定し，学習者 ID

本システムでは，学習者の解答プログラムの正解・不として全員を指定すると，その問題に対する学生の解答正解を自動的に判定するが，サーバ側の処理を軽減するを一覧し，解答の傾向を見ることができる。このようにために，解答プログラムと模範解答プログラムをコンパ特定の問題の解答を一覧することにより，出題者が意図イルして実行するのはクライアント側での処理となる。

していた解答と著しく異なる解答を発見することができこの関係を表したものが図 13 である。

る。また学習者と問題言語を特定し，問題番号にすべてクライアント側①問題のページにアクセス③問題選択④解答、入力データ入力⑦コンパイル、実行⑧コンパイル、実行結果、個人情報ファイルをアップロードを選んで一覧すると，その学習者が解いたその言語に関する問題すべてと得点を一覧することができる。一覧されたデータを別に表計算ソフトウェアで集計しやすいよ
うに，CSV 出力するためのボタンも用意した。
一覧では学習者 ID，問題言語，問題番号，得点，配点，その問題を登録した際のホストアドレスが表示され，さらに図 11 に示すような詳細画面に移ることができる。

データベース側⑩登録ある学習者の成績で実行結果が自動採点による採点では合っていても，問題作成者の意図した解答と違ったプ

図 13

ログラムにより解を出力している場合もあり得る。例え

サーバ側
②ログイン
⑤プログラム格納ファイル、入力データファイルに格納⑥プログラム格納ファイル、入力データ格納ファイル、個人情報ファイルをダウンロード⑨採点し、結果をデータベースにアップロード

クライアントとサーバの関係

ば下記のプログラムセグメントは同じ i=5 という表示を前章で説明したような動的な Web ページを作成する

行う実行結果になるが，右の方のプログラムは問題作成にあたって，サーバサードスクリプト言語である者の意図しないプログラムであるとすると，このようなPHP4.3.4 を用いた。また学習システム全体としては，Web記述は不正解にしたい。

サーバ以外に，問題文や模範解答，配点，学習者情報の−54−登録などのため，データベースシステムも利用している。にバラエティを持たせ，色々な記述を試したりすること

このデータベースには，MySQL4.0.21 を使用した。

ができるとともに，動作の妥当性を確認するために，色々なデータを入力して模範解答と比較することができるの

５．おわりにで，自主的な学習効果が上がることが期待できる。またサーバ側の負担を軽減し，多人数の学習者によるアクセ

本研究では，プログラミング言語の学習システムを，スも可能にした。

Web 技術を用いて作成した。
プログラミングの学習では，さらに学習者の操作を簡単にするのに加えて，問題を従来の e-learning システムの多くで採用しているような，出題する教員側の各種作業も行いやすくするようなシス選択式および穴埋め式による解答が模範解答と完全一致テムを目指した。出題のプログラムのどの部分でも自由することで正解判定する方式は適切ではないため，解答に空欄にすることができる。本システムを実際に大学講したコードセグメントを含むプログラム全体の論理的な義の演習などに利用して，今後評価・改善していくこと構造が合っていれば同じ実行結果が得られることに着目としたい。

し，実際に実行した結果で正解判定する方式を実現した。

参考文献

実行時の入力データも出題者と学習者で異なる可能性があるので，正解判定にあたっては，学習者の入力データで模範解答プログラムを実行し，学習者と模範解答両方[1] 飯田浩育，菅野茜：「プログラミング学習環境シスの実行結果を比較することで判定を行っている。これにテムの試作」2003 年度成蹊大学工学部経営・情報工より，学習者は同じ出力結果を得るために，使用する変学科卒業論文

数に自由度が出たり，使用する式の構造や制御構造など−55−