\documentclass[a4j]{jarticle}
% -*- coding: utf-8 -*-
\usepackage[dvipdfmx]{graphicx}
\usepackage{ascmac}
\usepackage{url}
\topmargin -2cm
\textheight 26cm
\textwidth 16.5cm
\oddsidemargin -0.3cm
\pagestyle{empty}
\begin{document}
\title{酒田版GeoGuessrの提案}
\author{広瀬研究室\\C1221856 沼倉 結磨}
\date {2024年6月5日}
\twocolumn[
\maketitle
\begin{center}
{\bfseries 概要}
\end{center}
地方都市における課題として，若年層の都市部への人口流出が挙げられる。そこで，若年層のインターネット普及率，オンラインゲームの利用率などのデータをもとに，地域の魅力発信のためのゲームの制作を始めた。その際,Google ストリートビューを用いてブラウザ上で公開されている位置推察ゲームのGeoGuessrをもとに酒田版GeoGuessrの開発を行っていく。
\vspace*{2em}
]
\thispagestyle{empty}
\section{はじめに}
地方において人口に関わる諸問題は多く存在する。その中でも，地方から都市部への若年層の流出問題に着目，IT分野の技術を利用し，地方に興味を持ってもらい若年層の人口比率の増加に繋げられるようなシステムの開発を行った。
\section{背景}
\subsection{地方における課題}
近年，地方の地域において若年層の都市部への流出が問題となっている。総務省の資料によると，「地方から東京圏への人口流出は加速しており，特に若者の流出が激しい。東京圏への人工集中度は約３割に達しており，これは諸外国と比べて極めて高い。」[1]としている。しかしながら，都市部の若者の地方移住への関心は高まっているとされている。その中でも上位の関心理由として，新型コロナウイルス感染症の影響下における生活意識・行動の変化に関する調査において「人口密度が低く自然豊かな環境に魅力を感じたため」[2]となっている。このことからも,人々の関心を地方へと向けるためには，地方の環境を体感しやすいような情報の発信の仕方を行う必要がある。
\subsection{若年層へのアプローチ}
文字や平面画像のみでの情報伝達では立体画像と比較して体感的に伝わりづらい可能性が高い。矢野・清水は，「立体画像のほうが，ローカルピークの形がやや鋭く，最大値は110度の場合で平面画像の約1.2倍となっている。この実験結果には立体画像のほうが，重心動揺への誘導効果が大きいことがしめされている。」[3]と述べている。また，同文献内で「両眼視差による立体映像により，明確な奥行き情報の提示によって，大きな「臨場感」を提示できる可能性があることが示唆される。」と述べられている。このことからWebVRを用いることは使用者に対して雰囲気を体感しやすいものにできると言える。そこで360度画像を用いたゲームを作成することにより若年層への興味と，使用者へのより高い臨場感を与えるというアプローチを行った。
次に，ゲームという形に落とし込んだ理由としては，若年層の入りやすさを考慮した。消費者庁・MUFG,オンラインゲーム動向整理[4]よりオンラインゲームの利用状況としては10代・20代ではどちらも40\%近くが平日に利用しており(図-1)，利用時間は男女ともに100分を超えている(図-2)。このことから，ゲームとして情報を発信することは若年層に対して有効であると言える。
\begin{figure}[ht]
\centering
\includegraphics[width=7cm]{game-use.png}
\caption{オンラインゲーム利用率}
\label{fig:left}
\end{figure}
%
\begin{figure}[ht]
\centering
\includegraphics[width=7cm]{game-time.png}
\caption{オンラインゲーム利用時間}
\label{fig:right}
\end{figure}
\section{参考事例及び使用したオープンソース}
\subsection{GeoGuessrについて}
GeoGuessrはスウェーデンのエンジニアであるanton wallénによって制作されたブラウザ上で遊ぶことができる位置推理ゲームである。プレイヤーはgoogle ストリートビューを使用されたランダムな地点に配置され，周辺の地理情報から自身が配置された地点を推察し回答するというゲームだ。本研究ではこれを酒田市に限定し，回答後にその場所の特徴点や魅力点などを表示するようにしていくことを考えた。
\subsection{A-Frame}
A-Frameとはウェブブラウザ上でVRコンテンツを作成することのできるオープンソースの一つであり，360度画像の表示，オブジェクトの配置などを行えるライブラリとなっている[5]。
\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で徐々に減速，linearで等速変化，ease-in-outで加速してから減速する。
\item{attribute}
アニメーションを適用させる属性を指定。
\item{from to}
アニメーション前後の大きさの状態を指定する。
\item{a-sky}
表示される360度画像の中にオブジェクトを表示するための要素。
\end{enumerate}
\section{システムの設計}
\subsection{HTML}
ここでは大まかなウェブページの設定を行っている。外部ファイルを読み込むための属性であるscript srcを使い外部からA-Frameのライブラリを取得しa-のタグでそれぞれにあったA-Frameのスクリプトを呼び出すことができる。a-cameraでプレイヤーが初期で見ている方向を設定し，a-entityのfusetimeを1000とすることによって「1秒カーソルを合わせることでクリックした判定を出す」という設定にしている。その後のa-skyとa-entityにはそれぞれにidを設定し，CSVファイルからそれぞれ360度画像と座標情報などを読み取り出力している。
\\
\begin{itembox}[l]{geoguessr.html}
\scriptsize{
\begin{verbatim}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>酒田版geoguessr</title>
<link rel="stylesheet"
type="text/css"
href="geoguessr.css"
>
<script
src="https://aframe.io/releases/1.4.0/aframe.min.js">
</script>
<script src="geoguessr.js" charset="utf-8">
</script>
</head>
<body id="background">
<a-scene vr-mode-ui="enabled: true">
<a-entity id = "camera">
<a-camera position="0 0 0">
<a-entity cursor="fuse: true; fuseTimeput: 1000"
position="0 0 -1"
geometry="primitive: ring;"
scale="0.01 0.01 0.01"
saterial="color: blue; shader: flat">
<a-animation begin = "cursor-fusing"
easing="ease-in"
attribute = "scale"
fill = "none"
from = "0.03 0.03 0.03"
to = "0.001 0.001 0.001">
</a-animation>
</a-entity>
</a-camera>
</a-entity>
<a-sky id="sky" rotation="0 0 0">
</a-sky>
<a-entity id="basket">
</a-entity>
</a-scene>
</body>
</html>
\end{verbatim}
}
\end{itembox}
\subsection{javascript}
\subsubsection{属性と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}[ht]
\centering
\includegraphics[width=7cm]{xyz.drawio.png}
\caption{座標設定の図}
\label{fig:xyz}
\end{figure}
\subsubsection{使用者の初期座標の設定}
ここでは画像ごとに使用者が最初に見ている方向を設定するために必要な情報の紐付けを行っている。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);
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]);
}}}
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}
\subsubsection{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")
}
});
}
ver url = https://www.yatex.org/libcache/knrz/csv.min.js
let s = document.createElement("script");
s.setAttribute("src", "url");
s.addEventListener("load", prepareCSV);
document.querySelector("head").appendChild(s);
});
\end{verbatim}
}
\end{itembox}
\subsection{CSVファイル}
それぞれ，その地点の画像，色，大きさ，透明度，座標点，次の画像を指定し，これらの情報をfetchコマンドで取得しgeoguessr.htmlに読み込ませている。地点の削除や追加はこのCSVファイルを操作することによって簡単に変更可能となっている。\\
地点を移動するためにclick eventと連動させているオブジェクトの色はそれぞれ，青色で次のエリアに進み，赤色で前のエリアに戻る。\\
上記のものを組み合わせて，実際に表示される画面が図-4と図-5である。
\\
\begin{itembox}[l]{picture.csv}
\scriptsize{
\begin{verbatim}
photo,color,radius,opacity,x,y,z,next
360sankyo1.JPG,#0000ff,0.5,1,-10,0,-8,360sankyo2.JPG
360sankyo1.JPG,#0000ff,0.4,1,-1,0,4,360sankyo11.JPG
360sankyo2.JPG,#0000ff,0.5,1,7,0,-9,360sankyo3.JPG
360sankyo2.JPG,#ff0000,0.5,1,8,0,7,360sankyo1.JPG
360sankyo4.JPG,#ff0000,0.2,1,4,0,-5,360sankyo2.JPG
\end{verbatim}
}
\end{itembox}
\\
\begin{figure}[ht]
\centering
\includegraphics[width=7cm]{geo.png}
\caption{実際の画面１}
\label{fig:left}
\end{figure}
\begin{figure}[ht]
\centering
\includegraphics[width=7cm]{geo2.png}
\caption{実際の画面２}
\label{fig:right}
\end{figure}
\section{今後の展望}
現在,山居倉庫のみが使用できるマップとなっており，初期段階では主要な観光地などをメインに地点追加を行っていく必要がある。また，その中でも特徴的な場所をtooltip等の機能を追加して拡大表示できるなどのゲームプレイを通してより細部まで見ることができるような機能の追加を行っていく。\\
プログラム全体を通して処理が重い部分があり，快適なプレイができないため短縮できる部分を短くしていき環境の改善に努めていく。
\begin{thebibliography}{99}
\bibitem{jinkou} 総務省,”（1）地方からの人口流出と東京圏への集中”, \url{https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h27/html/nc231110.html}, (閲覧日：2023-11-14).
\bibitem{korona} 内閣府, ”第６回 新型コロナウイルス感染症の影響下における生活意識・行動の変化に関する調査”,\url{https://www5.cao.go.jp/keizai2/wellbeing/covid/pdf/result6_covid.pdf},（閲覧日：2024-5-23）.
\bibitem{keisoku} 矢野 澄男・清水 俊宏,”視覚情報による身体同様-臨場感の計測”`,\url{https://annex.jsap.or.jp/photonics/kogaku/public/30-05-kaisetsu3.pdf},(閲覧日:2024-5-22).
\bibitem{online} 消費者庁・MUFG, ”オンラインゲーム動向整理”, \url{https://www.caa.go.jp/policies/policy/consumer_policy/caution/internet/assets/consumer_policy_cms106_220630_08.pdf},(閲覧日:2024-5-22).
\bibitem{a-frame} A-Frame ,”A-Frame -Make WebVR”, \url{https://aframe.io/}, (閲覧日:2023-6-23).
\end{thebibliography}
\end{document}
