%#!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{\today}
\begin{document}
\maketitle
% \renewcommand{\abstractname}{概要}
\begin{center}
{\bfseries 概要}
\end{center}
公共機関が保有するデータの内，二次利用を目的としたオープンデータの推進は，
酒田市において提供されているオープンデータの例を挙げると，防火水槽，AED，避難所等の位置を緯度，経度で示されている。
しかし，酒田市においてオープンデータの形式は統一されていない。
オープンデータの意義・目的は国民参加・官民協働の推進を通じた諸課題の解決，経済活性化行政の高度化・効率化透明性・信頼の向上
国，地方公共団体及び事業者が保有する官民データのうち，国民誰もがインターネット等を通じて容易に利用（加工，編集，再配布等）できるよう，次のいずれの項目にも該当する形で公開されたデータをオープンデータと定義する。
営利目的，非営利目的を問わず二次利用可能なルールが適用されたもの
機械判読に適したもの
無償で利用できるもの
ARとは，「Augmented Reality」の略であり「拡張現実」のことを指す。
現実世界を主体に新たな画像・テキスト・3Dモデルなどの情報を付け加えることが
できる。そのため，機材を設置する必要がないなどの利点があり，様々な事業で取り入れら
れている技術である。
日本は，このAR技術を観光立国推進のために活用しようと考えており，観光アプリケーショ
ンをはじめとする，観光領域でのARの活用を推し進めている。
特にARとスタンプラリーの組み合わせは，観光者の体験価値の向上やイベント
会場の周遊・回遊率の向上などの利点が存在する。そのため，近年では地方自治体や観光
協会などで，ARスタンプラリーを活用したイベント数が増加傾向にある。
しかし，ARスタンプラリーの作成には専門的な知識が必要であり，情報通信技術に
精通していない人やプログラミングの知識がない人が作成するには困難である。
そこで，本研究では，ARスタンプラリーの作成に必要な技術を補助し，簡単な操作のみでAR
スタンプラリーを作成することができるWebサービスの開発，提案を行う。
そして，実際に利用することを想定した実験を行い，利便性およびサービスとしての実用性について
評価と考察を行った。(523文字)
% 目次
\tableofcontents
\clearpage
% ------------------------一章------------------------ %
\chapter{はじめに}\label{sec:first_chapter}
本章では研究の背景と目的について説明する。
\section{背景}
政府の取り組み背景
自治体の取り組み背景
市民のニーズの流れ
世界の潮流
オープンデータとは,政府,自治体,公共機関等が保有する大量の情報を公開し,インターネットを通じて誰もが無料でアクセスしてダウンロードして利用でき,
自由に再利用・再配布することができるデータのことである。\cite{haikei1}
我が国において、平成23年3月11日の東日本大震災以降、政府、地方公共団体や事業者等が保有するデータの公開・活用に対する意識が高まった。
オープンデータ公開推進に関する政府の取り組みは、平成24年7月4日公共データは国民共有の財産であるとの認識を示した「電子行政オープンデータ戦略」から本格化した。\cite{sisin}
それに伴い、オープンデータに取り組む地方公共団体数も大幅に増加している。デジタル庁による「オープンデータに取り組む地方公共団体数の推移」では、
平成25年3月ではわずか4自治体であったが、令和3年10月時点で全自治体の約67％にあたる1194自治体に増加している。\cite{digital}
\begin{figure}[htb]
\centering
\includegraphics[width=8cm,height=5cm]
{suii.png}
\caption{地方公共団体におけるオープンデータの取組状況（令和3年10月12日時点）}
\label{オープンデータ}
\end{figure}
しかし、以下に示す総務省によるオープンデータの定義を十分に満たしている自治体はまだまだ少ない。
\begin{itemize}
\item 営利目的、非営利目的を問わず二次利用可能なルールが適用されたもの
\item 機械判読に適したもの
\item 無償で利用できるもの
\end{itemize}
オープンデータを二次利用可能な形で公開する意義と目的に関して総務省は大きく二つ述べている。
\begin{itemize}
\item 創意工夫を活かした多様なサービスの迅速かつ効率的な提供、官民の協働による公共サービスの提供や
改善が実現し、ニーズや価値観の多様化、技術革新等の環境変化への適切な対応
とともに、厳しい財政状況、急速な少子高齢化の進展等の我が国が直面する諸課
題の解決に貢献することができる
\item ベンチャー企業等による多様な新サービスやビジネスの創出、企業活動
の効率化等が促され、我が国全体の経済活性化につながる
\end{itemize}\cite{sisin}
オープンデータ
現代の日本において地方の過疎化や人口減少は大きな社会問題となっている(図\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サービスの開発，提案を行う。これにより，誰でも
簡単にARスタンプラリーの作成ができるようになり，観光地の集客の増加や観光地での新たな
体験を生み出すことで，地域活性化の一助になるではないかと考えた。
\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{「大須商店街」で実施された回遊率の実証実験の結果}
\label{fig:effect-rally01}
\end{figure}
\begin{figure}[htb]
\centering
\includegraphics[width=15cm]{./img/effect-graph02.pdf}
\caption{「大須商店街」で実施された滞在時間の実証実験の結果}
\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: '© <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キャラクターの投稿，保存できるページである。
キャラクターには，スタンプ獲得時のアニメーションを付与してある。
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{公開機能}
作成したスタンプラリーをすぐに公開するためのページである。
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}
% \section{スタンプラリーの開発}
% 本システムで作成，公開した後のスタンプラリーの流れと詳細なシステムの機能について述べる。
\chapter{実験}
本章では作成したシステムを動作させ実験を行い，実験結果からサービスとしての実用性の
観点を主に判断する。
実験はサンプルのスタンプラリーの名前・キャッチコピー・紹介文・画像を用意し，
ARキャラクターは3つのテンプレートを使用する。
% \begin{itemize}
% \item 作成にかかる時間の計測
% 用意な操作で作成が可能か
% \item Marker型とGPS型のスタンプラリーの作成
% \item 動作確認
% \end{itemize}
\section{実験手順}
実験の流れとして実際に本システムを使用しWebARスタンプラリーの作成を行う。
スタンプラリーとして正常に動作するか実験を行う。
WebARスタンプラリーの作成までの実験の手順を以下に示す。
\begin{enumerate}
\item 対象者にシステムの操作方法を説明する
あらかじめ使用するスタンプラリーの名前・キャッチコピー・画像などの説明を行う。
その後，ARの設定やスポットの設定，各機能について説明を行う。
\item タイトルや紹介文を設定する
設定内容に違いがあると正確な時間を計測できないため，あらかじめ用意したタイトルや
紹介文を用いて設定を行う。
\item ARキャラクターを設定する
ARパートの動作確認のためにテンプレートキャラクターを使用した場合と
ARキャラクターをアップロードした場合の2つの設定を行う。
時間の計測にはテンプレートキャラクターを用いる。
\item スポットを設定する
スポットの名前とスポットの位置はあらかじめ用意したものを設定してもらう。
\item スタンプラリーの公開をする
公開したスタンプラリーが動作するか確認を行い，
テスト用URLと公開用URLのスタンプラリーの差異がないか確認する。
\end{enumerate}
作成したスタンプラリーは以下の4つの項目の確認を行う。
\begin{enumerate}
\item ホーム画面の動作確認
テキスト情報・画像が反映されているかを確認する。
\item マップの動作確認
スポットの検索機能，GPSの機能に不具合がないか，スポットの場所にずれがないか確認する。
\item ARパートの動作確認
スタンプの獲得が正常に行えるか，ARキャラクターの位置や動き，大きさは適切か確認する。
\item スタンプ獲得機能
UIに崩れがないか，獲得したスタンプ情報が反映されているかを確認する。
\end{enumerate}
\section{実験結果}
表\ref{table:creation_time}が作成時間の実験結果である。
\begin{table}[htbp]
\caption{作成時間}
\label{table:creation_time}
\centering
\begin{tabular}{|c|c|c|c|}
\hline
スポット数 & 1回目 & 2回目 & 3回目 \\
\hline
5箇所 & 7分27秒 & 5分31秒 & 6分35秒 \\
\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|}
\hline
& UIの崩れ & 表示位置 & 表示角度 \\
\hline
テンプレートキャラクターを使用した場合 & なし & ◯ & ◯ \\
\hline
アップロードしたキャラクターを使用した場合 & なし & △ & △ \\
\hline
\end{tabular}
\end{table}
\item スタンプ一覧画面の動作確認
タイトル・キャッチコピー・紹介文・画像によるUIにずれが生じないか，スタンプ
の獲得状況が正しく反映されているか検証した。
ホーム画面と同様に画像が縦に長いものや横に長いものを使用すると画像が
はみ出し，一部見えないなどの問題があったが
スタンプの獲得状況に関してはコンプリートまで問題なく反映されていた。
\end{itemize}
\section{考察}
\section{作成システムの課題点}
\chapter{結論}
本研究では，WebARスタンプラリーを作成できるシステムの構築をした。
本システムを使用することで，プログラミングや3Dモデリングの技術がない人でも
簡単な操作のみでWebARスタンプラリーを作成することができた。
\section{今後の展望}
% \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{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[AFrame]”A-Frame”.A-Frame: Hello WebVR. \\
% \url{https://aframe.io/docs/1.2.0/introduction/}，(参照 2022-5-10).
% \bibitem{js}MDN.”JavaScript”.JavaScript - MDN WebDocs. \\
% \url{https://developer.mozilla.org/ja/docs/Web/JavaScript}，(参照 2022-5-10)
\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}
”Sato