diff --git a/paper/puti.tex b/paper/puti.tex index fef0c8e..c3ed5a6 100644 --- a/paper/puti.tex +++ b/paper/puti.tex @@ -1,48 +1,322 @@ %#!platex -kanji=%k %#DVIPDF dvipdfmx -f ipa.map +\AtBeginDvi{\special{pdf:mapfile ptex-ipa.map}} \documentclass{jsbook} %\pagestyle{empty} \usepackage[dvipdfmx]{graphicx} %\usepackage{listings, jlisting} %\usepackage[sectionbib]{chapterbib} -%\usepackage{ascmac} -\usepackage{geometry} -\usepackage{url} % 文中にURLを書くときは \url{} で括る \usepackage{ascmac} +\usepackage{geometry} +\usepackage{url} +\usepackage{float} \geometry{textwidth=160mm, textheight=225mm} \renewcommand{\bibname}{参考文献} - + \title{酒田版GeoGuessrの提案} \author{広瀬研究室\\C1221856 沼倉 結磨} \date {\today} \begin{document} \maketitle -\tableofcontents -% 目次の出力 -\tableofcontents -\clearpage - -\section{はじめに} -\section{背景} -\subsection{地方都市の若年層の流出} -\subsection{若年層へのアプローチ} -\subsection{参考事例・先行事例} -\paragraph{} -\subparagraph{} -\section{システム設計} -\subsection{使用したオープンソース} -\subsubsection{A-frame概要} -\subsubsection{A-frame機能} - +\begin{center} + {\bfseries 概要} + \end{center} + 近年，地方都市における課題として，若年層の都市部への人口流出が挙げられる。そこで，若年層のインターネット普及率，オンラインゲ\ +ームの利用率などが割合として多いというデータをもとに，若年層が取り組みやすく地域の魅力発信を行えるためのゲームの制作を始めた\\ +。 + その際，Googleストリートビューを用いてブラウザ上で公開されている位置推察ゲームのGeoGuessrをもとに酒田版GeoGuessrの開発を行っていく。 +\tableofcontents \chapter{はじめに} - 近年、地方都市における課題として,若年層の都市部への人口流出が挙げられる。そこで,若年層のインターネット普及率,オンラインゲームの利用率などのデータをもとに,地域の魅力発信のためのゲームの制作を始めた。 -その際,Google ストリートビューを用いてブラウザ上で公開されている位置推察ゲームの GeoGuessr をもとに -酒田版 GeoGuessr の開発を行っていく。 + 地方都市において少子高齢化は深刻な社会問題であり、出生率の低さに加え、若年層の都市部への流出によって、この問題は止まることなく進行していく。本研究ではIT分野の技術を利用し，若年層をメインターゲットとして地方都市に興味を持ってもらい若年層の人口比率の増加に繋げられるようなシステムの開発を行った。 + +\chapter{背景} +\section{地方都市における課題} + 地方都市において少子高齢化および若年層の都市部への流出が問題となっている。総務省資料より「地方から東京圏への人口流出は加速しており，とくに若者の流出が激しい。東京圏への人工集中度は約3割に達しており，これは諸外国と比べて極めて高い。」[1]としている。また，国土交通省は人口減少が与える影響について以下のような可能性を示唆している[2]。 + +\begin{itemize} + \item 生活関連サービス（小売・飲食・娯楽・医療機関等）の縮小 + \item 税収減による行政サービス水準の低下 + \item 地域公共交通の撤退・縮小 + \item 空き家、空き店舗、工場跡地、耕作放棄地等の増加 + \item 地域コミュニティの機能低下 +\end{itemize} + + +しかし，都市部の若者の地方移住への関心は高まっているとされている。内閣府が行った新型コロナウイルス感染症の影響下における生活意識・行動の変化に関する調査において，アンケート上位の関心理由は「人口密度が低く自然豊かな環境に魅力を感じたため」[3]となっている。このことから，人々の地方への関心を高めるためには地方の環境を離れた位置からでも体験できるようなシステムの開発を行う必要がある。 +\subsection{若年層へのアプローチ方法} + 若年層をメインターゲットとして地域の情報を発信する媒体として，ゲームを選択した。消費者庁のアンケート[4]によると，オンラインゲームの利用状況としては10代・20代ではどちらも40\%近くが平日に利用しており(図2-1)，利用時間は男女ともに100分を超えている(図2-2)。このことから、ゲームの形で情報発信を行うことは若年層をメインターゲットとするには有効であると言える。 +\begin{figure}[H] + \centering + \includegraphics[width=10cm]{game-use.png} + \caption{オンラインゲーム利用率} + \label{fig:} +\end{figure} +\begin{figure}[H] + \centering + \includegraphics[width=7cm]{game-time.png} + \caption{オンラインゲーム利用時間} + \label{fig:right} +\end{figure} + + +\subsection{両眼視差と立体視差の優位性} + VRの手法をとった理由として，情報伝達の優位性がある。紹介ページなどの文字のみの情報では体感的に伝わりづらい可能性が高い。矢野・清水は「立体画像のほうがローカルピークの形がやや鋭く，最大値は110度の場合で平面画像の約1.2倍となっている。この実験結果には立体画像のほうが、重心動揺への誘導効果が大きいことが示されている。」[4]と述べている。また、同文献内で「両岸視差による立体映像により、明確な奥行き情報の提示によって，大きな「臨場感」を提示できる可能性があることが示唆される。」とも述べられている。このことからWebVRを用いることは使用者に対して対象の場所のより高い臨場感を提供できると考える。 +\subsection{参考事例} +\subsubsection{GeoGuessr} + GeoGuessrはスウェーデンのエンジニアであるアントン・ウォーレンによって制作されたWebブラウザゲームである。利用者ははgoogleストリートビューのランダムな初期地点に配置され、マウス操作で視点を操作し、集めた周辺の地理情報(看板や店名など)から自身の現在地を当てるというシンプルなルールの位置推理ゲームだ。本研究ではこれを酒田市に限定し、回答後にその場所の特徴点や魅力点を表示する機能などを追加していく。 +\subsubsection{首里城復興AR謎解きラリー} +スマートフォンで利用できるARを活用した体験型ゲームであり、本イベントを主催したセガエックスディーによると「楽しく学べるので次のスポットも巡りたい」という感情を生み出すことで周遊促進や首里城復興段階の魅力向上、訪れてほしいスポットへの誘導など様々な効果が期待できます。[3]と述べられている。 +\chapter{システム構造} +\section{システム概要} +本研究のシステムは、オープンソースのA-Frameを利用し、利用者が遠距離からでもその土地の環境を体感しやすく、若年層をメインターゲットとしたブラウザゲームの開発を行った。 +\section{A-Frame} +A-Frameはウェブブラウザ上でVRコンテンツを作成することができるオープンソースの1つで、画像の配置やオブジェクトの設置などを行えるライブラリとなっている。[6] +\subsection{A-Frameの機能} +\subsubsection{使用したA-Frameの要素} +A-frameでVRシステムを構築するためには以下のような要素を使用する。 +\begin{enumerate} +\item{a-entity} + 外観,動作,機能を提供するための要素(コンポーネント)をプラグインするプレースホルダーオブジェクト +\item{a-camera} + カメラの方向を指定するためのオブジェクト。javascriptで座標を指定するのと同様に，x軸，y軸，z軸の値を決めることでページが開かれた際の方向を指定する。 +\item{cursor} + カーソルを画面上に表示し，ホバー状態とクリック状態を追加する。fuseTiemputをミリ秒単位で設定することで反応までの時間を設定することが可能 +\item{position} + cameraと同様にx軸，y軸，z軸を指名することでカーソルの表示位置を設定。 +\item{geometry} + 表示するカーソルの形状を設定する。本プログラムではprimitive ringを入れ，円形のカーソルを表示した。 +\item{scale} + カーソルの大きさをx軸，y軸，z軸で指定することで変更する。 +\item{material} + 指定した要素に対して，外観の設定を行う。本プログラムでは色を青，形状をなめらかに設定 +\item{a-animation} + 要素に対してアニメーション効果の設定を行う。 +\item{begin} + 要素の初期の状態とクリック状態などを指定する。 +\item{easing} + animationの速度の状態を設定。ease-inで徐々に加速，ease-outで徐々に減速，linea\ +rで等速変化，ease-in-outで加速してから減速する。 +\item{attribute} + アニメーションを適用させる属性を指定。 +\item{from to} + アニメーション前後の大きさの状態を指定する。 +\item{a-sky} + 表示される360度画像の中にオブジェクトを表示するための要素。 +\end{enumerate} + + +\section{HTML} +　ここまでは大まかなウェブページの設定を行っている。外部ファイルを読み込むための属性であるscript srcを使い外部からA-Frameのライブラリを取得し，「a-」のタグでそれぞれにあったA-Frameのスクリプトを呼び出すことができる。a-cameraで利用者がページを開いた際に最初に見ている方向を設定し、a-entityのfusetimeを1000とすることで、「1000ミリ秒(1秒)間カーソルを合わせることでクリックした判定を出す」というイベントをつけている。\\ +　a-sky，a-entityにはそれぞれidを設定し，CSVファイルからそれぞれ360度画像と座標情報を読み取り，画面上に出力している。 +\begin{itembox}[l]{geoguessr.html} + \scriptsize{ +\begin{verbatim} + + + + + 酒田版geoguessr + + + + + + + + + + + + + + + + + + + +\end{verbatim} + } +\end{itembox} + + +\section{JavaScript} +\subsection{属性とcsvの紐付け} +ここではそれぞれ geoguessr.html の id と CSV ファイルで使う要素名を関連付けており,setAttribute で指定した部分には,予め CSV ファイルに記載しておいた a-sphere で配置するオブジェクトの情報になっている。 +\begin{itembox}[l]{geoguessr.js} + \scriptsize{ + \begin{verbatim} +document.addEventListener("DOMContentLoaded", ()=>{ + var place; + var sky = document.getElementById("sky"); + var kago = document.getElementById("basket"); + var cam = document.getElementById("camera"); +　　　　　　var dir = "image/"; + var inirot = {}; + + function addSphere(attr) { + console.log(attr); + let xyz = `${attr.x} ${attr.y} ${attr.z}`; + let tama = document.createElement("a-sphere"); + kago.appendChild(tama); + console.log(`x y z=${xyz}`) + tama.setAttribute("color", attr.color) + tama.setAttribute("opacity", attr.opacity); + tama.setAttribute("radius", attr.radius); + tama.setAttribute("position", xyz); + tama.addEventListener("click", moveStage); + tama.setAttribute("next", attr.next); + } + \end{verbatim} + } +\end{itembox} + +\begin{figure}[th] + \centering + \includegraphics[width=7cm]{xyz.drawio.png} + \caption{座標設定の図} + \label{fig:xyz} -\setcounter{tocdepth}{3} -\tableofcontents +\end{figure} + +\subsection{使用者の初期座標の設定} +ここでは画像ごとに使用者が最初に見ている方向を設定するために必要な情報の紐付けを行っている。camera.csvの中には，目標の画像とxyz軸の数値が記録されており、これをあとに出てくるfetchで取得することで初期設定をしている。 + +\begin{itembox}[l]{geoguessr.js} + \scriptsize{ + \begin{verbatim} + function setPlace(target) { + for (let e of document.querySelectorAll("#basket > *")) { + e.remove(); // 前の場所に設置した球をすべて消す + } + + sky.setAttribute("src", dir+target); // 新しい場所の360度写真へ + cam.setAttribute("rotation", inirot[target]); + console.log(`----------${target}`); + console.log(inirot[target]); + for (let i in place) { + if (place[i].photo == target) { // その場所の定義を + addSphere(place[i]); // CSVデータから全て読んで + } + } + } + function moveStage(e) { + setPlace(e.target.getAttribute("next")); + } + function prepareCSV() { + fetch("camera.csv") + .then((response) => response.text()).then((csv) => { + let rot = new CSV(csv, {header: true}).parse(); + for (let row of rot) { + inirot[row.photo] = `${row.rotX} ${row.rotY} ${row.rotZ}`; + } + }); + \end{verbatim} + } +\end{itembox} +\subsection{CSVファイルからの情報取得} +　このコードではそれぞれfetchというインターフェースを使用し，それぞれのCSVファイルから目的の情報を取得し，画面に反映させる制御をしている。picture.csvには，その地点の画像や次のち天を紐付けた情報が入っており，これをrandom関数に正規表現を用いてindexから乱数を用いて初期地点を決め表示する。if文で正しく取得できた場合にはそのまま実行し，何らかの理由で取得できなかった場合には失敗した場合専用画像を表示するようにした。 + +\begin{itembox}[l]{geoguessr.js} + \scriptsize{ +\begin{verbatim} + fetch("picture.csv") + .then((response) => response.text()).then((csv) => { + place = new CSV(csv, {header: true}).parse(); + var x = Math.floor(Math.random()*place.length) + if (place[x].photo.match(/\.jpg$/)) {　　 + setPlace(place[x].photo) + } else { + setPlace("onegai_gomen_man.png") // 失敗時の写真 + } + }); + } +\end{verbatim} + } +\end{itembox} + +\section{CSV} +それぞれ，その地点の画像，色，大きさ，透明度，座標点。次の画像を指定し，これらの情報をfecthコマンドで取得しgeogeussr.htmlに読み込ませている。地点の削除や追加はこのCSVファイルを操作することによって簡単に変更可能となっている。上記のものを組み合わせて、実際に表示される画像が図-4，図-5である。 + +\begin{itembox}[l]{picture.csv} + \scriptsize{ +\begin{verbatim} +photo,color,radius,opacity,x,y,z,next +360sankyo1_xmp_e.jpg,#0000ff,0.4,1,-10,0,-8,360sankyo2_xmp_e.jpg +360sankyo1_xmp_e.jpg,#0000ff,0.4,1,-1,0,4,360sankyo11_xmp_e.jpg +360sankyo2_xmp_e.jpg,#0000ff,0.5,1,7,0,-9,360sankyo3_xmp_e.jpg +360sankyo2_xmp_e.jpg,#ff0000,0.5,1,8,0,7,360sankyo1_xmp_e.jpg +360sankyo3_xmp_e.jpg,#ff0000,0.5,1,-10,0,1,360sakyo2_xmp_e.jpg +360sankyo3_xmp_e.jpg,#0000ff,0.5,1,3,0,4,360sankyo4_xmp_e.jpg +360sankyo3_xmp_e.jpg,#0000ff,0.5,1,6,0,-1.5,360sankyo5_xmp_e.jpg +360sankyo4_xmp_e.jpg,#ff0000,0.5,1,4,0,-5,360sankyo3_xmp_e.jpg +360sankyo4_xmp_e.jpg,#0000ff,0.5,1,-6,0,3,360sakyo5_xmp_e.jpg +360sankyo5_xmp_e.jpg,#ff0000,0.5,1,1.5,0,6,360sankyo6_xmp_e.jpg +360sankyo5_xmp_e.jpg,#0000ff,0.5,1,-13,0,-6,360sankyo4_xmp_e.jpg +360sankyo5_xmp_e.jpg,#0000ff,0.5,1,-1,0,-6,360sankyo3_xmp_e.jpg +360sankyo6_xmp_e.jpg,#ff0000,0.5,1,0,0,6,360sankyo7_xmp_e.jpg +#360sankyo6_xmp_e.jpg,#0000ff,0.5,1,-3,0,-7,360sankyo +360sankyo7_xmp_e.jpg,#0000ff,0.5,1,0,0,6,360sankyo6_xmp_e.jpg +360sankyo8_xmp_e.jpg,#0000ff,0.5,1,-1,0,-6,360sankyo9_xmp_e.jpg +#ここに足りない分 +360sankyo8_xmp_e.jpg,#ff0000,0.5,1,1.5,0,6,360sankyo10_xmp_e.jpg +360sankyo9_xmp_e.jpg,#ff0000,0.5,1,-8,0,2.7,360sankyo8_xmp_e.jpg +360sankyo10_xmp_e.jpg,#ff0000,0.5,1,0.5,0,6,360sankyo8_xmp_e.jpg +360sankyo10_xmp_e.jpg,#0000ff,0.5,1,-0.4,0,-6,360sankyo11_xmp_e.jpg +360sankyo11_xmp_e.jpg,#0000ff,0.5,1,-4,0,-6,360sankyo1_xmp_e.jpg +360sankyo11_xmp_e.jpg,#ff0000,0.5,1,0.5,0,-6,360sankyo10_xmp_e.jpg +\end{verbatim} + } +\end{itembox} + +\chapter{実験} +\section{実験方法} +オープンキャンパスやその他大学イベントなど若年層が集まりやすい場所で実際に体験してもらい，使用感や希望する機能などをアンケート調査によって収集する。第１回のアンケートの内容は以下のとおりである。 +\begin{itemize} + \item GeoGuessrの認知度に関する調査 + \item 本システムを利用した際に不快感や酔うなどはなかったか + \item あると回答した人に対して、具体的な要素の調査 + \item 追加するべき、あるいは追加してもらいたい機能の調査 +\end{itemize} + +\section{実験結果} + 2024年9月22日に行われたオープンキャンパスにて，実際に本研究で開発中のシステムを使い使用感に関してのアンケート調査を行った。\\ + 本システムへの使用感(画面酔いなどの問題)は利用者から問題提起はなく、アプリケーションとしての動作は大きな課題はないように思えた。しかし、改善点としてヒント機能の実装が回答されており、地域の魅力発信を主目的とする本システムでは早急にマップ上のインフォメーション機能(バルーンによる拡大や情報表示)の追加を行うべきである。 - + \chapter{結論} + \section{結論} + 本システムは現在，山居倉庫周辺の探索を行えるようになっている。利用者がWebpageを開いた際にcsvファイルに登録されているランダムな地点から視点操作でオブジェクトにカーソルを合わせることで周辺情報を見ることができ，実験のアンケート調査からも操作感やVR画面に関しての不満はなかった。\\ + しかし，実験を通して利用者がより環境を感じることができるような臨場感と，伝えたい情報開示システム部分が実装できていないため，今後はこの２点を中心にシステムの構築をする必要がある。 +\section{展望} +\subsection{技術展望} +現在実装しているのは山居倉庫のみであり，他の観光地などの地点を追加する必要性がある。また，実験の調査でもっとも多かったヒント機能実装のために，tooltipなどを追加し，カーソルを合わせた際にその箇所にある特徴的なものの情報を提示する機能を実装する。\\ +さらに，複数人で取り組むことができるようにNginxとWebSocketを用いて同時接続ができるような機能の実装を行う。 +\subsection{研究展望} +具体的な実験は1度しか行えておらず、回答数も少ないため今後もイベントでの実験を行い、利用者の没入感と使用感を高められるシステム構築を行っていく。 + +\begin{thebibliography}{} + % \bibitem{} . “”. \url{}, (参照日 2024-11-06). + \bibitem{jinkou}総務省. "地方からの人口流出と東京圏への集中". \url{https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h27/html/nc231110.html}，(参照日 2024-11-14). +\bibitem{koudo}国土交通省. "2 人口減少が地方のまち・生活に与える影響".\url{https://www.mlit.go.jp/hakusyo/mlit/h26/hakusho/h27/html/n1122000.html}，(参照日 2024-11-9). +\bibitem{kansin}内閣府. "第6回 新型コロナウイルス感染症の影響下における. 生活意識・行動の変化に関する調査".\url{https://www5.cao.go.jp/keizai2/wellbeing/covid/pdf/result6_covid.pdf}，(参照日2024-05-23). +\bibitem{game-anc}"消費者庁・MUFG, オンラインゲーム動向整理" ,\url{https://www.caa.go.jppolicies/policy/consumer_policy/caution/internet/assets/consumer_policy_cms106_220630_08.pdf},(参照日2024-5-22). +\bibitem{douyou}"視覚情報による身体動揺―臨場感の計測"，\url{https://annex.jsap.or.jp/photonics/kogaku/public/30-05-kaisetsu3.pdf}，(参照日 2024-5-22). +\bibitem{a-frame} A-Frame. "A-Frame -Make WebVR". A-Frame \url{https://aframe.i\ +o/}, (閲覧日:2023-6-23). + + +\end{thebibliography} + +\end{document}