\documentclass[a4j]{jarticle}
% -*- coding: utf-8 -*-

\topmargin  -2cm
\textheight 26cm
\textwidth 16.5cm
\oddsidemargin -0.3cm

\pagestyle{empty}

%% タイトル %%
\title{観光振興を目的としたクイズ作成システムの提案}

%% 著者 %%
\author{広瀬研究室\\C1201871 富樫雄斗}

%% 日付 %%
\date{2023年11月22日}

\usepackage{url}
\usepackage[dvipdfmx]{graphicx}
\usepackage{ascmac}
\begin{document}
\twocolumn[
\maketitle
\begin{center}
 {\bfseries 概要}
\end{center}

%% 概要 %%
山形県庄内地域では人口が大きく減少しており，歴史や風土など地域資源を活用した観光振興が求められる。また，市民参加のまちづくりは急速に広まりつつあり，状況に応じて情報編集し適切に媒体を選ぶ必要がある。近年，観光デジタルトランスフォーメーションが推進され，旅の魅力がデジタルの力でさらに高まっている。そこで本研究では，観光振興を目的とし，マップと連動させたクイズ作成システムを提案する。
\vspace*{2em}
]

\thispagestyle{empty}

%% 本文 %%
\section{背景}
山形県庄内地域では人口が平成27年から令和2年までの間に279497人から263404人に減少しており，うち過疎地域は181961人から170360人に減少している\cite{yamagataken}。しかし，そこには先人たちの優れた公益活動と歴史や風土があり，今でも地域住民の自主的な地域づくり活動が行われているため，その土地特有の地域資源の発信が欠かせなくなっている。

各地ではまちづくりは急速に広まりつつあり，歴史的環境の保全活動，密集市街地における防災まちづくり，公共施設のデザイン，商店街の活性化，町並み景観づくりなど多く取り組まれている\cite{shigeru}。まちづくり情報を編集して発信していくには意識的な記録・整理と目標や状況に応じた編集を行い，発信する媒体を適切な選択が求められる。

近年，デジタル化での効率化とデータの分析によって新たなビジネスモデルの創出といった変革を行う，観光デジタルトランスフォーメーションが推進されている\cite{kankocho}。旅の魅力がさらに高まり旅行者や地域をより豊かにすることができるが，これらの取り組みを扱う上では情報技術に対する専門的な知識が必要になってくる。

以上のことから，地域の魅力を効果的に伝えられる，観光振興を目的としたクイズ作成システムを構築する。

\section{目的}
本研究では，Webの専門的な知識がない人でも編集可能なクイズ作成システムを提案する。それにより，地域に対する理解を深め，観光地の自然，文化，食，歴史などに興味を持ってもらえることを目指す。

\section{先行研究と類似サービス}
先行研究と類似サービスを挙げてその課題について考察する。

\subsection{ご当地グルメクイズの事例}
王怡青らは，全国各地の地域活性化を目的とし，旅の感覚を味わえるアプリケーションを提案している\cite{wang}。ゲーム開始時に所持金が与えられ，0円にすることでゲームの終了となる。クイズモードで4択クイズを解き，正解なら観光情報が提示され対価の支払いによって所持金を減らす流れとしている。

\subsection{クイズラリープラットフォームの事例}
明石拓弥らは，地方自治体の地域理解の動機付けを目的とし，クイズラリープラットフォームを提案している\cite{akashi}。ユーザが携帯端末を持ってスポットに訪れると詳細が表示され，クイズ・謎解き・立ち寄りのタスクが提示される。ポイントが貯まると，進捗状況を可視化できるようタスクバーが伸びていく。

\subsection{QuizGenerator}
learningBOX株式会社では，誰でも無料でオリジナルのクイズや問題を作成できるツールを提供している\cite{learningbox}。択一問題や正誤問題，記述問題や並び替え問題などの形式で作ることができる。作成方法にはフォーム・テキスト・エクセルの3つがあり，限定公開か一般公開かも選べるようになっている。

\subsection{先行研究の課題点}
3.1の事例では，情報源がWikipediaのため信頼性に欠ける部分があり，ご当地グルメ以外の分野にも使用できない。3.2の事例では，フォームがスポット編集とタスク編集に分かれており，緯度・経度については数字を入力する形式になっている。

\section{システム提案}
3.4で挙げた課題から，デフォルトのクイズの情報源をガイドブックと公式Webサイトに限定し，様々な分野で適用できるようにする。また，編集画面は1つの画面内に収め，緯度・経度はマップを直接クリックすることで取得できるようにする。

\section{システム設計}
管理者となる地域住民側ではマーカーのクリックで地点の緯度・経度を取得し，入力した内容をマップに反映させる。また，ユーザとなる観光客側ではマーカーのクリックで画像と問題文を表示させ，選択肢のクリックでクイズの正誤判定を行う(図.\ref{figure:system})。

\subsection{要件定義}
システムとして複雑にならないために満たす必要がある要件を定義する。
\begin{itemize}
\item 操作説明の常時確認\\
画面下部にマーカーの追加方法やクイズの答え方について記載し，いつでも操作説明を確認できるようにする。
\item 専門的な知識を必要としない編集\\
地点の内容を入力したり選択したりすることによって，位置，説明，問題文などを追加できるようにする。
\item 地点の詳細の表示\\
マップ上のマーカーをクリックすることで，名称，概要，住所，URLがポップアップで見られるようにする。
\item 正解状況の反映\\
正解した問題のマーカーを青から赤に変更し，ブラウザ上に情報を保存してリロードしても維持できるようにする。
\end{itemize}

\subsection{使用する技術}
本研究では以下の技術を使用する。
\begin{itemize}
\item HTML Living Standard
\item CSS3
\item JavaScript ES2023
\item Leaflet 1.3.0
\item Google Apps Script
\item Googleスプレッドシート
\end{itemize}

\subsection{本システムのメリット}
地点の場所やクイズの内容を選択と入力によって追加でき，正解した問題の状況を常時確認できる。また，マップとクイズがPCでは横に，携帯端末では縦に並び，使用するデバイスに適して表示される。

\begin{figure}[tb]
  \centering
  \includegraphics[bb=10 25 900 560,clip,width=2.4\columnwidth]{conceptual_diagram.pdf}
  \caption{システムの流れ}
  \label{figure:system}
\end{figure}

\section{システム開発}
本システムの編集画面とプレイ画面についてそれぞれ説明する。
\subsection{編集画面の概要}
左側に緯度と経度を取得できるマーカーがあるマップ，右側に名称や問題文を入力する欄を設置する(図.\ref{figure:edit})。マップは中心とズームレベルを設定し，OpenStreetMapと国土地理院のタイルも選択できるようにする。Leafletの機能として，ドラッグによるマップの移動やマウスホイールによる拡大・縮小ができる。.latlngでマーカーがある地点の緯度・経度を取得し，それをCSSで非表示にしたinput要素に代入した送信時に参照できるようにする。これらの操作をclickイベントにより，マップ上をクリックすることで行う。入力・選択する項目は，名称，概要，住所，WebサイトのURL，Google Driveの画像の共有URL，問題文，選択肢A〜C，解答とし，その下に入力内容の送信ボタンとリセットボタンを配置する。これらの情報をGoogle Apps Scriptで取得し，Googleスプレッドシートにデータを追加する。
\begin{figure}[tb]
  \centering
  \includegraphics[width=8cm]{edit.png}
  \caption{編集画面}
  \label{figure:edit}
\end{figure}

\begin{itembox}[l]{GAS Googleスプレッドシートへの追加}
\footnotesize
\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 desc = e.parameters.desc.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();
    //配列に入れスプレッドシートの最終行に追加
    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}

\subsection{プレイ画面の概要}
左側にクリックすると情報が表示されるマーカーがあるマップ，右側に地点に関する画像とクイズを設置する。(図.\ref{figure:play})。まず，Google Apps ScriptでGoogleスプレッドシート内の情報を取得しJSON形式で返す。これをJavaScriptで読み込み，配列に変換して変数に代入していく。マーカーのclickイベントでは，画像，問題文，選択肢，解答，問題番号をその地点の情報に切り替える。そして，A〜Cのボタンが押されて解答が正しい場合は「正解!!」と表示させ，アイコンの色を青から赤に変更する。このとき，ローカルストレージで問題番号に応じた変数にtrueを入れておくことで，リロードした際に判定を行い解答状況を維持できる。リセットボタンでは，ローカルストレージ内のデータを削除し，マーカーの色を全て青に戻せるようにする。

\begin{figure}[tb]
  \centering
  \includegraphics[width=8cm]{play.png}
  \caption{プレイ画面}
  \label{figure:play}
\end{figure}

\begin{itembox}[l]{GAS Googleスプレッドシートの情報の取得}
\footnotesize
\begin{verbatim}
const SPREAD_SHEET_ID = 'スプレッドシートのID';
const SHEET_NAME = 'シート名';
function doGet(e) {
    //ID・シート名・セルの内容を取得
    const app = SpreadsheetApp.
    openById(SPREAD_SHEET_ID);
    const sheet = app.getSheetByName(SHEET_NAME);
    const values = sheet.
    getDataRange().getValues();
    const data = [];
    //シートの入力内容をオブジェクトに詰め替え
    for(let i=0; i<values.length; i++){
        //ヘッダー部(1行目)はスキップ
        if(i === 0)continue;
        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);
    //JSONテキストをセット
    result.setContent(JSON.stringify(data));
    return result;
}
\end{verbatim}
\end{itembox}

\section{実験}
作成したシステムを使って実験を行い，名称や問題文などの情報が正確に追加されマップとクイズが機能するか検証する。実験の概要と手順を以下にまとめ，予備実験として行った結果から本システムの機能性について考察する。
\subsection{実験の概要}
実験では，地点のクリックや内容の入力・選択によって，Webページの専門的な知識がない人でも編集できるかどうか検証する。被験者が追加する項目は，地点の緯度，経度，名称，概要，住所，WebサイトのURL，画像，そしてクイズの問題文，選択肢3つ，正解となる解答である。以下にその追加手順を示す。
\begin{enumerate}
\item マップ上の追加したい地点をクリックして緯度・経度を取得する。
\item 名称，概要，住所，URLを入力する。
\item Google Driveの画像の共有URLを入力する。
\item クイズの問題文と選択肢を入力する。
\item 正解となる解答を選択肢A〜Cから選択する。
\item 「地点を追加する」ボタンをクリックして内容を送信する。
\end{enumerate}

\subsection{予備実験}
予備実験として以下の3つのイベントでデータ追加を行ってもらった。
\subsubsection{朝日中学校の親子行事}
鶴岡市立朝日中学校の親子行事に参加した生徒25名にお願いし，「小学校」と「あさひ」の2地点を追加してもらうことができた。しかし，両地点とも送信ボタンが複数回押されたためかデータが重複しており，問題文や選択肢も入力されていなかった。また，緯度・経度が入力されておらず，地図への反映が行われていない地点があった。
\subsubsection{あさひマルシェ}
かたくり温泉のあさひマルシェに来たお客さんにお願いし，「あさひ小学校」と「かたくり温泉ぼんぼ」の2地点を追加してもらうことができた。こちらも緯度・経度と名称のみで問題文や選択肢が入力されておらず，クイズの部分が機能していなかった。
\subsubsection{鶴岡サイエンスパークまつり}
鶴岡サイエンスパークまつりに参加したジュニアドクター鳥海塾の第二段階の塾生にお願いし，「ひまわり温泉ゆらら」と「大蔵村」の2地点を追加してもらうことができた。画像以外のデータが全て入力されており，機能としては正常に動作できていた。

\section{今後の展望}
現状，フォームで入力した情報の送信・取得や正誤の判定を行え，正解したクイズの状況を保存することができた。しかし，データが重複して登録されたり最低限必要な情報がなくても送信できたりするため，正常に機能するシステムになるよう進めていく。また，地域に対する理解度が深まったか，ユーザにとって編集しやすいシステムであったかどうかアンケートを取る必要がある。

\begin{thebibliography}{99}
\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-11).
\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).
\end{thebibliography}

\end{document}
