1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【仮想空間で操作する新しいブラウザ】 を作ってコンテストに出た時の話。

Last updated at Posted at 2024-10-30

はじめに

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

現在,私は22歳(情報系の大学4年生)で出場できる最後の年となりました.

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

過去作品

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

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

開発したもの

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

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

本ブラウザの特徴

  • 仮想的な3D空間内にリンクを3次元的に配置できる
  • 検索エンジンの切り替え(YoutubeやQiita,X)
  • 類似タブの一括削除(削除条件:他のタブ名との類似度が80%以上)
  • 3D空間が6つあり,切り替えることができる
  • 3D空間内で音楽をかけることができる
  • 多数のショートカットキー(タブの追加,移動,削除等)
  • キャッシュ(HHTPキャッシュ,Cokkie,訪問済みリンク)の一括削除

3D空間にリンクを配置した図
image.png

設置したいURL,名前,設置場所(ベッド,床,枕元の3択)を指定することでリンクを空間内に設置することができます.

こだわった点

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

一番気に入っている部屋

こちらのピンクの部屋が個人的には一番すきです.
image.png

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

image.png

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

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

image.png

他の部屋

こんな部屋もあります.

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

 
image.png

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

類似したタブの一括削除

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

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

システム構成

image.png

本ブラウザは実行ファイルで,アプリケーションのフレーム自体は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週間と短いこともあり,細かいところまで作り込めなかった点が一番の敗因だと考えています(言い訳です).

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

フォロー,いいね,お待ちしております.あとブックマークも!


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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?