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

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

\begin{document}
\maketitle

\begin{center}
 {\bfseries 概要}
\end{center}
観光を過疎地域で行う場合，その地域にしかないモノを見出して価値を拡大させていくことが求められる。また，市民参加のまちづくりは急速に広まりつつあり，状況に応じて情報を編集して媒体を適切に選ぶ必要がある。近年，観光デジタルトランスフォーメーションが推進され，旅の魅力がデジタルの力でさらに高まっている。本研究では，山形県鶴岡市朝日地区の観光振興を目的とし，クイズやスタンプラリーなどのWebコンテンツ作成システムを提案する。（210文字）

% 目次
\tableofcontents

\chapter{はじめに}
\section{背景}
観光はサービス業の一種であるが，人口低密度地域が観光振興を目指す場合，ヒト・モノ・カネをはじめとする地域の経営リソース不足が制限要因となる。観光には社会的な効果と経済的な効果があり，地域の社会・経済，さらに自然環境の側面への還元が重要で，その地域にしかないモノを見出してその価値を拡大させていくことが求められる\cite{kosaka}。

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

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

以上のことから，クイズやスタンプラリーをはじめとした，地域の魅力を効果的に伝えられるWebコンテンツ作成システムを構築する。

\section{目的}
観光振興を目的としたWebコンテンツとして，クイズ及びスタンプラリーを提案する。本研究では，山形県鶴岡市の朝日地区を対象とし，生態系・歴史・食・文化・自然などに興味を持ってもらえるシステムを目指す。

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

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

\subsection{白川郷スタンプラリーの事例}
永井拓登らは，時間や場所を意識せずに景品交換を行うことができる，自己完結型のスタンプラリーアプリケーションを提案している\cite{nagai}。先行して作成された白川郷のゆるキャラ「しらかわGOくん」のアプリケーションを改良した。アクリルキーホルダーに変わる景品としてデジタルフォトフレームを導入し，新たに写真撮影画面を実装してその中での写真撮影を可能にしている。アプリケーションを用いたスタンプラリーイベントを行い，国内外問わず多くの人々に興味を持ってもらえており，従来のアナログ的なサービスとの融合が肝要であるとしている。

\section{事例の課題}
2.1節を踏まえ課題について考察する。
\begin{itemize}
\item 2.1.1の事例では，Wikipediaの特徴として，膨大な量のコンテンツが掲載されているものの，不特定多数の人が記事を編集しているため，情報源としての信頼性に欠ける部分がある。また，クイズのジャンルがご当地グルメに限られており，その他の分野で使用することができない。
\item 2.1.2の事例では，位置情報を用いてユーザのアプリケーション画面にポップアップ表示させる機能があるが，使用できるデバイスが携帯端末に限られている。
\end{itemize}

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

\section{本システムのメリット}
本システムにおいて以下のメリットが挙げられる。
\begin{itemize}
    \item ページ遷移せず，マップ・クイズ・スタンプラリーが1つの画面で完結しており，扱いやすく直感的な操作をすることができる。
    \item 実際に現地に行かなくても，マップと3Dモデルを操作して，観光地の名所や自然などを視覚的に楽しむことができる。
\end{itemize}

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

\section{要件定義}
2.2節の課題解決を満たす要件を定義する。
\begin{itemize}
\item 建物や植物などの3Dモデルとクイズを作成し、様々な分野で使用できるようにする。
\item PCで見たときは横長、携帯端末で見たときは縦長に表示が切り替わる。
\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}。マップ上の地点のアクションやクイズの正誤判定に使用する。

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

\subsection{Blender}
Blenderとは、3DCGを作成できる無料でオープンソースのソフトウェアである。モデリング、リギング、アニメーション、シミュレーション、レンダリング、合成、モーショントラッキング、さらにはビデオ編集やゲーム作成まで、3Dパイプライン全体をサポートしている\cite{blender}。鳥居など観光名所の3Dモデルの作成に使用する。

\chapter{Webコンテンツ作成システム}
4章の要件定義を踏まえ本システムを設計する。
\section{システムの流れ}
本システムの大まかな流れについて説明する。(図.\ref{figure:system})
\begin{enumerate}
    \item 左上のマップのマーカをクリックする。
    \item 右上に3Dモデルが表示される。
    \item その3Dモデルにちなんだクイズに答える。
    \item 正解すると下部のスタンプが押される。
    \end{enumerate}
\begin{figure}[b]
    \centering
    \includegraphics[keepaspectratio, width=150mm]{system.pdf}
    \caption{システムの流れ}
    \label{figure:system}
\end{figure}

\section{マップの設計}
画面左上に庄内地域周辺の地図を設け，クリックできるマーカを配置する。ドラッグによるマップの移動や，拡大・縮小ができるようにする。
\begin{itembox}[l]{quiz.html}
\begin{verbatim}
<div class="map">
    <h1 class="ttl">マップ</h1>
    <div id="mapcontainer"></div>
</div>
\end{verbatim}
\end{itembox}

\begin{itembox}[l]{map.js}
\begin{verbatim}
//Leafletでの処理
function init(){
    var map = L.map('mapcontainer');    //地図を表示するdiv要素のidを設定
    var mpoint = [38.7482, 139.9058];   //座標の指定
    map.setView(mpoint, 10);        //地図の中心とズームレベルを指定
    //表示するタイルレイヤのURLとAttributionコントロールの記述を設定して，地図に追加する
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a>
        contributors,'
    }).addTo(map);
}
\end{verbatim}
\end{itembox}

\section{クイズの設計}
画面右上に3Dモデルが切り替わるスペースを設け，ドラッグで見渡せるようにする。その下にクイズの問題文と選択肢を書き，正誤の判定が出るようにする。
\begin{itembox}[l]{quiz.html}
\begin{verbatim}
<div class="quiz">
    <h1 class="quiz ttl">クイズ</h1>
    <iframe id="model" src="" width="" height=""> </iframe>
    <p id="quiz" class="question">問題文</p>
    <button id="a" class="btn" type="button" name="a" value="a">選択肢A</button>
    <button id="b" class="btn" type="button" name="b" value="b">選択肢B</button>
    <button id="c" class="btn" type="button" name="c" value="c">選択肢C</button>
    <p id="result">　</p>
    <div id="answer" class="none">解答</div>
</div>
\end{verbatim}
\end{itembox}

\begin{itembox}[l]{map.js}
\begin{verbatim}
//選択肢がクリックされたときの処理
document.addEventListener("DOMContentLoaded", () => {
    document.getElementById("a").addEventListener("click", () => {
        judgeAnswer("a");
    });
});
\end{verbatim}
\end{itembox}

\section{スタンプラリーの設計}
画面下部に空のスタンプをいくつか設置する。クイズに正解すると画像が切り替わり，スタンプが貯まるようにする。
\begin{itembox}[l]{quiz.html}
\begin{verbatim}
<div class="stamp">
    <h1 class="ttl">スタンプ</h1>
    <img id="image1" src="image/img.png">
    <img id="image1" src="image/img.png">
    <img id="image1" src="image/img.png">
    <img id="image1" src="image/img.png">
    <img id="image1" src="image/img.png">
</div>
\end{verbatim}
\end{itembox}

\begin{itembox}[l]{map.js}
\begin{verbatim}
//解答の判定とスタンプの切り替え
function judgeAnswer(abc) {
    var select = document.getElementById(abc).value;
    var answer = document.getElementById("answer");
    if (select == answer.textContent) {
        document.getElementById("result").innerHTML = "正解!!";
        document.getElementById("result").setAttribute("class", "correct");
        document.getElementById("image1").setAttribute("src", "../image/koeki.png");
    } else {
        document.getElementById("result").innerHTML = "不正解…";
        document.getElementById("result").setAttribute("class", "incorrect");
    }
}
\end{verbatim}
\end{itembox}

\begin{figure}[tb]
  \centering
  \includegraphics[width=15cm]{screenshot.png}
  \caption{実際のWebページ}
  \label{figure:web}
\end{figure}

\chapter{システムの検証}
\section{実験の概要}
実際に本システムを使用してもらって検証する。詳細はシステムとして利用できるようになったら記載する。

\section{実験結果}
実験終了後、結果を記載する。

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

% 結論は簡潔に。
% 最後に参考文献を必ず正しく記載する。
% 原稿がどの程度のクォリティなのか参考文献である程度分かる。
\chapter{結論}
マップ上にあるマーカのクリックで，表示される3Dモデルとクイズが1つのページで切り替わり，操作しやすい画面にすることができている。しかし，クイズが易しめで反映した地点も湯殿山神社と東北公益文科大学の2つのため少なく，スタンプを増やしていくことができないのが現状である。
今後は，クイズの問題文や選択肢を無限個に増やしても対応可能にし，観光地の詳しい説明を書き加えていく必要がある。また，使える3Dモデルを増やしていき，獲得したスタンプが重複せずに貯められるようなシステムになるよう進めていく。

\begin{thebibliography}{}
    \bibitem{kosaka}小坂典子. ``人口低密度地域での観光振興について考えてみます [コラムvol.396]''.\\\url{https://www.jtb.or.jp/researchers/column/column-low-population-kosaka/}, (参照2022-11-15).
    \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{nagai}永井拓登・増井詩菜・佐々木喜一郎. ``白川郷の観光スポットを巡覧できる自己完結型スタンプラリーアプリケーションの検討''.\\\url{https://ipsj.ixsq.nii.ac.jp/ej/?action=repository_action_common_download&item_id=197450&item_no=1&attribute_id=1&file_no=1}, (参照2022-11-15).
    \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).
    \bibitem{blender}Blender Foundation. ``About―blender.org―''.\\\url{https://www.blender.org/about/}, (参照2023-02-06).
\end{thebibliography}

\end{document}