%#!platex -kanji=%k
%#DVIPDF dvipdfmx -f ipa.map
\documentclass{jsbook}
\usepackage[dvipdfmx]{graphicx}
% \usepackage[dvipdfmx]{color}
\usepackage{ascmac}
\usepackage{geometry}
\usepackage{url}		% 文中にURLを書くときは \url{} で括る
\setcounter{tocdepth}{3}
\geometry{textwidth=160mm,
textheight=225mm}
\renewcommand{\bibname}{参考文献}
\pagestyle{headings}

%% タイトル %%
\title{WebARスタンプラリー開発支援システムの提案}

%% 著者 %%
\author{広瀬研究室4年\\C1191150 佐藤文哉}

%% 日付 %%
\date{令和4年度}

\begin{document}
\maketitle

% \renewcommand{\abstractname}{概要}
\begin{center}
  {\bfseries 概要}
\end{center}
ARとは，「Augmented Reality」の略称であり「拡張現実」のことを指す。
現実世界を主体に新たな画像・テキスト・3Dモデルなどの情報を付け加えることが
できる。そのため，機材を設置する必要がないなどの利点があり，様々な事業で取り入れら
れている技術である。
日本は，このAR技術を観光立国推進のために活用しようと考えており，観光アプリケーショ
ンをはじめとする，観光領域でのARの活用を推し進めている。
特にARとスタンプラリーの組み合わせは，観光者の体験価値の向上やイベント
会場の周遊・回遊率の向上などの利点が存在する。そのため，近年では地方自治体や観光
協会などで，ARスタンプラリーを活用したイベント数が増加傾向にある。
しかし，ARスタンプラリーの作成には専門的な知識が必要であり，情報通信技術に
精通していない人やプログラミングの知識がない人が作成するには困難である。

そこで，本研究では，ARスタンプラリーの作成に必要な技術を補助し，簡単な操作のみでAR
スタンプラリーを作成することができるWebサービスの開発・提案を行う。
そして，実際に利用することを想定した実験を行い，利便性およびサービスとしての実用性について
評価と考察を行った。(518文字)

% 目次
\tableofcontents

\clearpage
% ------------------------一章------------------------ %

\chapter{はじめに}\label{sec:first_chapter}
本章では研究の背景と目的について説明する。

\section{背景}
現代の日本において地方の過疎化や人口減少は大きな社会問題となっている(図\ref{fig:population_change})。
総務省統計局の「人口推計結果の要約(2018年)」によると，日本の人口は2008年
をピークに，低下の一途をたどっている\cite{地域・地方の人口}。それに伴う少子高齢
化，労働人口数の低下は，どの企業や自治体においても無視できない緊急課題となってき
ており，地域活性化の方法は様々な技術で模索されている。その中の一つに観光事業
におけるAR技術の活用がある。国土交通省は観光立国推進のためにAR観光アプリ
ケーションをはじめ，低コストでわかりやすい情報提供ができるAR技術の活用を推奨
している\cite{ARの活用}。
また近年，インターネットや5G
\footnote{5Gとは「5th Generation」の略称であり，携帯電話などに用いられる次世代通信規格の5世代目のこと。}
による携帯電話通信網の発展により，観光地でのモバイル機器を用いたサービスにも
変化がある。ARでは映像や3DCGなどのコンテンツがサービスとして提供されるため，
高速かつ大容量な通信量が求めらる。
従来の通信規格では，AR技術の活用は難しかったが，5Gによってこれらの問題は解消された。
インターネットが高速化とWebサービスの遅延の低減の実現により仮想空間と現実世界に対して
より没入感が得られる環境が整い，観光領域でのAR技術の活用はより一層進んでいる。
特にARとスタンプラリーの組み合わせは相性がよいとされており，スタンプラリーの
効果である滞在時間の増加や回遊率の向上に加え，ARコンテンツは現実空間に演出を付け加える
ことができるため，新しい体験価値の付与や幅広いイベントに対応可能である。
このような理由から，ARスタンプラリーは地域活性化のツールの一つとして，多くの自治体
や観光協会で導入されている。

%-----------------------------------------------------------------------
しかし，AR技術を活用したシステム構築は専門的な知識が必要であり，情報通信技術に
精通していない人やプログラミングの知識がない人にとっては難易度が高い。
%-----------------------------------------------------------------------
また，ARの演出に利用する3Dモデルも専門的な知識とツールの使い方を知らねければ作成することが
出来ないのが問題である。
そこで，本研究ではWeb上で動作するARスタンプラリー(以下「WebARスタンプラリー」とする)の作成に必要な技術を補助し，簡単な操作のみでWebAR
スタンプラリーを作成することができるWebサービスの開発・提案を行う。これにより誰でも
簡単にWebARスタンプラリーの作成ができるようになり，観光地の集客の増加や観光地での新たな
体験を生み出すことで，地域活性化の一助になるではないかと考えた。

\begin{figure}[htb]
  \centering
  \includegraphics[width=15cm]{./img/population_change.pdf}
  \caption{日本の人口推移\cite{人口推移}}
  \label{fig:population_change}
\end{figure}
\section{研究目的}
本研究では簡単な操作のみでWebARスタンプラリーシステムを作成できるシステムを作成する。
そしてこのシステムを利用することで，観光客の観光地へのと集客と観光地での体験が誘発するこ
とを目的としている。また，WebARスタンプラリー作成システムとして実際に利用することを
想定し実用性・保守性を考慮しながら提案する。


\section{スタンプラリーの効果}
「大須商店街」で実施されたスタンプラリーの実証実験\cite{スタンプラリー}を元にスタンプラリーの利点と傾向について述べる。
図\ref{fig:effect-rally01}と図\ref{fig:effect-rally02}によると，スタンプラリーを実施することで
回遊率と滞在時間が増加することがわかる。さらに，スポットの数が多いとより滞在時間が長くなる。

\begin{figure}[htb]
  \centering
  \includegraphics[width=15cm]{./img/effect-graph01.pdf}
  \caption{「大須商店街」で実施された回遊率の実証実験の結果\cite{スタンプラリー}}
\label{fig:effect-rally01}
\end{figure}

\begin{figure}[htb]
  \centering
  \includegraphics[width=15cm]{./img/effect-graph02.pdf}
  \caption{「大須商店街」で実施された滞在時間の実証実験の結果\cite{スタンプラリー}}
\label{fig:effect-rally02}
\end{figure}

% ------------------------二章------------------------ %
\chapter{先行研究と類似サービス}\label{sec:second_chapter}
本章では現状と課題点を探るために，観光とARに関する関連研究と本サービスの類似サービスについて調査した。
\ref{sec:connection}では，ARと観光の可能性やARスタンプラリーに関する研究と
ARの演出に必要とする3Dモデリングに関する研究を取り上げる。
\ref{sec:similar}では，スタンプラリー作成補助サービスについて取り上げている。

\section{関連研究} \label{sec:connection}
ARと観光を組み合わせたシステムの研究事例とスタンプラリーにおける位置情報の活用事例について紹介する。

\subsection{ARコンテンツにおけるユーザ満足度}

越後らの研究\cite{先行研究1}では，聖地巡礼地を舞台とした AR スタンプラリーシステム
の開発を行っている。聖地巡礼は2016年に新語・流行語大賞トップ10に入賞しており，日本で
注目が集まっている。

越後，小林らは，この聖地巡礼を活用したARスタンプラリーの開発を行い
，単にスタンプを集めたり，アニメのキャラクタや道具などが AR で表示されたり
するだけではなく，地元の人と聖地巡礼者が話すきっかけとなるようなシステムの開発
を目的としている。このシステムはマップなどはなく，例えば聖地で登場した食べ物
や家電などをCGモデルとして表示させ，聖地巡礼者はそれをヒントに地域の人に話しか
け目的地を目指すように誘導している。
実証実験のアンケートでは，紙媒体のスタンプラリーに比べ，話すきっかけになったと
感じている人が多かった。また課題として音楽・アニメーション・エフェクトがあると
「もっと楽しいと感じる」という意見があった。

\subsection{画像認識型 AR を用いた観光情報の提供}
近年，観光地と観光者を結びつける観光情報の提供は，インターネットや携帯電話
などのモバイル機器の活用が期待されている。しかし携帯電話では，操作習熟の
困難さ等から効率的な情報提供手段とならない場合や紙媒体の長所，IT機器の長所
を活かし切れていない，といった課題が指摘されている。それに対しARは
現実を増強，拡張しようとする技術で，仮想世界と現実世界を関係づけ，人間の現実世
界での活動を支援する情報提供手法のひとつとして注目されている。
この研究ではARを活用し，よりスムーズな観光情報の提供を実現を目的としている\cite{先行研究2} 。
システムの内容は，紙地図に印刷した観光スポットなどの写真画像をスマート
フォンの内蔵カメラで撮影し，その画面上の写真画像に対して，詳細な内容を説明
する映像コンテンツを自動的に表示させることできるものとなっている 。
ARを技術を利用することにより，情報提供の幅が広がりARと観光を組み合わせた
サービスには魅力性と有効性があるとしている。
JR小樽駅での実験では，あらかじめARアプリケーションをインストールしたスマートフォン
を用意し，実際に使ってもらった人たちに操作性・快適性・認知性・有効性・魅力生に関する
アンケートを行い，操作性や魅力性については良好な評価を得ているが，
画像認識精度が低い点や屋外環境に適していないなどの課題があげられている。


\subsection{スタンプラリーにおけるページ構成}\label{sec:rally_page}
名古屋大学浦田ら\cite{先行研究3}では，観光者に対して観光スポット間の移動動機を付与
することを目的とし，フォトラリー\footnote{スタンプラリーの仕組み
を応用し，スタンプを写真で代替したフォトラリーのこと\cite{先行研究3}。}による
観光支援から観光者の観光体験の生み出すシステムの作成を行っている。
スタンプラリーを行うためには，スタンプの獲得機能と情報を表示する機能，それらで
扱う情報を管理する機能を必要としている。
特に，どこにスポットが存在しているか示す機能が重要だと考えており，地図ベースの情報提供を行っている。
スポットの位置情報と観光者の位置情報の表示をすることで，観光スポットが存在する位置情報を観光者が直感的に分かるとしている。

\subsection{3Dモデルの作成における学習難易度}
河田らの研究\cite{先行研究4}では，3Dモデルリングの学習は初学者にとって困難と
する原因があると指摘している。
一般的な3Dモデリングの工程は手順が多く，3Dモデリングの習熟者による授業での演習や
学習テキストでは，アプリケーションソフトウェアの操作に関する説明が多くなる。
そのため，操作になれていないが学習者は指導者の操作を追うことで手一杯になり，結果として
操作に重点においた演習になるとしている。

\section{類似サービス}\label{sec:similar}
スタンプラリー作成補助システムは，地方自治体や観光協会などで利用されており，アニメの
聖地巡礼・音楽イベントなど様々な用途で活用することができる。近年では，ARスタンプラリー
の作成補助を行っているシステムは少なくない。
そこで，本研究で作成するスタンプラリー作成補助サービスの類似サービスについて調査し，
サービスとしての課題点を探る。

\subsection{ARTO QUESTO}
ARTO QUESTは誰でも簡単にARスタンプラリーが作成できるサービスである\cite{ARTO QUEST}。
運営者/参加者ともに専用のアプリをインストールせずに，スマートフォンのカメラ機能を使って簡単にAR体験ができる。
ARは，マーカー型AR
\footnote{
  画像や写真などをマーカとして登録し，カメラでそのマーカーを
  解析することで，それに準じたARを表示される技術のこと。}
を利用しておりアニミーションや効果音があることが特徴である。また，
スタンプラリーの公開手順もSNSと連携することで簡単にできる。
しかしどこに行けばスタンプが獲得できるかなどの情報提示の不十分により，事前にスポットを知る日必要が有り
AR スポットをアプリ内で見つけられないことが課題点である。

\begin{figure}[htb]
  \centering
  \includegraphics[width=15cm]{./img/ARTO-QUEST.pdf}
  \caption{ARTO-QUESTの画面}
\end{figure}

\subsection{Rally}
RALLYは，株式会社RALLYが運営しているスマホで遊べるスタンプラリーが作成できるサービスである\cite{Rally}。Rallyは，AR
スタンプラリーではないがスタンプラリーに必要な情報を詳細に登録ができたり， ページデザインを
オリジナルデザインに変更できたり， 拡張性が高いのが特徴である。作成されたスタンプラリーは
すぐに公開が可能で，QRコードやURLを用いた告知が行える。一方で，様々な機能があることにより，
運営のサポートが必要な場合があったり，対応ブラウザが限られるなどの課題点がある。

\begin{figure}[htb]
  \centering
  \includegraphics[width=15cm]{./img/RALLY.pdf}
  \caption{RALLYの画面}
\end{figure}

\subsection{類似サービスの課題点}
一つ目は，スタンプの獲得できる場所の情報提示が不十分な点である。
どこにスポットが存在しているか示す機能がないとユーザはあらかじめスポットの位置情報
を把握しておく必要性がでてくる。
そうなると，ユーザがスムーズにスタンプラリーを進めることは出来きなくなるため，
スポットの位置情報を観光者が直感的に分かるようにする必要がある。

二つ目は，AR表示のトリガーとなるマーカーやQRコードを印刷した紙の設置が必要な点である。
ARの表示やスタンプの獲得には，QRコードを印刷した紙を観光スポットに設置する必要があ
るため，場所が限られてしまったり，屋外でのイベントでは天候に左右されたりする可能性がある。
また，2020年より新型コロナウイルス感染症は世界的に感染を拡大し，人同士の接触や
ドアノブや手すりなどの間接的な接触による感染拡大が問題となっている。
そうした状況で物理的な設置を使うことにより人同士の接触が多くなるという課題点がある。


% ------------------------三章------------------------ %
\chapter{提案}\label{sec:three_chapters}
本章では，\ref{sec:first_chapter}章，\ref{sec:second_chapter}章で挙げた背景・目的・
課題点を踏まえたシステムの提案を行う。
\ref{sec:similar}節で挙げた類似サービスの課題点から本サービスにおける改善案を定める。また具体的なサービス
の提案，スタンプラリーの作成手順と本サービスを使って作成されるスタンプラリーの
構成について説明する。


\section{課題に対する改善案}\label{sec:service}
\ref{sec:similar}節で述べた類似サービスの課題点を元に本サービスで必要となる改善案を以下のように定めた。
%-------------------------------
%具体的に数字など　特徴じゃなく機能など書く
\begin{itemize}

  \item 容易な操作で実行可能にする

  スタンプラリー作成者が必ずしも情報通信技術に精通しているとは言えないため，容易に情報の入力が
  行えるようにする。
  \item 3Dキャラクタのテンプレート機能

  3Dキャラクタの作成は難易度が高いため，3Dキャラクタのテンプレートをいくつか用意し，技術者以外の利用も可能にする。
  スタンプラリーでは，テーマに応じたキャラクタや設置場所を象ったデザインが利用されることが多いため，
  管理者自身がデザインし作成した3Dキャラクタを利用することも可能にする。

  \item 観光スポットの位置情報を設定した位置呼応マップの作成機能

  観光スポットが存在する位置情報を観光者が直感的に分かるようにするために必要。

  \item 屋外と屋内のどちらでも利用可能

  様々な観光スポットに対応できるように，屋外と屋内のどちらにも対応させる。

  \item 作成したスタンプラリーの公開機能

  作成したスタンプラリーの公開は，サーバーサイドの準備などが専門的な知識が必要なため，容易に公開出来る必要がある。

\end{itemize}


\section{システムの概要}
本研究で作成するサービスは，ユーザがプログラムのコードを書かずにWebARスタン
プラリーを作成できるものとする。作成したWebARスタンプラリーのURLが発行さ
れ，SNSで手軽に公開することが可能である。また，スタンプラリー名や紹介文の設定，
3Dキャラクタや写真のアップロード機能を持たせることで，オリジナルの
スタンプラリーの作成ができ，他のスタンプラリーとの差別化を行うことができる
（図\ref{fig:system_overview}）。これらの操作の中で，HTML・CSS・
JavaScriptなどのコードを書く必要はなく，Web上での作業のみで完結するものとする。

\begin{figure}[htb]
  \centering
  \includegraphics[width=15cm]{./img/System_Diagram.pdf}
  \caption{本システムの概要図}
  \label{fig:system_overview}
\end{figure}

\section{作成されるスタンプラリー}
本システムで作成されるスタンプラリーは，\ref{sec:rally_page}節を参考にし，ホーム画面・マップ・ARパート・スタンプ獲得一覧の計4ページで構成されるスタンプラリーを作成できるものとする。

\begin{itemize}
  \item ホーム画面

  スタンプラリーのタイトルやスポット情報に加え，使い方と注意事項について表示する。

  \item マップ

  各スポットの位置情報とユーザの位置情報を表示する。また，ユーザをリアルタイムに
  追跡する。

  \item ARパート

  ARパートでは，ARの表示とスタンプの獲得が行える。

  \item スタンプ獲得一覧

  スタンプの獲得状況を確認できる。

\end{itemize}
マップからユーザの現在地とスポットの位置を確認し， あらかじめスポット
に近づくと自動的にARパートに移動し，カメラを起動する。その後 ，スタンプ獲得ボタンを押すことで
でスタンプの獲得を行えるものとする(図\ref{fig:about_stamp_rally})。

\begin{figure}[htb]
  \centering
  \includegraphics[width=15cm]{./img/stamp_rally_flow.pdf}
  \caption{WebARスタンプラリーの概要}
  \label{fig:about_stamp_rally}
\end{figure}

\chapter{システム設計} \label{sec:sekkei}
本章では\ref{sec:three_chapters}章をもとに，システムの設計を行う。\ref{sec:service}節で
定めた要件を軸に，本システムに必要な機能設計と本システムを利用することで
作成されるWebARスタンプラリーの機能を以下に示す。
本サービスで作成するWebARスタンプラリーは図\ref{fig:system_flow}の流れで作成されるものであり，
作成されるスタンプラリーの流れは図\ref{fig:stamp_rally_flow}の通りである。
また，設計した機能を実現するために使用する技術やライブラリを以下に示す。

\section{本システムの全体構成}
本システムのフロントエンドアーキテクチャはSPA(シングルページアプリケーション)
\footnote{SPAとは，単一のWebページのみから構成することで，
デスクトップアプリケーションのようなユーザ体験を提供するWebアプリケーション
またはWebサイトである。
  % \cite{spa}
}
で作成する。
ARスタンプラリーの作成は，ARの位置調整や情報の更新など編集とテストを繰り返す必要があるため，頻繁に編集ページを行き来すると想定される。
そのため，画面遷移のたびにサーバから追加的にコンテンツを読み込む必要あるMPA(マルチーページアプリケーション)
\footnote{MPAとは，複数のページから構成されるWebページであり，
コンテンツが変わる度にページのリロードが必要である。
  % \cite{mpa}
}
よりも，
前のページの差分のみの更新と一度ページを読み込んでしまえば
ネットワークの通信速度に左右されない仕組みにより，ページ遷移にかかる時間が少ないSPAを採用する。

\section{開発環境}
本システムの作成に使用した技術とバージョンを以下に示す。

\begin{itemize}
  \item Vue.js - 3.2.37

  Vue.jsは，Webアプリケーションにおけるユーザーインターフェイスを構築するための
  オープンソースのJavaScriptフレームワークである。本サービスでは，
  主にSPAの構築とUI画面の構築のために使用する。

  \item Node.js - 18.9.0

  Node.jaは，Webページ作成などの際に使われるJavaScriptを
  サーバー側で動作させるプラットフォームである\cite{node.js}。

  \item Express - 4.18.1

  Expressは，ネットワークアプリケーションを構築するための JavaScript 環境である Node.js の Web
  アプリケーションフレームワークである\cite{Express}。

  \item sqlite3 - 3.36.0

  sqliteは，サーバーとしてではなくアプリケーションに組み込むことができる
  データベースである\cite{sqlite3}。本システムのデータベースとして利用する。

\end{itemize}

\section{スタンプラリーの全体設計と詳細情報の管理機能}
スタンプラリーに関する情報は全てデータベースに保存する。
スポットに関しては，1つのスタンプラリーに対して複数存在すると考えられるため，テーブルを分けて保存する(図\ref{fig:db})。
また，本システムはログイン機能をもたせることで第三者がスタンプラリーに勝手に変更を加えられないようにする。

\begin{figure}[htb]
  \centering
  \includegraphics[width=15cm]{./img/db_table.pdf}
  \caption{本システムのデータベース}
  \label{fig:db}
\end{figure}


\section{屋内と屋外へ対応}
類似サービスでは，ARの表示にマーカーを必要とするためマーカーを印刷して指定の場所に置いておかなくてはならない。
しかしマーカーの設置は場所が限定される上に，天候によって設置出来ないことも考えられる。
そのため，ARの表示方法はマーカーに加え，位置情報を用いて行い，マーカーの設置が出来ないような屋外でも使えるようにする。

\section{3Dキャラクタのテンプレートの用意}
ARに用いる3Dキャラクタの作成は難易度が高いため，3Dキャラクタのテンプレートを3つ用意し，技術者以外の利用も可能にする。
本来のスタンプラリーでは，テーマに応じたキャラクタや設置場所を象ったデザインが利用されることが多いため，
スタンプラリー作成者自身がデザイン，作成した3Dキャラクタを投稿し利用することも可能にする。

% \subsection{データベース設計}
% データベースにはRDBを利用する。あらかじめ格納すべきデータを分析し，正規化を行い

\begin{figure}[htb]
  \centering
  \includegraphics[width=10cm]{./img/administrator-flow.pdf}
  \caption{WebARスタンプラリーのシステムの流れ}
  \label{fig:system_flow}
\end{figure}

\section{WebARスタンプラリーの全体設計}
本システムで作成されるWebARスタンプラリーのUIは，スマートフォンを使う
ことを想定したデザインにする。あらかじめ，デザインのテンプレートがあり
各設定を行うと，データベースから保存した情報を取得しテンプレートに当ては
めていくことで作成されるものとする。

\section{WebARスタンプラリーで使用するJavaScriptライブラリ}
本システムで作成されるスタンプラリーのマップ機能とARパートは以下のJavaScriptライブラリを用いて実現する。

\begin{itemize}
  \item Leaflet

    JavaScript のライブラリの一種であり，Web 上にタイルベースの地図データを表示すること
    ができる。

  \item A-Frame

    ARパートの作成には JavaScript の A-Frame ライブラリと AR.jsライブラリを使用し作成した。A-Frame は VR
    \footnote{VR（バーチャルリアリティ）とは現実と変わらない体験を人工的に実現させることを目指す技術のこと\cite{VR}。}
    を構築するためのOSS
    \footnote{OSSとは，ソースコードの改変や再配布が自由に認められている無償のソフトウェアである\cite{OSS}。}の Web フレームワークの一つであり，CSS のように HTML に読み込ませることで使用できる。
    A-Frameを3Dモデルを表示するために使用する。

  \item AR.js

    AR.jsはWebAR開発のための代表的なOSSの一つであり，A-Frameと同様にHTMLに組み込むことで簡単に実装することができる。
    AR.jsをその3Dモデルを現実空間と結びつけるために使用する。
\end{itemize}

\section{使用するAR技術}\label{sec:AR}
AR.jsで利用できるAR技術は複数あり，本システムでは以下の2つを利用する。

\begin{itemize}
  \item マーカ型（画像認識型，ビジョンベース）

    画像や写真などをマーカとして登録し，マーカを認識するとARコンテンツ
    情報（動画・3D・マップ）を表示する。
\end{itemize}

\begin{itembox}[l]{marker-ar.ejsマーカ型ARの記述例}
  \begin{verbatim}
  <a-marker preset="hiro"> <!--マーカーの指定-->
    <a-entity
      gltf-model="#3DオブジェクトのID"
      scale = "1 1 1" <!--大きさ-->
      potion="0 3 0" <!--位置-->
      gltf-model="3DオブジェクトのID">
    </a-entity>
  </a-marker>\end{verbatim}
\end{itembox}
\begin{itemize}
  \item GPS型（位置認識型，ロケーションベース）

    スマートフォンなどの端末の現在位置をGPSで取得し，付近に設定されたARコ
    ンテンツを表示する。
\end{itemize}

\begin{itembox}[l]{location-ar.ejsGPS型ARの記述例}
  \begin{verbatim}
  <a-entity
    gps-entity-place="latitude:緯度; longitude:経度;"
    look-at="[gps-camera]"
    scale = "1 1 1" <!--大きさ-->
    potion="0 3 0" <!--位置-->
    gltf-model="#3DオブジェクトのID">
  </a-entity>\end{verbatim}
\end{itembox}

\begin{figure}[htb]
  \centering
  \includegraphics[width=10cm]{./img/user-flow.pdf}
  \caption{スタンプラリーの流れ}
  \label{fig:stamp_rally_flow}
\end{figure}

\newpage

\chapter{システム開発}
\ref{sec:sekkei}章を元にシステム開発を行う。ARの実現や位置呼応マップの作成にはJavaScript を
用いる。本システムは，設定したい情報を入力や選択をした後に保存ボタンをクリックすることでデータベース
に情報が送信され保存されるものである。

\section{スタンプラリーの基本設定}
図\ref{fig:UI}はタイトルと紹介文，作成されるスタンプラリーのメインビジュアルとなる画像
を設定し，保存するページである。
入力フォームではユーザ自身がテキストの入力を行う。画像ファイルの投稿フォー
ムには HTML から accept 属性で jpg, jpeg, png, svg形式を指定することで，投稿できる
画像の種類を限定している。
設定した内容は図\ref{fig:home}のように反映される。
\begin{figure}[htb]
  \centering
  \includegraphics[width=15cm]{./img/nocode-AR-edit.pdf}
  \caption{基本設定ページ}
  \label{fig:UI}
\end{figure}

\begin{figure}[htb]
  \centering
  \includegraphics[width=8cm]{./img/home.pdf}
  \caption{ホーム画面}
  \label{fig:home}
\end{figure}

\section{各スポットの設定}\label{sec:setting_spot}
図\ref{fig:spot_image1}，図\ref{fig:spot_image2}は，スポットの名前・
場所を示す緯度と経度・スポットの画像を設定ることができるページである。
スポットの名前は入力フォームではユーザ自身がテキストの入力を行う。
画像ファイルは，投稿フォームに画像ファイルをドラックアンドドロップするか
ファイル選択から投稿することが可能である。
場所の設定は，JavaScript ライブラリの Leaflet.jsを使用し，
マップの表示とマップ上で設定したい場所をクリックした時にその緯度と経度の取得
が可能である。各設定をした後保存ボタンをクリックすることでデータベースに反映される。

\begin{itembox}[l]{spot.vueマップの表示とクリックした時に位置情報の取得}
\begin{verbatim}
onMounted(() => {
  let map = L.map('map').fitWorld()
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>
    contributors',
    maxZoom: 18,
    tileSize: 512,
    zoomOffset: -1,
  }).addTo(map)
  map.setView([38.575, 136.984], 5) //マップの中心位置
  console.log(state.spot.lng)
  let marker = L.marker({
    lat: state.spot.lat,
    lng: state.spot.lng,
  }).addTo(map)
  map.on('click', function (e) {
    if (marker) map.removeLayer(marker) //マーカー削除
    marker = L.marker(e.latlng).addTo(map) //マーカー追加
    marker.bindPopup('緯度:' + e.latlng.lat + '<br>経度:' + e.latlng.lng).openPopup()
    state.spot.lat = e.latlng.lat
    state.spot.lng = e.latlng.lng
  })
})
\end{verbatim}
\end{itembox}

\begin{figure}[htb]
  \centering
  \includegraphics[width=15cm]{./img/nocode-AR-spot-img-upload.pdf}
  \caption{スポット名と画像の設定}
  \label{fig:spot_image1}
\end{figure}

\begin{figure}[htb]
  \centering
  \includegraphics[width=15cm]{./img/nocode-AR-latlng.pdf}
  \caption{スポットの位置情報の設定}
  \label{fig:spot_image2}
\end{figure}

\subsection{位置呼応マップ}
利用者が，実際に現地に行きスポットとの距離に応じて画面を展開するのが位
置呼応マップである。これには，HTMLのGeoLocationAPIと
Leaflet.js を利用し，現在地点に連動して地図を表示さ
せる機能を実装した。
GPS センサを装備しているモバイルデバイスでマップパートの Web ページ
にアクセスすることでデバイスの位置情報が送信され，その都度地図上に利用
者の現在位置が反映される。また，取得した位置情報とスポットの距離を算出し
あらかじめ定めた閾値以下になった場合に自動的に画面が遷移し，ARパートに移動する。
その他に，スポットの位置を確認できるようにスポットの検索機能を実装した。
スポットの名前を入力または選択しマップ上部にある検索ボタンを押すと
マップの中心位置がそのスポットに設定される（図\ref{fig:map}）。

\begin{itembox}[l]{map.ejs位置情報の取得}
  \begin{verbatim}
  // 位置情報取得できなかったときの処理
  function onLocationError(e) {
    alert(e.message);
  }
  // 位置情報を持ってくる関数
  function watchFound(e) {
    onLocationFound({
      latlng: L.latLng([e.coords.latitude， e.coords.longitude])，
      accuracy: e.coords.accuracy});
  }\end{verbatim}
\end{itembox}

\begin{figure}[htb]
  \centering
  \includegraphics[width=7cm]{./img/map.pdf}
  \caption{マップ画面}
  \label{fig:map}
\end{figure}

\newpage
\section{ARパートの設定}
図\ref{fig:ar-tpl}は，3種類のARキャラクタを表示しそれらから選択する。
またはユーザが所持しているARキャラクタの投稿・保存できるページである。
ARキャラクタにはスタンプ獲得時のアニメーションを付与してある。
3種類のキャラクタの画像をスライドで表示し，画像の下にある選択ボタンをクリック
することで選択が可能である。ARキャラクタは1種類のみ選択可能であるため
選択ボタンはHTMLのradio属性にすることで複数選択できないようにしている。
オリジナルのARキャラクタを使用する場合は，ファイルの投稿フォー
ムにドラックアンドドロップするかファイル選択から使用したいARキャラクタを投稿
することで使用できる。
投稿フォームは HTML の accept 属性で gltf, glb
\footnote{glTF（GL Transmission Format）とは，3Dモデルのファイル形式のひとつで，
主にWebブラウザ上で動作するコンテンツを作る際に用いられるフォーマットである。
また，glTFをバイナリ形式に変換したものがglbである。}
形式を指定することで，投稿できる
ファイルの種類を限定している。

\begin{figure}[htb]
  \centering
  \includegraphics[width=15cm]{./img/nocode-AR-tpl.pdf}
  \caption{ARキャラクタのテンプレート機能}
  \label{fig:ar-tpl}
\end{figure}
% \subsection{}
\newpage
\section{公開機能}
図\ref{fig:public_setting}は作成したスタンプラリーをすぐに公開するためのページである。
URLはテスト用URLと公開用URLがあり，テスト用URLは常にレンダリングされており作成した
スタンプラリーの状態を確認することができる。公開用URLは，
公開ボタンをクリックすることでデータベースに情報が送信され，条件分岐を
用いてサーバーサイドでレンダリングされるようになる。
URLはスタンプラリーの作成時に作成されており，2つのURLの区別するために
テスト用URLには作成されたURLに「/prebiew」という文字列を付けている。
また，URLは重複しないように生成する。

\begin{itembox}[l]{urlの生成}
\begin{verbatim}
  const createUuid = () => {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (a) {
    let r = (new Date().getTime() + Math.random() * 16) % 16 | 0,
      v = a == 'x' ? r : (r & 0x3) | 0x8
      return v.toString(16)
    })
  }
\end{verbatim}
\end{itembox}

\begin{figure}[htb]
  \centering
  \includegraphics[width=15cm]{./img/public_setting.pdf}
  \caption{公開機能}
  \label{fig:public_setting}
\end{figure}

\chapter{実験}
本章では作成したシステムを動作させ実験を行い，
WebARスタンプラリーを問題なく作成できるか，どのような問題点があるかを調査する。
実験の概要や実験手順は以下に示す。また，実験により判明した実験結果とその考察を述べる。

\section{実験概要}
実験では，本学の学生11名の被験者が本システムを使用しWebARスタンプラリーの作成が行えるか
実験し，作成できるまでの時間を計測した。
また，作成されたスタンプラリーの動作確認を行い問題点を探る。
作成するスタンプラリーの条件として設定項目のすべての設定を行う。
作成するまでの時間を計測するためスポット数は5つに設定し,実験の条件を揃える。
WebARスタンプラリーの作成までの実験の手順を以下に示す。

\begin{enumerate}
  \item 対象者にシステムの操作方法を説明する

  スタンプラリーの名前・キャッチコピー・画像などの設定方法の説明を行う。
  その後，ARの設定・スポットの設定・公開機能の設定について説明を行う。

  \item タイトルや紹介文を設定する

  設定する項目数に違いがないか，入力漏れがないか確認する。

  \item ARキャラクタを設定する

  ARパートの動作確認のためにテンプレートキャラクタを使用した場合と
  ARキャラクタをアップロードした場合の2つの設定を行う。
  11名の被験者にはテンプレートキャラクタを使用し作成させる。

  \item スポットの設定する

  スポットの名前とスポットの位置設定が正確に行えるか確認する。

  \item スタンプラリーの公開をする

  公開したスタンプラリーが動作するか確認を行い，
  テスト用URLと公開用URLのスタンプラリーの差異がないか確認する。

\end{enumerate}

作成したスタンプラリーは以下の4つの項目の確認を行う。

\begin{enumerate}
  \item ホーム画面の動作確認

  テキスト情報・画像が反映されているかを確認する。

  \item マップの動作確認

  スポットの検索機能・GPSの機能に不具合がないか，スポットの場所にずれがないか確認する。

  \item ARパートの動作確認

  スタンプの獲得が正常に行えるか，ARキャラクタの位置・角度・大きさは適切か確認する。

  \item スタンプ獲得機能

  UIに崩れがないか，獲得したスタンプ情報が反映されているかを確認する。
\end{enumerate}

\section{実験結果}
被験者11名のうち10名がスタンプラリーを作成することができた。
スタンプラリーの作成まで行えた10人はテキスト情報・画像・ARキャラクタなど
設定した項目が問題なく反映されていた。
スタンプの作成することができなかった1名は，スポットの位置情報の設定で問題が生じた。
位置情報は1つのスポットにつき1つ設定できるのだが，不具合により2つの位置情報が送信され，
作成途中でシステムエラーが発生した。

スタンプラリーの作成にかかった平均時間は6分5秒となり，分散は6910.1秒であった。
実験結果から本システムを使用することでWebARスタンプラリーの作成が行えるか
仮説検定を行った。帰無仮説は
「利用者は本システムでWebARスタンプラリーのページを作成できない」
と設定し，対立仮説を「利用者は本システムでWebARスタンプラリーのページを作成できる」
とする。有意水準0.01に設定する。
WebARスタンプラリーの作成ができるかどうかの確立を
\begin{math}
  \frac{1}{2}
\end{math}とした場合，p 値は
0.00537109375となり有意水準 0.01 より小さいため帰無仮説が棄却され，利用者は
利用者は本システムでWebARスタンプラリーのページを作成できるといえる結果になった。
表\ref{table:creation_time}が作成時間の実験結果である。

\begin{table}[htbp]
  \caption{作成時間}
  \label{table:creation_time}
  \centering
  \begin{tabular}{|c|c|}
  \hline
    & 作成にかかった時間 \\
    \hline
    1人目 & 5分22秒\\
    2人目 & 6分37秒\\
    3人目 & 8分45秒\\
    4人目 & 5分37秒\\
    5人目 & 5分5秒\\
    6人目 & 5分45秒\\
    7人目 & 5分31秒\\
    8人目 & 7分31秒\\
    9人目 & 4分40秒\\
    10人目 & 4分22秒\\
    11人目 & 8分4秒\\
    \hline
  \end{tabular}
\end{table}

\subsection{正常に動作するか}
  各ページごとにチェックする項目を設け正常に動作するか実験を行った。

\begin{itemize}
  \item ホーム画面の動作確認

  タイトル・キャッチコピー・紹介文・画像によるUIにずれが生じないか検証した。
  テキスト情報は，画面内に収まり読めない部分はなかったが，
  画像が縦に長いものや横に長いものを使用してしまうと画像が一部はみ出し見えない部分
  があった。

  \item マップの動作確認

  GPS機能・スポットの検索機能・ARパートへの移動などの機能に不具合がないか検証した。
  ユーザとスポットの位置情報は問題なく反映されており，GPS機能が搭載されている
  モバイルデバイスの追跡も正常に動作した。
  ARパートの移動も正常に動いたが，スポット同士の距離が近いと想定とは違うスポットの
  ARパートに移動してしまうことがあった。

  \begin{table}[htbp]
    \caption{作成時間}
    \label{table:map_creation_time}
    \centering
    \begin{tabular}{|c|c|c|c|}
    \hline
      スポット数 & GPS機能 & 検索機能 & ARパートへの移動 \\
      \hline
      5箇所 & ◯ & ◯  & ◯ \\
      \hline
      10箇所 & ◯ & ◯ & ◯ \\
      \hline
      15箇所 & ◯ & ◯ & ◯ \\
      \hline
    \end{tabular}
  \end{table}

  \item ARパートの動作確認

  テンプレートキャラクタを使用した場合は，表示や動作に問題はなかった。
  しかしアップロードしたARキャラクタを使用した場合は，大きさ・角度・位置
  が不安定であった。

  \begin{table}[htbp]
    \caption{ARパートの動作確認}
    \label{table:home_operation_check}
    \centering
    \begin{tabular}{|c|c|c|c|c|}
    \hline
      & UIの崩れ & 大きさ &  表示位置 & 表示角度 \\
      \hline
      テンプレートキャラクタを使用した場合 & なし & ◯ & ◯ & ◯ \\
      \hline
      アップロードしたキャラクタを使用した場合 & なし & △ & △ & △ \\
      \hline
    \end{tabular}
  \end{table}

  \item スタンプ一覧画面の動作確認

  タイトル・キャッチコピー・紹介文・画像によるUIにずれが生じないか，スタンプ
  の獲得状況が正しく反映されているか検証した。
  ホーム画面と同様に画像が縦に長いものや横に長いものを使用すると画像が
  はみ出し，一部見えないなどの問題があったが
  スタンプの獲得状況に関しては設定したスタンプ全ての獲得まで行えた。

\end{itemize}

\section{考察}
% 実験の被験者からの意見として，システムの使い方について確認でページがほしいという意見があった。
設定した内容を保存する際，保存ボタンをクリックしても内容が反映されているか
わからないため何度も保存ボタンをクリックする様子がみられた。
そのため，保存ができているかどうかをポップアップで表示させるか，
テスト用URLのページをプレビューとして常に画面内に表示するなどの対策が必要がある。

また，作成できるWebARスタンプラリーは機能が不十分なため，同じデザインのものしか作成できず
地方自治体や観光協会が実際に利用するにあたって，実用的であると判断するのは難しい
といえる。実験ではWebARスタンプラリーの作成まで行ったが作成したスタンプ
ラリーを実際に被験者が使用しサービスとしての実用性がある検討できる段階には至っていない。
そのため今回の実験でわかった課題点の改善とデザイン性を考慮できる
機能を追加し開発を進めていく必要がある。

\chapter{結論}
本研究では，プログラムのコードや3Dモデリングの技術がない人がWebARスタンプラリーの作成が行える
ことを目的としており，目的を実現するためにシステムを構築し実験を行なった。
結論として，実験から本システムを使用することでWebARスタンプラリーを作成すること
ができ，スタンプラリーとして機能することを確認できた。各ページの作成
このことから，本研究の目的である地域活性化の一助となるシステムの
開発ができたといえる。

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

\begin{thebibliography}{99}
  \bibitem{地域・地方の人口} (株)富士通総研.“地域・地方の現状と課題"

  \url{https://www.soumu.go.jp/main_content/000629037.pdf}， (参照 2021-8-18).

  \bibitem{ARの活用} 国土交通省総合政策局.“ARによる訪日外国人旅行者への案内情報の提供に向けて"

  \url{https://www.mlit.go.jp/common/000228861.pdf}， (参照 2022-12-11).

  \bibitem{人口推移} 厚生労働省.“我が国社会保障制度の構成と概況"

  \url{https://www.mhlw.go.jp/seisakunitsuite/bunya/hokabunya/shakaihoshou/dl/07.pdf}， (参照 2022-12-11).

  \bibitem{スタンプラリー} Shachihata Stamprally.“スタンプラリーの効果"

  \url{https://fun.shachihata.co.jp/rally/about/effect.php}， (参照 2022-12-13).

  \bibitem{先行研究1} 越後宏紀，小林稔.“conectAR: アニメの聖地巡礼のためのAR を用いたコミュニケーション支援システムの提案"

  \url{https://ipsj.ixsq.nii.ac.jp/ej/?action=repository_uri&item_id=187444&file_id=1&file_no=1}， (参照2022-5-10).

  \bibitem{先行研究2}深田秀実 ， 船木達也 ， 兒玉松男 ， 宮下直也 ， 大津晶 . 画像認識型 AR 技術を用いた観光情報提供システムの提案 ”

  \url{https://ipsj.ixsq.nii.ac.jp/ej/?action=repository_action_common_download&item_id=73190&item_no=1&attribute_id=1&file_no=1}， ( 参照 2021-11-23).

  \bibitem{先行研究3} 長尾 聡輝，加藤 福己，遠藤 守，安田 孝美.“地域観光を支援するためのフォトラリーシステムの開発"

  \url{https://dl.ndl.go.jp/view/download/digidepo_10487059_po_ART0010410235.pdf?contentNo=1&alternativeNo=}， (参照 2021-11-23)

  \bibitem{先行研究4} 河田 尚子，竹之内 和樹. “初学者の3Dモデリングにおける難点と原因の分析"
  \url{https://www.graphicscience.jp/journal_data/files/164_file.pdf}， (参照 2022-12-13)

  \bibitem{ARTO QUEST}株式会社マイスター・ギルド.“ARスタンプラリー『ARTO QUEST』簡単作成・無料版あり・アプリ不要"

  \url{https://artoquest.net/}， (参照 2022-5-20).

  \bibitem{Rally}株式会社 RALLY.“RALLY - 誰でも簡単！モバイルスタンプラリー”

  % \url{https://rallyapp.jp/}， (参照 2022-5-20).

  % \bibitem{js}MDN.”JavaScript”.JavaScript - MDN WebDocs.

  \url{https://vuejs.org/guide/introduction.html}， (参照 2021-12-10).

  \bibitem{node.js} OpenJS Foundation and Node.js contributors.“Node.js"

  \url{https://nodejs.org/ja/about/}，(参照 2022-12-3).

  \bibitem{Express} StrongLoop， Inc.“Express - Node.js Webアプリケーション・フレームワーク”

  \url{https://expressjs.com/ja/}，(参照 2022-12-3).

  \bibitem{sqlite3} SQLite.org. Datatypes In SQLite Version3.“SQLiteとは?"

  \url{https://www.sqlite.org/index.html}， (参照 2022-12-3).

  \bibitem{VR} 繁桝博昭.“バーチャルリアルティによる知覚研究"

  \url{https://psych.or.jp/wp-content/uploads/2019/12/88-9-12.pdf}， (参照 2022-12-8).

  \bibitem{OSS} Open Source Initiative.“The Open Source Definition"

  \url{https://opensource.org/osd}， (参照 2022-12-9).
\end{thebibliography}

\end{document}
