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

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

\underline{2}

概要

本研究では、仮想空間における発表資料展示会の効率的な構築を目的として、 Three.js を活用した動的展示会場生成システムを開発した。二次元メタバースの特性を活かし、 HMD 不要で広範なデバイス互換性を備えたシステムを提案した。本システムは、 Web ブラウザ上で動作し、展示物の数に応じて自動的に会場レイアウトを生成する機能を持つ。また、展示物ごとに意見箱を設置し、訪問者の意見や質問をリアルタイムで記録する。動的生成システムは、展示物のアップロード後、資料数に応じたレイアウトを自動生成する。これにより、手動での配置作業を大幅に効率化すると同時に、設計ミスのリスクを軽減する。また、意見箱機能では、展示物に関連する質問や意見が記録され、展示後のフィードバック収集にも寄与する。本システムの開発には HTML、 CSS、 JavaScript(Three.js)、 SQLite などの技術を採用した。特に Three.js を活用することで、仮想空間内の展示物表示やユーザー操作をスムーズに実現している。さらに、 Hono を使用して軽量で高速なサーバー環境を構築した。提案システムの有効性を評価するため、動的生成システムと手動構築型の比較実験を行い、作業時間の短縮効果や操作性を評価した。その結果、動的生成により展示会準備時間が大幅に短縮されると同時に、意見箱機能が訪問者間のインタラクションを促進することが確認された。一方で、さらなるアルゴリズムの最適化や操作性向上が課題として挙げられた。本研究の成果は、仮想空間における展示会構築の効率化とユーザーエクスペリエンスの向上に寄与する。 (683 字)

目次

第 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 研究目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

第 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 サーバサイドの作成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

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

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

5.4 比較システム . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

第 6 章発表会場の適用実験 37 6.1 実験概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 6.2 実験結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 6.3 考察 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

第 7 章結論 41

参考文献 43

第 1 章

はじめに

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

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

1.1.1 メタバースとは

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

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

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

[figure]

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

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

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

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

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

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

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

[figure]

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

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

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

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

がメリットとしてある。三次元メタバースとは， 3D の仮想空間でアバターを操作するメタバースのことを指す。利用する際は VR や 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）。このことから，メタバースは男性の若い男性にとって身近な存在であることが分かる。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この節は，メタバースがどのようにさまざまな分野で活用されているかについて説明する。 KDDI は 2023 年 10 月 24 日から，実店舗を空間再現したバーチャル店舗で，最新の展示をみて

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

さらに，実店舗の店員から接客を受けることができ，バーチャル空間からでも商品に最も詳しい店

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

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

員に，商品に関する相談や詳細情報を聞くことができる。

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

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

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

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

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

図 1.10 国立公文書館デジタルアーカイブのサイト画面 [6]

1.2 研究目的

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

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

第 2 章

先行研究と類似サービス

2.1 関連研究

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

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

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

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

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

吉井らは， VR 空間において文書を読む環境を提案している。論文最大 8 ページの論文を提示でき，ユーザは論文に近寄ったり，見上げたりすることで，論文を読むことができるシステムを開発し \underline{14 第 2 章先行研究と類似サービス}

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

た。 VR は文書の表示領域の制限がなく，「全視野角に文書を表示が可能」であることより，一度に表示できる情報が多くなり，文書の可動性を高めることが期待されるとした。また，ページ枠に縛られずに論文を読むことができるため，ユーザが論文の内容を効率的に理解することができると期待できるとした。

2.2 類似サービス

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

2.2.1 そのまま展示会

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

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

2.2.2 artsteps

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

1. 仮想環境を設計する壁とドアをグリッドに配置し，環境の作成をする。壁や床などは好きな色に塗ることや，独自 \underline{2.3 類似サービスの課題点と評価点 15}

図 2.2 artsteps[12]

のテクスチャを使用することができる。

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

3. ストーリーを作成する VR スペース全体にガイドポイントを配置し，展示物のタイトルと説明をつけることができる。また，ガイドポイントとアップロードしたコンテンツの間の流れを選択することで，独自の物語を演出できる。

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

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

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

課題点

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

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

評価点

評価点としては，全てのシステムが 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), SQLite - 3 3.37.2

ブラウザ Google Chrome 131.0.6778.85

表 4.1 開発環境の概要

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

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

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

4.3.1 各構成要素の役割

2D メタバースの環境を実現すること，また， Web にアクセスして利用することで，異なるデバイスや OS 間での互換性が高いという点や，インストール不要なためインストールの手間と時間がかからなくて済むといった点より Three.js， Web ページでのレイアウトを簡易的に構築するために Bootstrap，チャット内容や展示する資料のデータを保存するために SQLite，クライエントから送られてくるリクエストを効率的に処理するために Hono，これらをつなげる実行環境として 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}

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 本システムのデータベース設計

展示会場を作成するにあたり展示する資料の情報や意見箱に送信されたメッセージ等は全てデータベースに保存する。「mp4 objects テーブル」と「pdf textures テーブル」は展示会場を自動生成する際に使用する。また，「users テーブル」と「chat テーブル」は意見箱の機能を実現するために使用する（図.5.1）。本システムではログイン機能をもたせることで意見箱でメッセージを送信したユーザが誰か分かるようにしている。

図 5.1 本システムのデータベース

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

表 5.1 エンドポイントの URL と処理概要

エンドポイント処理概要
/user-signin  ユーザ登録サイトへの誘導
/register  データベースにユーザ情報保存
/user-login  ユーザログインサイトへの誘導
/login  ユーザ認証
/user-info  ユーザ情報取得
/exhibition-data 展示会場作成時にデータベースの使用
/chat/:boxName 意見箱から送られた情報をデータベースに保存
/fileUpload  ファイルアップロードサイトへの誘導
/upload  アップロードされたファイルを処理

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,

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

14  saveFilename: pdfName,
15  savePath: outputDir,
16  format: "png",
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 からと遠ざかると音が減衰するように設定している（図.5.2）。

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

 1 function  makeVideo(objId, videoPath, audioPath) {
 2  const  video = document.createElement("video");
 3  document.body.appendChild(video);
 4  video.style.display = "none";

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

 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;
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）。

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

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

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

以下のコード， 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 操作

Three.js には，「PointerLockControls」というユーザーインターフェースのコントロールの一種で，マウスカーソルを画面に固定し，マウスの動きで視点を操作するためのクラスがある。「PointerLockControls」クラスとキーボードキー入力によって使用することで，一人称視点のカメラ移動を実現する。

以下コード， 1〜4 行で「PointerLockControls」の設定をしている。 6〜26 行でキーボードの「WASD」キー，また「↑←↓→」キーを押した時にそれぞれに対する変数に true を代入する。同じように， 28〜48 行でキーボードの「WASD」キー，また「↑←↓→」キーが離された時にそれぞれに対する変数に false を代入する。それらを 50〜56 行で判定し，前後左右の移動を実現している。

移動・方向転換

 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  }

26 });

27

28 document.addEventListener("keyup", function (event) {
29  if (modalFlag) return;
30  switch (event.key) {
31  case "w":
32  case "ArrowUp":

33  moveForward = false;
34  break;
35  case "s":
36  case "ArrowDown":
37  moveBackward = false;
38  break;
39  case "a":
40  case "ArrowLeft":
41  moveLeft = false;
42  break;
43  case "d":
44  case "ArrowRight":
45  moveRight = false;
46  break;

47  }

48 });

49

50 function  updateCameraPosition() {
51  const  speed = 0.1;
52  if (moveForward) controls.moveForward(speed);
53  if (moveBackward) controls.moveForward(-speed);
54  if (moveRight) controls.moveRight(speed);
55  if (moveLeft) controls.moveRight(-speed);

56 }

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

本システムでは，「Raycaster」クラスを使用することで，使用しているパソコンのディスプレイ中心から見えない光線を出す。それと交わったオブジェクトが PDF 形式資料のオブジェクトなのか， MP4 形式動画資料のオブジェクトなのか，意見箱のオブジェクトなのかを判定する。

以下コード， 10〜25 行でレイキャスティングによって最初に光線に当たったオブジェクトが何かを判定する。それによって， PDF 形式資料の切り替え， MP4 形式動画資料の再生・停止，意見箱の書き込みを行う。

オブジェクトの判定

 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  const  clickObjectName = intersects[0].object.name

12

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

15  }

16

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

19  }

20

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

24  }
25  }

26  })

図 5.4 Three.js の XYZ 軸

5.3.4 動的なオブジェクト

オブジェクトを動的に設置するには，オブジェクトが配置される位置を資料の数に応じて計算する必要がある。 Three.js では X 軸が左右方向， Y 軸が上下方向， Z 軸が奥行きを表している（図.5.4）。そのため，本システムでは X ・ Z 座標が 0 の場所を基準とし，床の大きさとそれぞれのグループオ

ブジェクトの位置を計算していく。

以下コード， 5〜12 行で MP4 形式動画資料オブジェクトと PDF 形式資料を作成し，それぞれの配列に追加する。 16〜21 行で壁の数・一つの壁に配置する展示物の最大数・グループオブジェクトの展示物の幅・展示物同士の間隔・床の大きさ・床の中心を設定している。これらを用いて， 25〜30 行では，各壁オブジェクトの回転と位置の配置データを設定している。また， 34〜60 行のループでは床の中央を基準にして均等に並べるための配置位置を各グループオブジェクトごとに求め，配置している。

動的なオブジェクト配置

 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  }
64 }

5.3.5 データベース読み込みによる冗長性の削減

MP4 形式動画資料オブジェクトや PDF 形式資料オブジェクトを複数作成するにあたり，その都度無駄にプログラムを作成しなければならなく冗長である。そのため，データベースから様々な値を読み込む手法を取る。

データベースへのアクセスには， Fetch API を用い， Bun で構築している Hono を通して行う。データは 5.1 節の（図.5.1）で示されている「mp4 objects テーブル」と「pdf textures テーブル」を用いる。以下コード， 1 行目で localhost 上の「/exhibition-data」エンドポイントに GET リクエストを送信している。 2 から 4 行で JSON 形式のレスポンスを受け取り， JSON データを解析している。

Fetch API によるデータのリクエスト

 1 fetch('http://localhost:3000/exhibition-data')
 2  .then((response) => {
 3  return  response.json();
 4  })
 5  .then((data) => {
 6  makeWallDisplay(data);
 7  raycasterObj(data);
 8  })
 9  .catch((error) => {
10  console.log(error);
11  })

以下コード， 2〜6 行では「mp4 object テーブル」， 8〜13 行では「pdf textures テーブル」をデータベースから取得し，変数に代入している。それらを 15〜18 行で JSON 形式に直し，レスポンスを

表 5.2 GUI に設定する項目と詳細

項目詳細イベントの種類
Position X X 座標を設定スライダーコントローラー
Position Y Y 座標を設定スライダーコントローラー
Position Z Z 座標を設定スライダーコントローラー
Rotation Y Y 軸で回転スライダーコントローラー
Size  大きさを設定スライダーコントローラー
Type  オブジェクトを選択ドロップダウンメニュー
Add Object オブジェクトをメタバース空間に追加ボタン
Delete Object オブジェクトをメタバース空間から削除ボタン

返している。

サーバでの処理

 1 app.get('/exhibition-data', (c) => {
 2  const  objectsRows = db.query(`
 3  SELECT o.id, m.video_path, m.audio_path
 4  FROM  mp4_objects o
 5  INNER  JOIN  media m ON o.media_id = m.id
 6  ;`).all();

7

 8  const  textureRows = db.query(`
 9  SELECT s.set_name, json_group_array(json_object('texture_path', t.texture_path)) AS  textures
10  FROM  pdf_textures t
11  INNER  JOIN  texture_sets s ON t.set_id = s.set_id
12  GROUP  BY s.set_name;
13  `).all();

14

15  return c.json({
16  objects: objectsRows,
17  textures: textureRows
18  });
19 })

5.2.1〜5.2.5 項より展示会場は作成される。図入れる。

5.4 比較システム

比較システムも Three.js を用いて作成する。また，オブジェクトの大きさ・位置・回転をリアルタイムで変更する GUI （Graphical User Interface）を実装する。これは Three.js で使用される GUI ライブラリである「lil-gui」を用いる。

今回の GUI は表.5.2 のようになる（図.5.5）。 \underline{5.4 比較システム 35}

図 5.5 システムで使用する GUI 項目

第 6 章

発表会場の適用実験

本章では，本システムと比較システムを使用し，展示会場の作成において，本システムが作業時間において優位性を持つかどうかを調査する。実験の概要や実験手順は以下に示す。また，実験より判明した実行結果とその考察，今後の展望を述べる。

6.1 実験概要

今回の実験では， PDF 形式資料オブジェクト， MP4 形式動画資料オブジェクト，意見箱を 1 つのオブジェクトグループとして， 8 つの設置にかかる時間を計測する。これは壁 1 枚あたりに 2 セットのオブジェクトを設置することになり，どちらがより正確にオブジェクトを配置できるか調べる為である。展示会場の完成基準は図.6.1 ・図.6.2 を目標とする。

実験の手順として，動的なシステムでは

• 資料をアップロードし，展示会場が完成するまでの時間を計測する。

• 上記を 10 回繰り返し，それぞれの時間を記録する。

GUI システムでは，

• 完成基準である図.6.1 ・図.6.2 に基づき，展示会場を作成し，完成するまでの時間を計測する。 • 上記を 10 回繰り返し，それぞれの時間を計測する。

またそれぞれのシステムで展示会場を作成する作業フローは図.6.3 のようになる。

6.2 実験結果

展示会場を自動生成するシステムと GUI を用いたシステムの 2 つを比較し、それぞれの作業時間の効率性に統計的な差があるかを検定した。実験は 1 人で実施し、対応のある t 検定を用いて片側検定を行った。有意水準を 0.01 に設定し、 t 検定の結果、 p 値は 0.0000000000022 となった。この値は有意水準 0.01 を十分に下回るため、帰無仮説「両システムの作業時間に差はない」は棄却され、対立仮説「両システムの作業時間には差がある」が支持された。この結果から、本システムは比較システムよりも作業時間の効率性が高いことが統計的に有意であると結論付けられる。

表.6.1 が作成時間をまとめたものである。 \underline{38 第 6 章発表会場の適用実験}

図 6.1 完成基準（上から見た図）図 6.2 完成基準（横から見た図）

図 6.3 それぞれのシステムの作業フロー

\underline{6.3 考察 39}

本システム比較システム 1 回目 2 分 00 秒 13 分 51 秒 2 回目 2 分 17 秒 15 分 08 秒 3 回目 2 分 13 秒 13 分 09 秒 4 回目 2 分 20 秒 14 分 22 秒 5 回目 2 分 35 秒 15 分 25 秒 6 回目 2 分 15 秒 13 分 23 秒 7 回目 2 分 14 秒 14 分 38 秒 8 回目 2 分 5 秒  14 分 01 秒 9 回目 2 分 7 秒  12 分 47 秒 10 回目 2 分 12 秒 14 分 57 秒^{表 6.1 展示会場を作成するのに要した時間}

6.3 考察

実験を通して、自動で生成される展示会場のシステムが、手動で作成される従来型の展示会場と比較して作業効率の向上に寄与する可能性が示唆された。この結果は、動的生成が展示物の配置にかかる時間を短縮させる点で有益であることを意味する。ただし、以下の課題が残る。

• 自動生成のアルゴリズムが複雑な展示構成に対応できるか。

• 提供される操作性が全てのユーザにとって直感的であるか。

これらの課題は、ユーザテストを通じたフィードバック収集により、さらなる改善が可能であると考えられる。

第 7 章

結論

本研究では、 Three.js を用いた自動展示会場生成システムを開発し、その有効性を評価した。実験結果から、自動生成が展示会準備の効率化に貢献する可能性が示唆された。一方で、展示物の配置や操作性の不備点が明らかになり、さらなる最適化が求められることが分かった。今後は、複雑な展示構成への対応や、多様なデバイスでの使用性向上を目指し、改良を繰り返す予定である。

参考文献

[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).

\underline{44 参考文献}

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

  https://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).