ゲームの「iframe」とは：埋め込みの仕組み

iframeが何をしているか

iframeの基本的な形は次のようになっています。

<iframe src="https://example.com/game/" width="800" height="600"></iframe>

srcに指定したURLのページが、そのまま長方形の枠の中に表示されます。親ページと子ページ（iframe内のページ）は別々のHTMLとして存在しており、お互いのスクリプトや変数には原則としてアクセスできません。この分離がセキュリティ上の重要な特性で、「サンドボックス（砂場）」と呼ばれることもあります。

ゲームの文脈では、ゲーム本体を別サーバーで動かしたまま、さまざまなサイトで遊べるようにするためにiframeが使われます。ゲームのコードを各サイトにコピーする必要がなく、元のURLさえ変えなければ埋め込み先で何もしなくてもゲームが更新されます。

埋め込みが「許可されている」かどうかの判断基準

iframeで表示しようとしても、相手側のサーバーが拒否すると表示されません。サーバーはHTTPレスポンスヘッダーのX-Frame-OptionsやContent-Security-Policyという設定で、「どのサイトからの埋め込みを許可するか」を制御できます。

判断の目安は次のとおりです。

• 自分で作ったゲームを自分のサーバーに置く場合：設定次第で自由に許可できます。多くのゲーム公開プラットフォームは投稿作品に埋め込みコードを発行しており、そのコードを使うかぎり問題なく動きます。
• 他サービスのゲームを埋め込む場合：そのサービスの利用規約と技術設定の両方を確認する必要があります。規約で許可されていても、サーバー設定が埋め込みを拒否していれば表示されません。逆に、技術的に表示できても規約で禁止されていれば利用規約違反になります。
• 大手サービス（YouTube・Googleマップなど）：公式に埋め込みコードを提供しているものはiframeでの利用を前提とした設計がされています。

自作ゲームをプラットフォームに投稿して発行されたiframeコードを使う場合は、通常、プラットフォームが技術的な許可設定を済ませているので、利用者はコードをコピーして貼るだけで動きます。

iframeのおもな属性と意味

ゲーム埋め込みで実際に使われる属性をおさえておくと、コードをカスタマイズしやすくなります。

サイズに関する属性

widthとheightはピクセル単位または%で指定できます。ゲームの解像度に合わせて指定するのが基本ですが、width="100%"とすると親要素の幅に追従します。スマートフォン対応を考える場合は、CSSと組み合わせてアスペクト比を固定する手法がよく使われます。

セキュリティに関する属性

sandbox属性をつけると、iframe内のスクリプト実行・フォーム送信・ポップアップなどを制限できます。信頼できないコンテンツを埋め込む際の安全策として使われます。ゲームがJavaScriptで動いている場合はallow-scriptsを許可リストに加えないと動作しないので、制限内容と動作の兼ね合いに注意が必要です。

allow属性では全画面表示（fullscreen）やポインターロック（pointer-lock）などの権限を個別に許可できます。ゲームが全画面ボタンを持っている場合はallow="fullscreen"を指定しないとブラウザが全画面への移行を拒否することがあります。

`loading="lazy"`

画面外にあるiframeの読み込みを遅延させる属性です。ゲームが複数並ぶページや、スクロールしないと見えない位置に置かれたゲームでは、ページ全体の表示を速くする効果があります。

埋め込み時に起きやすい問題と対処の考え方

ゲームが「真っ白」になる：srcのURLが間違っているか、相手サーバーが埋め込みを拒否しています。ブラウザの開発者ツール（F12キー）でコンソールやネットワークタブを開くと、エラーの詳細が確認できます。X-Frame-Options: DENYやX-Frame-Options: SAMEORIGINというヘッダーが返っていれば、埋め込みが拒否されています。

スマートフォンでゲームがはみ出す：iframeは指定したサイズで表示されるため、親ページがレスポンシブ（画面幅に応じて変化）でもiframe内は固定サイズのままです。対処としては、CSSでaspect-ratioを使って高さを幅に連動させ、width: 100%でiframe自体を親要素に合わせるのが一般的なアプローチです。

音や入力が反応しない：ブラウザのオートプレイポリシーや、iframe内でのキーボードフォーカスの問題が原因のことがあります。音については、ユーザーが一度クリックやタップをしてからでないと音声を再生できない制限がほとんどのブラウザにあります。入力の問題は、ゲームのtabindexやフォーカス管理の実装で改善できる場合があります。

ログインやセーブが引き継がれない：iframeの中と外はブラウジングコンテキストが異なります。親ページでログインしている状態がiframe内のゲームに自動で渡されるわけではなく、ゲーム自体が対応した仕組みを持っていない限り、それぞれ別の認証状態になります。ゲームプラットフォームがSDKを提供して共通ログインに対応している場合は、作者がそのSDKをゲームに組み込む必要があります。

iframeとゲーム開発の関係

ゲームを作る側から見ると、iframeで埋め込まれることを想定した設計上の注意点があります。

まず、ゲームのHTMLファイルはそれ単体でURLにアクセスしたときに正しく動くように作ることが基本です。iframeで読み込まれる場合も同じURLが使われるため、相対パスの指定ミスや外部ファイルの読み込み漏れがあると、プラットフォームへの投稿後に動かないことがあります。

次に、ゲームのビューポートサイズをJavaScriptで動的に取得している場合は、window.innerWidthがiframeのサイズを返すことに注意が必要です。親ページ全体のサイズではなく、割り当てられた枠のサイズで計算が行われます。ほとんどの場合はこれが期待通りの動作ですが、意図せずはみ出す場合は<meta name="viewport">の設定とあわせて確認します。

また、全画面表示を組み込む場合は、iframeのallow="fullscreen"が設定されているかどうかをゲーム側が検知できないため、埋め込み環境でエラーにならないようにtry-catchや機能検知を使った実装が安定します。

次の行動

ゲームの埋め込みを試みる場合は、まず埋め込み先と埋め込み元の両方の利用規約を確認し、プラットフォームが発行している公式のiframeコードをそのまま使うのが最も安全な出発点です。自作ゲームをプラットフォームに投稿して公開する場合は、アソバース（https://aso-verse.com）のようなゲーム投稿プラットフォームが埋め込み設定を整えてくれるため、HTMLやZIPを投稿するだけで始められます。表示のずれや音の問題が出た場合は、ブラウザの開発者ツールのコンソールを最初の手がかりにしてください。

参考資料

• MDN Web Docs「The Inline Frame element」（Mozilla）
• HTML Living Standard（WHATWG）
• HTTP仕様「X-Frame-Options」（RFC 7034）