diff --git a/paper/c119115-thesis.pdf b/paper/c119115-thesis.pdf index 7cd5d41..cfdeab5 100644 --- a/paper/c119115-thesis.pdf +++ b/paper/c119115-thesis.pdf Binary files differ diff --git a/paper/c119115-thesis.tex b/paper/c119115-thesis.tex index 451254d..e5afa6a 100644 --- a/paper/c119115-thesis.tex +++ b/paper/c119115-thesis.tex @@ -2,14 +2,17 @@ %#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{ARを用いた観光システムの提案} +\title{WebARを用いた松ヶ岡開墾場スタンプラリーシステムの提案} %% 著者 %% \author{広瀬研究室3年\\C1191150 佐藤文哉} @@ -22,13 +25,11 @@ % \renewcommand{\abstractname}{概要} \begin{center} - {\bfseries 概要} + {\bfseries 概要} \end{center} -ARとは、「Augmented Reality (アグメンティッド・リアリティ)」の略で、 -「拡張現実」のことを指す。この AR技術は現実と CG を組み合わせることに -よってシミュレーションできるため、今まで人間が想像で補っていた部 -分を目で見て確かめることが可能になる。本研究のでは、このAR技術を活用 -し観光支援を目的としたシステムを考え提案する。 +ARとは,「Augmented Reality (アグメンティッド・リアリティ)」の略で,「拡張現実」のことを指す。このAR技術は現実と CG を組み合わせることに +よってシミレーションできるため,今まで人間が想像で補っていた部分を目で見て確かめることが可能になる。本研究では,このAR技術を活用 +し観光支援を目的としたシステムを提案する。 @@ -41,175 +42,456 @@ \chapter{はじめに} \section{背景} -% 近年、地方の過疎化や人口減少は大きな社会問題となっている。 -% 総務省統計局の「人口推計結果の要約（2018年）」によると、日本の人口は -% 2008年をピークに、低下の一方をたどっている。\cite{Rural_depopulation} -% それに伴う少子高齢化、労働人口数の低下は、どの企業や自治体においても -% 無視できない緊急課題となってきており、地域活性化する方法は様々な技術 +% 近年,地方の過疎化や人口減少は大きな社会問題となっている。 +% 総務省統計局の「人口推計結果の要約（2018年）」によると,日本の人口は +% 2008年をピークに,低下の一方をたどっている。\cite{Rural_depopulation} +% それに伴う少子高齢化,労働人口数の低下は,どの企業や自治体においても +% 無視できない緊急課題となってきており,地域活性化する方法は様々な技術 % で模索されている。 -% このような問題を解決する手段の一つとして、観光が挙げられる。 -% このような状況下で地域の観光資源の魅力向上やその発信において、どの -% ような提供手法が適切か考えた時、ARが地域固有の文化や歴史等を旅行者 -% に伝えるための手段として、注目されている。その理由としてAR技術の -% 話題性による集客力、AR技術のビジュアライズ力、AR技術はスペースを取 -% らないことなどが挙げられる。このように、高い情報伝達能力や再現性か -% ら、一部地域において先駆的に活用され始めており、ARという最新技術× -% 旅行体験によって、新しい価値体験も提供が可能になってきている。 +% このような問題を解決する手段の一つとして,観光が挙げられる。 +% このような状況下で地域の観光資源の魅力向上やその発信において,どの +% ような提供手法が適切か考えた時,ARが地域固有の文化や歴史等を旅行者 +% に伝えるための手段として,注目されている。その理由としてAR技術の +% 話題性による集客力,AR技術のビジュアライズ力,AR技術はスペースを取 +% らないことなどが挙げられる。このように,高い情報伝達能力や再現性か +% ら,一部地域において先駆的に活用され始めており,ARという最新技術× +% 旅行体験によって,新しい価値体験も提供が可能になってきている。 -% 最先端ICT（VRやAR等）を活用した観光コンテンツが、その高い情報伝 -% 達能力や再現性から、一部地域において先駆的に活用され始めている。このVRやARという最新技術×旅行体験によって、新しい価値体験も提供が可能になってきた。 -% 未だ知られていない魅力的な地域資源を発掘し、情報を磨き上げ、日本全国・世界へ発信することで地域に人を誘致し、地域活性化に貢献できると考えた。 -% した「明日の日本を支える観光ビジョン」において、訪日外国人旅行者数 2020 年 4,000 万 -% 人、2030 年 6,000 万人等の目標を掲げ、大胆な取り組みを進めてきた。この結果、昨年の訪 -% 日外国人旅行者数は 3,119 万人と６年連続で過去最高を更新し、3,000 万人の大台に乗った。 -% 観光立国によって、たくましい一大産業が生まれている。 -% 観光は、地方創生の切り札、成長戦略の柱である。 -% 近年、、地域の観光資源の魅力向上やその発信において、どのような提供手法が適切 -% かを検討していくことが必要になります。そのため、技術の先進性のみに頼るのではなく、訪日外国人旅行者の更なる誘客や、体験満足度の向上に向け、情 +% 最先端ICT（VRやAR等）を活用した観光コンテンツが,その高い情報伝 +% 達能力や再現性から,一部地域において先駆的に活用され始めている。このVRやARという最新技術×旅行体験によって,新しい価値体験も提供が可能になってきた。 +% 未だ知られていない魅力的な地域資源を発掘し,情報を磨き上げ,日本全国・世界へ発信することで地域に人を誘致し,地域活性化に貢献できると考えた。 +% した「明日の日本を支える観光ビジョン」において,訪日外国人旅行者数 2020 年 4,000 万 +% 人,2030 年 6,000 万人等の目標を掲げ,大胆な取り組みを進めてきた。この結果,昨年の訪 +% 日外国人旅行者数は 3,119 万人と６年連続で過去最高を更新し,3,000 万人の大台に乗った。 +% 観光立国によって,たくましい一大産業が生まれている。 +% 観光は,地方創生の切り札,成長戦略の柱である。 +% 近年,,地域の観光資源の魅力向上やその発信において,どのような提供手法が適切 +% かを検討していくことが必要になります。そのため,技術の先進性のみに頼るのではなく,訪日外国人旅行者の更なる誘客や,体験満足度の向上に向け,情 % 報発信手段や魅力向上手段としてのICTの活用が期待されます -% ARは観光振興事業において幅広く活用されています。地域活性化と親和性があるため、今後も +% ARは観光振興事業において幅広く活用されています。地域活性化と親和性があるため,今後も % 導入する地域は増えていくでしょう。 -% この一年は 2020 年 4,000 万人の目標を確実に実現し、我が国が真の観光立国となるため -% の「勝負の年」である。こうした問題意識から、昨年８月から本年５月にかけて「観光戦略 -% 実行推進会議」を計 10 回開催し、有識者から示唆に富む様々なご意見をいただき、議論を +% この一年は 2020 年 4,000 万人の目標を確実に実現し,我が国が真の観光立国となるため +% の「勝負の年」である。こうした問題意識から,昨年８月から本年５月にかけて「観光戦略 +% 実行推進会議」を計 10 回開催し,有識者から示唆に富む様々なご意見をいただき,議論を % 深めてきた。 -% こうした議論を踏まえると、まずは、多言語対応や Wi-Fi、キャッシュレス対応など、訪 +% こうした議論を踏まえると,まずは,多言語対応や Wi-Fi,キャッシュレス対応など,訪 % 日外国人旅行者にとって「当たり前」の環境整備を早急に進めていくことが重要である。ま -% た、こうした整備と並行して、美術館・博物館の夜間開放や外国人が楽しめるカフェの設置 -% など、地域の新たな観光コンテンツを開発していくことが重要である。 -% また、産地プロモーションや関係人口創出・移住促進事業などの相乗効果による持続的な事業を確立していきます。 -現代の日本は地方の過疎化や人口減少は大きな社会問題となっている。 -総務省統計局の「人口推計結果の要約（2018年）」によると、日本の人口は -2008年をピークに、低下の一方をたどっている。\cite{Rural_depopulation} -それに伴う少子高齢化、労働人口数の低下は、どの企業や自治体においても -無視できない緊急課題となってきており、地域活性化する方法は様々な技術 +% た,こうした整備と並行して,美術館・博物館の夜間開放や外国人が楽しめるカフェの設置 +% など,地域の新たな観光コンテンツを開発していくことが重要である。 +% また,産地プロモーションや関係人口創出・移住促進事業などの相乗効果による持続的な事業を確立していきます。 +現代の日本において地方の過疎化や人口減少は大きな社会問題となっている。 +総務省統計局の「人口推計結果の要約(2018年)」によると,日本の人口は2008年をピークに,低下の一途をたどっている\cite{地域・地方の人口}。 +それに伴う少子高齢化,労働人口数の低下は,どの企業や自治体においても無視できない緊急課題となってきており,地域活性化の方法は様々な技術 で模索されている。 -また近年、スマートフォンの急速な発展に伴い、インターネットや5Gによる -携帯電話通信網の発展が進んでいる。これによりインターネットが高速化さ -れWebサービスの遅延の低減が実現され、多数の端末による同時接続も可能 -になりつつある。特にXR（AR、VR、MRの総称）サービスには5Gが有効である -と言われ、様々な分野で技術の活用が広がっている。この流れは、地方自治 -体や観光協会においても例外ではなく、例えばARを用いて紙面だけでは伝わ -らないイベントの雰囲気や会場の様子を伝えたり、観光ツアーをARスタンプ -ラリー企画と合わせることで、高い集客効果と回遊率向上をさせるなど、 -多くの事例が増えてきている。そういった状況をふまえ、地域活性化のツー -ルの一つとして、多くの自治体や観光協会で導入されているAR技術を活用で -きるのではないかという問題関心のもと、ARを用いた観光システムを作成し -、実用性の検討を行う。 +また近年,スマートフォンの急速な発展に伴い,インターネットや5Gによる携帯電話通信網の発展が進んでいる。これによりインターネットが高速化さ +れWebサービスの遅延の低減が実現され,多数の端末による同時接続も可能になりつつある。特にXR（AR,VR,MRの総称）サービスには5Gが有効である。 +例えば,ARは専用のデバイスやスマートフォンを通して現実世界を見たときに,デジタル情報を重ねて表示する技術であるため, +高速で大容量のデータを送ることができる通信環境が求められる。しかし,5Gはそれを可能にした。以上のことから5Gは,ARのような技術に適していると言われ, +様々な分野での活用が広がり始めている。 +この流れは,地方自治体や観光協会においても例外ではなく,例えばARを用いて紙面だけでは伝わらないイベントの雰囲気や会場の様子を伝え, +観光ツアーをARスタンプラリー企画と合わせることで,高い集客効果と回遊率\footnote{本研究では,観光客が観光スポット内の施設にどれだけ訪れたかの指標とする。}向上をさせるなど,多くの事例が増えてきている。 +そういった状況を踏まえ,地域活性化のツールの一つとして,多くの自治体や観光協会で導入されているAR技術を活用で +きるのではないかという問題,関心のもと,ARを用いた観光システムを作成し,実用性の検討を行う。 \section{研究目的} -本研究は、地域活性化の新たな観光コンテンツを提案することを目的とし、 -松ヶ丘開墾場を観光地の題材としWeb上で動くAR観光システムを作成する。 +本研究は,地域活性化の新たな観光コンテンツを提案することを目的とし, +松ヶ岡開墾場を観光地の題材としWeb上で動くAR観光システムを作成する。 \newpage % ------------------------第二章------------------------ % -\chapter{ARによる地域活性化の実例} +\chapter{関連研究とARによる地域活性化の実例} +本章では関連研究と実際にARを活用した観光の事例を調査し,問題点を探る。 -\section{ロールプレイングトリップinモリマチ（静岡県森町）} -静岡県の森町という自治体で実際に行われた、町おこしARゲームの事例であ -る。参加費用は無料で、ARで表示されるキャラクター「コモコモ」を探して -町を歩き回るスタンプラリーゲームとなっている。 +\section{先行研究} +ARと観光を組み合わせたシステムの研究について紹介する。 -\section{アニメの舞台をめぐる聖地巡礼ARアプリ} -人気アニメ「エヴァンゲリオン」と箱根とのコラボレーションにより実施さ -れるイベント「箱根補完計画 ARスタンプラリー」が行われている。 -エヴァンゲリオンの舞台となっている第三新都心は現在の箱根にあたる地域 -であることから、聖地巡礼のイベントが企画され、AR技術を使うことでエヴァ -ンゲリオンのキャラクターが3Dで登場するという体験ができる。 +\subsection{マーカ型ARを活用した観光地案内アプリ制作} +三浦,松下ら\cite{関連研究1}では,東大寺大仏殿近くにある日本庭園「名勝 依水園」に協力を得て,依水園をAR コンテンツ化する活動を行っている。 +特徴としては,ARコンテンツを設置する方法としてマーカ型を利用している。マーカ型のARは,実際の場所にマーカを設置する必要があり, +周りの風景とそぐわない機械的なマーカが,景観を崩してしまうという欠点がある。 +しかし,こちらの研究ではその欠点を改善するために大学にあるレーザ加工機を使いマーカをデザインしている。 +サイズは,100mmの正方形を基本にする大きさにし,植物にも負担のない形で制作することで,景観を壊さないマーカを作成することができている。 -\section{屋嶋城復元プロジェクト（香川県高松市）} -AR技術を近い、今は失われてしまった全盛期の観光スポットの姿を浮かび上 -がらせることもできる。城門のある風景の中に入り込んだような写真が撮れ -る機能や、屋嶋城跡の城門地区を含めた15カ所を紹介するガイドも作成し、 -歴史背景等の解説、屋島の魅力紹介もアプリ内に盛り込んでいる。 +\subsection{画像認識型ARを用いた観光情報を提供する方法} +こちらのシステムでは,紙地図に印刷した観光スポットなどの初診画像をスマートフォンの内蔵カメラで撮影し,その画面上の写真画像に対して,詳細な内容を説明する +映像コンテンツを自動的に重畳表示\footnote{ARマーカーや位置情報に対してスマートデバイスをかざした際,現物に重ね合わせて表示する画像や文字などのこと。} +させることで,スムーズな観光情報の提供を実現している\cite{関連研究2}。 -\section{先行研究の課題点} +\section{ARによる地域活性化の実例} +ARと観光を組み合わせたシステムの実例について紹介する。 + +\subsection{ロールプレイングトリップinモリマチ（静岡県森町）} +静岡県の森町という自治体で実際に行われた,町おこしARゲームの事例であ +る\cite{実例1}。参加費用は無料で,ARで表示されるキャラクター「コモコモ」を探して +町を歩き回るスタンプラリーゲームとなっている。森町では「新たな魅力創出発信事業」プロジェクトと名付け, +「アクティ森」\footnote{アクティ森とは,静岡県西部（遠州）森町の北部に位置し,創作体験工房やアウトドア体験フィールド,地場産品の販売所や地元食材を使用したレストランなどを備えた複合型体験施設である\cite{実例1}。} +を起点に,シティプロモーション活動 +\footnote{シティ・プロモーションは地域再生,観光振興,住民協働など様々な概念のこと\cite{シティプロモーション}。} +の一環として新サービスをスタートさせ,交流人口の拡大に向け,静岡県内からではなく,首都圏,東京から発信している。 + +\begin{figure}[htb] + \centering + \includegraphics[width=9cm]{komokomo-map.png} + \caption{ロールプレイングトリップinモリマチのマップ} +\end{figure} +% \subsection{アニメの舞台をめぐる聖地巡礼ARアプリ} +% 人気アニメ「エヴァンゲリオン」と箱根とのコラボレーションにより実施さ +% れるイベント「箱根補完計画ARスタンプラリー」が行われている。 +% エヴァンゲリオンの舞台となっている第三新都心は現在の箱根にあたる地域 +% であることから,聖地巡礼のイベントが企画され,AR技術を使うことでエヴァ +% ンゲリオンのキャラクターが3Dで登場するという体験ができる。 + +\subsection{屋嶋城復元プロジェクト（香川県高松市）} +YashimaCastleはAR技術を使い,今は失われてしまった全盛期の観光スポットの姿を浮かび上 +がらせるアプリである\cite{実例2}。アプリ内では,城門のある風景の中に入り込んだような写真が撮れ +る機能や,屋嶋城跡の城門地区を含めた15カ所を紹介するガイドも作成し,歴史背景などの解説,屋島の魅力紹介も行っている。 + +\newpage + +\begin{figure}[htb] + \centering + \includegraphics[width=11cm]{yashima-ar.png} + \includegraphics[width=11cm]{yashima-map.png} + \caption{YashimaCastleのマップ} +\end{figure} + +\section{実例の課題点} +\begin{itemize} +\item どの実例もアプリをスマートフォンにインストールする必要があり,利用するための作業が1ステップ多い。インストールしたアプリはその時だけしか使う機会 +がないため,後から不必要になる可能性がある。 +\item マップが存在しない場合や,マップがあっても現在地が分からないため,目的地までたどり着くのに時間がかかる。 +\item 現地に行かないとAR体験ができない。 +\end{itemize} + % ------------------------第三章------------------------ % \chapter{提案} +本章では,第１章,第 2 章で挙げた背景,目的,課題点を踏まえ,松ヶ岡開墾場の観光客に向けてARとスタンプラリーを組み合わせたWeb観光システムを提案する。 + +% \section{課題に対する具体的な解決方法} +\section{Webの価値} +第2章で挙げられた課題点であるアプリのインストールによるデメリットの解決するために本システムではWebアプリを作成する。 +関連研究やARによる地域活性化の実例で利用されているネイティブアプリ +\footnote{ネイティブアプリとは,OSにアプリケーションストア経由でインストールして使うアプリのこと} +とWebアプリを比較し,Webアプリの利点について説明する。 + +\begin{itemize} +\item step-ness（体験まで1ステップであること） \\ +アプリケーションは端末にインストールする必要があるのに対して,WebはURLのリンクを踏めば一瞬でアクセスすることができる。 +「URLにアクセスする」という1ステップで体験が開始できるのはWebならではの特徴である。 + +\item Low Hurdles（心理的ハードルが低いこと） \\ +Webサイトを見るという行為は,私たちのインターネット体験の一番基本的な行動でもある。 +慣れ親しんだ行動であるからこそ心理的ハードルも低い。 + +\item Literacy Unrequired（専門知識が不要であること） \\ +「Webサイトにアクセスする」という基本的行為は,最低限PCやスマートフォンを触ったことのある人であれば,インターネットの知識に関係なくできる。 +ユーザの知識量に依存せず,体験するのに自覚がなくても扱える。 + +\item Easy to Share（シェアが簡単であること） \\ +Webのシェアは一つのURLをコピーアンドペーストするだけで完結する。 +また,3つ前述したWebの手軽さも組み合わせることで,Webの体験は多くの人へ,拡散していく可能性を秘めている。 +\end{itemize} + + +\section{スタンプラリーの利点} +「大須商店街」でしっしされたスタンプラリーの実証実験\cite{スタンプラリー}を元にスタンプラリーの利点と傾向について述べる。 + +\begin{figure}[htb] + \centering + \includegraphics[width=14cm]{effect-graph01.png} + \caption{「大須商店街」で実施された実証実験の回遊率の結果} +\end{figure} + +スタンプラリーのラリーポイントは5～10箇所が最適と言われており,それ以上多く設置してしまうとスタンプラリーの完走率が下がってしまう。 +また,ラリーポイントの設置箇所が多いほど回遊率があがる傾向にある。 + +\newpage + +\begin{figure}[htb] + \centering + \includegraphics[width=14cm]{effect-graph03.png} + \caption{「大須商店街」で実施された実証実験の滞在時間の結果} +\end{figure} + +スタンプラリーを実施することで,滞在時間が長くなる効果がある。さらに,ラリーポイントの設置数が多いとより滞在時間が長くなる。 + +\begin{figure}[htb] + \centering + \includegraphics[width=15cm]{effect-graph06.png} + \caption{「大須商店街」で実施された実証実験のアンケート結果} +\end{figure} +性別・年代問わず,スタンプラリーへの満足度は高く,特に10代の満足度が高い傾向にある。 + \section{AR観光システムの提案} -本研究のシステム構成はARとスタンプラリーを組み合わせた観光システム -であり、松ヶ丘開墾場に訪れた観光客向けに作成する。 -松ヶ丘開墾場の屋外にGPS機能を利用しARを配置する。 -屋内にはポスターや絵を読み取ることでARを表示させるシステムを構成する。 -このようにすることで、屋外と屋内で表示させるコンテンツを分けることで、観光客が退屈させない -ようにする。 -ARを表示した後は、施設情報の表示やスタンプラリーの獲得をできるようにする。 -こうして観光客が松ヶ丘開墾場の歴史や文化の理解を高め、普段行かないような場所に足を運ばせることで、 -回遊率と滞在時間を増加させることが可能になる。 +本研究で作成するWebARスタンプラリーは,マップを見ながらスタンプラリーのスポットを目指す。そして目的地に到着した時点でARページに移動し +AR体験ができる。その後,施設情報の表示,スタンプ獲得,カメラ撮影などが行えるものとする。 +これにより,松ヶ岡開墾場の歴史や文化を理解を深めることができる。 +また,スタンプラリー機能を付けることで普段行かないような場所に運ぶ機械を与えることで,回遊率,滞在時間の増加が可能になる。 +% ARの配置は松ヶ岡開墾場の屋外にGPS機能を利用し配置する。 +% スタンプラリーのマップの作成にはLeafletを使用し,マーカーを設置しオブジェクトがどこにあるか分かるようにする。 +% 設置したARを読み取った後に,施設情報の表示やスタンプラリーの獲得をできるようにする。 +% こちらは,javaScriptのライブラリであるA-FrameとAR.jsを使用し作成する。 -こちらは、javascriptのライブラリの -A-FrameとAR.jsを使用し作成する。 -そして、施設説明や写真撮影、スタンプラリーができるような機能にする。 -こちらはHTMLとCSSを利用し表示する。 \par -また、設置したARの位置はlefleatを使用し、マーカーを設置しオブジェ -クトがどこにあるか分かるようにする。 +\subsection{システムの概略図} +本研究で作成するサービスは,マップからユーザの現在地とラリーポイントの位置を確認し, +ラリーポイントに近づいたら自動的にARページに移動し,webカメラを起動する。 +その後,ARオブジェクトを読み取ることで情報の表示,カメラ撮影,スタンプラリーの獲得を行えるものとする(図3.4)。 +\begin{figure}[htb] + \centering + \includegraphics[width=10cm]{system-procedure.jpg} + \caption{システムの概略} +\end{figure} -\section{AR技術} -\subsection{マーカー型（画像認識型、ビジョンベース）} -画像や写真などをマーカーとして登録し、マーカーを認識するとARコンテンツ -情報（動画や3D、マップ）が表示。 +\chapter{システム設計} +本システムで作成するものは主なシステムは4つあり,図 4.1 がシステム全体の流れである。 -\subsection{GPS型（位置認識型、ロケーショベース} -スマートフォンなどの端末の現在位置をGPSで取得し、付近に設定されたARコ +\begin{itemize} + \item ホーム画面の作成 \\ + ホーム画面のデザインは Figma\footnote{Figma とは,無料で利用できるブラウザ上で簡単にWebデザインができるツールである。} + を使い作成する。 + デザインは,主にスマートフォンで閲覧されることを想定し,スマホ用画面とpc用画面の2つを用意する。 + また,メニューボダンを画面下部に設置するなど,ユーザの操作性を重視する。 + + \item ラリーマップの作成 \\ + マップの中心を松ヶ岡開墾場に設定し,松ヶ岡開墾場の主要な施設にラリーポイントを6つ設置し, + ユーザの現在地を取得し,今いる場所が分かるようにマーカを配置する。 + これにより現在地とラリーポイントの場所を瞬時に判断できる。 + そして,ユーザが移動するとマーカも連動して移動し6つのラリーポイントに近づくたびに,ARページに移動するようにする。 + + \item ARページの作成 \\ + ARページでは,ARをWebカメラで読み取ることでメニューの表示を行う。 + 施設情報の表示機能,カメラ機能,スタンプ獲得機能の3つを作成する。 + + \item スタンプラリーシステムの作成 \\ + どの場所でスタンプを獲得したかの判定システムと獲得したスタンプを保存するシステムの作成する。 + また,スタンプラリーを完走した際にメッセージ表示の処理を行う。 + +\end{itemize} + + +\begin{figure}[htb] + \centering + \includegraphics[width=15cm]{system-flow.png} + \caption{システムのフローチャート} +\end{figure} + + + +\chapter{本研究のシステムの開発} +前章の設計を踏まえ，本研究に用いた技術と開発について示す。 + +\section{本研究で扱っているプログラミング言語} +\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ライブラリ} +\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} + +\section{マップの作成} +スタンプラリーのマップの作成には JavaScript のライブラリであるLeafletを使い作成した。 +LeafletはWeb上にタイルベースの地図データを表示することができる。 +現在地とマーカの場所を瞬時に判断できるように,マップの中心を松ヶ岡開墾場に設定し,松ヶ岡開墾場の主要な施設にマーカを6つ配置した。 +また,ユーザの現在地にマーカを配置した。 +そして,ユーザが移動するとそれに連動して現在地マーカも移動するようにし, +この現在地マーカがそれぞれ6つのマーカに近づくたびに,ARページに移動するようにした。 + +% \section{作成したスタンプラリーマップ} +\begin{figure}[htb] + \centering + \includegraphics[width=15cm]{stamp-map.png} + \caption{スタンプラリーマップ} +\end{figure} + +\subsection{位置情報読み込み機能} +位置情報とは，携帯端末などで利用者が所在する現在地を取得し，状況に応じた情報を提供してくれ +るソフトウェアサービスの一種である。本研究のスタンプラリーマップには情報端末機器使用者の +位置情報が分かる位置情報サービスが備わっており，図5.1では「現在地」と表示しているマーカが +現在地を表している。 + +\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{ARページの作成} +使用したAR技術と機能について説明する。 + +\subsection{ARの種類}\label{sec:AR} +今回使うAR.jsで利用できるAR技術はには主に3種類がある。 + +\begin{itemize} +\item マーカ型（画像認識型,ビジョンベース）\\ +画像や写真などをマーカとして登録し,マーカを認識するとARコンテンツ +情報（動画や3D,マップ）を表示する。 + +\item GPS型（位置認識型,ロケーションベース） \\ +スマートフォンなどの端末の現在位置をGPSで取得し,付近に設定されたARコ ンテンツを表示する。 -\subsection{空間認識型} -スマートフォンやタブレットの画面をユーザーがタップすることでARコンテ -ンツが出現する。 - -\subsection{物体認識型（立体認識型）} -物体認識型立体物特定の三次元の立体物を認識すると、関連するARコンテン -ツを表示する。 +\item イメージトラッキング型 \\ +マーカではなく写真やイラストにかざすとARコンテンツを表示する。 +\end{itemize} \subsection{ARの表示方法} -本システムには物体認識型ARとGPS型ARを利用する。 -物体認識型ARはカメラを通して、現実世界の物体（物体の形、色）を認識し、ARコンテンツを配置（表示）することができる。 -GPS型ARでは、媒体の現在地を取得しその現在地と目的地との距離を計測してARコンテンツの表示・非表示などが可能になる。 -この2つを組み合わせ、施設説明の文やARコンテツの切り替えを行う。 +\ref{sec:AR}の技術を検証した結果,安定してオブジェクトの表示が可能であり, +松ヶ岡開墾場の景観を壊さないという観点から本システムではGPS型ARを採用 +した。 +このGPS型ARは,スマートフォンやタブレットなど,媒体の現在地を取得しその現在 +地と目的地との距離を計測してARコンテンツの表示・非表示などが可能である。 -\subsection{想定デバイス} -デバイスはスマートホンやタブレットを想定している。 -スマートホンやタブレットでWebページを開き、端末に搭載されているカメ -ラとGPS機能からオブジェクトを読み取り、現在地を特定する。 +\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"\verb|>| \\ + \verb|| +\end{itembox} -\section{スタンプラリーのメリット} -スタンプラリーのラリーポイントは5～10箇所が最適と言われており、ラリ -ーポイントの設置箇所が多いほど回遊率があがる傾向にある。 \par -スタンプラリーを実施することで、滞在時間が長くなる効果がある。さらに、 -ラリーポイントの設置数が多いとより滞在時間が長くなる。 \par -性別・年代問わず、スタンプラリーへの満足度は高く、特に10代の満足度が -高い傾向にある。 \cite{Stamp_Rally} + +\subsection{ARページの機能紹介} +ARページでは,3つのメニューボタンを用意し,ARキャラクターを読み取った時点でメニューボタンが出るように構築した。 +3つのメニューボタンでは,「施設情報の表示」,「スタンプの獲得」,「カメラ撮影」が利用できる。 + +\begin{itemize} +\item 施設情報の表示 \\ +施設情報には,ユーザがその施設の歴史や文化の理解を深められるようにその施設の写真,営業時間,施設の概要を載せる。 + +\item スタンプの獲得 \\ +ユーザはスタンプの獲得ができ,獲得したスタンプを確認できるようにスタンプ一覧ページへの移動を可能にしている。 + +\item カメラ機能 \\ +ユーザがARキャラクターと一緒に撮影でき,撮影した写真は保存や削除できるように構築した。 +\end{itemize} + + +\subsection{表示するARキャラクター} +今回,AR として「ましろちゃん」というキャラクターを表示する。AR キャラ +クターは Blender で作成した。Blender は 3D/CG アニメーションを作成するための統合環境アプリケーションである。 + +\section{スタンプラリーシステムの作成} +スタンプラリーページでは獲得したスタンプ情報はJavaScript の LocalStorege を使用し , 保存している。 +獲得スタンプの受け取りには URL パラメータを使用した。 urlに値を付与し,その値が付与されたurlでページを読み込む。 +その際,Javascript で url に付与した値を受け取りその値によって,どこでスタンプを獲得したか把握する。 + +\section{想定デバイス} +デバイスはスマートフォンやタブレットを想定している。 +スマートフォンやタブレットでWebページを開き,端末に搭載されているカメラでオブジェクトを読み取り,GPS機能で現在地を特定する。 + \chapter{結論} -\section{課題} + +\section{結論} +本研究ではWebARを利用した松ヶ岡開墾場観光システムを作成した。 +Webを利用することでアプリケーションのインストール不要なスタンプラリー作成できた。 +また,leafeltを利用したことで現在地の把握とラリーポイントの把握を同時に行えるようにした。 +本研究で作成したスタンプラリーは,松ヶ岡開墾場だけではなく,他の観光スポットでも利用できると考えている。 + +\section{システムの課題点} +ARページをリロードした際にデザインが崩れてしまうことがあるため,原因を調査する必要がある。 +また,スタンプラリーをコンプリートした際の特典がないためユーザ側の参加意欲が損なわれてしまう。 +その他,機能に関しても改善が必要な箇所は,まだ残っているため可能な限り修正を行う必要がある。 + + \section{今後の展望} -本システムのスタンプラリー機能が未完成なため、完成を急ぐ。 -その他、機能に関しても実証実験を行い、改善が必要な箇所は可能な限り修正 -を行う。 -また、複数の端末によるデバックを行いARが正しく表示されるか、オブジェクト -配置位置にずれがないか確認する必要がある。 - -% \section{スタンプラリーの視点} -% \section{回遊率} -% \section{滞在時間} +本研究で使用したAR技術はすでに存在する物体に情報を書き込むことができる技術であることから,機材などを設置したり博物館のような建物を設置する必要はない。 +また,本システムはスマホートフォンだけあればAR技術を体感することができることから,コストや運用面でも非常に効率的なシステムである。 +そのため松ヶ岡開墾場だけでなく,他の施設でも活用できると考える。今後は,この作成した AR スタンプラリーを誰でも簡単に作成できるシステムを構築し提供できるようにしていく +そして,ニーズに合わせたAR技術の提供,活用方法も考えていく。 +% 本システムのスタンプラリー機能が未完成なため,完成を急ぐ。 +% その他,機能に関しても実証実験を行い,改善が必要な箇所は可能な限り修正を行う。 +% また,複数の端末によるデバックを行いARが正しく表示されるか,オブジェクト配置位置にずれがないか確認する必要がある。 -% \section{今後の展望} +\chapter{作成物紹介} +作成したシステムは GitBucket 登録し，公開することとした。また,本システムはスマホートフォンでの利用を推奨する。下の +URL を各情報端末の URL 欄に入力すれば松ヶ岡開墾場 AR スタンプラリーのページを開ける。 +\section{本システムの URL と QR コード} +\url{https://www.yatex.org/gitbucket/Fumiya238/AR-project/pages/APP/WebApp.html} +\begin{figure}[htb] + \centering + \includegraphics[width=5cm]{QR_244964.png} + \caption{松ヶ岡開墾場ARスタンプラリーのQRコード} +\end{figure} -\begin{thebibliography}{} -\bibitem{Rural_depopulation} 地域・地方の現状と課題 \par -\url{https://www.soumu.go.jp/main_content/000629037.pdf}(参照 2021-8-18) \par -\bibitem{AR_merit} 【AR×観光×地方創生】AR（拡張現実）と地域活性化事例5選 \par -\url{https://pretiaar.com/artimes/article/10539/#ARno_de_yu_huo_xing_huaniikaseru_yao_su} (参照 2021-8-25) -\bibitem{AR_category} ARの種類 | AR(拡張現実)コンテンツが誰でも簡単に制作できる「COCOAR(ココアル)」 \par -\url{https://www.coco-ar.jp/about-ar/category.html}(参照 2021-6-3) -\bibitem{Stamp_Rally} スタンプラリーの効果 \par -\url{https://rally.shachihata.jp/about/effect.php} +\begin{thebibliography}{99} +\bibitem{地域・地方の人口} (株)富士通総研.“地域・地方の現状と課題" \par +\url{https://www.soumu.go.jp/main_content/000629037.pdf}, (参照 2021-8-18). +\bibitem{ARと地方創生} プレティア・テクノロジーズ株式会社.“【AR×観光×地方創生】AR（拡張現実）と地域活性化事例5選" \par +\url{https://pretiaar.com/artimes/article/10539/}, (参照 2021-8-25). +\bibitem{関連研究1} 三浦 剛,松下 征悟.“観光地案内アプリ制作による ICT デザイン教育" \par +\url{https://www.jstage.jst.go.jp/article/jssd/64/0/64_80/_pdf}, (参照 2021-11-25). +\bibitem{関連研究2} 深田秀実,船木達也,兒玉松男,宮下直也,大津晶.“画像認識型AR技術を用いた観光情報提供システムの提案" \par +\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{実例1} 株式会社 アクティ森.“森町体験の里「アクティ森」で新サービス「ロール プレイング トリップ in モリマチ」をスタート AR×なぞきゃら×コスプレと掛け合わせた地方創生プロジェクト" \par +\url{https://kyodonewsprwire.jp/prwfile/release/M105565/201907118596/_prw_PR1fl_ndEm9c3s.pdf}, (参照 2021-11-25). +\bibitem{シティプロモーション}シティプロモーション自治体等連絡協会. “シティプロモーションとは？" +\url{https://www.citypromotion.jp/シティプロモーションとは？}, (参照 2021-12-13). +\bibitem{実例2} 高松市.“失われた山城をCGで再現。日本書紀の世界をリアルに体感できる観光地に" \par +\url{https://biz.tabido.jp/contents/000031/index.html}, (参照 2021-11-10). +\bibitem{AR} Cloud CIRCUS.“ARの種類 | AR(拡張現実)コンテンツが誰でも簡単に制作できる「COCOAR(ココアル) " \par +\url{https://www.coco-ar.jp/about-ar/category.html}, (参照 2021-6-3). +\bibitem{スタンプラリー} Shachihata Stamprally.“スタンプラリーの効果" \par +\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). \end{thebibliography} \end{document} \ No newline at end of file