Facebook Instant Games のように親のページ内にiframeで子コンテンツとしてゲームを表示したい
子コンテンツの高さを親側・子側でどう決めるのかをFacebook Instant GamesのHTMLをみてみる
ヘッダー
<head>...
<meta name="viewport" content="user-scalable=no,initial-scale=1.0001,maximum-scale=1.0001">
<meta name="referrer" content="default" id="meta_referrer">
<meta name="apple-mobile-web-app-capable" content="yes">
...
</head>
meta name=viewport
viewport は、ビューポートの初期サイズ(モバイル機器のみで使用)
| 属性値 | 意味 |
|---|---|
| user-scalable=no | no を設定すると、ユーザーはページのズーム不能に iOS 10 以降は既定で無視 |
| initial-scale=1.0001 | デバイスの幅 (ポートレートモードでの device-width またはランドスケープモードでの device-height) とビューポートの寸法との比率 |
| maximum-scale=1.0001 | ズームの最大値。iOS 10 以降は既定で無視 |
引用: https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta
meta name=referer
この文書からリクエストを送信する場合に HTTP の Referer ヘッダーへ付加する内容を制御
ブラウザーによっては、 referrer に非推奨の値である always, default, never に対応していることがあります。
引用: https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta
meta name=apple-mobile-web-app-capable
apple-mobile-web-app-capable=yesでフルスクリーンモードを指定する。しかし、Webページをホーム画面に追加し、ホーム画面からページを表示させたときのみに機能。
おまけで
<meta name=”apple-mobile-web-app-status-bar-style”>は、ホーム画面でのステータスバー(ブラウザーのヘッダではなくiPhoneの時刻表示部分)の表示方法の指定
| 指定値 | 意味 |
|---|---|
| default | 不透明（デフォルト色）で表示 |
| black | 不透明（黒）で表示 |
| black-translucent | 半透明で表示 |
引用: https://www.symmetric.co.jp/blog/archives/93
body
<body tabindex="0" style="min-height: 567px; background-color: rgb(255, 255, 255);">
<div id="viewport" data-kaios-focus-transparent="1" style="min-height: 567px;">
:
<div style="height: 567px;">
:
iframe
<iframe
class="_6f96"
allow="autoplay"
frameborder="0" border="0" cellspacing="0"
src="https://apps-508237932874005.apps.fbsbx.com/..."
sandbox="allow-pointer-lock allow-same-origin allow-scripts allow-orientation-lock">
</iframe>
allow =autoplay 属性
iframe の機能ポリシーを指定するために使用
引用: https://developer.mozilla.org/ja/docs/Web/HTTP/Feature_Policy
sandbox属性
| sandbok属性値 | 意味 |
|---|---|
| allow-pointer-lock | 埋め込みの閲覧コンテキストにPointer Lock API の使用を許可 |
| allow-same-origin | コンテンツが通常のオリジンを持つとみなします。このキーワードが使われない場合は、埋め込みコンテンツは独自オリジンを持つとみなされます。 |
| allow-scripts | 埋め込みの閲覧コンテキストにスクリプトの実行を許可します (ただしポップアップウィンドウは作れません)。このキーワードが使われない場合はこの操作は行えません。 |
| allow-orientation-lock | 埋め込みの閲覧コンテキストが、スクリーンの向きをロックする機能を無効化することを許可します。 |
引用: https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe
Pointer Lockとは？
たとえばブラウザ上の3Dゲームなどでは、マウスがウィンドウの外に出てしまってゲームが続行できなくなることがある。今標準化作業が進められているPointer Lock APIを使うと、デベロッパはマウスの動きをウィンドウの内側に制約できる
引用: https://jp.techcrunch.com/2012/09/26/20120925chrome-pointer-lock-api/
iframe内のhtml
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body bgcolor="#000000" style="margin : 0px; overflow: hidden;">
<div id="screen" style="margin-left: 0px; margin-top: 18.092px;">
<canvas width="750" height="1248" id="fb_othello" style="display: block; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 319px; height: 530px;"></canvas>
</div>
:
</body>