%#!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{geometry}
\usepackage{url}		% 文中にURLを書くときは \url{} で括る
\usepackage{tabularx}
\geometry{textwidth=160mm, textheight=225mm}%レイアウト
\renewcommand{\bibname}{参考文献}%\renewcommand{\好きな名前}{何かの出力}

\title{観光振興を目的としたクイズ作成システムの提案}
\author{広瀬研究室4年\\C1201871 富樫雄斗}
\date {令和5年度}

\begin{document}
\maketitle

\begin{center}
 {\bfseries 概要}
\end{center}
朝日地域では世帯数と人口が大きく減少しており，自然や文化など地域資源を活用した観光振興が求められる。また，市民参加のまちづくりは急速に広まりつつあり，状況に応じて情報を編集して媒体を適切に選ぶ必要がある。近年，観光デジタルトランスフォーメーションが推進され，旅の魅力がデジタルの力でさらに高まっている。そこで本研究では，山形県鶴岡市朝日地域の観光振興を目的とし，マップと連動させたクイズ作成システムを提案する。（205文字）

% 目次
\tableofcontents

\chapter{はじめに}
本章では研究の背景をまとめ，それを踏まえた目的について説明する。
\section{背景}
山形県鶴岡市朝日地域は豊かな森林資源に恵まれ自然と調和した歴史と文化に育まれてきたものの，山間地が多く有数の豪雪地帯である上に学校や病院等の施設への距離も遠く，平野部に比較して気象・風土・地形の不安要素から厳しい定住環境にあり，市全体でも人口減少や少子高齢化が進む中特にその傾向が顕著で，地域資源を活用した観光振興が求められる\cite{tsuruokashi}。

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

近年，デジタル化での効率化と収集されるデータの分析によって，ビジネス戦略の再検討や新たなビジネスモデルの創出といった変革を行う，観光デジタルトランスフォーメーションが推進されている。旅行者の利便性や観光産業における生産性が向上して旅の魅力がデジタルの力でさらに高まり，旅行者や地域をより豊かにすることができる\cite{kankocho}。

以上のことから，地域の魅力を効果的に伝えられるマップと連動させたクイズ作成システムを構築する。

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

% 章の始めにリード文としてこの章で何をどういう順番で述べるかを入れる。
% 2章では先行研究をとりあげ，身近な問題ではどうするかまで述べる。
\chapter{先行研究と類似サービス}
本章では先行研究と類似サービスを挙げてその課題について考察する。

\section{先行研究}
観光分野にクイズを活用している事例を取り上げる。
\subsection*{ご当地グルメを題材としたクイズの事例}
王怡青らは，全国各地の地域活性化に貢献することを目的とし，旅の感覚を味わえるアプリケーションを提案している\cite{wang}。まずゲーム開始時に初期所持金が与えられ，これを0円にすることをゲームの終了条件とした。クイズモードで4択クイズを解き，正解であればノンクイズモードに遷移し，関連する観光情報を提示する。このモードにおいてグルメやグルメに関連する場所を選択し，その対価の支払いによって所持金を減らすことができる。ご当地グルメ・コンテンツの情報源については，Wikipediaと旅行ガイドブックを使用している。

\subsection*{クイズラリープラットフォームの事例}
明石拓弥らは，ゲーミフィケーションに基づく地域理解動機付けのためのクイズラリープラットフォームを提案している\cite{akashi}。スマートフォンのGPS機能を利用し，参加者はそのスポットに訪れてはじめてタスクをこなせるようにして，住民が自分の足でその場所を訪れるきっかけを作る。また，スポットにちなんだクイズや謎解きでその場所の学びのきっかけを作り，地域理解に向けた内的動機づけを行う。さらに，タスクをこなすとポイントを獲得でき，ポイントに応じたコンテンツやステージ，プレゼント応募などの外的動機づけによって参加者のモチベーションの維持を図る。

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

\section{事例の課題}
2.1節を踏まえ課題について考察する。
\begin{itemize}
\item Wikipediaの特徴として，膨大な量のコンテンツが掲載されているものの，不特定多数の人が記事を編集しているため，情報源としての信頼性に欠ける部分がある。
\item クイズのジャンルがご当地グルメに限られており，その他の分野で使用することができない。
\end{itemize}

\chapter{提案}
2.2節で挙げた先行研究と類似サービスの課題を解決できるようなシステムを構築する。
\section{課題の解決案}
クイズの情報源については，その土地のガイドブックまたは公式Webサイトに限定し信頼性の向上を図る。ご当地グルメだけでなく，歴史・文化・生態系・自然など様々な分野に適用できるようにする。また，作成する媒体としてWebページを設定し，PC及び携帯端末どちらの使用でも閲覧可能にする。

\section{本システムのメリット}
本システムにおいて以下のメリットが挙げられる。
\begin{itemize}
    \item 地点の場所やクイズの内容を選択・入力し，観光地の情報を現地の方でも容易に追加してもらえる。
    \item コンテンツがPCでは横に，携帯端末では縦に並び，使用するデバイスに適して表示される。
\end{itemize}

\chapter{システム設計}
システムの要件を定義し使用した要素を挙げる。

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

\section{使用する技術と要素}
以下の技術と要素を使用しバージョンとともに記載する。
\subsection{HTML}
HTML（HyperText Markup Language）とは，ウェブサイトのコンテンツの構造を作るために使うマークアップ言語である\cite{html}。バージョンをHTML Living Standardとし，クイズとスタンプラリーのページに使用する。

\subsection{CSS}
CSS（Cascading Style Sheets）とは，スタイルシート言語で，HTMLなどで記述された文書の体裁や見栄えを表現するために用いられる\cite{css}。バージョンをCSS3とし，タブやスタンプの配置など，Webページのデザインに使用する。

\subsection{JavaScript}
JavaScriptとは，ウェブサイトに対話性を追加するプログラミング言語である\cite{javascript}。バージョンをJavaScript ES2023とし，マップ上の地点のアクションやクイズの正誤判定に使用する。

\subsection{Leaflet}
Leafletとは，携帯端末で閲覧しやすく相互作用的なオープンソースJavaScriptライブラリである。わずか約42KBで，ほとんどの開発者が必要とする全てのマッピング機能を備えている\cite{leaflet}。バージョンをLeaflet 1.3.0とし，マップ上の地点へのマーカーの配置に使用する。

\subsection{Google Apps Script}

\subsection{Googleスプレッドシート}

\section{システムの流れ}
本システムの大まかな流れについて説明する。(図.\ref{figure:conceptual_diagram})

\begin{figure}[htb]
    \centering
    \includegraphics[keepaspectratio, width=150mm]{conceptual_diagram.pdf}
    \caption{システムの流れ}
    \label{figure:conceptual_diagram}
\end{figure}

\chapter{システム開発}
4章の要件定義を踏まえ本システムを設計する。前半は編集画面，後半はプレイ画面について説明する。
\section{Leafletによるマップ生成}
鶴岡市周辺のマップになるよう中心とズームレベルを設定する。OpenStreetMapと国土地理院のタイルも選択できるようにし，プレイ画面も同様に行う。Leafletの機能として、ドラッグによるマップの移動やマウスホイールによる拡大・縮小ができる(図.\ref{figure:edit_map})。

\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: '&copy; <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}

\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，選択肢B，選択肢C，解答を入力・選択する欄を設ける。そしてその下に入力内容の送信ボタンとリセットボタンを配置する。Google Apps Scriptで取得し，(図.\ref{figure:edit_input})。

\begin{figure}[htb]
  \centering
  \includegraphics[width=10cm]{edit_input.png}
  \caption{名称や問題文などの入力欄}
  \label{figure:edit_input}
\end{figure}

\begin{itembox}[l]{GAS 入力した内容を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スプレッドシートの取得と反映}
左側のマップにマーカーを設置し，クリックすることで情報がポップアップで表示されるようにする。右側には地点の画像，クイズの問題文と選択肢のボタンを設ける。正解であれば赤文字で「正解！」と表示させてマーカーの色を赤に変え，不正解であれば青文字で「不正解…」と表示させる。(図.\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]{GAS 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}

\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{クイズの内容の切り替え}
\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{解答の判定}
\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");
    }
}
\end{verbatim}
\end{itembox}

画面右上に画像が切り替わるスペースを設ける。その下にクイズの問題文と選択肢を書き，正誤の判定が出るようにする。
\begin{itembox}[l]{JavaScript 解答の選択と解答状況のリセット}
\begin{verbatim}
// 選択肢A・B・Cがそれぞれクリックされたとき
document.getElementById("a").addEventListener("click", () => {
    judgeAnswer("a");
});
document.getElementById("b").addEventListener("click", () => {
    judgeAnswer("b");
});
document.getElementById("c").addEventListener("click", () => {
    judgeAnswer("c");
});
\end{verbatim}
\end{itembox}

\section{アイコンの色変更}
\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}

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

\section{実験結果}
朝日中学校の親子行事に参加した生徒25名にお願いし，5地点追加してもらうことができた。しかし，「小学校」が3つと「あさひ」が2つでいくつか重複し，クイズの問題文や選択肢が入力されていなかった。その内3地点は緯度・経度が入力されておらず，地図への反映が行われていなかった。

また，かたくり温泉の市場のあさひマルシェに来たお客さんにお願いし，あさひ小学校とかたくり温泉ぼんぼの2地点してもらうことができた。こちらも緯度・経度と名称のみで，問題文や選択肢が入力されていなかった。

鶴岡サイエンスパークまつりでは，ジュニアドクター鳥海塾の第二段階の方にひまわり温泉ゆらら，大蔵村，の地点を入力してもらった。

\begin{center}
\begin{tabularx}{\linewidth}{|wc{35.6mm}|wc{35.6mm}|wc{35.6mm}|wc{35.6mm}|}\hline
     & 名称 & 緯度 & 経度 \\ \hline
    1地点目 & 小学校 &  &  \\ \hline
    2地点目 & あさひ & 38.8426407646932 & 139.87277717369 \\ \hline
    3地点目 & あさひ小学校 & 38.656024370347 & 139.887572710567 \\ \hline
    4地点目 & かたくり温泉ぼんぼ & 38.6341537844051 & 139.849672550979 \\ \hline
    5地点目 & ひまわり温泉ゆらら & 38.3412859362341 & 140.275502800941 \\ \hline
    6地点目 & 大蔵村 & 38.7539112048661 & 140.200652419026 \\ \hline
\end{tabularx}
\end{center}

\section{考察}
実験結果から考察する。

% 結論は簡潔に。
% 最後に参考文献を必ず正しく記載する。
% 原稿がどの程度のクォリティなのか参考文献である程度分かる。
\chapter{結論}
選択した地点と入力した問題の内容を反映させることはできたが，保存ができていないのが現状である。今後はその情報をデータベースで管理し，正解した問題の状況も保存可能にする必要がある。その結果，朝日地域への興味と関心を向上させ，観光振興に繋がるシステムになるよう進めていく。

\chapter *{謝辞} %章を付けずにタイトル表示
\addcontentsline {toc}{chapter}{謝辞} %章立てせずに目次に追加するおまじない
本研究を進めるにあたり，多くの方々にご支援いただきました。指導教官の広瀬雄二教授からは多くのご指導ご協力を賜りました。ここに深謝の意を表します。
また，実験にご協力いただいた朝日中央コミュニティセンターの皆様におきましては，業務に専念している中で大変貴重なお時間を頂戴することとなり，お詫びと共にご協力いただいたことに感謝いたします。

\begin{thebibliography}{}
    \bibitem{tsuruokashi}鶴岡市. ``朝日地域振興計画''.\\\url{https://www.city.tsuruoka.lg.jp/shisei/sogokeikaku/tiikinosinkou/tiiki01o.files/shinko_asahi.pdf},\\(参照2023-05-09).
    \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}王怡青・土井俊弥・井上祐輔・宇津呂武仁. ``ご当地グルメを題材とするクイズ・コンテンツの作成''.\\\url{https://db-event.jpn.org/deim2016/papers/185.pdf}, (参照2022-11-15).
    \bibitem{akashi}明石拓弥・大浦秀喜・大薗隼人・成松智輝・山名莉央・酒匂大輝・中井哲也・中村匡秀. ``ゲーミフィケーションに基づく地域理解動機付けのためのクイズラリープラットフォームの試作''.\\\url{https://cs27.org/achieve/data/pdf/1450.pdf}, (参照2023-11-14).
    \bibitem{learningbox}learningBOX株式会社. ``QuizGenerator | 無料で使えるクイズ・問題作成ツール''.\\\url{https://quizgenerator.net/}, (参照2023-08-19).
    \bibitem{html}MDN. ``HTML の基本 - ウェブ開発を学ぶ''.\\\url{https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/HTML_basics}, (参照2022-12-16).
    \bibitem{css}MDN. ``CSS: カスケーディングスタイルシート''.\\\url{https://developer.mozilla.org/ja/docs/Web/CSS}, (参照2022-12-16).
    \bibitem{javascript}MDN. ``JavaScript - ウェブ開発を学ぶ''.\\\url{https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics}, (参照2022-12-16).
    \bibitem{leaflet}Volodymyr Agafonkin. ``Leaflet - a JavaScript library for interactive maps''.\\\url{https://leafletjs.com/}, (参照2023-02-06).
\end{thebibliography}

\end{document}