%#!platex -kanji=%k
%#DVIPDF dvipdfmx -f ipa.map
\documentclass{jsbook}
%\pagestyle{empty}
\usepackage[dvipdfmx]{graphicx}
%\usepackage{listings, jlisting}
%\usepackage[sectionbib]{chapterbib}
%\usepackage{ascmac}
% \usepackage{geometry}
\usepackage[twoside,inner=30truemm,outer=20truemm]{geometry}
\usepackage{url} % 文中にURLを書くときは \url{} で括る
\usepackage{ascmac}
\usepackage{moreverb}
\usepackage{tikz}
\usepackage{pifont}
\usepackage{listings}
\usepackage{xcolor}
\usepackage{tcolorbox} % きれいな枠を作るために使用
% カスタムスタイルの設定
\lstset{
basicstyle=\scriptsize\ttfamily,
frame=tb, % 枠線をつける
captionpos=t, % キャプションの位置 (b: 枠の下)
numbers=left, % 行番号を左に表示
numberstyle=\tiny, % 行番号のフォント
keywordstyle=\color{blue}, % キーワードの色
commentstyle=\color{gray}, % コメントの色
stringstyle=\color{red}, % 文字列の色
}
\geometry{textwidth=160mm, textheight=225mm}
\renewcommand{\bibname}{参考文献}
\title{メタバース空間を活用した\\デジタルアーカイブ構築支援システムの開発}
\author{広瀬研究室\\C1210924 斎藤翼}
\date {\today}
\begin{document}
\maketitle
\begin{center}
{\bfseries 概要}
\end{center}
研究の簡単な概要説明を行う。また，論文の章立ては基本的に「背景」「先行研究」「研究の設計」「実験」「結論」の基本的な章が必要となり，これに加えて先行研究と研究の設計の間に「提案」などが入る。そのため，自身の研究に合わせて柔軟に組み立てる必要がある。(124文字)←概要は文字数を記載する。
COVID-19の影響により，仮想空間上で会議を行うことや娯楽として楽しむといった行動が増えるとともに仮想空間の需要が増えた。そのため，仮想空間上で発表資料の展示会を行うことで，インターネットに接続さえすれば発表資料を見れることに需要があるのではないかと考えた。本研究では，JavaScriptのライブラリであるThree.jsを用いて発表資料の展示会を行い，そのシステムが様々な端末からでも操作できる環境を目指し，システムを構築していく。
\setcounter{tocdepth}{2}
\tableofcontents
\chapter{はじめに}
% 社会的背景からテーマに至るまでを書く。
本章では，研究の背景と目的について説明する。
\section{メタバースをめぐる背景}
\subsection{メタバースとは}
元アマゾンスタジオ戦略部門グローバル統括責任者のマシュー・ボールは，メタバースの解説書『ザ・メタバース』で
\begin{quotation}
リアルタイムにレンダリングされた3D仮想世界をいくつもつなぎ，相互に連携できるようにした大規模ネットワークで，永続的に同期体験ができるもの，ユーザー数は実質無制限であり，かつユーザーは一人ひとり，個としてそこに存在している感覚を有する。また，アイデンティティ，歴史，各種権利，オブジェクト，コミュニケーション，決済などのデータに連続性があるもの
\end{quotation}
と定義し，更に同書でメタバースの備えるべき特徴を7つ示した。
\begin{itembox}[l]{メタバースの特徴}
\begin{itemize}
\item 永続的であること（中止・リセットされない）
\item 同期的であること（実生活と同じリアルタイム）
\item 大規模であること（同時接続ユーザ数が無制限）
\item 経済性があること（所有・投資・売買などが可能）
\item 広範であること（リアルとデジタルの垣根が無い）
\item 異なるメタバース間でも相互運用性があること
\item 幅広い企業・個人により作成・運用されること
\end{itemize}
\end{itembox}
\subsection{二次元メタバースと三次元メタバース}
二次元メタバースとは，2Dの画面上でアバターを操作するメタバースのことを指す\cite{2d3d-metaverse}。3Dメタバースと比べ，没入感は高くないが，ヘッドセット無しでPCやスマホからアクセス可能な点や，高度なデータ通信環境に依存しない点，過度な距離感を保ちながらコミュニケーション等を楽しめる点がメリットとしてある。
三次元メタバースとは，3Dの仮想空間でアバターを操作するメタバースのことを指す。利用する際はVRやMRのヘッドセットを使用することで，まるでリアルの世界にいるかのような高い没入感を得ることができる。3Dメタバースではよりリアルなアバターを利用できるため，チャットやメール，通話での従来型のコミュニケーションだけでなく，アバターのジェスチャーを用いた身体的，動的なコミュニケーションが可能になる。
\subsection{メタバース市場規模の増加}
% 2021年にはFacebook社はMeta Platformsへと社名を変更した。また，
% IDC(2022)は2022年時点でAugmented Reality(AR)・Vitual Reality(VR)の世界の市場規模が約138億米ドルであると試算しており，2026年には509億米ドルまで成長すると予測している。
矢野経済研究所の調査によると、国内メタバース市場は成長を遂げつつある\cite{yano}。
2022年度の国内市場規模は、プラットフォーム、コンテンツ・インフラ等、XR機器を合わせて前年度比173.6\%増の1377億円に達し、2023年度にはさらに207\%成長して2851億円に拡大すると予想されている（図.\ref{figure:yano-metaverse}）。
この成長傾向は今後も続くと見込まれ、2027年度には市場規模が2兆円を超えると予想されている。
その要因として、法人向け市場でメタバースが次世代プラットフォームとして活用され、その後、一般消費者を対象とするコンシューマ向けメタバースのユーザが徐々に増加していくと予測されるためだ。
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/yano-metaverse.pdf}
\caption{メタバースの国内市場規模推移・予想\cite{yano}}
\label{figure:yano-metaverse}
\end{figure}
% 総務省の調査によると、メタバース市場は国内外で急速な成長が見込まれている\cite{somusyo}。
% 日本のメタバース市場について、2022年度に1825億円（前年度比145.3\%増）に達する見込みである。
% この市場には、メタバースプラットフォーム、コンテンツやインフラなどのプラットフォーム以外の要素、そしてXR（VR、AR、MR）機器が含まれている。
% さらに、2026年度には市場規模が1兆42億円まで拡大すると予想されている（図.\ref{figure:somusyo-metaverse-data}）。
% 一方、世界のメタバース市場は更に大きな成長が予測されている。
% この市場には、インフラ、ハードウェア、ソフトウェア、サービスが含まれ、2022年の時点で8兆6144億円の規模だった。
% 総務省の予測によると、2030年までにこの市場は123兆9738億円まで拡大する見込みである。
% \begin{figure}[tbp]
% \centering
% \includegraphics[width=10cm]{../../resume/figure/somusyo-metaverse-data.pdf}
% \caption{日本のメタバース市場規模（売上高）の推移と予測\cite{somusyo}}
% \label{figure:somusyo-metaverse-data}
% \end{figure}
% \begin{figure}[tbp]
% \centering
% \includegraphics[width=10cm]{../../resume/figure/somusyo-metaverse-world.pdf}
% \caption{世界のメタバース市場規模の推移と予測\cite{somusyo}}
% \label{figure:somusyo-metaverse-world}
% \end{figure}
% これらのことから、国内外メタバース市場は着実に成長を続けており、企業や消費者の関心が高まるにつれ、さらなる発展が見込まれている。
% 今後は、技術の進化とともに、より多様な分野でメタバースの活用が進むことで、市場規模の拡大が加速されると予想される。
\subsection{メタバースの利用状況}
メタバースはエンターテインメントやビジネスの場で活用されており、その利用実態や意識に関する調査結果が発表されている。
その中で、Cotraが2022年に全国の15歳から60歳以上の男女1331名を対象に実施した調査は、メタバースの現状を理解する上で必要なデータを提供している。
この調査によれば、メタバースを利用したことがあると回答した人は全体の25\%に上り、特に若い男性の利用率が顕著だった。
男性15〜19歳では48\%、男性20〜29歳では55\%と、半数以上が利用経験を持っていることが分かった（図.\ref{figure:cotra2}）。
このことから、メタバースは男性の若い男性にとって身近な存在であることが分かる。
利用用途についてもある傾向が見られた。
男性では「ゲーム」が63\%と最も多く、ついで「音楽・ライブ」が39\%、「企業の展示会・イベント」が30\%であった。
一方、女性は「ゲーム」が53\%と最も多く、「企業の展示会・イベント」が39\%、「音楽・ライブ」が37\%と続いた（図.\ref{figure:cotra2}）。
男女ともにエンターテイメント分野が中心である一方で、ビジネス用途も一定の割合を締めている。
さらに、継続利用に関するデータに注目すると、男女ともに週1回以上メタバースを利用している人は4割を超え、月1回以上に拡大すると約8割に達した。
特に20代では62\%、女性30代では56\%が週1回以上利用していることが分かり、特定の年代において高い継続利用率を示している（図.\ref{figure:cotra3}）。
これから、メタバースが一時的な流行ではなく、日常生活の一部として定着しつつあることが分かる。
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/cotra1.pdf}
\caption{メタバース利用状況\cite{cotra}}
\label{figure:cotra1}
\end{figure}
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/cotra2.pdf}
\caption{（男女別）どのような用途で利用しましたか？\cite{cotra}}
\label{figure:cotra2}
\end{figure}
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/cotra3.pdf}
\caption{メタバースを利用したことがある方にお尋ねします。現在も継続して利用していますか？\cite{cotra}}
\label{figure:cotra3}
\end{figure}
また、電通は2023年に全国の15〜59歳の2000人を対象とした「メタバースに関する意識調査2023」を実施した。
この調査は、本国におけるメタバースの認知度や利用状況を把握する資料になっている。
調査結果によると、「メタバース」という言葉の認知率は大きく上昇しており、2021年の18.6\%から2023年には82.1\%に達した。
この増加は、メディアや企業の広告活動がメタバースの認知を広げる大きな役割を果たしたことが考えられる。
一方で、実際の利用状況については、メタバースプラットフォームの利用経験率は18.0\%に留まった。
この数字には「現在利用している」、「過去に利用したことがあるが、現在は利用していない」という人の合計が含まれている。
認知度が広がる一方で、実際の利用率が限定的である点は、メタバースがまだ一部の層に留まっていると考えられる。
さらに、メタバースを「現在利用している」人の1日あたりの平均利用時間は68.8分という結果だった。
このデータは、cotraの利用用途のデータより、ゲームなどのエンターテイメント分野が利用時間を伸ばしているのではないかと考える。
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/dentu1.pdf}
\caption{Q.あなたは「メタバース」をご存知ですか。\cite{dentu}}
\label{figure:dentu1}
\end{figure}
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/dentu2.pdf}
\caption{Q.あなたは，「以下のゲーム型，交流型などのメタバースプラットフォーム」※を利用／プレイすることがありますか。（各項目単一回答）\cite{dentu}}
\label{figure:dentu2}
\end{figure}
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/dentu3.pdf}
\caption{Q.「以下のあなたが現在利用／プレイすることのあるゲーム型・交流型などのメタバースプラットフォーム」※について，1日あたりの平均利用／プレイ時間をお知らせください。パソコンやスマホ／タブレット，家庭用ゲーム機など，利用／プレイする機器・デバイスは問わずにお知らせください。（各項目単一回答）\cite{dentu}}
\label{figure:dentu3}
\end{figure}
これらのことから、メタバースは国内での認知度は高く、特に若い世代に中心に普及している。
また、ゲームだけでなく音楽やライブ、企業の展示会などのさまざまな用途として利用されている。
しかしながら、認知度が高いのにも関わらず利用率が低いのは、デバイスを入手するコストが高いということや必要性が低いということが考えられる。
\subsection{メタバースの利用が広がっている分野}
この節は、メタバースがどのようにさまざまな分野で活用されているかについて説明する。
KDDIは2023年10月24日から，実店舗を空間再現したバーチャル店舗で，最新の展示をみてショッピングができる\( \alpha \)U Placeの提供を開始した\cite{kddi}。
\( \alpha \)U Placeは，「ネットだけでは商品のイメージがわからない」「店員に相談したい」といったお客様におすすめのバーチャル』ショップである。
実店舗の空間を商品陳列から内装の雰囲気まで忠実にバーチャル上で再現しているため，商品の置き場所や商品ポップなどの実店舗ならでは工夫で注目ポイントを知ることができ，欲しい商品をタップするとECサイトで購入することができる（図.\ref{figure:kddi}）。
店舗空間は，スマートフォンでスキャンするだけで簡単にバーチャル空間に再現できるため，お客様は最新展示を体験できる。
さらに，実店舗の店員から接客を受けることができ，バーチャル空間からでも商品に最も詳しい店員に，商品に関する相談や詳細情報を聞くことができる。
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/kddi.pdf}
\caption{無印良品のバーチャル店舗\cite{kddi}}
\label{figure:kddi}
\end{figure}
% エヌ・ティ・ティ・スマートコネクト株式会社と株式会社 NTTデータNJKは，教育機関向け3Dメタバースサービスを2023年8月28日より提供開始した\cite{ntt}。
% このサービスの特徴として，以下の4つがある。
% \begin{enumerate}
% \item 教育に特化した空間
% 仮想空間内に「教室」「集会所」「面談室」といった実際の教育現場と同様の空間を事前に準備し，授業や進路相談，全体集会などの円滑な開催が可能である（図.\ref{figure:ntt}）。
% また，アバター姿でのディスカッションにより，児童生徒の羞恥心によるコミュニケーションの渋滞を防ぎ，新たなコミュニケーションを創出する。
% \item 多様なコミュニケーション
% 音声会話，テキストチャット，プレゼンターモード，資料共有，ブレイクアウトルーム，ブース機能がある。
% \item 安全な授業運営のためのセキュリティ機能
% NGワードフィルターにより，トラブルを防ぐことができる。また仮想空間の利用管理や児童生徒のコミュニケーションログ，行動履歴を管理できる。
% \item 4OS対応（ChromeOS，iOS，Windows，Android）
% 端末にアプリケーションをダウンロードして，日常的な利用が可能である。
% \end{enumerate}
% \begin{figure}[tbp]
% \centering
% \includegraphics[width=10cm]{../../resume/figure/ntt.pdf}
% \caption{集会所でのグループワーク発表会\cite{ntt}}
% \label{figure:ntt}
% \end{figure}
BIPROGYの「MY HOME MARKET」は，消費者がスマートフォンでバーチャル住宅展示場を見学してセミオーダー型規格住宅を購入する仕組みだ\cite{home}（図.\ref{figure:myhomemarket}）。
これにより，消費者は24時間365日，建てたい家のイメージを膨らませて，予算の中で臨場感を持ってしることができるため，打つ合わせ回数を減らせるなどのメリットがある。
バーチャル住宅展示場では住宅の様々な部屋の内装や住宅の外見を360度視点を変更し，リモート内見することができる\cite{hometown}。
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/myhomemarket.pdf}
\caption{住宅の選択画面\cite{home}}
\label{figure:myhomemarket}
\end{figure}
このように、メタバースはショッピング、住宅見学などのさまざまな分野での利用が広がっている。
それぞれの分野で、メタバース空間による臨場感の向上を実現しており、ユーザに新たな体験を提供している。
\subsection{デジタルアーカイブとは}
デジタルアーカイブは、収蔵資料や有形無形文化・産業資源などをデータベースやネットワーク技術をを用いて、デジタル形式で記録・保存し活用することである。
特徴としては、多様な情報を統合して扱うことができ、劣化しない保存ができる。また、時間や場所を問わずにアクセスできる。
これは研究や学習支援、防災、地域復興など多方面で活用される。
一つの事例として、国立公文書館デジタルアーカイブが挙げられる\cite{koubunsyo}（図.\ref{figure:koubunsyo}）。
これは、インターネットと通じて、「いつでも、どこでも、誰でも、自由に、無料で」、館所蔵の特定歴史公文書等の目録情報の検索、公文書や重要文化財等のデジタル画像等の閲覧、印刷、ダウンロードが可能なインターネットサービスである。
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/kokuritukoubunnsyokann.pdf}
\caption{国立公文書館デジタルアーカイブのサイト画面\cite{home}}
\label{figure:koubunsyo}
\end{figure}
\section{研究目的}
% これらのことから、国内外メタバース市場は着実に成長を続けており、企業や消費者の関心が高まるにつれ、さらなる発展が見込まれている。
% 今後は、技術の進化とともに、より多様な分野でメタバースの活用が進むことで、市場規模の拡大が加速されると予想される。
% これらの背景から、人・企業のメタバースに対する注目が高まっていることがわかる。
% また、メタバースがゲームだけに使用されていると思われているが、生活で身近なお店に利用され、また教育関連にも利用されている。
% 本研究では，2Dメタバース空間においてレジュメ資料やプレゼンテーション資料を展示した展示会会場を作成し，自由にバーチャル空間を移動できるシステムを作成する。
% このシステムを利用することで，従来のデジタルリポジトリから資料を閲覧するよりも没入感をがあり，集中のモチベーションを保つこと，また資料をより簡単に探すことができるということを目的とする。
国内の市場規模の上昇傾向やメタバースの利用状況、認知度の状況を踏まえると、メタバースは市場規模、認知度、利用率のいずれも上昇傾向にあることが分かる。
その一方で、認知度が高いにもかかわらず利用率が低いという結果も見られる。
この原因の一つとして、3Dメタバースで必要となるHMD（Head Mounted Display）と呼ばれるゴーグル型ディスプレイのコストの高さが挙げられる。
HMDは立体映像を表示するデバイスであり、導入のハードルとなっている可能性がある。
これらを踏まえ、本研究ではデバイスのコスト負担を軽減するため、HMDを必要としない2Dメタバース空間において、レジュメ資料やプレゼンテーション資料を展示するための展示会会場を構築する。
このシステムでは、ユーザーが自由にバーチャル空間を移動できる仕組みを提供することで、従来のデジタルアーカイブにおける資料閲覧よりも高い没入感を実現し、集中力を維持するモチベーションを向上させることを目指す。
\chapter{先行研究と類似サービス}
% 章の始めにリード文としてこの章で何をどういう順番で述べるかを入れる。
% 2章では先行研究をとりあげ，身近な問題ではどうするかまで述べる。
\section{関連研究}
% \subsection{関連研究:様々な場面でのメタバースの活用事例}
% 澤崎敏文は，これまで授業内容に合わせた様々な方法でオンライン授業を実践し，その考察を行ってきた。オンライン特有のメリットに対する肯定的な意見がある一方で，「リアリティ」「臨場感」の欠如を指摘する声もインタビュー結果から明らかになった。そこで，メタバース（三次元仮想空間）を授業や学生活動の一部に活用することで，その可能性について検討を行った。
% メタバースを企画発表の場としての活用，ゼミ・卒業研究での活用・課題活動での活用の3つの事例を通して，実験を行った。
% それぞれの活用の終了後にアンケート調査・インタビュー調査を行った結果，概ね好意的な回答が多く，メタバース活用の可能性を感じたと示している。
% 授業活用例では，利用当初，学生は何をしていいか分からず戸惑うという声もある一方で，自由に歩き回れる，人との仮想的な距離を取れるといった制約のなさにも次第に慣れ，グループ活動での活発な議論につながったと考えている。また，アンケート中「顔出ししなくていい」という主旨の回答も多数あり，学生にとっては，アバターを通して仮想空間の中で議論する方が，Zoom
% 等と比較して抵抗が少ないのではないかと考えた。メタバース内では，仮想的な距離や方向によって音声の聞こえ方なども変化し，自由に空間を行き来してコミュニケーションを取ることができるという点を考慮すると，ポスター発表のような場面での活用にも親和性が高いと考える\cite{article1}。
\subsection{メタバースを活用した多様な学習環境の構築と実践}
澤崎は、コロナ禍でのオンライン授業における「リアリティ」と「臨場感」の欠如という課題に対し、三次元仮想空間を活用した解決策を試みた。
ウェブブラウザで動作するDOORを使用し、リアルタイムコミュニケーション、三次元教室空間の再現、アバターの活用、目的に応じた空間カスタマイズなどの改善策を実施した。
企画発表、ゼミ・卒業研究、課外活動（写真展）での活用結果は概ね好評で、特に写真展では1000人を超える訪問者を集めた。
しかし技術的な問題として通信環境やPCを性能の差、インターフェースの改善として、操作方法や資料共有の最適化、コミュニケーションの課題として、表情の読み取りにくさや発言者の特定、そして仮想空間設計がグループ活動や心理面に与える影響の検証など、いくつかの課題が明らかになった。
\subsection{VRを用いた体験型デジタルアーカイブの制作に関する研究}
木村らは、岐阜県大垣市を対象に、街や俳句に関連した歴史・文化を紹介するコンテンツをデジタルアーカイブに導入し、体験者の歴史・文化への関心を高めることを試みた。
3Dモデルによる街並み再現、音環境のシミュレーション、俳句解説などの体験型コンテンツの提供をした。
結果として、エリア内全域で印象に残る場所や風景があり、街並みの再現によって大垣市の街並みの魅力を伝えることができたと考えている。
また、街の歴史・文化に関わるものを3Dスキャンによりリアルに再現し、体験型コンテンツを追加することによって目立たせることで、仮想空間の中で街の歴史・文化に興味を持たせることは可能と考えた。
課題点として、コンテンツの開始位置を文字が見えやすい位置に変更することや、体験者の立ち位置に応じて文字の表示位置が変わるように設定するといった対応が必要であると考えた。
それは、文字を読む際の位置調整が難しいとの指摘があり、VRに慣れていないと仮想空間内での咄嗟の操作が難しいと推察されたためだ。
\subsection{VR空間における複数ページを同時提示する文書閲覧環境}
吉井らは、VR空間において文書を読む環境を提案している。
論文最大8ページの論文を提示でき、ユーザは論文に近寄ったり、見上げたりすることで、論文を読むことができるシステムを開発した。
VRは文書の表示領域の制限がなく、「全視野角に文書を表示が可能」であることより、一度に表示できる情報が多くなり、文書の可動性を高めることが期待されるとした。
また、ページ枠に縛られずに論文を読むことができるため、ユーザが論文の内容を効率的に理解することができると期待できるとした。
% \subsection{博物館におけるデジタルアーカイブを活用した鑑賞支援システムの構築}
\section{類似サービス}
メタバースでの展示会の作成支援サービスは、様々な種類がある。
そこで、本研究で作成するシステムの類似サービスとして、ウェブブラウザで動作するかつ、管理者が展示会を作成できるものを調査し、サービスとしての課題点・評価点を探る。
\subsection{そのまま展示会}
SoVeCが提供する「そのまま展示会」は，高機能なリード管理画面を実装したソニークオリティのバーチャル展示会を，誰でも簡単にウェブブラウザで閲覧できるプラットフォームサービスである（図.\ref{figure:sonomama-tenjikai}）。
来場者向けの機能として，360度で会場を見渡すことができ高い一覧性・リアリティのあるブース内で，チャットや名刺交換の担当者を来場者が選択することが出来る・アーカイブ動画だけでなく，ライブ配信も可能でリアル展示会とバーチャル展示会の入場証をバーコード形式で共通化できる\cite{sonomama}。
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/sonomama-tenjikai.pdf}
\caption{そのまま展示会\cite{sonomama}}
\label{figure:sonomama-tenjikai}
\end{figure}
\subsection{artsteps}
artstepsは，独自のVR展示会やストーリーを作成，デザイン，共有するためのプラットフォームを提供している（図.\ref{figure:artsteps1}）\cite{artsteps}。
主な機能として，以下が挙げられる。
\begin{enumerate}
\item 仮想環境を設計する
壁とドアをグリッドに配置し，環境の作成をする。壁や床などは好きな色に塗ることや，独自のテクスチャを使用することができる。
\item デジタルコンテンツをアップロードする
画像やビデオ，3Dオブジェクトや音をアップロードすることができる。
\item ストーリーを作成する
VRスペース全体にガイドポイントを配置し，展示物のタイトルと説明をつけることができる。また，ガイドポイントとアップロードしたコンテンツの間の流れを選択することで，独自の物語を演出できる。
\item 共有
VR空間をソーシャルメディアで共有したり，個人のウェブサイトに埋め込むことができる。また，訪問者や他のクリエイターとリアルタイムでのチャットを行うことができる。
\end{enumerate}
artstepsは，Webサイトだけでなく，スマートフォンのアプリケーションとしても利用することができる。
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/artsteps1.pdf}
\caption{artsteps\cite{artsteps}}
\label{figure:artsteps1}
\end{figure}
% \subsection{あとひとつ何かあれば}
\section{類似サービスの課題点と評価点}
\subsubsection{課題点}
1つ目は，リアルタイムのチャットができる反面，そのチャットログが24時間365日残らない点である。
展示会で見学者同士が話し合ったにも関わらず，そのチャットログが残らなければ展示者がどのような意見や評価をされているのかわからない。
また，展示者に意見や質問が伝わったあと、見学者に伝えることができない。
% そのため，展示者が24
2つ目は，資料のダウンロードができない点である。
もう一度資料を閲覧したい際は、ネットワークに接続し、システムにアクセスする必要がある。
そのため、ネットワーク非接続時は資料を閲覧できないため、ユーザーの利便性が低下する。
3つ目は、展示会会場が自動生成されない点である。
管理者が一から展示会会場を作成するとなると、展示する資料の数が多くなるにつれて時間を要してしまう。
また、作成する際に設計ミスが起きてしまう可能性もある。
\subsubsection{評価点}
評価点としては、全てのシステムが2Dメタバースであるということである。
2Dメタバースであることによって、HMD(Head Mounted Display)が不要でサービスを利用できる。
また、高度なデータ通信環境に依存することがない。
\chapter{メタバース空間での発表会の提案}
本章では，1章，2章で挙げた背景・目的・課題点・評価点を踏まえたシステムの提案を行う。
2.2節で挙げた類似サービスからの課題点から本サービスにおける改善案を定める。
また具体的なサービスの提案，発表資料展示会会場の動的な作成手順と本サービスを使って作成される発表資料展示会の構成について説明する。
\section{課題に対する改善案}
2.3節で述べた類似サービスの課題点を元に本サービスで必要となる改善案を以下のように定める。
\begin{itemize}
\item 質問・意見箱の設置
質問・意見のログを24時間365日誰でも閲覧でき、書き込めるようにする。
\item 資料のダウンロード機能
デジタルアーカイブとしての役割を持たせるため、資料のダウンロードが行えるようにする。
\item 展示会の自動生成
資料の数に応じた動的な展示会会場作成を実施することで、作成に要する時間を削減する。
% \item 発表者の作成システムまでの誘導（Webシステムや，インストールなど）
\end{itemize}
\section{提案するシステム}
本研究では、展示会会場の作成者が2Dメタバース空間内で展示会会場を自動生成できるサービスの開発を目指す。
また、閲覧資料に対しての意見箱を設置することで、24時間365日展示者と見学者がお互いにコミュニケーションを取れることができる。
これらのことを、ソフトウェアのインストールをせずに、多くのハードウェアでより互換性のあるWeb上で行えるものとする。
利用される場面として、発表会の前後で資料のアーカイブとして利用されることを想定している。
また、システムの利用想定者として、発表会を欠席した人、もう一度見たい人が気になった資料を閲覧できることを想定している。
\section{動的に発表資料展示会会場の作成する流れ}
作成者が動的に発表資料展示会会場の作成する流れを示す。
\begin{enumerate}
\item 作成者が、動画と資料のアップロードをWebサイトで行い、保存する。
\item 保存したファイルとその総数をもとに、発表資料展示会会場の大きさ・資料の配置を計算し、設置する。
\item 生成された発表資料展示会会場に参加することで、交流を行うことができる。
\end{enumerate}
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/overview_diagram.pdf}
\caption{システムの概要図}
\label{figure:overview_diagram}
\end{figure}
\chapter{システムの設計}
% \section{関連研究における課題とシステムの提案}
% 先行研究の中の通信環境に関する意見として，「発表を含めるとPCのスペックが足りない」，「パソコンのスペックが足りないため，発表などが非常にやりにくかった」，「資料が見にくい，ネット環境やデバイスによって差が出る」があった。
% メタバースを活用した多様な学習環境の構築と実践．日本教育工学会研究報告書．
% この研究を踏まえて，本システムではより多くの端末で操作できるように軽量なシステムの設計する。またその場で発表するのではなく発表資料を閲覧することに重点を置いたシステムを提案する。
本章では、3章よりシステム設計について説明する。
\section{システムの概要}
本システムでは、資料の展示会場を動的に作成できること、また、メタバース空間を用いることで従来のデジタルリポジトリよりも没入感と集中力の向上をすることを目的としている。
そこで、没入感と集中力の向上としては2Dメタバース環境の構築をする。
\section{要件定義}
本システムにおける前提条件と機能要件を以下に示す。
\begin{itemize}
\item 前提条件
\begin{itemize}
\item PC上のみで動く
\item Webブラウザでのアクセス
\item 2Dメタバース空間での構築
\item ネットワーク接続が必要
\end{itemize}
\item 機能要件
\begin{itemize}
\item 仮想空間上でのPDF形式の資料表示と切り替え
\item 仮想空間上でのMP4形式の動画資料表示と再生・停止
\item カメラの移動と方向転換
\item 意見箱（チャット機能）の設置
\item 資料の数に応じた展示会場の動的な変更
\end{itemize}
\end{itemize}
\section{システム全体の構成}
以下に開発環境の概要(表.\ref{tab:dev_env})とシステムの全体概念図(図.\ref{figure:conceptual_diagram})を示す。
\begin{table}[tbp]
\centering
\begin{tabular}{|l|l|}
\hline
項目 & 詳細 \\ \hline
開発言語 & \begin{tabular}[c]{@{}l@{}}
HTML, CSS, JavaScript(Three.js - 0.126.1, \\
Bun - 1.1.29, Hono - 4.6.9, Bootstrap - 5.3.0, \\
WebSocket API), SQLite3 3.37.2
\end{tabular} \\ \hline
ブラウザ & Google Chrome 131.0.6778.85 \\ \hline
\end{tabular}
\caption{開発環境の概要}
\label{tab:dev_env}
\end{table}
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/conceptual_diagram.pdf}
\caption{システムの全体概念図}
\label{figure:conceptual_diagram}
\end{figure}
\subsection{各構成要素の役割}
2Dメタバースの環境を実現すること、また、Webにアクセスして利用することで，異なるデバイスやOS 間での互換性が高いという点や，インストール不要なためインストールの手間と時間がかからなくて済むといった点よりThree.js、
Webページでのレイアウトを簡易的に構築するためにBootstrap、
チャット内容や展示する資料のデータを保存するためにSQLite、
クライエントから送られてくるリクエストを効率的に処理するためにHono、
Three.jsで作成したオブジェクトの位置座標をリアルタイムで同期するためにWebSocket API、
これらをつなげる実行環境としてBunを使用する(表.\ref{tab:tools_and_roles})。
\begin{table}[tbp]
\centering
\begin{tabular}{|c|c|}
\hline
要件 & 使用ライブラリ \\ \hline
3Dグラフィック描画 & Three.js \\ \hline
軽量・高速なサーバー & Bun \\ \hline
ルーティング管理 & Hono \\ \hline
ユーザインターフェース構築 & Bootstrap \\ \hline
データ管理 & SQLite3 \\ \hline
通信機能 & WebSocket API \\ \hline
\end{tabular}
\caption{本システムで使用したライブラリとその目的}
\label{tab:tools_and_roles}
\end{table}
\subsubsection{Three.js}
Three.jsはJavaScriptの3Dimensions(3D)ライブラリでWebページに3Dコンテンツをできる限り簡単に表示しようというものである\cite{three}。
Three.jsはWeb Graphics Library(WebGL)が利用できるWebブラウザにおいて，プラグインを使用せずにインタラクティブな3Dや2DのグラフィックをレンダリングするためのJavaScript APIを使用して描画している\cite{webgl}。
Three.jsの仕組みとして，シーンにカメラ・ライト・3Dオブジェクトを追加する。そのシーンをレンダラー通してディスプレイに出力する（図.\ref{figure:image}）。
\begin{itemize}
\item レンダラ
レンダラは3Dシーンのうちカメラのフラストラム内にある部分を2D画像としてキャンバスにレンダリング（描画）する。
\item ライトオブジェクト
シーン内にある3Dオブジェクトを照らすために使用される。Three.jsには様々な種類のライトがあり，一点から全方向に放射される光であったり，スポットライトのような光がある。
\item シーンオブジェクト
シーンは，Three.jsによってレンダリングされるものと場所を設定することができる。オブジェクトやライト，カメラを配置する場所のこと。
\item カメラオブジェクト
カメラはシーンをどのように見るかを決めるために使用される。Three.jsには様々な種類のライトがあり，一般的なライトはPerspectiveCameraである。これは遠くのものが近くのものよりも小さく見える3Dビューを提供する。
\end{itemize}
本システムではこのThree.jsを用いて発表資料展示会のオブジェクトを作成する。
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/threejs_zu.pdf}
\caption{Three.jsのシステム概念図}
\label{figure:image}
\end{figure}
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/threejs_scenegraphs.pdf}
\caption{図１のシーンマップ}
\label{figure:image}
\end{figure}
\subsubsection{Bun}
BunはJavaScriptとTypeScriptアプリのためのオールインワンのツールキットである\cite{bun}。
Bunランタイムは、Node.jsを置き換えるために設計された高速なJavaScriptランタイムである。
またBunプロセスは、現時点でNode.jsよりも約4倍速く起動する。
そして、これはZigで書かれ、JavaScriptCoreによって動作し、起動時間とメモリ使用量を劇的に削減する。
そして、Bunは、fetch, WebSocket、ReadableStreamと言った標準的なWeb APIを実装している。
% 本システムでは、SQLiteの統合、Honoフレームワークと繰り合わせて、静的ファイル提供機能の提供、WebSocketサーバ機能の実行環境として使用する。
\subsubsection{Hono}
Honoは、Web標準に基づいて構築されたWebフレームワークであり、Node.jsやBunなどのあらゆるJavaScriptランタイムをサポートしている\cite{hono}。
Honoは、Web APIの構築、CDN(Contents Delivery Network)のフロントエンド、フルスタックのアプリケーションなどの用途に適している。
また、Web標準APIのみを使用し、エッジコンピューティング環境に最適化された設計となっている。また、豊富なミドルウェアとヘルパー関数を提供し、開発者の生産性を向上させる。
\subsubsection{Bootstrap}
Bootstrapは、Webサイトやアプリケーションの開発を効率化するためのCSSフレームワークである。
CSS変数の活用し、色、フォントスタイル、その他多くの変数を、どこでも使えるよう:rootレベルで提供している。
トグル可能な隠し要素、モーダル、オフキャンパスメニュー、ポップオーバー、ツールチップなど、さまざまな機能をJQueryなしで追加できる。
% 本システムでは、チャットをする際のモーダルとして使用する。
\subsubsection{SQLite3}
SQLiteは、小型、高速、自己完結型、高信頼性、フル機能のSQLデータベースエンジンを実装したC言語ライブラリである。
SQLiteは世界で最も使われているデータベースエンジンであり、すべてのモバイルフォンやほとんどのコンピュータに組み込まれている。
% 本システムでは、チャットの内容や掲載する資料のデータを保存するために使用する。
\subsubsection{WebSocket API}
Websocket APIは、ユーザのブラウザとサーバ間で双方向の対話的な通信セッションを可能にする。
サーバにメッセージを送信して応答を受信でき、通信のためにサーバをポーリングする必要はない。
また、低遅延によって、データのやり取りをリアルタイムで行うことができる。
% 本システムでは、Three.jsで作成したユーザオブジェクトの位置座標を同期するために使用する。
\section{各機能の詳細}
4.2節で定義した機能要件の詳細について説明する。
\subsection{仮想空間上でのPDF形式の資料表示と切り替え}
PDF形式の資料をテクスチャとして読み込み、オブジェクトに貼付することで3Dオブジェクトを作成する。
それをクリックするごとに同じ座標・向きでPDFのページ数分だけオブジェクトを入れ替えるようにする。
また、最後のページでクリックをすると最初のページに戻るようにする。
同じ座標でオブジェクトを入れ替えることで、PDFのページ数分並べて展示するのと比べて展示会場を大きくすることを防ぐ。
\subsection{仮想空間上でのMP4形式の動画資料表示と再生・停止}
MP4形式の動画資料をテクスチャとして読み込み、オブジェクトに貼付することで3Dオブジェクトを作成する。
それをクリックするたびに、再生と停止を切り替えれるようにする。
また、動画の再生中にオブジェクトから遠ざかると音が小さく聞こえるようになり、近づくと音が大きく聞こえるようにする。
\subsection{カメラの移動と方向転換}
キーボードで特定のキー（WASD、↑←↓→）を入力することで、カメラの移動を前後左右できるようにする。
また、マウスカーソルの移動でカメラの方向転換をできるようにする。
\subsection{意見箱（チャット機能）の設置}
展示資料の数分、意見箱を設置し、その展示資料に対する意見・質問。感想が書き込めるようにする。
それを実現するために、メタバース空間上の意見箱をクリックすることで、モーダルウィンドウが開き、掲示板のように書き込めるようにする。
\subsection{資料の数に応じた展示会場の動的な変更}
本システムでは、壁を4つ作成し正方形になるように配置する。
それぞれの壁に展示資料の数が均等になるように配置する。
例えば、展示資料の総数が4つの場合、1つの壁あたり、1つの展示資料が配置されることになる。
展示資料の数が増えるにつれて、床・壁のオブジェクトを拡大することで、複数の展示資料に対応する。
\chapter{システム開発}
% \section{システムの全体設計}
\section{データベースの設計と作成}
\section{サーバサイドの作成}
\subsection{URLとhtmlファイルの関係}
画面の写真とともに、説明を行う。
気をつけた点があれば、その都度書く。
\section{展示会場の作成}
\subsection{各オブジェクト}
床オブジェクトは正方形、意見箱オブジェクトは立方体で作成する。
% \noindent\textbf{床オブジェクト}
% \lstinputlisting[]{./codeTxt/floor.txt}
% \noindent\textbf{意見箱オブジェクト}
% \lstinputlisting[]{./codeTxt/opinionBox.txt}
PDF形式資料オブジェクトの大きさは紙の規格である白銀比で作成する。
Three.jsではPDF形式ファイルをテクスチャとすることができないため、一度PNG形式にする必要がある。
そのため、以下のコードでPDF形式ファイルをページ数分PNG形式ファイルに変換し、別のディレクトリに保存する。
JavaScriptでの変換を実現するのに、「pdf2pic」というパッケージを使用する。
これはPDF形式ファイルを様々な画像形式に変換するAPIである。
以下コードの12〜19行で画像の解像度、保存ファイル名、保存パス、出力形式、画像幅、画像高さを設定する。
また、32行目でPDF形式ファイルの全ページをPNG形式ファイルに全変換している。\\
\noindent\textbf{PDF形式ファイルをPNG形式ファイルに変換}
\lstinputlisting[]{./codeTxt/convertImage.txt}
% \noindent\textbf{PDF形式資料オブジェクト}
% \lstinputlisting[]{./codeTxt/pdfResume.txt}
今日にはGoogle ChromeやSafari，Mozilla Firefoxなど様々なウェブブラウザがある。
そのウェブブラウザの多くでは自動再生ポリシーが設定されている。
本システムの開発環境ではGoogle Chromeを使用しているため，その自動再生ポリシーに基づいてシステムを作成する。
Google Chromeはユーザエクスペリエンスを向上させ，広告ブロッカーをインストールするインセンティブを最小限に抑え，高価なネットワークや制約のあるネットワークでのデータ消費量を削減するために，より厳格な自動再生ポリシーに移行している。この変更は，ユーザーが再生をより詳細に制御できるようにし，正当なユースケースを持つパブリッシャーにメリットをもたらすことを目的としている\cite{chrome}。
本システムの作成にあたり，気をつけるべきポリシーとして，以下の内容がある。
\begin{itemize}
\item ミュート状態で自動再生されるようにすることは常に許可される。
\item 音声付き自動再生は，ユーザがドメインを操作した（クリック，タップなど）場合に許可される。
\end{itemize}
つまり，音声付き動画はクリックなどのアクションを起こさないと再生してはならないということである。
本システムでは，ビデオが再生されているオブジェクトに近づけば音が大きくなり，遠くなれば音が小さくなるように設定する。Three.jsではビデオのテクスチャとオーディオを別々に作成し1つのオブジェクトに追加することで実現できる。
本システムでは、以下のコードで実装している。
2〜15行でビデオ、23〜33行でオーディオの機能設定を行い、17〜21行で作成されるオブジェクトに機能を追加している。
29行目で距離が100からと遠ざかると音が減衰するように設定している。\\
% コードの流れとしては，HTMLのvideoタグに動画を設置し，それをテクスチャとしてオブジェクトに貼り付ける。またビデオのオーディオをmp3として抽出し，それをオブジェクトに追加することで実現している。
% 自動再生がされないようにビデオの方ではautoplayをfalseにし，オーディオではpause状態に設定しておく。
% オブジェクトのクリックをアクションとして再生と停止を実行している。
\noindent\textbf{MP4形式動画資料オブジェクト}
\lstinputlisting[]{./codeTxt/videoAudio.txt}
PDF形式資料オブジェクト、MP4形式資料オブジェクト、意見箱オブジェクトを一つにグループ化することで、一度に3つのオブジェクトを同じ位置・向きで設定することができる。\\
% \noindent\textbf{オブジェクトのグループ化}
% \lstinputlisting[]{./codeTxt/group.txt}
\subsection{PDF形式資料の切り替えとMP4形式動画資料の再生・停止}
テクスチャの切り替えは、PDF形式資料のオブジェクトをクリックすることで別のテクスチャが貼付されたオブジェクトに切り替えるようにする。
そのため、現在PDF形式資料のどのページを表示しているのかを管理する必要がある。
本システムでは、オブジェクトのグループ別に唯一の名前を設定しているため、その名前と現在表示しているページ数をHashを用いてカウンターとして管理する。
以下のコード、13行目ではオブジェクトがクリックされたら1つずつ数字を足すことで表示しているページ数を管理している。
16〜18行では、表示ページが最後まで到達したら、カウンターをリセットしている。\\
\noindent\textbf{PDF形式資料の切り替え}
\lstinputlisting[]{./codeTxt/switchPdfResume.txt}
動画の再生と停止は、MP4形式動画資料のオブジェクトをクリックすることで行えるようにする。
そのため、動画が再生しているのか、停止しているのかを管理しておく必要がある。
本システムでは、flagを用いて、再生されているのかをtrue、falseで管理する。
また、Hashを用いて、それぞれのオブジェクトグループのMP4形式動画資料のオブジェクトの動画が再生されているのかを管理する。
以下のコード、1〜6行ではクリックしたMP4形式動画資料のオブジェクトを判別し、そのオブジェクトで使用されている動画を特定する。
そのデータを8〜18行に渡しflagがfalse、つまり動画が停止しているときは再生しflagをtrueにする。
同じように、flagがtrue、つまり動画が再生されているときは停止しflagをfalseにする。\\
\noindent\textbf{MP4形式動画資料の再生・停止}
\lstinputlisting[]{./codeTxt/pauseStartVideo.txt}
\subsection{操作}
PointerLockControlsクラスを使用して、、、\\
\noindent\textbf{移動・方向転換}
\lstinputlisting[]{./codeTxt/operate.txt}
Raycasterクラスを使用して、、、
オブジェクトに焦点を合わせてクリックすることでクリックイベントを発生することができる。これを実現するものとしてThree.jsでは「Raycaster」クラスというレイキャスティングを支援するクラスがある。
本システムでは，「Raycaster」クラスを使用することで，ディスプレイ中心から見えない光線を出し，それと交わったオブジェクトを判定する。そのオブジェクトによって画層テクスチャを変更したり，動画の再生・停止を行っている。
画像テクスチャの変更は，クリックした数だけカウントし，その数に沿った画像テキスチャにしている。また，動画テキスチャのオブジェクトをクリックすると，trueとfalseが切り替えられるように設計した。trueの場合は動画が停止され，falseの場合は動画が再生される。\\
\noindent\textbf{オブジェクトの判定}
\lstinputlisting[]{./codeTxt/raycaster.txt}
\subsection{動的なオブジェクト}
\noindent\textbf{動的なオブジェクト配置}
\lstinputlisting[]{./codeTxt/autoMakeObj.txt}
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/video_audio_scenegraphs.pdf}
\caption{ビデオとオーディオのシーングラフ}
\label{figure:video_audio_scenegraphs}
\end{figure}
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/tenjikaijo.pdf}
\caption{PDF資料の貼付}
\label{figure:texture}
\end{figure}
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/texture_scenegraphs.pdf}
\caption{テクスチャのシーングラフ}
\label{figure:texture_scenegraphs}
\end{figure}
\subsection{CSV読み込みによる冗長性の削減}
動画テクスチャオブジェクトや画像テキスチャオブジェクトを複数作成するにあたり，その都度無駄にプログラムを作成しなければならなく冗長である。そのため，CSVから様々な値を読み込む手法を取る。
CSV読み込みには，Fetch APIを用いて行う。Fetch APIとは，HTTPリクエストを行い，レスポンスを処理するためのJavaScriptインターフェイスを提供するAPIのことだ。
このCSVでは以下の値を設定している。
\begin{itemize}
\item videoPath: 動画ファイルまでの相対パス
\item audioPath: 音声ファイルまでの相対パス
\item rotationX・rotationY: オブジェクトをX軸・Y軸にどのくらい回転するか
\item x・y・z: オブジェクトの位置
\item texturePath: 画像ファイルまでの相対パス
\end{itemize}
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{../../resume/figure/group_scenegraphs.pdf}
\caption{グループのシーングラフ}
\label{figure:group_scenegraphs}
\end{figure}
動画テクスチャオブジェクトと画像テクスチャオブジェクトを作成し，１つのグループにする（図.\ref{figure:group_scenegraphs}）。こうすることでそれぞれのオブジェクトを同時に移動することができ，x・y・z座標の位置を設定することができる。
\chapter{発表会場の適用実験}
\section{評価の方法}
% 本研究の評価として，利用者に本システムを利用してもらい，そのあとにアンケートでの定性調査を行う。
% 回答者はオンラインから本システムにアクセスし，アンケートの項目に答える。アンケートの結果から，使用している端末からストレスなく操作できたかを調査する。また仮想空間での資料発表展示会はWebブラウザで資料を閲覧することとどのように感じ方が違うのかを調査する。
１つ目に，資料展示会における発表資料展示者と訪問者とのコミュニケーションの方法についての比較方法として，
リアルテイムでのチャット意見交換がいいのか，それともログを残すという形を意味する意見回収箱のようなものを設置するほうがいいのかをアンケートを取る
２つ目に，発表資料の展示方法についてである。
スライド資料のように，資料を切り替えられるようにしたほうがいいのか，それとも全てのページを配置したほうがいいのか
３つ目に，
\section{今後の展望}
現状としては，発表資料展示会のオブジェクトが未完成である。これからの予定として，以下のことを中心に展示会場の作成を進めていく。
\begin{itemize}
\item 発表資料展示会の作成と本システムを利用してもらいアンケートの実践をする。
\item 物理演算用の JavaScript ライブラリの Cannon.jsを実装して 3D モデルの通り抜けを防止する。
\end{itemize}
\chapter{結論}
結論は簡潔に。
最後に参考文献を必ず正しく記載する。
% 原稿がどの程度のクォリティなのか参考文献である程度分かる。
\begin{thebibliography}{}
% \bibitem{} . “”. \url{}, (参照日 2024-11-06).
\bibitem{2d3d-metaverse}メタバース総研.“2Dメタバースと3Dメタバースの違いとは？事例9選も紹介”. \url{https://metaversesouken.com/metaverse/2d-3d/#DD}, (参照日 2024-10-20)
\bibitem{yano} 株式会社矢野経済研究所.“メタバースの国内市場動向調査を実践(2023)”. \url{https://www.yano.co.jp/press-release/show/press_id/3333}, (参照日 2024-10-28).
% \bibitem{somusyo} 総務省.“令和5年版 情報通信白書 第2部 情報通信分野の現状を課題”. \url{https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r05/html/nd247520.html}, (参照日 2024-10-20).
\bibitem{cotra} トランスコスモス株式会社. “【メタバースに関する利用実態\_消費者調査2022】 メタバースを4人に1人が利用し，中でも20代男性は5割以上が利用。目的はゲームが高く，20代女性は企業の展示会・イベント参加が5割超。”. \url{https://www.transcosmos-cotra.jp/report/usage-status-of-metaverse1}, (参照日 2024-11-06).
\bibitem{dentu} 株式会社電通. “電通，「メタバースに関する意識調査2023」を実施”. \url{https://www.dentsu.co.jp/news/release/2023/1211-010670.html}, (参照日 2024-11-06).
\bibitem{kddi} KDDI株式会社. “実店舗を空間再現したバーチャル店舗「\( \alpha \)U place」を提供開始”. \url{https://newsroom.kddi.com/news/detail/kddi_pr-1026.html}, (参照日 2024-11-06).
% \bibitem{ntt} エヌ・ティ・ティ・スマートコネクト株式会社，株式会社NTTデータNJK. “子どもたちの学びの多様性に貢献する「3D教育メタバース」を提供開始~ 仮想空間だからこそできる体験・学習効率の向上の場を提供 ~”. \url{https://www.nttsmc.com/news/2023/20230828.html}, (参照日 2024-11-06).
\bibitem{home} BIPROGY.“バーチャル住宅展示場MY HOME MARKET”. \url{https://www.biprogy.com/solution/service/myhomemarket.html}, (参照日2024-11-09).
\bibitem{hometown} MY HOME MARKET.“バーチャル住宅展示場 VRタウン”. \url{https://myhomemarket.jp/town/index.html}, (参照日 2023-08-13).
\bibitem{didital-archive} NPO法人日本デジタルアーキビスト資格認定機構. “デジタルアーカイブとは”. \url{https://jdaa.jp/digital-archives}, (参照日 2024-12-22).
\bibitem{koubunsyo} 独立行政法人国立公文書館. “国立公文書館デジタルアーカイブ”. \url{https://www.digital.archives.go.jp/}, (参照日 2024-12-22).
% \bibitem{article1} 澤崎敏文．メタバースを活用した多様な学習環境の構築と実践．日本教育工学会研究報告書．2023，vol.2023，no.2，p.83-87．
\bibitem{sonomama} SoVeC株式会社.“【メタバース会場】そのまま展示会ならリードが効率よく取れます。”. \url{https://www.sovec.net/sonomama/tenjikai/}, (参照日 2023-08-13).
\bibitem{ovice} oVice株式会社.“ovice｜約4,000社の導入実績 - 仮想オフィス(バーチャルオフィスプラットフォーム)”. \url{https://www.ovice.com/ja}, (参照日 2024-11-04).
\bibitem{artsteps} artsteps.“Artsteps”. \url{https://www.artsteps.com/privatespaces}, (参照日 2024-11-04).
\bibitem{three} three.js.“Fundamentals”.\url{https://threejs.org/manual/#en/fundamentals}. (参照日 2024-08-01).
\bibitem{webgl} MDN Web Docs.“WebGL:ウェブの2Dおよび3Dグラフィック”.\url{https://developer.mozilla.org/ja/docs/Web/API/WebGL_API}. (参照日2024-08-01).
\bibitem{bun} Bun. “What is Bun?”. \url{https://bun.sh/docs}, (参照日 2024-12-04).
\bibitem{hono} Hono. “Hono - Web framework built on Web Standards”. \url{https://hono.dev/docs/}, (参照日 2024-12-04).
\bibitem{bootstrap} Bootstrap. “Bootstrap · The most popular HTML, CSS, and JS library in the world.”. \url{https://getbootstrap.com/}, (参照日 2024-12-04).
\bibitem{sqlite} SQLite. “What Is SQLite?”. \url{https://www.sqlite.org/}, (参照日 2024-12-04).
\bibitem{websocket} MDN Web Docs. “WebSocket API（WebSockets）”. \url{https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API}, (参照日 2024-12-04).
\bibitem{chrome} Chrome for Developers.“Chromeの自動再生ポリシー”.\url{https://developer.chrome.com/blog/autoplay?hl=ja#webaudio}. (参照日2024-08-08).
% \bibitem{glTF} Khronos Group.“glTF Overview”. \url{https://www.khronos.org/gltf/}, (参照日 2023-08-13).
% \bibitem{socket.io} Socket.IO.“Introduction”. \url{https://socket.io/docs/v4/}, (参照日 2023-08-13)
\end{thebibliography}
\end{document}
