<amp-iframe> - インラインフレームを設置する
公開日:
AMPのamp-iframeは、インラインフレームを設置するための要素です。 外部コンテンツなら、JavaScriptを自由に利用できるため、Google Mapsなどを表示することも可能です。
概要
- 名前
- amp-iframe
- 可用性
- Stable (安定)
- サポートするレイアウト
- fill,fixed,fixed-height,flex-item,nodisplay,responsive
- 必要なスクリプト
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
- 検証
- https://github.com/ampproject/amphtml/blob/master/extensions/amp-iframe/0.1/validator-amp-iframe.protoascii
- ドキュメント
- https://www.ampproject.org/docs/reference/extended/amp-iframe.html
属性
allowfullscreen
HTMLと同じ。フルスクリーンを許可するならtrue
を指定する。
allowtransparency
HTMLと同じ。インラインフレームの背景を透過するならtrue
を指定する。
frameborder
HTMLと同じ。フレームの枠。AMPでは、デフォルト値は0
。
referrerpolicy
HTMLと同じ。リソースを読み込む際にリファラーをどのように送信するかをキーワードで指定する。
- no-referrer
- リファラーを送信しない。
- no-referrer-when-downgrade
- https接続以外ではリファラーを送信しない。
- origin
- スキーム、ホスト、ポートのみをリファラーに含める。パスは含めない。
- origin-when-cross-origin
- 異なるオリジンへのアクセスの場合だけ、リファラーにパスを含めない。
- unsafe-url
- https接続、http接続ともに、スキーム、ホスト、ポート、パスをリファラーに含める。
sandbox
HTMLと同じ。空文字を指定するとインラインフレームの動作に最大限の制限をかける。機能を表すキーワードを半角スペース(
)で区切って任意の数だけ指定すると、そのキーワードの機能が使えるようになる。AMPでは、この属性を省略した場合、空文字が指定されたのと同じ扱いになる。キーワードを数例、紹介します。
- allow-forms
- フォームの実行を許可する。
- allow-scripts
- スクリプトの実行を許可する。
- allow-modals
- モーダルの実行を許可する。具体的には、
window.alert()
、window.confirm()
、window.print()
、window.prompt()
の実行と、beforeunloadイベントの発火。 - allow-same-origin
- 埋め込まれたコンテンツがオリジンを持つことを許可する。このキーワードがない場合、埋め込まれたコンテンツのオリジンは
null
となり、同一オリジンポリシー関係の制限がかかる。 - allow-popups
window.open
、target=_blank
、showModalDialog
などによってポップアップを開くことを許可する。- allow-top-navigation
- 埋め込まれたブラウジングコンテキスト(window)が、最上位(祖先)のブラウジングコンテキストを操作することを許可する。具体的には、子ウィンドウのリンクで、親ウィンドウをリンク先に遷移させることができるようになる。
- allow-popups-to-escape-sandbox
- 通常、埋め込まれたブラウジングコンテキストにかけられたsandbox属性は、そこから新しいウィンドウで開いたブラウジングコンテキストにも継承される。しかし、このキーワードを追加すると、新しいウィンドウで開いたブラウジングコンテキストにはsandbox属性が継承されない。
- allow-orientation-lock
- ScreenOrientation APIによるスクリーンの向きの操作を許可する。
- allow-pointer-lock
- Pointer Lock APIの使用を実行する。
src
コンテンツのURL。このURLには、フラグメント(#〜
)が付いていない場合のみ、#amp=1
が自動で追加される。
srcdoc
HTMLと同じ。コンテンツのURL。src属性よりも優先して表示される。
共通属性
AMPの全てのタグで利用できる共通属性を指定できます。
説明
ライブラリの読み込み
amp-iframeを利用するには、専用のライブラリを読み込む必要があります。
HTML
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
オリジン
sandbox属性にallow-same-origin
のフラグがない場合を除いて、親ウィンドウのコンテンツとインラインフレームのコンテンツのオリジンが同一であってはいけません。これはセキュリティ上の理由からです。詳しくは、Iframe origin policyをご参考下さい。
設置する位置
amp-iframe要素は、ファーストビューの領域の75%よりも下、または最上部から600pxより下に配置しなければいけません。これを守らない場合はエラーが発生し、表示されないのでご注意下さい。
サンプルコード
HTML
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>【デモ】<amp-iframe> - インラインフレームを設置する</title>
<link rel="canonical" href="https://syncer.jp/Web/AMP/Component/amp-iframe/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
body {
padding: 12px ;
background-color: #fff ;
}
h2 {
margin-top: 600px ;
}
amp-iframe {
max-width: 300px ;
}
</style>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "記事のタイトル",
"image": [
"eyecatch.jpg"
],
"datePublished": "2017-08-23T00:00:00+0900"
}
</script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<p>お手数ですが下にスクロールして下さい。</p>
<h2>iframe</h2>
<amp-iframe width=300 height=300
sandbox="allow-scripts"
layout="responsive"
frameborder="1"
src="https://demo.syncer.jp/565/iframe.html">
</amp-iframe>
</body>
</html>