Google-amp-iframes

提供：Dev Guides
移動先:案内、検索

Google AMP-iframe

Googleの amp-iframe は、ページにiframeを表示するために使用されます。amp-iframeに追加する条件がいくつかあるため、ページで通常のiframeを使用することはできません。 この章では、これについて詳しく説明します。

iFrameの従うべき条件

AMPページでiframeを使用する際に注意すべき条件は次のとおりです-

  • iframeで使用されるURLは、_https_要求または_data-URI_であるか、_srcdoc_属性を使用する必要があります。
  • amp-iframeにはデフォルトでサンドボックス属性が追加されます。 サンドボックス属性は空に設定されます。 サンドボックスの空の値は、iframeが*最大サンドボックス*（iframeの追加制限）であることを意味します。 サンドボックスに値を追加して、以下の例を使用して説明します。
  • amp-iframeはページの上部に表示することはできません。上部からスクロールすると、上部からほぼ600px離れているか、ビューポートの最初の75％以内に収まるはずです。 最初にiframeを表示する必要がある場合は、iframeにプレースホルダーを追加する必要があります。これについては、チュートリアルの後半の例で説明します。
  • amp-iframeは、コンテナと同じ起源を持つことはできません。 たとえば、メインサイトがwww.xyz.comにある場合、iframe srcを www.xyz.com/urlname として持つことはできません。 他の.xyz.com、example.xyz.comなどを使用できます。

iframeを使用するには、次のスクリプトを追加する必要があります- 

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

Amp-iframeの形式は次のとおりです- 

<amp-iframe width = "600" title = "Google map"
   height = "400" layout = "responsive"
   sandbox = "allow-scripts allow-same-origin allow-popups"
   frameborder = "0"
   src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed">
</amp-iframe>

以下に示すように、iframeを使用してGoogleマップを表示する実際の例を使用して、これを理解しましょう。

例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Iframe</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadatal">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">

      <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 custom-element = "amp-iframe"
         src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js"
      ></script>

      <style>
         div {
            height:850px;
            text-align:center;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Iframe</h3>
      <div>
         Google Maps in Iframe
      </div>
      <h3>Google AMP - Amp Iframe</h3>
      <amp-iframe width = "600"
         title = "Google map"
         height = "400"
         layout = "responsive"
         sandbox = "allow-scripts allow-same-origin allow-popups"
         frameborder = "0" src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed">
      </amp-iframe>
   </body>
</html>

出力

Google Amp Iframe

iframeを上から600px以上に配置したことに注目してください。 以下に示すようにエラーが発生します-

Googleが配置したiframe

上記の例では、以下の値を持つサンドボックスを使用しました- 

sandbox = "allow-scripts allow-same-origin allow-popups"

Sandbox属性は、iframe内にロードされるコンテンツへのアクセス許可のように機能します。 ここでは、Googleマップのリンクからのすべてのスクリプトを読み込むことができます。 私たちがサンドボックス属性を与えていない場合、これは表示されるエラーであり、iframeにロードされるコンテンツをブロックします-

サンドボックス属性

サンドボックスに適切な許可を与える必要があることに注意してください。 サンドボックスに付与されるすべての権限の詳細については、https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandboxをご覧ください。

amp-iframe内のプレースホルダー属性を使用して、600pxを超える条件を取り除くことができます。

同じための実例は以下に与えられています- 

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Iframe</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadatal">
      <meta name = "viewport" content = "width = device-width,  minimum-scale=1,initial-scale=1">

      <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 custom-element = "amp-iframe"
         src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
      </script>

      <style>
         div {
            height:850px;
            text-align:center;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Iframe</h3>

      <amp-iframe width = "600"
         title = "Google map"
         height = "400"
         layout = "responsive"
         sandbox = "allow-scripts allow-same-origin allow-popups"
         frameborder = "0"
         src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed">

         <amp-img layout = "fill" src = "images/loading.jpg" placeholder></amp-img>
      </amp-iframe>
   </body>
</html>

次のようにamp-imgをプレースホルダーとして使用しました- 

<amp-iframe width = "600"
   title = "Google map"
   height = "400"
   layout = "responsive"
   sandbox = "allow-scripts allow-same-origin allow-popups"
   frameborder = "0"
   src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie = UTF8&iwloc = &output = embed">

   <amp-img layout = "fill" src = "images/loading.jpg" placeholder></amp-img>
</amp-iframe>

この場合、75％ビューポートでの600pxとamp-iframeの制限は考慮されません。 画像上に表示されるローディングインジケータ（3つのドット）は、基本的にamp-iframe srcのプレースホルダーとして使用されます。 iframeコンテンツがロードされると、画像が削除され、iframeコンテンツが以下に示す出力に表示されるように表示されます-

出力

制限アンプiframe

Indicator Amp iframe

「https://www.finddevguides.com/index.php?title=Google-amp-iframes&oldid=6552」から取得
Powered by MediaWiki