\documentclass{jsbook}
%\pagestyle{empty}
\usepackage[dvipdfmx]{graphicx}
%\usepackage{listings, jlisting}
%\usepackage[sectionbib]{chapterbib}
%\usepackage{ascmac}
\usepackage{geometry}
\usepackage{ascmac}
\usepackage{url} % 文中にURLを書くときは \url{} で括る
\geometry{textwidth=160mm, textheight=225mm}
\renewcommand{\bibname}{参考文献}
\title{外出を促す音楽共有サービスの提案}
\author{廣瀬研究室4年 \\伊藤 勝道}
\date {令和4年1月13日}
\begin{document}
\maketitle
%（←全角スペース）
\begin{center}
{\bfseries 概要}
\end{center}
\quad ストレスによる悪影響は古くから認知されており,その解消はしばしば生活する上での課題と言える。これを解決する代表的な方法の1つとして、屋外での運動が挙げられる。しかし、2020年の新型コロナウイルス感染症の流行により、外出自粛の生活スタイルが浸透した。これにより、長期の外出自粛でストレスを感じている人が増加している。そこで、外出を促すような効果が期待できるシステムの構築を考えた。同感染症の影響で、自宅で過ごす時間が増えた人が楽器を始めている。この流れを活かして、パソコンやスマートフォンの位置情報を利用し、Web上の地図に制作した音源を共有できるサービスを提案する。
\\\quad 本研究では,サービスの概観を構想すると共に、先行研究の調査を行った。調査では、必要な機器の導入コストがかかる点、長期的な利用では陳腐化の恐れが考えられる点の2つが課題として見つかった。この結果をもと、機能要件を作成しシステムの開発を行った。提案したページの機能からなりうる結果の仮定を述べ、最後は今後の展望で終わりとした。（415文字）
\tableofcontents
\chapter{はじめに}
はじめに、本研究を始める上での背景と、研究目的を述べる。
\section{背景}
ストレスによる悪影響は古くから認知されており、その解消はしばしば生活する上での課題と言える。これを解決する代表的な方法の1つとして,屋外での運動が挙げられる\cite{1}。しかし,2020年の新型コロナウイルス感染症の流行により、外出自粛の生活スタイルが浸透した。これにより、長期の外出自粛によるストレスを感じている人が増加している。ビッグローブ(株)が実施したインターネット調査では,全国の20代から60代の男女1,000人に「外出自粛などで人との接触機会が少なくなったことによるストレス量の変化」について質問したところ、「増えた」「やや増えた」をあわせると40％以上となった\cite{2}。\\
カシオ計算機(株)が実施したインターネット調査によると、調査対象の期間中に楽器を開始・再開したユーザ1,030人の内、約25％は,2020年3月〜4月の外出自粛期間中に開始・再開していた\cite{3}。新型コロナウイルスの流行により、自宅で過ごす時間が増えた人が楽器を始めている。
これらの事例から、人々の外出を促してストレスを解消できるようなWebサービスを検討する。
\section{目的}
音楽を作る人と、音楽を聴く人を対象とし、パソコンやスマートフォンの位置情報を利用してWeb上の地図に制作した音源を共有できるサービスを作成する。実用的なサービスとして活用されることを目標とする。
\section{研究の流れ}
本研究は以下の手順で進めていく。
\begin{enumerate}
\item 問題提起
\\ Webサービスを用いて外出を促す上での課題を先行研究から調査する。その後、発見した課題について考察し対策を示す。
\item サービスの提案
\\ 上記の対策からサービスの内容と概観を決め、システムに関しての要件を作成する。
\item システムの開発
\\ システムの設計を元に開発を行う。随時テストを行い、正常な動作かどうかを確認する。
\item 実験
\\ 作成したシステムを作動させ、有意性と実用性を判断する。
\item 考察
\\ サービスの有意性と実用性に関する考察を行う。システムの改善点を挙げた後、それに対応した機能実装を目指す。
\end{enumerate}
\chapter{先行研究}
本章では、研究テーマに通ずる先行研究を紹介する。先行研究を参照し、システムを開発する上での課題点を挙げる。挙げた課題点から、開発する上で必要な条件を設定する。
\section{外出促進を目的としたシステムやアプリの事例}
松本らの研究では、視覚障がい者の街歩き支援を目的とした擬似外出体験を提供する「ことばの観光地マップ」を作成している\cite{4}。室内において、音声AR\footnotemark{1}アプリによる音声案内と、動画ファイルと共に流れる環境音が現地で歩行しているような疑似体験を実現する。外出を支援する上で、音声情報が必要とされている例である。\\
長尾らの研究では、位置情報に基づく背景音楽を伴う音声観光案内システムを開発した\cite{5}。管理者が事前に情報提供サーバに登録した観光地名,観光地の案内文、観光地に対応した音源を,情報受信用Androidアプリが表示する。実験では、大学生5名が被験者となり,評価実験を行った。結果としては、背景音楽があった方が良いかという質問に対しては、平均で3.4と高い評価を得た。また、音楽が加わることにより観光の満足度が増えたかという質問に対しては、3.0と概ね良好な評価を得た。観光案内に対して背景音楽を付与することに有意性があるものと考える。\\
高橋らの研究では、iBeacon\footnotemark[2]を利用した高齢者向けのシリアスゲーム\footnotemark[3]アプリの開発を行っている\cite{6}。アプリ内で提示された訪問スポットへ訪れ、iBeacon付きポスタから30m以内まで近付くとその場所に訪れたことになり、訪問スポットに関する感想などを投稿することが出来る。実験では,50代から70代の男女30名が利用し、後のアンケートでは「実験に参加して街中を歩くことが楽しいと感じたか」という問いに対して、「そう思う(27％),ややそう思う(50％)」という回答を得た。\\
しかしながら、問題点として以下の2点が考えられる。
\begin{itemize}
\item iBeaconの導入コストがかかる
\item 訪問スポットとなるコンテンツが既定のものに限られてしまい、長期的な利用では陳腐化の恐れが考えられる
\end{itemize}
以上の点から、本研究では,iBeaconの導入を必要としない。かつ、ユーザが自由にコンテンツを発信できるシステム作りが必要である。
\footnotetext[1]{ARは「Agument Reality」の略で、現実の風景に対しコンピュータで情報を付加させる技術である。}
\footnotetext[2]{iBeaconは、近距離無線技術「Bluetooth Low Energy(BLE)」を利用したiOSの近接通知機能である。}
\footnotetext[3]{シリアスゲームは、純粋な娯楽のためではなく、社会問題の解決を目的として作られたゲームを指す。}
\chapter{システム提案}
本章では、2章で挙げた条件をもとに,サービスの外観を決める。また、条件を具体化させて前提条件と機能要件を制定する。最後に、これらの要素を実現するための開発環境を示す。
\section{サービス概観}
本サービスは、音源をWeb上の地図の好きな地点に配置できる機能（図\ref{blend}）,配置した音源がある地点まで実際に移動し、それを聴くことが出来る機能（図\ref{blend2}）が主である。前者は主にパソコン上で行い、後者はスマートフォンの使用を想定する。
\begin{figure}[tbp]
\centering
\includegraphics[width=8.5cm]{soturonn01.pdf}
\caption{サービス概観1}
\label{blend}
\end{figure}
\begin{figure}[tbp]
\centering
\includegraphics[width=8.5cm]{soturonn02.pdf}
\caption{サービス概観2}
\label{blend2}
\end{figure}
\section{要件定義}
本サービスにおける前提条件と機能要件を以下に示す。
\begin{description}
\item[前提1]音楽製作者、および聞き手を対象とする
\item[前提2]サービスはユーザの外出を促す機能を持つものである
\item[前提3]サービス利用においてユーザ登録は必要ないものとする
\end{description}
\vskip\baselineskip
\begin{description}
\item[要件1]音源をWeb地図上の1地点に投稿することができる機能
\item[要件2]投稿した音源を、冒頭20秒間だけ聞くことができる機能
\item[要件3]実際に投稿した地点に行くと、上記の音源を全編Webページ上で聴くことができる機能
\end{description}
\section{開発環境}
開発環境は以下の4つを使う。
\begin{itemize}
\item HTML5\\
Webページに表示されている文字や画像を作る言語である。従来のバージョンよりも音源ファイルの表示が容易であったり、簡単なJavaScriptの表記で位置情報の取得ができることが特徴として挙げられる。
\item JavaScript\\
Webページに動きがある機能を付加できる言語である。位置情報を取得して現在地を表示させる、音源ファイル付きのマーカをWeb地図上に載せる機能などが実現できる。下記で紹介するLeafletのように、いくつかの汎用的に使える機能を使い回しができるようにまとめたファイルは、JavaScriptライブラリと呼ばれる。
\item Leaflet\\
Web地図を表示するためのJavaScriptライブラリの1つである。Web地図のデータは、OpenStreetMap\footnotemark[4]から引用して使用する。
\end{itemize}
\footnotetext[4]{OpenStreetMapは、誰でも利用できるフリーの地理情報データを作成することを目的としたプロジェクト、およびその地図である。}
\chapter{システム開発}
本章では、3章の要件をもとにシステム開発を行う。システム実行の流れとしては、（図\ref{jikkou}）をもとにWebサービスを構築していく。
% 適用するときの条件(どういう状況か、回数など)をもらさず記述し、
% 結果となる値を表などを用いて簡潔に示す。
\begin{figure}[tbp]
\centering
\includegraphics[width=8.5cm]{soturonn03.pdf}
\caption{システム実行の流れ}
\label{jikkou}
\end{figure}
\section{投稿フォーム}
タイトル、名前などの諸情報、音源ファイルを配置する地点の緯度と経度、音源ファイルを入力して送信するページである（図\ref{toukou}）。Leafletで表示された地図があり、音源配置地点を選択する際に使う。音源ファイルの投稿フォームは、HTMLのaccept 属性でwav形式とmp3形式のみの投稿に限定している。
\begin{itembox}[l]{index.html 投稿フォームの構成}
\begin{verbatim}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>soundoar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet
.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65v
TjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="">
<link rel="stylesheet" href="pointer.css" type="text/css">
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity=
"sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4
cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script> //地図の表示
<style type="text/css">
<!--#mapid { height: 400px; width: 600px}-->
</style> //地図のサイズ指定
</head>
<body>
<div id="mapid">
<a class="pc_link" href="#">pc</a>
<a class="tb_link" href="#">tb</a>
<a class="sp_link" href="#">sp</a>
</div>
<button id="btnCurLocation" onClick="setCurLocation()">get your current
location</button><br> //現在地表示ボタン
latitude(ido) <span id="lat"></span><br>
longitude(keido) <span id="lng"></span> //緯度と経度の表示
<script src="script.js"></script>
<form method="POST" enctype="multipart/form-data" action="./post.rb">
<input name="title" type="text" maxlength="40" placeholder="Title">
//タイトルの投稿フォーム
<input name="artist" type="text" maxlength="40" placeholder="Artist"><br>
//名前など諸情報の投稿フォーム
<input name="ido" type="text" placeholder="ido">
<input name="keido" type="text" placeholder="keido"><br>
//緯度と経度の投稿フォーム
<input type="file" name="file" id="inputFile" accept=".wav, .mp3" requid><br>
//音源ファイルの投稿フォーム
<input type="submit" value="SEND!"><input type="reset" value="reset">
</form></body></html>
\end{verbatim}
\end{itembox}
\section{付属の機能}
地図上にカーソルを乗せると、その地点の緯度と経度が地図下部に表示される機能をJavaScriptを用いて追加した。投稿の時、緯度と経度の数値を確認できるようにするためである。また、利用者が音源がある地点まで移動する際、自分と地点との距離が分かるように現在地の位置情報を取得してマーカで表示できる機能を同じくJavaScriptで付加している。
\begin{itembox}[l]{script,js 付属の機能}
\begin{verbatim}
mymap.on('mousemove', function(e){
lat.textContent = e.latlng.lat;
lng.textContent = e.latlng.lng;
}); //カーソルを合わせた地点の緯度と経度の値を取得
var mymap = L.map('mapid').setView([35.7102, 139.8132], 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
keyboard: false,
attribution: 'Map data ＆copy;
<a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
}).addTo(mymap); //最初に表示される地点の指定
function setCurLocation(){
if (navigator.geolocation === false){
alert('現在地を取得できませんでした。');
return;
}
function success(e) {
var lat = e.coords.latitude;
var lng = e.coords.longitude;
mymap.setView([lat, lng], 15);
L.marker([lat,lng]).addTo(mymap).bindPopup('現在地').openPopup();
}
function error() {
alert('現在地を取得できませんでした。');
}
navigator.geolocation.getCurrentPosition(success, error);
} //現在地の値を取得
\end{verbatim}
\end{itembox}
\section{作成したWebサービス「soundoar（サウンドアー）」}
作成したWebサービスである。（図\ref{kasou}）タイトル、地名、音源ファイルが付いたマーカをJavaScriptで酒田市内の観光地10箇所の地点に配置した（図\ref{kasou}）。L.markerオブジェクトでマーカを表示させ、それぞれの地点の緯度と経度をあらかじめ入力している。bindPopupオブジェクトにより、マーカのクリックで吹き出しが表示される。吹き出し内に音源の曲名、地名が表示される。オブジェクト内の音源ファイルの埋め込みは、HTML5のaudioタグとsrc属性で指定している。音源の再生と一時停止は、controls属性により可能となった。
\begin{itembox}[l]{script,js 音源付きマーカの配置}
\begin{verbatim}
var marker = L.marker([38.81615552673763, 139.78805105597846]).addTo(mymap);
marker.bindPopup("<p>Orange / 庄内空港</p><audio src='sample01.mp3'
controls width='500' height='375'>").openPopup();
//庄内空港の地点に音源付きマーカを配置
var marker = L.marker([38.893388483824054, 139.8189509136528]).addTo(mymap);
marker.bindPopup("<p>Tre tipi di formaggio / 東北公益文科大学</p>
<audio src='sample02.mp3' controls width='500' height='375'>").openPopup();
//東北公益文科大学の地点に音源付きマーカを配置
var marker = L.marker([38.891534997828586, 139.82367162528968]).addTo(mymap);
marker.bindPopup("<p>祖父の書斎 / 土門拳記念館</p><audio src='sample03.mp3'
controls width='500' height='375'>").openPopup();
//土門拳記念館の地点に音源付きマーカを配置
var marker = L.marker([38.91110688501994, 139.83705647132587]).addTo(mymap);
marker.bindPopup("<p>Harvest!! / 山居倉庫<p><audio src='sample04.mp3'
controls width='500' height='375'>").openPopup();
//山居倉庫の地点に音源付きマーカを配置
var marker = L.marker([38.91919612433987, 139.82803573903732]).addTo(mymap);
marker.bindPopup("<p>雪と子供 / 日和山公園</p><audio src='sample05.mp3'
controls width='500' height='375'>").openPopup();
//日和山公園の地点に音源付きマーカを配置
var marker = L.marker([38.922414513951146, 139.84586261179922]).addTo(mymap);
marker.bindPopup("<p>ちょっとそこまで / 酒田駅</p><audio src='sample06.mp3'
controls width='500' height='375'>").openPopup();
//酒田駅の地点に音源付きマーカを配置
var marker = L.marker([38.94741537851438, 139.81572561301178]).addTo(mymap);
marker.bindPopup("<p>Muted Heart / 酒田北港</p><audio src='sample07.mp3'
controls width='500' height='375'>").openPopup();
//酒田北港の地点に音源付きマーカを配置
var marker = L.marker([38.96429464760139, 139.91008218481826]).addTo(mymap);
marker.bindPopup("<p>夏の霧 / 城輪柵跡</p><audio src='sample08.mp3'
controls width='500' height='375'>").openPopup();
//城輪柵跡の地点に音源付きマーカを配置
var marker = L.marker([38.87265531375771, 139.97790546672138]).addTo(mymap);
marker.bindPopup("<p>風 / 眺海の森</p><audio src='sample09.mp3'
controls width='500' height='375'>").openPopup();
//眺海の森の地点に音源付きマーカを配置
var marker = L.marker([39.1956540053804, 139.54854352308834]).addTo(mymap);
marker.bindPopup("<p>夏休みの冒険 / 飛島</p><audio src='sample10.mp3'
controls width='500' height='375'>").openPopup();
//飛島の地点に音源付きマーカを配置
\end{verbatim}
\end{itembox}
\subsection{使用音源について}
音源ファイルは、無料で商用利用と個人利用が可能な音源ファイルを公開しているWebサイト「甘茶の音楽工房」\footnotemark{5}から引用している。以下、2022年1月13日現在の利用規約を抜粋する。
\begin{quotation}
\item ●公開中の音楽素材は、商用利用、個人利用問わず利用できます。
\item ●音楽素材は、ウェブ、映像、ゲーム、ラジオなど、何かのBGMとしてお使い下さい。
\item ●音楽だけを販売したり、2次配布することは禁止です。
\item ●著作権は放棄しておりません。楽曲の著作権は甘茶にあります。
\item ●作曲者を偽る行為（自分で作った曲のように見せかける行為）は禁止です。
\item ●楽曲を使用した作品を、JASRACなど著作権管理団体に登録することはできません。
\item ●ご利用の際に生じたいかなる損害損失に対しても当サイトは一切責任を負いません。
\item（「甘茶の音楽工房」利用規約より抜粋）
\end{quotation}
\footnotetext[5]{“甘茶の音楽工房”. https://amachamusic.chagasi.com/,}
\begin{figure}[tbp]
\centering
\includegraphics[width=8.5cm]{toukou.png}
\caption{投稿フォーム}
\label{toukou}
\end{figure}
\begin{figure}[tbp]
\centering
\includegraphics[width=8.5cm]{soundoar.jpg}
\caption{soundoar（サウンドアー）の表示画面}
\label{kasou}
\end{figure}
\chapter{実験}
本章では、soumdoarを使用した実験方法を述べる。実験場所は本学および酒田市周辺に設定し、本学の学生13名を被験者とする。最後に、soundoarが実際に使われることで起こりうる結果を機能要件ごとに仮定として述べる。
\section{実験手順}
%実験手順は以下のような流れとなる。
\begin{description}
\item[1]対象者にsoundoarの使い方、各機能を説明を行う。
\item[2]説明を行なった日から1週間を実験期間とする。この間、対象者各自の裁量でsoundoarを利用してもらう。
\item[3]実験期間終了後、対象者が実際に行った地点をアンケート調査で確認する。
\end{description}
\section{サービス実装結果の仮定}
%soundoarが実際に使われることで起こりうる結果を機能要件ごとに仮定として述べる。
\begin{itemize}
\item 要件1
\\音源をWeb地図上の1地点に投稿することができる機能である。主にプロ、アマチュア問わず音楽制作をしている者が利用する対象者である。既存のSNSや音楽共有サービス以外で、Web上に自らが作った音楽を共有する目的で利用する。投稿者は、パソコン上でsoundoarを起動し、音源ファイル、曲名、作者名などの諸情報、音源を置く位置を緯度と経度の値で入力して投稿を完了させる。投稿者が、他にSNSを使用している場合はそれらでsoundoarに投稿したことを発信することも考えられる。
\item 要件2
\\要件1で投稿された音源を、冒頭20秒間だけ聞くことができる機能である。主に趣味で音楽を聞いている人々が利用する対象者である。既存のSNSや音楽共有サービス以外で、自分好みの音楽を探して聴く手段として利用する。この機能のユーザは、スマートフォンでsoundoarを起動しWeb地図上にある好きな地点の音源を探す。見つけた音源を聴き、その音源がある地点に対して興味が湧くことが想定できる。
\item 要件3
\\実際に投稿した地点に行くと、上記の音源を全編Webページ上で聴くことができる機能である。利用対象者は、要件2と同じである。要件2で、その場で見つけた音源またはその地点に興味を持ったユーザは、実際に音源がある地点へ移動すると考えられる。移動後、音源を全編Webページ上で聴くことができる。ここまででユーザは、音源を最後まで聴くことができた達成感や、聴いた音楽そのものの良さに充実感を感じsoundoarうを通じた外出に対し、意欲を見せると考えられる。
\end{itemize}
\chapter{結論}
%本章では、結論と今後の展望を述べる。
%\section{考察}
%本研究では、位置情報を使って外出を促す音楽共有サービスの開発を目指した。\\
%実験では、配置した音源ファイルと同じ地点に行かずとも再生が成された。つまり、作成した機能要件の1つである「実際に投稿した地点に行くと、上記の音源をWebページ上で聴くことができる機能」満たすことができなかった。よって、今回の仮想サイトは有意性および実用性が見られないものと言える。
\section{結論}
今回の研究では、外出を促す音楽共有サービスの作成を目指した。
実際に外出を促せるかどうかの実験は、新型コロナウイルスのオミクロン株による感染症の流行もあり、実現はできなかった。今後、同感染症の動向を見定めた上で実験を行うことが課題である。
\section{今後の展望}
今回の研究では、音源を実際に投稿する機能,実際に投稿した地点に行くと、上記の音源をWebページ上で聴くことができる機能を実装するところまでには至らなかった。サーバ環境を整備し、ローカルホストとスマートフォンを共有した上で、JavaScriptで引き続き開発を続ける必要がある。また、屋外で音源を再生する際はキャリア回線を多く消費する。定期的に利用するのであれば、屋外のフリーWi-FiやポケットWi-Fiに接続する必要がある。今後、より実用性に考慮したシステムの開発のためには、被験者を集った実験を行い意見や感想を参考に機能の追加を検討する必要性があると考えられる。
% 原稿がどの程度のクォリティなのか参考文献である程度分かる。
\chapter{付録}
付録として、今回作成したsoundoarのQRコードを載せる。
\begin{figure}[tbp]
\centering
\includegraphics[width=3.5cm]{QR.jpg}
\caption{soundoar（サウンドアー）のQRコード}
\label{QR}
\end{figure}
\begin{thebibliography}{}
\bibitem{1}保健指導リソースガイド.“【新型コロナ】「自然」の豊かな環境でストレスを解消 心の元気を保つために「行動の活性化」を”.\\
https://tokuteikenshin-hokensidou.jp/news/2021/009707.php, (参照 2022-1-4).
\bibitem{2} ビッグローブ株式会社. “外出自粛による人との接触機会の減少で4割以上がストレス増 BIGLOBEが「2020年に関する意識調査」第２弾を発表~感染予防対策は全体の8割が「できた」と回答、「できなかった」割合の最多は30代男性~”.\\
https://www.biglobe.co.jp/pressroom/info/2020/12/201223-1, (参照 2021-6-9).
\bibitem{3}倉本 春. “コロナ禍で楽器を始める人・再開する人が増加中-カシオ調査”.\\
https://news.mynavi.jp/article/20200822-1241544/, (参照 2021-6-8).
\bibitem{4}松本 浩子, 内田 敬, 楊川 優太. “音環境を再現するバーチャル散歩システムによる「ことばの観光地マップ」の作成”. 土木学会論文集D3(土木計画学), Vol.75, No.6(土木計画研究・論文集第37巻), I\_491-I\_500, 2020. (参照 2022-1-11).
\bibitem{5}長尾 光悦, 吉野 美優. “位置情報に基づく背景音楽を伴う音声観光案内システムの開発”. 北海道情報大学紀要 第27巻第1号：105〜112，2015. (参照 2022-1-11).
\bibitem{6}高橋 公海, 神谷 正人, 今田 美幸, 佐藤 浩史, 前大道 浩之, 筒井 章博, NTT 未来ねっと研究所. “シニア世代お出かけ支援を目的とした街歩きシリアスゲームの開発”. The 29th Annual Conference of the Japanese Society for Artificial Intelligence, 1D5-OS-22b-2, 2015. (参照 2021-12-1).
\end{thebibliography}
\end{document}
