2022-Rino/paper/c120028-thesis.tex at ebd25ec6bf5d2972486348f4e241a911009c401e

Fork: 1
HiroseLabo. / 2022-Rino
Find file
Newer
Older
2022-Rino / paper / c120028-thesis.tex
ItoRino on 7 Jan 52 KB add:5章に予備実験内容・結果・改良追加
Raw Blame History
%#!platex -kanji=%k
%#DVIPDF dvipdfmx -f ipa.map
\documentclass{jsbook}
%\pagestyle{empty}
\usepackage[dvipdfmx]{graphicx}
%\usepackage{listings, jlisting}
%\usepackage[sectionbib]{chapterbib}
%\usepackage{ascmac}
\usepackage{here}
\usepackage{geometry}
\usepackage{url}	
\setcounter{tocdepth}{3}	% 文中にURLを書くときは \url{} で括る
\geometry{textwidth=160mm, textheight=225mm}
\renewcommand{\bibname}{参考文献}

\title{ゲーミフィケーション要素を用いたプログラミング教材の提案}
\author{広瀬研究室　4年伊藤理乃}
\date {令和6年1月8日}

                \par 
\begin{document}
\maketitle

\begin{center}
 {\bfseries 概要}
\end{center}
%% 概要 %%
プログラミング言語の学習は情報教育において重要な役割を担っている。学生の時にプログラミングのスキルを身につけることで論理的思考力や想像力,問題解決能力の向上を図ることが可能である。プログラミング言語を学習し理解する際には，教員が行う講義だけではなく講義時間外に学生が自主的に行う自学習が必要である。しかし，問題点としてプログラミング言語の自学習を行う上で学習意欲の維持・向上が難しいという点が挙げられる。そこで本研究では,プログラム学習者の自学習のモチベーションの維持・向上を推進させ，継続的なプログラミング学習を行うことを目的としたプログラミング教材の提案を行う。
本研究では，ゲーミングを行うことを目的としていないシステムなどに「レベルアップ」や「スコア競争」などのゲームの要素を取り入れることでモチベーションの維持や向上を図ることが期待できるものであるゲーミフィケーション要素を取り入れたゲーミフィケーション手法を利用し，自学習のモチベーションの維持・向上を図る。(434字)


\tableofcontents
\chapter{はじめに}
本章では，研究を行なっていく上での背景や目的について説明する。
\section{背景}
現代社会では，AI（アーティフィシャル・インテリジェンス）やビックデータ，ロボットテクノロジーなどの最先端技術が高度化し，様々な知識や情報が共有され，今までにない新たな価値を生み出している。これにより，ロボットや自動走行車などの技術で，少子高齢化，地方の過疎化，貧富の格差などの課題や困難を克服する世界を「Society5.0」と呼称している\cite{naikaku}。
文部科学省は，2020年度から小学校段階でのプログラミング教育の導入を決定した。プログラミング教育では，コンピュータに意図した処理を行うよう指示することができるということを体験させながら，「知識及び技能」「思考力，判断力，表現力」「学びに向かう力，人間性等」を身につける狙いがあるとしている\cite{monbu}。プログラミング言語は講義から文法的要素やコンピューターにさせる処理を学ぶことによる論理的な学習だけでなく，学習者が実際にコードを記述することでプログラミング的思考が身につき，コードの書き方が身についていく。
プログラミング的思考は演習の中でトライ\&エラーに取り組み，感覚的にコードが書けるようになることで身につくが，数時間という講義内での学習のみではプログラミング的思考を理解するには難しく，学習者が個別に演習課題に取り組む必要がある。しかし,個別に演習課題を取り組むにあたって順調に演習課題を進めている学生と比較して遅延や停滞している学生が多く存在してしまう\cite{gakusyutien}。個別にプログラミング演習課題を取り組む際に,エラーやバグの解決に時間を取られない手法として,Scratch\footnote{非営利団体Scratch財団によって設計，開発，維持されているシンプルなビジュアルインターフェースを持った子供向けコーディング言語。}\cite{scratch}などを用いた感覚的学習も推進されているが，プログラミング言語の文法にあまり触れることがないため，実際のコードに触れることがあまりない。学習始めたばかりの学習者や学習に苦手意識を持っている学習者の自学習による反復学習を向上させる手法としてゲーミフィケーションが挙げられる。ゲーミフィケーションとは,ゲーミングを行うことを目的としていないシステムなどに「レベルアップ」や「スコア競争」などのゲームの要素を取り入れることでモチベーションの維持や向上を図ることが期待できるものである。近年では，日本語教育\cite{nihongo}やSDGs\cite{sdgs}のように幅広い場面で課題解決の手法として利用されている。以上を踏まえ，本システムでは学習意欲の維持・向上を目的としてゲーミフィケーション要素を取り入れる。学習内容として，実践的にソースコードに触れることができるコード記入型学習機能とプログラミング言語をクイズを用いてインプットしながら他の学習者との情報交換・共有を行うことができるクイズ形式学習機能を実装する。

\section{基礎プログラミングI・I\hspace{-1.2pt}I}
本研究では,プログラミング学習の研究背景として「基礎プログラミングI・I\hspace{-1.2pt}I」の学習環境を用いて実験・考察を行っていく。「基礎プログラミングI・I\hspace{-1.2pt}I」とは，東北公益文科大学が開講している講義である。主にプログラミング言語であるRuby言語の学びを中心としている講義であり,一つの教室に受講者40名がいる状態で教師が教える講義を受講する形の講義である。この講義は,一般的に使われているアプリケーションプログラム制限されることを,プログラミングの知識をベースに,あらゆる制約を取り去った自由なプログラムを作成し,問題解決能力の向上をはかるものである。
\subsection{基礎プログラミングI・I\hspace{-1.2pt}Iでの取り組み}
基礎プログラミングI・I\hspace{-1.2pt}Iでは，約40名の受講生が受講している。学生一人一人に一台の計算機を用意し，受講生はプログラミングの基礎を学ぶ手段として，Ruby言語を利用して学習している。基礎プログラミングIでは,Unixの基礎知識,基礎的文法である変数や入出力処理，制御構造，配列を学習する。基礎プログラミングI\hspace{-1.2pt}Iでは,メソッド定義,ハッシュ,基礎的文法の応用,CGIプログラムの書き方を学習する。最終的にこれまで学んだ内容を活かし，課題解決プログラムを受講生全員が作成し，課題成果発表を行う。

\subsection{学生の活動時間と理解度}
「基礎プログラミングI・I\hspace{-1.2pt}I」では，全27回の講義でプログラミング基礎知識からプログラミングを用いた実践的なデータ処理と情報表現を学ぶ。「基礎プログラミングI」では,12回の講義内容を元に課題成果発表を行う。「基礎プログラミングI\hspace{-1.2pt}I」では,4回の講義を元に中間試験を行い,その後6回の講義を経て課題成果発表を行う。課題成果発表が終わった後に筆記によるプログラミング的思考が身についているかを図るための期末試験を行う。講義の際の受講生の活動プロセスを図1.1に示した。105分の講義を行った後，自身で講義内容を理解できた場合は自身で講義内容を利用したオリジナルプログラムの作成，できなかった場合は再度講義内容の復習を行い，最終的に受講生全員がオリジナルプログラムに着手し，研究発表を行う。図1.1では，「講義内容を理解できているか」という部分から講義外の自学習である。講義内容を講義中に理解できなかった受講生と講義内容を講義中に理解できた受講生の双方において自学習は必要不可欠である。講義時間は受講生全員平等なため，受講生の理解度の違いは自学習の学習量の違いによってうまれる。しかし，自学習は学習者の学習意欲によって学習量が変わるため，学習意欲が低い受講生は学習を諦めてしまうことが起こりうる。
 \begin{figure}[H]
\centering
\includegraphics[width=4cm]{kisopg-flow.png}
\caption{受講生活動プロセス}
\end{figure}

\section{研究目的}
本研究では現状の課題を解決するために，プログラム学習者の自学習のモチベーションの維持・向上を推進し，トライ\&エラーを繰り返しながらプログラミング的思考を理解するための，ゲーミフィケーション要素を用いたクイズ形式学習機能・コード記入型学習機能から構成されるプログラミング教材の構築を目的とする。

\chapter{関連研究と類似サービス}
本章では，ゲーミフィケーションを用いて学習者のモチベーション維持・向上に活用するために既存のシステムや関連研究の内容を具体化する。
\section{類似サービス}
本研究にて構築するシステムであるクイズ形式学習機能・コード記入型学習機能と類似している機能を搭載しているシステムを説明する。
\subsection{忍者CODE}
株式会社甲賀-KOGA-が開発したプログラミング学習サイトである\cite{ninjacode-site}。さまざまなプログラミング言語をクイズ形式で学べる形になっている（図2.1）。HTML, CSSとJavaScript, jQueryとPHPのようにWebサイトを作成する際に使用する言語のクイズに特化している。HTML, CSSのクイズが全91問あるのに対し，Ruby言語のクイズは全15問と少なくなっている。クイズの内容は，プログラミング言語の語句を選んでいくようなクイズではなく，実際に回答者の環境にあるテキストエディタで実行して回答を導き出し，回答することを想定して作られているクイズである。そのため，回答者は忍者CODEサイトをは別にテキストエディタを使って実際にコードを実行することが必要である。
\subsection{Progate}
株式会社 Progate が開発したプログラミング学習サイトである\cite{progate-site}。指定したプログラミング言語の構文，メソッドについてスライド式で学習した後，画面上で実際にプログラミングを行う。プログラミングを行う画面では，実際にコードを入力していき，問題に正解すると次に演習へ進む。図2.2のように左側に回答して欲しいプログラムについての説明があり，中央にコードを記入する場所，右側に実行結果と実行結果の見本が表示される。回答者が答えに迷った場合は，スライドを何度も見ることができ，ヒントも表示できる。Ruby言語についての学習も行うことができるが，基礎的な部分は無料で受講できるが，応用部分は有料である。

 \begin{figure}[H]
\centering
\includegraphics[width=14cm]{ninjacode.png}
\caption{忍者CODE実行画面}
\end{figure}

 \begin{figure}[H]
\centering
\includegraphics[width=17cm]{progate.png}
\caption{Progate実行画面}
\end{figure}

\section{関連研究}
ゲーミフィケーションを利用した研究は今まで数多く行われている。
\subsection{ゲーミフィケーション要素を取り入れた小学生の学習効果}
福山佑樹らの研究では，ゲーミフィケーション教材を小学校に数週間導入した際の学習効果を検討すること，小学校教員がゲーミフィケーションにどのような印象を持ち，実際に導入してどのような影響を教材が与えたと認識したのかを検討することを目的とし，小学1年生用に開発されたゲーミフィケーション教材「アプリゼミ」\footnote{DeNa社が開発した算数・国語・英語を学習できるタブレット端末上で動作するアプリケーション。}を小学校において導入する実践を行った。使用するアプリのゲーミフィケーション要素の確認として，Dichevaら\cite{daicheva}の教育研究における先行研究をもとに「アプリゼミ」のゲーミフィケーション教材としての妥当性を判断した。ゲーミフィケーション教材の実践を2つの小学校において2週間の実践を行った結果,計算分野に関して30\%以上点数が向上するなど大きな成果が見られた。ゲーム要素によって児童がドリル形式の学習を楽しんで行う事ができたことに由来する事が示唆された\cite{game1}。

\subsection{ゲーミフィケーション要素を活用したウォーキング支援}
藤田美幸らの研究では，ドコモ・ヘルスケアがリリースしたウォーキングを支援することで健康維持・増進を目的とした歩数計アプリケーション「歩いておトク」を利用し,ゲーミフィケーションによる外敵動機付けについて自己決定性の高低の種別により分析し考察した。分析では，同時に幾つかの動機付けを持つことを実証する理論的フレームワークとして自己決定理論（Deci\&Ryan, 1985）を利用し，自己決定性の高低の種類として1，外発的動機づけの発動 2，外敵調整 3，取入的調整 4，統合的調整 6，内発的動機づけの観点から分析を行った。分析の結果，ゲーミフィケーション要素はユーザーの動機づけを目的とした行動変容を促すシステムに必要な動機づけのマネジメントの方向性を示してくれ，エンゲージメントを高め行動変容を促すものとした\cite{game2}。

\subsection{技術者のモチベーションに関する研究}
西康晴らの研究では,ソフトウェアプロジェクト管理にモチベーションという概念を利用し,マズローの欲求段階説に着目したモチベーションマップというツールを作成し,それらをプロジェクト管理に用いるための方策について議論した。ツール作成ではモチベーション向上のためのモデル作成のために,具体的なインセンティブの想起を行なった。29項目のインセンティブの列挙を行い,列挙されたインセンティブをマズローの欲求段階に従って,自己実現欲求に相当するインセンティブ・承認欲求に相当するインセンティブ・安全欲求や生理的欲求に相当するインセンティブの３つに整理した。整理したインセンティブから人間の心の中でどのように作用しているかを表すモデルを作成し,議論を行なった。外発的動機付けに関しては消極的なほど理性が感情を抑え込み,理性だけがモチベーションを向上させ,内発的動機付けに関しては具体的なほど外発的なインセンティブの要因が強く,概念的なほど理性や感情といった内発的インセンティブの要因が強くなることがまとめられた\cite{game3}。

\subsection{ゲーミフィケーションにおける構成要素の有用性に関する研究}
安政駿らの研究では,時間・レベル・ポイントなど情報の可視化がゲーミフィケーションの重要な本質の一つであると捉え,任意の作業に関してユーザの行動に伴う各種指標を数値化しゲーム性を付け加えることを可能にする視野拡張トレーニングシステムを実装した。具体的には,ブラウザ上で行う作業と連動し,その結果や進行具合,所要時間の数値化を行うことでゲーム性を加えるためのモジュールを開発した。また,このような数値化を行ったデータをゲーム性を持つ手法に取り込んだ時,手法自体にどの程度の効果が出るのかを検証した。検証の中では,ゲーミフィケーションの効果をあげたい機関によってユーザーのタスクに関するモチベーションの維持に関わる要因が変化すると考え,ゲーミフィケーションを応用する際に目標とする期間を即時的・短期的・中期的・長期的の四つに分類して実験を行った。ゲーミフィケーションの構成要素の有効性を検証していく上で,ユーザの行動基準の可視化が作業効果の向上につながることが示唆された\cite{game4}。

\section{関連研究での課題点}
2.2.2の関連研究より，ゲーミフィケーションは「ゲーム要素」を取り入れることで感情的エンゲージメント\footnote{興味，退屈，不安，楽しさといった学習者の感情的反応に関する概念。ここでは怒りや悲しみではなく感動，喜び，楽しさを表す。}\cite{engagement}に訴えかけることで，人々の動機づけとエンゲージメントを高め行動変容を促すものであることが報告された。しかし，人間の動機づけは多種多様でありゲーミフィケーションを利用する際には，ユーザの動機づけや行動特性について十分に理解し，目的ごとにフィットするものをデザインする必要があることが課題点として挙げられた。


\chapter{ゲーミフィケーションを用いたプログラミング教材の提案} 
本章では，2.2.1節で挙げたゲーミフィケーション要素を用いた関連研究を元に，課題点の解決を図る本研究のシステム内容を定義する。
\section{関連研究からの考察}
2.2節,2.3節より，ゲーミフィケーションを用いる目的達成を図る場合は目的達成に適したゲーミフィケーション要素を選択し，システム作成を行う必要がある。ゲーミフィケーション要素の一つ一つがどのような効果を持っているのかを知ることはいままでゲーム性を持っていなかったコンテンツにゲーム性を組み込む際の一つの指標になると考えられる。これはこれからゲーミフィケーションを用いようとしている人々に対して意義のあることである。また,各ゲーミフィケーション要素における効果性を把握することによって、パフォーマンスを向上させたいときや複数回同じコンテンツを行わせたいときなど、仕掛ける側が目的とする状況に応じてどのような要素を取り入れることが最適なのかが把握できる。また、要素を組み込んだ際にどのような効果が発揮されなくなるのかということを明らかにでき、ゲーミフィケーション要素を取り入れる際に意味のある組み合わせを見つけ出すこともできると考えられる。

\section{ゲーミフィケーション要素}
本研究では,システム作成の際に使用するゲーミフィケーション要素に関連研究の福山佑樹らの研究\cite{game1}で用いられているゲーミフィケーション要素を使用する。福山佑樹らの研究で使用されているゲーミフィケーション要素は,教育学習における先行研究のDichevaら\cite{daicheva}のゲーミフィケーション要素を使用しており,本研究でもプログラミング学習のモチベーションの維持・向上を目的とした研究であるためこちらのゲーミフィケーション要素を使用する。関連研究の福山佑樹らの研究で用いられているゲーミフィケーション要素と要素の内容を表3.1に示した。本研究では表3.1に示したゲーミフィケーション要素を使用する。
\begin{table}[H]
  \caption{ゲーミフィケーション要素一覧}
  \label{table:youso}
  \centering
  \begin{tabular}{l|l|l}
    \hline
    デザイン原則区分 &要素 &  要素の内容  \\
    \hline  \hline
 &  ゴールと挑戦 & 各ステージにおけるクリアすべき課題が設定されている \\
  &  個別化  & 個別に区分できるフィールドがある \\
  &即時フィードバック  & 常時可視化されたフィードバックがある \\
 &  可視化されたステータス &  各ステージの成績などが示される \\
 &  随時追加されるコンテンツ &  コンテンツが随時追加される \\
 &  選択の自由 &  学ぶステージやステージ内の解答を選べる \\
  &  失敗の自由 &  間違えても何度もやり直すことができる \\
  &  ストーリーライン &  ストーリー制を持つ \\
  &  時間制限 &  解答に対して時間制限を設ける \\
  &  チュートリアル &  使い方を示す \\
 &  社会的参加 &  コンテンツ外の社会的要因に関する \\
         \hline 
       ゲームメカニズム区分 & &    \\
                \hline \hline
  &  ポイント制 &  成績をポイントで示す\\
 &  バッジ制 &  成績やクリアでバッジを獲得できる \\
  &  レベル制 &  クリアするとレベルが上がる \\
  &  リーダーボード &  ランキングでの成績の掲載 \\
  &  アバター &  自身とアバターを重ねる \\
    \hline
  \end{tabular}
\end{table}

\section{要素を使用する期間}
本研究では,安政駿らの研究\cite{game4}で使用されているゲーミフィケーション要素を応用する際に目標とする期間の分類を使用する。安政駿らは,ゲーミフィケーション要素を応用する際に目標とする期間によって即時的・短期的・中期的・長期的の4つに分類した。また,4つの期間の分類がゲーミフィケーション要素を適用するには効果を上げたい期間によってユーザのタスクに対するモチベーションの維持に関わる要因が変化すると考えられ,ゲーミフィケーションを応用する際に目標とする期間によって,即時的・短期的・中期的・長期的の4つに分類することとした。4つの期間の具体的な目的は以下の通りである。3.2節で示した表3.1のゲーミフィケーション要素と4つに分類された期間を表3.2に対応させた。対応させる際には,時間制限が即時的なゲーミフィケーション要素として入っているが,プログラミング言語を学ぶ際に時間制限の存在はモチベーション向上の逆効果であると考えたため実験の項目からは外す。また,ストーリーライン・チュートリアル・社会的参加は4つの分類に分けられない項目であると考えたため今回は除外する。
 \\
      \begin{itemize}
      \item 即時的：作業中の効果の向上が目的
      \item 短期的：１タスク内での効果の向上が目的
      \item 中期的：１か月程度の継続的な来訪が目的
       \item 長期的：一年以上モチベーションを向上させることを目的          
\end{itemize}

     \begin{table}[hbtp]
  \caption{要素と期間の対応表}
  \label{table:kikan}
  \centering
  \begin{tabular}{l|l|l}
    \hline
    適応期間& ゲーミフィケーション要素 \\
    \hline \hline  
 \textbf{即時的}  & \textbf{即時フィードバック・失敗の自由・時間制限}  \\
  \hline 
   \textbf{短期的} &   \textbf{可視化されたステータス・選択の自由} \\
  \hline 
中期的 & ポイント制・バッジ制・レベル制・個別化・ゴールと挑戦    \\
\hline 
 長期的 & アバター・随時追加されるコンテンツ・リーダーボード  \\
    \hline
  \end{tabular}
\end{table}


\section{使用する要素と手法の提案}
関連研究により得られた知見を活用し，3.2節で記述したゲーミフィケーション要素を取り入れた手法を提案する。本研究では,実験の際にはゲーミフィケーションを応用する際に目標とする期間の即時的・短期的に当てはまるゲーミフィケーション要素を使用する。そのため,本研究ではゲーミフィケーション手法は,何度もやり直して解答が可能・問題選択の自由・時間表示・結果表示を使用する。以下にゲーミフィケーション手法を表示する。また,3.1節で表記したゲーミフィケーション要素とゲーミフィケーション手法の比較を表3.2に示した。

    \begin{enumerate}
      \setlength{\itemsep}{0.4cm} % 項目間
        \item 達成度の可視化\\
        学習者が問題に正解するとその正当数が達成度に追加されていき,達成度は常に見ることができる。\\
        これにより，学習者は自身の現状の学習量を確認することができ，自身の学習の不測量を認識できる。
         \item 達成度による称号の獲得\\
         達成度がある程度の数値に到達すると,称号が獲得できる。\\
         これにより，学習者は学習を進める動機づけがしやすくなる。
        \item 何度もやり直して解答が可能\\
        解答を何度間違えてもやり直すことができる。\\
        これにより，学習者は反復学習を行うことができ，より深い学習の理解につながる。
        \item 他の学習者の名前と達成度を提示する\\
        自身の達成度を誰でも見ることができる。\\
        これにより，学習者は競争心が湧き，学習を進める動機づけにつながる。
        \item プロフィール設定が可能\\
        名前やコメントの設定ができる。\\
        これにより，学習者は他の学習者との違いを出すことができる。
        \item ランキング制度\\
        達成度の違いからうまれるランキングを確認できる。\\
        これにより，学習者は競争心が湧き，他の学習者よりもを行うようになるという動機づけにつながる。
        \item 時間制限が含まれている課題の搭載\\
        解答時間に制限を設けた問題を解くことができる。\\
        これにより，学習者は一つの問題に集中して取り組むことができる。
        \item 自身のプロフィールにアバターの付与\\
        キャラクターを自由に選び,アバター指定できる。\\
        これにより，学習者は自身のプロフィールの変化を楽しむことができる。
        \item 講義後に講義内容の問題追加\\
        新しい内容の問題が講義ごとに追加される。\\
        これにより，学習者は学習に飽きることなく進めることができる。
        \item 問題選択の自由\\
        どの問題も自由に選択することができる。\\
        これにより，学習者は特定の問題につまづいても別の問題を進めることができる。
         \item 時間表示\\
        作業における時間の把握ができる。\\
        これにより，学習者は自身がどれくらいの時間の間学習したかわかり学習を続けやすくなる。
         \item  結果表示\\
        　作業を行った結果をそのままの形で把握できる。\\
        これにより，学習者は次の作業に対する行動基準・学習基準を持つことができる。
    \end{enumerate}
    
    \begin{table}[hbtp]
  \caption{手法と要素の比較一覧}
  \label{table:youso2}
  \centering
  \begin{tabular}{l|l|l}
    \hline
    & ゲーミフィケーション手法 &  ゲーミフィケーション要素  \\
    \hline \hline  
 1 &達成度の可視化 & ポイント制・レベル制 \\
  \hline 
  2 & 達成度による称号の獲得  &  ゴールと挑戦・バッジ制\\
  \hline 
3 & 何度もやり直して解答が可能 &  失敗の自由 \\
\hline 
 4 & 他の学習者の名前と達成度を提示する &  リーダーボード \\
 \hline 
5 & プロフィール設定が可能 &  個別化・アバター \\
\hline 
6 & ランキング制度 &  リーダーボード・ゴールと挑戦 \\
\hline 
7 & 時間制限が含まれている課題の搭載 &  時間制限 \\
\hline 
8 & 自身のプロフィールにアバターの付与 &  アバター・個別化 \\
\hline 
9 & 講義後に講義内容の問題追加 &  随時追加されるコンテンツ \\
\hline 
10 & 問題選択の自由&  選択の自由 \\
\hline 
11 & 時間表示&  即時フィードバック \\
\hline 
12 & 結果表示&  可視化されたステータス \\
    \hline
  \end{tabular}
\end{table}


\section{システム提案}
本研究で作成するシステムは，学習者がWebサイト上でクイズ形式学習機能とコード記入型学習機能を利用しプログラミングの自学習を行うものとする（図3.1）。クイズ形式学習機能では，プログラミング基礎をWebサイト上でクイズ形式で学習することができ，自身でプログラミング基礎に関するクイズの作成も可能である。コード記入型学習機能では，学習者がWebサイト上でプログラムのコードを書いて問題を解くことが可能である。
\begin{figure}[hbtp]
\centering
\includegraphics[width=16cm]{system-all.png}
\caption{システム全体概要図}
\end{figure}

   
      
\chapter{システム設計} 
本章では，第3章で挙げたゲーミフィケーション手法の説明に先立ち，システムをクイズ形式学習機能とコード記入型学習機能の2つに分類する。

  \section{本システム全体設計}
本システムは，Webアプリケーション上で動かす。Webアプリケーション上にはクイズ形式学習機能の画面とコード記入型学習機能ごとに画面を用意する。また,２つの機能にはそれぞれの機能に合わせたWebアプリケーション作成ではRuby on Railsを利用して機能を増やしていく。データの保存では、sqlite3を利用する。3.4節より,本研究ではゲーミフィケーション手法の,何度もやり直して解答が可能・問題選択の自由・時間表示・結果表示を使用して実験を行う。しかし,システム上にはランキング設定やプロフィール設定など他のゲーミフィケーション手法も実装し,システムの実用化も行えるように設計する。システムの中で実装した本研究実験で使用しないゲーミフィケーション手法は,開発者側で実験の際には取り外せるようにする。

   \section{システム選択画面の設計}
   システム選択画面ではランキング制度，プロフィール設定，アバターの付与，達成度の可視化が行えるようにした。また，システム選択のUI画面は図4.1に示した。
          \begin{figure}[H]
\centering
\includegraphics[height=12cm]{2022-11-22-R-2.png}
\caption{システム選択UI画面}
\end{figure}
   
     \subsection{システム選択画面使用要素}
   本機能画面で利用したゲーミフィケーション手法を以下に示した。
      \begin{itemize}
      \item 達成の可視化
      \item 他の学習者の名前と達成度を提示する
      \item プロフィール設定が可能 
       \item ランキング制度
       \item 自身のプロフィールにアバターの付与
       \item 問題選択の自由           
\end{itemize}
    
\section{クイズ形式学習機能画面の設計}
 クイズ形式学習機能は，プログラミング言語であるRubyを学習内容の主体としたクイズを学習者が解いていく機能である。 クイズは全てで30問用意し,実験のためにクイズの選択を自由にできる機能とランダムでクイズが表示されていく機能を作成する。本機能のフローは図4.2に示した。
 \\
            \begin{figure}[H]
\centering
\includegraphics[width=15cm]{quiz.png}
\caption{クイズ形式学習機能概要図}
\end{figure}
 \subsection{クイズ形式学習機能使用要素}
 本機能画面で利用したゲーミフィケーション手法を以下に示した。
   \begin{itemize}
      \item 達成の可視化
      \item 何度もやり直して回答が可能
      \item 問題選択の自由   
       \item ランキング制度         
\end{itemize}


 \section{コード記入型学習機能画面の設計}
  コード記入型学習機能は，プログラミング言語であるRubyを学習内容の主体として学習者自らがサイト上でプログラミングのコードを打ち，課題に取り組んでいく機能である。学習者の自学習の際にトライ\&エラーを何度も実行する演習を行なっていくことでプログラミング言語の学習の深い理解を目的としている。実験のためにコードの記入の後に回答を修正できる機能と修正できない機能を作成する。本機能のフローは図4.3に表示した。
            \begin{figure}[H]
\centering
\includegraphics[width=15cm]{code.png}
\caption{コード記入型学習機能概要図}
\end{figure}

  \subsection{コード記入型学習機能使用要素}
  本機能画面で利用したゲーミフィケーション手法を以下に示した。
  \begin{itemize}
      \item 達成の可視化
      \item 達成による称号の獲得
      \item 何度もやり直して回答が可能
      \item 時間制限が含まれている課題の搭載
      \item 講義後に講義内容の問題追加
      \item 問題選択の自由             
\end{itemize}
  
  \chapter{システム開発} 
  本章では,クイズ形式学習機能とコード記入型学習機能のシステムの開発を行う。  

    \section{システム全体の開発}
    本システムはをRbuy on Railsを使用して機能の作成を行なっていく。

         \section{開発環境}
         開発環境を以下に示す。
    \begin{itemize}
        \item サーバーサイド
            \begin{itemize}
        \item Ruby(version 3.1.2)
   		 \end{itemize}
    \end{itemize}
    \begin{itemize}
        \item  クライアントサイド
            \begin{itemize}
        \item  HTML(HyperText Markup Language)
        \item CSS3
        \item JavaScript(ES2022)
    \end{itemize}
                \item  フレームワーク
            \begin{itemize}
        \item  Ruby on Rails(version 7.0.3)
    \end{itemize}
		  \item データベース
		  \begin{itemize}
        		\item sqlite3 - 3.38.2
   		 \end{itemize}
            \end{itemize}
           

 \section{クイズ形式学習機能}
 本節では,クイズ形式学習機能の画面とそれに含まれる機能を説明する。
 
  \subsection{クイズ形式学習機能の概要}
クイズ形式学習機能は，プログラミング言語であるRuby言語についてのクイズを30問用意し,そのクイズに学習者自身が本研究システム上で回答していくという機能である。クイズ形式学習機能には,実験のためにクイズの選択を自由にできる機能とランダムでクイズが表示されていく機能の二つを作成した。また,クイズ回答後の成績発表も付けるか付けないか選べるように作成した。

   \subsection{クイズの内容}
     クイズの問題は30問用意した。問題ないようには「基礎プログラミングI・I\hspace{-1.2pt}I」で使用している東北公益文化大学教授が作成したWebページ参考書から抜粋したものを使用する。以下は実際のクイズ形式学習機能から抜粋した問題である。
         \begin{itemize}
        \item print()の処理方法は？
            \begin{itemize}
        \item ()内の文字列を出力できる
                \item ()内の文字列を出力して、最後に改行が追加される
                        \item キーボードで打ち込んだ文字を取り出す
   		 \end{itemize}
    \end{itemize}
    \begin{itemize}
        \item  getsの処理方法は？
            \begin{itemize}
        \item  キーボードで打ち込んだ文字を取り出す
        \item コメント文にする
        \item 対応する値を整数の文字列に置き換える
    \end{itemize}
                \item  redoの処理内容は？
            \begin{itemize}
        \item  処理を中止して、ループを終わらせる
        \item 条件を判断せず、処理を最初からやり直す
        \item 処理をスキップして、次のループに移る
    \end{itemize}
		  \item forの処理方法は？
		  \begin{itemize}
        		\item 配列や範囲などの複数の間を順に変数に代入する
		\item 配列の要素を小さい順に並べ替えた結果を返す
		\item 配列の末尾に要素を追加する
   		 \end{itemize}
            \end{itemize}
           
     
   \subsection{クイズ形式学習機能の開発}
   クイズ形式学習機能の開発には,Ruby on RailsとJavaScriptを使用した。本研究システムではJavaScriptでローカルストレンジを利用して実験に使用するページ間共有ができるタイマーなどの機能を掲載したためクイズシステムもJavaScriptでの開発としている。
   
              \begin{figure}[H]
\centering
\includegraphics[width=14cm]{quiz-question.png}
\caption{クイズ出題画面}
\end{figure}

            \begin{figure}[H]
\centering
\includegraphics[width=14cm]{quiz-answer.png}
\caption{クイズ終了画面}
\end{figure}

 \section{コード記入型学習機能}
 本節では,コード記入型学習機能の画面とそれに含まれる機能を説明する。
  \subsection{コード記入型学習機能の概要}
コード記入型学習機能は，プログラミング言語であるRuby言語に関するコード記述問題を解いていく機能である。本機能では,実験のためにコードの記入の後に回答を修正できる機能と修正できない機能を作成する。

   \subsection{学習問題の内容}
     問題内容は,東北公益文化大学が「基礎プログラミングI・I\hspace{-1.2pt}I」で使用してる教授が作成したWebページ参考書の中にある問題を少し変えて出題する。実際のコード記入型学習機能から抜粋した問題の例には「猫の鳴き声を文字列で出力するプログラムを作ってください。」「配列likeの中に自分の好きなものを値として３つ入れて、文章がprintfで表示されるようにプログラムを作ってください。」がある。
     
   \subsection{コード記入型学習機能の開発}
      クイズ形式学習機能の開発には,Ruby on Railsを使用した。クイズ形式学習機能に関する情報は全てデータベースに保存する。問題に対する回答に関しては，1 つの問題に対して複数の人が回答するため，回答を保存して置けるようにテーブルを作った。また,クイズ形式学習機能ではコードの記入の後に回答を修正できる機能と修正できない機能の２種類を作るため,回答を保存・修正・削除できるようにした。
   
              \begin{figure}[H]
\centering
\includegraphics[width=14cm]{code-input.png}
\caption{コード記入型問題出題画面}
\end{figure}

            \begin{figure}[H]
\centering
\includegraphics[width=17cm]{code-pg.jpg}
\caption{みんなの回答表示画面}
\end{figure}


    \section{予備実験}
 本研究では,予備実験として東北公益文科大学が実施している小学5年生から中学3年生を対象としたプログラミング学習を目的とした塾である「ジュニアドクター鳥海塾」の塾生38名に本システムを使用してもらいその効果を考察してもらった。「ジュニアドクター鳥海塾」ではRuby言語を学習の主体としており,毎週土曜日の本講義と週3回19:00-21:00の補講でプログラミングを教えている。本システムはプログラミングを学んでいる学習者に向けたシステムであるため,実験時にプログラミングの学習頻度のアンケートも取り入れ被験者のプログラミング学習頻度も調べる。実験では,システム5分間を利用してもらった後にアンケート記入をしてもらい38名のシステム利用者のうち32名がアンケート記入を行った。
 
     \subsection{予備実験結果}
アンケートの結果,1日に家でプログラミングの勉強を30分以上するのが75\%,１週間に家でプログラミング勉強をしている人が65.6\%いた。そのため,今回の実験被験者として相応しいという結論になった。またアンケートの結果,システムの実証が確認された。システムの感想として肯定的な意見では「自分も負けないように諦めないで取り組めたから。」「応用問題皆の回答一覧で皆がどんな答えをしているのかが見えることが良い」「自分のスコアが表示されてあって毎日アプリを開きたくなるから良い。」という意見があった。改善点を挙げた意見には,「なんとなく楽しさが足りないと思う。」「回答するときに選択するやり方が分かりづらかった。」「回答の選択肢が同じ並びだったからそこもランダムにしたらいいと思う。」という意見があった。アンケート項目と結果は以下の通りである。
       
            
                  \begin{figure}[H]
\centering
\includegraphics[width=13cm]{1day-graph.png}
\caption{1日のプログラミング勉強時間グラフ}
\end{figure}

      \begin{figure}[H]
\centering
\includegraphics[width=13cm]{1week-graph.png}
\caption{１週間の家でのプログラミング勉強時間グラフ}
\end{figure}

      \begin{figure}[H]
\centering
\includegraphics[width=13cm]{homework-graph.png}
\caption{宿題提出グラフ}
\end{figure}

                  \begin{figure}[H]
\centering
\includegraphics[width=12cm]{yokatta.png}
\caption{システム感想}
\end{figure}

 \subsection{予備実験からの考察・システム改良}
 「ジュニアドクター鳥海塾」での予備実験を経て,考察とシステム改良を行った。改善点の意見には,「なんとなく楽しさが足りないと思う。」「回答の選択肢が同じ並びだったからそこもランダムにしたらいいと思う。」という意見があったがそれらの意見を踏まえ,クイズの問題数を増やしランダムにした。また,「回答するときに選択するやり方が分かりづらかった。」という意見を反映し,画面のデザインをわかりやすくした。
 
 

\chapter{システムの実験・検証}
本章では，本システムを利用し実験・検証を行う。
  
   \section{実験・検証概要}
   本研究では,３つの検証・実験を行った。1つ目は東北公益文科大学が実施している「ジュニアドクター鳥海塾」の塾生38名に本システムを使用してもらいその効果を考察してもらう実験,2つ目は「基礎プログラミングI・I\hspace{-1.2pt}I」で本システムとゲーム要素のない教材の両方を使用してもらいその効果を図る実験,3つ目は自身が所属している研究室の大学生10名に本システムを使用してもらいゲーミフィケーション要素の効果を図る実験である。(最初から実験は複数回やることを想定していたかのように書く)
 
 
     \section{基礎プログラミングI・I\hspace{-1.2pt}Iでの実験}
     本実験では,
      \begin{figure}[H]
\centering
\includegraphics[width=13cm]{jikkenn.png}
\caption{実験内容概要図}
\end{figure}

\subsection{実験使用資料} 
本実験で使用したゲーム要素のない教材は以下である。(紙のpdfを載せる)

          \subsection{実験結果} 
     ああああ
     
     
     \section{ゲーミフィケーション要素の効果の検証}    
    本実験では,本研究で作成したシステムを使用して「1 タスク内の作業回数」と「作業時間」の二つの指標を作成することで検証を行う。また、アンケートの結果からユーザの構成要素の有無による非ゲームコンテンツへの取り組み方の違いを明らかにすることによって、有効性の検証を行う。時間はかかった所要時 間の平均値、継続回数はタスク内の作業数の平均値、 タスク数はトレーニングを行った延べ人数を示す。実験では、今回使用するゲームの構成要素を一つづつ組み合わせたものを使用して実験していくため4回使用してもらう。その後毎回アンケートに記入してもらう。また,アンケート内容例を以下に記した。アンケートは4個のゲーミフィケーション要素の実験に合った内容のものを4個作成した。
  \begin{itemize}
      \item 時間表示があるシステムはプログラミング学習の継続にどのくらい効果があると感じましたか？
      \item 時間表示があるシステムで学習を続けていきたいと思いましたか？
      \item 時間表示がある学習システムにはどのくらい興味を持ちましたか？    
\end{itemize}    
    

 \subsection{検証条件}
 本研究では,3.3節で示した即時的・短期的・中期的・長期的の4つの分類から即時的・短期的の二つの分類に当てはまるゲーミフィケーション要素を使用した実験を行う。即時的・短期的の二つの分類に当てはまるゲーミフィケーション要素は太文字で表示されている。
     \begin{table}[hbtp]
  \caption{要素と期間の対応表}
  \label{table:kikan2}
  \centering
  \begin{tabular}{l|l|l}
    \hline
    & ゲーミフィケーション要素 &  運営側の構成要素  \\
    \hline \hline  
 \textbf{即時的}  & \textbf{即時フィードバック(継続時間の表示)・失敗の自由}&  \\
  \hline 
   \textbf{短期的} &   \textbf{可視化されたステータス・選択の自由}  &   \textbf{ゴールと挑戦(課題設定)}\\
  \hline 
中期的 & ポイント制・バッジ制・レベル制・個別化 &   \\
\hline 
 長期的 & アバター・随時追加されるコンテンツ &  \\
    \hline
  \end{tabular}
\end{table}

     \subsection{検証結果} 
    
\chapter{結論}
本章では,本研究に対する実験結果・検証結果からの結論を記す。
     \section{評価}
     本研究で開発したシステムによって，地域住民などの今まで Web ページ作成に参加していなかった人が自
宅などの個々の環境から編集作業に参加することでき，住民が保有しているまだ公表していない情報を使用し
たコンテンツ作成を可能とした。この結果から本システムを利用することで，観光地域づくりに必要とされて
いる「地域の魅力を積極的に発信する」という課題の一つの解決策として考察した「地域住民参加による Web
ページ作成」を達成するに値すると評価する。(自分の文に変える)

     \section{今後の展望}
     今回は観光地の紹介に特化したデザインの Web ページを作成するシステムを開発したが，現在固定されて
いるタイトルやデザインの変更も行うことができるシステムに変更することで，多人数の同時編集 Web ペー
ジ作成システムとして他分野での活用も期待できる。そのため，コンテンツ内容の編集だけではなく，ページ
全体の要素の変更も同様に行えるシステムの開発を目指す。また現在は Web ページを閲覧する際，コンテン
ツ内容の読み込みに時間がかかったり，閲覧するデバイスによってデザインが崩れてしまったりなどの問題も
発生している。これらの閲覧時の満足度に関する項目を修正することにより，発信者から閲覧者への情報提供
を円滑に行えるシステムを目指す。
	クイズ形式学習機能とコード記入方学習機能は完成した。今後は,調査の結果から本システムのゲーミフィケーション要素によって自学習の頻度や時間は増えたのかという結果を得る予定である。(自分の文に変える)
	
\chapter*{謝辞}
本研究の遂行にあたり，指導教官として終始多大なご指導を賜った，広瀬雄二教授には，本研究の技術指導
や論文の執筆にあたり多大なご協力を賜りました。ここに深謝の意を表します。並びに広瀬研究室の皆様と
は，本研究の遂行にあたり多大なご助言，ご協力頂きました。ここに感謝の意を表します。

\begin{thebibliography}{}
\bibitem{naikaku} 内閣府."Society 5.0".\url{https://www8.cao.go.jp/cstp/society5_0/},(参照 2022-7-05) .
\bibitem{monbu} 文部科学省."小学校プログラミング教育の手引(第三版)".\url{https://www.mext.go.jp/content/20200218-mxt_jogai02-100003171_002.pdf},(参照 2022-7-05) .
\bibitem{gakusyutien}堀口悟史, 井垣宏, 井上亮文, 山田誠, 星徹, 岡田謙一. "講義資料閲覧ログを用いたプログラミング講義進捗管理手法の提案". 情報処理学会論文誌, 2012, No.1, p.61-71, \url{http://id.nii.ac.jp/1001/00079945/}.
\bibitem{scratch} MIT."SCRATCH".\url{https://scratch.mit.edu/},(参照 2022-11-20) .
\bibitem{nihongo} 岩本穣志. “日本語授業における、ゲーミフィケーションを用いた学習意欲向上の試み”. 日本語教育方法研究会誌, 2017, No.1, p.8-9, \url{https://doi.org/10.19022/jlem.24.1_8}.
\bibitem{sdgs} 薮内一葉, 平本督太郎. “SDGsゲーミフィケーション教材を用いたプロソーシャルモチベーション向上のための手法に関する研究”. Beyond SDGs イノベーション研究, 2022, No.3, p.14-28, \url{https://doi.org/10.51097/bsir.3.3_14}.
\bibitem{ninjacode-site} 忍者CODE."あなたのコードが未来を灯す".\url{https://ninjacode.work/},(参照 2022-12-5) .
\bibitem{progate-site} Progate."Progate｜プログラミングの入門なら基礎から学べる Progate[プロゲート]".\url{https://prog-8.com/dashboard},(参照 2022-12-5) .
\bibitem{daicheva}
\newblock {\em Dariana Dicheva, Christo Dichev,\\Gennady Agre\& Galia Angelova.}
\newblock {\em “Gamification in Education:A Systematic Mapping Study”.}\url{https://www.researchgate.net/publication/270273830_Gamification_in_Education_A_Systematic_Mapping_Study}, (参照 2022-11-15) .
\bibitem{game1}  福山佑樹, 床鍋佳枝, 森田祐介. “ゲーミフィケーション要素を取り入れた小学校1年生向け電子教材の実践と評価”. デジタルゲーム学研究, 2017, No.9, p.31-40, \url{https://doi.org/10.9762/digraj.9.2_31}.
\bibitem{game2}藤田美幸, 塚本麻紀.“ゲーミフィケーションを活用したモバイル・ヘルスケアサービス：ドコモ・ヘルスケア「歩いておトク」を事例として”. 日本情報経営学会誌, 2018, No.3, p.74-82, \url{https://doi.org/10.20627/jsim.38.3_74}.
\bibitem{game3}西康晴, 片山豊, 八木広行, 高橋宗雄, 誉田直美, 中條貴幸. “ソフトウェアプロジェクト管理における技術者のモチベーションに関する研究”. プロジェクトマネジメント学会誌, 2001, No.3, p.33-39, \url{https://doi.org/10.14914/spmj.3.3_33}.
\bibitem{game4}安政駿, 手塚太郎. “ゲーミフィケーションにおける構成要素の有用性の検証”. プロジェクトマネジメント学会誌, 2001, No.3, p.33-39, \url{https://doi.org/10.14914/spmj.3.3_33}.
\bibitem{engagement}梅本貴豊, 伊藤崇達, 田中健史朗. “調整方略，感情的および行動的エンゲージメント，学業成果の関連”. 心理学研究, 2016, No.87, p.334-342, \url{https://doi.org/10.4992/jjpsy.87.15020}.
\bibitem{websocket}鈴木啓真, 兼子正勝. “WebSocketを用いたリアルタイムなWebデスクトップ共有”. 情報処理学会第77回全国大会講演論文集, 2015, No.1, p.153-154, \url{http://id.nii.ac.jp/1001/00165177/}.
\end{thebibliography}


\end{document}