%#!platex -kanji=%k
%#DVIPDF dvipdfmx -f ipa.map
\documentclass{jsbook}%\documentclass{文書の種類}TeXファイルの先頭に配置して，文章の種類を定めます。jbook書籍。
%\pagestyle{empty}
\usepackage[dvipdfmx]{graphicx}%パッケージの利用
%\usepackage{listings, jlisting}
%\usepackage[sectionbib]{chapterbib}
\usepackage{ascmac}
\usepackage[twoside,inner=30truemm,outer=20truemm]{geometry}
\usepackage{url} % 文中にURLを書くときは \url{} で括る
\usepackage{tabularx}
\geometry{textwidth=160mm, textheight=225mm}%レイアウト
\renewcommand{\bibname}{参考文献}%\renewcommand{\好きな名前}{何かの出力}
\title{観光振興を目的としたクイズ作成システムの提案}
\author{広瀬研究室4年\\C1201871 富樫雄斗}
\date {令和6年1月11日}
\begin{document}
\maketitle
\begin{center}
{\bfseries 概要}
\end{center}
山形県庄内地域では人口が減少しており，過疎地域でもその傾向が見られる。しかし，そこには先人たちの優れた公益活動と歴史や風土があり，今でも自主的な地域づくり活動が行われているため，その土地特有の地域資源の発信が欠かせなくなっている。各地では市民参加のまちづくりは急速に広まりつつあり，歴史的環境の保全活動，公共施設のデザイン，商店街の活性化，町並み景観づくりなど，多く取り組まれている。まちづくり情報を編集して発信していくためには，意識的な記録・整理と目標や状況に応じた編集を行い，発信する媒体を適切に選ぶ必要がある。近年，デジタル化での効率化と収集データの分析によるビジネス戦略の再検討といった変革を行う，観光デジタルトランスフォーメーションが推進されている。旅の魅力がさらに高まり旅行者や地域をより豊かにすることができるが，これらを扱う上では情報技術に対する専門的な知識が必要になってくる。そこで本研究では観光振興を目的とし，Webページの専門的な知識がない人でも編集可能なクイズ作成システムを提案する。それにより地域に対する理解を深め，観光地の自然，文化，食，歴史などに興味を持ってもらうことを目指す。（503文字）
% 目次
\tableofcontents
\chapter{はじめに}
本章では研究の背景をまとめ，それを踏まえた目的について説明する。
\section{背景}
山形県庄内地域では人口が平成27年から令和2年までの間に279497人から263404人に減少しており，うち過疎地域は181961人から170360人に減少している\cite{yamagataken}。しかし，そこには先人たちの優れた公益活動と歴史や風土があり，今でも地域住民の自主的な地域づくり活動が行われているため，その土地特有の地域資源の発信が欠かせなくなっている。
各地では市民参加のまちづくりは急速に広まりつつあり，歴史的環境の保全活動，密集市街地における防災まちづくり，公共施設のデザイン，商店街の活性化，町並み景観づくりなど，多く取り組まれている\cite{shigeru}。まちづくり情報を編集して発信していくためには，意識的な記録・整理と目標や状況に応じた編集を行い，発信する媒体を適切に選ぶ必要がある。
近年，デジタル化での効率化と収集されるデータの分析によって，ビジネス戦略の再検討や新たなビジネスモデルの創出といった変革を行う，観光デジタルトランスフォーメーションが推進されている\cite{kankocho}。旅の魅力がさらに高まり旅行者や地域をより豊かにすることができるが，これらの取り組みを扱う上では情報技術に対する専門的な知識が必要になってくる。
以上のことから，地域の魅力を効果的に伝えられる，観光振興を目的としたクイズ作成システムを構築する。ここで，クイズを選択した理由として，観光地の内容が記憶に残りやすく幅広い世代に伝えることができるためである。
\section{目的}
本研究では，Webページの専門的な知識がない人でも編集可能なクイズ作成システムを提案する。それにより地域に対する理解を深め，観光地の自然，文化，食，歴史などに興味を持ってもらうことを目指す。
% 章の始めにリード文としてこの章で何をどういう順番で述べるかを入れる。
% 2章では先行研究をとりあげ，身近な問題ではどうするかまで述べる。
\chapter{先行研究と類似サービス}
本章では先行研究と類似サービスを挙げてその課題について考察する。
\section{先行研究}
観光分野にクイズを活用している事例を取り上げる。
\subsection{ご当地グルメを題材としたクイズの事例}
王らは，全国各地の地域活性化に貢献することを目的とし，旅の感覚を味わえるアプリケーションを提案した\cite{wang}。まずゲーム開始時に初期所持金が与えられ，これを0円にすることをゲームの終了条件とした。クイズモードで4択クイズを解き，正解であればノンクイズモードに遷移し関連する観光情報を提示する。このモードにおいてグルメやグルメに関連する場所を選択し，その対価の支払いによって所持金を減らすことができる。ご当地グルメ・コンテンツの情報源については，Wikipediaと旅行ガイドブックを使用している。
\subsection{クイズラリープラットフォームの事例}
明石らは，地域を自ら理解しようとする動機付けのためのクイズラリープラットフォームを提案した\cite{akashi}。ユーザが携帯端末を持ってスポットに訪れると詳細が表示され，クイズ・謎解き・立ち寄りのいずれかのタスクが提示される。このときスポットIDやユーザIDなどのログがデータベースに保存される。ポイントが貯まると進捗状況を可視化できるようタスクバーが伸びていき，プレゼントの応募券が得られる。プラットフォームではスポット編集に地点の情報，タスク編集にクイズの内容を入力してクイズラリーを作成する。
\section{類似サービス}
\subsection{QuizGenerator}
learningBOX株式会社では，誰でも無料でオリジナルのクイズや問題を作成できるツールを提供している\cite{learningbox}。択一問題や正誤問題，記述問題や並び替え問題などの形式で作ることができる。作成方法にはフォーム・テキスト・エクセルの3つがあり，限定公開か一般公開かも選べるようになっている(図.\ref{figure:quiz_generator})。
\begin{figure}[htb]
\centering
\includegraphics[width=15cm]{quiz_generator.png}
\caption{QuizGenerator}
\label{figure:quiz_generator}
\end{figure}
\subsection{Korette}
任意団体CuliVisionでは，ユーザ登録・クイズ作成・クイズ投稿の3ステップかつ無料でクイズを公開できるツールを提供している\cite{culiVision}。作成画面では問題文や選択肢，解説などクイズに必要な項目を入力する(図.\ref{figure:korette})。その他SNSシェア機能，Webウィジェット，QRコード発行も可能となっている。
\begin{figure}[htb]
\centering
\includegraphics[width=15cm]{korette.png}
\caption{korette}
\label{figure:korette}
\end{figure}
\section{事例の課題}
2.1節を踏まえ課題について考察する。
\begin{itemize}
\item Wikipediaの特徴として，膨大な量のコンテンツが掲載されているものの，不特定多数の人が記事を編集しているため，情報源としての信頼性に欠ける部分がある。
\item クイズのジャンルがご当地グルメに限られており，その他の分野で使用することができない。
\item 入力フォームがスポット編集とタスク編集に分かれている。
\item 緯度と経度については数字を入力する形式になっている。
\end{itemize}
\chapter{提案}
2.2節で挙げた先行研究の課題を解決できるシステムを構築する。また，システムの概要について流れとメリットを踏まえながら説明する。
\section{課題の解決案}
課題の解決で本システムに必要な案を以下のように定めた。
\begin{itemize}
\item デフォルトのクイズの情報源をガイドブックと公式Webサイトに限定する。
\item 自然や文化など様々な分野で適用できるようにする。
\item 編集画面と操作画面をそれぞれ1つの画面内に収める。
\item 緯度・経度はマップを直接クリックすることで取得できるようにする。
\end{itemize}
\section{システムの概要}
本システムではシステムの管理者側を地域住民，利用者側を観光客と定義し図.\ref{figure:conceptual_diagram}の流れで使用する。地域住民に地点の情報を編集してもらい，それを観光客が使用しクイズに解答していく。現地の人に追加してもらうことで理解が深まり，住んでいる地域に対して新しい発見も生まれる。
また，共同編集機能を設けることで，時間と場所を問わず複数人が同時に編集できるようにする。地点の場所をマップ上から選択し，クイズの内容を入力して地点の追加を行う。そして，マップとクイズがPCでは横に，携帯端末では縦に並び，使用するデバイスに適して表示される。
\begin{figure}[htb]
\centering
\includegraphics[keepaspectratio, width=320mm]{conceptual_diagram.pdf}
\caption{システムの時系列的な流れ}
\label{figure:conceptual_diagram}
\end{figure}
\chapter{システム設計}
システムの要件を定義し使用する技術を挙げる。
\section{要件定義}
システムとして複雑ではなく扱いやすくするための要件を定義する。
\begin{itemize}
\item 操作説明の常時確認\\
画面下部にマーカの追加方法やクイズの答え方について記載し，いつでも操作説明を確認できるようにする。
\item 専門的な知識を必要としない編集\\
地点の内容を入力したり選択したりすることによって，位置・説明・問題文などを追加できるようにする。ここでいう専門的な知識とは，Webページを作成したりプログラムを組み込んだりする際に必要な知識である。
\item 地点の詳細の表示\\
マップ上のマーカをクリックすることで，名称・概要・住所・URLがポップアップで見られるようにする。
\item 正解状況の反映\\
正解した問題のマーカを青から赤に変更し，ブラウザ上に情報を保存してリロードしても保持できるようにする。
\end{itemize}
\section{使用する技術}
本システムで使用する技術を以下の表にまとめる(表.\ref{table:used_technology})。この中で特に重要なものについて，作者，歴史，バージョン，使用例などを交えながら詳しく説明する。
\begin{table}[htb]
\caption{使用する技術}
\label{table:used_technology}
\centering
\begin{tabular}{|l|l|}
\hline
名称およびバージョン & システムで使用する箇所 \\\hline
HTML Living Standard & Webページの作成 \\\hline
CSS3 & Webページのデザイン \\\hline
JavaScript ES2023 & マップの動作やクイズの正誤判定 \\\hline
Leaflet 1.3.0 & マップ上のマーカの配置やポップアップ表示 \\\hline
OpenStreetMap & Webページ上で表示するマップのレイヤ \\\hline
Google Apps Script & 入力フォームの送信とデータの取得 \\\hline
Googleスプレッドシート & 地点とクイズのデータの保存 \\
\hline
\end{tabular}
\end{table}
\subsection{Leaflet}
Leafletとは，携帯端末で閲覧しやすく相互作用的なオープンソースJavaScriptライブラリである\cite{leaflet}。わずか約42KBで，ほとんどの開発者が必要とする全てのマッピング機能を備えている。もともとVolodymyr Agafonkinによって作成されたが，現在は寄稿者の大きなコミュニティによって開発されている。
マップをHTML上に埋め込む際は，表示したい周辺のマップになるよう中心とズームレベルを設定する(図.\ref{figure:edit_map})。タイルを複数設定すると，右上のひし形アイコンから地図を切り替えることができる。ここではOpenStreetMapと国土地理院のタイルを設定する。Leafletの機能として，ドラッグによるマップの移動やマウスホイールによる拡大・縮小ができる。
\begin{figure}[htb]
\centering
\includegraphics[width=10cm]{edit_map.png}
\caption{Leafletで生成したマップ}
\label{figure:edit_map}
\end{figure}
\begin{itembox}[l]{JavaScript Leafletによるマップの生成}
\begin{verbatim}
var editmap = L.map('editmap');
var mpoint = [38.5350, 139.8875];
editmap.setView(mpoint, 10);
// OpenStreetMapのタイルを設定
var osmTile = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://openstreetmap.org">
OpenStreetMap</a> contributors,'
});
// 国土地理院のタイルを設定
var gsiTile = L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution: '<a href="http://maps.gsi.go.jp/development/ichiran.html">
国土地理院</a>'
});
var marker = L.marker(mpoint).addTo(editmap);
osmTile.addTo(editmap);
var baseLayers = {'OpenStreetMap': osmTile, '国土地理院': gsiTile};
L.control.layers(baseLayers, null).addTo(editmap);
\end{verbatim}
\end{itembox}
\subsection{OpenStreetMap}
OpenStreetMapとは，誰でも自由に地図を使えるよう，みんなでオープンデータの地理情報を作るプロジェクトである\cite{openstreetmap}。サイトを表示させた状態でドラッグしたりホイールを回したりすることで表示位置の変更や拡大縮小を行え，印刷して使うなど商用利用もできる。
\subsection{Google Apps Script}
Google Apps Scriptとは，Googleの様々なアプリケーションを統合・自動化・拡張するビジネスソリューションを，手軽に構築するための唯一のローコードプラットフォームである\cite{appsscript}。HTML，CSS，JavaScriptを使うため，独自のフレームワークの知識を新たに身に付ける必要なく開発を行える。
\subsection{Googleスプレッドシート}
Googleスプレッドシートとは，データをリアルタイムで編集可能な表計算アプリケーションである\cite{spreadsheet}。GoogleフォームやGoogleスライドなど他のGoogleアプリケーションにシームレスに繋げられる。共同編集によって複数の人が同時に作業できることが大きな強みである。
\chapter{システム開発}
4章の要件定義を踏まえ本システムを設計する。前半は編集画面，後半は操作画面について説明する。
\section{緯度と経度の取得}
.latlng.latでマーカがある地点の緯度，.latlng.lngで経度を取得する。その緯度と経度をCSSで非表示にしたinput要素に代入し，入力フォームでの送信時に参照できるようにする。これらの操作をclickイベントにより，マップ上をクリックすることで行う(図.\ref{figure:edit_latlng})。
\begin{figure}[htb]
\centering
\includegraphics[width=10cm]{edit_latlng.png}
\caption{緯度と経度を取得するマーカ}
\label{figure:edit_latlng}
\end{figure}
\begin{itembox}[l]{JavaScript 緯度と経度を取得するマーカの設置}
\begin{verbatim}
function moveIcon(e) {
// クリックした地点の緯度と経度を取得
var clicklat = e.latlng.lat;
var clicklng = e.latlng.lng;
marker.setLatLng(e.latlng).bindPopup(
"緯度：" + clicklat + "<br>経度：" + clicklng
).openPopup();
// idがlatの値に緯度，idがlngの値に経度を代入
document.getElementById("lat").value = clicklat;
document.getElementById("lng").value = clicklng;
editmap.on('click', moveIcon);
}
\end{verbatim}
\end{itembox}
\section{Google Apps Scriptによる入力フォームの生成}
入力・選択する項目は，名称，概要，住所，WebサイトのURL，Google Driveの画像の共有URL，問題文，選択肢A〜C，解答とし，その下に入力内容の送信ボタンとリセットボタンを配置する。これらの情報をGoogle Apps Scriptで取得して，Googleスプレッドシートにデータを追加する(図.\ref{figure:edit_input})。
\begin{figure}[htb]
\centering
\includegraphics[width=10cm]{edit_input.png}
\caption{名称や問題文などの入力欄}
\label{figure:edit_input}
\end{figure}
\begin{itembox}[l]{Google Apps Script 入力した内容をGoogleスプレッドシートへ追加}
\begin{verbatim}
function doPost(e){
var sheet_url ="GoogleスプレッドシートのURL";
var sh = SpreadsheetApp.openByUrl(sheet_url);
//input要素の内容を取ってくる
var name = e.parameters.name.toString();
var lat = e.parameters.lat.toString();
var lng = e.parameters.lng.toString();
var description = e.parameters.description.toString();
var address = e.parameters.address.toString();
var url = e.parameters.url.toString();
var quiz = e.parameters.quiz.toString();
var choiceA = e.parameters.choiceA.toString();
var choiceB = e.parameters.choiceB.toString();
var choiceC = e.parameters.choiceC.toString();
var answer = String(e.parameters.answer);
var image = e.parameters.image.toString();
//これらを配列に入れ，Googleスプレッドシートの最終行に追加
var array = [name, lat, lng, description, address, url, quiz,
choiceA, choiceB, choiceC, answer, image.replace("file\/d\/",
"uc?id=").replace("\/view\?usp=sharing", "")]; //img要素用のURLに変換
sh.appendRow(array);
//送信後に返されるページ
var resultpage = HtmlService.createTemplateFromFile("result");
return resultpage.evaluate();
}
\end{verbatim}
\end{itembox}
送信ボタンがクリックされた後に返されるページを同じGoogle Apps Script内に作成する(図.\ref{figure:edit_send})。
\begin{figure}[htb]
\centering
\includegraphics[width=10cm]{edit_send.png}
\caption{送信完了ページ}
\label{figure:edit_send}
\end{figure}
\begin{itembox}[l]{HTML 送信完了ページ}
\begin{verbatim}
<!DOCTYPE html>
<html lang="ja">
<html>
<head>
<base target="_top">
<title>送信完了｜朝日地区イズ</title>
</head>
<body>
<h1>朝日地区イズ</h1>
<p>送信が完了しました。</p>
<p>ご協力ありがとうございました。</p>
<p><a href="操作画面のURL">操作画面はこちら</a>
<a href="編集画面のURL">もう一度地点を追加する</a></p>
</body>
</html>
\end{verbatim}
\end{itembox}
\section{Googleスプレッドシートの取得と反映}
Google Apps ScriptでGoogleスプレッドシート内の情報を取得しJSON形式で返す(図.\ref{figure:spread_sheet})。
\begin{figure}[htb]
\centering
\includegraphics[width=15cm]{spread_sheet.png}
\caption{Googleスプレッドシート}
\label{figure:spread_sheet}
\end{figure}
\begin{itembox}[l]{Google Apps Script Googleスプレッドシートの情報の取得}
\begin{verbatim}
const SPREAD_SHEET_ID = '18th7jHfAqERhzeT7vDlztJlvUNzJMTSzWnByLiNdwH8';
const SHEET_NAME = 'sheet1';
function doGet(e) {
const app = SpreadsheetApp.openById(SPREAD_SHEET_ID); //IDを取得
const sheet = app.getSheetByName(SHEET_NAME); //シート名を取得
const values = sheet.getDataRange().getValues(); //入力内容を全て配列で取得
const data = [];
//シートの入力内容をオブジェクトに詰め替え
for(let i=0; i<values.length; i++){
if(i === 0)continue; //ヘッダー部(1行目)はスキップ
const param = {};
for(let j=0; j<values[i].length; j++){
param[values[0][j]] = values[i][j];
}
data.push(param);
}
const result = ContentService.createTextOutput();/ /返却情報を生成
result.setMimeType(ContentService.MimeType.JSON);
result.setContent(JSON.stringify(data)); //JSONテキストをセット
return result;
}
\end{verbatim}
\end{itembox}
これをJavaScriptで読み込み，配列に変換して変数に代入していく(図.\ref{figure:play_map})。そのうち名称，概要，住所，URLをマーカのポップアップで表示できるようにする。
\begin{figure}[htb]
\centering
\includegraphics[width=10cm]{play_map.png}
\caption{取得した情報を反映したマップ}
\label{figure:play_map}
\end{figure}
\begin{itembox}[l]{JavaScript 取得した情報をマップに反映}
\begin{verbatim}
var marker = [];
const endpoint = "Google Apps ScriptのデプロイしたURL";
fetch(endpoint)
.then(response => response.json())
// 成功した処理
.then(data => {
// JSONから配列に変換
const markerList = data;
for (var i in markerList) {
var mk = markerList[i];
// スプレッドシートのデータを変数に代入
let name = mk.name, lat = mk.lat, lng = mk.lng,
description = mk.description, address = mk.address, url = mk.url,
image = mk.image, quiz = mk.quiz, choiceA = mk.choiceA,
choiceB = mk.choiceB, choiceC = mk.choiceC, answer = mk.answer;
let num = i; // 問題番号
// ポップアップに表示させる内容
let popup = "<h3>" + name + "</h3><p>" + description
+ "</p><p>" + address + "</p><a href='" + url + "'>" + url + "</a>"
}
});
\end{verbatim}
\end{itembox}
\section{クイズの内容の切り替え}
マーカのclickイベントでは，画像，問題文，選択肢，解答，問題番号をその地点の情報に切り替える(図.\ref{figure:play_quiz})。解答と問題番号はCSSのdisplay:noneで非表示にしておく。
\begin{figure}[htb]
\centering
\includegraphics[width=8cm]{play_quiz.png}
\caption{切り替わった画像とクイズ}
\label{figure:play_quiz}
\end{figure}
\begin{itembox}[l]{JavaScript クリックしたマーカの情報への切り替え}
\begin{verbatim}
function clickMarker(image, quiz, a, b, c, ans, num){
// 画像や問題文などのHTMLの中身を変更
document.getElementById("image").setAttribute("src", image);
document.getElementById("quiz").innerHTML = quiz;
document.getElementById("a").innerHTML = a;
document.getElementById("b").innerHTML = b;
document.getElementById("c").innerHTML = c;
document.getElementById("result").innerHTML = " ";
document.getElementById("answer").innerHTML = ans;
document.getElementById("num").innerHTML = num;
}
\end{verbatim}
\end{itembox}
\section{解答の判定}
選択肢A〜Cのボタンが押されて解答が正しい場合は「正解!!」，間違っている場合は「不正解…」と表示させ，正解時はアイコンの色を青から赤に変更する(図.\ref{figure:play_correct}, \ref{figure:play_incorrect})。このとき，ローカルストレージで問題番号に応じた変数にtrueを入れておく。
\begin{figure}[htbp]
\begin{minipage}[b]{0.5\linewidth}
\centering
\includegraphics[keepaspectratio, scale=0.3]{play_correct.png}
\caption{正解時の判定}
\label{figure:play_correct}
\end{minipage}
\begin{minipage}[b]{0.5\linewidth}
\centering
\includegraphics[keepaspectratio, scale=0.3]{play_incorrect.png}
\caption{不正解時の判定}
\label{figure:play_incorrect}
\end{minipage}
\end{figure}
\begin{itembox}[l]{JavaScript 解答の判定}
\begin{verbatim}
function judgeAnswer(abc) {
// 選択肢と解答と問題番号を取得
var select = document.getElementById(abc).value;
var answer = document.getElementById("answer").textContent;
var num = document.getElementById("num").textContent;
// 選んだ選択肢と解答が正しいとき
if (select == answer) {
document.getElementById("result").innerHTML = "正解!!";
document.getElementById("result").setAttribute("class", "correct");
// アイコンの色を赤に変更
marker[num].setIcon(redIcon);
// ローカルストレージで問題番号に応じた変数にtrue
localStorage.setItem(`judge${num}`, true);
// 選んだ選択肢と解答が間違っているとき
} else {
document.getElementById("result").innerHTML = "不正解…";
document.getElementById("result").setAttribute("class", "incorrect");
}
}
// 選択肢Aがそれぞれクリックされたとき（BとCも同様）
document.getElementById("a").addEventListener("click", () => {
judgeAnswer("a");
});
\end{verbatim}
\end{itembox}
\section{アイコンの色変更}
5.6節でローカルストレージに保存した内容を元に，リロードした際に判定を行うことで解答状況を維持できる。judge\$\{num\}の値がtrueの地点のみ赤いアイコンに設定し，それら以外は通常の青いアイコンとする(図.\ref{figure:play_red})。
\begin{figure}[htb]
\centering
\includegraphics[width=8cm]{play_red.png}
\caption{赤と青のアイコン}
\label{figure:play_red}
\end{figure}
\begin{itembox}[l]{JavaScript 解答状況に応じた色変更}
\begin{verbatim}
// ローカルストレージのjudgeXの値がtrueのときは，赤いアイコンを設定
if(localStorage.getItem(`judge${num}`)=="true"){
marker.push(L.marker([lat, lng], {title: name}).bindPopup(popup)
.setIcon(redIcon).addTo(map)
.addEventListener("click", () => {
clickMarker(image, quiz, choiceA, choiceB, choiceC, answer, num);
}));
// ローカルストレージのjudgeX自体が存在しないときは，青いアイコンのまま
}else{
marker.push(L.marker([lat, lng], {title: name}).bindPopup(popup).addTo(map)
.addEventListener("click", () => {
clickMarker(image, quiz, choiceA, choiceB, choiceC, answer, num);
}));
}
\end{verbatim}
\end{itembox}
リセットボタンでは，ローカルストレージ内のデータを削除し，マーカの色を全て青に戻せるようにする。
\begin{itembox}[l]{JavaScript ローカルストレージのデータクリア}
\begin{verbatim}
document.getElementById("resetButton").addEventListener("click", () => {
// ローカルストレージ全体のデータ削除
localStorage.clear();
// マーカの色を全て青に変更
for (var i in marker) {
marker[i].setIcon(blueIcon);
}
});
\end{verbatim}
\end{itembox}
\section{予備実験}
地域住民の方でも地点を追加できるかどうか検証するため，手順書を配布し予備実験を行った(図.\ref{figure:quiz_manual})。
鶴岡市立朝日中学校の親子行事では，生徒25名のご協力のもと「小学校」と「あさひ」の2地点を追加してもらった。しかし，両地点とも送信ボタンが複数回押されたためかデータが重複しており，問題文や選択肢も入力されていなかった。また，緯度・経度が入力されておらず，地図への反映が行われていない地点があった。
かたくり温泉のあさひマルシェでは，来客のご協力のもと「あさひ小学校」と「かたくり温泉ぼんぼ」の2地点を追加してもらった。こちらも緯度・経度と名称のみで問題文や選択肢が入力されておらず，クイズの部分が機能していなかった。
鶴岡サイエンスパークまつりでは，ジュニアドクター鳥海塾の第二段階塾生のご協力のもと「ひまわり温泉ゆらら」と「大蔵村」の2地点を追加してもらった。画像以外のデータが全て入力されており，機能としては正常に動作できていた。
\begin{figure}[htb]
\centering
\includegraphics[keepaspectratio, width=160mm]{quiz_manual.pdf}
\caption{予備実験の手順書}
\label{figure:quiz_manual}
\end{figure}
\chapter{実験}
本章では作成したシステムを使って実験を行い，名称や問題文などの情報が正確に追加されマップとクイズが機能するか検証する。実験の概要と手順を以下にまとめ，その実験結果から専門的な知識がない人でも扱える機能性について考察する。
\section{実験の概要}
実験では本学の学生8名を被験者とし，地点のクリックや内容の入力と選択によって，専門的な知識がない人でも一定の時間以内に編集できるか検証する。被験者が追加する項目は，地点の緯度・経度・名称・概要・住所・WebサイトのURL・画像，そしてクイズの問題文・選択肢3つ・正解となる解答である。これを1人3地点ずつ行い，入力に要した時間を計測する。1地点10ヶ所入力・選択する欄があり，システム開発でのテスト時それぞれ約30秒かかったため，合計で5分間を基準とする。以下にマップとクイズの追加手順を示す。
\begin{enumerate}
\item クイズの編集画面にアクセスする(図.\ref{figure:quiz_edit_QR})。
\item マップ上の追加したい地点をクリックして緯度と経度を取得する。
\item 名称・概要・住所・WebサイトのURLを入力する。
\item Google Driveの画像の共有URLを入力する。
\item クイズの問題文と選択肢A〜Cを入力する。
\item 正解となる解答を選択肢A〜Cの中から選択する。
\item 「地点を追加する」ボタンをクリックして内容を送信する。
\item 操作画面においてクイズが正常に動作するか確認する(図.\ref{figure:quiz_play_QR})。
\end{enumerate}
\begin{figure}[htbp]
\begin{minipage}[b]{0.5\linewidth}
\centering
\includegraphics[keepaspectratio, scale=0.4]{quiz_edit_QR.png}
\caption{編集画面のQRコード}
\label{figure:quiz_edit_QR}
\end{minipage}
\begin{minipage}[b]{0.5\linewidth}
\centering
\includegraphics[keepaspectratio, scale=0.4]{quiz_play_QR.png}
\caption{操作画面のQRコード}
\label{figure:quiz_play_QR}
\end{minipage}
\end{figure}
\section{実験結果}
被験者8名全員がクイズの入力を完了することができ，以下のような結果となった(表.\ref{table:experimental_result})。平均時間は3分14秒，分散は5137.0であった。この結果から一定の時間以内に入力が完了するかどうかを検証するために，1標本母平均検定を行った。帰無仮説を「本実験のデータ1件の入力時間は5分間である」とし，対立仮説を「本実験のデータ1件の入力時間は5分間より短くなる」とした。ここで有意水準は5\%とする。p値は0.00103となり有意水準0.05より小さいため帰無仮説が棄却され，本実験のデータ1件の入力時間は5分間より短くなると言える結果となった。
\begin{table}[htb]
\caption{実験結果}
\label{table:experimental_result}
\centering
\begin{tabular}{|c|c|c|c|c|}
\hline
& 1回目 & 2回目 & 3回目 & 平均\\ \hline
1人目 & 5分57秒 & 4分27秒 & 4分04秒 & 4分49秒\\ \hline
2人目 & 3分13秒 & 2分29秒 & 1分49秒 & 2分30秒\\ \hline
3人目 & 2分26秒 & 2分15秒 & 1分57秒 & 2分13秒\\ \hline
4人目 & 9分39秒 & 3分30秒 & 3分03秒 & 5分24秒\\ \hline
5人目 & 3分43秒 & 2分20秒 & 3分16秒 & 3分06秒\\ \hline
6人目 & 3分07秒 & 2分25秒 & 2分15秒 & 2分36秒\\ \hline
7人目 & 3分41秒 & 2分39秒 & 1分48秒 & 2分43秒\\ \hline
8人目 & 2分55秒 & 2分33秒 & 2分07秒 & 2分32秒\\ \hline
\end{tabular}
\end{table}
\section{考察}
内容の入力と選択によって専門的な知識がない人でも，本システムで一定の時間以内に編集できることを検証できた。ほとんどのクイズは正常に動作したが，マップをクリックし忘れて緯度・経度が取得されていない地点があった。画像についてはGoogle Driveの共有URLだと難易度が高いためか空白が多く，直接アップロード可能なことが求められる。また，既に追加されている地点が操作画面でしか確認できず，編集している際にも見られるようにする必要がある。
% 結論は簡潔に。
% 最後に参考文献を必ず正しく記載する。
% 原稿がどの程度のクォリティなのか参考文献である程度分かる。
\chapter{結論}
本研究では，Webページの専門的な知識がない人でも編集可能なクイズ作成システムを作成することができた。機能としてフォームで入力した情報の送信・取得や正誤の判定を行い，正解したクイズの状況を保存することが可能である。しかし，間違って同じデータが重複して登録されたり，入力内容が不十分でも送信できたりするのが現状である。今後は，最低限必要な情報がないと送信が完了しないようにし，正常に機能するシステムになるよう進めていく。
\chapter*{謝辞} %章を付けずにタイトル表示
\addcontentsline {toc}{chapter}{謝辞} %章立てせずに目次に追加するおまじない
本研究を進めるにあたり，多くの方々にご支援いただきました。指導教官の広瀬雄二教授からは多くのご指導ご協力を賜りました。ここに深謝の意を表します。
また，実験にご協力いただいた朝日中央コミュニティセンターならびに広瀬研究室の皆様におきましては，業務や研究に専念している中で大変貴重なお時間を頂戴することとなり，お詫びと共に感謝申し上げます。
\begin{thebibliography}{}
\bibitem{yamagataken}山形県. ``山形県過疎地域持続的発展方針''.\\\url{https://www.pref.yamagata.jp/documents/23259/kasohousinkaitei.pdf},\\(参照2023-11-21).
\bibitem{shigeru}佐藤滋, 志村秀明, 内田奈芳美, 饗庭伸, 川原晋, 真野洋介, 有賀隆. まちづくりデザインゲーム. 株式会社 学芸出版社. 2005, p.09-10, 76-77.
\bibitem{kankocho}観光庁. ``観光DX（デジタルトランスフォーメーション）の推進''.\\\url{https://www.mlit.go.jp/kankocho/shisaku/kankochi/digital_transformation.html}, (参照2023-01-10).
\bibitem{wang}王怡青, 土井俊弥, 井上祐輔, 宇津呂武仁. ``ご当地グルメを題材とするクイズ・コンテンツの作成''. 第8回DEIMフォーラム論文集, 2016.
\bibitem{akashi}明石拓弥, 大浦秀喜, 大薗隼人, 成松智輝, 山名莉央, 酒匂大輝, 中井哲也, 中村匡秀. ``ゲーミフィケーションに基づく地域理解動機付けのためのクイズラリープラットフォームの試作''. 電子情報通信学会技術研究報告; 信学技報, 2021, vol.121, no.229, p31-36.
\bibitem{learningbox}learningBOX株式会社. ``QuizGenerator｜無料で使えるクイズ・問題作成ツール''.\\\url{https://quizgenerator.net/}, (参照2023-08-19).
\bibitem{culiVision}任意団体CuliVision. ``クイズだからできる訴求力の高い観光地の魅力発信｜Korette''.\\\url{https://korette.jp/home/wantcreator/}, (参照2023-12-05).
\bibitem{leaflet}Volodymyr Agafonkin. ``Leaflet - a JavaScript library for interactive maps''.\\\url{https://leafletjs.com/}, (参照2023-02-06).
\bibitem{openstreetmap}OpenStreetMap Foundation Japan. ``OpenStreetMap Japan｜自由な地図をみんなの手で/The Free Wiki World Map''.\\\url{https://openstreetmap.jp/}, (参照2023-12-07).
\bibitem{appsscript}Google. ``Google Apps Script: Google Workspace を自動化、統合、拡張。''.\\\url{https://workspace.google.co.jp/intl/ja/products/apps-script/}, (参照2023-12-05).
\bibitem{spreadsheet}Google. ``Google Sheets: オンライン スプレッドシート エディタ | Google Workspace''.\\\url{https://www.google.com/intl/ja_jp/sheets/about/}, (参照2023-12-05).
\end{thebibliography}
\end{document}
Yuto Togashi