読者です 読者をやめる 読者になる 読者になる

望月いちろうのREADME.md

書き溜めておいた技術記事や旅行記のバックアップです。

amp-iframe | AMPでiframeを利用する

HTML5 AMP

f:id:mochizuki_p:20170107174707p:plain

AMPでは通常のiframeタグが禁止されており、代わりにこのamp-iframeを使用することが必須です。

広告の表示にはamp-adを使用して、amp-iframeは使用しないようにしてください。

仕組み

amp-iframeには以下の制約があります。

  • 少なくともページ上端より600px下部に配置する
  • またはページサイズの75%より下部に配置する
  • フレーム内に配置するリソースはHTTPS形式で取得する必要がある。
  • 専用のJavaScriptファイルをロードする必要がある
<script async custom-element="amp-iframe"
  src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

属性

属性 説明 必須か?
width 動画の埋め込み枠の幅 560
height 動画の埋め込み枠の高さ 315
src iframeのURL https://hoge.com/
sandbox サンドボックスの設定を変更 allow-scripts ×
resizable 設定するとリサイズを許可する ×
layout レイアウトを設定 responsive ×

sandbox

セキュリティの観点からamp-iframeは任意のサンドボックス化を実行することが可能です。 デフォルトでは最大限のサンドボックス化がなされています。 amp-iframe内で使用したい機能に応じて適宜権限を与える必要があります。 また、amp-iframe内でオープンされたページにもサンドボックス化の設定が継承されます。

サンドボックスの設定

効果
allow-scripts amp-iframe内でJavaScriptの実行を許可する
allow-same-origin amp-iframe内で同一生成元のAjaxを許可する
allow-popups amp-iframe内でtarget=_blankを設定した場合にポップアップの表示を許可する
allow-popups-to-escape-sandbox amp-iframe内でtarget=_blankを設定した場合にサンドボックスが適用されないポップアップの表示を許可する(Chromeのみ)

プレースホルダー

プレースホルダーを設置することでamp-iframeをページの先頭に配置することができます。 amp-iframeタグの内部に配置したタグにplaceholderを追加することで、その要素がプレースホルダーとして設定されます。

<amp-iframe width=300 height=300
   layout="responsive"
   sandbox="allow-scripts allow-same-origin"
   src="https://foo.com/iframe">
 <amp-img layout="fill" src="https://foo.com/foo.png" placeholder></amp-img>
</amp-iframe>

amp-iframeがでは、呼び出し先のページが明示的に親フレームにたいして、メッセージを送信する必要があります。

子ページのonloadリスナに対して以下の関数を実行します。

window.parent.postMessage({
  sentinel: 'amp',
  type: 'embed-ready'
}, '*');

リサイズ

amp-iframeではリサイズを実行することも可能です。 そのためには

  • resizable属性を設定する必要がある。
  • overflow属性が設定された子要素を配置する
  • iframeで呼び出されたページからembed-sizeのメッセージを送信する必要がある
  • embed-sizeのメッセージで指定する高さは100px以上である必要がある。
<amp-iframe width=300 height=300
    layout="responsive"
    sandbox="allow-scripts allow-same-origin"
    resizable
    src="https://foo.com/iframe">
  <div overflow tabindex=0 role=button aria-label="Read more">Read more!</div>
</amp-iframe>
window.parent.postMessage({
  sentinel: 'amp',
  type: 'embed-size',
  height: document.body.scrollHeight
}, '*')

Vimeoの動画

  <amp-iframe width="390" height="220"

      layout="responsive"
      sandbox="allow-scripts allow-same-origin allow-popups"
      allowfullscreen
      frameborder="0"
      src="https://player.vimeo.com/video/183576456
    <amp-img layout="fill"
        src="https://i.vimeocdn.com/video/598081813_390x220.jpg"
        placeholder></amp-img>

  </amp-iframe>

Google Maps

 <amp-iframe width="600"
      height="400"
      layout="responsive"
      sandbox="allow-scripts allow-same-origin allow-popups"
      frameborder="0"
      src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJrTLr-GyuEmsRBfy61i59si0&key=hogehogefuga
  </amp-iframe>