%#!platex -kanji=%k %#DVIPDF dvipdfmx -f ipa.map \documentclass{jsbook} %\pagestyle{empty} \usepackage[dvipdfmx]{graphicx} %\usepackage{listings, jlisting} %\usepackage[sectionbib]{chapterbib} \usepackage{ascmac} \usepackage[twoside,inner=30truemm,outer=20truemm]{geometry} \usepackage{url} % 文中にURLを書くときは \url{} で括る \geometry{textwidth=160mm, textheight=225mm} \renewcommand{\bibname}{参考文献} \title{WebVRを用いたマップ作成システムの提案} \author{広瀬研究室4年\\C120037A 梅津航介} \date {令和6年1月11日} \begin{document} \maketitle \begin{center} {\bfseries 概要} \end{center} 2020年以降,COVID-19の影響により観光業は大きな打撃を受けた。ワクチンの普及や全国旅行支援の実施によって,国内観光需要の回復が見込まれている中で,観光地の魅力を発信し,人を呼び込むことが求められる。観光分野では,緊急事態宣言の発令等に伴い遠距離移動への制約が生じた結果,現地を訪問できない代わりに,AR/VRなどを用いた取組も増えている。そこで,自宅に居ながらの観光体験を実現することができるVR技術に着目した。VRは360度の映像を映すことで,没入感の高い体験を可能とする。中でもWebVRは,VRゴーグルなどの専用機器やアプリケーションのインストールが不要で,Webブラウザを通してVRが体験できる技術である。また,地理的な情報を視覚化して伝えるためのツールとしてデジタルマップがある。デジタルマップを用いることでユーザに具体的な位置情報を伝えることが可能になる。WebVRとマップを組み合わせることで,ユーザに具体的な位置情報や,360度の映像を提供することができ,没入感のある仮想観光体験を実現できる。このシステムを観光地の管理者だけでなく,一般のユーザも使用できるようにすることで,個々のユーザが発見した隠れた魅力や,地元の住民だけが知るスポットなどの共有が活発になり,観光地の存在や魅力の発信に寄与できるのではないかと考えた。しかし,この組み合わせを一般のユーザが手軽に活用するためのツールはまだ十分には普及していない。 本研究では,観光地の魅力や存在を発信するための手段として,プログラミングなどの専門の知識を持たない一般のユーザが事前知識を必要としない操作によって,マップ上にWebVRの表示機能を持ったマーカを追加・編集できるシステムの構築を行う。(737文字) \setcounter{tocdepth}{2} \tableofcontents \chapter{はじめに} 本章では研究の背景と目的について説明する。 \section{背景} 2020年以降,COVID-19の影響により観光業は大きな打撃を受けた。現在は,ワクチンの普及や全国旅行支援の実施によって,国内観光需要の回復が見込まれている。その中で,観光地の魅力を発信し,人を呼び込むことが求められる。観光分野では,緊急事態宣言の発令等に伴い遠距離移動への制約が生じた結果,現地を訪問できない代わりに,AR/VRや,アバターロボット,遠隔操作技術を用いて仮想的に訪問する取組も増えている\cite{soumu}。 そこで,自宅に居ながらの観光体験を実現することができるVR技術に着目した。VRとは「Virtual Reality」の略で,「仮想現実」と訳される。360度の映像を映すことで,実際にその空間にいるような感覚を得られ,没入感の高い体験が可能となる。中でもWebVRは,VRゴーグルなどの専用機器やアプリケーションのインストールが不要で,Webブラウザを通してVRが体験できる技術である。 また,地理的な情報を視覚化して伝えるためのツールとしてデジタルマップがある。デジタルマップを用いることでユーザに具体的な位置情報を伝えることが可能になる。これにより,ユーザはスポットの位置情報を把握し,観光の前後の情報整理や,現地を訪れることができない場合の仮想体験において活用することができる。 WebVRとマップを組み合わせることで,ユーザに具体的な位置情報や,360度の映像を提供することができ,没入感のある仮想観光体験が提供できる。このシステムを観光地の管理者だけでなく,一般のユーザも使用できるようにすることで,個々のユーザが発見した隠れた魅力や,地元の住民だけが知るスポットなどの共有が活発になり,観光地の存在や魅力の発信に寄与できるのではないかと考えた。しかし,現状ではこの組み合わせを一般のユーザが手軽に活用するためのツールはまだ十分には普及していない。そこで,プログラミングなどの専門の知識を持たない一般のユーザが,事前知識を必要としない操作によってWebVRの表示機能を持ったオリジナルのマップを作成できるシステムを提案する。 \section{目的} 本研究では,観光地の魅力や存在を発信するための手段として,プログラミングなどの専門の知識を持たない一般のユーザが事前知識なしの操作によって,マップ上にWebVRの表示機能を持ったマーカを追加・編集できるシステムの構築を目的とする。 \chapter{先行研究と類似サービス} 本章では先行研究と類似サービスを紹介する。デジタルマップやVR活用の現状と課題を探り,本研究の位置付けを明確にする。 \section{先行研究} 観光分野にVRを活用した事例を取り上げる。 \subsection{360度パノラマ画像を用いた観光システム開発の事例} 物部,鈴木らは,360度パノラマ画像の体験による,利用者の訪問意欲向上を目指して,Googleストリートビューとパノラマ写真を組み合わせることで,没入感のある仮想観光を可能とするシステムの開発を行った\cite{monobe}。この研究では,実際にVR観光を体験した利用者から「360度パノラマ画像があることで,通常のストリートビューより観光地に対して興味を持ちやすかった」などの意見を得ている。VRを活用した観光案内の取り組みは,観光地への観光客誘致に貢献できる可能性を示している。 \subsection{観光分野にパノラマ動画を用いた事例} 藤原,吉野らは,パノラマ動画を用いた観光支援システム「フォトリート」の開発を行い,パノラマ動画の閲覧が可能なパノラマ動画閲覧機能の評価実験を行った\cite{fujiwara}。その結果,利用者は映像や写真を閲覧している観光地の位置情報としての場所を知りたいと感じるため,映像や写真の俯瞰的な情報を求めること・利用者は観光地を映像として見るだけでなく関連する様々な知識やさらなる視覚的な情報を知りたいと感じるため,観光地に関する知識や写真などの視覚的な情報を求めることを明らかにした。 \subsection{観光におけるパノラマVRと写真の有効性についての検証を行った事例} 大佐田,中桐らは,地域観光PRにおいて写真とパノラマVRを用いた場合の有効性について比較検証を行った\cite{osada}。従来の写真と全天球カメラによるパノラマVRの2種類の観光PRコンテンツを用意し,観光地への訪問意欲,コンテンツの魅力などに関するアンケートを行った。その結果,従来の写真よりも,パノラマ VR による映像が良い印象を与え,ユーザがその観光地に行きたくなることが分かったと述べている。 \section{類似サービス} 本研究で開発するシステムと関連した機能を持つサービスを取り上げる。 \subsection{Google マイマップ} Googleが提供するGoogleマップの機能の1つで,ユーザが特定の場所やルートを追加して独自の地図を作成することができるサービスである\cite{mymap}。マップ上にマーカを追加して,それぞれにタイトルや写真などを追加することができる(図\ref{fig:mymap})。ルート作成機能によって,特定の道順を地図上に表示することや,レイヤー機能を使って,異なる情報を整理し,複数のデータセットを表示することができる。作成したマップは他のユーザと共有や共同編集することができる。Googleマップではパノラマ画像を投稿することができるが,マイマップ機能ではユーザが用意したパノラマ画像を表示する機能は提供されていない。 \begin{figure}[htbp] \centering \includegraphics[width=120mm]{image/mymap.png} \caption{Googleマイマップ画面} \label{fig:mymap} \end{figure} \subsection{Mapillary} 世界中のユーザが撮影した画像や360度パノラマ画像を収集し,誰もが利用可能にすることを目的としたサービスである\cite{mapillary}。スマートフォンやアクションカメラなどのシンプルなツールを使って街路写真を収集でき,誰でも共有することができる(図\ref{fig:mapi})。このサービスで共有された画像は主に地図データの作成を目的に使用されるため,機能は画像情報の投稿のみで,地点に関する説明などの記載はない。 \clearpage \begin{figure}[tbp] \centering \includegraphics[width=120mm]{image/mapillary.png} \caption{Mapillary画面} \label{fig:mapi} \end{figure} \section{先行研究・類似サービスの課題} 先行研究では,パノラマ画像を用いることでVRによる映像が良い印象を与え,観光地の魅力を効果的に伝えることができる事が示された。しかし,ユーザは観光地に関する様々な知識やさらなる視覚的な情報を求めるため,パノラマ画像の表示だけでは情報が不足していることが課題として挙げられた。また,先行研究では開発者が事前に用意したVRを利用するものになっているため,ユーザーが用意したパノラマ画像を活用することができない。現状ではパノラマ画像を用いて情報を発信するためのコンテンツを作成する手段は十分に普及していない。 類似サービスでは,Googleマイマップでユーザーが用意したパノラマ画像を活用するための機能が提供されていないことや,Mapillaryで画像に関連する詳細な説明などを加える機能が提供されていないことが課題として挙げられる。 \chapter{提案} 本章では,第2章での現状と課題を踏まえたシステム提案を行い,システムの概要について説明する。 \section{本研究の提案} 本研究では,プログラミングなどの専門の知識を持たないユーザがマーカの追加編集を行い,情報を入力することで,オリジナルのマップを作成できるシステムを提案する。現状と課題を踏まえて提案する要素を以下にまとめる。 \begin{itemize} \item シンプルなユーザーインターフェース\\ 事前知識なしに操作可能にすることで,プログラミングなどの専門知識を持たないユーザでも簡単に利用できる。 \item ユーザ主体のコンテンツ作成機能\\ ユーザが自ら撮影した画像をアップロードして,地点に関する情報を入力できる機能。これにより,様々な視点からの魅力を発信することができ,情報の不足を補うことができる。 \item 画像タイプの選択機能\\ 本システムでは,ユーザがマーカに関連付けるための2種類の画像タイプを扱う。一般的なカメラで撮影された画像を通常画像,360度カメラや専用のアプリケーションを使用して撮影された,広範囲の視野を写した画像をパノラマ画像と定義して,これらの画像を用いたマップの作成を可能にする。 \item WebVR表示機能\\ パノラマ画像をWebVR形式で表示し,ユーザに没入感のある体験を提供する。これにより,観光地の魅力をより効果的に伝えることができる。画像をアップロードするだけでWebVR表示できるようにすることで,ユーザが用意したパノラマ画像を活用することができる。 \item 目的別のマップ作成機能\\ 自分の興味やニーズに合わせてマップを作成することができる。目的別にマップを作成することで,情報を整理しやすくなる。 \item 作成したマップの閲覧機能\\ 他のユーザが作成したマップを閲覧することで,知らなかった場所や隠れた名所などの新たな発見につながる。 \end{itemize} \section{システムの概要} 本システムは,デジタルマップとWebVR表示機能を組み合わせることで,ユーザが独自のコンテンツを作成し,共有することができるものとする。アプリケーションのインストールなどをせずにWebブラウザからの使用が可能なWebアプリケーションで作成する。フロントエンド(Webブラウザ),バックエンド(サーバ,データベース)によって構成し,マップやマーカの情報の受け渡しを行う(図\ref{fig:gaiyo})。ユーザがマップ上の任意の地点にマーカを追加し,それぞれの地点に関する情報を入力することでデータを保存する。ユーザはマウスのクリックやフォーム入力などの操作を通じて,地点の追加や情報の編集をすることでオリジナルのマップを作成することができる。 \begin{figure}[htbp] \centering \includegraphics[width=160mm]{image/gainen.png} \caption{システムの概要図} \label{fig:gaiyo} \end{figure} \section{要件定義} 提案した要素に基づき,本システムの機能要件を定義する。 \begin{itemize} \item[要件1] マップ作成機能\\ ユーザは自分の興味や目的に合わせたマップを作成できる。目的別にマップを作成することで情報を整理することができる。 \item[要件2] マーカーの追加・編集機能\\ ユーザは地図上にマーカーを追加し,それぞれの地点に関連する情報(テキスト,通常画像,パノラマ画像)の入力ができる。追加したマーカは編集や削除が可能である。 \item[要件3] 画像アップロード機能\\ ユーザはマーカに通常画像およびパノラマ画像をアップロードできる。ユーザが用意した画像を活用して地点の情報として表示することができる。 \item[要件4] WebVR表示機能\\ パノラマ画像はWebVR形式で表示され,没入感のある観光体験を提供する。 \item[要件5] マップ閲覧機能\\ ユーザは他のユーザによって作成されたマップを閲覧することができる。これにより,新たな発見や情報共有が可能となる。 \end{itemize} \chapter{システム設計} 本章では,システムを作成する際に使用する技術と具体的な設計について説明する。 \section{使用技術} 本システムで使用する技術についてまとめる。 \begin{itemize} \item Leaflet(version 1.7.1)\\ Web上で地図を表示するためのオープンソースのJavaScriptライブラリである\cite{Leaflet}。 \item A-Frame(version 1.5.0)\\ 仮想現実 (VR) 体験を構築するためのWebフレームワークである\cite{A-Frame}。HTML内でA-Frameを読み込むことで使用できる。本システムでは,パノラマ画像のWebVR表示に用いる。 \item Node.js(version 18.16.0)\\ サーバーサイドのツールやアプリケーションをJavaScriptで作成するための実行環境である\cite{Node}。本システムでは,Expressと組み合わせてバックエンドサーバの構築に用いる。 \item Express(version 4.16.1)\\ Node.jsでサーバーサイドアプリケーションの開発に用いるフレームワークである\cite{Express}。Expressを用いることでWebアプリケーションを作成するための基本的な機能を使用できる。本システムでは,バックエンドサーバの構築やデータの送受信などに用いる。 \item MySQL(version 5.7.41)\\ オープンソースのリレーショナルデータベース管理システムである\cite{mysql}。リレーショナルデータベースは,複数のテーブルに保存されたデータを関連付けて使用することができる。本システムでは,マップ・マーカ・画像などのデータ管理に用いる。 \end{itemize} \section{フロントエンド設計} ユーザが直接操作するクライアントサイドの処理を行う。各ページの機能を以下に示す。 \subsection{トップページ} 新しいマップの作成用のフォームを提供する(図\ref{fig:top})。マップ一覧ページへのリンクを記載する。新しいマップ名をフォームに入力してマップを作成ボタンをクリックすることで新規のマップを作成できる。 \begin{figure}[htbp] \centering \includegraphics[width=120mm]{image/top.png} \caption{トップページ画面} \label{fig:top} \end{figure} \subsection{マップ作成ページ} トップページでマップを作成することでマップ作成ページへ遷移する。マップ作成ページではマーカの追加・編集や画像の追加を行うことができる(図\ref{fig:newmap})。マーカにはタイトル,詳細,画像の情報を入力可能で,画像を追加する際に画像のタイプが通常画像かパノラマ画像かを選択できる。マーカ追加ボタンをクリックして,マップ上の任意の地点をクリックすることで,その地点の緯度経度を保存し,マーカを設置することができる。マーカの設置時にタイトルと詳細の入力フォームが表示され,情報を入力して保存ボタンをクリックするとマーカが保存される。設置後のマーカをクリックすると編集,画像追加,削除ボタンが表示され,これらはそれぞれテキストの編集,画像の追加,マーカの削除の機能を提供する。画像追加機能では,追加する画像ファイルを選択して,画像のタイプを選んで画像を追加することで,選択に応じた表示形式で画像の表示を行う。 \begin{figure}[htbp] \centering \includegraphics[width=120mm]{image/newMap.pdf} \caption{マップ作成ページ画面} \label{fig:newmap} \end{figure} \subsection{マップ一覧ページ} マップ作成ページで作成されたマップの一覧を表示する(図\ref{fig:maplist})。ここから他のユーザが作成したマップを閲覧することができる。各マップのリンクの横には編集,削除ボタンがあり,マップの編集や削除を行うことができる。マップ名のリンクをクリックすると,そのマップの閲覧ページに遷移する。 \begin{figure}[htbp] \centering \includegraphics[width=120mm]{image/mapList.png} \caption{マップ一覧ページ画面} \label{fig:maplist} \end{figure} \subsection{マップ閲覧ページ} マップ一覧ページで選択したマップを表示する(図\ref{fig:mapview1})。マップ上に設置されているマーカをクリックすることで入力された情報を確認することができる。パノラマ画像が追加されたマーカにはパノラマ表示ボタンが設置され,これをクリックするとWebVR表示用のウィンドウが開き,パノラマ画像を閲覧することができる。ユーザは,マップ上設置されたマーカを通じて位置情報を視覚的に確認することができる。 \begin{figure}[htbp] \centering \includegraphics[width=120mm]{image/mapView.pdf} \caption{マップ閲覧ページ画面} \label{fig:mapview1} \end{figure} \section{バックエンド設計} サーバサイドの設計と機能を以下に示す。 \subsection{サーバ設計} Node.jsとExpressフレームワークを使用して構築する。ユーザからのリクエストの処理,データベース操作,ファイルのアップロードといった機能を提供する。データベースと連携し,マップやマーカの情報,画像データの保存と取得を管理する。 \subsection{データベース設計} データベースはMySQLを使用し,システムに関する情報を保存する。マップ,マーカ,イメージの3つのテーブルがある(図\ref{fig:db})。以下にそれぞれのテーブルの機能と作成に関するコードを示す。 \begin{itemize} \item maps\\ 各マップの名称と作成日時のデータを格納する。マップを作成するとデータが追加される。 \begin{itembox}[l]{mapsテーブルのCREATE TABLE文} \begin{verbatim} CREATE TABLE maps ( id INT(11) NOT NULL AUTO_INCREMENT, name VARCHAR(255) NOT NULL, created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ); \end{verbatim} \end{itembox} \item markers\\ 各マーカの緯度経度や入力された情報を格納する。マーカの追加や編集を行うとデータが追加される。 \begin{itembox}[l]{markersテーブルのCREATE TABLE文} \begin{verbatim} CREATE TABLE markers ( id INT(11) NOT NULL AUTO_INCREMENT, lat DECIMAL(10, 6), lng DECIMAL(10, 6), title VARCHAR(255), description TEXT, map_id INT(11), PRIMARY KEY (id), FOREIGN KEY (map_id) REFERENCES maps(id) ); \end{verbatim} \end{itembox} \item images\\ マーカに関連付けられた画像の情報を格納する。マーカに画像の追加を行うとデータが追加される。 \begin{itembox}[l]{imagesテーブルのCREATE TABLE文} \begin{verbatim} CREATE TABLE images ( id INT(11) NOT NULL AUTO_INCREMENT, marker_id INT(11), image_path VARCHAR(255), image_type VARCHAR(10), PRIMARY KEY (id), FOREIGN KEY (marker_id) REFERENCES markers(id) ); \end{verbatim} \end{itembox} \end{itemize} \begin{figure}[htbp] \centering \includegraphics[width=140mm]{image/db.pdf} \caption{本システムのデータベース} \label{fig:db} \end{figure} \chapter{実験} 本章では,本システムを使用した実験を行い,システムの評価を行う。 \section{実験概要} 本実験では,システムの有効性や効率性を調査する目的で,作成したシステムを10名に使用してもらい,指定したタスクを完了するのにかかった時間の測定を行った。タスクの完了にかかった時間はシステムの操作性と作業効率を評価するための指標として用いる。行うタスクはマップ名を入力してマップを作成し,3地点分のマーカ情報を入力することと定めた。開発時の入力テストにおいて,1つの地点につき,入力する内容の考察に2分,情報の入力に1分程度を要したため,これを基準として用いる。マップの作成に1分,1つの地点の入力に3分かかると仮定し,3地点分の情報を入力するため,合計で10分を基準とする。実験に用いる画像は通常画像とパノラマ画像のサンプルを3枚ずつ用意した。以下に実験の手順を示す。 \begin{itemize} \item システムの操作方法を説明する。 \item 計測を開始する。 \item マップ名を入力し,マップを作成する。 \item マーカを追加し,テキストや画像情報を追加する。 \item 3地点分の情報を入力し終えた段階で計測を終了する。 \end{itemize} \section{実験結果} 本システムの入力実験では被験者10名全員が指定したタスクを完了することができた。操作の際に,被験者は何も調べることなくタスクを完了できたため,専門的な知識は必要ないことが確認できた。作成にかかった時間を表\ref{table:times}に示す。作成にかかった時間の平均は314秒,標準偏差は150秒となった。本実験の結果から,マップの作成と3地点のマーカ追加が一定の時間以内に完了できるかどうかを検証するため仮説検定を行った。帰無仮説を「本システムを用いたタスクの完了時間は10分である」とし,対立仮説を「本システムを用いたタスクの完了時間は10分より短い」とした。有意水準は5\%とする。t値は-6.004,p値は$1.01 \times 10^{-4}$となり有意水準0.05より小さいため帰無仮説が棄却され,本システムを用いたタスクの完了時間は10分より短いと言える結果となった。 \clearpage \begin{table}[htb] \caption{操作時間の実測値} \centering \begin{tabular}{|c|c|} \hline & 操作時間(秒) \\ \hline 1人目 & 171 \\ 2人目 & 559 \\ 3人目 & 347 \\ 4人目 & 146 \\ 5人目 & 261 \\ 6人目 & 181 \\ 7人目 & 505 \\ 8人目 & 193 \\ 9人目 & 462 \\ 10人目 & 321 \\ \hline \end{tabular} \label{table:times} \end{table} \section{考察} 実験の際に,通常画像とパノラマ画像の選択を誤ってアップロードしている様子や,マーカを設置する位置を探すのに手間取っている様子が見られた。画像タイプの選択機能がユーザにとって明確でないことや,マーカを設置する位置を探すのに時間がかかることが課題として挙げられる。このことから,操作説明が不足していることや,ユーザーインターフェースの改善が必要であることが示唆された。 \chapter{まとめ} \section{結論} 本研究では事前知識を必要としない操作によって,マップ上にWebVRの表示機能を持ったマーカを追加してオリジナルのマップの作成ができるシステムを目指して開発を行った。実験では,タスク完了にかかる時間を指標として用いて,システムの操作性とシステムを利用することによる作業効率を評価した。実験の結果から,本システムを使用することでWebVRの表示機能を持ったマーカの追加や,マップの作成などの操作がすべてWebブラウザ上で完結し,3地点分の情報入力が10分以内に完了することが確認できた。このことから,本システムの観光地の情報を発信するための手段としての有効性が確認された。 \section{今後の展望} 操作説明の不足や,ユーザーインターフェース改善の必要性が明らかになったため,明確な操作説明の導入や,マップ内での地点検索機能の導入を進めていく必要がある。また,画像タイプの選択ミスを防ぐために画像のプレビュー機能を導入し,ユーザがアップロードする前に画像の表示形式を確認できるようにする。これらの改善を通じて,より直感的な操作性のシステムを目指す。 \chapter*{謝辞} 本研究を進めるにあたり,多くの方々にご支援いただきました。指導教官の広瀬雄二教授からは多くのご指導ご協力を賜りました。ここに深謝の意を表します。並びに広瀬研究室の皆様には,本研究の遂行にあたり多大なご助言,ご協力頂きました。ここに感謝の意を表します。 \begin{thebibliography}{99} \bibitem{soumu}総務省.``オンラインによる観光''. \url{https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r03/html/nd121330.html}, (参照 2023-8-10). \bibitem{monobe}物部寛太郎,鈴木孝浩.``360 度パノラマ画像を用いたVR観光システムの研究開発''.第26回日本バーチャルリアリティ学会大会論文集.1B2-1,2021. \bibitem{fujiwara}藤原佑歌子,吉野孝,児玉康宏,吉住千亜紀,尾久土正己. ``パノラマ動画を用いた観光支援システムの開発''.ワークショップ2014(GN Workshop 2014) 論文集,p1-6,2014. \bibitem{osada}大佐田奈波,中桐斉之,内平隆之. ``地域観光 PR におけるパノラマ VR と写真の有効性''. 研究報告ヒューマンコンピュータインタラクション(HCI)第10号, 2021, p1-4. \bibitem{mymap}Google. ``Google マイマップ''. \url{https://www.google.co.jp/intl/ja/maps/about/mymaps/},(参照 2023-12-1). \bibitem{mapillary}Mapillary, ``Mapillaryについて''. \url{https://www.mapillary.com/about?locale=ja_JP}, (参照 2024-1-6). \bibitem{Leaflet}Volodymyr Agafonkin. ``Leaflet - a JavaScript library for interactive maps''.\url{https://leafletjs.com/}, (参照 2023-12-8). \bibitem{A-Frame}Supermedium. ``A-Frame Introduction''. \url{https://aframe.io/docs/1.5.0/introduction/}, (参照 2023-12-8). \bibitem{Node}OpenJS Foundation, Node.js contributors. ``Node.js''. \url{https://nodejs.org/en/about}, (参照 2023-12-8). \bibitem{Express} StrongLoop, Inc. ``Express''. \url{https://expressjs.com/ja/}, (参照 2023-12-8). \bibitem{mysql}Oracle. ``MySQLとは''. \url{https://dev.mysql.com/doc/refman/8.0/ja/what-is-mysql.html}, (参照 2023-12-8). \end{thebibliography} \end{document}