ブラウザが違うと何が変わるか：同じゲームを3つのブラウザで比べる手順

比べる前に決める三つのこと

最初に、何を固定し、何を変えるかを決めます。変えるのはブラウザだけです。たとえばChrome、Safari、Firefoxのように、普段使うものから3つ選びます。1つしか入っていない場合は、端末にあるものだけで2つでも構いません。

固定するものは次のとおりです。

• 同じ端末、同じOS、同じ画面で行います。
• ウィンドウの大きさとブラウザの拡大率を、3つとも揃えます。拡大率は100%に戻します。
• 拡張機能をオフにするか、拡張機能が入っていない新しいプロファイルやプライベートウィンドウを使います。
• サイトの表示言語、ライト／ダークの設定、「動きを抑える」設定を揃えます。

比べる作品は、軸ごとに向き不向きがあります。13の公式作品はすべて独立したHTMLで、外部通信なしで動くことが確認されています。読み込み元や通信状況の違いが結果に混ざりにくい構成だと読み取れます。ブラウザ差を見るには好都合です。作品は次のように選びます。

• 描画、向いている作品：潮目のオセロ、プリズムの道、小さな軌道、見るところ：盤の線、石の輪郭、光の線、点線の予測軌道
• 音、向いている作品：雨音のピアノ、WAVE / WAVE、こだまの森、見るところ：最初の一音、余韻、ループの切れ目
• 入力、向いている作品：潮目のオセロ、紙ひこうき郵便、余白の庭、見るところ：矢印キーとEnter、ドラッグ、Z／Yキー

なお、アップロードされたゲームは、sandbox付きのiframeの中で、メインサイトとは別のオリジンから配信されて動きます。これは安全のための仕組みです。ただし、ゲームがキーボードやタッチ入力を受け取る場所もこのiframeの中になります。クリックしてゲームにフォーカスが移ってからキーを押すと、条件が揃います。この点も3つのブラウザで同じにしてください。

描画：盤と光の線を同じ大きさで並べる

描画の比較は、見た目を並べて眺めるだけでは印象に流されます。同じ場面を3つのブラウザで作り、同じ範囲を切り取って並べます。

手順は次のとおりです。

1. 「潮目のオセロ」をひとり対局で開き、最初の局面（初期配置）のまま、返る石のプレビューが出る状態を作ります。盤面の石の位置を指定しなくても、初期配置は3つのブラウザで必ず同じです。
2. 3つのブラウザで、ウィンドウを同じ大きさにします。画面のスクリーンショットを撮ります。カバー画像は生成したアートワークであり、ゲーム画面ではありません。比較に使うのは、必ずプレイ画面の撮影です。
3. 「プリズムの道」では、最初のステージで鏡を／と＼に切り替えた状態を作り、光の線の太さと端の様子を撮ります。
4. 「小さな軌道」では、全軌道予測（点線）が出ている状態と、予測を消した状態の両方を撮ります。点線の間隔や線のなめらかさが気になる場合は、画像を拡大して見ます。
5. 各作品について、プレイ画面を拡大して再度撮ります。確認済みの仕様では、プレイ画面の拡大で進行は保たれます。拡大後も線のにじみや文字の崩れが出ないかを見ます。

見る項目を決めて、チェックの形にします。たとえば次のとおりです。

• 盤の線や石の輪郭が、にじんだりぎざついたりしていないか。
• 文字の字形や太さ、行の間隔に差がないか。作品ごとにタイトルの文字組みが異なります（縦組みの明朝、手描き文字、郵便ラベルなど）。端末に入っている書体の違いは、ここに出やすい箇所です。
• 画面の端で、要素が切れていないか。
• 「動きを抑える」設定にしたとき、アニメーションの変わり方が3つで揃っているか。

切り取りは、1枚を3分割して見比べるのではなく、同じ部分を同じ倍率で縦に並べます。差が見つかったら、次の章で扱う「同じブラウザを2回測る」で、偶然ではないかを確かめます。

音：最初の一音と余韻を聞き比べる

音は、ブラウザごとの方針が出やすい領域です。一般に、ブラウザは利用者の操作がないままページが音を出すことを制限します。方針の細部は、ブラウザやバージョン、設定によって異なる場合があります。

そのため、最初に確かめるのは「どの操作のあとに初めて音が出るか」です。「雨音のピアノ」を開き、何も操作しない状態から、鍵盤を一度クリックする、またはキーボードのAキーを押すところまでを、3つのブラウザで同じ順番で行います。確かめる点は次のとおりです。

• 最初の一音は出ましたか。出なかった場合、もう一度押すと出ますか。
• 余韻の切り替え（ありとなし）で、音の消え方が変わりますか。
• フェルトとガラスの2音色で、聞こえ方の差が3つのブラウザで同じ傾向ですか。

音の遅れを数字で比べたいときは、次の最小のHTMLを自分のテキストエディタで保存し、それぞれのブラウザで開きます。保存先やファイル名は自由です。ゲームそのものとは別のページであり、ブラウザの音まわりの条件を見るためのものです。

<!doctype html>
<meta charset="utf-8">
<title>音の環境チェック</title>
<button id="b">音を1回鳴らす</button>
<pre id="o"></pre>
<script>
const o = document.getElementById("o");
document.getElementById("b").onclick = () => {
  const t0 = performance.now();
  const ctx = new (window.AudioContext || window.webkitAudioContext)();
  const osc = ctx.createOscillator();
  const g = ctx.createGain();
  g.gain.value = 0.1;
  osc.connect(g).connect(ctx.destination);
  osc.start();
  osc.stop(ctx.currentTime + 0.2);
  o.textContent = [
    "state: " + ctx.state,
    "sampleRate: " + ctx.sampleRate,
    "baseLatency: " + ctx.baseLatency,
    "outputLatency: " + ctx.outputLatency,
    "作成にかかった時間(ms): " + (performance.now() - t0).toFixed(1),
    "UA: " + navigator.userAgent
  ].join("\n");
};
</script>

表示される値は、ブラウザが報告する数値です。耳に届くまでの実際の遅れそのものではありません。項目によっては値が表示されず「undefined」になる場合があります。その場合も、記録の一つとして書き留めてください。

実際の体感の差は、画面録画で補います。スマートフォンなどで、キーを押す手元と音を同じ動画に撮り、押した瞬間と音が聞こえた瞬間の間隔をコマ送りで見ます。この方法は粗いですが、3つのブラウザで同じ撮り方をすれば、相対的な比較にはなります。

「こだまの森」は音なしでも遊べると確認されています。音がうまく出ないブラウザがあった場合でも、音なしで進められるため、遊ぶこと自体は止まりません。音の有無で進行がどう変わるかも確かめる価値があります。

入力：キー・ドラッグ・拡大を確かめる

入力の比較は、同じ操作を同じ回数行い、反応を記録します。

キーボードの確認には、次のコードが使えます。キーを押すたびに、押したキーの名前、物理キーの位置、押しっぱなしによる連続入力かどうか、日本語入力の変換中かどうかを表示します。

<!doctype html>
<meta charset="utf-8">
<title>キー入力チェック</title>
<p>このページをクリックしてから、キーを押してください。</p>
<pre id="o"></pre>
<script>
const log = [];
addEventListener("keydown", e => {
  log.unshift([e.key, e.code, "repeat=" + e.repeat,
    "composing=" + e.isComposing].join("  "));
  document.getElementById("o").textContent = log.slice(0, 12).join("\n");
});
</script>

次の操作を、3つのブラウザで同じ手順で行います。

1. 日本語入力をオフにした状態で、矢印キーを1回押す、押しっぱなしにする、を行います。表示で、連続入力が始まるまでの間と、その後の間隔を見ます。
2. 日本語入力をオンにした状態で同じことを行い、変換中の判定がどうなるかを見ます。「潮目のオセロ」は矢印キーとEnterで操作できます。日本語入力がオンのままEnterを押したときの挙動も、実際のゲームで確かめます。
3. 「雨音のピアノ」のA W S E D F T G Y H U Jと、Z／Xの音域切り替えを、押しっぱなしを含めて試します。
4. 「余白の庭」のZ／Y（戻す／やり直す）を試し、ブラウザ自身のショートカット（たとえばCtrlやCommandを併用した操作）と衝突しないかを見ます。

ポインタ操作は、「紙ひこうき郵便」で比べます。左右キー、ドラッグ、矢印ボタンの3通りで操縦できると確認されています。ドラッグしている間にページ全体がスクロールしてしまわないか、ドラッグを画面の外まで動かして離したときに操作が引っかからないか、をそれぞれ確かめます。タッチ画面の端末で行う場合は、指で操作したときの追従も同じ観点で見ます。

記録して読む：差の原因を切り分ける

記録は、1項目につき1行、同じ条件で3回ずつ取ります。次のような表を作ると整理できます。

• 最初の一音が出た操作、ブラウザA：、ブラウザB：、ブラウザC：、同じブラウザでの再測定のぶれ：
• 長押しの連続入力の始まり（体感・表示）、ブラウザA：、ブラウザB：、ブラウザC：、同じブラウザでの再測定のぶれ：
• 線のにじみ（なし／少し／目立つ）、ブラウザA：、ブラウザB：、ブラウザC：、同じブラウザでの再測定のぶれ：
• ドラッグ時のスクロール（起きた／起きない）、ブラウザA：、ブラウザB：、ブラウザC：、同じブラウザでの再測定のぶれ：

読み方の基準は次のとおりです。

• 同じブラウザを2回測った結果のぶれより小さい差は、ブラウザの差と呼びません。
• 3つのうち1つだけが違う場合は、そのブラウザの設定や拡張機能、バージョンを先に疑います。
• 3つとも違う場合は、ブラウザではなく、OSや画面のスケーリング、音の出力先（スピーカーかイヤホンか）を疑います。
• 数字の差より、「操作できなくなる」「音が出ない」といった止まる種類の差を優先して見ます。遊ぶことに直接響くからです。

起こりやすい誤りもあります。拡張機能の広告ブロックや読み上げ機能が、ゲームの表示や入力に影響する場合があります。ウィンドウの大きさやブラウザの拡大率を揃え忘れると、描画の比較が成り立ちません。ブラウザ間で保存を共有していると考えるのも誤りです。ゲストの履歴や進行は端末内に保存され、ログイン後のアカウントへ自動では混ざらないと確認されています。ゲストで別々のブラウザを使うと、別々の進行になる点に注意してください。録音や記録が画面を開いている間だけ残る10作品は、ブラウザを閉じた時点で消えます。保存がある「余白の庭」「WAVE / WAVE」「かたちのあいだ」は、同じブラウザで続きを開くのが前提で、別のブラウザにどう引き継がれるかは作品を開いて確かめてください。

作る人は、この比較をそのまま公開前の確認に使えます。投稿は入力、表示の確認、公開の3段階です。表示の確認のあと、手元で3つのブラウザを通すと、見落としが減ります。サービスワーカーやSharedArrayBufferを使うマルチスレッドは対象外とされているので、対応状況がブラウザごとに異なる機能に頼らない作り方になりやすいと読み取れます。実際にどう動くかは、投稿前に確かめてください。

次の行動

まず「潮目のオセロ」と「雨音のピアノ」を、普段のブラウザともう一つのブラウザで開き、最初の局面の描画と最初の一音だけを比べてみてください。差が見つかったら、同じブラウザで再測定し、ぶれの範囲に入るかを見ます。慣れたら、描画、音、入力を一つずつ増やしてください。