ズームと拡大表示の違い：ブラウザの拡大とゲームの拡大

二つの拡大は「誰が」大きくしているか

ブラウザの拡大は、ブラウザがページ全体に対して行います。ページの寸法の単位であるCSSピクセルと、画面の実際のピクセルとの比率を変える仕組みです。ページ上の文字、ボタン、周囲のメニュー、埋め込まれたゲームの枠が、まとめて同じ倍率で大きくなります。

ゲーム側の拡大は、ゲームやプレイ画面が自分の表示領域を広げる操作です。アソバースの13の公式作品について、確認済みの事項は「言語変更とプレイ画面の拡大で進行を保つ」という点です。拡大の操作がどの画面のどの部分に出るか、倍率が何段階あるかは、確認済み事項にありません。この部分は作品を開いて確かめてください。

アソバースでは、ゲームはsandbox付きのiframe（ページの中に別のページをはめ込む仕組み）で実行されます。アップロードされたコードは、メインサイトとは別のオリジンから配信されます。ここから読み取れるのは、ゲームがサイトの中の「枠」として動くという構造です。ブラウザの拡大は枠ごと大きくします。ゲーム側の拡大は、枠の中の見え方を変える操作になります。

ブラウザの拡大で起こりうること

ブラウザの拡大では、見た目が大きくなる代わりに、一度に見える範囲が狭くなります。ページの幅をCSSピクセルで測ると、倍率が上がるほど小さくなります。おおまかには、画面の幅を倍率で割った値が、ページから見える幅です。

この性質のため、拡大するとページが「狭い画面向けの配置」に切り替わることがあります。ページの作り方次第なので、必ず切り替わるわけではありません。公式作品でこの観点に関係するのは「WAVE / WAVE」です。狭い画面ではステップが横スクロールになると確認されています。ブラウザの拡大で、この横スクロールの表示になるかどうかは、作品を開いて確かめる部分です。

もう一つの観点は、描画の鮮明さです。ゲームの絵をcanvas（ページ上の描画領域）で描いている場合、拡大のたびに描き直す作りなら鮮明なままです。内部の画素数が固定の作りなら、拡大でぼやけることがあります。どちらの作りかは外から断定できません。拡大して実際に見て、輪郭で判断します。

ゲーム側の拡大から読み取れること

確認済みなのは、拡大しても進行が保たれる点です。これは言語変更と並んで挙げられています。設計から読み取れるのは、表示サイズの変更が、スコア、手数、盤面といったゲームの状態を作り直す操作として扱われていないことです。拡大のたびに最初からになると、拡大を試すこと自体が負担になります。ここは小さくても大事な配慮だと読めます。

進行が保たれる範囲には、限りがあります。保存があるのは「余白の庭」「WAVE / WAVE」「かたちのあいだ」の3作品だけです。他の10作品の記録や録音は、画面を開いている間だけ残ります。拡大の操作は進行を保つと確認されていますが、再読み込みやタブを閉じた場合は別の話です。この10作品では、記録が消える可能性があります。

時間が絡む作品では、確かめたい点がもう一つあります。「時計じかけの台所」の本番は、1皿28秒、配膳6秒、ミス3回までです。「紙ひこうき郵便」は、ルートごとに36〜44秒の制限があります。拡大の操作中に時間が進むのか止まるのかは、確認済み事項にありません。一時停止がある作品（こだまの森、小さな軌道、かたちのあいだなど）もありますが、拡大と一時停止の関係は作品で確かめます。

自分で確かめる実験の設計

問いは「ブラウザの拡大とゲーム側の拡大で、枠の大きさ、進行、入力の位置は、それぞれどう変わるか」です。

準備するのは、デスクトップのブラウザ、メモ用の表、数字で進行が確認できる作品です。作品の候補は次のとおりです。

• 「時計じかけの台所」の見習い（時間制限なしなので、落ち着いて記録できます）
• 「かたちのあいだ」（手数が数字で分かり、保存もあります）
• 「紙ひこうき郵便」（ドラッグでの操縦があるため、入力の位置を確かめられます）

手順は次のとおりです。

1. ブラウザの倍率を100%に戻し、基準の状態を作ります。作品を開き、少し進めた場面で止めます。
2. 基準の記録をとります。ゲームの枠の幅と高さ（スクリーンショットのピクセル数でよい）、手数やスコア、周囲の文字の大きさを書きます。
3. ブラウザの拡大を150%、200%の順に上げ、各倍率で同じ項目を記録します。倍率ごとに3回ずつ測ります。
4. ブラウザを100%に戻してから、ゲーム側の拡大を使い、同じ項目を記録します。段階があれば、段階ごとに記録します。
5. 入力の位置を確かめます。ドラッグや盤面のクリックで狙った場所と反応した場所が一致するかを、各状態で3回見ます。

記録の単位は次の表のとおりです。

• 周囲の文字、見るもの：メニューや見出しの大きさ、記録の仕方：拡大前後で変わったかを○×で記録します
• 枠の大きさ、見るもの：ゲームの表示領域、記録の仕方：幅と高さを、ピクセル数で記録します
• 進行、見るもの：手数、スコア、盤面、記録の仕方：拡大前後で値が一致したかを記録します
• 入力の位置、見るもの：クリックやドラッグの反応、記録の仕方：狙った場所とずれたかを3回ずつ記録します
• 配置の切り替え、見るもの：横スクロールや並びの変化、記録の仕方：起きた倍率を記録します

結果の読み方は、次のように判断します。

• ブラウザの拡大で周囲の文字も大きくなり、ゲーム側の拡大で周囲が変わらなければ、「全体」と「枠の中」という二つの層の違いが、手元の画面で確かめられたことになります。
• 拡大の前後で進行の値が変わらなければ、確認済みの「進行を保つ」が手元でも成り立っています。値が変わった場合は、手順の中で再読み込みをしていないか、まず疑います。
• 入力がずれる倍率があれば、その倍率ではその作品の操作が不安定になる可能性があります。ただし、ずれの原因はブラウザ、作品、マウスの設定のどれにもありえます。別の作品でも同じ倍率で試し、作品固有の問題かどうかを切り分けます。

起こりやすい誤りは次のとおりです。

• 倍率を戻し忘れ、別の実験の結果を混ぜてしまうこと。
• OSの表示倍率（画面設定の拡大率）とブラウザの拡大を区別しないこと。
• 記録が画面を開いている間だけの10作品で、途中で再読み込みして記録を失うこと。
• 保存のある作品と、ない作品の違いを無視して比較すること。

数値を見るための最小のHTML

ブラウザの拡大でどの数値が動くかを見るために、次のHTMLを手元で保存し、ブラウザで開いてみてください。外部ライブラリは使いません。

<!doctype html>
<meta charset="utf-8">
<title>拡大の観測</title>
<canvas id="c" width="300" height="100"
  style="border:1px solid"></canvas>
<pre id="o"></pre>
<script>
const o = document.getElementById('o');
const c = document.getElementById('c');
function show() {
  const r = c.getBoundingClientRect();
  o.textContent =
    'innerWidth: ' + innerWidth + '\n' +
    'devicePixelRatio: ' + devicePixelRatio + '\n' +
    'canvasの属性の幅: ' + c.width + '\n' +
    '画面上の幅(CSS px): ' + r.width + '\n' +
    '実ピクセル幅(概算): ' +
      Math.round(r.width * devicePixelRatio);
}
addEventListener('resize', show);
show();
</script>

ブラウザの拡大を変えるたびに、5つの数値を表に写します。「動いた数値」と「動かなかった数値」を分けて見るのがコツです。ページの幅が動くのにcanvasの属性の幅が動かなければ、見た目の大きさと内部の画素数は別々に決まっていると分かります。拡大の操作で数値が更新されない場合は、ページを再読み込みしてください。

devicePixelRatio は、ブラウザの拡大だけでなく、OSの表示倍率や画面の種類でも変わります。100%の状態で1以外の値になっていても、異常ではありません。基準の値として記録します。

自分の作品を投稿する場合は、入力、表示の確認、公開の3段階のうち、表示の確認でゲーム枠の中の様子を見られます。枠の中の innerWidth がページ全体の値と違うかどうかは、画面で確かめてください。

「動きを抑える」設定との違い

拡大と混同しやすいのが、「動きを抑える」設定です。これは画面の大きさではなく、アニメーションなどの動きを減らす設定です。13の公式作品はこの設定に対応していることが確認されています。サイト全体でも対応しています。

見えにくさへの対処は、大きさの問題と動きの問題で分けて考えると整理できます。文字や盤面が小さいなら拡大、動きで目が疲れるなら動きの設定です。両方を同時に変えると、どちらが効いたのか分からなくなります。実験では、拡大の記録をとる間は動きの設定を固定してください。

次の行動

まず「時計じかけの台所」の見習いか「かたちのあいだ」を開き、上の表の項目を100%の状態で記録してください。次に、ブラウザの拡大とゲーム側の拡大を一つずつ試し、動いた項目に印を付けます。余裕があれば観測用のHTMLも開き、どの数値が動くかを並べて見てください。

参考資料

• 各ブラウザ公式のヘルプ（ページのズーム機能）
• MDN Web Docs「Window.devicePixelRatio」