情報処理学会 インタラクション 2024
IPSJ Interaction 2024

1B-412024/2/28

既存の UI フレームワークを取り入れた
VR 向け Web ブラウザアプリケーションの試作
吉川遼†1†2

八嶋有司†3横山徹†4†5

彦坂和里†3

秋庭史典†2

概要：筆者らはこれまで，既存の Web コンテンツのマークアップ言語を応用しつつ，VR 空間内に Web コンテンツを立体的に表示する Web ブラウザアプリケーションを開発し，平面的な Web デザインを立体的に再配置する際のデザイン原則について検証を進めている．本研究ではレスポンシブデザインに用いられる既存の UI フレームワークを応用し，Web ページの要素を VR 空間内に立体的に配置するアプリケーションの試作をおこなった．

1. はじめにスマートフォンやタブレット端末の普及により，Web コンテンツをレイアウトする際には多種多様な解像度に対応

VR 向けの要素の二種を用意する必要があり，単一の HTML,CSS を組み合わせ各端末上での最適なコンテンツ表示を実現するレスポンシブデザインの手法と比較すると，汎用的なレイアウトが難しい問題があった．

した快適な閲覧環境の実現が求められる．2010 年代前半か

そこで本研究では UI フレームワークとして最も普及しらはスタイルシートを用い，Web ブラウザの表示領域（ビている Bootstrap を用いた Web コーディングにおけるコンューポート）の幅や高さの値に応じた条件分岐を設定し，テンツのレイアウト時に使用される HTML 要素の class 属

Web ページ内で表示するコンテンツの幅や高さを条件に合性値を援用し，要素の位置・幅・高さが Bootstrap によってわせ段階的に指定する方法（レスポンシブデザイン）や，相対的に指定された Web コンテンツを VR 空間内に立体的ビューポートの幅や高さを基準にした相対値で指定する方に表示する Web ブラウザアプリケーションを試作した．

法（リキッドデザイン）が普及した．また 2010 年代中盤からは UI フレームワークの Bootstrap を用いたグリッドレイアウトが普及し，2023 年現在において Bootstrap は Web コンテンツにおける UI フレームワークとして圧倒的なシェアを誇っている[1]．

2. 先行事例・関連研究VR 上における Web デザイン，Web ブラウザに関する研究として，Lu et al. による没入感のあるレイアウトフレー

このように，Web コンテンツのレイアウトに関しては多ムワークの提案[4]や，Toyama et al. による「VRowser」[5]，

種多様な方法で閲覧環境の最適化が進みつつある一方で，Egawa et al. の訪問履歴が可視化される複数ウィンドウのVR 環境における一般的な Web コンテンツの閲覧体験は，Web ブラウザ[6]が挙げられる．

全天球型の空間内にビューポートの平面的な矩形が表示さ

Lu et al. に関しては Web コンテンツの要素を階層構造をれるに留まっており，Web コンテンツ表現ならびに閲覧に持つ扇形に展開し，提示するレイアウトを提案しているが，おいて VR 空間を十全に活用できているとは言い難いのが本研究が目的としている VR 空間におけるレスポンシブデ現状である．AR.js や A-Frame といった VR 向けの WebXRザインの実現とは目的が異なる．また Toyama et al. の Web

プラグインを用いた VR 空間向けの Web コンテンツ開発もブラウザは森や川といった 3D 空間内に構築された世界内可能ではあるが，通常の Web コーディングと比較し，独自にウィンドウを表示する提示手法を採っている．Egawa et

タグ（要素）や設定が必要であるため，UI フレームワーク

al. の Web ブラウザでは訪問した各 Web ページのビューポの観点からすると汎用的とは言い難い．

ートがノードで連結されることで，移動の履歴をユーザー

これまで著者らは，VR 空間における Web コンテンツのが認知しやすくする工夫がなされている．Toyama et al.の最適な提示手法を検討すべく，Web コンテンツに奥行き感Web ブラウザは 3D モデル内に平面のビューポートを，やスケール感を付加し，表示する VR 向け Web ブラウザア

Egawa et al.の Web ブラウザは 3D 空間内に複数の平面ビュプリケーション[2]を開発し，その有用性について検証を進ーポートを配置しており，本研究のアプリケーションが志めてきた[3]．しかしながら開発したアプリケーションで向している HTML 要素自体の VR 空間における立体的な提Web コンテンツを閲覧可能にするには，各 HTML 要素の座示とは方向性が異なる．

標を CSS において絶対値で指定必要があること，同じ要素でも HTML 内において PC やスマートフォン向けの要素と†1 愛知淑徳大学人間情報学部感性工学専攻†2 名古屋大学大学院情報学研究科社会情報学専攻†3 名古屋文理大学情報メディア学部情報メディア学科†4 東京藝術大学音楽学部†5 株式会社アマナ© 2024 Information Processing Society of Japan366

情報処理学会 インタラクション 2024
IPSJ Interaction 2024

3. Web コンテンツの提示手法
3.1 Bootstrap におけるレイアウト原則
Bootstrap を用いた Web コンテンツレイアウトの最大の特徴として，row（行）と col（column：行）を用いたグリ

1B-41
2024/2/28

今回の実装にあたっては，Web コンテンツのコーディン
グにおいて主に用いられる div 要素，h1, h2 要素といった見出し, p 要素などの段落，img 要素で表示される画像の 4種類に絞り，表示方法の調整をおこなった．

ッドシステムによるコンテンツ配置が挙げられる．従来，div 要素を用いて複数のコンテンツを配置する際には，id やclass 属性に開発者が設定した独自の値を各 div 要素に付加し，かつ，それら div 要素を画面上において並置させたい場合には，スタイルシートにおいて幅（width）のプロパテ
ィに対し親要素の幅を基準とした相対値（e.g. 33%）や calc関数を用いた計算式（e.g. calc( 100em / 4 )）などを独自で指定する必要があった．Bootstrap においては class 属性の値に row を持つ div 要素を親要素として，子要素である div要素に class 属性値 col を指定することで，親要素（.row）
内の子要素（.col）の個数に応じて自動的に幅を調整し，表示することが可能となる．また，Bootstrap のグリッドシス

図 1

Bootstrap を用いた HTML の記載例（一部）

テムにおいては class 属性値に container を持つ div 要素の幅を 12 分割した幅を，子要素のレイアウトの基準としており，親要素（.row）内の子要素に col-6 や col-4 といったclass 属性値を付加することで，12 分割された幅のうち 6 つ分の幅を持たせる，または 4 つ分の幅を持たせる，といった相対的な幅の指定が可能となる[7]．
3.2 HTML 要素の VR 空間への配置
前項の Bootstrap を用いて実現されるグリッドデザイン
ならびに相対値で指定された HTML 内の各要素を VR 空間内に展開するにあたり，筆者らが開発した VR 向け Web ブ

図 2

スマートフォン・PC 向け Web ブラウザでの表示例

ラウザアプリケーション[2]に，アプリケーション内でスクレイピングした HTML 要素の class 属性値を読み取る処理を加えた．アプリケーション内において判定すべき HTML要素の class 属性値として，container や row, col といったBootstrap の基礎的な class 属性値から，w-100, w-75, h-100,h-50 といった親要素を基準とした幅や高さを子要素に反映させるための class 属性値を想定し，「親要素があり，親要素の class 属性値に row が含まれ，直前の兄弟要素がない
場合，生成する子要素の x 座標は親要素を基準とした 0 を指定し，幅は親要素の幅と同じ幅として空間内にオブジェクトを生成する」といったように，特定の class 属性値の有

図 3

Unity 上での VR 向け Web ブラウザでの表示例

無に基づく条件分岐の処理を施した．
Bootstrap には上記 class 属性値の他にも，button 要素や ul,li 要素といった様々な要素の装飾を目的とした class 属性値も多数用意されているが，先述のレイアウトに関するclass 属性値を優先的に実装することで，スマートフォンからタブレット，PC，VR 空間に至るまで，ある程度同等のWeb コンテンツ表現が可能になるよう，基本的なレスポンシブデザインの実現を試みた．

4. おわりに
本稿では VR 空間における Web コンテンツ提示方法の一手段として，Web コンテンツ開発時に用いられる UI フレームワークとして最も普及している Bootstrap で用いられている HTML 要素の class 属性値指定によるグリッドレイアウト手法を援用し，Bootstrap で記述された Web コンテン
ツを VR 空間内に立体的に表示する手法を取り入れた Web
ブラウザアプリケーションを試作した．

© 2024 Information Processing Society of Japan367

情報処理学会 インタラクション 2024
IPSJ Interaction 2024

1B-41
2024/2/28

今後は，CSS 上で指定された各種プロパティとの連携やアンカーリンク機能の実装などを進めていくことで，zindex プロパティと VR 空間内の z 座標を連動させた Web
コンテンツの立体的な表現や，VR 空間内における複数のWeb ページ表現が可能となり，レスポンシブデザインの考え方を維持しつつ，VR 空間全体を活用した Web コンテンツ表現が可能になると思われる．
今後は実験を通し，各要素の配置方法や Web コンテンツの特性を踏まえた最適なレイアウト手法を実現するために，機能改善をすすめる．
謝辞

本研究は JSPS 科研費 JP21K12573 の助成を受けたものです．

参考文献
[1]

[2]

[3]

[4]

[5]

[6]

[7]

“UI frameworks market share, websites and contacts Wappalyzer”. https://www.wappalyzer.com/technologies/uiframeworks/, (参照 2023-12-22).
吉川遼, 横山徹, 八嶋有司, 彦坂和里, 既存の Web デザインを VR 空間に転用するアプリケーションデザインの提案，既存の Web コンテンツを立体的に表現する VR 向け Web ブラ
ウザアプリケーションの開発. 第 27 回 一般社団法人情報処理学会シンポジウム インタラクション 2023, p. 542-545.
吉川遼, 横山徹, 八嶋有司, 彦坂和里, 秋庭史典, VR 空間における Web コンテンツの立体的提示が内容理解に与える影響の分析. 日本教育工学会 2023 年秋季全国大会講演論文集.
2023, p. 75-76.
Lu, Y., Hu, Y., Shen, X., and Chen, Z., An Immersive Layout
Framework for Web Design in Virtual Reality. Extended Abstractsof the 2023 CHI Conference on Human Factors in Computing
Systems. 2023, p. 1-7.
Toyama, S. et al.. VRowser: a virtual reality parallel web browser.
In International Conference on Virtual, Augmented and MixedReality, Springer, Cham. 2018, p. 230-244.
Egawa, R., and Ijiri, T. Multi-Window Web Browser with History
Tree Visualization for Virtual Reality Environment. In The AdjunctPublication of the 34th Annual ACM Symposium on User Interface
Software and Technology. 2021, p. 32-34.
“Grid system · Bootstrap v5.3”.
https://getbootstrap.com/docs/5.3/layout/grid/, (参照 2023-12-22).

© 2024 Information Processing Society of Japan368