お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

amp-iframe

iframeタグの代替タグとなります。
iframeってのはまぁ外部サイトの読み込みが走りますので変えてねって事です。

プラグインの読み込み

amp-iframeを使用する場合は別途プラグインの読み込みが必要です。
amp.jsの後にでも読み込ませましょう。 

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

基本構文と動作

どんな書き方でどんな動きすんのかを。まず簡単なものを。 

<amp-iframe width="200" height="100"
    sandbox="allow-scripts allow-same-origin"
    layout="responsive"
    frameborder="0"
    src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=iceland">
</amp-iframe>

動作デモ

デモ

各種プロパティについて

src まんま、読み込むページURLを入れ込んであげましょう。
sandbox html5からiframeに追加されたプロパティとなります。
ここで指定できる値については以下の通りです。
またこのsandboxプロパティに関しては、IE9以前ではサポートされていません。
allow-forms
iframe内にform要素がある場合、そのform動作を許可させます。
allow-modals
iframeの中からモーダルウィンドウを開くことを許可させます。
alert等の事ですかね。
allow-orientation-lock
iframeの中からスクリーンの向きをロックする機能を無効化することを許可します。
allow-pointer-lock
iframeの中でPointer Lock API の使用を許可します。
allow-popups
iframeの中でwindow.open target="_blank" showModalDialogのようなポップアップの動作を許可します。
allow-popups-to-escape-sandbox
サンドボックス化したドキュメントが、サンドボックスのフラグを強制されない新たなウィンドウを開けるようにします。
わからん。
【例えばサードパーティの広告に、元のページと同じ制限を強制されない安全なサンドボックスを提供できます。】
なるほど。Chrome および Operaでの動作となっているのでほぼ使わないでしょう
allow-same-origin
コンテンツが通常のオリジンを持つとみなします。このキーワードが使われない場合は、埋め込みコンテンツは独自オリジンを持つとみなされます。
allow-scripts
iframeの中でスクリプトの実行を許可します（ただしポップアップウィンドウは作れません）。
allow-top-navigation
埋め込みのブラウジングコンテキストがトップレベルのブラウジングコンテキストのコンテンツを操作（読み込み）することを許可します。

ルールについて

  1. 配置する場合は、画面上部から75%のスキマを開ける必要がある
    他要素を入れたりして稼いでねって事ですね