%#!platex -kanji=%k
%#DVIPDF dvipdfmx -f ipa.map
\AtBeginDvi{\special{pdf:mapfile ptex-ipa.map}}
\documentclass{jsbook}
%\pagestyle{empty}
\usepackage[dvipdfmx]{graphicx}
%\usepackage{listings, jlisting}
%\usepackage[sectionbib]{chapterbib}
\usepackage{ascmac}
\usepackage{geometry}
\usepackage{fancybx}
\usepackage{boites}
\usepackage{moreverb}
\usepackage{url}		% 文中にURLを書くときは \url{} で括る
\geometry{textwidth=160mm, textheight=225mm}
\renewcommand{\bibname}{参考文献}

\title{Unityによる学習アプリの提案}
\author{広瀬研究室4年 \\C1211088 佐藤逸樹}
\date {令和6年1月11日}

\begin{document}
\maketitle
\begin{center}
 {\bfseries 概要}
\end{center}
日本では2020年からは小学校，2021年からは中学校，2022年からは高校でのプログラミング教育の必修化が始まっている。小学校，中学校の場合，実際に行われるプログラミング教育とは文字を入力していくようなプログラミング言語を学ぶものではなく，ビジュアル型プログラミング言語などを用いてプログラミング的思考を育むものである。実際にテキスト型プログラミング言語を学ぶのは高校に進学してからである。しかし，後に学ぶ言語に触れておくことは予習となり，高校に進学してかの授業理解に役立つのではないだろうかと考えた。そこで，小学生，中学生が高校に進学したときに予習となるような学習アプリケーションの作成を提案する。本研究で作成するアプリケーションは，Unityを用いて作成し，パズル形式で学習できるようにすることで，小学校，中学校で扱うビジュアル型プログラミング言語を学ぶ際の形に近い状態で，テキスト型プログラム言語を学べるようにする。(412文字)
\tableofcontents
\chapter{はじめに}
\section{背景}
2017年及び2018年に行われた文部科学省による学習指導要領改訂\cite{tebiki}によって，コンピュータを理解し上手に活用していくことは，これからの社会を生きていく子どもたちにとって，将来どのような職業に就くとしても，極めて重要なこととなっているという考えから，2020年には小学校，2021年には中学校，2022年には高校でのプログラミング教育の必修化が行われている\cite{suke}。平成28年に行われた文部科学省の有識者会議によると，小学校，中学校のプログラミング教育は実際に文字を書くようなテキスト型プログラミング言語を学ぶのではなく，自分の意図した一連の活動を実現させるためにどのような動きや記号が必要で，それらをどのように組み合わせたり改善していけばよいかを論理的に考えていく力であるプログラミング的思考を育むことが目的であると定義した\cite{kaigi}。テキスト型言語は高校に進学してから学習する\cite{koukou}。文部科学省はプログラミング的思考を育む方法のうちコンピュータを用いる方法でブロックを積み上げるようにしてプログラミングを行うビジュアル型プログラミング言語を用いて自分が考えている動きを実現させる方法を想定している。実際に岐阜県の小学校では第3学年からビジュアル型教材を扱っているという実施例がある\cite{gihu}。ビジュアル型言語は初学者にとって使いやすいプログラミング言語と考えられており，入門段階で成功を収めている。
%この間に文章を入れる（予習の重要性、しかし〜と始めるようなテキスト型を急に学習する難しさなど）
\\　しかし，ビジュアル型言語が入門段階で成功を収めていると言っても，ほとんどの作業を日本語で行うビジュアル型言語とほとんどの作業を英単語と記号で行うテキスト型言語では，システムを構築する中で作業にギャップが出てきてしまうため，高校に進学後いきなりテキスト型言語を学ぶことは，学習内容を理解することが難しい人も出てくるのではないかと考える。%例えば公益大の...。:公益大の基礎プロで履修者に対して落とす人はどれくらいいるかなどを書いてテキスト型プログラミングを初めて学ぶ難しさの根拠を書く。
ギャップの有無やプログラミングの学習に限らず学校で学ぶことは一度で覚えられるものばかりではなく理解するまでにも個人差があるため，学校での学びで授業に遅れず理解を深めるためには予習を行うことが重要であると考える。%予習が重要であるという例。予習：反転授業

予習を行い授業での理解を深めるための方法として，近年は日本でも反転授業を行う学校や大学が増えてきている。反転学習とは,従来の学習スタイルである学校の対面授業により基礎的な知識を習得し,その後自宅で復習となる宿題などの自主学習を行うという方法ではなく，自宅で講義ビデオ等を用いて基礎的な知識を予習し，その後学校の対面授業でその知識に対する復習や応用を学び知識の理解を深めるといった方法である。東北公益文科大学の授業の一つである基礎プログラミングI・IIにおいても反転授業は実施されている。こうした反転授業導入の動きの背景には，反転学習の教育効果に以下のような利点があるためである。
\begin{itemize}
 \item インプット型からアウトプット型からへの学びの転換の促進。
 
　反転授業により生徒に学びのアウトプットの場をより多く与え，教師と生徒の関わりを増し，学習時間を増加させることで授業の進度を早めることにつながる。
 \item 相乗的な学習の動機付けの誘発

　能力の高い学生は授業中他の人に教える側に回りクラス全体の学力向上に貢献したり，能力の低い学生は教室で恥ずかしい思いをしたり，自分も頑張ろうという気持ちが芽生えたりする。
　\item 学生・生徒の学修行動の見えるかの推進

　宿題をeラーニングシステムで管理すれば,「何時から何分間,宿題動画を視聴したか」という学修履歴を把握できる。よって，従来に比べ学生の学修行動の質・量を判断する情報が増える。
　\item クラス内での協働意識やクラスへの帰属意識の向上と教師への親近感の向上。

　演習形式の授業やeラーニングシステムの管理を継続すれば，教員は学生一人ひとりの顔と名前が分かるようになり，学生同士の関係も深まる。
 　\item 時間外学習時間の増加
 
　学生たちは授業前に動画を視聴するという宿題をやってくるため，時間外学習時間は増加する。
 　\item 全体的な学力の確実な向上と学生間の学力差の解消。
 
　私立大学情報教育協会におけるICT利用における教育改善研究発表会において発表された研究成果では，千歳科学技術大学の場合，反転授業の導入により，成績の標準偏差の大幅な改善が見られたそうである。
　\item 時間の有効活用

　キャロルの時間モデルでは個々の学生の学習能力には個別差があり，一定の学習内容を理解するために必要な時間は学習者によって異なると言われている。授業の時間では理解が追いつかない学生も，反転授業の導入により自分に合った時間をかけて学べば，理解も進み，対面授業での課題に取り組むための予備知識を持った状態で参加することができる。また,授業で教員が説明に要していた時間を学生が考える時間に当てることができる。
 
 \end{itemize}

このように予習やその後の学習において様々なメリットがある反転授業であるが，多くの場合自宅での予習の段階で用いられる教材は動画教材である。高校でビジュアル型言語からテキストが多言語に移行する際に動画教材で作業方法の違いのギャップを克服していくのは難しいため，自宅での予習の際には，実際にギャップを克服していけるような作業を行いながら予習ができる方法を取ることができるとよいのではないかと考えた。そこで，このビジュアル型言語の作業方法を利用して後に学習するテキスト型言語を学ぶことは，今後プログラミング言語を学習する際のギャップを克服できる予習となり，授業理解が捗るのではないかと考えた。
\section{目的}
本研究ではビジュアル型言語に近い作業方法でテキスト型言語を学習できるアプリケーションを開発し，プログラミング学習を受けている小学生・中学生が，高校に進学した後にプログラミング言語を学習する際のギャップを克服しながら行う予習としてもらうことを目的とする。


\chapter{先行事例}
\section{先行サービスの例}
ビジュアル型プログラミング言語はすでにいくつも世の中に出回っている。ここでは先行サービスを3つ紹介していく。
\subsection{Scratch}
Scratch\footnote{\url{https://scratch.mit.edu/}}は世界最大の子供向けコーディングコミュニティーでシンプルなビジュアルインターフェースを持ったコーディング言語であり，特に8歳から16歳向けにデザインされているがすべての年代の人々使われている。自宅，学校，博物館，図書館など幅広い場面で利用されている。(図\ref{figure:scratch})
\begin{figure}[htb]
 \centering
 \includegraphics[width=10cm]{scratch.png}
 \caption{Scratchの操作画面}
 \label{figure:scratch}
\end{figure}

%スクラッチの画面を入れる
\subsection{Viscuit}
Viscuit\footnote{\url{https://www.viscuit.com/}}はメガネという単純な仕組みたった一つだけで簡単なプログラムから組み合わせ次第で複雑なプログラムまで作ることができるプログラミング言語である。Viscuitではアニメーション・ゲーム・絵本などを簡単に作ることができる。(図\ref{figure:Viscuit})
%ビスケットの画面を入れる
\begin{figure}[htb]
 \centering
 \includegraphics[width=10cm]{viscuit.png}
 \caption{Viscuitの操作画面}
 \label{figure:Viscuit}
\end{figure}

\subsection{TILES}
TILES\footnote{\url{https://vpltiles.com/}}はシンプルなプログラミング言語であり使用する命令は6つのみであるため多くの命令を覚える必要がない。またプログラミングの基本を学ぶための学習テキストがついているため，学習を勧めていくのが容易である。この学習テキストの応用編では人工知能の基礎を学ぶこともできる。(図\ref{figure:tiles})
%タイル図の画面を入れる
\begin{figure}[htb]
 \centering
 \includegraphics[width=10cm]{TILES.png}
 \caption{TILESの操作画面}
 \label{figure:tiles}
\end{figure}

\section{先行研究の例}
ここではビジュアル型プログラミング言語とテキスト型プログラミング言語の両方を使用した先行研究を紹介していく。
\subsection{BlockEditorを用いて課題での利用率を調べた研究}
松澤ら\cite{bizyuron}は，ビジュアル型プログラミング言語は入門段階で成功を収めているが，将来テキスト型プログラミング言語を必要とする学習者がテキスト型言語への発展が見えにくいシステムを利用することは，入門学習への動機付けをそぐ理由となり，ビジュアル型言語で学習した内容がその後の発展につながらないとしたら本末転倒であるとして，ビジュアル型言語とテキスト型言語を相互変換できるBlockEditorというシステムを用いて，ビジュアル型言語でプログラミングの基礎知識を学習し理解したあとテキスト型言語による実装へとシームレスな移行を目的とした研究を行った。結果として，最終的に全体の80％の人のBlockEditor使用率が低下している。またBlockEditorを使うことによるJava習得への影響についての質問でBlockEditorを使うことでJava構文の理解が深まると思うというものの支持率が半数程度得られた。このことからBlockEditorがJava言語習得の足場かけとして機能しているという結論がなされている。
\subsection{ビジュアル型言語とテキスト型言語の学習順序による教育的効果を調べた研究}
岡本ら\cite{okamoto}は，ビジュアル型プログラミング言語としてBlocky Gamesを，テキスト型プログラミング言語としてPythonを利用し，その学習順序がプログラミングへの知識・技能・情意面の変化として教育効果にどのような影響を与えるのか考察することを目的としている。結果として，どちらのグループも事前・事後アンケートの結果から情意面の意識に有意な変化はなかったが，事前・事後テストでは先にビジュアル型プログラミング言語を学習したグループの方がもう一方に比べ「全くわからない」という回答が少なくなっていたことから，先にビジュアル型プログラミング言語を学習することの優位性が示された。

\subsection{先行事例の課題点}
スクラッチやタイルズはもともとが子供向けに作られているためプログラミングを全く行ったことがない人であってもプログラムを組むことができるが，ビジュアル型言語であるためテキスト型言語を習得することができない。
ビスケットはプログラムを書く際にメガネという独自のルールに則って作業をするため，テキスト型言語を使用する際の形と大きく異なることになる。
松澤，酒井らは彼らの研究の限界として，BlockEditorの利用率の分析にとどまっており，BlockEditorが理解度の向上に寄与した直接的なデータが得られなかったことを上げている。
岡本恭，安藤らの研究の今後の課題として，彼らが実験で行った画像処理に対する学習以外の学習内容に変えても効果が得られるかどうかというものを挙げている。

\subsection{先行研究からの考察}
先行研究では，先にもしくはテキスト型言語と併用してビジュアル型言語を学習することによる優位性やテキスト型言語習得への足がけとなることが示された。しかし，理解度の向上や他の学習内容に対して効果があるのかは直接的に示されていない。本研究では，ビジュアル型言語を用いて直接テキスト型言語を学ぶため理解度の向上及び他の学習内容に対して効果があるのかどうかを示すことができると考えられる。これはこれからプログラミング教材を作成する人にとって意義のあることである。本研究で開発するシステムは先行研究に残された課題を解決できるよう提案を行った。

\chapter{Unityを用いた学習アプリケーションの提案}
ここでは、先述した先行事例の課題点を解決できるシステムを提案する。
\section{システムの提案}
本研究では，問題とバラバラに配置された解答に使用するビジュアル型言語のようなブロックを同時に表示させ，そのブロックをパズルゲームのように位置を入れ替えることで問題に回答し，テキスト型言語を学習できるシステムを作成する。問題は正解するまで継続され，不正解だった場合はその時点から再開される。問題をとき終わったあとは経過時間などの結果を表示する。また問題の前にはその問題で扱われる制御構造やメソッドに対する説明を見ることができるようにする(図\ref{figure:image})。
\\　このような構造にすることで利用者が自主学習をする際にこのシステムのみを利用して学習できるようになると考える。また,このシステムを利用することでプログラミングを初めて学習する人やビジュアル型言語しか学習したことがない人であっても，簡単にテキスト型言語を学習することができると考える。
\begin{figure}[htb]
 \centering
 \includegraphics[width=5cm]{sistem-1.pdf}
 \caption{システム利用の流れ}
 \label{figure:image}
\end{figure}

\section{問題の解答方法}
問題の解答方法として，まず語群欄に使用する単語を配置し，そこから解答欄へのドラッグアンドドロップ操作により単語を並べることで解答を行うことを考えた(図\ref{figure:quiz})。%ここにこの解答方法の図を入れる
しかし，この方法による解答で語群欄から解答欄へすべての単語を移動し終えてから不正解だった場合，その後の操作では語群欄を使用しないため単語を語群にいれて出す必要性はないと判断した。%そもそもドラッグアンドドロップの実装が難しかった。
また，語群欄があることでその分画面の幅を取ることになり解答欄の幅が小さくなることや1画面の情報量が多くなると考えられたため，語群欄は不採用とした。次の方法として，単語を解答欄に始めから適当に配置しておき，入れ替えたい単語2つをクリック選択することで位置を入れ替えながら問題に解答していくという方法を考えた(図\ref{figure:quiz2})。%ここにこの方法の図を入れる
こうすることで，語群欄は必要なくなり，画面の情報量は抑えられ，解答欄に使用できる画面の幅も大きくなる。また，ドラッグアンドドロップ操作の実装よりもクリック操作のみの実装のほうが開発時に関しても,実際の操作の際も簡単になることからこの方法で開発を進めていくことに決めた。
\begin{figure}[htb]
 \centering
 \includegraphics[width=7cm]{aprigaiyou(1).pdf}
 \caption{クイズの解答方法1}
 \label{figure:quiz}
\end{figure}

\begin{figure}[htb]
 \centering
 \includegraphics[width=7cm]{kaitou.pdf}
 \caption{クイズの解答方法2}
 \label{figure:quiz2}
\end{figure}

\chapter{システムの設計}
\section{システムの前提}
\begin{description}
 \item[前提1]システムの利用者はビジュアル型言語を学習したことがあり，これからテキスト型言語を学習しようとしている者やプログラミング能力の低い者とする。
 \item[前提2]システムはWeb上に投稿し，アクセスした人は誰でも利用できるようにする。
 \item[前提3]アクセス及びシステムを用いた学習のタイミングはテキスト型言語を学び始める前から学び終わるまでの間で任意とする。
 \item[前提4]システムの利用は，テキスト型言語学習のための予習やプログラミング能力向上のために行う。
\end{description}

\section{システムの全体の流れ}
\begin{enumerate}
\item 利用者はシステムが投稿されたWebサイトにアクセスする。
\item はじめに問題の解答に使う制御構造やメソッドの説明文を読む。
\item 問題文を表示を表示し，バラバラに配置した解答に使うブロックと解答スペースを表示する。
\item ブロックの配置が終わったら解答完了ボタンを押すことで正解・不正解を判定し，表示する。
\item 不正解ならば，そのときの配置から再び解答を開始し，正解まで行う。

システムの概念図は図\ref{figure:unitysistem}，システムの流れは図\ref{figure:gainen}の通りである。

\end{enumerate}

\begin{figure}[htb]
 \centering
 \includegraphics[width=10cm]{unitysistem.pdf}
 \caption{システムの概念図}
 \label{figure:unitysistem}
\end{figure}

\begin{figure}[htb]
 \centering
 \includegraphics[width=10cm]{sistem.pdf}
 \caption{システムの流れ}
 \label{figure:gainen}
\end{figure}


\section{システムの概要}
本システムの機能は，プログラミング言語であるRuby言語についての学習をする問題を用意し，その問題に利用者が本システム上でパズル形式で回答するという機能である。

\section{学習内容について}
プログラミング言語学習で主に学習する単元の一覧は図\ref{tab:unit}のとおりである。
本研究で作成したシステムを利用者がWeb上で利用する際に学習するプログラミング言語は東北公益文科大学の基礎プログラミングの授業でも扱われているRubyとし，内容は上記の単元の中でもプログラミングをする際によく使われる制御構造，メソッドの一部の範囲とする。

\begin{table}[hbtp]
  \caption{プログラミング学習における単元の一覧}
  \label{tab:unit}
  \centering
  \begin{tabular}{|c|p{7cm}|}
    \hline
    単元  & 主な学習内容  \\
    \hline \hline
    変数  & 値と変数の種類，演算子，代入演算子，論理演算子　など   \\
    \hline
    制御構造  & if，while　など    \\
    \hline
    メソッド  & print，printf，gets，chomp，to\_i　など    \\
    \hline
    配列  &  配列について，配列の作り方，配列の値を取り出す方法　など   \\
    \hline
    正規表現  & 正規表現とは，正規表現の使い方　など  \\
    \hline
    ハッシュ  &  ハッシュとは，ハッシュの利用方法　など   \\
    \hline
  \end{tabular}
\end{table}

\section{システムの提供方法}
UnityではシステムをunityroomというWebサイトに投稿することができるためWeb上に上げたシステムを使用者に使ってもらうという形で提供する。

%\begin{figure}[htb]
% \centering
% \includegraphics[width=7cm]{unit.pdf}
% \caption{プログラミング学習における単元の一覧}
% \label{figure:unit}
%\end{figure}
%表だからキャプションを表の上にする


\chapter{システムの開発}
\section{開発環境}
ここでは本システム作成にあたって使用するものを紹介する。
\begin{itemize}
 \item Unity　version 2021.3.25f1
 
　Unityとは主に2D，3Dゲームの開発に用いられるゲーム開発エンジンで簡単なゲームから複雑なゲームまで様々なゲーム開発に用いられている。

　他の選択肢としてJavaScriptを用いてWebサイト上に直接システムを表示する方法や，他の無料ゲーム開発エンジンを利用して制作していくという方法もあったが，2D，3Dのどちらでシステムを作っていくかを決めたときにUnityであればどちらも対応できること，開発したシステムを様々なプラットフォームに対応させたいときに他のゲーム開発エンジンを使用するよりも簡単であると考えたため使用することに決めた。
 \item C＃

 C＃とはマイクロソフトが開発したプログラミング言語でオブジェクト指向型の言語であり，GUIアプリ開発や，Webアプリ開発，ゲーム開発などに使われる。今回はUnityにプログラムを入力する際に使用する。
\end{itemize}
 
\section{Unityの用語説明}
ここでは後に登場するUnityの用語について説明していく
\begin{itemize}
 \item ヒエラルキー

　ヒエラルキーとは画面上のすべてのオジェクトがリストアップされ，表示された場所である。ヒエラルキーでは画面上のオブジェクトの親子関係や表示する順番，オブジェクトがアクティブかどうかなどを操作，確認できる。
 \item コンポーネント

　コンポーネントとはオブジェクトやゲームでの処理を行う部分である。コンポーネントはオブジェクトにあとから追加することができ，そうすることでそのオブジェクトが行う処理を増やすことができる。オブジェクトで実行したいスクリプトはコンポーネントとしてオブジェクトに追加する。

\end{itemize}
\section{システム全体の開発}
本システムはUnityを使用して画面および機能の説明を行っていく。

\subsection{システムの全体の概要}
本システムはunityroomというWebページ上で動かす。Webページ上にはまずタイトル画面(図\ref{figure:title})を用意し，その画面から各機能の画面へ移動できるようにする。また，すべての画面および機能はUnityを用いて作成する。問題の解答時には正解と不正解が分かるようにし，不正解の際には解答を再開してもらい，正解した際には正解までにかかった時間を計測・表示することで，自身がどれだけ早く解答できるるようになったかを確認してもらう。
\begin{figure}[htb]
 \centering
 \includegraphics[width=11cm]{Bprog-title.png}
 \caption{タイトルの図}
 \label{figure:title}
\end{figure}

\section{プログラミング言語説明機能}
本節では，プログラミング言語説明機能の画面とそこの含まれる機能を説明する。
\subsection{プログラミング言語説明機能の概要}
プログラミング言語説明機能は，問題で使われるテキスト型言語の学習内容について利用者に意味や使い方を説明するための機能である。タイトル画面のsetumeiと書かれた白い四角をクリックすることでプログラミング言語説明機能の画面に移動することができる。実際のプログラミング言語説明機能の画面を(図\ref{figure:setumei})に示す。この図に示された黒い四角の中に問題で学習する内容についての説明が表示される。図の下に示されているNEXTと書かれた白い四角をクリックすると次の内容の説明を画面に表示し，BACKと書かれた白い四角をクリックすると一つ前の説明が表示される。左上にあるXと書かれた白い四角をクリックすることでタイトル画面へ戻ることができる。%説明機能の画像と説明機能で用いたスクリプトを貼る。あとスクリプトの説明
\begin{figure}[htb]
 \centering
 \includegraphics[width=11cm]{Bprog-setumei.png}
 \caption{プログラミング言語説明画面の図}
 \label{figure:setumei}
\end{figure}

\subsection{プログラミング言語説明機能の中身}
%説明機能の画像と説明機能で用いたスクリプトを貼る。あとスクリプトの説明
ここではプログラミング言語説明機能の際にどのようにして画面の説明部分の切り替えを行っているのかを説明していく。

プログラミング言語説明機能では説明したいプログラミング言語についての説明が書かれた画像を必要な分用意，表示させ，BACKおよびNEXTボタンで画像が切り替わるようにそれぞれのボタンにスクリプトを当てることで制御している。今回ボタンに実装しているスクリプトは以下のようにしている。

\listinginput[1]{1}{PhotoChange.cs}

%このスクリプトを作成する前に，まずUnityでAssetsにResourcesという名前でフォルダを作成し，その直下にImageという用意した画像ファイルを入れるフォルダを用意しておく。画像の名前は今回の場合photo+数字にする。この数字は表示させたい画像の順番にしておく。このスクリプトの内容としては''private Image img''という行で変数に画像のを代入できるようにするためにimage型のimgという変数の宣言を行い，''private　int　count = 1''という行で用意した画像をどこまで表示させたかを数えるためにcountという変数を宣言しておく。''void Start()''関数ではプログラミング言語説明機能の画面が始まったとき，Unityのヒエラルキー上からImagesという名前のオブジェクトを探し出し、その中のImageコンポーネントをimg変数に取得するということを行ってる。このときUnity上ではヒエラルキーのImages内のImageコンポーネントに1番目に表示したい画像を配置しておく。''public void Next()''関数では実行されるたびにcount変数を増加させていき，用意した説明画像の枚数分以上に数値が大きくなったら（今回用意した枚数は6枚なので7以上になったら）1に戻すという作業を行いながら，''img.sprite = Resources.Load<Sprite>("Image/photo" + count.ToString())''という部分でimgに取得させたImageコンポーネントにResourcesフォルダの中のImageフォルダからスプライト型として”photo”+その時のcountの数値の名前の画像を呼び出して表示している。''public void Back()''関数では呼び出されるごとにcount変数を減らしていき，数値が0になったら用意した説明画像の最後の枚数の数値に戻すということを行いながら，''public void Next()''関数と同じ方法で画像を表示している。この2つ関数の呼び出し方は、Unityの機能を利用している。UnityのUIであるボタンにはOn Click関数というものがあり，そこにこのスクリプトを当てはめたヒエラルキーを渡すことでボタンを押したときにそのヒエラルキー内のスクリプト内にある任意の関数を呼び出すことができるようになっている。そのため，NEXTボタンには''public void Next()''関数をむすびつけ，BACKボタンには''public void Back()''関数を結びつけてそれぞれのボタンが押されたとき対応する関数を呼び出せるようにしている。
\begin{enumerate}
\item[]　先にAssetsという場所にResourcesという名前でフォルダを作成し，その中にImageという用意した画像ファイルを入れるためのフォルダを用意しておく。中に入れる画像はphoto＋表示させたい順番の数字にしておく。
\item 7行目で変数に画像のを代入できるようにするためにimage型の\verb|img|という変数の宣言を行い，8行目で用意した画像をどこまで表示させたかを数えるために\verb|count|という変数を宣言しておく。
\item 9行目の\verb|Start|関数ではプログラミング言語説明機能の画面が始まったとき，Unityのヒエラルキー上からImagesという名前のオブジェクトを探し出し、その中のImageコンポーネントを\verb|img|変数に取得するということを行ってる。このときUnity上ではヒエラルキーのImages内のImageコンポーネントに1番目に表示したい画像を配置しておく。
\item 13行目の\verb|Next|関数では実行されるたびに\verb|count|変数を増加させていき，用意した説明画像の枚数分以上に数値が大きくなったら（今回用意した枚数は6枚なので7以上になったら）1に戻すという作業を行いながら，18行目の部分で\verb|img|に取得させたImageコンポーネントにResourcesフォルダの中のImageフォルダからスプライト型として``photo''+その時のcountの数値の名前の画像を呼び出して表示している。
\item 20行目の\verb|Back|関数では呼び出されるごとに\verb|count|変数を減らしていき，数値が0になったら用意した説明画像の最後の枚数の数値に戻すということを行いながら，\verb|Next|関数と同じ方法で画像を表示している。
\item[]　この2つの関数の呼び出し方は、Unityの機能を利用している。UnityのUIであるbuttonには\verb|On Click|関数というものがあり，そこにこのスクリプトを当てはめたヒエラルキー内のオブジェクトを渡すことでボタンを押したときにそのオブジェクト内のスクリプト内にある任意の関数を呼び出すことができるようになっている。そのため，NEXTボタンには\verb|Next|関数をむすびつけ，BACKボタンには\verb|Back|関数を結びつけてそれぞれのボタンが押されたとき対応する関数を呼び出せるようにしている。


\end{enumerate}
\section{パズルクイズ形式学習機能}
本節では，パズルクイズ形式学習機能の画面とそこに含まれる機能を説明する。
\subsection{パズルクイズ形式学習機能の概要}
パズルクイズ形式学習機能は，システムの利用者が問題の解答を始めたとき問題と解答に使うブロックが表示され，それに対して利用者はパズル形式で解答する機能である。Webに投稿したパズルクイズ形式学習機能の画面を図\ref{figure:unity}に示す。この図の黒い背景の部分が問題および解答欄であり黄色い線でできた四角形一つ一つがブロックである。この解答欄に表示されているブロックの位置を,このコードが正しく動作するように入れ替えることで問題に解答する。解答が終わったら``Complete''と書かれたボタンを押して正解・不正解の判定を行う。このような構図にしたのはシステムの利用者がWebサイトにアクセスする媒体が計算機であってもスマートフォンであっても同じ画面の構図で利用できるようにするためである。

\begin{figure}[htb]
 \centering
 \includegraphics[width=11cm]{bprog.png}
 \caption{問題回答画面の図}
 \label{figure:unity}
\end{figure}

\subsection{パズルクイズ形式学習機能の中身ーブロックの配置変更について}
%スクリプトの説明と画像
ここではパズルクイズ形式学習機能機能の際にどのようにしてブロックの配置変更を行っているのかを説明していく。
\\　ブロックの配置変更は，ブロックすべてを管理しているヒエラルキーにブロックをクリックしたときスクリプト内の変数にそのブロックを保持させ，そこから条件によって動作が変わるようにスクリプトを当てはめることで行っている。今回そのヒエラルキーに当てているスクリプトは以下の通りである。なおこのスクリプトは波線でブロックの配置変更に関わらない部分を省略している。


\listinginput[1]{1}{BlockList.cs}


%このスクリプトを作成する前に，まずブロック自身の情報とブロック自身に対する処理を管理するスクリプトを別で''Block.cs''という名前で作っておく。このBlockという名前はそのままクラス名となる。UnityではC＃スクリプトを使用してクラスと呼ばれる独自のオブジェクト型を作成できるため，これにより別のスクリプトで変数を宣言するときなどにBlockという型を使うことができるようになる。このスクリプトの内容としては''Block selectedBlock;''というところでBlockの情報を変数に代入するためにBlock型のselectedBlockという変数を宣言しておき''public void OnSelectedBlock(Block block)''と''void ResetSelectedBlock()''という関数を作成し，組み合わせて実行することでブロックの配置変更が行われるというものになっている。''public void OnSelectedBlock(Block block)''関数ではまずブロックが押されたときにBlock型のblockという変数にそのブロック自身を取得する。この関数の呼び出しとブロックの取得はブロックに個別にOnClick関数を当てはめ、そこにこのスクリプトとこの関数，そのブロック自身を当てはめることで行っている。ブロック自身を取得後if文の部分によって，selectedBlockに何も入っていないとき，すなわちブロックをまだ選択していないとき，selectedBlockに取得したブロックを代入することで保持するという処理を行う。else ifの部分では，selectedBlockにすでにブロックが保持されていて取得したブロックと異なるとき，すなわち1回目とは別のブロックを選択したとき，''(selectedBlock.transform.position, block.transform.position)=(block.transform.position, selectedBlock.transform.position);''の部分によって保持していブロックの座標に今選択したブロックの座標を代入し，今選択したブロックの座標に保持していたブロックの座標を代入するという方法でブロックの位置を入れ替え，''void ResetSelectedBlock()''関数で選択を解除するという処理を行っている。elseの部分では，1回目と2回目で同じブロックを選んだとき''void ResetSelectedBlock()''関数で選択を解除するという処理を行っている。
\begin{enumerate}
\item[]　まずブロック自身の情報とブロック自身に対する処理を管理するスクリプトを別で``Block.cs''という名前で作っておく。このBlockという名前はそのままクラス名となる。UnityではC＃スクリプトを使用してクラスと呼ばれる独自のオブジェクト型を作成できるため，これにより別のスクリプトで変数を宣言するときなどにBlockという型を使うことができるようになる。
\item[]　このスクリプトの大まかな内容は12行目で\verb|Block|の情報を変数に代入するためにBlock型の\verb|selectedBlock|という変数を宣言しておき21行目の\verb|OnSelectedBlock|関数と46行目の\verb|ResetSelectedBlock|関数を作成し，組み合わせて実行することでブロックの配置変更が行われるというものになっている。
\item　21行目の\verb|OnSelectedBlock|関数ではまずブロックが押されたときにBlock型の\verb|block|という変数にそのブロック自身を取得する。この関数の呼び出しとブロックの取得はブロックに個別にOnClick関数を当てはめ、そこにこのスクリプトとこの関数，そのブロック自身を当てはめることで行っている。
\item　23行目の\verb|if|文の部分によって，\verb|selectedBlock|に何も入っていないとき，すなわちブロックをまだ選択していないとき，\verb|selectedBlock|に取得したブロックを代入することで保持するという処理を行う。
\item　29行目の\verb|else if|の部分では，\verb|selectedBlock|にすでにブロックが保持されていて取得したブロックと異なるとき，すなわち1回目とは別のブロックを選択したとき，32，33行目の部分で
%(selectedBlock.transform.position, block.transform.position)=(block.transform.position, selectedBlock.transform.position)の部分によって
保持していブロックの座標に今選択したブロックの座標を代入し，今選択したブロックの座標に保持していたブロックの座標を代入するという方法でブロックの位置を入れ替え，\verb|ResetSelectedBlock|関数で選択を解除するという処理を行っている。
\item　\verb|else|の部分では，1回目と2回目で同じブロックを選んだとき\verb|ResetSelectedBlock|関数で選択を解除するという処理を行っている。
\end{enumerate}

\subsection{パズルクイズ形式学習機能の中身ー正誤判定について}
ここではパズルクイズ形式学習機能機能の際にどのようにして問題の正誤判定を行っているのかを説明していく。
\\　正誤判定はそれぞれのブロックにidと画像をひも付けた情報をもたせ，解答を完了したとき問題ごとの正しいブロックの位置の要素番号とidが一致しているかどうかで行っている。正誤判定の際に使用しているスクリプトは以下のとおりである。なお波線の部分はスクリプトの内容を省略している。

\listinginput[1]{1}{SpriteSO.cs}

　%まずSpriteSO.csの説明から行う。UnityではScriptableObjectというものを使うことでデーテベース作成の際に画像と数値をひも付けるなどをすることができるため，このスクリプト上で''[CreateAssetMenu]''から''[SerializeField] int id''のように書くことで，Asset上に画像データとidをひも付けられるデータベースを作成できるようになる。そして，他のスクリプトで編集はできないが利用はできるようにするため''public Sprite Sprite { get =＞ sprite; }''''public global::System.Int32 ID { get =＞ id; }''というように書くことで画像と数値を他のスクリプトや関数で使えるように公開する。その後Unity上でSpriteSOのデータベースをブロックの種類分作成し，画像とidとなる数値を与えていく。これでブロックのデータベースは完成である。

\begin{enumerate}
\item[] ``まずSpriteSO.cs''の説明から行う。
\item[] 今回はUnityの機能である``ScriptableObject''を使う。``ScriptableObject''とはデータベース作成の際に画像と数値をひも付け，マスターデータとしての使用などをすることができる機能である。
\item　このスクリプト上で5行目から9行目までのように書くことで，Asset上に画像データとidをひも付けられるデータベースを作成できるようになる。
\item　他のスクリプトでも利用できるようにするため11行目と12行目というように書くことで画像と数値を他のスクリプトや関数で使えるように公開する。
\item Unity上でSpriteSOのデータベースをブロックの種類分作成し，画像とidとなる数値を与えていく。
\item[] これでブロックのデータベースは完成である。
\end{enumerate}

\listinginput[1]{1}{Block.cs}


%　次に``Block.cs''の説明を行う。このスクリプトはブロック自身のことを管理しており各ブロックに実装している。このスクリプトで''[SerializeField] SpriteSO frontSpriteSO;''''[SerializeField] SpriteSO backSpriteSO;''と宣言することでfrontSpriteSOとbackSpriteSOにSpriteSO.csから情報を読み取れるようにしている。そして''void SetSprite()''関数でこの関数が呼ばれたとき先に宣言しておいた''bool isFrontSprite;''がtrueならUIのimageの画像にfrontSpriteSOの画像を代入し，そうでなければbackSpriteSOの画像を代入することでブロックに表と裏の情報をもたせている。次に''public int GetID()''関数にif文とreturnを用いることでこの関数が呼ばれたときisFrontSpriteがtrueのときfrontSpriteSOのIDを返しそうでなければbackSpriteSOのIDを返すということを行っている。その後Unity上でヒエラルキー上の各ブロックについているBlockコンポーネントのFrontSpriteSOとBackSpriteSOの部分に対応させたいAsset上のSpriteSOを当てはめる。これにより各ブロックへのデータベースから画像とIDの受け渡しは完了である。
\begin{enumerate}
\item[] 次に``Block.cs''の説明を行う。
\item[] このスクリプトはブロック自身のことを管理しており各ブロックに実装している。
\item このスクリプトで9行目と10行目のように宣言することで\verb|frontSpriteSO|と\verb|backSpriteSO|に``SpriteSO.cs''から情報を読み取れるようにしている。
\item \verb|SetSprite|関数でこの関数が呼ばれたとき先に宣言しておいた8行目の\verb|isFrontSprite|がtrueならUIの\verb|"image"|に\verb|"frontSpriteSO"|の画像を代入し，そうでなければ\verb|"backSpriteSO"|の画像を代入することでブロックに表と裏の情報をもたせている。
\item GetID関数に\verb|"if"|文と\verb|"return"|を用いることでこの関数が呼ばれたとき\verb|"frontSpriteSO"|のIDを返しそうでなければ\verb|"backSpriteSO"|のIDを返すということを行っている。
\item Unity上でヒエラルキー上の各ブロックについている``Block''コンポーネントの``FrontSpriteSO''と``BackSpriteSO''の部分に対応させたいAsset上の``SpriteSO''を当てはめる。
\item[] これにより各ブロックへのデータベースから画像とIDの受け渡しは完了である。

\end{enumerate}

\listinginput[1]{1}{QuestionPanel.cs}
\listinginput[1]{1}{QuestionList.cs}


%　次にQuestionPanel.csとQuestionList.csの説明を行う。QuestionPanel.csでは，答えの配置を行っている。スクリプトを書く前に，ヒエラルキーにQuestionPanelというオブジェクトを作成，その中に答え用のブロックを管理するListというオブジェクトを作成し，その中に答え用のブロックを作成する。このスクリプトはQuestionPanelオブジェクトに当てる。スクリプトに移り，''[SerializeField] List＜Image＞ images;''''[SerializeField] List＜SpriteSO＞ spriteSOList;''と書くことでQuestionPanelオブジェクトのコンポーネントに答え用のブロックとSpriteSOを当てることができるようになるため，当てていく。''public void SetImages(int[] idList)''関数ではこの関数が呼ばれたときに，答えのidが入った配列を受け取ってその配列のidの数だけ受け取った配列の中のidと一致するidを持つものをspriteSOListから探してきてspriteSOに代入し，そのidに対応する画像を配列の要素番号に合ったimagesコンポーネントの画像に代入して表示するということを繰り返し行っている。
%　QuestionList.csでは答えを複数持てるように答えの配列を配列化している。''List＜int[]＞ questions = new List＜int[]＞()''の部分が答えの配列を配列化した部分である。
%　これらの関数''public void SetImages(int[] idList)''と''List＜int[]＞ questions = new List＜int[]＞()''は上記したBlockList.csで呼び出している。このスクリプトの''int[] question;''''[SerializeField] QuestionList questionList;''''[SerializeField] QuestionPanel questionPanel;''の宣言によってBlockListオブジェクトのコンポーネントにQuestionListとQuestionPanelが追加されるためそれぞれ同じ名前のスクリプトを当てはめる。''private void Start()''関数部分によってquestion変数にQuestionListの''GetQuestion();''関数が代入される形で答えの配列呼び出され，''questionPanel.SetImages(question);''と書くことでQuestionPanelの''SetImages()''関数にquestion変数の配列が入った形で呼び出される。
\begin{enumerate}
\item[] 次に``QuestionPanel.cs''と``QuestionList.cs''の解説を行う。
\item[] ``QuestionPanel.cs''では答えの配置を行っている。
\item ヒエラルキーに``QuestionPanel''というオブジェクトを作成，その中に答え用のブロックを管理する``List''というオブジェクトを作成し，その中に答え用のブロックを作成する。
\item このスクリプトを``QuestionPanel''オブジェクトに当てる。
\item 8行目と9行目のように書くことで``QuestionPanel''オブジェクトのコンポーネントに答え用のブロックと``SpriteSO''を当てることができるようになるため，当てていく。
\item SetImages関数ではこの関数が呼ばれたときに，答えのidが入った配列を受け取ってその配列のidの数だけ受け取った配列の中のidと一致するidを持つものを``spriteSOList''から探してきて``spriteSO''に代入し，そのidに対応する画像を配列の要素番号に合った``images''コンポーネントの画像に代入して表示するということを繰り返し行っている。
\end{enumerate}


\begin{enumerate}
\item[] ``QuestionList.cs''では答えを複数持てるように答えの配列を配列化している。
\item 7から10行目の部分が答えの配列を配列化した部分である。この配列の中身はは\verb|GetQuestion|関数によって選ばれ，値が返される。
\item[] これらの\verb|SetImages|関数と選ばれた配列の値は，上記した``BlockList.cs''の17行目で呼び出している。
\item ``BlockList.cs''スクリプトの6，7，13行目の宣言によってBlockListオブジェクトのコンポーネントに``QuestionList''と``QuestionPanel''が追加されるためそれぞれ同じ名前のスクリプトを当てはめる。
\item \verb|Start|関数部分によって\verb|"question"|変数に``QuestionList''の\verb|GetQuestion|関数が代入される形で答えの配列呼び出され，17行目のようにと書くことで``QuestionPanel''のSetImages関数に\verb|"question"|変数の配列が入った形で呼び出される。
\end{enumerate}


\begin{itembox}[l]{正誤判定を行う（BlockList.cs）}
 \scriptsize
 \begin{verbatim}
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[SerializeField] List<Block> blocks;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
public class BlockList : MonoBehaviour
  public void CheckAnswer()
    {
        for (int i = 0; i < question.Length; i++)
        {
            if (question[i] != blocks[i].GetID())
            {
            
                resultPanel.ShowResult(isCorrect: false);
                return;
            }
        }
        resultPanel.ShowResult(isCorrect: true);
    }
\end{verbatim}
\end{itembox}

\listinginput[1]{1}{QuestionList2.cs}

%　ここから正誤判定について解説を行う。正誤判定のための関数はBlockList.csにかかれている。正誤判定を行うために，まず''[SerializeField] List＜Block＞ blocks;''を宣言ることでこのスクリプトが当ててあるBlockListオブジェクトのコンポーネントにブロックの情報を入れることができるようになるため，Unity上で操作しておく。このときのブロックを入れる順番は解答開始時に表示したい順番にしておく。これでこのスクリプトは解答用の各ブロックの画像とidの情報と答えの各ブロックのidと画像を持つようになる。そして''public void CheckAnswer()''関数によって，答えの配列が入ったquestion配列のそのときの繰り返し回数番目のidと並び替えたブロックのその時の繰り返し番目が持っているidが一致していないときがあれば不正解を示す処理を行い値を返すということをquestion配列の要素の数だけ繰り替えし，繰り返しが終わって間違いがなければ正解を示す処理を行うことで正誤判定を行っている。その後，Unityの画面で解答完了のボタンUIを作成し，そこのOnClick関数を利用してボタンが押されたとき''public void CheckAnswer()''関数が呼ばれるように当てはめる。しかし，これだけでは画面上の解答用のブロックが配置変更されるのみで内部的にブロックの配列の変更が行われない。そのため，BlockList.csのブロックの配置変更の説明の際に表示した部分の''int selectedIndex = blocks.FindIndex(x =＞ x == selectedBlock);''の宣言で取得したすべてのブロックの情報から1回目に選んだブロックと一致する場所の要素番号をselectedIndex変数に代入し''int currentBlockIndex = blocks.FindIndex(x =＞ x== block);''の宣言で取得したすべてのブロックの情報から2回目に選んだブロックと一致する場所の要素番号をcurrentBlockIndex変数に代入する。そして''(blocks[selectedIndex], blocks[currentBlockIndex]) = (blocks[currentBlockIndex], blocks[selectedIndex]);''の処理によって1回目で選んだブロックの要素番号と2回目で選んだブロックの要素番号を入れ替え，内部的なブロックの配列変更を行っている。






\listinginput[1]{1}{BlockList2.cs}

\begin{enumerate}
\item[] ここから正誤判定について解説を行う。
\item[] 正誤判定のための関数は``BlockList.cs''にかかれている。
\item 5行目の\verb|blocks|変数を宣言することでこのスクリプトが当ててある``BlockList''オブジェクトのコンポーネントにブロックの情報を入れることができるようになるため，Unity上で操作しておく。
\\このときのブロックを入れる順番は解答開始時に表示したい順番にしておく。これでこのスクリプトは解答用の各ブロックの画像とidの情報と答えの各ブロックのidと画像を持つようになる。
\item 8行目の\verb|CheckAnswer|関数によって，答えの配列が入った\verb|"question"|配列のそのときの繰り返し回数番目のidと並び替えたブロックのその時の繰り返し番目が持っているidが一致していないときがあれば不正解を示す処理を行い，値を返すということを\verb|"question"|配列の要素の数だけ繰り替えし，繰り返しが終わって間違いがなければ正解を示す処理を行うことで正誤判定を行っている。
\item Unityの画面で解答完了のボタンUIを作成し，そこの\verb|"OnClick"|関数を利用してボタンが押されたとき\verb|CheckAnswer|関数が呼ばれるように当てはめる。
\end{enumerate}

\begin{enumerate}
\item[]しかし，これだけでは画面上の解答用のブロックが配置変更されるのみで内部的にブロックの配列の変更が行われないため以下のことを行う。
\item ``BlockList.cs''のブロックの配置変更の説明の際に表示した部分の34行目の宣言で取得したすべてのブロックの情報から1回目に選んだブロックと一致する場所の要素番号を\verb|"selectedIndex"|変数に代入し，35行目の宣言で取得したすべてのブロックの情報から2回目に選んだブロックと一致する場所の要素番号を\verb|"currentBlockIndex"|変数に代入する。
\item 36から37行目の処理によって1回目で選んだブロックの要素番号と2回目で選んだブロックの要素番号を入れ替え，内部的なブロックの配列変更を行っている。

\end{enumerate}
 以上がどのようにして正誤判定を行っているかの説明である。






\section{問題の内容}
問題の内容は、東北公益文科大学が「基礎プログラミングI・II」の講義ノートにある積算プログラムのコード(図.\ref{figure:sekisan})を参考にし,そのコード内の単語の配置を変えたものを出題する。
\begin{figure}[htb]
 \centering
 \includegraphics[width=11cm]{sekisan.png}
 \caption{積算プログラムのコード提示}
 \label{figure:sekisan}
\end{figure}

\chapter{システムの検証}
\section{実験方法}
本研究では，予備実験として山形県立酒田光陵高等学校情報科の2年生の生徒20名を被験者とし，個人のスマートフォンからシステムを利用してもらった後，アンケートに回答してもらいその結果によって評価をシステム改良に取り入れた。実験では20名全員がシステムの利用，およびアンケートの記入を行った(図.\ref{figure:test})。
前提として酒田高陵高校の生徒らはすでに授業でテキスト型言語を学んだ経験はあるが，アンケートに答えてもらう際には，自身が初めてテキスト型言語を学習する学習者であった場合を想定してもらっている。
\begin{figure}[htb]
 \centering
 \includegraphics[width=7cm]{test.pdf}
 \caption{実験の流れ}
 \label{figure:test}
\end{figure}

アンケートの内容は以下のとおりである。
\begin{itemize}
\begin{breakbox}
\item[質問1]1週間のうち家でプログラミングの勉強を行う際，合計どのくらいの時間行いますか。
  \end{breakbox}

  この質問の回答結果から，被験者のプログラミングの学習頻度を調べることで被験者のプログラミング能力がどれくらいあるのかを判断する。
\begin{breakbox}

\item[質問2]小学校または中学校でスクラッチなどのブロックを使ったプログラミングを行ったことがありますか。また，高校にPyhonやJavaなどのプログラミング言語を使った授業はありますか。
 \end{breakbox}

  この質問の回答結果から，被験者のビジュアル型言語使用経験と高校でのテキスト型言語使用経験を調べ，今回の実験の被験者としてふさわしいかを調べる。
\begin{breakbox}
\item[質問3]文字や記号のみを使ってプログラミングを学習するのに比べ，今回のようなプログラミング学習方法は簡単でしたか。[4段階評価]
 \end{breakbox}

　この質問の回答結果から，被験者がテキスト型言語を教科書や参考書を使用して学習するのに比べ，このシステムを使用して学習する方法は簡単であったかを調べる。
\begin{breakbox}
\item[質問4]今回行ってもらったプログラムの学習方法は分かりやすかったですか。[4段階評価]
 \end{breakbox}

　この質問の回答結果から，被験者がこのシステムを使用して学習する際に操作方法やどのように進めていけばよいかなどが分かりやすかったかどうかを調べる。
\begin{breakbox}
\item[質問5]今回行ってもらった方法によるプログラミング学習方法はプログラミング能力向上や学校の授業の予習に役立つと思いますか。
 \end{breakbox}

　この質問の回答結果から，システムの学習方法がプログラミング能力向上や授業の予習に役立ちそうかどうかを調べる。
\begin{breakbox}
\item[質問6]どうしたらこのプログラムがもっと良くなるか自由にお書きください。
 \end{breakbox}

  被験者からシステムに対する意見を書いてもらい，システムの改善に繋げられるようにする。
\end{itemize}


%\begin{figure}[htb]
% \centering
% \includegraphics[width=7cm]{wsheet.pdf}
% \caption{アンケートの内容}
% \label{figure:result}
%\end{figure}

\section{結果・解釈}
アンケートの結果，1週間のうち家でプログラミングの学習をほとんどやらないと答えた人が70％であったため全体的なプログラミング能力は高くないと判断した(図.\ref{figure:anke1})。酒田高陵高校情報科では全員が1年生のときに授業でテキスト型言語を利用した経験があり，その内小学校または中学校でビジュアル型言語を利用した経験がある人は75％いた(図.\ref{figure:anke2})。アンケート回答中の様子を見ているとビジュアル型言語を経験した記憶があやふやな人もいるようだった。本システムはビジュアル型言語の利用経験があり，これからテキスト型言語を学習しようとする者やプログラミング能力の低い者に向けたものであるため，今回の被験者として相応しいという結論となった。
\\　またアンケートの結果,質問3では「まあまあ簡単」以上の回答を行った人が95％となり，本システムを利用したプログラミング学習の簡単さが示された(図.\ref{figure:anke3})。
\\　質問4では「まあまあわかりやすい」以上の回答を行った人が95％となり，本システムの操作方法などがわかりやすかったことが示された(図.\ref{figure:anke3})。
\\　質問5では「役立つ」と答えた人が100％であったため，本システムがプログラミング能力向上や授業の予習に役立つことが示された。
\\　以上の結果からシステムおよびこのシステムの学習方法の有用性が示された。
\\　また質問6にあったシステムに対する好意的な意見として，スペルミスや書き忘れを気にすることなく文法の練習に集中できたという回答があった。

\begin{figure}[htb]
 \centering
 \includegraphics[width=11cm]{anke1.pdf}
 \caption{質問1のアンケート回答結果の図}
 \label{figure:anke1}
\end{figure}

\begin{figure}[htb]
 \centering
 \includegraphics[width=11cm]{anke2.pdf}
 \caption{質問2のアンケート回答結果の図}
 \label{figure:anke2}
\end{figure}

\begin{figure}[htb]
 \centering
 \includegraphics[width=14cm]{ank_hiritu3-4.pdf}
 \caption{質問3および4のアンケート回答結果の図}
 \label{figure:anke3}
\end{figure}

\section{システムの改善案}
質問3の結果のうち最も多かった回答は「どちらかといえば簡単」であり全体の65％であった。このことから，何かしら簡単であると感じない部分があったと考えられる。原因となりえる質問6で得られた意見として，被験者らが初めて触れるテキスト型言語なのに対し問題が難しかったことや使用するメソッドおよび制御構造に対する説明が解答開始前にしか見ることができず，問題を解いている最中に確認しながら進めることができなかったこと，間違ったときや分からないときにヒントがなかったことが挙げられている。これらの改善策として，問題をメソッドや制御構造ごとに細分化して作ること，問題を解いている途中でも説明文を見れるようにすることで解決できると考える。これにより，簡単な問題から段階を踏んで学習できるようになり，問題解答中に説明が見れることで問題の確認しながら進めることができ，それらをヒントとしても扱うことができると考えるためである。

\chapter{システムの改善}
ここでは実際に行ったシステムの改善内容について説明していく。
\section{改善内容1}
1つ目の改善内容として,練習問題の追加である(図.\ref{figure:title-scsyo})。タイトル画面に``Tutorial''というボタンを追加し,押すと練習問題の画面に移行するようにした。練習問題は3つ作成し,それぞれprintやgetsに関する問題(図.\ref{figure:tyutorial}),while...endに関する問題(図.\ref{figure:tyutorial2}),if...endに関する問題である(図.\ref{figure:tyutorial3})。
\\ これらの問題の操作方法や開発方法は改善前のシステムと同じである。
\begin{figure}[htb]
 \centering
 \includegraphics[width=14cm]{title-scsyo.png}
 \caption{改善後のタイトル画面}
 \label{figure:title-scsyo}
\end{figure}

\begin{figure}[htb]
 \centering
 \includegraphics[width=14cm]{tyutorial.png}
 \caption{練習問題1}
 \label{figure:tyutorial}
\end{figure}

\begin{figure}[htb]
 \centering
 \includegraphics[width=14cm]{tyutorial2.png}
 \caption{練習問題2}
 \label{figure:tyutorial2}
\end{figure}

\begin{figure}[htb]
 \centering
 \includegraphics[width=14cm]{tyutorial3.png}
 \caption{練習問題3}
 \label{figure:tyutorial3}
\end{figure}

\section{改善内容2}
2つ目の改善点として,問題の解答途中でもプログラミング言語の説明が見れるように``setumei''ボタンをすべての問題の横に追加した。開発においては,このボタンの``OnClick''関数を用いてボタンを押したときにプログラミング言語説明機能の画面が現れるようにした。

\chapter{実験}
\section{実験方法}
システムの改善内容の効果を確認するための実験として，東北公益文科大学が実施している将来科学技術革新を牽引する傑出した人材育成に向けて，小学5年生から中学3年生までを対象にし，その能力を更に伸ばすことを目的とした塾である「ジュニアドクター鳥海塾」の第2段階塾生3名と20から22歳の大学生13名の計16名を被験者とし，改良後のシステムを使用してもらったあとにアンケートに答えてもらうことを行った。予備実験の際には生徒目線の結果得ることができたため，今回は指導者目線の意見を得るために，前提として他人にプログラミングを教えた経験のある人には，アンケート回答時に指導者としての立場から答えてもらっている。
\\　アンケートの内容は以下のとおりである。
\begin{itemize}
\begin{breakbox}
\item[質問1]他人にプログラミングを教えたことはありますか。
\end{breakbox}
  この質問の回答結果から，その被験者がプログラミングの指導者としての経験があるかどうかを確認する。
\begin{breakbox}
\item[質問2]文字や記号のみを使ってプログラミングを学習するのに比べ，今回のようなプログラミング学習方法は簡単でしたか。[4段階評価]
\end{breakbox}

　この質問の回答結果から，被験者がテキスト型言語を教科書や参考書を使用して学習するのに比べ，このシステムを使用して学習する方法は簡単であったかを調べる。
\begin{breakbox}
\item[質問3]今回行ってもらったプログラムの学習方法は分かりやすかったですか。[4段階評価]
\end{breakbox}

　この質問の回答結果から，被験者がこのシステムを使用して学習する際に操作方法やどのように進めていけばよいかなどが分かりやすかったかどうかを調べる。
\begin{breakbox}
\item[質問4]問題の難易度はどうでしたか[4段階評価]
\end{breakbox}

　この質問の回答結果から，新しく追加した練習問題の難易度はどうだったかを判断する。
\begin{breakbox}
\item[質問5]今回のプログラムの改良内容やプログラム自信についての意見をお書きください。　
\end{breakbox}

　この質問の回答結果から，改良内容に対する意見や他に改良すべきところはないかなどの意見をもらう。
\end{itemize}

\section{実験結果}
アンケートの結果，質問1であると答えた人は11人で全体の68.75％，ないと答えた人は5人で全体の31.25％であった。この11人の回答結果は指導者目線の意見として考える。

質問2の全体の結果は，「まあまあ簡単」以上の回答を行った人が14人の87.5％であり，そのうち指導者目線の回答は11人中全員が「まあまあ簡単」以上の回答を行った。このことから予備実験と合わせてこのシステムによる学習方法は，生徒目線から見ても指導者目線から見ても簡単であるということが示された。また，この質問で「簡単」と回答した人は全体である16人中10人のであり，予備実験と比べてこの回答の割合が上昇していることから，今回の改善内容は学習方法を簡単にするということに関してうまくできたと考えられる。

質問3の全体の結果は，「まあまあわかりやすい」以上の回答を行ったのは14人の87.5％であり，そのうち指導者目線の回答は11人中10人の90.91％であった。このことから予備実験と合わせてこのシステムの操作方法がわかりやすかったことが示された。しかし，この質問で「わかりやすい」と回答した人は全体である16人中6人で予備実験と比べて割合が増加することがなかった。このことから，今回の改善内容だけではシステムの操作方法をわかりやすくすることに関しては足りないということが示された。

質問4の全体の結果は，「まあまあ簡単」以上の回答を行った人が14人の87.5％であり，そのうち指導者目線の回答は11人中10人が「まあまあ簡単」以上の回答を行った。この結果より追加した問題から元あった問題の難易度はちょうどよかったと考える。

質問5にあった意見としては，「説明を見ながら解答ができたら良かった」「説明のページに詰め込みすぎ」「もっと様々な難易度を選べるようにしてほしい」「SEやBGM，アニメーションの追加，点数の記録やどこを間違えたか，ランキングがあると学習意欲が高まると思う」「``Tutorial''などの操作部分の表記方法が統一されればわかりやすいと思う」などがあった。

\section{システムの改善案}
今回のアンケートの結果，質問4から今回の改善だけではシステムのわかりやすさを向上させることはできなかった。原因として質問5の意見にもあった「``Tutorial''などの操作部分の表記方法が統一されればわかりやすいと思う」というところが改善されればシステムのわかりやすさが向上すると考えられる。この問題は，操作部分の文字を日本語にすることで改善されると考えられる。そうすることで，そのボタンを押したときにどのような画面に移動するのかやなんのためのボタンなのかがわかりやすくなると考えられるためである。
\chapter{結論}
%結論は簡潔に書く
\section{評価}
本研究で作成したプログラミング学習システムはビジュアル型言語に近い操作方法でテキスト型言語を学習できるようにした。予備実験及び実験の結果から，わかりやすい操作であり文字や記号のみを用いて学習するよりも簡単に学習ができ，テキスト型言語初学者にとって丁度いい難易度の問題を解答していくためプログラミング能力向上や学校の予習に役立つということが示された。そのことからギャップを克服しながら予習ができるシステムとなったと評価する。しかし，システムが実際にはどれほどの学習効果があるのかを示すことのできる実験を行うことができなかった。そのため先行事例の課題にあった理解度の向上に関する直接的なデータが得られなかった。今後はシステムの学習効果を調べるための実験を行う必要がある。

\section{今後の展望}
8.3で述べたように現段階のシステムは操作のしやすさ，わかりやすさの点において改善の余地が残されている。また問題の種類や内容も学習システムとしては少なく，言語の種類や単元の内容を増やしていく必要がある。今後はまずこれらの部分を解決できるような改善をシステムに施していく。その後結論で述べたシステムの学習効果を調べるために実験を行う。実験の内容としては，2グループの被験者を集め事前にテストを行い，片方のグループには文字や記号のみの学習を，もう片方のグループには本システムを利用した学習をしてもらったあと両方のグループにテストを行いその結果を比べる。こうすることでシステムの学習効果や理解度の向上に関するデータが得られると考えられる。

\chapter*{謝辞}


\begin{thebibliography}{}
\bibitem{tebiki}文部科学省. ``小学校プログラミング教育の手引（第三版）''. 2020-02. \url{https://www.sejuku.net/blog/wp-content/uploads/2021/07/20200218-mxt_jogai02-100003171_002.pdf}, (参照2023-08-15).
\bibitem{suke}文部科学省. ``学習指導要領改訂に関するスケジュール''. \url{https://www.mext.go.jp/content/20220907-mxt_kyoiku02_100002604_001.pdf}, (参照2023-08-15).

\bibitem{kaigi}文部科学省. ``小学校段階におけるプログラミング教育の在り方について（議論の取りまとめ）''. 2016-06-16. \url{https://www.mext.go.jp/b_menu/shingi/chousa/shotou/122/attach/1372525.htm}, (参照2023-11-20).
  
\bibitem{koukou}文部科学省. ``高等学校　学習指導要領(平成30年公示)''. 2018-03. \url{https://www.mext.go.jp/content/20230120-mxt_kyoiku02-100002604_03.pdf}, (参照2023-08-15).

\bibitem{gihu}岐阜県教育委員会　学校支援課. ``小学校プログラミング教育　実践事例集''. 2020-02. \url{https://www.pref.gifu.lg.jp/uploaded/attachment/238416.pdf}, (参照2023-08-15).

\bibitem{bizyuron}松澤 芳昭,酒井 三四郎. ``ビジュアル型言語とテキスト記述型言語の併用によるプログラミング入門教育の試みと成果''. 研究報告コンピュータと教育. vol.2013-CE-119, no.2.

\bibitem{okamoto}岡本 恭介,安藤 明伸. ``ビジュアル型とテキスト型プログラミングにおける学習順序が教育的効果に与える影響''. 2020. \url{https://www.jstage.jst.go.jp/article/jjet/44/Suppl./44_S44052/_pdf/-char/ja}, (参照2023-09-25).

\end{thebibliography}


\end{document}