%#DVIPDF dvipdfmx -f textfont.map
\documentclass[11pt,a4j]{jbook}
\usepackage[dvipdfmx]{graphicx}
\usepackage{float}
\usepackage{url}
\usepackage[inner=30mm, outer=15mm,top=30truemm,bottom=30truemm]{geometry}
\usepackage{ascmac}
\usepackage{listings}
\usepackage{graphicx}
\usepackage[dvipdfmx]{color}
%\addtolength{\topmargin}{0cm}
%\addtolength{\textheight}{3.5cm}
%\addtolength{\textwidth}{1cm}
%\addtolength{\oddsidemargin}{1cm}
%\addtolength{\evensidemargin}{0.5cm}
\begin{document}
\begin{titlepage}
\title{プログラミング教育の補助システムの提案}
\author{広瀬研究室3年 \\C1172081 山口円馨}
\date{}
\maketitle
\thispagestyle{empty}
\end{titlepage}
\newpage
\newpage
\begin{center}
{\bfseries 概要}
\end{center}
2020年度から小学校をはじめとしたプログラミング教育が始まる。東北公益文科
大学ではプログラミングの講義を必修化しているが、受講する学生
がプログラミングに抱いているイメージは難しいや学ぶ意味が分からないなどの
ものである。また、教員側もプログラミン
グの個人単位のスキルの評価は困難であり、学生数が多いと動作確認まで行い正
確な評価をするのはさらに困難を極める。本研究では、教員が個人の評価を行いやすく、かつプ
ログラミング初学者が学びやすい環境を作るための、プログラミングにおける評価の補助シ
ステムの作成を目的とする。本研究の基本方策は、プログラミング学習における
一連のサイクルを分析し、コンピュータの機能を使用して処理する部分は機能を使用し、人の手で行う
部分にはより作業をしやすい表示を行う。まず最初に、学生側と教員側のサイク
ルの作業の切り分けを行った。この結果、コンピュータが処理する部分はプログラム
文の実行や採点であると考えた。また、人の手で行う部分はプログラムの理解へ
の説明や、個人単位の総合的な配点である。これに対してはコンピュータ上の表示により用意
な環境を整えることが必要である。その次に、この設計に基づいて実装し、実装
上の工夫について議論した。さらに実際の運用を経て課題を明らかにした。今後
の課題については、学生側が見て理解できる表示や、教員側が採点をする際の表
示を使用する側の目線から明らかにすること、さらに脆弱性を議論した。(600文字)
\tableofcontents
\clearpage
\chapter{はじめに}\label{sec:start}
本章では研究の背景と目的について説明する。
\section{背景}
新学習指導要領~\cite{高等学校学習指導要領,教育の情報化の推進,小学校,手引,手引2,資料}が公示され、令和2年度から小中高生を対象としてプログラミング的思考の育成やプログラミング学習が必修となる。中学校から実際の
プログラミングが始まるが、これに対して、教職員の実態と意識調査の結果で
は、98％が「授業の実施に不安」を感じているといった結果が出
た~\cite{ReseMom}。加えて、第\ref{sec:que-taisaku}章で述べるアンケート
結果によると、学生側の意見には
プログラミングに対しては「難しい」、「将来役に立つのかわからない」「動く
と楽しい」といったものが見られた。
この結果を受けて、教員が個人の評価を行いやすく、かつプログラミング初学
者が学びやすい環境を作るための、プログラミングにおける評価の補助システムの重要性があると考え、検討した。
\section{基礎プログラミング}\label{sec:kisopro}
東北公益文科大学(以下本学)ではプログラミングを学ぶ基礎プログラミングI・
IIが開講されている。
当講義では、一つのクラスにつき約40人の学生が受講している。学生一人に対して計算機が一台用意される。画面上には、左上にプログラム文を入力するエディタ(Emacs)、右
側のプログラムの実行結果を見るターミナルエミュレータが2つ(Kterm)(console)、教員が作成した講義
ノートを見るWebブラウザ(Firefox)が表示されている(図\ref{fig:kisopro})。
学生は、講義の説明を受けた上でプログラミングを実際に行う。その際、一つ
のプログラムの構成を説明するため、短いプログラム文などが存在する。それらを
Webブラウザの画面を目視し、エディタへと書き込み、ターミナルエミュレー
タで実行する、と
いった一連の流れが発生する。
講義の最後に課題が出され、学生は期限までに課題をメール(Mew)で送信する。
教員側はメールを確認し、記載されたプログラム文を目視した上で実行し、プ
ログラムが成功しているかを判断する必要がある。教師側の一連の流れは以上
になる。一連の流れとしての工数は多くないが、学生全員分に対して行う
場合には作業量が人数に比例してに増加する。
また、講義内で説明として表示されているプログラム文を実行する時間には個
人差があり、考慮すると説明すべき点を十分に説明できない事態となる可能性
がある。
これらの講義は必修科目であり、在学する学生が必ず受講する。初めての取り
組みに苦戦し、プログラミング自体に苦手意識を持つ学生が見えた。さらに、プロ
グラムのエラーで生じるエラー文を読み解くことができないことも苦手意識をも
たせる原因となっている。
\begin{figure}[H]
\centering
\includegraphics[width=14cm]{scsho.png}
\caption{受講者の標準作業画面}
\label{fig:kisopro}
\end{figure}
\newpage
\section{目的}
現状の課題を解決するために、
プログラミングにおける評価の補助システムの作成を提案する。
\section{研究内容}
本研究は以下の手順を踏まえ、最終的な課題を明らかにしていく。
\begin{enumerate}
\item 問題点を見つける
プログラミング教育の現状や既存のシステムや研究を比較する
ことで、具体的な問題点を明らかにし対策を講ずる。
\item 基本の方策の提案
対策をもとに、システムの提案を行う。この際、どういった部
分をコンピュータのシステムで補うか、また人の手で行う作業
はどういった方法で補助するか、といった点を考える。
\item システムの設計
前提と要件を決めた上で基本方策に則り、システムを
設計する。また、それぞれがどういった問題への取り組みにな
るかを明確にする。
\item システムの開発
設計をもとにシステムを開発する。また、実際に運用した上で
システム上の問題を明確にする。
\item 考察
以上の手順を踏まえた上で、さらに改善すべき点を述べ、具体
的な手法がある場合は議論を重ねたのちに実装していく。
\end{enumerate}
\section{本稿の構成}
本稿では、第\ref{sec:system}章では既存の研究やシステムを分析する。第
\ref{sec:que-taisaku}章では問題点を明らかにし、対策を講じる。そ
れをもとに第\ref{sec:idea}章ではシステムの方策を決め、第\ref{sec:sekkei}
章ではシステムの設計を行い、第\ref{sec:create}章で開発、評価する。評価を
元に第\ref{sec:kosatsu}章で考察し、第\ref{sec:matome}章でまとめとする。
\chapter{既存のシステムや研究}\label{sec:system}
第\ref{sec:start}章では、背景や本学で行われているプログラミング教育の現
状から目的と研究内容を設定した。本章では、問題点を見つけるために既存のシ
ステムや研究の説明を行い、どういった問題があるかを示す。また、次章から問
題点を解決するシステムの提案を行う。
\section{既存のシステム}
本研究と同様のシステムを搭載している既存のシステムを説明する。主に企業
が作成している。
\subsection{paizaラーニング~}
ギノ株式会社が開発した転職支援サイトである\cite{paiza}。実行画面は図\ref{fig:paiza}のとおりである。目的別に名称が分かれており、プログラミングを行う学習サイトがpaizaラーニングである。動画を見ながら学習する。各言語の最初の動画では言語の説明や使うことで何が出来るか、採用され
ている例はどういったものかの説明が行われる。paiza.IOというオンライン実行
環境によって実行環境がWeb上に構築されている。
有料会員になることで実際のエンジニアに質問を行えるようになるなど、疑問
に対する取り組みも存在する。間違えやすいポイントなどもTipsとして扱われ
ている。一つのチャプターの説明が終わると演習問題に取り組むことが出来る。
演習問題では起こりうるエラーなどに対しての対策を問題として取り上げてお
り、ここでは実際にコードを記入し、判定が行われる。
\begin{figure}[H]
\centering
\includegraphics[width=12cm]{paiza.pdf}
\caption{paizaの実行画面}
\label{fig:paiza}
\end{figure}
\subsection{Progate}
株式会社Progateが開発した、アプリケーション化もされており、スマートフォ
ンなどの端末上からでもプログラミング学習が可能なプログラミング学習サイ
トである\cite{progate}。実行画面は図\ref{fig:progate}のとおりである。はじめにスライド式で言語やメソッドの説明を
行い、実際にコードを入力する演習に取り組む。問題に正しく答えられた場合
は次の演習へと進む。基礎的なレッスンは無料で受講できるが、高度な技術を
要するレッスンは有料となる。
\begin{figure}[H]
\centering
\includegraphics[width=14cm]{progate.pdf}
\caption{Progateの実行画面}
\label{fig:progate}
\end{figure}
\newpage
\section{類似研究}
類似の研究では、実際に大学で運用しているシステムや企業内でのプログラ
ミング教育やテストに運用されているものがあった。以下に説明を示す。
\subsection{Wapenの改良}
中西によるWebブラウザ上のプログラミング学習環境WaPENの改良~\cite{WaPEN}で
は、プログラミング学習環境を Web ブラウザ上で実行できる環境として WaPEN~\cite{WaPENpro}
を開発し,勤務校での授業で用いている。教員等がサンプルプログラムを簡単に差し替えられるようなプログラムも開発されており、授業を円滑に進めるためのシステムが多数存在する。
この開発環境では、プログラムをコードとしてではなく日本語としての説明とし
て入力、フローチャート化するため、流れを理解するためのシステムである。
考察にあるとおり、これは初学者にとって有効であるがある程度上達した者に
とっては足かせとなっている面もある。
\begin{figure}[H]
\centering
\includegraphics[width=14cm]{wapen.png}
\caption{WaPENの使い方}
\label{fig:keiken}
\end{figure}
\subsection{試験システムtrack}
新田,小西,竹内らの複数言語に対応しやすいオンラインプログラミング学習・試
験システム track~\cite{track}では、プログラミング学習環境の構築や改善への期待が高まっていることを鑑みて、学校や企業におけるプログラミング教育に用いること
のできるシステムとして track というオンラインプログラミング学習・試験配
信プラットフォーム~\cite{tracks.run}を提案している。
trackの導入には料金が発生し、一般企業などで「採用選考で活用したい」「社
員育成/評価で活用したい」といった用途に合わせた料金プランが用意されてい
る。料金が発生するため、本格的にプログラミングを使用する企業、または人
を対象にしているが、初学者が学ぶ際に使用することは困難である。
導入している会社には株式会社バンダイナムコスタジオ、LINE株式会社がある。
\chapter{プログラミング教育の問題および対策}\label{sec:que-taisaku}
本章では、プログラミング教育の問題点をアンケートにより明らかにし、その
対策を議論する。
\section{調査}\label{sec:inve}
本節では、初学者である基礎プログラミング受講者が授業を受ける際に、難し
いと感じている現状をアンケートを用いて集計した。これにより問題
点を明らかにした。アンケート用紙は付録\ref{chap:enquete}に示す。アンケー
トの質問と回答形式を以下に示す。
\begin{description}
\item[質問1] プログラミングについてどう感じますか。
回答形式:自由記載
\item[質問2] 大学入学前にプログラミングを体験した経験がありますか？
(Progateなど学習サイトを含む)
回答形式:2択(ある、なし)
\item[質問3] 基礎プログラミングの難易度はどのぐらいですか。
回答形式:5択(簡単、少し簡単、普通、難しい、とても難しい)
\item[質問4] プログラミングで特に難しいと感じた部分はどこでしたか。
回答形式:4択(動かない・エラー文が読めない、メソッドが覚えら
れない、そもそも組み方がわからない、その他)
\item[質問5] 質問5.プログラミングを楽しいと思う・理解したきっかけは何
でしたか。
回答形式:4択(動いたとき、難易度が高いプログラムを作れたとき、
緻密な作業、その他)
\end{description}
質問3、質問4に対する結果は図\ref{fig:nanido},\ref{fig:dif}のとおりで
ある(2019-11-19時点)。
アンケートにより、プログラミングを難しいと考えている、また特に難しいと感
じた部分では選択肢を3つに絞った内、ほぼ均等に苦手意識が現れていることが
分かった。第\ref{sec:system}章のようなプログラミング学習サイトを本学入学前に経験している学生の割合は4.43\%となった。アンケートの結果は図\ref{fig:keiken}である。
\begin{figure}[H]
\centering
\includegraphics[width=15cm]{graf2.eps}
\caption{基礎プログラミングの難易度}
\label{fig:nanido}
\end{figure}
\noindent
\begin{figure}[H]
\centering
\includegraphics[width=15cm]{graf3.eps}
\caption{プログラミングで特に難しいと感じた部分}
\label{fig:dif}
\end{figure}
\begin{figure}[H]
\centering
\includegraphics[width=12cm]{graf1.eps}
\caption{プログラミング経験の有無}
\label{fig:keiken}
\end{figure}
\section{問題}\label{sec:que}
第\ref{sec:inve}章と第\ref{sec:kisopro}章、第\ref{sec:system}章の結果
を得て学生側と教員側、プログラミング学習サイトの問題を提示する。
\subsection{学生側}
学生側の問題としては以下が挙げられる。
\begin{description}
\item[問題1] プログラムを活用する機会が分からず、意識の向上がない。
プログラミング教育を受ける際に、プログラミングをどこで活かす
のか分からないといった声がアンケートで上がった。これにより学
習の意欲が薄い。
\item[問題2]苦手意識がある。
基礎プログラミングを受講する学生はアンケート結果から、プロ
グラミングを経験していない初学者ということが分かる。そのため、初めて経験
するプログラミングに対しての苦手意識がある。
\item[問題3] エラー文の解読ができない。
問題1に関連する。初学者は英語のエラー文が出た時点でプログ
ラムの作成を諦める傾向があった。検索エンジンを使用するという意識も薄い。そのため、エラー文で挫折する学生がいた。
\end{description}
\subsection{教員側}
教員側の問題としては以下が挙げられる。
\begin{description}
\item[問題4] プログラムの評価に手間がかかる。
教員はメールで送信された課題に対して、目視した上で実行が可能
か不可能かひと目で分からないものは実際に動かす必要がある。学
生が全員プログラムが動作する状態で送っているなら目視のみで終
わるが、実行不可能なプログラムがあると評価には極端に時間がか
かる。
\end{description}
\subsection{プログラミング学習サイト}
プログラミング学習サイトの問題としては以下が挙げられる。
\begin{description}
\item[問題5] 決まった問題にしか取り組むことが出来ない。
プログラミング学習サイトではあらかじめ問題が設定されており、
自由に任意のプログラムを書くことには適していない。
\item[問題6] 企業が制作しているため、本格的な学習を行うには料金が発生す
る。
学生が独自に学ぶ際にも料金が発生していることは、あくまで学生
生活のみでプログラミング学習をすることを前提としている初学者
には使うことをためらう要因である。
\end{description}
\section{対策}\label{sec:taisaku}
第\ref{sec:que}節で示した問題に対しての対策案を以下に示す。
\subsection{学生側}
学生側には表示によって視覚的に情報を伝え、また苦手意識の原因となる部分を改善していく。学生側の問題への対策を以下に示す。
\begin{description}
\item[対策1] プログラミングはどういったものか、説明を視覚的に表示する。
\item[対策2] エラー文をより分かりやすく、調べやすく表示する。
\end{description}
\subsection{教員側}
教員側のヒューマンリソースを鑑みて、評価までの一連のプロセスをシステム化することで手間の軽減を図る。教員側の問題への対策を以下に示す。
\begin{description}
\item[対策3] 簡易なプログラム文を実行できるエディタの用意。
\item[対策4] プログラム文の判定を自動で行う機能の実装。
\end{description}
\subsection{プログラミング学習サイト}
プログラミング学習は教員によって指導方法が異なる。どのような方法にも柔軟に応じる
ために、問題文は固定したものではなく自由に変更できる必要がある。
プログラミング学習サイトで起こる問題に対しての対策を以下に示す。
\begin{description}
\item[対策5] 問題を教員側が自由に設定できるシステムの実装。
\end{description}
\chapter{プログラミングにおける評価の補助システムの提案}\label{sec:idea}
本章まで論じた現状や問題、対策を踏まえた上で、プログラミング教育に取り組む
学生と教員の課題となる部分を解決するシステムを基本方策として提案する。
システムの名前はleafR(Less offort and full Results)とし、今後本システムを
leafRで表記する。
\section{問題の整理}\label{sec:rere}
第\ref{sec:que-taisaku}章であがった問題では、学生側に苦手意識があ
ると論じた。これらの原因はそもそもプログラミングを行うことに対して意
義を感じていない意見があったことも考えられる(図\ref{fig:free})。学ぶ
意味を理解していないことによって向上意識も起きず、また意欲も出ない。加え
て、プログラムのエラー文は解読が難しく、種類も多い。それに対して検索エン
ジンを使用して調べている学生は観察できなかった。これもまたプログラミングへの
苦手意識へと繋がる。
教員側の問題としては簡易なプログラムを実行する際の学生の手間を踏まえた上
で、決められた時間内に説明を終える必要性がある点と、提出される課題の評価である。仮に時間内に理解できない
学生がいた場合はやむなく次の説明へと移るが、学生は理解していないために講
義自体についていくことができなくなる。さらに、教員の確認方法、評価方法で
変わるものの、課題の評価では学生全員分のプログラムを目視し更に実行まで行った場合の手間に苦しんでいる。
\begin{figure}[H]
\centering
\includegraphics[width=15cm]{result.png}
\caption{自由記載欄の回答}
\label{fig:free}
\end{figure}
\section{学生と教員のサイクル}
プログラミング教育では、一連のサイクルが発生している。学生側と教員側のサイクルをもとに説明する。
\subsection{学生側}
学生側のサイクルでは説明を聞く、簡易なプログラムを実行する、課題に取り組
み結果をメールで送信する、の3つの工程に分けられる。流れは図
\ref{fig:sai1}のとおりである。その際に、何度も繰り
返されるのが簡易なプログラムを実行する動作である。これを実行する際の手順
もまた一連のサイクルとなっているが、3つの画面内の表示を見る必要があり、
効率的ではない。
\begin{figure}[H]
\centering
\includegraphics[width=15cm]{saikuru1.pdf}
\caption{学生側のサイクル}
\label{fig:sai1}
\end{figure}
\newpage
\subsection{教員側}
教員側のサイクルでは、メールが届き開く、目で見て実行可能かの判断、評価が
大筋となる。流れは図\ref{fig:sai2}のとおりである。その際に、目で見て実行可能か分からないプログラムがあった際に
は実際にプログラムを実行するといった手順が1つ増える。また、メールをい
ちいち開く、見るといった細かい動作を含めると評価には時間を有することが分
かる。これも効率的とは言えない。
\begin{figure}[H]
\centering
\includegraphics[width=8cm]{saikuru2.pdf}
\caption{教員側のサイクル}
\label{fig:sai2}
\end{figure}
\section{サイクルの分割と方策の提案}
これらのサイクルをコンピュータの機能で実行した方がよい場合と、人の手で実行した
方がよい場合で分割して考える。それぞれ、コンピュータの機能で補う部分と、人の手
で実行する部分をにより簡易にする表示の方法を示す。
\subsection{学生側}
学生側のサイクルを分割して考える。また、それを改善するための手法を示す。
\begin{description}
\item[方策1]簡易プログラムの実行の際の表示画面を1つにまとめる
コンピュータの機能でより簡易に実行する。学生側のサイクルにある簡易なプログラムの実行に関しては、3つの画面内の表
示をいちいち見るといった動作は、その3つの表示を一つの画面内に展開するこ
とで解決できる。
\item[方策2]課題の送信にメールを用いない
コンピュータの機能でより簡易実行する。課題の送信はメールソフトを起動せず、プログラムが実行した時点で教員
側から目視できる形で情報を保存することで、学生側の動作を省き
単純化できる。
\item[方策3]意識の向上を補う説明の表示
人の手で実行する際により簡易にする表示である。\ref{sec:rere}
章にあった問題を解決するためには、プログラミングの意義の説
明やエラー文への説明を随時行う必要がある。しかし、プログラム
の説明に加えると講義の時間がさらに圧迫されることは明確である。
そのため、コンピュータ画面に表示するといった形で視覚的に伝え
る。また、エラー文は手間をかけずに理解する、といった動きを作
る。
\end{description}
\subsection{教員側}
教員側のサイクルを分割して考える。また、それを改善するための手法を示す。
\begin{description}
\item[方策1] プログラムが実行可能であることが前提
コンピュータの機能でより簡易に実行する。教員側の評価のサイクルでは、目で見て実行可能か判断する、という工程が作業
が増える起点になる。そのため、教員側に情報が届いた時点でそれが成功してい
るという前提であれば、プログラムの動作をいちいち確認する必要
はなくなる。
\item[方策2] 個人の評価をより簡単にする表示
人の手で実行する際により簡易にする表
示である。教員側の方策1の前提を踏まえた上で、学生ごとに評価を行う際の表示
に工夫を加える必要がある。教員に届くプログラムの情報に個人を
判別するものを付与することで、その学生のみを評価の対象として
扱うことが容易になる。これによっていちいち名簿などと照らし合
わせる必要もなくなる。
\end{description}
\chapter{システムの設計}\label{sec:sekkei}
本章では第\ref{sec:idea}章で論じた方策を実現するためのシステムであるleafRを設計する。
\section{前提と要件}\label{zenyou}
このシステムの前提と要件を以下に示す。
\begin{description}
\item[前提1]使用する学生と教員のみがアクセスでき、外部からのアクセスが不可で
あるローカル環境を想定する。
\item[前提2]運用は基礎プログラミングの講義中のみとする。
\item[前提3]プログラミング初学者を対象とする。
\item[要件1]学生がプログラムを入力し、入力の実行結果を学生に表示する。
\item[要件2]エラーの場合は、エラーの情報を提示する。
\item[要件3]成功するまで入力できる。
\item[要件4]成功した場合は学生のユーザ名と共にプログラムの情報が保存さ
れる。
\item[要件5]ユーザ名が入力されていない場合は情報を保存しない。
\item[要件6]教員が情報を利用し、採点ができる。
\item[要件7]脆弱性について可能な限り対処する。
\end{description}
\newpage
\section{システムの設計}
システムを設計する。一連の流れは図\ref{fig:system}のとおりである。図
\ref{fig:system}にあるエディタページと実行ページの関係性は図\ref{fig:mosiki}
である。
本システムは、課題となる問題に答え、成功した場合にデータベースへと格納する課題システムと、講
義中の簡易なプログラムを実行する講義システムの2つに分けられる。以下の
機能をつける。
\begin{figure}[H]
\centering
\includegraphics[width=15cm]{design1.pdf}
\caption{システムの流れ}
\label{fig:system}
\end{figure}
\begin{figure}[H]
\centering
\includegraphics[width=14cm]{mosiki.pdf}
\caption{各ページの関係性}
\label{fig:mosiki}
\end{figure}
\subsection{エディタページ}
課題システム、講義システムどちらにも実装する。このページでは以下の機能が含まれる。これらの機
能で表示する内容は教員が入力できる仕組みになる。
\begin{itemize}
\item メソッドと想定の説明
問題を解く前にどういった場面で使うかの想定の説明をエディ
タページに表示することにより、どんな場面で使うかわからない、といった
疑問に対して答えることを想定している。
\item 問題文の表示
問題文が表示される。基礎プログラミングでは教員が作成したペー
ジを見ながらプログラムをエディタに書き込むという作業があるが、一つのペー
ジに問題文を表示することで手間の軽減を図る。
\item 出力回答例の表示
あらかじめ成功した場合の出力例を出すことで、逆にこれが出なけ
れば成功していない、と伝えるために表示する。
\end{itemize}
\subsection{実行ページ}
課題システム、講義システムどちらにも実装する。このページでは以下の機能が含まれる。
\begin{itemize}
\item エラー文の表示、説明
アンケート結果にもある通り、
エラー文が読み解けずに挫折する学生が多いため、出力頻度の高いエラー文に
は対策を講じた文章を表示する。その他、環境によってエラー文が英語で表示
される場合がある。慣れていない文に対して苦手意識が多く見られるため、対
策の説明は日本語で行う。
\item データベースへの格納
講義システムには実装しない。
教員の採点のため、実行し成功したプログラム文はデータベースに格納する。
検索を行えるように学籍番号またはユーザ名での登録を行う。
\end{itemize}
\subsection{個人評価確認ページ}
課題システムに実装する。このページでは以下の機能が含まれる。
\begin{itemize}
\item データベースに格納された情報の表示
実行ページにある機能であるデータベースの格納によって保存され
た情報を確認できる。個人判別のためのユーザ名とプログラム文
を表示する。
\item データベースの情報の検索
データベースには人数を問わず、実行に成功したユーザ名とプログ
ラム文を格納する。その際、母数が多くなるほど個人の学生を見つ
けるのは困難になる。それを防ぐため、検索欄を設けることで一個
人がどういったプログラム文を入力したのかひと目で分かるページ
の表示を行う。
\end{itemize}
\chapter{システムの開発}\label{sec:create}
本章では、以上の機能を含めたleafRの開発を行う。
\section{開発環境}
開発環境は以下の通りである。
\begin{itemize}
\item Ruby
Rubyとは、1995年にまつもとゆきひろによって開発されたオープンソースの動
的なプログラミング言語である。本システムではruby 2.5.1p57を使
用した\cite{ruby}。
\item SQLite3
SQLiteとは、軽量で速く、高い信頼性を持つSQLデータベースエンジン
を実装するC言語ライブラリである。本システムでは、
SQLite3.22.0 を用いた\cite{sqlite3}。
\end{itemize}
\section{システムの作成}
実装した部分を以下に示す。また、その際にどういったことを目的としているか
を述べる。
\subsection{エディタページ}
学生側が最初に見るページである。このページでは、プログラムを作成する前に
行うべき説明や、作成の際の手助けとなる表示を行うことで、視覚的にプログラムを作成
しやすくなることを目的としたページにした。機能は以下にあげたものを実装している。表
示される画面の上部から説明を示す。実際に作成した画面が図\ref{fig:edit}である。
\begin{figure}[H]
\centering
\includegraphics[width=15cm]{image1.png}
\caption{エディタページ}
\label{fig:edit}
\end{figure}
\begin{description}
\item[実装部分1]ユーザ名入力欄
プログラムを入力する前にユーザ名を入力する。本学では学生1人
につき学籍番号が割り振られており、基礎プログラミングなどで
はそれを入力する。これによってプログラムの情報を格納した際
に教員側は個人が作ったプログラムを検索することが容易になり、
評価の補助に繋がる。
\item[実装部分2]入力エディタ
プログラム文を入力するテキストエリアを作成した。エディタの役目を担う。プログラム文を入力
して送信ボタンを押すと、実行ページで評価を行う。送る文字列に
はCGIライブラリの機能の一つであるCGI.escapeHTML()を使用し、
特定の意味を持つ文字を無効化するためのエンコード処理を行っている。
\item[実装部分3]問題文・出力結果例・メソッドや想定の説明の表示
問題文には講義で取り組む簡易プログラムの問題文や課題文を挿入
する。出力結果例は、教員が用意したプログラムを実際に動かした
場合の結果を表示している。学生にあらかじめ答えを認識してもらうことで
プログラム作成のイメージを与える。メソッドや想定の説明では、
今から作るプログラムをどういった場所に使うか、また、どのよう
なプログラム文で作ると良いか、などヒントにもなり得る文章を挿
入する。
入力は教員が行えるように、問題文をquestion変数、出力結果を出すた
めのプログラム文をcode変数、メソッドや想定の説明をmethod変数とし
て扱っており、より簡易
プログラムの作成や課題の作成といった様々な場面に適応することができる。ソースは以下のとおりである。
\begin{screen}
\begin{verbatim}
#questionは問題文
question = "ここが問題文"
#codeは問題の出力結果例
code = "i = 1
while i <= 10
puts i
i += 1
end
"
#methodはメソッドと想定の説明の変数
method = "ここがメソッドの説明の変数"
\end{verbatim}
\end{screen}
\end{description}
% \newpage
\subsection{実行ページ}
エディタページにプログラムを入力し、その結果が出力されるページである。こ
こでは、学生が入力したプログラムに対しての評価や訂正箇所を伝える表示を主
に行う。機能は以下にあげたものを実装している。表示される画面の上部から説明を示す。実際に作成した画面が図\ref{fig:do}である。
\begin{figure}[H]
\centering
\includegraphics[width=12cm]{image5.png}
\caption{実行ページ}
\label{fig:do}
\end{figure}
\begin{description}
\item[実装部分4]プログラムのコードを表示
自分が打ったプログラムを再度表示することで、どういった問題
に取り組んでいるかの認識や、下記に説明しているエラー文は何
行目が問題なのか、といった点を探しやすくすることができる。
\item[実装部分5]実行結果の表示
ターミナルエミュレータと似た表示を行うために背景は黒に文字が白である。
これはターミナルエミュレータの役目を担う。この表示によりひと目で
プログラムが動いているかどうかを判断できる。
\item[実装部分6]判定結果の表示
作成していたプログラムが実行され、成功していた場合と、失敗
していた場合で表示が異なる。成功した際にはそのままデータベー
スへとユーザ名とプログラム文が格納された旨が表示される。
成功していた場合は図\ref{fig:sucsess}である。
\begin{figure}[H]
\centering
\includegraphics[width=11cm]{image4.png}
\caption{プログラムの実行に成功した場合の表示}
\label{fig:sucsess}
\end{figure}
\item[実装部分7]エラー文の表示
実行に失敗していた場合は図\ref{fig:error}である。
出現する頻度の高いエラー文に対して、出現した際にはどういった
ことが原因で起きているかの説明の文章を表示した。また、エラー文をそ
のまま検索エンジンで検索できるように検索エンジンを直接開く動
作を付与した。例えば、指定した変数を間違えているNameErrorの
エラーが出た場合には、NameError rubyで検索するURLが作成され
る。また、エラー文のみではプログラミング以外の他の情報を含
んだ検索結果が表示される可能性があるため、Rubyのエラー文として検索できるように文字
列``Ruby''を文字列に追加した。
\begin{figure}[H]
\centering
\includegraphics[width=12cm]{image2.png}
\caption{プログラムの実行に失敗した場合の表示}
\label{fig:error}
\end{figure}
\begin{figure}[H]
\centering
\includegraphics[width=14cm]{errorsearch.png}
\caption{エラー文の検索画面}
\label{fig:error}
\end{figure}
\end{description}
\subsection{個人評価確認ページ}
データベースの中身を見るページである。教員側のみが閲覧可能であり、個人
の評価を容易に行うことを可能にするため、ユーザ名でこれまで登録されたプ
ログラムの情報を検索することも出来る。機能は以下にあげたものを実装して
いる。
実際に作成した画面が図\ref{fig:dbpage}である。
\begin{figure}[H]
\centering
\includegraphics[width=14cm]{image6.png}
\caption{個人評価確認ページ}
\label{fig:dbpage}
\end{figure}
\begin{description}
\item[実装部分8]データベース内の情報の表示
エディタ画面で入力されたユーザ名とプログラム文を表示する。
左側に全ての情報を掲示している。同じユーザ名が重複した場合
でも上書き保存はされない。ここに表示されている時点でプログ
ラムの実行に成功しているため、ユーザ名を探せば評価を行うこ
とが可能になる。
\item[実装部分9]データベース内の情報の検索
データベースの情報量が多くなるほど探しにくくなる。そのため、
ユーザ名で検索を行う欄を設けた。実際にユーザ名を入力した際
の検索画面は図\ref{fig:dbsearch}になる。これにより、個人単位の評価も行いやす
くなる。
\begin{figure}[H]
\centering
\includegraphics[width=14cm]{image7.png}
\caption{データベース検索結果}
\label{fig:dbsearch}
\end{figure}
\end{description}
\section{評価}\label{sec:see}
実装し、要件と照らし合わせて評価を行う。
\subsection{実装評価}\label{sec:createreview}
エディタページ、実行ページ、個人評価確認ページにそれぞれ提案した方策を元にシステムを実装した。その結果、第\ref{zenyou}節で述べた要件のう
ち、1から6までを満たすことができた。要件7にある脆弱性は現時点では対策
を施している部分は一部分である。
\subsection{動作評価}\label{sec:do}
講義内では4回、約10分程度の時間を使って本システムを学生40人程度を対
象に運用した。使用した環境は本学の情報教室である。Webブラウザは
バージョンを使用し、実行ページで成功した表示が出た場合は、本学のSNSシステム
にプログラムを投稿するといった形式である。問題文はそれぞれ以下のとおり
である。
\begin{description}
\item[1回目]1から1000の数を表示しなさい。
\item[2回目]1から1000の数のうち、偶数のみ表示しなさい。
\item[3回目]1から1000の数のうち、3の倍数のみ「ばか」と表示しなさい。
\item[4回目]1から1000の数のうち、3の倍数のみ「わん」と表示しなさい。
\end{description}
1回目はエディタに入力したプログラムを判定するのみのシステムを、2回目、3
回目にはプログラムが成功した場合にデータベースに格納するシステムを、4回
目ではエディタページにヒントを表示して運用した。4回目の時点で、成功す
る画面と失敗した画面の表示、データベースへの格納を行うことが確認できた。
一方で、プログラムが実行されていない(失敗している)
にも関わらずエラーが発生しないプログラム文に対しては、学生側へのサポート
を実行ページのみでは行えなかった。加えて、今回の運用では学生側にではユーザ名を学籍番号で固定することを伝えずに使用したため、ユーザ名検索が意味をなさなかった。
システム上の問題としては、40人が一斉に使うことで、サーバー過負荷によりシステム自体がダウンしてしまう可能性を発見した。
\chapter{考察}\label{sec:kosatsu}
本章では、第\ref{sec:create}章と第\ref{sec:see}節の結果を踏まえて考察する。
システム自体は動作を確認できたことで、方策を実現したシステムを実装
することに成功したと言える。また、第\ref{sec:do}節で得られた結果により、
実際の講義でも利用可能なことが分かった。その際に起こった問題について深
く考察していく。
\begin{description}
\item[問題1]エラー文が発生しない場合
プログラムによっては、プログラムが失敗していなくてもエラー文が表示されな
いプログラムが存在する。今回の運用では制御構造のwhileやfor、upto
を用いて問題に答える内容だったが、演算子が間違えている際にはプログラム
の実行結果が表示されず、さらに解決の手法となるエラー
文も表示されていなかった(図\ref{fig:noerror}を参照)。例のプ
ログラム文は、iが10になるまでiに代入された数字を出力する、と
いったプログラムだが、演算子が\verb|while i>= 10|により、iが1だった
場合、10以上になることはないため出力は行われない。この結果は、エラー
文を分かりやすく表示することで苦手意識をなくす、といった目的の大きな妨
げになる。しかし、こういった場合はプログラムが実行に失敗しているのでは
なく、エラーが出ず、結果があっていない、というものであるため、
具体的な解決案を示すのが困難である。実行するプログラムの中で予想外の結
果が起こった場合に対する表示方法を考えていく必要がある。
\begin{figure}[H]
\centering
\includegraphics[width=15cm]{image8.png}
\caption{エラー文がでない場合}
\label{fig:noerror}
\end{figure}
\newpage
\item[問題2]ユーザ名検索を使用できない場合
使用する学生側にユーザ名の形式を伝えない場合、本人の名前以外
にも学籍番号やオリジナルの仮名を使用する可能性がある。基礎プ
ログラミングで運用する際には学籍番号をユーザ名として想定する
が、実際に運用した際に本人のローマ字表記などで登録された場合、
検索が困難になる。運用の際には口頭での説明や画面上に表示、さ
らに受け取る文字列に対して何らかの正規表現での制限を行うべきだと
考えた。
また、ユーザ名の問題としては代筆も浮上した。
本人以外が別の誰かの学籍番号を入力し、プログラムの作成に成功
した場合はデータベース上では本人がやっていなくても成功した、
という結果のみが格納されてしまう。
これを防ぐためには、本学の個人に割り当てられている専用のメー
ルアドレスの使用を考えた。本学のメールアドレスは{\bf 学籍番号@学
年ごとの一文字.koeki-u.ac.jp}の形式である。
教員側にデータベースに格納された旨の通知を送る際、実行した学
生本人のメールアドレスから送ることで、そのメールアドレスの学
籍番号の部分と登録されたデータベース上の学籍番号が異なった場
合には、個人評価確認ページで特別な表示を行う、といった対策を
考えている。
\item[問題3]サーバー過負荷の問題
本学の基礎プログラミングでは、一つの講義につき平均40人が受講し
ている。今回は1つのクラスで10分間程度で運用したが、システム
の動作が極端に重くなる場面があったりと、使用する際に課題とな
る部分が出た。これを105分の講義で使用する際には、さらに動作が
遅くなることが想定される。後に記述する問題にもあるが、DoS攻撃と同一の状
態が発生しているため、対策が難しい。
\end{description}
\chapter{まとめ}\label{sec:matome}
本章では、結論と課題、今後の展望について述べる。
\section{結論}
本稿では、プログラミング教育での問題を明らかに、教員が個人の評価を行いやすく、かつプ
ログラミング初学者が学びやすい環境を作るための、プログラミングにおける評価の補助シ
ステムであるleafRの提案を行った。提案をもとに設計を行って実装し、運用した上で評価を行った。
プログラムを入力するテキストエディタや、プログラムが実行された結果に対し
ての表示を行うことができた。また、実際の講義で運用した際には、実装したシ
ステムが目的に沿って動作や表示することを確認した。しかし、運用していく際
の問題点も明らかになった。システムの例外や問題を明らかにするために、さら
に運用する機会を増やす必要がある。
\section{課題}
結論と第\ref{sec:kosatsu}章を踏まえて、今後の課題を明らかにした。
\subsection{プログラミング教育の補助のためのシステム}
プログラミングを学ぶために、必要だと思われる対象について具体的に探す必要
がある。今回はシステムの機能を中心に実装、確認のための運用を行っているた
め、今後は使用する側である学生や教員の意見を聞きつつ、教育のために伝えや
すい視覚的効果を探す必要がある。このためには、アンケートを行うことが有効
であると考える。
\subsection{脆弱性の問題}
脆弱性による問題がある。運用前にテストを行って問題を見つけ、対策を講じる
必要がある。また、プログラムだけではなく運用する環境に応じて対策の方針を
変える。今回の運用はローカル環境のみの使用を想定しているため、最低限の対
策のみを行っていく。
以下にこれまでに発生した問題の説明を示す。
\begin{itemize}
\item インジェクション攻撃
悪意のあるユーザーが、意味を持つ不正なプログラム文を投入することで、通常
はアクセスできないデータにアクセスしたり更新する攻撃である。
Rubyには、`(バッククォート)、system、ecex、open、といったシェル実行の文字がある。これに
よって、シェルスクリプトを実行し、本来の動きとは異なった表示を見
せることが出来る。これはRuby言語で実行するからこその問題というこ
ともあり、対策が難しい。実際に実行できた文字列を以下に示す。
\begin{screen}
\begin{verbatim}
puts `ls`
ディレクトリに入っているファイル一覧を参照できる。
''; ls # '
上の実行結果と同様。
\end{verbatim}
\end{screen}
\item クロスサイトスクリプティング攻撃
Webページに悪意があるコードを埋め込むことによって、そのページの閲
覧者のブラウザにコードを実行させ、閲覧者に被害を及ぼす。本研
究ではインジェクション攻撃によって、HTMLのタグが実行できた。実際に実行でき
たクロスサイトスクリプティング攻撃の例を以下に示す。
\begin{screen}
\begin{verbatim}
print("<h1>やっほーーーーー</h1>")
やっほーーーーーの文字列がHTMLの<h1>タグとして判別されるため、
大きく表示される。
\end{verbatim}
\end{screen}
\item DoS攻撃
サーバーなどのネットワーク機器に大量のパケットを送るなどしてサービスの提供
を不能にする攻撃である。運用の際に、多くの人数からのアクセスが起
こることによってシステムの動作が遅くなることが発見できたため、こ
の問題が起こる可能性がある。
\end{itemize}
\section{今後の展望}
提案した方策の実装までを具体的に行ったため、追加するシステムは実際
に運用した上で見つけていく必要がある。そのため、実際に授業などで使うこ
とで生徒側の問題点を更に発見する。
また、教員側にも実際に使用してもらい、これまでの採点と比べて本システムを使うことによりどの部分が改善されたか、
またどういったシステムがあることでより採点や個人への評価が簡易になるか
といった点を明らかにした上でシステムの拡張を図る。
本研究の段階では外部からアクセスできないローカル環境以外で使うことを想定していないため、ローカル
環境以外で使う際にどういった問題が発生するか、それについての対策を講じ
ながらより実用性の高いシステムにする。
\renewcommand{\bibname}{参考文献}
\begin{thebibliography}{99}
\bibitem{高等学校学習指導要領}文部科学省. ``「高等学校学習指導要領」(平
成 30 年告示)(2019)``. (参照 2019-12-3).
\bibitem{教育の情報化の推進}文部科学省. ``教育の情報化の推進''.
\url{http://www.mext.go.jp/a_menu/shotou/zyouhou/detail/__icsFiles/afieldfile/2019/10/03/1421730_001.pdf}. (
参照 2019-11-18).
\bibitem{小学校}文部科学省. ``小学校プログラミング必修化に向けて''.
\url{http://www.mext.go.jp/b_menu/shingi/chukyo/chukyo3/004/siryo/__icsFiles/afieldfile/2018/10/05/1409851_6.pdf}. (
参照 2019-11-15).
\bibitem{手引} 文部科学省. ``小学校プログラミング教育の手引の改定(第二
版)''.
\url{http://www.mext.go.jp/component/a_menu/education/micro_detail/__icsFiles/afieldfile/2018/11/06/1403162_02_1.pdf}.
(参照 2019-11-18).
\bibitem{手引2} 文部科学省. ``小学校プログラミング教育の手引の改定(第二
版)について''.
\url{http://www.mext.go.jp/component/a_menu/education/micro_detail/__icsFiles/afieldfile/2018/11/06/1403162_01_1.pdf}. (
参照 2019-11-18).
\bibitem{資料}文部科学省. ``プログラミング教育に関連する研究教材''.
\url{http://www.mext.go.jp/component/a_menu/education/micro_detail/__icsFiles/afieldfile/2019/05/21/1417094_004.pdf}. (
参照 2019-11-18).
\bibitem{ReseMom}ReseMom. ``小学校のプログラミング教育、先生の98％が「授
業の実施に不安」''.
\url{https://resemom.jp/article/2019/04/26/50334.html}. (参照 2019-11-18).
\bibitem{paiza}paizaラーニング. ``環境構築不要！初心者でも楽しく学習できる
プログラミング入門サービス【paizaラーニング】
''. \url{https://paiza.jp/works}. (参照 2019-12-4).
\bibitem{progate}Progate. ``Progate｜プログラミングの入門なら基礎
から学べるProgate[プロゲー
ト]''. \url{https://prog-8.com/}. (参照 2019-12-4).
\bibitem{WaPEN}中西渉. ``Webブラウザ上のプログラミング学習環境WaPENの改
良''. 情報教育シンポジウム論文集 .2019,130-135,(参照 2019-11-12).
\bibitem{WaPENpro}WaPEN. ``自作プログラ
ム''. \url{https://watayan.net/prog/}. (参照 2019-12-4).
\bibitem{track}新田章太,小西俊司,竹内郁雄. ``複数言語に対応しやすいオンラインプログラミン
グ学習・試験システム track''. 情報教育シンポジウム論文
集.2019,114-121,(参照 2019-11-12).
\bibitem{tracks.run}track. ``エンジニアの採用と育成を支援するプ
ログラミング「学習・試験」プラットフォー
ム''. \url{https://tracks.run/}. (参照 2019-12-4).
\bibitem{ruby}Ruby. ``オブジェクト指向スクリプト言語
Ruby''. \url{https://www.ruby-lang.org/ja/}. (参照 2019-12-3).
\bibitem{cgi}Perl UNIX/Linux windows. ``CGIの基礎知識
``. \url{http://www.tryhp.net/first.htm}. (参照 2019-12-3).
\bibitem{sqlite3},SQLite. ``SQLite Home
Page''. \url{https://www.sqlite.org/index.html}. (参照 2019-12-5).
\end{thebibliography}
\appendix
\chapter{アンケート}\label{chap:enquete}
\begin{verbatim}
質問1.プログラミングについてどう感じますか。
質問2.大学入学前にプログラミングを体験した経験がありますか？
(Progateなど学習サイトを含む)
□ ある
使用した学習サイトなどあれば記入をお願いします。
( )
□ ない
質問3.基礎プログラミングの難易度はどのぐらいですか。
簡単 少し簡単 普通 難しい とても難しい
□ 1 □ 2 □ 3 □ 4 □ 5
質問4.プログラミングで特に難しいと感じた部分はどこでしたか。
□ 動かない・エラー文が読めない
□ メソッドが覚えられない
□ そもそも組み方がわからない
□ その他( )
質問5.プログラミングを楽しいと思う・理解したきっかけは何でしたか。
□ 動いたとき
□ 難易度が高いプログラムを作れたとき
□ 緻密な作業(デバッグなど)
□ その他( )
\end{verbatim}
\end{document}
mamadoka