投稿する
マガジン
著者：アソバース編集部公開：更新：約9分で読めます

拡大表示で進行を保つために何をしているか：iframeを再読み込みさせない設計と、その制約

遊びを見つける

執筆にClaudeを使用しています。

大きな荷物で詰まった細い道を測り、軽い部品へ置き換えて流れを整える模型。
記事のテーマをもとに制作したAI生成の写真風イメージ。

「こだまの森」の8ラウンドコースで、5ラウンド目まで進んだ場面を考えてみます。聴き直しを1回使い、間違いも1回あって、点数は少し減っています。ここで音がよく聞こえるようにプレイ画面を拡大したら、1ラウンド目に戻ってしまった。そんなことが起きれば、遊ぶ人は二度と拡大ボタンに触れなくなります。 アソバースの公式作品13本は、言語の変更とプレイ画面の拡大では進行を保つように作られています。この記事では「拡大しても進行が消えないとは、具体的にどういうことか」を、確認済みの事実と、ブラウザーの一般的な性質から切り分けて考えます。ゲームを入れる枠（iframe）を再読み込みさせない、という発想が核です。 ただし、枠をどう扱って再読み込みを避けているのか、実装の細部は公開されている案内にありません。そこで、確認済みの事実、そこから読み取れること、読者が自分で確かめる手順の3つを分けて進めます。

この記事の目次
  1. 確認済みなのは「進行を保つ」ことと、その前提条件
  2. 設計から読み取れること：親ページは中身を触れない
  3. iframeが再読み込みされる典型的な条件
  4. 公式作品で確かめる手順
  5. 設計の制約：保たれるのは「開いている間」だけ
  6. 次の行動
  7. 参考資料

確認済みなのは「進行を保つ」ことと、その前提条件

確認できているのは、次の事実です。

  • 13作品はいずれも独立したHTMLで、外部通信なしに動きます。
  • サイトの日本語／英語設定に合わせて表示が切り替わり、言語変更とプレイ画面の拡大で進行が保たれます。
  • ゲームはsandbox付きのiframeで実行され、アップロードされたコードはメインサイトと別のオリジンから配信されます。
  • 保存があるのは「余白の庭」「WAVE / WAVE」「かたちのあいだ」の3作品だけです。他の10作品の記録や録音は、画面を開いている間だけ残ります。

最後の点が、この設計を重くしています。保存のない10作品では、再読み込みは「記録の消滅」を意味するからです。「こだまの森」の最高記録、「雨音のピアノ」の録音、「小さな軌道」の最速記録は、いずれも画面を開いている間だけの記録です。拡大のたびにiframeが読み込み直されれば、遊んでいる最中の状態も、積み上げた記録もまとめて失われます。

設計から読み取れること：親ページは中身を触れない

ゲームは別オリジンのsandbox付きiframeで動きます。ブラウザーの一般的な仕組みでは、別オリジンの中身を親ページが直接読み書きすることはできません。つまり、拡大の前にゲームの状態を親ページが読み出し、読み込み直したあとで復元する、という方法は取りにくい構成です。

この前提から読み取れるのは、進行を保つ最も素直な手段が「ゲームを入れた枠を作り直さない」ことだという点です。進行を保つとは、状態を保存して復元することではなく、そもそもゲームを再起動させないことだと考えるのが自然です。ただし、これは構成からの推測です。他の手段を併用していないかどうかは、公開されている案内では確認できません。

iframeが再読み込みされる典型的な条件

一般的なブラウザーの挙動として、iframeは次のような場面で読み込み直されることが知られています。

  • 枠のsrc（読み込み先）を書き換えたとき
  • 枠をHTMLの別の入れ物へ移動したとき（取り外して付け直す扱いになるため）
  • 枠を含む部分を作り直したとき（表示の切り替えで、枠ごと生成し直す場合など）

逆に、同じ枠のまま大きさだけを変える場合は、中のゲームは動き続けるのが一般的です。拡大表示を「別の入れ物に枠を移す」方式で作ると進行が消え、「同じ枠の大きさを変える」方式なら進行が残る、という違いになります。

この違いは、次のごく小さなHTMLで確かめられます。ボタンAは同じ枠の大きさを変え、ボタンBは枠を別の入れ物へ移します。枠の中の「+1」ボタンで数字を増やしてから、それぞれを押してみてください。

html
<!doctype html>
<meta charset="utf-8">
<style>
  #box { width: 240px; height: 120px; border: 1px solid #888; }
  #box.big { width: 480px; height: 240px; }
  iframe { width: 100%; height: 100%; border: 0; }
</style>
<button id="a">A: 大きさだけ変える</button>
<button id="b">B: 別の入れ物へ移す</button>
<div id="box"><iframe id="f" sandbox="allow-scripts"
  srcdoc="<p id=n>0</p><button onclick='n.textContent=++c'>+1</button><script>var c=0</script>"></iframe></div>
<div id="other"></div>
<script>
  a.onclick = () => box.classList.toggle('big');
  b.onclick = () => other.appendChild(f);
</script>

数字が残るか、0に戻るかは、お使いのブラウザーで実際に見て判断してください。想定どおりなら、Aでは数字が残り、Bでは0に戻るはずです。ただし結果はブラウザーの種類や版で変わる可能性があります。

公式作品で確かめる手順

実際の公式作品で確かめる手順を示します。ここでは結果は書かず、判断のしかただけを示します。

準備

保存のない10作品から選びます。「余白の庭」「WAVE / WAVE」「かたちのあいだ」は保存があり、再読み込みされても復元される可能性があるため、「保たれたのか」「復元されたのか」を区別できません。

手順

  1. 進行がはっきり数字に出る作品を選びます。例は「こだまの森」のラウンドと点数、「月夜の配達」の残り燃料と手持ちの小包です。
  2. 少し進めて、状態を書き留めます（ラウンド、点数、手数、残り燃料など）。
  3. プレイ画面を拡大します。
  4. 状態を見比べます。
  5. 同じ作品で、言語の切り替えも同じ手順で行います。
  6. 1つの操作につき3回繰り返し、毎回、記録の列を分けます。

記録は次のような表にします。

  • こだまの森、操作：拡大、操作前の状態：例：5ラウンド目・点数、操作後の状態：同じ項目、一致：はい／いいえ

読み方

3回とも一致すれば、その作品では再読み込みが起きていない可能性が高いと判断できます。1回でも一致しなければ、その条件（作品、操作、直前に何をしたか）を書き添えて、案内ページで報告先を確認してください。

起こりやすい誤り

  • 拡大ボタンと、ブラウザーのウィンドウ自体の大きさ変更を混同すること。別の操作なので、記録の列を分けます。
  • ブラウザーの更新ボタンを押してしまうこと。これは作品の問題ではなく、画面を開き直したことになり、保存のない10作品の記録は残りません。
  • 時間制限のある作品での判断。「紙ひこうき郵便」や「時計じかけの台所」の本番は時間が進むため、拡大中に時間がどう扱われるかは、作品を開いて確かめます。

設計の制約：保たれるのは「開いている間」だけ

進行を保つ設計には、はっきりした限界があります。

第一に、保たれるのは画面を開いている間だけです。タブを閉じる、ページを更新する、別のページへ移るといった操作は、拡大とは別の出来事です。保存のない10作品では、そこで記録が消えます。

第二に、作る人にとっての注意があります。アップロード作品の中のlocalStorage／sessionStorageは、一時メモリーの互換処理として扱われます。長く残したい進行は、SDKのクラウドセーブ（作品ごとにJSONで128KiBまで）を使うことが前提です。アップロードした作品にはSDKが自動で追加され、URL投稿の作品は作者がSDKを読み込むと使えます。

第三に、作品側の作り方も関わります。拡大で枠の大きさが変わると、ゲームの中ではウィンドウの大きさ変更と同じ種類のイベント（resize）が起きるのが一般的です。このイベントを受けて、ゲームを最初から初期化してしまう作りだと、枠を作り直さなくても進行が消えます。大きさが変わったら、描画の大きさだけを計算し直し、状態には手を付けないのが基本です。

次の行動

保存のない作品を1つ選び、拡大と言語切り替えを3回ずつ行って、前後の状態を表に残してみてください。作る人は、自作ゲームの大きさ変更の処理が状態を初期化していないかを、上の最小コードの枠の中に自作ゲームを置いて確かめるところから始められます。

参考資料

  • MDN Web Docs：iframe要素、Window: resizeイベント
マガジン一覧に戻る