%#DVIPDF dvipdfmx -f texfont.map
\documentclass[11pt]{jsarticle}
\usepackage[top=8.5truemm,bottom=7truemm,left=20truemm,right=20truemm]{geometry}
\pagestyle{empty}
\usepackage[dvipdfmx]{graphicx}
\usepackage{float}
\usepackage{listings}
\usepackage{url}
\usepackage{ascmac} % required for `\itembox' (yatex added)
\begin{document}
\twocolumn[
\title{プログラミング教育の補助システムの提案}
\author{広瀬研究室 3年 C1172081 山口円馨}
\date{2020年1月22日}
\maketitle
\begin{center}
概要
\end{center}
2020年度から小学校をはじめとしたプログラミング教育が始まる。しかし、初めて
の取り組みへの教員の不安や、必修としてプログラミング学習を行っている本学
の生徒を対象としたアンケートからプログラミング教育への不安が伺えた。このため、
教員が個人の評価を行いやすく、かつプログラミング初学者が学びやすい環境を作るための、
プログラミングにおける評価の補助システムを作成した。
]
\section{背景}
新学習指導要領~\cite{高等学校学習指導要領,小学校}が公示され、令和2年度から小中高生を対象としてプログラミン
グ的思考の育成やプログラミング学習が必修となる。なお、中学校から実際の
プログラミングが始まるが、これに対して、教職員の実態と意識調査の結果では、98％が「授業の実施に不安」を感じているといった結果が出た~\cite{ReseMom}。また、独自にアンケートを実施した結果、
プログラミングに対しては「難しい」「将来役に立つのかわからない」「動く
と楽しい」といっ
た意見が見られた。この結果を受けて、プログラミング教育への補助システム
の重要性があると考え、検討した。
\subsection{基礎プログラミング}
東北公益文科大学(以下本学)ではプログラミングを学ぶ基礎プログラミン
グ I ・ II が開講されている。一つのクラスにつき約 40 人の学生が受講している。当講義には、学生側と教員側にサイクルが発生している。学生側
は、初見のプログラム文とその説明をWeb ブラウザの画面を目視し、エディタ
へと書き込み、ターミナルエミュレータで実行する。
教員側はメールを確認し、記載されたプログラム文を目視した上で実行し、プログラムが成功して
いるかを判断する必要がある。一連の流れとしての工数は多くな
いが、作業量が人数に比例してに増加する。
\section{目的}
本学で行われているプログラミング教育の現状の課題を解決するために、CGIを用いてプログラミングの実行、評価を行
うシステムの作成を提案、目的とする。これを用いることで、学生側と教員側の課題を
緩和し、よりプログラミング教育の難易度を下げることを目的とする。CGIを
利用したシステムは授業で実際に全生徒が学ぶため、改良の余地が十分に広が
る。
\section{アンケートの実施}
初学者である彼らが授業を受ける際に、難しいと感じている現状や問題点を
アンケートを用いて集計した。アンケートの設問を示す。
\begin{itemize}
\item プログラミングについてどう感じますか。
\item 大学入学前にプログラミングを体験した経験がありますか。
\item 基礎プログラミング授業の難易度はどのぐらいですか。
\item プログラミングで特に難しいと感じた部分はどこでしたか。
\item プログラミングを楽しいと思う・理解したきっかけは何でし
たか。
\end{itemize}
結果は以下のとおりである(2019-11-19時点)。\\
\noindent
\begin{figure}[H]
\centering
\includegraphics[width=8cm]{graf2.eps}
\caption{基礎プログラミングの難易度}
\end{figure}
\noindent
\begin{figure}[H]
\centering
\includegraphics[width=8cm]{graf3.eps}
\caption{プログラミングで特に難しいと感じた部分}
\end{figure}
\begin{figure}[H]
\centering
\includegraphics[width=8.2cm]{graf1.eps}
\caption{プログラミング経験の有無}
\label{fig:keiken}
\end{figure}
アンケートにより、プログラミングを難しいと考えている、また特に難しいと感
じた部分では選択肢を3つに絞った内、ほぼ均等に苦手意識が現れていることが
分かった。
\section{システムの設計}
以上の目的やアンケート結果から、システムの提案を以下に示す。
\subsection{システムの提案}
一連の流れを以下の図に示す。
\begin{figure}[H]
\centering
\includegraphics[width=7cm]{design1.pdf}
\caption{システムの流れ}
\label{fig:system}
\end{figure}
\subsection{実装する機能}
\begin{itemize}
\item 実行・判定
プログラム文を実行、判定するCGIプログラム。プログラムは
変数を用いて自由に設定できるようにしているので、教員が自由に入力できる仕組みになる。\\
\item メソッド・想定の説明
問題を解く前にどういった場面で使うかの想定の説明をエディタ画面に表示す
る。これにより、どんな場面で使うかわからない、といった疑問に対して答え
ることを想定している。この部分は教員が入力できる仕組みになる。\\
\item エラー文
出力されたエラー文の説明を簡易的に伝える。アンケート結果にもある通り、
エラー文が読み解けずに挫折する学生が多いため、出力頻度の高いエラー文に
は対策を講じた文章を表示する。また、エラー文にはエラー文の検索結
果を表示するURLリンクを張ることによ
り、検索も容易にする。\\
\item データベースへの格納
教員の採点のため、実行し成功したプログラム文はデータベースに格納する。
\end{itemize}
\section{実装}
実装画面と説明が以下である。
\subsection{エディタページ}
学生側がはじめに見る入力画面である。whileなどの制御構造を用いた際に終了条件が正しくないために実行不可能になるもの、または終了条件のないプログラム文を書き込んだ場合はエラー処理する。詳しい説明を以下に示す。実
際に作成した画面が図\ref{fig:edit}である。
\begin{figure}[H]
\centering
\includegraphics[width=6cm]{image1.png}
\caption{エディタページ}
\label{fig:edit}
\end{figure}
\begin{itemize}
\item{ユーザ名入力欄}
プログラムを入力する前にユーザ名を入力する。これによってプログラムの情報を格納した際
に教員側は個人が作ったプログラムを検索することが容易になり、
評価の補助に繋がる。\\
\item{入力エディタ}
プログラム文を入力するテキストエリアを作成した。
プログラム文を入力して送信ボタンを押すと、実行ページで評価を行う。\\
\item{問題文・出力結果例・メソッドや想定の説明の表示}
問題文には講義で取り組む簡易プログラムの問題文や課題文を挿入
する。出力結果例は、教員が用意したプログラムを実際に動かした
場合の結果を表示している。メソッドや想定の説明では、
今から作るプログラムをどういった場所に使うか、また、どのよう
なプログラム文で作ると良いか、などヒントにもなり得る文章を挿
入する。
\end{itemize}
\subsection{プログラム実行ページ}
エディタ画面で入力されたプログラム文を実行、表示する画面である。判定の成功に
よって表示する内容が変化する。実際に作成した画面が図\ref{fig:sucsess}である。
\begin{figure}[H]
\centering
\includegraphics[width=7cm]{image4.png}
\caption{プログラム実行ページ}
\label{fig:sucsess}
\end{figure}
\begin{itemize}
\item{プログラムのコードを表示}
自分が打ったプログラムを再度表示することで、どういった問題
に取り組んでいるかの認識や、下記に説明しているエラー文は何
行目が問題なのか、といった点を探しやすくすることができる。\\
\item{実行結果の表示}
ターミナルと似た表示を行うために背景は黒に文字が白である。
この表示によりひと目でプログラムが動いているかどうかを判断できる。\\
\item{エラー文}
出現する頻度の高いエラー文に対して、説明の文章を表示した。また、エラー文をそ
のまま検索エンジンで検索できるように検索エンジンを直接開く動
作を付与した。エラー文のみではプログラミング以外の他の情報を含
んだ検索結果が表示される可能性があるため、Rubyのエラー文と
して検索できるように文字列``Ruby''を文字列に追加した。エラーが出
た場合とエラー文の検索結果は図\ref{fig:error}と図
\ref{fig:errorbun}
である。
\begin{figure}[H]
\centering
\includegraphics[width=6cm]{image2.png}
\caption{プログラムの実行に失敗した場合の表示}
\label{fig:error}
\end{figure}
\begin{figure}[H]
\centering
\includegraphics[width=6cm]{errorsearch.png}
\caption{エラー文の検索画面}
\label{fig:errorbun}
\end{figure}
\end{itemize}
\subsection{個人評価確認ページ}
プログラム文を提出した学生の、ユーザ名とプログラム文を確認できる画面で
ある。実際に作成した画面が図\ref{fig:dbpage}である。
\begin{itemize}
\item{データベースに格納された情報の表示}
実行ページにある機能であるデータベースの格納によって保存され
た情報を確認できる。\\
\item{データベースの情報の検索}
実行に成功したユーザ名とプログラム文を格納する。検索欄を設けることで一個
人がどういったプログラム文を入力したのかひと目で分かるページ
の表示を行う。
\end{itemize}
\begin{figure}[H]
\centering
\includegraphics[width=7cm]{image6.png}
\caption{個人評価確認ページ}
\label{fig:dbpage}
\end{figure}
\section{脆弱性への配慮}
本システムでは、悪意のある文字列を入力することで本来の目的とは異なる表
示結果が出力される可能性がある。これを防ぐために、運用前にテストを行って問題を見つけ、プログラムだけではなく運用する環境に応じて対策の方針を変える。今回の運用はローカル環境のみの使用を想定しているため、最低限の対策のみを行っていく。
\section{今後の展望}
脆弱性を補う対策を、運用と技術の面から考えていく。システムの実装では、
教員が問題を挿入するためのページを作成し、実際に授業で運用することで更
に問題点を発見する。
\begin{thebibliography}{99}
\bibitem{高等学校学習指導要領}文部科学省. ``「高等学校学習指導要領」(平
成 30 年告示)(2019)``. (参照 2019-12-3).
\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{ReseMom}ReseMom. ``小学校のプログラミング教育、先生の98％が「授
業の実施に不安」''.
\url{https://resemom.jp/article/2019/04/26/50334.html}. (参照
2019-11-18).
\bibitem{WaPEN}中西渉. ``Webブラウザ上のプログラミング学習環境WaPENの改
良''. 情報教育シンポジウム論文集 .2019,130-135,(参照 2019-11-12).
\end{thebibliography}
\end{document}
mamadoka