%#!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}
ARとは,「Augmented Reality (アグメンティッド・リアリティ)」の略であり,「拡張現実」のことを指す。
現実空間に演出を付け加えることが出来る点やスマートフォンさえあれば機材を設置する
必要がない点などの利点があるため様々な事業で取り入れられている技術である。
% 作成部を作る理由
近年の日本では,観光立国推進のために国策で進めらているAR観光アプリケーションをはじめ,観光領域でのAR活用は事例が増加傾向にある。
しかし,AR技術を活用したシステム構築は専門的な知識が必要であり作成難易度が高い。\\
本研究では,ARスタンプラリーの作成に必要な技術を補助し,誰でも簡単に
WebAR技術を活用したスタンプラリーを開発することができるシステムの作成,提案していく。
% 目次
\tableofcontents
\clearpage
% ------------------------第一章------------------------ %
\chapter{はじめに}
本章では研究の背景と目的について説明する。
\section{背景}
現代の日本において地方の過疎化や人口減少は大きな社会問題となっている。
総務省統計局の「人口推計結果の要約(2018年)」によると,日本の人口は2008年をピークに,低下の一途をたどっている\cite{地域・地方の人口}。
それに伴う少子高齢化,労働人口数の低下は,どの企業や自治体においても無視できない緊急課題となってきており,地域活性化の方法は様々な技術
で模索されている。\\
また近年,スマートフォンの急速な発展に伴い,インターネットや5Gによる携帯電話通信網の発展が進んでいる。これによりインターネットが高速化さ
れWebサービスの遅延の低減が実現され,多数の端末による同時接続も可能になる。
例えば,ARは専用のデバイスやスマートフォンを通して現実世界を見たときに,デジタル情報を重ねて表示する技術であるため,
高速で大容量のデータを送ることができる通信環境が求められる。しかし,5Gの登場はそれを可能にしつつある。
このような5Gを利用した技術展開は,地方自治体や観光協会においても例外ではない。
ARを用いて紙面だけでは伝わらないイベントの雰囲気
や会場の様子を伝え,観光ツアーをARスタンプラリー企画と合わせることで,高い集客効果と回遊率を向上をさせるなど,多くの事例が増えてきてい
る。
% 近年,観光立国推進のために国策で進めらているAR観光アプリケーションをはじめ,観光領域でのAR活用は事例が増加傾向にある。
しかし,AR技術を活用したシステム構築は専門的な知識が必要であり難易度が高い。以上のことを踏まえて,
本研究では誰でも簡単にWebARスタンプラリーを作成できるようなWebシステムを開発し,実用性の検討を行う。
\section{研究目的}
本研究は,簡単な操作のみでWebARスタンプラリーシステムを作成できるシステムを作成することである。
また,WebARスタンプラリー作成システムとして実際に利用することを想定し実用性,および保守性を考慮しながら提案していく。
% ------------------------第二章------------------------ %
\chapter{先行研究と類似サービス}
先行研究と類似サービスを調査し , 観光とARの活用事例や類似サービスの課題点を探る。
\section{関連研究}
ARと観光を組み合わせたシステムの研究について紹介する。
\subsection{ARコンテンツにおけるユーザ満足度}
越後,小林らの研究\cite{先行研究1}では,聖地巡礼地を舞台とした AR スタンプラリーシステムであり , 単にスタンプを集めたり , アニメの
キャラクターや道具などが AR で表示されたりするだけではなく , 地元の人と聖地巡礼者が話すきっかけとなるようなアプリの開発を
行っている。実証実験のアンケートには, 音楽やアニメーション , エフェクトがあると「もっと楽しいと感じる」という意見があった。
こ
\subsection{画像認識型 AR を用いた観光情報の提供}
こちらのシステムでは , 紙地図に印刷した観光スポットなどの写真画像をスマートフォンの内蔵カメラで撮
影し , その画面上の写真画像に対して , 詳細な内容を説明する映像コンテンツを自動的に表示させること
で , スムーズな観光情報の提供を実現している\cite{先行研究2}。ARを技術を利用することにより,情報提供の幅が広がり,ARと観光を組み合わせた
サービスには魅力性と有効性があるとしている。
\subsection{データベースを活用した継続的な情報更新}
\section{類似サービス}
スタンプラリー作成システムにおいて,本研究で作成する類似サービスについて述べる。
\subsection{ARTO QUESTO}
ARTO QUESTは誰でも簡単にARスタンプラリーが作成できるサービスである\cite{ARTO QUEST}。
運営者/参加者ともに専用のアプリをインストールせずに,スマートフォンのカメラ機能を使って簡単にAR体験ができる。
ARは,マーカー型ARを利用しておりアニミーションや効果音があることが特徴である。
しかしどこに行けばスタンプが獲得できるかなどの情報提示の不十分により,事前にスポットを知る日必要が有り
AR スポットをアプリ内で見つけられないことが課題点である。
\begin{figure}[htb]
\centering
\includegraphics[width=14cm]{./img/ARTO-QUEST.png}
\caption{ARTO-QUESTの画面}
\end{figure}
\subsection{Rally}
RALLY はスマホで遊べるスタンプラリーを作成することができるサービスである\cite{Rally}。Rallyは,AR
スタンプラリーではないがスタンプラリーに必要な情報を詳細に登録ができたり, ページデザインを
オリジナルデザインに変更できたり, 拡張性が高いのが特徴である。
\begin{figure}[htb]
\centering
\includegraphics[width=14cm]{./img/RALLY.png}
\caption{RALLYの画面}
\end{figure}
\newpage
% ------------------------第三章------------------------ %
\chapter{提案}
本章では,第１章,第 2 章で挙げた背景,目的,課題点を踏まえたシステムの提案する。
スタンプラリーの作成手順と作成されるスタンプラリーの流れはの通りである。
\section{要件定義}\label{section:service}
以下に必要となる要件を示す。
\begin{itemize}
\item ユーザ認証機能
\item ARモデルのテンプレート機能
\item ラリーポイントを設定したマップの作成機能
\item 屋外,屋内のどちらでも利用可能
\item 作成したスタンプラリーの公開機能
\end{itemize}
\section{提案システム}
本研究で作成するサービスは,ユーザがプログラムのコードを書かずにWebARスタンプラリーシステム作成できるものとする。作成したWebARスタンプラリーのURLが発行さ
れ,SNSで手軽に公開することが可能である。また,スタンプラリー名や紹介文の設定,3Dキャラクターや写真のアップロード機能を持たせることで,オリジナルの
スタンプラリーを作成できる（図3）。
\begin{figure}[htb]
\centering
\includegraphics[width=15cm]{./img/System_Diagram.pdf}
\caption{本システムの概要図}
\end{figure}
\chapter{システム設計} \label{chapter:sekkei}
本章では\ref{section:service}をもとに,システムの設計を行う。
\section{技術解説}
\subsection{使用言語}
\begin{itemize}
\item HTML
\item CSS
\item JavaScript
\end{itemize}
\subsection{使用したJavaScriptライブラリ}
\begin{itemize}
\item Leaflet \\
JavaScript のライブラリの一種であり，Web 上にタイルベースの地図データを表示すること
ができる。
\item A-Frame \\
ARページの作成には JavaScript の A-Frame ライブラリと AR.jsライブラリを使用し作成した。A-Frame は VR
\footnote{VRは「Virtual Reality」の略で,「人工現実感」や「仮想現実」と訳されています。ここには「表面的には現実ではないが,本質的には現実」という意味が含まれ,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}
\subsection{使用したAR技術}\label{section: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}
% <a-assets>
% <a-asset-item
% id="animated-asset" <!--3Dキャラクターのid名の設定-->
% src="model.gltf"> <!--3Dキャラクターのsrc-->
% </a-asset-item>
% </a-assets>
\begin{figure}[htb]
\centering
\includegraphics[width=10cm]{./img/administrator-flow.pdf}
\caption{管理者側のシステムの流れ}
\end{figure}
\begin{figure}[htb]
\centering
\includegraphics[width=10cm]{./img/user-flow.pdf}
\caption{スタンプラリーの流れ}
\end{figure}
\newpage
\chapter{システム開発}
第\ref{chapter:sekkei}章を元にシステム開発を行う。
\section{UI画面}
\section{スタンプラリーの全体設計と詳細情報の管理機能}
スタンプラリーの管理は,データベースを使用し,スタンプラリーに関する情報は全てデータベースに
保存する。スポットに関しては,1つのスタンプラリーに対して,複数存在すると考えられるため,テーブルを分けて保存する(図\ref{figure:db})。
また,本システムはログイン機能をもたせること第三者がスタンプラリーに勝手に変更を加えられないようにする。
\begin{figure}[htb]
\centering
\includegraphics[width=13cm]{db_table.pdf}
\caption{本システムのデータベース}
\label{figure:db}
\end{figure}
\section{位置呼応マップ}
利用者が,実際に現地に行く場合の接近具合に応じて画面を展開するのが位
置呼応マップパートである。これには,HTML5 の GeoLocationAPIと,
JavaScript ライブラリ Leaflet.js を利用し,現在地点に連動して地図を表示さ
せる機能を実装した。
GPS センサを装備しているモバイルデバイスでマップパートの Web ページ
にアクセスすることでデバイスの位置情報が送信され,その都度地図上に利用
者の現在位置が反映される。また,取得した位置情報と目標物の距離を算出し
あらかじめ定めた閾値以下になった場合に自動的に画面が遷移し,次に述べる
AR パートに移動する。
\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}
% // スタートボタンクリック時の位置情報を定期的に取得
% \verb|let start = document.getElementById('start');|
% \verb|start.addEventListener("click", function(e) {|
% this.setAttribute("disabled", true);
% id = navigator.geolocation.watchPosition(watchFound,onLocationError); \\
% \verb|});|
\section{ARパート}
\chapter{システム評価or実験}
\chapter{結論}
\section{作成システムの課題点}
\section{今後の展望}
現状では要件定義，仕様の決定が完了し,UIの構築を行っている。今後は，完成後の公開に向けサーバーサイドの用
意や設定基準等に関して理解を深めていく。また,ARキャラクターのデザインや動きを決める。
% \chapter{作成物紹介}
% 作成したシステムは GitBucket 登録し，公開することとした。また,本システムはスマホートフォンでの利用を推奨する。下の
% URL を各情報端末の URL 欄に入力すれば松ヶ岡開墾場 AR スタンプラリーのページを開ける。
% \section{本システムの URL と QR コード}
% \url{https://www.yatex.org/gitbucket/Fumiya238/AR-project/pages/APP/WebApp.html}
\chapter *{謝辞} %章を付けずにタイトル表示
\addcontentsline { toc }{ chapter }{謝辞} %章立てせずに目次に追加するおまじない
本研究を進め、多くの方々にご指導を賜りました。\\
指導教官の広瀬雄二教授からは多大なご指導を賜りました。
三浦彰人特任助教には夜遅くまで温かいご助言を頂きました。
同大学元講師の唐栄氏には本システム作成にあたり、適切なご指導を賜りました。
実験のデータ収集 移転、東北公益文科大学YOSAKOIソーラン部蒼嵐の皆様にはご協力頂きました。
最後に、b研究室及びc研究室の皆様には、本研究の実行多大なご助言、ご協力いただきました。
\begin{thebibliography}{99}
\bibitem{地域・地方の人口} (株)富士通総研.“地域・地方の現状と課題" \par
\url{https://www.soumu.go.jp/main_content/000629037.pdf}, (参照 2021-8-18).
% \bibitem{palan-ar} 株式会社palan.“palanAR（パラナル） WebAR（ウェブAR）作成オンラインツール" \\
% \url{https://palanar.com/}, (参照 2022-5-20).
\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{ARTO QUEST}株式会社マイスター・ギルド.“ARスタンプラリー『ARTO QUEST』簡単作成・無料版あり・アプリ不要" \\
\url{https://artoquest.net/}, (参照 2022-5-20).
\bibitem{Rally}株式会社 RALLY.“RALLY - 誰でも簡単！モバイルスタンプラリー”
\url{https://rallyapp.jp/}, (参照 2022-5-20).
% \bibitem{html}W3C.”HTML”.HTML spec - HTML Standard - WhatWG. \\
% \url{https://html.spec.whatwg.org/multipage/},(参照 2022-5-10).
% \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)
% \url{https://rally.shachihata.jp/about/effect.php}, (参照 2021-11-20).
\bibitem{VR} ELECOM CO,LTD.“VRってどんな意味？VRのしくみと活用事例" \par
\url{https://www.elecom.co.jp/pickup/column/vr_column/00001/}, (参照 2021-12-12).
\bibitem{OSS} 発注ナビ株式会社.“OSS（オープンソースソフトウェア）とは？利用時のメリットと注意点"
\url{https://hnavi.co.jp/knowledge/blog/oss/}, (参照 2021-12-12).
\bibitem{参考文献1} 成田 雅彦,土屋 陽介,中川 幸子,阿久津 裕,泉井 透,野見山 大基,松日楽 信人,本村 陽一.“マーケティング分野への適用を目指したスタンプラリーとアンケートサービスのCRSPを用いた構築"
\url{https://www.jstage.jst.go.jp/article/tjsai/32/1/32_NFC-B/_pdf/-char/ja}, (参照 〜〜〜)
\bibitem{参考文献2} 岡本 健.“来訪者の回遊行動を誘発する要因とその効果に関する研究～埼玉県北葛飾郡鷲宮町における「飲食店スタンプラリー」を事例として～"
\url{https://eprints.lib.hokudai.ac.jp/dspace/bitstream/2115/43891/2/okamoto7083.pdf}, (参照 〜〜〜)
\bibitem{参考文献1} 井垣 宏, 齊藤 俊, 井上 亮文, 中村 亮太, 楠本 真二. “プログラミング演習における進捗状況把握のためのコーディング過程可視化システムC3PVの提案"
\url{https://ipsj.ixsq.nii.ac.jp/ej/?action=pages_view_main&active_action=repository_view_main_item_detail&item_id=88697&item_no=1&page_id=13&block_id=8}, (参照 〜〜〜)
\bibitem{参考文献2} 大久保 宏倫,田中 久治, 堀良 彰,大谷 誠. “WebSocket を用いたネットワーク利用者認証システムの開発"
\url{https://www.jstage.jst.go.jp/article/jceeek/2014/0/2014_232/_pdf/-char/ja}, (参照 〜〜〜)
\bibitem{参考文献3} 大谷 誠, 江藤 博文, 渡辺 健次, 只木 進一, 渡辺 義明.“WebSocketによる終了検知を行うOpengateの開発"
\url{https://ipsj.ixsq.nii.ac.jp/ej/?action=pages_view_main&active_action=repository_view_main_item_detail&item_id=91912&item_no=1&page_id=13&block_id=8}, (参照 〜〜〜)
\bibitem{参考文献3} 長尾 聡輝,加藤 福己,遠藤 守,安田 孝美.“地域観光を支援するためのフォトラリーシステムの開発"
\url{https://dl.ndl.go.jp/view/download/digidepo_10487059_po_ART0010410235.pdf?contentNo=1&alternativeNo=}, (参照 〜〜〜)
\end{thebibliography}
\end{document}
