🤓【3D空間で操作するブラウザ】 を高専生が1か月で作った話

開発したもの

まずはこちらをご覧ください．こちらが作品の紹介動画です．

仮想空間と聞いて，Dockerのような仮想環境のことを想像する方もいるかもしれませんが，本作品は3D空間の中で操作することのできるブラウザです．

本ブラウザの特徴

• 3D空間内にリンクを配置
• 検索エンジンの切り替え（YoutubeやQiita，X）
• 類似タブの一括削除（削除条件：他のタブ名との類似度が80%以上）
• 3D空間の切り替え（6部屋）
• 3D空間内で音楽をかけることができる
• キャッシュ（HHTPキャッシュ，Cokkie，訪問済みリンク）の一括削除

コンテストについて

皆さんはU-22という，プログラミングコンテストをご存知でしょうか．
このコンテストは22歳以下（正確には，チームの半数以上が22歳以下）であれば出場可能な作品提出型のプログラミングコンテストです．たくさんの賞や賞金も用意されており，毎年200~500チームが参加する大規模なコンテストです．

現在，私は22歳（情報系の大学4年生）で出場できる最後の年となりました．

このコンテストでは下記のように，毎回とんでもないものが登場します．

過去作品

• 静的型付けのプログラミング言語を作った
• OSを作った
• 開発エディタを作った
• 小学生が，簡単に数式を記述できる言語を作った
• 小学生が，グラフの形で攻略するゲームを開発した
• 立体音響を保存できる音声フォーマットの開発
• ブラウザで動作するDNCL処理系
• 写真から刺繍の図案が作成できるソフト

御覧の通り，通常のwebアプリではなかなか受賞までたどりつけません．

こだわった点

「3D空間の居心地の良さ」です．本ブラウザが第二の部屋に感じられるよう，オシャレでリアルな部屋を追究しました．

一番おしゃれな部屋

製作途中で戸惑っている構図

上の写真の右側に移っている机と椅子で尋問部屋を作ることも考えました．しかっし，居心地がの悪そうな部屋ができることは目に見えていたため，ボツになりました．

照明を変えるだけで，ガラッと雰囲気が変わります．この3DモデルはBlenderを用いて作成しました．

他の部屋

こんな部屋もあります．

こちらは，有料の3D素材を購入し，使用させていただきました．
(3D素材： https://www.cgtrader.com/product/interior/high-poly-isometric-cute-bedroom )

　

こちらの部屋も3Dモデルは有料素材を使用しました．
（素材：https://www.cgtrader.com/product/interior/1980s-low-poly-home-office-model-pack ）

類似したタブの一括削除

関連したタブを一括削除する機能において，現在公開しているGothはPythonのdifflibライブラリに含まれているSequenceMatcherクラスを使用し，タブのタイトルを文字列の，単語的な類似度として比較をしました．
しかし，文字列の類似度は単語的な類似度だけではなく，意味的な類似度もある．例えば，犬とトイプードルの類似度を考えると分かりやすいかと思います．その問題点を解決するために，意味的な類似度も削除機能に付け加えようとしました．しかし試作段階において，意味的な類似度判別までの時間が想定より長くUX性を悪くすると考え，ボツとなりました．
何かいいアイデアがあれば教えていただきたいです．

このdifflibでは，レーベンシュタイン距離という，何回文字を入れ替えれば，指定した単語や文に近づくか，という指標を用いて，単語間の類似度を求めています．

システム構成

本ブラウザは実行ファイルで，アプリケーションのフレーム自体はPythonのライブラリであるPySide6を使用して起動しています．PySide6で行っていることはお気に入りやタブの管理，読み込んだHTMLファイル等の表示です．

3D空間やそれを表示させるHTMLファイルはGitHub Pagesで公開しており，ユーザ側で起動（リロード）するたびにそれらを読み込んでいます．

理想としては，読み込んだ3Dモデルをキャッシュとしてローカルに保存し，再度読み込める状態にしておけば，より高速になると思います．

開発した経緯

僕は普段Microsoft Edgeを使用しているのですが，2点気になる点がありました．

• タブがすぐに増えるので関連したタブを一括削除したい（切実な願い）
• お気に入りのリンクを3D空間上に配置できればリンクを部屋にある物体のように認識できて面白そう（U-22用のインパクト狙い）

開発する前のアイデア

一番はじめ

最初は同居している人向けのレシピ共有ができるWebアプリを作成しようと考えていました．
しかし，U-22の作品を見た所，ただのWebアプリでは勝負できないと感じ，断念することにしました．

次のアイデア

webアプリのインパクトを超える作品として，OSを作ろうと考えました．
家にたまたまあった自作OSの本（下記の本）を片手に，OSを作ろうとしていましたが，難しすぎて早々に断念しました．ちなみにこの本はアセンブリで書かれていました．

[ 作ろうとしていたOS ]
PCを操作しながら，内部でどのような処理が行われているのかを可視化できるエンジニア用のOSを開発しようと考えていました．

最後のアイデア

OSが無理ならブラウザかぁと感じ，ブラウザに変更しました．
ブラウザを作っていく中で，その仕組み，キャッシュの種類や管理方法等を体系的にも学ぶことができました．

その他

詳細や，補足情報はこちらに書いています．ProtPediaという個人が作ったものを紹介するサイトです．こちらに記入してU-22に提出するよう指示がありました．

予選結果

残念ながら，予選は通過できませんでした．
製作期間が5週間と短いこともあり，細かいところまで作り込めなかった点が一番の敗因だと考えています（言い訳です）．

今後は，自分の作りたいものも適度に作りつつ，誰かの役に立つソフトウェアを作っていきたいと考えています！

フォロー，いいね，お待ちしております．あとブックマークも！

---

ソースコードはこちらから．