今月のGithub Copilotのプレミアム要求を半分をつぎ込んで作りました！
はじめに
最近、XREAL Oneシリーズ や VITURE Lumaシリーズ といった、いわゆる「ARグラス」あるいは「スマートグラス」界隈が賑やかですね。弊ブログでもこの手のガジェット、個人的に「電気メガネ」と呼んで愛用しているのですが、新機種が出るたびに悩ましいのが「結局、画面はどれくらい大きいの？」という点です。
メーカーの公式サイトを見ると「4m先に130インチ相当！」「6m先に200インチ相当！」といった景気の良い数字が並んでいますが、基準となる距離がバラバラで単純比較ができません。
「それなら、同じ距離で並べて比較できるツールを作ってしまえばいいじゃない」
ということで、ブラウザ上で動作するシミュレーターを作ってみました。
電気メガネ(ARグラス)の特徴
この手のデバイスの最大の特徴は、物理的なディスプレイパネルを見るのではなく、レンズ越しの虚像を見る点にあります。
そのため、テレビやモニターのように「50インチ」という物理サイズが存在しません。あるのは「視野角（FoV: Field of View）」だけです。
- 視野角が広い ＝ 画面が大きく見える
- 視野角が狭い ＝ 画面が小さく見える
基本的にはこれだけなのですが、カタログスペックでは「対角FoV（度数）」で書かれていたり、「〇〇m先に〇〇インチ相当」と書かれていたりと、統一感がありません。特にアスペクト比（16:9 なのか 16:10 なのか）によっても体感サイズは変わってきます。
比較の意図
このツールを作った最大の目的は、「メーカー公称値の魔法を解いて、純粋な視野角で比較すること」です。
例えば、以下の2つのスペックがあったとします。
- 機種A: 4m先に130インチ
- 機種B: 6m先に200インチ
パッと見では機種Bの方が凄そうですが、距離を揃えて計算し直すと、実は視野角はほとんど変わらない、なんてことがよくあります。
このツールでは、仮想距離（デフォルト4m）を固定した上で、各機種のFoVと解像度から正確な矩形を描画し、「重ね合わせて」比較できるようにしました。「あ、意外とこの機種とあの機種、サイズ変わらないんだな」とか「16:10だと縦にこれだけ広いのか」といったことが視覚的に分かります。
計算根拠を交えた使い方の説明
ツールの使い方はシンプルです。プリセットから機種を選んで「追加」するだけ。
こだわりポイントとして、計算ロジックはかなり真面目に作っています。
1. 水平・垂直FoVの算出
カタログスペックの多くは「対角FoV」しか載っていません。そこで、このツールでは解像度（1920×1080など）からアスペクト比を求め、そこから逆算して水平FoVと垂直FoVを個別に算出しています。
計算式は以下の通りです（アスペクト比を \(r = \text{幅} / \text{高さ}\) とした場合）。
$$
\text{水平FoV} = 2 \times \arctan\left( \tan\left(\frac{\text{対角FoV}}{2}\right) \times \frac{r}{\sqrt{1+r^2}} \right)
$$
$$
\text{垂直FoV} = 2 \times \arctan\left( \tan\left(\frac{\text{対角FoV}}{2}\right) \times \frac{1}{\sqrt{1+r^2}} \right)
$$
2. 仮想スクリーンサイズの計算
画面上の矩形サイズおよび「〇〇インチ」という表示は、以下の計算式に基づいています。
まず、仮想距離における画面の横幅(m)を求めます。
$$
\text{横幅} = 2 \times \text{距離} \times \tan\left(\frac{\text{水平FoV}}{2}\right)
$$
次に、この横幅をインチに換算し、解像度のアスペクト比（高さ/幅）を使って対角インチを算出します。
$$
\text{対角インチ} = \frac{\text{横幅}}{0.0254} \times \sqrt{1 + \left(\frac{\text{高さ}}{\text{幅}}\right)^2}
$$
ツール上の「距離」スライダーを動かすと、この計算がリアルタイムに走り、サイズ目安（インチ数）が変動します。
主な機能
- プリセット選択: XREAL、VITURE、Rokidなどの主要機種を登録済み。
- カスタム入力: 未登録の機種や、将来出る新機種も手動入力で追加可能。
- ドラッグ移動: 比較しやすいように、画面枠やラベルを自由に配置できます。
- 9点アンカー: 「左下合わせ」「中心合わせ」など、基準点をワンクリックで切り替えられます。
- 共有機能: 比較した状態（機種の組み合わせや配置）をURLでシェアできます。
開発環境とAI活用について
技術的な裏話になりますが、このツールは React や Vue などのフレームワークは一切使わず、素の HTML / CSS / JavaScript (Vanilla JS) だけで構築しています。ビルド不要で、ファイルを置けば動くシンプル設計です。
また、開発の相棒として GitHub Copilot をフル活用しました。
特に「対角FoVとアスペクト比から水平/垂直FoVを逆算する」といった三角関数の計算ロジックや、DOM要素のドラッグ＆ドロップ制御などの面倒な実装は、ほとんど Copilot に書いてもらっています。
「仕様を日本語で伝えて、コードを提案してもらい、微調整する」というサイクルで開発したので、実質的なコーディング時間はかなり短縮できました。個人開発ツールを作るハードルが劇的に下がっているのを実感します。
機種データの追加について
このツールのプリセットデータは、GitHub上の公開リポジトリで管理しています。
もし「この機種も追加してほしい」「手持ちの機種のデータがある」という方がいらっしゃいましたら、Pull Requestを送っていただけると非常に助かります。
機種データのサンプルはこんな感じ。
{
id: "xreal-air-2",
label: "XREAL Air 2",
resolution: { width: 1920, height: 1080 },
diagonalFov: 46,
color: "#fb7185"
},おしまいに
このツールはサーバーサイドの処理を一切行わず、すべてブラウザ上の JavaScript で完結しています。登録したデータはブラウザの IndexedDB に保存されるため、プライバシー的にも安心です。
「新しい電気メガネが欲しいけど、今持ってるやつとどれくらい違うんだろう？」と迷った時に、カタログスペックの数字に惑わされず、冷静に比較するための定規として使っていただければ幸いです。
ちなみに、この記事も9割方Github CopilotのGemini 3 Pro(Preview)に書いてもらいました。
現場からは以上です。