メタバース空間を活用したデジタルアーカイブ構築支援システムの開発

{広瀬研究室 \atop C1210924 斎藤翼} 2025 年 1 月 10 日

\underline{2}

概要

研究の簡単な概要説明を行う。また，論文の章立ては基本的に「背景」「先行研究」「研究の設計」「実験」「結論」の基本的な章が必要となり，これに加えて先行研究と研究の設計の間に「提案」などが入る。そのため，自身の研究に合わせて柔軟に組み立てる必要がある。 (124 文字) ←概要は文字数を記載する。 COVID-19 の影響により，仮想空間上で会議を行うことや娯楽として楽しむといった行動が増えるとともに仮想空間の需要が増えた。そのため，仮想空間上で発表資料の展示会を行うことで，インターネットに接続さえすれば発表資料を見れることに需要があるのではないかと考えた。本研究では， JavaScript のライブラリである Three.js を用いて発表資料の展示会を行い，そのシステムが様々な端末からでも操作できる環境を目指し，システムを構築していく。

目次

第 1 章はじめに 5

1.1 メタバースをめぐる背景 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 1.1.1 メタバースとは . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 1.1.2 二次元メタバースと三次元メタバース . . . . . . . . . . . . . . . . . . . . . . . . . . 5 1.1.3 メタバース市場規模の増加 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 1.1.4 メタバースの利用状況 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 1.1.5 メタバースの利用が広がっている分野 . . . . . . . . . . . . . . . . . . . . . . . . . . 9 1.1.6 デジタルアーカイブとは . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

1.2 研究目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

第 2 章先行研究と類似サービス 13

2.1 関連研究 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 2.1.1 メタバースを活用した多様な学習環境の構築と実践 . . . . . . . . . . . . . . . . . . 13 2.1.2 VR を用いた体験型デジタルアーカイブの制作に関する研究 . . . . . . . . . . . . . . 13 2.1.3 VR 空間における複数ページを同時提示する文書閲覧環境 . . . . . . . . . . . . . . . 13

2.2 類似サービス . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 2.2.1 そのまま展示会 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 2.2.2 artsteps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

2.3 類似サービスの課題点と評価点 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

第 3 章メタバース空間での発表会の提案 17 3.1 課題に対する改善案 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 3.2 提案するシステム . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 3.3 動的に発表資料展示会会場の作成する流れ . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

第 4 章システムの設計 19 4.1 システムの概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 4.2 要件定義 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 4.3 システム全体の構成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

4.3.1 各構成要素の役割 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 4.4 各機能の詳細 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

4.4.1 仮想空間上での PDF 形式の資料表示と切り替え . . . . . . . . . . . . . . . . . . . . 23 \underline{4 目次}

4.4.2 仮想空間上での MP4 形式の動画資料表示と再生・停止 . . . . . . . . . . . . . . . . 23 4.4.3 カメラの移動と方向転換 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 4.4.4 意見箱（チャット機能）の設置 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 4.4.5 資料の数に応じた展示会場の動的な変更 . . . . . . . . . . . . . . . . . . . . . . . . 23

第 5 章システム開発 25 5.1 データベースの設計と作成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 5.2 サーバサイドの作成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

5.2.1 URL と html ファイルの関係 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 5.3 展示会場の作成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

5.3.1 各オブジェクト . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 5.3.2 PDF 形式資料の切り替えと MP4 形式動画資料の再生・停止 . . . . . . . . . . . . . 27 5.3.3 操作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 5.3.4 動的なオブジェクト . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 5.3.5 CSV 読み込みによる冗長性の削減 . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

第 6 章発表会場の適用実験 33 6.1 評価の方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 6.2 今後の展望 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

第 7 章結論 35

参考文献 37

第 1 章

はじめに

本章では，研究の背景と目的について説明する。

1.1 メタバースをめぐる背景

1.1.1 メタバースとは

元アマゾンスタジオ戦略部門グローバル統括責任者のマシュー・ボールは，メタバースの解説書『ザ・メタバース』で

リアルタイムにレンダリングされた 3D 仮想世界をいくつもつなぎ，相互に連携できるようにした大規模ネットワークで，永続的に同期体験ができるもの，ユーザー数は実質無制限であり，かつユーザーは一人ひとり，個としてそこに存在している感覚を有する。また，アイデンティティ，歴史，各種権利，オブジェクト，コミュニケーション，決済などのデータに連続性があるもの

と定義し，更に同書でメタバースの備えるべき特徴を 7 つ示した。メタバースの特徴

[figure]

• 永続的であること（中止・リセットされない）

• 同期的であること（実生活と同じリアルタイム）

• 大規模であること（同時接続ユーザ数が無制限）

• 経済性があること（所有・投資・売買などが可能）

• 広範であること（リアルとデジタルの垣根が無い）

• 異なるメタバース間でも相互運用性があること

• 幅広い企業・個人により作成・運用されること

[figure]

1.1.2 二次元メタバースと三次元メタバース

二次元メタバースとは， 2D の画面上でアバターを操作するメタバースのことを指す [1]。 3D メタバースと比べ，没入感は高くないが，ヘッドセット無しで PC やスマホからアクセス可能な点や，高度なデータ通信環境に依存しない点，過度な距離感を保ちながらコミュニケーション等を楽しめる点がメリットとしてある。三次元メタバースとは， 3D の仮想空間でアバターを操作するメタバースのことを指す。利用する際は VR や

\underline{6 第 1 章はじめに}

図 1.1 メタバースの国内市場規模推移・予想 [2]

MR のヘッドセットを使用することで，まるでリアルの世界にいるかのような高い没入感を得ることができる。 3D メタバースではよりリアルなアバターを利用できるため，チャットやメール，通話での従来型のコミュニケーションだけでなく，アバターのジェスチャーを用いた身体的，動的なコミュニケーションが可能になる。

1.1.3 メタバース市場規模の増加

矢野経済研究所の調査によると、国内メタバース市場は成長を遂げつつある [2]。 2022 年度の国内市場規模は、プラットフォーム、コンテンツ・インフラ等、 XR 機器を合わせて前年度比 173.6% 増の 1377 億円に達し、 2023 年度にはさらに 207% 成長して 2851 億円に拡大すると予想されている（図.1.1）。この成長傾向は今後も続くと見込まれ、 2027 年度には市場規模が 2 兆円を超えると予想されている。その要因として、法人向け市場でメタバースが次世代プラットフォームとして活用され、その後、一般消費者を対象とするコンシューマ向けメタバースのユーザが徐々に増加していくと予測されるためだ。

1.1.4 メタバースの利用状況

メタバースはエンターテインメントやビジネスの場で活用されており、その利用実態や意識に関する調査結果が発表されている。その中で、 Cotra が 2022 年に全国の 15 歳から 60 歳以上の男女 1331 名を対象に実施した調査は、メタバースの現状を理解する上で必要なデータを提供している。この調査によれば、メタバースを利用したことがあると回答した人は全体の 25% に上り、特に若い男性の利用率が顕著だった。男性 15〜19 歳では 48%、男性 20〜29 歳では 55% と、半数以上が利用経験を持っていることが分かった（図.1.3）。このことから、メタバースは男性の若い男性にとって身近な存在であることが分かる。

利用用途についてもある傾向が見られた。男性では「ゲーム」が 63% と最も多く、ついで「音楽・ライブ」が 39%、「企業の展示会・イベント」が 30% であった。一方、女性は「ゲーム」が 53% と最も多く、「企業の展示会・イベント」が 39%、「音楽・ライブ」が 37% と続いた（図.1.3）。男女ともにエンターテイメント分野が中心である一方で、ビジネス用途も一定の割合を締めている。

\underline{1.1 メタバースをめぐる背景 7}

図 1.2 メタバース利用状況 [3]

図 1.3 （男女別）どのような用途で利用しましたか？ [3]

さらに、継続利用に関するデータに注目すると、男女ともに週 1 回以上メタバースを利用している人は 4 割を超え、月 1 回以上に拡大すると約 8 割に達した。特に 20 代では 62%、女性 30 代では 56% が週 1 回以上利用していることが分かり、特定の年代において高い継続利用率を示している（図.1.4）。これから、メタバースが一時的な流行ではなく、日常生活の一部として定着しつつあることが分かる。

また、電通は 2023 年に全国の 15〜59 歳の 2000 人を対象とした「メタバースに関する意識調査 2023」を実施した。この調査は、本国におけるメタバースの認知度や利用状況を把握する資料になっている。

調査結果によると、「メタバース」という言葉の認知率は大きく上昇しており、 2021 年の 18.6% から 2023 年には 82.1% に達した。この増加は、メディアや企業の広告活動がメタバースの認知を広げる大きな役割を果たしたことが考えられる。

図 1.4 メタバースを利用したことがある方にお尋ねします。現在も継続して利用していますか？ [3]

図 1.5 Q. あなたは「メタバース」をご存知ですか。 [4]

{図 1.6 Q. あなたは，「以下のゲーム型，交流型などのメタバースプラットフォーム」※を利用／プレイす \atop ることがありますか。（各項目単一回答） [4]}

一方で、実際の利用状況については、メタバースプラットフォームの利用経験率は 18.0% に留まった。この数字には「現在利用している」、「過去に利用したことがあるが、現在は利用していない」という人の合計が含まれている。認知度が広がる一方で、実際の利用率が限定的である点は、メタバースがまだ一部の層に留まっていると考えられる。

さらに、メタバースを「現在利用している」人の 1 日あたりの平均利用時間は 68.8 分という結果だった。このデータは、 cotra の利用用途のデータより、ゲームなどのエンターテイメント分野が利用時間を伸ばしているのではないかと考える。

図 1.7 Q. 「以下のあなたが現在利用／プレイすることのあるゲーム型・交流型などのメタバースプラットフォーム」※について， 1 日あたりの平均利用／プレイ時間をお知らせください。パソコンやスマホ／タブレット，家庭用ゲーム機など，利用／プレイする機器・デバイスは問わずにお知らせください。（各項目単一回答） [4]

図 1.8 無印良品のバーチャル店舗 [5]

これらのことから、メタバースは国内での認知度は高く、特に若い世代に中心に普及している。また、ゲームだけでなく音楽やライブ、企業の展示会などのさまざまな用途として利用されている。しかしながら、認知度が高いのにも関わらず利用率が低いのは、デバイスを入手するコストが高いということや必要性が低いということが考えられる。

1.1.5 メタバースの利用が広がっている分野

この節は、メタバースがどのようにさまざまな分野で活用されているかについて説明する。

KDDI は 2023 年 10 月 24 日から，実店舗を空間再現したバーチャル店舗で，最新の展示をみてショッピングができる αU Place の提供を開始した [5]。 αU Place は，「ネットだけでは商品のイメージがわからない」「店員に相談したい」といったお客様におすすめのバーチャル』ショップである。実店舗の空間を商品陳列から内装の雰囲気まで忠実にバーチャル上で再現しているため，商品の置き場所や商品ポップなどの実店舗ならでは工夫で注目ポイントを知ることができ，欲しい商品をタップすると EC サイトで購入することができる（図.1.8）。店舗空間は，スマートフォンでスキャンするだけで簡単にバーチャル空間に再現できるため，お客様は最新展示を体験できる。

さらに，実店舗の店員から接客を受けることができ，バーチャル空間からでも商品に最も詳しい店員に，商品に関する相談や詳細情報を聞くことができる。

図 1.9 住宅の選択画面 [6]

BIPROGY の「MY HOME MARKET」は，消費者がスマートフォンでバーチャル住宅展示場を見学してセミオーダー型規格住宅を購入する仕組みだ [6] （図.1.9）。これにより，消費者は 24 時間 365 日，建てたい家のイメージを膨らませて，予算の中で臨場感を持ってしることができるため，打つ合わせ回数を減らせるなどのメリットがある。バーチャル住宅展示場では住宅の様々な部屋の内装や住宅の外見を 360 度視点を変更し，リモート内見することができる [7]。

このように、メタバースはショッピング、住宅見学などのさまざまな分野での利用が広がっている。それぞれの分野で、メタバース空間による臨場感の向上を実現しており、ユーザに新たな体験を提供している。

1.1.6 デジタルアーカイブとは

デジタルアーカイブは、収蔵資料や有形無形文化・産業資源などをデータベースやネットワーク技術をを用いて、デジタル形式で記録・保存し活用することである。特徴としては、多様な情報を統合して扱うことができ、劣化しない保存ができる。また、時間や場所を問わずにアクセスできる。これは研究や学習支援、防災、地域復興など多方面で活用される。

一つの事例として、国立公文書館デジタルアーカイブが挙げられる [9] （図.1.10）。これは、インターネットと通じて、「いつでも、どこでも、誰でも、自由に、無料で」、館所蔵の特定歴史公文書等の目録情報の検索、公文書や重要文化財等のデジタル画像等の閲覧、印刷、ダウンロードが可能なインターネットサービスである。

1.2 研究目的

国内の市場規模の上昇傾向やメタバースの利用状況、認知度の状況を踏まえると、メタバースは市場規模、認知度、利用率のいずれも上昇傾向にあることが分かる。その一方で、認知度が高いにもかかわらず利用率が低いという結果も見られる。この原因の一つとして、 3D メタバースで必要となる HMD （Head Mounted Display）と呼ばれるゴーグル型ディスプレイのコストの高さが挙げられる。 HMD は立体映像を表示するデバイスであり、導入のハードルとなっている可能性がある。

これらを踏まえ、本研究ではデバイスのコスト負担を軽減するため、 HMD を必要としない 2D メタバース空間において、レジュメ資料やプレゼンテーション資料を展示するための展示会会場を構築する。このシステムでは、ユーザーが自由にバーチャル空間を移動できる仕組みを提供することで、従来のデジタルアーカイブ \underline{1.2 研究目的 11} 図 1.10 国立公文書館デジタルアーカイブのサイト画面 [6] における資料閲覧よりも高い没入感を実現し、集中力を維持するモチベーションを向上させることを目指す。

第 2 章

先行研究と類似サービス

2.1 関連研究

2.1.1 メタバースを活用した多様な学習環境の構築と実践

澤崎は、コロナ禍でのオンライン授業における「リアリティ」と「臨場感」の欠如という課題に対し、三次元仮想空間を活用した解決策を試みた。ウェブブラウザで動作する DOOR を使用し、リアルタイムコミュニケーション、三次元教室空間の再現、アバターの活用、目的に応じた空間カスタマイズなどの改善策を実施した。企画発表、ゼミ・卒業研究、課外活動（写真展）での活用結果は概ね好評で、特に写真展では 1000 人を超える訪問者を集めた。しかし技術的な問題として通信環境や PC を性能の差、インターフェースの改善として、操作方法や資料共有の最適化、コミュニケーションの課題として、表情の読み取りにくさや発言者の特定、そして仮想空間設計がグループ活動や心理面に与える影響の検証など、いくつかの課題が明らかになった。

2.1.2 VR を用いた体験型デジタルアーカイブの制作に関する研究

木村らは、岐阜県大垣市を対象に、街や俳句に関連した歴史・文化を紹介するコンテンツをデジタルアーカイブに導入し、体験者の歴史・文化への関心を高めることを試みた。 3D モデルによる街並み再現、音環境のシミュレーション、俳句解説などの体験型コンテンツの提供をした。結果として、エリア内全域で印象に残る場所や風景があり、街並みの再現によって大垣市の街並みの魅力を伝えることができたと考えている。また、街の歴史・文化に関わるものを 3D スキャンによりリアルに再現し、体験型コンテンツを追加することによって目立たせることで、仮想空間の中で街の歴史・文化に興味を持たせることは可能と考えた。課題点として、コンテンツの開始位置を文字が見えやすい位置に変更することや、体験者の立ち位置に応じて文字の表示位置が変わるように設定するといった対応が必要であると考えた。それは、文字を読む際の位置調整が難しいとの指摘があり、 VR に慣れていないと仮想空間内での咄嗟の操作が難しいと推察されたためだ。

2.1.3 VR 空間における複数ページを同時提示する文書閲覧環境

吉井らは、 VR 空間において文書を読む環境を提案している。論文最大 8 ページの論文を提示でき、ユーザは論文に近寄ったり、見上げたりすることで、論文を読むことができるシステムを開発した。 VR は文書の表示領域の制限がなく、「全視野角に文書を表示が可能」であることより、一度に表示できる情報が多くなり、文書の可動性を高めることが期待されるとした。また、ページ枠に縛られずに論文を読むことができるため、 \underline{14 第 2 章先行研究と類似サービス}

図 2.1 そのまま展示会 [10]

ユーザが論文の内容を効率的に理解することができると期待できるとした。

2.2 類似サービス

メタバースでの展示会の作成支援サービスは、様々な種類がある。そこで、本研究で作成するシステムの類似サービスとして、ウェブブラウザで動作するかつ、管理者が展示会を作成できるものを調査し、サービスとしての課題点・評価点を探る。

2.2.1 そのまま展示会

SoVeC が提供する「そのまま展示会」は，高機能なリード管理画面を実装したソニークオリティのバーチャル展示会を，誰でも簡単にウェブブラウザで閲覧できるプラットフォームサービスである（図.2.1）。

来場者向けの機能として， 360 度で会場を見渡すことができ高い一覧性・リアリティのあるブース内で，チャットや名刺交換の担当者を来場者が選択することが出来る・アーカイブ動画だけでなく，ライブ配信も可能でリアル展示会とバーチャル展示会の入場証をバーコード形式で共通化できる [10]。

2.2.2 artsteps

artsteps は，独自の VR 展示会やストーリーを作成，デザイン，共有するためのプラットフォームを提供している（図.2.2） [12]。主な機能として，以下が挙げられる。

1. 仮想環境を設計する壁とドアをグリッドに配置し，環境の作成をする。壁や床などは好きな色に塗ることや，独自のテクスチャを使用することができる。

2. デジタルコンテンツをアップロードする画像やビデオ， 3D オブジェクトや音をアップロードすることができる。

3. ストーリーを作成する VR スペース全体にガイドポイントを配置し，展示物のタイトルと説明をつけることができる。また， \underline{2.3 類似サービスの課題点と評価点 15}

図 2.2 artsteps[12]

ガイドポイントとアップロードしたコンテンツの間の流れを選択することで，独自の物語を演出できる。 4. 共有

VR 空間をソーシャルメディアで共有したり，個人のウェブサイトに埋め込むことができる。また，訪問者や他のクリエイターとリアルタイムでのチャットを行うことができる。

artsteps は， Web サイトだけでなく，スマートフォンのアプリケーションとしても利用することができる。

2.3 類似サービスの課題点と評価点

課題点

1 つ目は，リアルタイムのチャットができる反面，そのチャットログが 24 時間 365 日残らない点である。展示会で見学者同士が話し合ったにも関わらず，そのチャットログが残らなければ展示者がどのような意見や評価をされているのかわからない。また，展示者に意見や質問が伝わったあと、見学者に伝えることができない。

2 つ目は，資料のダウンロードができない点である。もう一度資料を閲覧したい際は、ネットワークに接続し、システムにアクセスする必要がある。そのため、ネットワーク非接続時は資料を閲覧できないため、ユーザーの利便性が低下する。

3 つ目は、展示会会場が自動生成されない点である。管理者が一から展示会会場を作成するとなると、展示する資料の数が多くなるにつれて時間を要してしまう。また、作成する際に設計ミスが起きてしまう可能性もある。

評価点

評価点としては、全てのシステムが 2D メタバースであるということである。 2D メタバースであることによって、 HMD(Head Mounted Display) が不要でサービスを利用できる。また、高度なデータ通信環境に依存することがない。

第 3 章

メタバース空間での発表会の提案

本章では， 1 章， 2 章で挙げた背景・目的・課題点・評価点を踏まえたシステムの提案を行う。 2.2 節で挙げた類似サービスからの課題点から本サービスにおける改善案を定める。また具体的なサービスの提案，発表資料展示会会場の動的な作成手順と本サービスを使って作成される発表資料展示会の構成について説明する。

3.1 課題に対する改善案

2.3 節で述べた類似サービスの課題点を元に本サービスで必要となる改善案を以下のように定める。

• 質問・意見箱の設置質問・意見のログを 24 時間 365 日誰でも閲覧でき、書き込めるようにする。

• 資料のダウンロード機能デジタルアーカイブとしての役割を持たせるため、資料のダウンロードが行えるようにする。

• 展示会の自動生成資料の数に応じた動的な展示会会場作成を実施することで、作成に要する時間を削減する。

3.2 提案するシステム

本研究では、展示会会場の作成者が 2D メタバース空間内で展示会会場を自動生成できるサービスの開発を目指す。また、閲覧資料に対しての意見箱を設置することで、 24 時間 365 日展示者と見学者がお互いにコミュニケーションを取れることができる。これらのことを、ソフトウェアのインストールをせずに、多くのハードウェアでより互換性のある Web 上で行えるものとする。利用される場面として、発表会の前後で資料のアーカイブとして利用されることを想定している。また、システムの利用想定者として、発表会を欠席した人、もう一度見たい人が気になった資料を閲覧できることを想定している。

3.3 動的に発表資料展示会会場の作成する流れ

作成者が動的に発表資料展示会会場の作成する流れを示す。

1. 作成者が、動画と資料のアップロードを Web サイトで行い、保存する。

2. 保存したファイルとその総数をもとに、発表資料展示会会場の大きさ・資料の配置を計算し、設置する。 \underline{18 第 3 章メタバース空間での発表会の提案}

図 3.1 システムの概要図 3. 生成された発表資料展示会会場に参加することで、交流を行うことができる。

第 4 章

システムの設計

本章では、 3 章よりシステム設計について説明する。

4.1 システムの概要

本システムでは、資料の展示会場を動的に作成できること、また、メタバース空間を用いることで従来のデジタルリポジトリよりも没入感と集中力の向上をすることを目的としている。そこで、没入感と集中力の向上としては 2D メタバース環境の構築をする。

4.2 要件定義

本システムにおける前提条件と機能要件を以下に示す。

• 前提条件 – PC 上のみで動く

– Web ブラウザでのアクセス

– 2D メタバース空間での構築

– ネットワーク接続が必要

• 機能要件 – 仮想空間上での PDF 形式の資料表示と切り替え

– 仮想空間上での MP4 形式の動画資料表示と再生・停止 – カメラの移動と方向転換

– 意見箱（チャット機能）の設置

– 資料の数に応じた展示会場の動的な変更

4.3 システム全体の構成

以下に開発環境の概要 (表.4.1) とシステムの全体概念図 (図.4.1) を示す。

\underline{20 第 4 章システムの設計}

項目詳細

開発言語 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

ブラウザ Google Chrome 131.0.6778.85

表 4.1 開発環境の概要

図 4.1 システムの全体概念図

要件使用ライブラリ
3D グラフィック描画  Three.js
軽量・高速なサーバー  Bun
ルーティング管理  Hono
ユーザインターフェース構築  Bootstrap
データ管理  SQLite3
通信機能  WebSocket API

表 4.2 本システムで使用したライブラリとその目的

4.3.1 各構成要素の役割

2D メタバースの環境を実現すること、また、 Web にアクセスして利用することで，異なるデバイスや OS 間での互換性が高いという点や，インストール不要なためインストールの手間と時間がかからなくて済むといった点より Three.js、 Web ページでのレイアウトを簡易的に構築するために Bootstrap、チャット内容や展示する資料のデータを保存するために SQLite、クライエントから送られてくるリクエストを効率的に処理するために Hono、 Three.js で作成したオブジェクトの位置座標をリアルタイムで同期するために WebSocket API、これらをつなげる実行環境として Bun を使用する (表.4.2)。 \underline{4.3 システム全体の構成 21}

図 4.2 Three.js のシステム概念図

Three.js

Three.js は JavaScript の 3Dimensions(3D) ライブラリで Web ページに 3D コンテンツをできる限り簡単に表示しようというものである [13]。 Three.js は Web Graphics Library(WebGL) が利用できる Web ブラウザにおいて，プラグインを使用せずにインタラクティブな 3D や 2D のグラフィックをレンダリングするための JavaScript API を使用して描画している [14]。 Three.js の仕組みとして，シーンにカメラ・ライト・ 3D オブジェクトを追加する。そのシーンをレンダラー通してディスプレイに出力する（図.4.3）。

• レンダラレンダラは 3D シーンのうちカメラのフラストラム内にある部分を 2D 画像としてキャンバスにレンダリング（描画）する。

• ライトオブジェクトシーン内にある 3D オブジェクトを照らすために使用される。 Three.js には様々な種類のライトがあり，一点から全方向に放射される光であったり，スポットライトのような光がある。

• シーンオブジェクトシーンは， Three.js によってレンダリングされるものと場所を設定することができる。オブジェクトやライト，カメラを配置する場所のこと。

• カメラオブジェクトカメラはシーンをどのように見るかを決めるために使用される。 Three.js には様々な種類のライトがあり，一般的なライトは PerspectiveCamera である。これは遠くのものが近くのものよりも小さく見える 3D ビューを提供する。

本システムではこの Three.js を用いて発表資料展示会のオブジェクトを作成する。

図 4.3 図１のシーンマップ

Bun

Bun は JavaScript と TypeScript アプリのためのオールインワンのツールキットである [15]。 Bun ランタイムは、 Node.js を置き換えるために設計された高速な JavaScript ランタイムである。また Bun プロセスは、現時点で Node.js よりも約 4 倍速く起動する。そして、これは Zig で書かれ、 JavaScriptCore によって動作し、起動時間とメモリ使用量を劇的に削減する。そして、 Bun は、 fetch, WebSocket、 ReadableStream と言った標準的な Web API を実装している。

Hono

Hono は、 Web 標準に基づいて構築された Web フレームワークであり、 Node.js や Bun などのあらゆる JavaScript ランタイムをサポートしている [16]。 Hono は、 Web API の構築、 CDN(Contents Delivery Network) のフロントエンド、フルスタックのアプリケーションなどの用途に適している。また、 Web 標準 API のみを使用し、エッジコンピューティング環境に最適化された設計となっている。また、豊富なミドルウェアとヘルパー関数を提供し、開発者の生産性を向上させる。

Bootstrap

Bootstrap は、 Web サイトやアプリケーションの開発を効率化するための CSS フレームワークである。 CSS 変数の活用し、色、フォントスタイル、その他多くの変数を、どこでも使えるよう:root レベルで提供している。トグル可能な隠し要素、モーダル、オフキャンパスメニュー、ポップオーバー、ツールチップなど、さまざまな機能を JQuery なしで追加できる。

SQLite3

SQLite は、小型、高速、自己完結型、高信頼性、フル機能の SQL データベースエンジンを実装した C 言語ライブラリである。 SQLite は世界で最も使われているデータベースエンジンであり、すべてのモバイルフォンやほとんどのコンピュータに組み込まれている。 \underline{4.4 各機能の詳細 23}

WebSocket API

Websocket API は、ユーザのブラウザとサーバ間で双方向の対話的な通信セッションを可能にする。サーバにメッセージを送信して応答を受信でき、通信のためにサーバをポーリングする必要はない。また、低遅延によって、データのやり取りをリアルタイムで行うことができる。

4.4 各機能の詳細

4.2 節で定義した機能要件の詳細について説明する。

4.4.1 仮想空間上での PDF 形式の資料表示と切り替え

PDF 形式の資料をテクスチャとして読み込み、オブジェクトに貼付することで 3D オブジェクトを作成する。それをクリックするごとに同じ座標・向きで PDF のページ数分だけオブジェクトを入れ替えるようにする。また、最後のページでクリックをすると最初のページに戻るようにする。同じ座標でオブジェクトを入れ替えることで、 PDF のページ数分並べて展示するのと比べて展示会場を大きくすることを防ぐ。

4.4.2 仮想空間上での MP4 形式の動画資料表示と再生・停止

MP4 形式の動画資料をテクスチャとして読み込み、オブジェクトに貼付することで 3D オブジェクトを作成する。それをクリックするたびに、再生と停止を切り替えれるようにする。また、動画の再生中にオブジェクトから遠ざかると音が小さく聞こえるようになり、近づくと音が大きく聞こえるようにする。

4.4.3 カメラの移動と方向転換

キーボードで特定のキー（WASD、↑←↓→）を入力することで、カメラの移動を前後左右できるようにする。また、マウスカーソルの移動でカメラの方向転換をできるようにする。

4.4.4 意見箱（チャット機能）の設置

展示資料の数分、意見箱を設置し、その展示資料に対する意見・質問。感想が書き込めるようにする。それを実現するために、メタバース空間上の意見箱をクリックすることで、モーダルウィンドウが開き、掲示板のように書き込めるようにする。

4.4.5 資料の数に応じた展示会場の動的な変更

本システムでは、壁を 4 つ作成し正方形になるように配置する。それぞれの壁に展示資料の数が均等になるように配置する。例えば、展示資料の総数が 4 つの場合、 1 つの壁あたり、 1 つの展示資料が配置されることになる。展示資料の数が増えるにつれて、床・壁のオブジェクトを拡大することで、複数の展示資料に対応する。

第 5 章

システム開発

5.1 データベースの設計と作成

5.2 サーバサイドの作成

5.2.1 URL と html ファイルの関係

画面の写真とともに、説明を行う。気をつけた点があれば、その都度書く。

5.3 展示会場の作成

5.3.1 各オブジェクト

床オブジェクトは正方形、意見箱オブジェクトは立方体で作成する。

PDF 形式資料オブジェクトの大きさは紙の規格である白銀比で作成する。 Three.js では PDF 形式ファイルをテクスチャとすることができないため、一度 PNG 形式にする必要がある。そのため、以下のコードで PDF 形式ファイルをページ数分 PNG 形式ファイルに変換し、別のディレクトリに保存する。

JavaScript での変換を実現するのに、「pdf2pic」というパッケージを使用する。これは PDF 形式ファイルを様々な画像形式に変換する API である。以下コードの 12〜19 行で画像の解像度、保存ファイル名、保存パス、出力形式、画像幅、画像高さを設定する。また、 32 行目で PDF 形式ファイルの全ページを PNG 形式ファイルに全変換している。

PDF 形式ファイルを PNG 形式ファイルに変換

1 const  convertPdfToImage = async (pdfPath, pdfName) => {
2  const  outputDir =  './public/output',
3  outputPath =  '../output/';

4

5  if (!fs.existsSync(outputDir)) {
6  fs.mkdirSync(outputDir, { recursive: true  });
7  }

8

9  const  pdfWidth = 1024;
10  const  pdfHeight = pdfWidth * Math.sqrt(2);

11

12  const  convert = fromPath(pdfPath, {
13  density: 300,
14  saveFilename: pdfName,
15  savePath: outputDir,
16  format: "png",

\underline{26 第 5 章システム開発}

17  width: pdfWidth,
18  height: pdfHeight,
19  });

20

21  let  setIdRow = db.prepare(`SELECT  set_id  FROM  texture_sets  WHERE  set_name = ?`).get(pdfName);
22  let  setId;

23

24  if (!setIdRow) {
25  const  result = db.prepare(`INSERT  INTO  texture_sets(set_name) VALUES(?)`).run(pdfName);
26  setId = result.lastInsertRowid;
27  } else {
28  setId = setIdRow.set_id;

29  }

30

31  try {
32  const  totalPages = await  convert.bulk(-1);

33

34  for (const  pic of  totalPages) {
35  const  texturePath = `${outputPath}${pic.name}`;
36  db.prepare("INSERT  INTO  textures (set_id, texture_path) VALUES (?, ?)").run(setId, texturePath);

37  }

38

39  } catch (error) {
40  console.error(`Error  converting  PDF to  images: ${error.message}`);

41  }

42 };

今日には Google Chrome や Safari， Mozilla Firefox など様々なウェブブラウザがある。そのウェブブラウザの多くでは自動再生ポリシーが設定されている。本システムの開発環境では Google Chrome を使用しているため，その自動再生ポリシーに基づいてシステムを作成する。

Google Chrome はユーザエクスペリエンスを向上させ，広告ブロッカーをインストールするインセンティブを最小限に抑え，高価なネットワークや制約のあるネットワークでのデータ消費量を削減するために，より厳格な自動再生ポリシーに移行している。この変更は，ユーザーが再生をより詳細に制御できるようにし，正当なユースケースを持つパブリッシャーにメリットをもたらすことを目的としている [20]。本システムの作成にあたり，気をつけるべきポリシーとして，以下の内容がある。

• ミュート状態で自動再生されるようにすることは常に許可される。

• 音声付き自動再生は，ユーザがドメインを操作した（クリック，タップなど）場合に許可される。

つまり，音声付き動画はクリックなどのアクションを起こさないと再生してはならないということである。本システムでは，ビデオが再生されているオブジェクトに近づけば音が大きくなり，遠くなれば音が小さくなるように設定する。 Three.js ではビデオのテクスチャとオーディオを別々に作成し 1 つのオブジェクトに追加することで実現できる。本システムでは、以下のコードで実装している。 2〜15 行でビデオ、 23〜33 行でオーディオの機能設定を行い、 17〜21 行で作成されるオブジェクトに機能を追加している。 29 行目で距離が 100 からと遠ざかると音が減衰するように設定している。

MP4 形式動画資料オブジェクト

 1 function  makeVideo(objId, videoPath, audioPath) {
 2  const  video = document.createElement("video");
 3  document.body.appendChild(video);
 4  video.style.display = "none";
 5  video.src = videoPath;
 6  video.autoplay = false;
 7  video.preload = "auto";
 8  video.loop = true;
 9  video.muted = true;
10  video.id = objId;
11  const  videoTexture = new  THREE.VideoTexture(video);
12  videoTexture.minFilter = THREE.LinearFilter;
13  videoTexture.magFilter = THREE.LinearFilter;

\underline{5.3 展示会場の作成 27}

14  videoTexture.wrapS = THREE.ClampToEdgeWrapping;
15  videoTexture.wrapT = THREE.ClampToEdgeWrapping;

16

17  const  videoGeometry = new  THREE.PlaneGeometry(3, 2);
18  const  videoMaterial = new  THREE.MeshBasicMaterial({ map: videoTexture, color: 0xffffff  });
19  const  videoMesh = new  THREE.Mesh(videoGeometry, videoMaterial);
20  videoMesh.position.set(-0.875, 0, 0);
21  videoMesh.name = "video";

22

23  const  audioListener = new  THREE.AudioListener();
24  camera.add(audioListener);
25  const  audioLoader = new  THREE.AudioLoader();
26  const  positionalAudio = new  THREE.PositionalAudio(audioListener);
27  audioLoader.load(audioPath, function (buffer) {
28  positionalAudio.setBuffer(buffer);
29  positionalAudio.setRefDistance(100);
30  positionalAudio.pause();
31  positionalAudio.name = objId;
32  });
33  videoMesh.add(positionalAudio);

34

35  return  videoMesh;

36 }

PDF 形式資料オブジェクト、 MP4 形式資料オブジェクト、意見箱オブジェクトを一つにグループ化することで、一度に 3 つのオブジェクトを同じ位置・向きで設定することができる。

5.3.2 PDF 形式資料の切り替えと MP4 形式動画資料の再生・停止

テクスチャの切り替えは、 PDF 形式資料のオブジェクトをクリックすることで別のテクスチャが貼付されたオブジェクトに切り替えるようにする。そのため、現在 PDF 形式資料のどのページを表示しているのかを管理する必要がある。本システムでは、オブジェクトのグループ別に唯一の名前を設定しているため、その名前と現在表示しているページ数を Hash を用いてカウンターとして管理する。

以下のコード、 13 行目ではオブジェクトがクリックされたら 1 つずつ数字を足すことで表示しているページ数を管理している。 16〜18 行では、表示ページが最後まで到達したら、カウンターをリセットしている。

PDF 形式資料の切り替え

 1 function  changeResumePage(data, intersects) {
 2  let  usePic = intersects[0].object.material.map.image.currentSrc

3

 4  let  foundTexture = data.textures.find(texture => {
 5  const  encodedFileName = texture.set_name.replace(/[^\x00-\x7F]/g, char => encodeURIComponent(char));
 6  let  nameRegex = new  RegExp(encodedFileName);
 7  return  nameRegex.test(usePic);
 8  });

9

10  let  texturePath = JSON.parse(foundTexture.textures);
11  let  groupName = intersects[0].object.parent.name;
12  resumePageCounter[groupName] = resumePageCounter[groupName] || 0;
13  resumePageCounter[groupName] += 1;

14 15

16  if (resumePageCounter[groupName] ==  texturePath.length) {
17  resumePageCounter[groupName] = 0;

18  }

19

20  const  resumeMesh = makeResume(texturePath[resumePageCounter[groupName]].texture_path);
21  intersects[0].object.parent.add(resumeMesh);

22 }

動画の再生と停止は、 MP4 形式動画資料のオブジェクトをクリックすることで行えるようにする。そのため、動画が再生しているのか、停止しているのかを管理しておく必要がある。本システムでは、 flag を用いて、再生されているのかを true、 false で管理する。また、 Hash を用いて、それぞれのオブジェクトグループの MP4 形式動画資料のオブジェクトの動画が再生されているのかを管理する。

以下のコード、 1〜6 行ではクリックした MP4 形式動画資料のオブジェクトを判別し、そのオブジェクトで使用されている動画を特定する。そのデータを 8〜18 行に渡し flag が false、つまり動画が停止しているときは再生し flag を true にする。同じように、 flag が true、つまり動画が再生されているときは停止し flag を false にする。

MP4 形式動画資料の再生・停止

 1 function  changeVideo(data, intersects) {
 2  let  groupName = intersects[0].object.parent.name;
 3  let  audio = intersects[0].object.children;
 4  let  videoTagId = document.getElementById(`${groupName}`);
 5  startStopVideoAndAudio(groupName, videoTagId, audio);
 6 }

7

 8 function  startStopVideoAndAudio(flagNumber, videoTagId, audio) {
 9  if (videoPlayPauseFlag[flagNumber] ==  false) {
10  videoTagId.play()
11  audio[0].play();
12  videoPlayPauseFlag[flagNumber] = true;
13  } else {
14  videoTagId.pause();
15  audio[0].pause();
16  videoPlayPauseFlag[flagNumber] = false;

17  }
18 }

5.3.3 操作

PointerLockControls クラスを使用して、、、

移動・方向転換

 1 controls = new  PointerLockControls(camera, document.body);
 2 document.addEventListener("click", function  () {
 3  controls.lock();
 4 });

5

 6 document.addEventListener("keydown", function (event) {
 7  if (modalFlag) return;
 8  switch (event.key) {
 9  case "w":
10  case "ArrowUp":
11  moveForward = true;
12  break;
13  case "s":
14  case "ArrowDown":
15  moveBackward = true;
16  break;
17  case "a":
18  case "ArrowLeft":
19  moveLeft = true;
20  break;
21  case "d":
22  case "ArrowRight":
23  moveRight = true;
24  break;
25  case "e":
26  moveUp = true;
27  break;
28  case "q":
29  moveDown = true;
30  break;

31  }

32 });

\underline{5.3 展示会場の作成 29}

33

34 document.addEventListener("keyup", function (event) {
35  if (modalFlag) return;
36  switch (event.key) {
37  case "w":
38  case "ArrowUp":
39  moveForward = false;
40  break;
41  case "s":
42  case "ArrowDown":
43  moveBackward = false;
44  break;
45  case "a":
46  case "ArrowLeft":
47  moveLeft = false;
48  break;
49  case "d":
50  case "ArrowRight":
51  moveRight = false;
52  break;
53  case "e":
54  moveUp = false;
55  break;
56  case "q":
57  moveDown = false;
58  break;

59  }

60 });

Raycaster クラスを使用して、、、

オブジェクトに焦点を合わせてクリックすることでクリックイベントを発生することができる。これを実現するものとして Three.js では「Raycaster」クラスというレイキャスティングを支援するクラスがある。

本システムでは，「Raycaster」クラスを使用することで，ディスプレイ中心から見えない光線を出し，それと交わったオブジェクトを判定する。そのオブジェクトによって画層テクスチャを変更したり，動画の再生・停止を行っている。

画像テクスチャの変更は，クリックした数だけカウントし，その数に沿った画像テキスチャにしている。また，動画テキスチャのオブジェクトをクリックすると， true と false が切り替えられるように設計した。 true の場合は動画が停止され， false の場合は動画が再生される。

オブジェクトの判定

 1 function  raycasterObj(data) {
 2  document.addEventListener("click", (event) => {
 3  event.preventDefault();
 4  const  raycaster = new  THREE.Raycaster();
 5  const  mouse = new  THREE.Vector2();
 6  mouse.x = 0;
 7  mouse.y = 0;
 8  raycaster.setFromCamera(mouse, camera);
 9  const  intersects = raycaster.intersectObjects(scene.children, true);
10  if (intersects.length  > 0) {
11  console.log(intersects[0].object);
12  const  clickObjectName = intersects[0].object.name

13

14  if (clickObjectName  == "resume") {
15  changeResumePage(data, intersects);

16  }

17

18  if (clickObjectName  == "video") {
19  changeVideo(data, intersects);

20  }

21

22  const  boxRegex = /box[1-8]/
23  if (boxRegex.test(clickObjectName)) {
24  openChat(clickObjectName);

25  }
26  }

27  })

\underline{30 第 5 章システム開発}

28 }

5.3.4 動的なオブジェクト

動的なオブジェクト配置

 1 function  makeWallDisplay(data) {
 2  let  videoMesh = [];
 3  let  resumeMesh = [];

4

 5  data.objects.forEach((obj) => {
 6  videoMesh.push(makeVideo(obj.id, obj.video_path, obj.audio_path));
 7  });

8

 9  data.textures.forEach((textureData) => {
10  let  texture = JSON.parse(textureData.textures);
11  resumeMesh.push(makeResume(texture[0].texture_path));
12  });

13

14  const  totalExhibits = data.objects.length;

15

16  const  allOfWall = 4;
17  const  aWallExhibits = Math.ceil(totalExhibits / allOfWall);
18  const  sizeOfObj = 5.625;
19  const  spaceBetweenObj = 2.5;
20  const  floorSize = aWallExhibits * sizeOfObj + (aWallExhibits + 1) * spaceBetweenObj;
21  const  centerOfFloor = floorSize / 2;

22

23  floorObj(floorSize);

24

25  const  wallData = [
26  { rotationY: 0, positionX: 0, positionZ: -centerOfFloor },
27  { rotationY: 90,  positionX: -centerOfFloor, positionZ: 0 },
28  { rotationY: 180,  positionX: 0, positionZ: centerOfFloor },
29  { rotationY: 270,  positionX: centerOfFloor, positionZ: 0 },
30  ];

31

32  let  count = 0;

33

34  for (let i = 0; i < wallData.length; i++) {
35  const { rotationY, positionX, positionZ } = wallData[i];

36

37  for (let j = 0; j < aWallExhibits; j++) {
38  if (count  >= totalExhibits) break;

39

40  const  offset = (j - (aWallExhibits  - 1) / 2) * (sizeOfObj + spaceBetweenObj);
41  let  localX = 0;
42  let  localZ = 0;

43

44  if (rotationY  === 0 ||  rotationY  ===  180) {
45  localX = offset;
46  } else {
47  localZ = offset;

48  }

49

50  makeGroup(
51  data.objects[count].id,
52  videoMesh[count],
53  resumeMesh[count],
54  rotationY,
55  positionX + localX,
56  positionZ + localZ
57  );

58

59  count++;

60  }

61

62  if (count  >= totalExhibits) break;

63  }

\underline{5.3 展示会場の作成 31}

図 5.1 ビデオとオーディオのシーングラフ

図 5.2 PDF 資料の貼付図 5.3 テクスチャのシーングラフ

図 5.4 グループのシーングラフ

5.3.5 CSV 読み込みによる冗長性の削減

動画テクスチャオブジェクトや画像テキスチャオブジェクトを複数作成するにあたり，その都度無駄にプログラムを作成しなければならなく冗長である。そのため， CSV から様々な値を読み込む手法を取る。

CSV 読み込みには， Fetch API を用いて行う。 Fetch API とは， HTTP リクエストを行い，レスポンスを処理するための JavaScript インターフェイスを提供する API のことだ。

この CSV では以下の値を設定している。

• videoPath: 動画ファイルまでの相対パス

• audioPath: 音声ファイルまでの相対パス

• rotationX ・ rotationY: オブジェクトを X 軸・ Y 軸にどのくらい回転するか

• x ・ y ・ z: オブジェクトの位置

• texturePath: 画像ファイルまでの相対パス

動画テクスチャオブジェクトと画像テクスチャオブジェクトを作成し，１つのグループにする（図.5.4）。こうすることでそれぞれのオブジェクトを同時に移動することができ， x ・ y ・ z 座標の位置を設定することができる。

第 6 章

発表会場の適用実験

6.1 評価の方法

１つ目に，資料展示会における発表資料展示者と訪問者とのコミュニケーションの方法についての比較方法として，リアルテイムでのチャット意見交換がいいのか，それともログを残すという形を意味する意見回収箱のようなものを設置するほうがいいのかをアンケートを取る

２つ目に，発表資料の展示方法についてである。スライド資料のように，資料を切り替えられるようにしたほうがいいのか，それとも全てのページを配置したほうがいいのか

３つ目に，

6.2 今後の展望

現状としては，発表資料展示会のオブジェクトが未完成である。これからの予定として，以下のことを中心に展示会場の作成を進めていく。

• 発表資料展示会の作成と本システムを利用してもらいアンケートの実践をする。

• 物理演算用の JavaScript ライブラリの Cannon.js を実装して 3D モデルの通り抜けを防止する。

第 7 章

結論

結論は簡潔に。最後に参考文献を必ず正しく記載する。

参考文献

[1] メタバース総研. “2D メタバースと 3D メタバースの違いとは？事例 9 選も紹介” . https:

//metaversesouken.com/metaverse/2d-3d/#DD, (参照日 2024-10-20)

[2] 株式会社矢野経済研究所. “メタバースの国内市場動向調査を実践 (2023)” . https://www.yano.co.jp/

press-release/show/press_id/3333, (参照日 2024-10-28).

[3] トランスコスモス株式会社. “【メタバースに関する利用実態消費者調査 2022】メタバースを 4 人に 1 人が利用し，中でも 20 代男性は 5 割以上が利用。目的はゲームが高く， 20 代女性は企業の展示会・イベント

参加が 5 割超。” . https://www.transcosmos-cotra.jp/report/usage-status-of-metaverse1, (参

照日 2024-11-06).

[4] 株式会社電通. “電通，「メタバースに関する意識調査 2023」を実施” . https://www.dentsu.co.jp/

news/release/2023/1211-010670.html, (参照日 2024-11-06).

[5] KDDI 株式会社. “実店舗を空間再現したバーチャル店舗「αU place」を提供開始” . https://newsroom.

kddi.com/news/detail/kddi_pr-1026.html, (参照日 2024-11-06).

[6] BIPROGY. “バーチャル住宅展示場 MY HOME MARKET” . https://www.biprogy.com/solution/

service/myhomemarket.html, (参照日 2024-11-09).
[7] MY HOME MARKET.“バーチャル住宅展示場 VR タウン”. https://myhomemarket.jp/town/index.

html, (参照日 2023-08-13).

[8] NPO 法人日本デジタルアーキビスト資格認定機構. “デジタルアーカイブとは” . https://jdaa.jp/ digital-archives, (参照日 2024-12-22).

[9] 独立行政法人国立公文書館. “国立公文書館デジタルアーカイブ” . https://www.digital.archives. go.jp/, (参照日 2024-12-22).

[10] SoVeC 株式会社. “【メタバース会場】そのまま展示会ならリードが効率よく取れます。” . https:

//www.sovec.net/sonomama/tenjikai/, (参照日 2023-08-13).

[11] oVice 株式会社. “ovice ｜約 4,000 社の導入実績 - 仮想オフィス (バーチャルオフィスプラットフォー

ム)” . https://www.ovice.com/ja, (参照日 2024-11-04).

[12] artsteps. “Artsteps” . https://www.artsteps.com/privatespaces, (参照日 2024-11-04).

[13] three.js. “Fundamentals” .https://threejs.org/manual/#en/fundamentals. (参照日 2024-08-01).

[14] MDN Web Docs. “WebGL: ウェブの 2D および 3D グラフィック” .https://developer.mozilla.

org/ja/docs/Web/API/WebGL_API. (参照日 2024-08-01).

[15] Bun. “What is Bun?” . https://bun.sh/docs, (参照日 2024-12-04).

[16] Hono. “Hono - Web framework built on Web Standards” . https://hono.dev/docs/, (参照日 2024-12-04).

[17] Bootstrap. “Bootstrap · The most popular HTML, CSS, and JS library in the world.” . https:

\underline{38 参考文献}

//getbootstrap.com/, (参照日 2024-12-04).

[18] SQLite. “What Is SQLite?” . https://www.sqlite.org/, (参照日 2024-12-04).

[19] MDN Web Docs. “WebSocket API（WebSockets）”. https://developer.mozilla.org/en-US/docs/

Web/API/WebSockets_API, (参照日 2024-12-04).

[20] Chrome for Developers. “Chrome の自動再生ポリシー” .https://developer.chrome.com/blog/

autoplay?hl=ja#webaudio. (参照日 2024-08-08).