\documentclass[a4j]{jarticle}
% -*- coding: utf-8 -*-
\usepackage[dvipdfmx]{graphicx}
\usepackage[dvipdfmx]{color}
\usepackage{ascmac}
\usepackage{url}
\usepackage{color}
\usepackage{geometry}
\renewcommand{\thefootnote}{*\arabic{footnote}}

\topmargin  -2cm
\textheight 26cm
\textwidth 16.5cm
\oddsidemargin -0.3cm

\pagestyle{empty}

\begin{document}

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

\author{広瀬研究室\\C1191150 佐藤文哉}

\date{2022年6月10日}

\twocolumn[
    \maketitle
    \begin{center}
        {\bfseries 概要}
    \end{center}
    ARとは,「Augmented Reality (アグメンティッド・リアリティ)」の略であり,「拡張現実」のことを指す。
    % 作成部を作る理由
    近年の日本では,観光立国推進のために国策で進めらているAR観光アプリケーションをはじめ、観光領域でのAR活用は事例が増加傾向にある。
    しかし,AR技術を活用したシステム構築は専門的な知識が必要であり難易度が高い。そこで本研究では,
    % Web上でQRコードやURLを読み込むだけで手軽にARを体験できる,
    WebAR技術を活用したスタンプラリー開発支援システムを作成,提案していく。
    \vspace*{2em}
]
\thispagestyle{empty}

\section{背景}
現代の日本において地方の過疎化や人口減少は大きな社会問題となっている。
総務省統計局の「人口推計結果の要約(2018年)」によると,日本の人口は2008年をピークに,低下の一途をたどっている\cite{地域・地方の人口}。
それに伴う少子高齢化,労働人口数の低下は,どの企業や自治体においても無視できない緊急課題となってきており,地域活性化の方法は様々な技術
で模索されている。\\
また近年,スマートフォンの急速な発展に伴い,インターネットや5Gによる携帯電話通信網の発展が進んでいる。これによりインターネットが高速化さ
れWebサービスの遅延の低減が実現され,多数の端末による同時接続も可能になる。
例えば,ARは専用のデバイスやスマートフォンを通して現実世界を見たときに,デジタル情報を重ねて表示する技術であるため,
高速で大容量のデータを送ることができる通信環境が求められる。しかし,5Gの登場はそれを可能にしつつある。
このような5Gを利用した技術展開は,地方自治体や観光協会においても例外ではない。
ARを用いて紙面だけでは伝わらないイベントの雰囲気
や会場の様子を伝え,観光ツアーをARスタンプラリー企画と合わせることで,高い集客効果と回遊率を向上をさせるなど,多くの事例が増えてきてい
る。
% 近年,観光立国推進のために国策で進めらているAR観光アプリケーションをはじめ、観光領域でのAR活用は事例が増加傾向にある。
しかし,AR技術を活用したシステム構築は専門的な知識が必要であり難易度が高い。以上のことを踏まえて,
本研究では誰でも簡単にWebARスタンプラリーを作成できるようなWebシステムを開発し,実用性の検討を行う。


\section{目的}
本研究は,誰でも簡単にWebARスタンプラリーシステムを作成できるシステムを作成する。
また,WebARスタンプラリー作成システムとして実際に利用することを想定し実用性、および保守性を考慮しながら提案していく。

\section{先行研究と類似サービス}
先行研究と類似サービスを調査し , 観光とARの活用事例や類似サービスの課題点を探る。

\subsection{ARコンテンツにおけるユーザ満足度}
越後,小林らの研究\cite{先行研究1}では、聖地巡礼地を舞台とした AR スタンプラリーシステムであり , 単にスタンプを集めたり , アニメの
キャラクターや道具などが AR で表示されたりするだけではなく , 地元の人と聖地巡礼者が話すきっかけとなるようなアプリケーションの開発を
行っている。実証実験のアンケートには, 音楽やアニメーション , エフェクトがあると「もっと楽しいと感じる」という意見があった。
このことから,ARコンテンツの内容次第では,ユーザ満足度に大きな影響があると考えられる。

\subsection{画像認識型 AR を用いた観光情報の提供}
こちらのシステムでは , 紙地図に印刷した観光スポットなどの写真画像をスマートフォンの内蔵カメラで撮
影し , その画面上の写真画像に対して , 詳細な内容を説明する映像コンテンツを自動的に表示させること
で , スムーズな観光情報の提供を実現している\cite{先行研究2}。ARを技術を利用することにより,情報提供の幅が広がり,ARと観光を組み合わせた
サービスには魅力性と有効性があるとしている。


% \subsection{類似サービス}
% スタンプラリー作成システムにおいて、本研究で作成する類似サービスについて述べる。

\subsection{ARTO QUESTO}
ARTO QUESTは誰でも簡単にARスタンプラリーが作成できるサービスである\cite{ARTO QUEST}。
運営者/参加者ともに専用のアプリケーションをインストールせずに,スマートフォンのカメラ機能を使って簡単にAR体験ができる。
こちらのサービスは,マーカー型ARを利用しておりアニミーションや効果音があることが特徴である。また,図\ref{ARTO-QUEST}はARTO QUESTの利用画面である。
ARTO QUESTは種類豊富のARコンテンツが存在し,ユーザはその中から使うARコンテツを選択,利用することが可能である。
しかし,どこに行けばスタンプが獲得できるかわからないなどの提示の不十分より,事前にスポットを知る日必要が有り
AR スポットをアプリケーション内で見つけられないことが課題点である。

\begin{figure}[htb]
    \centering
    \includegraphics[width=8cm]{ARTO_QUEST-template.png}
    \caption{ARTO-QUESTの利用画面}
    \label{ARTO-QUEST}
\end{figure}

% \subsection{palanAR}
% palanARは,マーカ型ARやマーカーなしAR,画像認識,顔認識など様々なAR機能をノーコードで実装できるシステムである\cite{palan-ar}。
% スタンプラリーに特化しているわけではないが,機能が豊富でユーザの用途に合わせたARを実装できるのが特徴である。
\subsection{Rally}
RALLY は,AR スタンプラリーではないがはスマホで遊べるスタンプラリーを誰でも簡単につくれるサービスである\cite{Rally}。
図\ref{Rally}はRallyの利用画面であり,左のメニューからスタンプラリーに必要な情報を詳細に登録ができたり, ページデザインを
オリジナルデザインに変更できたり, 拡張性が高いのが特徴である。

\begin{figure}[htb]
    \centering
    \includegraphics[width=8cm]{RALLY.png}
    \caption{Rallyの利用画面}
    \label{Rally}
\end{figure}

\section{システム設計}\label{sekkei}
本システムにおける、システムの要求、システムの構成について述べる。
\subsection{システム要求}
本システムは下記の要求を満たさなければならないと考え,五つの要求に基づきシステムの設計,開発を行う。

\begin{itemize}
    \item 手軽に作成できる \\
        本システムを使用する際に,複雑な操作は使用意欲を減少させると考えられるため、より簡単
        な操作が必要であると考えられる。
        \\
    \item オリジナル性をもたせる \\
        スタンプラリー名や紹介文の設定,3Dキャラクターや写真のアップロード機能を持たせることで,オリジナルのスタンプラリーを作成
        することが可能にし,他の利用者と差別化できるものにする。
        \\
    \item スタンプが獲得出来る場所の設定 \\
        マップの上にスタンプが獲得できる場所（以下,スポットという）の設定を必ず行うようにする。
        スポットをマップで確認できるようにすることで,よりユーザがスポットの存在を気づきやすくなると考える。
        また,GPS機能を付与し,ユーザとスポットの位置が確認できるようにする。
        \\
    \item 3Dキャラクターのテンプレートを用意 \\
        3Dキャラクターの作成は難易度が高いため,3Dキャラクターのテンプレートをいくつか用意し,技術者以外の利用も可能にする。
        \\
    \item URLの発行 \\
        作成したシステムテスト用URLと本番用のURLの2つを発行する。
        テストURLで挙動を確認し,調整を行えるようにし,本番用のURLはSNS等に手軽に公開出来るように誘導する。

\end{itemize}

\subsection{提案システム}
本研究で作成するサービスは,ユーザがプログラムのコードを書かずにWebARスタンプラリーを作成できるものであり,図\ref{system}の流れで実行
されるものである。
作成したWebARスタンプラリーのURLが発行され,SNSで手軽に公開することが可能である。また,スタンプラリー名や紹介文の設定,3Dキャラクター
や写真のアップロード機能を持たせることで,オリジナルのスタンプラリーを作成できる。

\begin{figure}[hbp]
    \centering
    \includegraphics[width=8cm]{System_Diagram.pdf}
    \caption{本システムの概要図}
    \label{system}
\end{figure}

% \section{システム開発}
% \ref{sekkei}を元にシステム開発を行う。
% また,使用するAR技術と機能について説明する。


% \subsection{本研究で使用するプログラミング言語}
% \begin{itemize}
% \item HTML5 \\
% HTML は1989 年にTim Berners-Lee によって提唱されたWeb ページの作成するための言語
% のことで，HyperText Markup Language の略称である。HTML5 はスマートフォンの普及と
% ともに，スマートフォンの対応が容易になったものであり，これによって音声や動画を埋め込
% むことが可能となった。
% \\
% \item CSS3 \\
% Cascading Style Sheets の略称で，1994 年にCERN のHkon Wium Lie によって提唱され
% た HTML と組み合わせて使用する Web 上の文書構造を保つ仕様である。
% Cascading Style Sheets のCascading には「滝のように流れる」という意味があり，CSS の
% 構造は上から定義されたスタイルが，下部に引き継がれて適用される仕組みになっている。
% \\
% \item JavaScript \\
% ソフトウェア上で動的な表現を行うためのプログラミング言語である。2010 年以降からはラ
% イブラリが拡張され，Web 開発のすべての領域で扱われるようになった。本研究では，
% JavaScriptのライブラリであるLeafletや A-Frame ライブラリ,AR.jsライブラリを利用し
% マップの作成や,ARシステムを構築した。
% \end{itemize}

\section{本研究で扱うJavaScriptフレームワークとライブラリ}
本システム使用するAR技術と機能について説明する。
\begin{itemize}
    \item Leaflet \\
          JavaScript のライブラリの一種であり,Web 上にタイルベースの地図データを表示すること
          ができる。
          \\
    \item A-Frame \\
          A-Frame は VR
          \footnote{VRは「Virtual Reality」の略で,「人工現実感」や「仮想現実」と訳されています。ここには「表面的には現実ではないが,
              本質的には現実」という意味が含まれ,VRによって「限りなく実体験に近い体験が得られる」ということを示す\cite{VR}。}
          を構築するための OSS
          \footnote{OSSとは,ソースコードの改変や再配布が自由に認められている無償のソフトウェアである\cite{OSS}。}
          のWeb フレームワークの一つであり,HTML に読み込ませることで使用できる。
          このA-Frame は 3D モデルを表示するために使用する。
          \\
    \item AR.js \\
          AR.js は WebAR 開発のための代表的な OSS の一つであり,A-Frame と同様に HTML に組み込
          むことで簡単に実装することができる。AR.jsは 3D モデルを現実空間と結びつけるために使用する。
\end{itemize}

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

\begin{itemize}
    \item マーカ型（画像認識型,ビジョンベース）\\
          画像や写真などをマーカとして登録し,マーカを認識するとARコンテンツ
          情報（動画や3D,マップ）を表示する。

    \item GPS型（位置認識型,ロケーションベース） \\
          スマートフォンなどの端末の現在位置をGPSで取得し,付近に設定されたARコ
          ンテンツを表示する。
\end{itemize}
本システムでは,この2つの技術を用いたスタンプラリーシステムの作成を可能にする。\\

\begin{itembox}[l]{GPS型ARの記述例}
    \verb|<|a-entity  \\
    gps-entity-place="latitude:緯度; longitude:経度;" \\
    look-at="[gps-camera]" \\
    scale = "1 1 1"　\verb|<!--大きさ-->| \\
    potion="0 3 0"　\verb|<!--位置-->| \\
    gltf-model="3DオブジェクトのIDまたはURL"\verb|>| \\
    \verb|</|a-entity\verb|>|
\end{itembox}
\\
\begin{itembox}[l]{マーカ型ARの記述例}
    % \verb|<|a-assets\verb|>| \\
    % \verb|<|a-asset-item \\
    % id="animated-asset"
    % src="char.gltf"\verb|>|
    % % \verb|<|!--3Dキャラクターのsrc--\verb|>|\\
    % \verb|<|!--3Dキャラクターのid名の設定--\verb|>|\\
    % \verb|<|/a-asset-item\verb|>| \\
    % \verb|<|/a-assets\verb|>| \\
    \verb|<|a-marker preset="hiro"\verb|>|
    \verb|<|!--マーカの設定--\verb|>| \\
    \verb|<|a-entity  \\
    gltf-model="3DオブジェクトのIDまたはURL" \\
    % \verb|<|!--id指定--\verb|>| \\
    scale = "1 1 1"　\verb|<!--大きさ-->| \\
    potion="0 3 0"　\verb|<!--位置-->| \\
    \verb|</|a-entity\verb|>|  \\
    \verb|</|a-marker\verb|>|

\end{itembox}


% \subsection{マップの作成}
% スタンプラリーのマップの作成には JavaScript のライブラリであるLeafletを使い作成する。
% LeafletはWeb上にタイルベースの地図データを表示することができる。
% 現在地とマーカの場所を瞬時に判断できるように,マップの中心の設定と,ラリーポイントを配置する。
% また,ユーザの場所が常に表示されユーザが移動するとそれに連動して現在地マーカも移動するようにし,
% この現在地ががスポットに近づくたびに,ARページに移動するようにする。

% % \section{作成したスタンプラリーマップ}
% \begin{figure}[htb]
%   \centering
%   \includegraphics[width=8cm]{stamp-map.png}
%   \caption{スタンプラリーマップ}
% \end{figure}

% \subsubsection{位置情報読み込み機能}
% 位置情報とは，携帯端末などで利用者が所在する現在地を取得し，状況に応じた情報を提供してくれ
% るソフトウェアサービスの一種である。本研究のスタンプラリーマップには情報端末機器使用者の
% 位置情報が分かる位置情報サービスが備わっており,図4では「現在地」と表示しているマーカが
% 現在地を表している。

% \begin{itembox}[l]{GPS型ARの記述例}
% // 位置情報取得できなかったときの処理 \\
% function onLocationError(e) \verb|{| \\
% 　alert(e.message); \\
% \verb|}| \\
% // 位置情報を持ってくる関数 \\
% function watchFound(e) \verb|{| \\
% 　onLocationFound({ \\
% 　latlng: L.latLng([ \\
% 　e.coords.latitude, e.coords.longitude]), \\
% 　accuracy: e.coords.accuracy}); \\
% \verb|}| \\

% // スタートボタンクリック時の位置情報を定期的に取得 \\
% \verb|let start = document.getElementById('start');| \\
% \verb|start.addEventListener("click", function(e) {|\\
% this.setAttribute("disabled", true); \\
% id = navigator.geolocation.watchPosition\\(watchFound,onLocationError); \\
% \verb|});| \\
% \end{itembox}

\section{実験}
現状考えている実験手法について説明する。
% 作成したシステムを動作させ実験を行う。また,結果からサービスとしての実用性の観点を主に判断する。

\subsection{実験設計}
\begin{itemize}
    \item アプリケーションの概要を説明すること
    \item 実際に操作してもらうこと
    \item  アンケートに回答してもらうこと
\end{itemize}
まず、実験の前に被験者にアプリケーションの使用方法を説明する。次に、被験者に本提案システムを利用してもらい、作成からAR コンテン
ツの体験まで行い。その後,アンケートに回答してもらい,その結果からシステムとしての実用性の観点を主に判断する。


\section{今後の展望}
現状では要件定義，仕様の決定が完了した段階であり，各機能面の設計には至れていないため，図3 にて
表記した要件を満たすシステムの設計を行なっていく。同時に，完成後の公開に向けサーバーサイドの用
意や設定基準等に関して理解を深めていく。


% \subsection{実験結果と考察}
% \section{まとめ}

\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のしくみと活用事例'' \\
    \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).
\end{thebibliography}

\end{document}

