Goth ~仮想空間で操作するブラウザ~

メンバー

チーム香川高専_EC
@kanaji2002

作品ページ

開発に至った経緯

この作品を思いついたきっかけは，「今あるブラウザ，使いにくくないか？」という疑問からであった．普段，私はEdgeを使っているのだが，3点，使いにくいと感じる所があった．

お気に入りが多く，どこになにがあるのかを整理できない．もっと直感的に保存場所を把握したい．
すぐにタブが増えることで，タブの判別が困難になってしまう．
調べたいテーマがあった時に，同じテーマをYouTube，Qiitaの検索バーに入力することが手間であり，なにより，タブが増える原因となってしまう．

そこでそれらを解決できるものを作ろうと考え，22才の内に実行した．

技術的こだわり

仮想空間へのリンクの設置とクリック

3D空間上にリンクを配置したことが一番の技術的こだわりであり，最も苦労した点である．リンクを空間内に配置することももちろん難しかったのだが，それに加え，作成したショートカットリンクを，PythonのGUI作成ライブラリであるPySide6ごしに押すことがとても難しく，何日も悩んだ．

削除機能へのこだわり（没になった案）

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

快適なブラウザにするためのこだわり

たくさんのルームの設置：一番はこれ．自分自身，環境を変えて勉強をすることがすきなので，目の前の仮想空間，それもブラウザを気軽に変更できる点はかなりこだわった．
cacheの削除：通常のブラウザではcacheの削除ボタンがトップページに出ることはない．Gothでは，ブラウザに追跡されない安心できる機能を組み込んだ．
BGMの再生：私は，なにかしらBGMがないと作業ができない．BGMを流すとなると，YouTubeを開いて...と手間もかかるし，そのままYouTubeを見てしまうこともある．そこでBGMもブラウザに組み込むことにした．

使い方

ここにあるフォルダをすべてダウンロードしてください．実行ファイルがあります．使い方も書いています． https://github.com/kanaji2002/Goth_deploy

最後に開発者から．

昔から，ブラウザを作ってみたいという気持ちが漠然とありました．現在は1人で開発を行っていますが，予選を通過した際はもう少しメンバーを増やして改良したいですね．微修正する所がいくつかあるのと，没入感をもっと上げることのできるブラウザにしたいです．

大きな流れ

PythonのGUI作成ライブラリであるPySide6で作成した．トップページに読み込むファイルは，私がGithubにアップロードしてるtop_page.htmlファイルである．このtop_page.htmlは，同じGitHub上から3Dモデルをローカルに呼び出し，ユーザの環境に表示させている．

Pythonファイルでの処理

PySide6のQMainWindowを呼び出し，デスクトップアプリの型枠を作っている．その中に，タブ機能やお気に入り機能を追加している．

QWebChannelを使用してHTMLファイル内にかかれたJavaScriptのコードとPython間をつなぎ，データのやり取りを行っている．今回は，Pythonファイル越しにショートカットリンクが押されると，そのリンクに含まれるHTML情報（例えばYouTubeのページ）をPython側に返して画面に表示させている．

HTMLファイルでの処理

Three.jsを用いて，3Dモデルを読み込んだ後，ショートカットを追加する処理が行われると，Three.jsのクラスであるCSS3DObjectを用いて，そのショートカットリンクを3D空間内に配置している． CSS3DObjectは，HTML要素を3D空間内に表示するために使用されるもので，3次元の位置座標を指定して配置することができる．

細かい点

PySide6(ライブラリ)とは

もともとC++で書かれていたGUI作成ツールであるQtフレームワークの機能をPythonで利用できるようにしたツールキット．PythonがQtをのライブラリを呼び出している．

Three.js(ライブラリ)とは

JavaScriptのライブラリで，WebGL(Webに3DVGを高速に描画する技術)を簡単に扱える．モデルの読み込み物理ベースのレンダリング，さまざまなカメラ視点やライトの提供がある．

3D空間

Blender で作成し，glb形式にて出力した．一部の3DモデルやアセットはCGTraderより購入し配置した．

音楽の再生

Pyside6のQMediaPlayerを使用し，音楽の再生，停止を行い，QAudioOutputで出力を行った．

タブの一括削除で使用している類似度を求めるアルゴリズム

レーベンシュタイン距離をもとにタイトルの類似度を計測した．レーベンシュタイン距離とは，1文字の挿入・削除・置換によって，一方の文字列をもう一方の文字列に変形するのに必要な手順の最小回数のことを示す．このレーベンシュタイン距離の計測自体，Pythonのdifflibライブラリに含まれているSequenceMatcherクラスより呼び出したため，記述量は少なくすんだ． ctrl + spaceキーが押されると，現在のページと他のページとの類似度を計算し，80%を超えるものは削除する用のリストに格納していく．最後に，その削除するリストに格納されているタブIDをもつタブをまとめて削除する．