Google-amp-quick-guide

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

Google AMP-概要

*Google Accelerated Mobile Pages* （Google-AMP）は、amp htmlを使用して軽量のWebページを構築するために特別に設計されたGoogleの新しいオープンソースプロジェクトです。 このプロジェクトの主な目的は、アンプコードが正常に動作し、スマートフォン、タブレットなど、考えられるすべてのデバイスで高速にロードされるようにすることです。

AMPとは

Accerated Mobile Pages（AMP）は、あらゆるブラウザでコンテンツをより速く、よりスムーズに、そしてレスポンシブにすることにより、Webページをモバイルフレンドリーにするために特別に設計されたGoogleのオープンソースプロジェクトです。

Google ampの公式サイトは-https://www.ampproject.org/です

AMPとは

AMPを選ぶ理由

どのユーザーも、Webサイトがコンテンツを非常に高速にロードすることを期待しています。 ただし、画像、ビデオ、アニメーション、ソーシャルウィジェットがページにほとんどあふれている場合は、ページが非常に重くなり、読み込み時間が長くなります。 そのようなシナリオは、長期的にウェブサイトへのユーザーの損失を引き起こす可能性があります。

Google AMPは、この問題を解決するように設計されています。 AMPには、画像、iframe、javascript、広告、ビデオ、アニメーション、css、読み込まれたフォントなどを処理する特別な方法があります。 AMPページのコンテンツはGoogle側でキャッシュされるため、ユーザーが検索結果をクリックするたびに、キャッシュからコンテンツが提供されます。 キャッシュバージョンもタイムリーに更新されるため、ユーザーは常に最新の更新ページを取得できます。

AMPを選択する理由

このセクションでは、サイトでAMPを選択する必要がある理由を説明します-

Google検索を優先

今日、Googleで何かを検索すると、ページの上部にGoogleカルーセルが表示され、その後に検索への応答としてページのリストが表示されます。 表示されるニュースカルーセルはすべて有効なAMPサイトです。 これは、Googleがampページを優先し、ニュースカルーセルのランキングに従ってそれらを表示することを意味します。

キーワード「 latest indian news 」を使用してGoogleで行われた検索の例を次に示します-

優先度の高いGoogle検索

上の画像に示すように、AMPページである上位のすべてのページがGoogleカルーセルの先頭に表示されます。

ユーザーがGoogle検索で何かを検索すると、Google AMPページは次のように表示されます。 AMPページにはGoogle AMPロゴがあります。

Google AMPページ

読み込み時間の短縮

ページがAMPに変換されると、ロード時間は非AMPページに比べてはるかに改善されます。 読み込み時間の短縮は、Google検索でのページランキングの重要な要素でもあります。

ポップアップなし

Google AMPを使用すると、ユーザーがGoogle AMPで設計されたページの不要なポップアップを表示しないため、快適なWeb​​ブラウジングエクスペリエンスが得られます。

トラフィックを生成する

ページの読み込み速度が速い場合、自動的に視聴者の数が増加するため、ページへのトラフィックが増加します。

AMPの仕組み

Webサイトの構築に使用される最も重要なコンポーネントは、javascript、画像、ビデオ、フォント、cssなどです。 AMPページの設計は、これらすべての要素を独自の方法で処理することにより行われます。 このセクションでは、ページを高速化するためにAMPが正確に行うことを簡単に説明します。

非同期JavaScript

Javascriptは、アニメーション、DOMの変更などの形式でページにインタラクティブ機能を追加するのに役立つため、ページで重要な役割を果たします。 また、ページの動作が遅くなり、他のコンテンツがページ上でレンダリングされないようにブロックできます。

AMPはJavaScriptにどのように取り組んでいますか？

AMPはJavaScriptを非同期的に読み込みます。 カスタムJavaScriptは、AMPページ内では厳密に許可されていません。 AMPには多くのコンポーネントが追加されており、それらの一部は既存のhtmlタグに置き換わるものです。たとえば、amp-img、amp-iframe、amp-video、amp-lightbox、amp-animationsなど。

このコンポーネントごとに、スクリプトタグに追加されたasync属性を持つJavaScriptファイルがロードされます。 ampコンポーネントに関連するJavaScriptファイルのみがページで許可され、AMPページまたはサードパーティのjavascriptファイル内の他のJavaScriptは許可されません。 AMPはGoogle AMPキャッシュを使用するため、ファイルはキャッシュからプリロードされ、ロードが高速化されます。

HTMLタグのサイズ

ampページがリソースをロードせずにページ上のスペースを見つけられるように、イメージ、iframe、ビデオタグのサイズを指定することが必須です。 ロードされるリソースは、ampページによって優先順位が付けられます。 コンテンツは、ロードされるリソースよりも優先されます。

ソーシャルウィジェット/AD

Ampは、ページに表示されるソーシャルウィジェットを処理する特別なコンポーネント、つまりamp-facebook、amp-twitter、amp-ad、amp-stickyを提供します。 AMP-adコンポーネントは、ページに広告を配信するために使用されます。 AMPは、コンポーネントの処理に特別な注意を払い、要件に基づいてコンテンツを優先的にロードします。

CSS

外部CSSはAMPページでは許可されていません。 amp-custom属性を使用して、スタイルタグ内にカスタムCSSを追加できる場合。 インラインCSSも使用できます。 AMPは、可能なすべての方法でhttp要求を削減します。

フォント

ampページではフォントが許可され、フォントのロードの優先順位はAMPによって決定されます。

アニメーション

AMPはアンプアニメーションコンポーネントをサポートし、最新のブラウザーでサポートされているように移行できます。

上記のすべての点を考慮して、AMPは、フォント、画像、iframe、配信される広告などに対して行われたHTTPリクエストに特別な注意を払います ページの折り畳みの上で利用可能なリソースが最初にレンダリングされ、後で折り畳みの下で利用可能なリソースの設定が与えられます。

その他のポイント

Google AMPキャッシュは、コンテンツがキャッシュからフェッチされるときにコンテンツをより速くレンダリングするのに役立つもう1つの重要な要素です。

出版社は、2つのサイトampとnon-ampページを維持する必要があります。 たとえば、サイトのアドレスがhttp://mypage.com/?reqp=1&reqr=[https://www.mypage.com]であるとします。 そうすると、デスクトップで提供されるnon-ampの内部ページは* [[1]] デバイスまたはAMPの場合：* https://www.mypage/com/news/amp/*

GoogleはAMPページと非AMPページをどのように識別しますか？

次に、GoogleがAMPページと非AMPページを識別する方法を理解しましょう。

  • Google検索がページをクロールするときに、htmlまたは<html amp>または<html in>にampが含まれている場合、AMPページであることを認識します。
  • また、Googleが非アンプページに遭遇した場合、まずアンプページについて知るには、アンプページと非アンプページの両方のHTMLページのヘッドセクションに次のリンクタグを追加する必要があります。

非ampページのページURL

<link rel = "amphtml" href = "https://www.mypage.com/news/amp/myfirstnews_ampl">

ここで、_rel =” amphtml” _は、Googleがプラットフォームに基づいて適切なバージョンを表示するように、非ampページがampバージョンを指すように指定されています。

amp-pageのページURL

<link rel = "canonical" href = "https://www.mypage.com/news/myfirstnewsl">

ここで、_rel =” canonical” _はampページでhtmlの標準バージョンを指すように指定されているため、Googleはプラットフォームに基づいて正しいバージョンを示します。

サイトにアンプページが1つしかない場合でも、rel =” canonical”を追加することを忘れないでください。 

<link rel = "canonical" href = "https://www.mypage.com/news/amp/myfirstnews_ampl">

次の図は、ampページを指すrel =” amphtml”および標準のhtmlページを指すrel =” canonical”への参照を示しています。

参照HTMLページ

Google AMPの機能

このセクションでは、Google AMPで利用可能な重要な機能について説明します-

アンプキャッシング

Google Ampキャッシングは、ampに追加されたコア機能の1つです。 純粋なampページを提供するプロキシベースのコンテンツ配信ネットワークを提供します。デフォルトでは、有効なすべてのampページで、Ampキャッシュを使用できます。 AMPキャッシュおよびCloudflare AMPキャッシュ。 ユーザーがクリックしてampページにリダイレクトされると、コンテンツはGoogleキャッシュから提供されます。

アンプ部品

Ampには、さまざまな目的のために設計されたコンポーネントの大きなリストがあります。 それらのいくつかは以下にリストされています-

  • amp-img -ampページに画像を表示するために使用されます。
  • amp-iframe -ページに表示される外部コンテンツとともにiframeを表示するために使用されます。 使用されているiframeはサンドボックス化されているため、ampページにデータを表示するには許可が必要です。 そのため、サンドボックス属性にクロスオリジンの詳細を指定する必要があります。
  • amp-video -ページにビデオを表示します。
  • amp-audio -ページに音声を表示します。
  • amp-datepicker -ページに日付ウィジェットを表示するために使用されます。 サードパーティ製の日付ピッカーを探す必要はありません。同じものがampで直接利用できます。
  • amp-story -ページにストーリーを表示する媒体。
  • amp-selector -オプションのメニューを表示するアンプコンポーネントであり、ユーザーはオプションを選択できます。 表示されるオプションは、テキスト、画像、またはその他のアンプコンポーネントです。
  • amp-list -CORS jsonエンドポイントを呼び出すampコンポーネントであり、jsonファイルからのデータはテンプレート内に表示されます。

広告

サイト運営者にとって収益はページに配信される広告に完全に依存するため、広告は非常に重要です。 Ampでは、外部javascriptをページに追加することはできませんが、ページに広告を配信するamp-adと呼ばれる特別なampコンポーネントが導入されています。

サイト運営者が自分のページに配信したいアドネットワークは、アンプ広告をサポートする必要があります。 たとえば、ページにダブルクリック広告を配信するには、ダブルクリックがamp-adコンポーネントを使用して配信される広告をサポートする必要があります。 次のコードは、doubleclickのamp-adタグを示しています。 

<amp-ad width = "300"
   height = "200"
   type = "doubleclick"
   data-slot = "/4119129/ad-layout">
   <div placeholder>
      <b>Placeholder here!!!</b>
   </div>
</amp-ad>

Ampは、AMPコンポーネントとhtmlから開発された純粋なampadであるamphtmladもサポートしています。 Ampは、ページの下部に表示されるフッター広告であるamp-sticky-adsもサポートしています。 ampの広告の詳細については、amp adsの章で説明します。

ソーシャルウィジェット

Facebook、Twitter、Instagramなどのソーシャルウィジェットは、サイト運営者のページに表示することが非常に重要になっているため、ページはソーシャルメディア間で共有されます。 AMPは、amp-facebook、amp-twitter、amp-instagram、amp-pinterestなどのAMPコンポーネントを開発することにより、ページで使用されるすべての重要なソーシャルメディアウィジェットにサポートを拡張しました。

アンプメディア

ページ上の別の重要なコンポーネントは、ビデオを表示するメディアであり、ミッドロール広告としてビデオ間の広告も配信します。 AMPは、amp-jwplayer、amp-youtubeなどを使用してメディアを提供します。 jwplayerやyoutubeをページに表示するために、追加のサードパーティファイルを読み込む必要はありません。

アンプ分析

Amp分析は、特定のページのデータを追跡するために使用されるAMPコンポーネントです。 ページ上のすべてのユーザーインタラクションを記録および保存して、データを分析し、さらなる改善やビジネス目的に使用できます。

アンプアニメーション

アンプアニメーションは、他のアンプコンポーネントで使用されるアニメーションを定義するアンプコンポーネントです。 ITは、最新のブラウザーでうまく機能するアニメーション、移行をサポートしています。 アニメーションを実行するために外部CSSライブラリを使用する必要はなく、アンプアニメーションコンポーネントを使用できます。

アンプのレイアウト

AMP-Layoutは、google-ampで利用できる重要な機能の1つです。 Amp Layoutは、ページが読み込まれたときに、ちらつきやスクロールの問題を引き起こすことなく、アンプコンポーネントが適切にレンダリングされるようにします。

Google AMPは、画像のhttpリクエストなどの他のリモートリソース、データ呼び出しが行われる前に、ページでレイアウトのレンダリングが行われるようにします。 レイアウトに使用できる属性は、すべてのアンプコンポーネントの幅/高さ、レスポンシブ、フィル、固定などの値を持つレイアウト属性、リソースの読み込みに時間がかかったりエラーが発生した場合に表示されるプレースホルダー属性、次の場合に表示されるフォールバック属性ですリソースにエラーがあります。

アンプ表示レイアウト

Ampは、サードパーティのライブラリを必要とせずに、またはページに重いCSSを作成することなく、ページにコンテンツを表示するために使用される多くのコンポーネントをサポートします。 リストに含まれるもの

  • Accordion -Amp-accordionは、コンテンツを展開折りたたみ形式で表示するために使用されるampコンポーネントです。 ユーザーがモバイルデバイスで表示しやすくなり、アコーディオンからの選択に従ってセクションを選択できるようになります。
  • カルーセル-アンプカルーセルは、画面上に一連の同様のコンテンツを表示し、矢印を使用してコンテンツ間を移動するアンプコンポーネントです。
  • Lightbox -Amp-lightboxは、フルビューポートを占有してオーバーレイのように表示するアンプコンポーネントです。
  • Slider -Amp-image-sliderは、画像上で垂直に移動するスライダーを追加して2つの画像を比較するために使用されるアンプコンポーネントです。
  • サイドバー-アンプサイドバーは、ボタンをタップするとウィンドウの側面からスライドするコンテンツを表示するために使用されるアンプコンポーネントです。

AMPの利点

  • AMPページは軽量で、読み込みが高速です
  • Googleは、Google検索のAMPページを優先します。 AMPページは、ページの上部にカルーセル形式でリストされます。 より高いランキングを取得するには、ページをAMPに配置することをお勧めします。
  • AMPページは、コンテンツがレスポンシブであり、追加のスタイリングを必要とせずにすべてのブラウザーで適切に調整されるため、モバイルフレンドリーです。
  • 非AMPページと比較してページの読み込み速度が速いため、AMPページのユーザー満足度が向上し、帯域幅とモバイルバッテリーが節約されます。

AMPの欠点

Ampには次の欠点があります-

  • パブリッシャーは、ページampとnon-ampの2つのバージョンを維持する必要があります。
  • ユーザーは、非アンプページをアンプに変換するために、さらに努力する必要があります。 ampはカスタムjavascriptまたは外部javascriptのロードをサポートしていないため、ampで利用できるものであれば何でも同じことを実現する必要があります。

Google AMP-はじめに

*Google Accelerated Mobile Pages* （Google-AMP）は、amp htmlを使用して軽量のWebページを構築するために特別に設計されたGoogleの新しいオープンソースプロジェクトです。 このプロジェクトの主な目的は、AMPコードが正常に機能し、スマートフォンやタブレットなど、考えられるすべてのデバイスで高速にロードされるようにすることです。

AMPは標準HTMLの単なる拡張機能です。 変更されたHTMLタグはほとんどなく、AMPはその使用に制限を追加しました。 この章では、変更されたhtmlタグとそれらに追加された制限をリストします。 画像、CSS、JS、フォーム送信、ビデオ、オーディオなどの外部リソースのロードを処理するタグが変更されました。

また、amp-date-picker、amp-facebook、amp-ad、amp-analytics、amp-ad、amp-lightboxなど、htmlページで直接使用できる多くの新機能がampに追加されています。 残りの表示用のものは、そのまま使用されます。

これらのすべての変更と新機能により、AMPはライブ環境で使用した場合、ページの読み込みが速くなり、パフォーマンスが向上することを約束します。

あなたの携帯電話でGoogle検索で何かを検索すると、上部のGoogleカルーセルに表示されるディスプレイは、以下に示すようにほとんどがアンプページです-

モバイルページの高速化

AMPページをクリックすると、アドレスバーに表示されるURLは次のようになります- 

https://www.google.co.in/amp/s/m.timesofindia.com/sports/cricket/india-in-australia/to-hell-with-the-nets-boys-need-rest-ravi-shastri/amp_articleshow/67022458.cms

Amp Address Bar

URLはパブリッシャーから直接送信されるものではありませんが、GoogleはそれをキャッシュバージョンであるGoogleサーバー上の独自のコピーにポイントし、非ampページと比較してコンテンツのレンダリングを高速化します。 これは、デバイスまたはGoogleエミュレータモードでのみ発生します。

サンプルアンプページ

アンプページの例を以下に示します- 

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "./regular-html-versionl">
      <meta name = "viewport" content = "width = device-width,
         minimum-scale = 1,initial-scale = 1">
      <style amp-custom>
         h1 {color: red}
      </style>
      <script type = application/json>{
         "vars": {
            "uid": "23870",
            "domain": "dummyurl.com",
            "sections": "us",
            "authors": "Hello World"
         }
      }
      </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>
      <h1>Amp Sample Page</h1>
      <p>
         <amp-img src = "imgurl.jpg" width = "300" height = "300"
            layout = "responsive"></amp-img>
      </p>
      <amp-ad width = "300" height = "250" type = "doubleclick"
         data-slot = "/4119129/no-ad">
         <div fallback>
            <p style = "color:green;font-size:25px;">No ads to Serve!</p>
         </div>
      </amp-ad>
   </body>
</html>

AMPページですべきことと禁止事項

プログラマーがAMPページで従わなければならないこととしないことを理解しましょう。

必須タグ

以下に示すように、アンプページに含まれるいくつかの必須タグがあります-

  • 以下に示すように、htmlタグにampまたは⚡が追加されていることを確認する必要があります-
<html amp>
   OR
<html ⚡>
  • <head>および<body>タグをhtmlページに追加する必要があります。
  • 次の必須メタタグをページのヘッドセクションに追加する必要があります。そうしないと、アンプの検証に失敗します
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, minimum-scale = 1, initial-scale = 1">
  • rel = "canonical"のリンクがheadタグ内に追加されます
<link rel = "canonical" href = "./regular-html-versionl">
  • amp-boilerplateを使用したスタイルタグ-
<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>
  • amp-boilerplateを使用したNoscriptタグ-
<noscript>
   <style amp-boilerplate>
      body{
         -webkit-animation:none;
         -moz-animation:none;
         -ms-animation:none;
         animation:none
      }
   </style>
</noscript>
  • 以下に示すように、非同期が追加されたampスクリプトタグが非常に重要です-
<script async src = "https://cdn.ampproject.org/v0.js"> </script>
  • ページにカスタムCSSを追加する場合は、ampページで外部スタイルシートを呼び出せないことに注意してください。 カスタムCSSを追加するには、示されているようにすべてのCSSをここに移動する必要があります-
<style amp-custom>
  //all your styles here
</style>
  • スタイルタグにamp-custom属性を追加する必要があります。

AMPコンポーネントのスクリプト

srcページでtype =” text/javascript”のスクリプトはampページでは厳密に許可されないことに注意してください。 非同期でampコンポーネントに関連するスクリプトタグのみをheadセクションに追加できます。

このセクションでは、以下に示すアンプコンポーネントに使用されるいくつかのスクリプトをリストします-

アンプ広告

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

amp-iframe

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

スクリプトには、ロードするampコンポーネントの名前を持つasyncおよびcustom-element属性があることに注意してください。 Ampは、非同期およびカスタム要素のプロパティに基づいてスクリプトタグを検証し、他のスクリプトの読み込みを許可しません。 以下に示すように、サンプルファイルに追加した type = application/json が必要です。 

<type = application/json>
{
   "vars": {
      "uid": "23870",
      "domain": "dummyurl.com",
      "sections": "us",
      "authors": "Hello World"
   }
}
</script>

上記のスクリプトは、必要に応じて、たとえばampアナリティクスなど、他のampコンポーネントで使用できます。

HTMLタグ

これまでに、ampページで必須のタグが必要であることを確認しました。 ここで、許可される/許可されないHTML要素とそれらに課せられる制限について説明します。

ここに許可されている/許可されていないHTMLタグのリストがあります-

Sr.No HTML Tag & Description
1

img

このタグはamp-imgに置き換えられます。 AMPページでは、直接imgタグの使用は許可されていません

2

video

amp-videoに置き換えられました

3

audio

amp-audioに置き換え

4

iframe

amp-iframeに置き換え

5

object

禁止されている

6

embed

禁止されている

7

form

<form>として使用できます。 AMPページのフォームを操作するスクリプトを追加する必要があります。

  • _例−_*
<script async custom-element = "amp-form"
   src = "https://cdn.ampproject.org/v0/amp-form-0.1.js">
</script>
8

Input elements 

Allowed.<input[type = image]>,
<input[type = button]>,
<input[type = password]>,
<input[type = file]>
are not allowed
9

<fieldset>

許可された

10

<label>

許可された

11

P, div, header,footer,section

許可された

12

button

許可された

13

a

<a>タグは次の条件で許可されます。hrefはjavascriptで始まってはなりません。 存在する場合、ターゲット属性値は_blankでなければなりません。

14

svg

禁止されている

15

meta

許可された

16

Link

許可された。 ただし、外部スタイルシートをロードすることはできません。

17

style

許可された。 amp-boilerplateまたはamp-custom属性が必要です。

18

base

禁止されている

19

noscript

許可された

コメント

条件付きHTMLコメントは許可されません。 たとえば- 

<!--[if Chrome]>
   This browser is chrome (any version)
<![endif]-->

HTMLイベント

onclick、onmouseoverなどのhtmlページで使用するイベントは、AMPページでは許可されていません。

次のようにイベントを使用できます- 

on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]"

これは、入力要素で使用されるイベントの例です- 

<input id = "txtname" placeholder = "Type here"
   on = "inputthrottled:
   AMP.setState({name: event.value})">

使用されるイベントは入力されます。

クラス

*_- amp-やi-amp -_* のような接頭辞を持つクラスをページに含めることはできません。 また、要件に応じてクラス名を使用できます。

Ids

-ampまたはi-amp-で始まるHTML要素のIDを使用することはできません。 さらに、要件に応じてhtml要素にidを使用できます。

リンク集

JavaScriptをhrefにすることはampページでは許可されていません。

例 

<a href = "javascript:callfunc();">click me</a>

スタイルシート

外部スタイルシートは、AMPページでは許可されていません。 内部のページに必要なスタイルを追加することが可能です- 

<style amp-custom>
  //all your styles here
</style>

スタイルタグには、 amp-custom 属性を追加する必要があります。

@-ルール

次の@ルールはスタイルシートで許可されています-

  • @ font-face、@ keyframes、@ media、@ page、@ supports。@ importは許可されません。 同じサポートは将来追加されます。 @keyframesは_ <style amp-custom > 内で使用できます。 @keyframeが多すぎる場合は、 <style *amp-keyframes> _タグを作成し、ampドキュメントの最後にこのタグを呼び出すとよいでしょう。
  • クラス名、ID、タグ名、および属性の先頭に - amp - および i-amp - を付けないでください。これらは、実行時にページでも定義されると競合を引き起こす可能性があるampコードで内部的に使用されます。
  • ampは必要に応じて要素のサイズを制御するため、 ！important プロパティはスタイル内では許可されません。

カスタムフォント

カスタムフォントのスタイルシートは、AMPページで許可されています。

例 

<link rel = "stylesheet"
   href = "https://fonts.googleapis.com/css?family=Tangerine">

フォントは、AMPページ内で使用できる以下の起源からホワイトリストに登録されています。

注-ampページでは@ font-faceカスタムフォントが許可されています。

例 

@font-face {
   font-family: myFirstFont;
   src: url(dummyfont.woff);
}

AMPランタイム

ampコアファイルがロードされると、Ampランタイム環境が決定されます- 

<script async src = "https://cdn.ampproject.org/v0.js"></script>

コアファイルは外部リソースのロードを処理し、それらをいつロードするかの優先順位を決定し、＃development = 1がamp URLに追加されたときにampドキュメントの検証にも役立ちます。

例 

http://localhost:8080/googleamp/amppagel#development=1

上記のURLをブラウザーで実行すると、アンプ検証に失敗した場合はエラーが一覧表示され、エラーがない場合はアンプ検証成功メッセージが表示されます。

AMPコンポーネント

Ampには、多くのアンプコンポーネントが追加されています。 基本的には、リソースのロードを効率的な方法で処理するために使用されます。 また、アニメーション、表示データ、広告の表示、ソーシャルウィジェットなどを処理するコンポーネントも含まれています。

AMPには2種類のコンポーネントがあります。

  • ビルトイン
  • 外部

注-<amp-img>は組み込みコンポーネントであり、コアアンプjsファイルが追加されている場合に使用可能です。 <amp-ad>、<amp-facebook>、<amp-video>などの外部コンポーネントには、追加するコンポーネントに関連するそれぞれのjsファイルが必要です。

共通の属性

幅、高さ、レイアウト、プレースホルダー、フォールバックなどの属性は、利用可能なほぼすべてのAMPコンポーネントで利用できます。 これらの属性は、AMPページでのコンポーネントの表示を決定するため、AMPコンポーネントにとって非常に重要です。

AMPにリストされている上記のすべての機能については、このチュートリアルの後の章で詳しく説明します。

このチュートリアルのすべての例はデバイス用にテストされており、Google Mobile Emulatorモードを使用しています。 これについて詳しく説明しましょう。

Google Mobile Emulator

Googleモバイルエミュレータを使用するには、Chromeブラウザを開き、右クリックして、以下に示すように開発者コンソールを開きます-

Google Mobile Emulator

上記のChromeの開発者ツールを見ることができます。 ブラウザでテストするリンクをヒットします。 ページがデスクトップモードで表示されることを確認します。

開発者ツール

デバイスをテストするために上記のページを取得するには、以下に示すようにデバイスツールバーの切り替えをクリックします-

デバイスツールバーの切り替え

ショートカットキーCtrl + shift + Mを使用することもできます。 これは、以下に示すように、デスクトップモードをデバイスモードに変更します-

デスクトップモード

デバイスのリストは、次のように表示されます-

デバイスのリスト

ページをテストするデバイスを選択できます。 これらのチュートリアルのすべてのページは、上記のようにGoogleモバイルエミュレーターでテストされています。 Firefoxおよび最近のInternet Explorerブラウザでも同じ機能が利用できます。

Google AMP-画像

Google AMPページで使用される画像は、標準のhtmlページで使用される方法と似ていますが、タグ名がいくつかの追加プロパティとともに使用される方法が異なるだけです。 この章では、これらについて詳しく説明します。

以下に示す構文を確認してください-

標準HTML

<img src = ”example.jpg” width = ”300” height = ”250” alt = ”Example” ></img>

AMPページで

<amp-img src = "example.jpg" alt = "Example" height = "300" width = "250" ><//amp-img>
*img* のタグが *amp-img* に変更されていることに注意してください。

imgの代わりにamp-imgを使用する理由

imgをamp-imgに変更する理由は、ページレイアウトと、イメージをロードするために行われるネットワーク要求をより詳細に制御するためです。 Ampは、画像リソースに遅延読み込みを追加し、ページで利用可能な他のリソースごとに読み込みを優先します。

例

より良い理解のために次のコードを観察します- 

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

      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-msanimation:
            - amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
         -ampstart{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;
               -msanimation:none;
               animation:none
            }
         </style>
      </noscript>
   </head>
   <body>
      <h1>Google AMP - Image Example</h1>
      <amp-img alt = "Beautiful Flower" src = "images/flower.jpg"
         width = "246"
         height = "205">
      </amp-img>
   </body>
</html>

出力

上記のコードを実行すると、次のように結果が表示されます-

AMP Img

以下に示すように、_amp-img_タグにプロパティlayout =” responsive”を追加して、画像をレスポンシブにすることもできます。

例

より良い理解のために次のコードを観察します- 

<amp-img alt = "Beautiful Flower" src = "images/flower.jpg"
   width = "246"
   height = "205"
   layout = "responsive">
</amp-img>

出力

上記のコードを実行すると、次のように結果が表示されます-

AMP Img実行済み

Google AMP-フォーム

この章では、Google AMPでフォームを操作する方法について説明します。

formsタグは、標準のHTMLと同じままであることに注意してください。 AMPでは、フォームの使用に特別な制限が追加されたため、フォームを操作するにはamp-form JavaScriptファイルを追加する必要があります。

amp-formのスクリプト

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

AMPページでフォームを使用するには、上記のスクリプトをlファイルに含める必要があります。 amp-form JavaScriptファイルは、フォーム送信のために http および xmlhttprequest をサポートします。 HTTPリクエストを使用するとページがリロードされ、 xmlhttprequest を使用するとページはリロードされず、ajaxリクエストのように動作します。

AMPのフォームタグ

For xmlhttprequest :
<form method = "post" class = "p2" action-xhr = "submitform.php" target = "_top">
  //Input fields here
</form>

For http :
<form method = "post" class = "p2" action = "submitform.php" target = "_top">
  //Input fields here
</form>

Amp-formは特別な属性、つまり submit-error および submit-success を提供して、フォームの送信時にエラーと成功を処理します。

例

amp-formの例を以下に示します- 

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Form</title>
      <link rel = "canonical" href = "ampforml">
      <meta name = "viewport" conten t = "width = device-width,
         minimum-scale = 1,initialscale = 1">

      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-msanimation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}@keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}
      </style>
         <noscript>
            <style amp-boilerplate>
               body{
                  -webkit-animation:none;
                  -moz-animation:none;
                  -msanimation:none;
                  animation:none
               }
            </style>
         </noscript>
      <script async custom-element = "amp-form"
         src = "https://cdn.ampproject.org/v0/amp-form-0.1.js">
      </script>
      <script async custom-template = "amp-mustache"
         src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
      </script>
      <style amp-custom>
         form.amp-form-submit-success [submit-success],
         form.amp-form-submit-error [submit-error]{
            margin-top: 16px;
         }
         form.amp-form-submit-success [submit-success] {
            color: white;
            background-color:gray;
         }
         form.amp-form-submit-error [submit-error] {
            color: red;
         }
         form.amp-form-submit-success.hide-inputs > input {
            display: none;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Form</h3>
      <form method = "post"
         class = "p2"
         action-xhr = "submitform.php"
         target = "_top">
         <p>AMP - Form Example</p>
         <div>
            <input type = "text" name = "name" placeholder = "Enter
               Name" required><br/><br/>
            <input type = "email" name = "email"
            placeholder = "Enter Email" required>
            <br/>
            <br/>
         </div>

         <input type = "submit" value = "Submit">
         <div submit-success>
            <template type = "amp-mustache">
               Form Submitted! Thanks {{name}}.
            </template>
         </div>

         <div submit-error>
            <template type = "amp-mustache">
               Error! {{name}}, please try again.
            </template>
         </div>
      </form>
   </body>
</html>

出力

上記のコードを実行すると、次のように結果が表示されます-

AMPフォーム

次に、詳細を入力し、[送信]ボタンをクリックします。 表示される出力画面は次のとおりです-

送信されたAMPフォーム

データバインディングにamp-mustacheを使用したことを確認します。 フォームはaction-xhrすなわちxmlhttprequestを使用してフォームを送信しています。 JSON形式のデータを返す submitform.php ファイルを使用しました。 

<form method = "post" class = "p2" action-xhr = "submitform.php"
   target = "_top">
</form>
*submitform.php*
<?php
   if(!empty($_POST)){
      $domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") .      "://$_SERVER[HTTP_HOST]";
      header("Content-type: application/json");
      header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
      header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
      $myJSON = json_encode($_POST);
      echo $myJSON;
   }
?>

xmlhttprequestを使用してフォームを機能させるには、CORS仕様に従ってヘッダーを追加する必要があります。 submitform.phpに追加された応答ヘッダーの詳細を以下に示します-

submitform php

フォームを機能させるには、値 AMP-Access-Control-Allow-Source-Origin および amp-access-controlallow-source-origin を持つ access-control-expose-headers などのヘッダーを追加する必要があります- * http：//localhost：8080 *。

PHPファイルとApacheサーバーを使用していることに注意してください。 PHPファイルでは、以下に示すように必要なヘッダーを追加しました- 

<?php

   if(!empty($_POST)){
      $domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") .  "://$_SERVER[HTTP_HOST]";
      header("Content-type: application/json");
      header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
      header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
      $myJSON = json_encode($_POST);
      echo $myJSON;
   }
   ?
?>

私たちが通常のhttpリクエストを使用する場合、以下に示すようにページがリロードされます-

httpリクエストの場合、次の形式を使用しました- 

<form method = "GET" class = "p2" action = "submitform.php"
   target = "_top">
</form>

例

より良い理解のために次のコードを観察します- 

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

      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-msanimation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}@keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body {
               -webkit-animation:none;
               -moz-animation:none;
               -msanimation:none;
               animation:none}
         >/style>
      </noscript>

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

      <style amp-custom>
         form.amp-form-submit-success [submit-success],
         form.amp-form-submit-error [submit-error]{
            margin-top: 16px;
         }
         form.amp-form-submit-success [submit-success] {
            color: white;
            background-color:gray;
         }
         form.amp-form-submit-error [submit-error] {
            color: red;
         }
         form.amp-form-submit-success.hide-inputs >
            input {
            display: none;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Form</h3>
      <form method = "GET" class = "p2" action = "submitform.php" target = "_top">
         <p>AMP - Form Example</p>
         <div>
            <input type = "text" name = "name" placeholder = "Enter Name" required>
            <br/>
            <br/>
            <input type = "email" name = "email" placeholder = "Enter Email" required>
            <br/>
            <br/>
         <div>

         <input type = "submit" value = "Submit">
         <div submit-success>
            <template type = "amp-mustache">
               Form Submitted! Thanks {{name}}.
            </template>
         </div>
         <div submit-error>
            <template type = "amp-mustache">
               Error! {{name}}, please try again.
            </template>
         </div>
      </form>
   </body>
</html>

出力

上記のコードを実行すると、次のように結果が表示されます-

Google Ampフォーム Google Ampフォーム Google Ampフォームの提出

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

Google AMP-ビデオ

ampのamp-videoは、直接ビデオ埋め込みを再生するために使用される標準のhtml5ビデオです。 この章では、amp-videoの使用方法と使用方法を理解しましょう。

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

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

amp-videoにはsrc属性があり、これにはロードするビデオリソースがあり、実行時にampによって遅延ロードされます。 その上、すべての機能はhtml5ビデオタグとほぼ同じです。

以下は、アンプのビデオに追加されるノードです-

  • ソース-このタグを使用して、再生するさまざまなメディアファイルを追加できます。
  • トラック-このタグを使用すると、ビデオの字幕を有効にできます。
  • プレースホルダー-このプレースホルダータグは、ビデオが開始される前にコンテンツを表示します。
  • フォールバック-このタグは、ブラウザーがHTML5ビデオをサポートしていない場合に呼び出されます。

amp-videoタグの形式

amp-videoタグの形式はここに示されています- 

<amp-video controls width = "640" height = "360"
   layout = "responsive" poster = "images/videoposter.png">
   <source src = "video/bunny.webm" type = "video/webm"/>
   <source src = "video/samplevideo.mp4" type = "video/mp4"/>

   <div fallback>
      <p>This browser does not support the video element.</p>
   </div>
</amp-video>

以下に示すような実例を使用して、アンプビデオを理解しましょう-

例

<!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 Video</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-video"
         src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Amp Video</h3>
      <amp-video controls
         width = "640"
         height = "360"
         layout = "responsive"
         poster = "images/videoposter.png">
         <source src = "video/bunny.webm" type = "video/webm"/>
         <source src = "video/samplevideo.mp4" type = "video/mp4"/>

         <div fallback>
            <p>This browser does not support the video element.</p>
         </div>
      </amp-video>
   </body>
</html>

出力

上記のコードの出力は以下のとおりです-

AMP-Videoタグ

amp-videoで利用可能な属性

amp-videoで利用可能な属性は、ここの表にリストされています-

Sr.No Attributes & Description
1

src

<source>ノードが存在しない場合、srcを指定する必要があり、https://urlになります。

2

poster

ポスターは、ビデオが始まる前に表示されるimg URLを取ります。

3

autoplay

amp-videoにこの属性を設定すると、ブラウザーがサポートしている場合にビデオが自動再生されます。ビデオはミュートモードで再生され、ユーザーはビデオをタップしてミュートを解除する必要があります。

4

controls

amp-videoでこの属性を使用すると、html5ビデオに似たビデオのコントロールが表示されます。

5

loop

この属性がamp-videoに存在する場合、ビデオは終了すると再び再生されます。

6

crossorigin

ビデオを再生するリソースが異なる起源にある場合、この属性が現れます。

7

rotate-to-fullscreen

ビデオが表示されている場合、ユーザーがデバイスを横向きモードにすると、ビデオはフルスクリーンで表示されます

AMPビデオの自動再生

動画を自動再生する必要がある場合は、自動再生属性を使用できます。 この機能は、ブラウザのサポートに従って機能します。 自動再生時にビデオはミュート状態になることに注意してください。 ユーザーがビデオをタップすると、ミュートが解除されます。

以下に示す実例の助けを借りて自動再生機能をみましょう-

例

<!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 Video</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-video" src = "
         https://cdn.ampproject.org/v0/amp-video-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Amp Video Autoplay</h3>
      <amp-video controls
         width = "640"
         height = "360"
         layout = "responsive"
         poster = "images/videoposter.png" autoplay>
         <source src = "video/bunny.webm" type = "video/webm"/>
         <source src = "video/samplevideo.mp4" type = "video/mp4"/>
         <div fallback>
            <p>This browser does not support the video element.</p>
         </div>
      </amp-video>
   </body>
</html>

AMPビデオの自動再生

次のコードに示すように、controls属性を追加することで、ビデオにコントロールをアクティブにできます- 

<amp-video controls
   width = "640"
   height = "360"
   layout = "responsive"
   poster = "images/videoposter.png" autoplay>
   <source src = "video/bunny.webm" type = "video/webm"/>
   <source src = "video/samplevideo.mp4" type = "video/mp4"/>
   <div fallback>
      <p>This browser does not support the video element.</p>
   </div>
</amp-video>

Google AMP-ボタン

ボタンはAMPのもう1つの機能です。 AMPのボタンには変更がなく、標準のHTMLボタンタグのように使用されることに注意してください。 AMPページのボタンとの唯一の違いは、イベントの動作です。

この章では、ボタンの動作とボタンをAMPコンポーネントで使用する方法を示すいくつかの例を参照します。

ライトボックスのサンプルコード

次の例は、以下に示すように、ボタンを使用してamp-lightboxを表示/非表示にする方法を示しています- 

<!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 Lightbox</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-an
               imation:none;animation:none
            }
         </style>
      </noscript>

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

      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
         button{
            background-color:
            #ACAD5C; color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: left;
         }

         .lightbox {
            background: rgba(211,211,211,0.8);
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Lightbox</h3>
      <button on = "tap:my-lightbox">
         Show LightBox
      </button>
      <amp-lightbox id = "my-lightbox" layout = "nodisplay">
         <div class = "lightbox" on = "tap:my-lightbox.close" tabindex = "0">
            <amp-img alt = "Beautiful Flower"
               src = "images/flower.jpg"
               width = "246"
               height = "205">
            </amp-img>
         </div>
      </amp-lightbox>
   </body>
</html>

出力

ライトボックスのサンプルコード

ライトボックスのサンプルコード

これで、画面上の任意の場所をクリックしてライトボックスを閉じることができます。

上記の例では、以下に示すコードを使用してボタンを使用しました- 

<button on = "tap:my-lightbox">
   Show LightBox
</button>
Next, we have added action on the button using on attribute as shown:
on = "tap:my-lightbox"

ボタンをタップするとアクションが実行されます。 ライトボックスのIDが与えられていることに注意してください。 ユーザーがボタンをタップすると、ライトボックスが開きます。 同様に、任意のコンポーネントでonアクションを持つボタンを使用して、コンポーネントと対話できます。

Google AMP-Timeago

Timeagoは、たとえば「x」時間前など、過去と比較してタイムスタンプの詳細を提供します。 この章では、この機能について詳しく説明します。

この機能を作業に挿入するには、以下のスクリプトをlページに追加する必要があります- 

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

amp-timeagoタグは次のようになります- 

<amp-timeago layout = "fixed" width = "160" height = "20"
   datetime = "2018-10-01T00:37:33.809Z"
   locale = "en">Monday 01 October 2018 00.37
</amp-timeago>

以下に示すように、実際の例を使用してこれを理解しましょう-

例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - TimeAgo</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-timeago"
         src = "https://cdn.ampproject.org/v0/amp-timeago-0.1.js">
      </script>
   </head>
   <body>
      <h1>Google AMP - TimeAgo Example</h1>
      <amp-timeago
         layout = "fixed"
         width = "160"
         height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "en">Monday 01 October 2018 00.37
      </amp-timeago>
   </body>
</html>

出力

Timeagoのサンプルコード

デフォルトでは、ロケールはenに設定されています。 同じものを変更し、必要に応じてロケールでtimeagoを表示できます。 timeagoタグで使用できるロケールを以下の表に示します。

Sr.No Locale & Description
1

ar

アラビア語

2

be

ベラルーシ語

3

be

ベラルーシ語

4

bg

ブルガリア語

5

ca

カタロニア語

6

da

デンマーク語

7

de

ドイツ人

8

el

ギリシャ語

9

en

英語

10

enShort

英語-ショート

11

es

スペイン語

12

eu

バスク

13

fi

フィンランド語

14

fr

フランス語

15

he

ヘブライ語

16

hu

ハンガリー語

17

inBG

バングラ

18

inHI

ヒンディー語

19

inID

マレー語

20

it

イタリアの

21

ja

日本人

22

ko

韓国語

23

ml

マラヤーラム語

24

nbNO

ノルウェー語ブークモール

25

nl

オランダの

26

nnNO

ノルウェーニーノリスク

27

pl

研磨

28

ptBR

ポルトガル語

29

ro

ルーマニア語

30

ru

ロシア

31

sv

スウェーデンの

32

ta

タミル語

33

th

Thai

34

tr

トルコ語

35

uk

ウクライナ語

36

vi

ベトナム人

37

zhCN

中国語

38

zhTW

台湾人

以下に示す実例を使用して、いくつかのロケールについて説明しましょう-

例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - TimeAgo Using Locale</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-timeago"
         src = "https://cdn.ampproject.org/v0/amp-timeago-0.1.js">
      </script>
   </head>
   <body>
      <h1>Google AMP - TimeAgo Example Using Locale</h1>

      <h3>Locale : Russian</h3>
      <amp-timeago layout = "fixed"
         width = "160" height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "ru">

         Monday 01 October 2018 00.37
      </amp-timeago>

      <h3>Locale : Korean</h3>
      <amp-timeago
         layout = "fixed"
         width = "160"
         height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "ko">
            Monday 01 October 2018 00.37
      </amp-timeago>
      <h3>Locale : Hindi</h3>

      <amp-timeago
         layout = "fixed"
         width = "160"
         height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "inHI">

         Monday 01 October 2018 00.37
      </amp-timeago>

      <h3>Locale : Spanish</h3>
      <amp-timeago
         layout = "fixed"
         width = "160"
         height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "es">

         Monday 01 October 2018 00.37
      </amp-timeago>

      <h3>Locale : French</h3>
      <amp-timeago
         layout = "fixed"
         width = "160"
         height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "fr">

         Monday 01 October 2018 00.3
         </amp-timeago>
   </body>
</html>

出力

上記のコードの出力は以下のとおりです-

ロケールのサンプルコード

「X time ago」の表示を変更する必要がある場合、timeagoで「cutoff」属性を使用できます。 カットオフは、前の表示を取り除くために数秒で値を取ります。

以下に示す実例の助けを借りてこれを理解しましょう-

例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - TimeAgo</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-timeago"
         src = "https://cdn.ampproject.org/v0/amp-timeago-0.1.js">
      </script>
   </head>
   <body>
      <h1>Google AMP - TimeAgo Example</h1>
      <amp-timeago
         layout = "fixed"
         width = "160"
         height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "en"
         cutoff = "300">

         Monday 01 October 2018 00.37
      </amp-timeago>
   </body>
</html>

出力

ロケールの例

Google AMP-Mathml

MathMLを使用して、数式を表示できます。 この章では、MathMLの使用方法と、いくつかの数式を使用して同じものを表示する方法の実例を見て​​みましょう。

MathMLを使用するには、次のjavascriptファイルを含める必要があります- 

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

MathML AMPタグ

mathML ampタグには、次のような形式があります- 

<amp-mathml layout = "container"
   data-formula = "\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]">
</amp-mathml>
*data-formula* は、式が与えられる必須属性であることに注意してください。

例

例の助けを借りて、このタグをよりよく理解しましょう。 

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - MathML</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-mathml"
         src = "https://cdn.ampproject.org/v0/amp-mathml-0.1.js">
      </script>
   </head>
   <body>
      <h1>Google AMP - MathML Example</h1>
      <amp-mathml layout = "container"
         data-formula = "\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]">
      </amp-mathml>
   </body>
</html>

出力

Amp-mathmlタグを実行すると、以下に示すようにiframeで表示がレンダリングされます-

Mathmlの例

Mathmlの例

Google AMP-テキストに合わせる

Ampタグ amp-fit-text は、ディスプレイを表示するのに十分なスペースがない場合、font-sizeを縮小します。 この章では、このタグについて詳しく説明します。

amp-fit-textを機能させるには、次のスクリプトを追加する必要があります- 

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

Amp Fit-Textタグ

アンペアフィットテキストタグの形式は以下に示されています- 

<amp-fit-text width = "200" height = "200" layout = "responsive">
   Text here
</amp-fit-text>

例

例の助けを借りて、このタグをよりよく理解しましょう。 

<!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 Fit-Text</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-fit-text"
         src = "https://cdn.ampproject.org/v0/amp-fit-text-0.1.js">
      </script>
   </head>
   <body>
      <h1>Google AMP - Amp Fit-Text</h1>
      <div style = "width:150px;height:150px; ">
         <amp-fit-text
            width = "150"
            height = "150"
            layout = "responsive">

            <b>Welcome To finddevguides - You are browsing the best resource
            for Online Education</b>
         </amp-fit-text>
      </div>
   </body>
</html>

出力

上記のコードの出力は以下のとおりです-

Amp Fit-Text

amp-fit-textを使用してディスプレイを表示する場合、コンテンツは使用可能なスペースに応じて調整しようとします。

Amp-fit-textには、 max-font-size および min-font-size の2つの属性があります。

  • max-font-sizeを使用し、テキストをレンダリングするためのスペースが利用できない場合、サイズを縮小し、利用可能なスペース内で調整しようとします。
  • min-font-sizeを指定した場合、スペースが利用できない場合、テキストが切り捨てられ、テキストが非表示の場所にドットが表示されます。

例

amp-fit-textにmax-font-sizeとmin-font-sizeの両方を指定する実際の例を見てみましょう。 

<!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 Fit-Text</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-fit-text" src =
         "https://cdn.ampproject.org/v0/amp-fit-text-0.1.js">
      </script>
   </head>

   <body>
      <h1>Google AMP - Amp Fit-Text</h1>
      <div style = "width:150px;height:150px; ">
         <amp-fit-text
            width = "150"
            height = "150"
            layout = "responsive"
            max-font-size = "30"
            min-font-size = "25">

            <b>Welcome To finddevguides - You are
            browsing the best resource for Online Education</b>
         </amp-fit-text>
      </div>
   </body>
</html>

出力

Amp Fit-Text Tag

Google AMP-日付のカウントダウン

Amp Date countdownというもう1つのアンプコンポーネントは、特定の日付までの日、時間、分、秒、つまりデフォルトで* Y2K38（2038）*を表示するために使用されます。表示は、選択したロケールに従って実行できます。デフォルトではen（英語）です。Amp-date-countdownは、データのレンダリングにamp-mustacheテンプレートを使用します。

この章では、amp-date-countdownをより詳しく理解するために、いくつかの実際の例を見ていきます。

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

アンプ日付カウントダウン用

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

アンプ口ひげ用

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

アンプ日付カウントダウンタグ

amp-date-countdownタグは次のとおりです- 

<amp-date-countdown timestamp-seconds = "2100466648"
   layout = "fixed-height"
   height = "50">
   <template type = "amp-mustache">
      <p class = "p1">
         {{d}} days, {{h}} hours, {{m}} minutes and {{s}} seconds until
         <a href = "https://en.wikipedia.org/wiki/Year_2038_problem">
            Y2K38
         </a>.
      </p>
   </template>
</amp-date-countdown>

amp-date-countdownの属性

amp-date-countdownの属性は、ここの表にリストされています-

Sr.No Attribute & Description
1

end-date

カウントダウンするISO形式の日付。 たとえば、2025-08-01T00：00：00 + 08：00

2

timestamp-ms

ミリ秒単位のPOSIXエポック値。 UTCタイムゾーンと見なされます。 たとえば、timestamp-ms = "1521880470000"

3

timestamp-seconds

秒単位のPOSIXエポック値。 UTCタイムゾーンと見なされます。 たとえば、timestamp-seconds = "1521880470"

4

timeleft-ms

カウントダウンするために残されたミリ秒単位の値。 たとえば、残り50時間はtimeleft-ms = "180,000,000"です

5

offset-seconds (optional)

指定された終了日から加算または減算される秒数を示す正または負の数値。 たとえば、offset-seconds = "60"は終了日に60秒を追加します

6

when-ended (optional)

タイマーが0秒に達したときにタイマーを停止するかどうかを指定します。 値を停止（デフォルト）に設定すると、タイマーが0秒で停止することを示し、最終日を過ぎないか、0秒に達した後にタイマーを続行する必要があることを示し続けます。

7

locale (optional)

各タイマーユニットの国際化言語文字列。 デフォルト値はen（英語）です。 サポートされる値を以下にリストします。

フォーマット

amp-date-countdownがカウントダウンを表示するために使用する形式は、次の表に記載されています-

Sr.No Format & Description
1

d

0、1、2、3 …​無限大として日を表示

2

dd

日を00,01,02,03 …​ infinityとして表示します

3

h

時間を0、1、2、3 …​無限として表示します

4

hh

時間を00,01,02,03 …​ infinityとして表示します

5

m

分を0,1,2,3,4…無限として表示

6

mm

分を00,01,02,03….infinityとして表示します

7

s

秒を0,1,2,3 …​ infinityとして表示

8

ss

秒を00,01,02,03….infinityとして表示

9

days

ロケールごとに曜日または曜日の文字列を表示します

10

hours

ロケールごとに時間または時間の文字列を表示します

11

minutes

ロケールごとに分または分文字列を表示します

12

seconds

ロケールごとに秒または秒の文字列を表示します

例

<!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 Date-Countdown</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-date-countdown"
         src = "https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js">
      </script>

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

   <body>
      <h1>Google AMP - Amp Date-Countdown</h1>
      <amp-date-countdown
         timestamp-seconds = "2145683234"
         layout = "fixed-height"
         height = "50">

         <template type = "amp-mustache">
            <p class = "p1">
               {{d}} days, {{h}} hours, {{m}} minutes and
               {{s}} seconds until
               <a href = "https://en.wikipedia.org/wiki/Year_2038_problem">
                  Y2K38
               </a>.
            </p>
         </template>
      </amp-date-countdown>
   </body>
</html>

出力

Amp Fit-Text

例

私たちは、実際の例を使用して、オフセットカウントのアンプカウントダウン属性を理解しましょう- 

<!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 Date-Countdown</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-date-countdown"
         src = "https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js">
      </script>

      <script async custom-template = "amp-mustache"
         src = "https://cdn.ampproject.org/v0/amp-mustache-0.1.js">
      </script>
   </head>
   <body>
      <h1>Google AMP - Amp Date-Countdown</h1>
      <amp-date-countdown
         end-date = "2020-01-19T08:14:08.000Z"
         offset-seconds = "-50"
         layout = "fixed-height"
         height = "100">

         <template type = "amp-mustache">
            <p class = "p1">
               {{d}} days, {{h}} hours, {{m}}
               minutes and {{s}} seconds until 50
               seconds before 2020.
            </p>
         </template>
      </amp-date-countdown>
   </body>
</html>

出力

Amp Countdowns

サポートされているロケールのリスト

以下は、amp-date-countdownでサポートされるロケールのリストです-

Sr.No Name & Locale
1

en

英語

2

es

スペイン語

3

fr

フランス語

4

de

ドイツ人

5

id

インドネシア人

6

it

イタリアの

7

ja

日本人

8

ko

韓国語

9

nl

オランダの

10

pt

ポルトガル語

11

ru

ロシア

12

th

Thai

13

tr

トルコ語

14

vi

ベトナム人

15

zh-cn

中国語（簡体字

16

zh-tw

中国の伝統的な

ここで、上記のロケールのいずれかを使用してカウントダウンを表示する1つの例を試してみます。

例

<!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 Date-Countdown</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-date-countdown"
         src = "https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js">
      </script>

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

   <body>
      <h1>Google AMP - Amp Date-Countdown</h1>
      <amp-date-countdown
         locale = "ja"
         end-date = "2020-01-19T08:14:08.000Z"
         offset-seconds = "-50"
         layout = "fixed-height"
         height = "100">

         <template type = "amp-mustache">
            <p class = "p1">
               {{d}} {{days}}, {{h}} {{hours}}, {{m}}
               {{minutes}} and {{s}} {{seconds}} until
               50 seconds before 2020.
            </p>
         </template>
      </amp-date-countdown>
   </body>
</html>

出力

Amp Countdown locale

Google AMP-日付の選択

AMP Datepickerは、ユーザーが日付を選択できるページにカレンダーを表示するアンプコンポーネントです。 AMP日付ピッカーは、静的なカレンダーのように表示することも、ボタンをクリックするだけで入力選択に基づいて表示することもできます。

amp-date-pickerを機能させるには、次のスクリプトをページに追加する必要があります- 

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

Amp-date-pickerタグ

amp-date-pickerのタグは次のようになります- 

<amp-date-picker layout = "fixed-height" height = "360"></amp-date-picker>

サポートされる属性

amp-date-pickerでは次の属性がサポートされています-

Sr.No Attribute & Description
1

mode

利用可能なオプションは、静的およびオーバーレイです。 静的の場合、カレンダーはページでデフォルトで開きます。 オーバーレイの場合、対話時にカレンダーが開きます。

2

mode

利用可能なオプションは、単一および範囲です。 シングルでは、カレンダーで日付を1つだけ選択できます。 範囲を使用すると、連続範囲内で複数の日付を選択できます。

3

input-selector

これは、日付入力のqueryselectorにすることができます。 たとえば、idの場合は#nameoftheidのクラスです。 クラスの名前。 IDが割り当てられているタグの日付が更新されます。

4

start-input-selector

これは、日付入力のqueryselectorにすることができます。 たとえば、idが#nameoftheidの場合、クラスは.nameoftheclassです。 IDが割り当てられているタグの日付が更新されます。

5

end-input-selector

これは、日付入力のqueryselectorにすることができます。 たとえば、idは#nameoftheidで、クラスは.nameoftheclassです。 IDが割り当てられているタグの日付が更新されます。

6

min

ユーザーが選択できる最も早い日付。 これはISO 8601日付としてフォーマットする必要があります。 min属性が存在しない場合、現在の日付が最小日付になります。

7

max

ユーザーが選択できる最新の日付。 これはISO 8601日付としてフォーマットする必要があります。 max属性が存在しない場合、日付ピッカーには最大日付がありません。

8

month-format

選択した日付を表示するために必要な月形式。 デフォルトでは、値は「MMMM YYYY」です

9

format

入力ボックスまたはセレクターが使用されるhtmlelementに日付を表​​示する形式。 デフォルトでは「YYYY-MM-DD」です

10

week-day-format

曜日を表示する形式。

11

locale

カレンダービューを表示するロケール。 デフォルトではenです。

12

minimum-nights

ユーザーが日付範囲で選択する必要がある夜の数。 デフォルトは「1」です。 値が「0」の場合、ユーザーは開始日と終了日に同じ日付を選択できます。

13

number-of-months

カレンダービューに一度に表示する月数。 デフォルトは「1」です。

14

first-day-of-week

週の最初の日として指定する日（0〜6）。 デフォルト値は「0」（日曜日）です。

15

day-size

カレンダービューテーブルの日付セルのピクセル単位のサイズ。 デフォルトは39です。

主な属性は type と mode です。 mode には、 static および overlay タイプのカレンダーがあります。 type には、 single および range オプションがあります。 type =” single” の場合、カレンダーから日付を1つだけ選択でき、 type =” range” の場合、範囲内の複数のデータを選択できます。

次に、いくつかの実際の例を使用して、静的およびオーバーレイ型のカレンダーのamp-date-pickerを理解しましょう。

AMP静的日付ピッカー

静的型の日付ピッカーの場合、次の例に示すようにmode = staticを指定する必要があります。

例

<!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 Date-Picker Static </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-date-picker"
         src = "https://cdn.ampproject.org/v0/amp-date-picker-0.1.js">
      </script>

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

      <style>
         input[type = text]{
            width: 50%;
            padding: 12px;
            border: 1px
            solid #ccc;
            border-radius: 4px;
            resize: vertical;
         }
         label {
            padding: 12px 12px 12px 0;display: inline-block;
         }
         .col-label {
            float: left;width: 25%;margin-top: 6px;
         }
         .col-content {
            float: left;width: 75%;margin-top: 6px;
         }
         .row:after {
            content: "";display: table;clear: both;
         }
         .amp_example {
            background-color: #f1f1f1;
            padding: 0.01em 16px;
            margin: 20px 0;
            box-shadow: 0 2px 4px 0
            rgba(0,0,0,0.16),0 2px 10px 0
            rgba(0,0,0,0.12)!important;
         }
         h3{font-family: "Segoe UI",Arial,sans-serif;
         font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <div class = "amp_example">
         <h3>Google AMP - Amp Date-Picker using type = single</h3>
         <amp-date-picker
            id = "static-date"
            type = "single"
            mode = "static"
            layout = "fixed-height"
            height = "600"
            format = "YYYY-MM-DD"
            input-selector = "#date">

            <div class = "row">
               <div class = "col-label">
                  <label for = "start">
                     Date is:
                  </label>
               </div>
               <div class = "col-content">
                  <input type = "text" id = "date" name = "date"
                     placeholder = "Date Selected Is...">
               </div>
            </div>
         </amp-date-picker>
      <div>
   </body>
</html>

この例では、カレンダーを表示していることに注意してください。つまり、デフォルトで日付ピッカーが画面に表示されています。

ユーザーが選択した日付は、以下に示すデモ画面に示すようにテキストフィールドに表示されます-

出力

Amp datepicker single

amp-date-pickerから選択した日付を取得する方法は？

上記の例をチェックすると、テキストフィールドのIDが指定された input-selector という属性があります。 ユーザーが日付を選択すると、入力フィールド内に表示されます。 

<amp-date-picker
   id = "static-date"
   type = "single"
   mode = "static"
   layout = "fixed-height"
   height = "600"
   format = "YYYY-MM-DD"
   input-selector = "#date"

   <div class = "row">
      <div class = "col-label">
         <label for = "start">Date is:</label>
      </div>
      <div class = "col-content">
         <input type = "text" id = "date" name = "date"
         placeholder = "Date Selected Is...">
      </div>
   </div>

</amp-date-picker>

また、次のように入力プロパティに名前プロパティを与えることができます- 

<amp-date-picker
   type = "single"
   mode = "static"
   layout = "container"
   input-selector = "[name = date]">
   <input type = "text" id = "date" name = "date" placeholder = "Date Selected Is...">
</amp-date-picker>

input-selectorが指定されていない場合、amp-date-pickerは非表示の入力フィールドを作成し、amp-dateピッカーのIDを使用して dateまたは$ \ {id} -date の名前を付けます。

日付ピッカーで使用可能なさまざまな属性を持ついくつかの例を説明します。 上記では、 type =” single” およびmodeをstaticとして述べたように、単一の日付を選択できます。 タイプを type =” range” として指定することにより、日付の範囲を選択することもできます。

例

<!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 Date-Picker Static </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-date-picker"
         src = "https://cdn.ampproject.org/v0/amp-date-picker-0.1.js">
      </script>

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

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

      <style>
         input[type = text]{
            width: 50%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: vertical;
         }
         label {padding: 12px 12px 12px 0;display: inline-block;}
         .col-label {float: left;width: 25%;margin-top: 6px;}
         .col-content {float: left;width: 75%;margin-top: 6px;}
         .row:after {content: "";display: table;clear: both;}
         .amp_example {
            background-color: #f1f1f1;
            padding: 0.01em 16px;
            margin: 20px 0;
            box-shadow: 0 2px 4px 0
            rgba(0,0,0,0.16),0 2px 10px 0
            rgba(0,0,0,0.12)!important;
         }
         h3{
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;margin: 10px 0;
         }
      </style>
   </head>
   <body>
      <div class = "amp_example">
         <h3>Google AMP - Amp Date-Picker Static Multi Select Dates using type = range</h3>
         <amp-date-picker
            id = "static-date"
            type = "range"
            mode = "static"
            layout = "fixed-height"
            height = "600"
            start-input-selector = "#start"
            end-input-selector = "#end"
            format = "YYYY-MM-DD"
            input-selector = "#static-date-input">

            <div class = "row">
               <div class = "col-label">
                  <label for = "start">Start Date:</label>
               </div>
               <div class = "col-content">
                  <input type = "text" id = "start"
                  name = "start" placeholder = "Start Date">
               </div>
            </div>
            <div class = "row">
               <div class = "col-label">
                  <label for = "end">End Date:</label>
               </div>
               <div class = "col-content">
                  <input type = "text" id = "end"
                  name = "end" placeholder = "End Date">
               </div>
            </div>
         </amp-date-picker>
      </div>
   </body>
</html>

出力

上記のコードの出力は以下のとおりです-

Amp datepicker range

  • amp-date-pickerから選択したtype =” range”を使用して開始日と終了日を取得する方法？*

開始日と終了日を取得するために、amp-date-picker属性 start-input-selector および end-input-selector を使用しました。

構文の詳細はここに示されています- 

<amp-date-picker
   id = "static-date"
   type = "range"
   mode = "static"
   layout = "fixed-height"
   height = "600"
   start-input-selector = "#start"
   end-input-selector="#end"
   format = "YYYY-MM-DD"
   input-selector = "#static-date-input">

   <input type = "text" id = "start" name = "start" placeholder="Start Date">
   <input type = "text" id = "end" name = "end" placeholder = "End Date">
</amp-date-picker>

両方のセレクターには、開始日と終了日を表示する入力フィールドIDがあります。 ここで説明したように、入力フィールドの名前を指定することもできます。

AMPオーバーレイ日付ピッカー

オーバーレイモードの日付ピッカーの場合、カレンダーは入力フィールドに応じて表示されます。 静的な日付ピッカーで見たように、type =” single”およびtype =” range”でオーバーレイすることができます。

オーバーレイタイプの日付ピッカーの日付範囲を選択する実際の例を見てみましょう。

例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <itle>Google AMP - Amp Date-Picker Static</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-date-picker"
         src = "https://cdn.ampproject.org/v0/amp-date-picker-0.1.js">
      </script>
      <script async custom-element = "amp-bind"
         src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
      </script>
      <script async custom-template = "amp-mustache"
         src = "https://cdn.ampproject.org/v0/amp-mustache-0.1.js">
      </script>

      <style>
         input[type=text]{
            width: 50%;
            padding: 12px;border:
            1px solid #ccc;
            border-radius: 4px;resize: vertical;
         }
         label {
            padding: 12px 12px 12px 0;
            display: inline-block;
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;
         }
         .col-label {float: left;width: 25%;margin-top: 6px;}
         .col-content {float: left;width: 75%;margin-top: 6px;}
         .row:after {content: "";display: table;clear: both;}
         .amp_example {
            background-color: #f1f1f1;
            padding: 0.01em 16px;
            margin: 20px 0;
            box-shadow: 0 2px 4px 0
            rgba(0,0,0,0.16),0 2px 10px 0
            rgba(0,0,0,0.12)!important;
         }
         h3{font-family: "Segoe UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
         button { background-color: #ACAD5C;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: right;
         }
      </style>
   </head>
   <body>
      <div class = "amp_example">
         <h3>Google AMP - Amp Date-Picker Overlay Multi Select Dates using type = rangelt;/h3>
         <amp-date-picker id = "overlay-date"
            type = "range"
            mode = "overlay"
            start-input-selector = "#start"
            end-input-selector = "#end"
            format = "YYYY-MM-DD"
            open-after-select
            input-selector = "#start">

            <div class = "row">
               <div class = "col-label">
                  <label for = "start">Start Date:lt;/label>
               </div>
               <div class = "col-content">
                  <input type = "text" id = "start"
                     name = "start" placeholder = "Start Date">
               </div>
            </div>
            <div class = "row">
               <div class = "col-label">
                  <label for = "end">End Date:lt;/label>
               </div>
               <div class = "col-content">
                  <input type = "text" id="end" name = "end"
                     placeholder = "End Date">
               </div>
            </div>
            <div class = "row">
               <div class = "col-label">
               </div>
               <div class = "col-content">
                  <button class = "ampstart-btn caps" on = "tap:overlay-date.clear">
                     Clear
                  </button>
               </div>
            </div>
        </amp-date-picker>
     </div>
  </body>
</html>

出力

上記のコードの出力は以下のとおりです-

Amp datepicker multi select

開始日と終了日を取得する方法は既に説明しました。 ここでもう1つ属性 select-after-select を使用したことに注意してください。 この属性は、選択後にオーバーレイを開いたままにします。 日付ピッカーの外側をクリックすると、閉じられます。 クリアと呼ばれるボタンも追加されています。 クリアボタンのクリックで選択された日付がクリアされます。これを実行するための構文は次のとおりです- 

<button class = "ampstart-btn caps" on = "tap:overlay-date.clear">
   Clear
</button>

イベントを追加するには、 on 属性を使用する必要があります。 イベントの詳細については、このチュートリアルの「イベント」の章で説明します。 タグの動作を使用し、datepickerのidが指定され、イベントをクリアします。これにより、選択した日付範囲のクリアが処理されます。

次に、amp-date-pickerをライトボックスとして使用する方法を見てみましょう。

AMPライトボックス日付ピッカー

日付ピッカーは、モーダルウィンドウ内で使用できます。 ライトボックスの日付ピッカーを使用することもできます。 実際の例を使用してこれを理解しましょう。

ライトボックス内で日付ピッカーを使用するには、以下に示すようにライトボックススクリプトを追加する必要があります- 

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

例

<!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 Date-Picker Static </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-date-picker"
         src = "https://cdn.ampproject.org/v0/amp-date-picker-0.1.js">
      </script>

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

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

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

      <style>
         input[type=text]{
            width: 50%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: vertical;
         }
         label {
            padding: 12px 12px 12px 0;
            display: inline-block;
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;
         }
         .col-label {
            float: left;width: 25%;
            margin-top: 6px;
         }
         .col-content {
            float: left;
            width: 75%;
            margin-top: 6px;
         }
         .row:after {
            content: "";
            display: table;clear: both;
         }
         .amp_example {
            background-color: #f1f1f1;
            padding: 0.01em 16px;
            margin: 20px 0;
            box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0rgba(0,0,0,0.12)!important;
         }
         h3{font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;
            margin: 10px 0;
         }
         button {
            background-color: #ACAD5C;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: right;
         }
         .lightbox {background-color: rgba(100, 100, 100, 0.5);}
      </style>
   </head>
   <body>
      <div class = "amp_example">
         <h3>Google AMP - Amp Date-Picker Overlay Multi Select Dates using type = range</h3>
         <div class = "row">
            <div class = "col-label">
               <label for = "start">Start Date:</label>
            <div>
            <div class = "col-content">
               <input type = "text" id = "start" name =
               "start" placeholder = "Start Date" on = "tap:lightbox.open">
            </div>
         </div>
         <div class = "row">
            <div class = "col-label">
               <label for = "end">End Date:</label>
            </div>
            <div class = "col-content">
               <input type = "text" id = "end" name =
                  "end" placeholder = "End Date" on = "tap:lightbox.open">
            </div>
         </div>
         <div class = "row">
            <div class = "col-label"></div>
            <div class = "col-content">
            <button class = "ampstart-btn caps" on =
               "tap:overlay-date.clear">Clear</button>
            </div>
         </div>
         <amp-lightbox id = "lightbox" layout = "nodisplay" class = "lightbox">
            <amp-date-picker id = "overlay-date"
               type = "range"
               layout = "fill"
               start-input-selector = "#start"
               end-input-selector = "#end"
               format = "YYYY-MM-DD"
               on = "activate: lightbox.open;deactivate: lightbox.close">
            </amp-date-picker>
         </amp-lightbox>
      </div>
   </body>
</html>

出力

Amp datepicker overlay select

ユーザーが入力フィールドをクリックすると、以下に示すように、日付ボックスがライトボックス内で開かれます-

Amp datepicker lightbox

これを実行するには、以下に示すように、入力フィールドにイベントが追加されます- 

<input type = "text" id = "start" name = "start"
   placeholder = "Start Date" on = "tap:lightbox.open">

<input type = "text" id = "end" name = "end"
   placeholder = "End Date" on = "tap:lightbox.open">
  • 「on」*は、tap-lightbox.openを呼び出してライトボックスを開くイベントです。

ここで、lightboxは、以下に示すようにamp-lightboxに与えられたIDです。 amp-date-pickerはamp-lightbox内で呼び出され、入力フィールドをタップするとアクティブになります。 

<amp-lightbox id = "lightbox" layout = "nodisplay" class = "lightbox">
   <amp-date-picker id = "overlay-date"
      type = "range"
      layout = "fill"
      start-input-selector = "#start"
      end-input-selector = "#end"
      format = "YYYY-MM-DD"
      on = "activate: lightbox.open;deactivate: lightbox.close">
   </amp-date-picker>
</amp-lightbox>

Google AMP-ストーリー

アンプストーリーは、ユーザーがストーリーに夢中になってコンテンツを表示するために使用されるアンプコンポーネントです。 たとえば、ブランドについて伝える一連の画像を使用します。

amp-storyを使用するには、以下に示すスクリプトを含める必要があります- 

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

この章では、アンプストーリーとは何か、どのように機能するかを理解しましょう。 画像ギャラリーがあり、ページに同じものを表示するとします。 アンプページでは、アンプストーリーコンポーネントを使用して、ユーザーに美しくインタラクティブに見せることができます。

amp-storyタグの形式は次のようになります- 

<amp-story standalone> ---> Main story Tag
   <amp-story-page id = "page-1"> ---> Pages inside the story e.g page1
      <amp-story-grid-layer template = "fill"> -->
         Layers for the page1.You can have more than one layer.
        //Add html elements here or amp components
      </amp-story-grid-layer>
      <amp-story-grid-layer template = "fill"> -->
         Layers for the page1.You can have more than one layer.
        //Add html elements here or amp components
      </amp-story-grid-layer>
      ...
   </amp-story-page>

   <amp-story-page id = "page-2"> ---> Pages inside the story e.g page2
      <amp-story-grid-layer template = "fill"> -->
         Layers for the page2.You can have more than one layer.
        //Add html elements here or amp components
      </amp-story-grid-layer>
      ...
   </amp-story-page>
   ...
</amp-story>

次のようにアンプストーリーに追加されたいくつかの属性があります- 

<amp-story standalone title = "My Story"
   publisher = "The AMP Team"
   publisher-logo-src = "publisherlogo image here"
   poster-portrait-src = "poster portrait here"
   poster-square-src = "poster square image here"
   poster-landscape-src = "poster landscape image here">

この機能により、アンプを使用したスト​​ーリーが非常にインタラクティブになります。

次のコードは、amp-storyの実際の例を示しています。 同じ出力は、デスクトップモードとモバイルモードで表示されます。

例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <script async custom-element = "amp-story" src = "https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
      <title>Google AMP - Story</title>
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale=1">
      <link rel = "canonical" href = "/stories/introduction/amp_story_hello_world/">

      <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>

      <style amp-custom>
         amp-story {
            font-family: Roboto, Helvetica, Arial, sans-serif;
         }
         amp-story-page * {
            color: white;
            text-align: center;
         }
      </style>
   </head>
   <body>
      <amp-story standalone title = "Stories in AMP - Hello World" publisher = "AMP Project">
         <amp-story-page id = "page-1">
            <amp-story-grid-layer template = "fill">
               <amp-img src = "images/christmas1.jpg"
                  width = "300" height = "250"
                  layout = "responsive">
               </amp-img>
            </amp-story-grid-layer>
               <amp-story-grid-layer template = "vertical">
                  <h1>Hello World</h1>
                  <p>This is an AMP Story.</p>
               </amp-story-grid-layer>
            </amp-story-page>

            <amp-story-page id = "page-2">
               <amp-story-grid-layer template = "fill">
                  <amp-img src = "images/christmas5.jpg"
                     width = "300" height = "250"
                     layout = "responsive">
                  </amp-img>
               </amp-story-grid-layer>
               <amp-story-grid-layer template = "vertical">
                  <h1>Hello World</h1>
                  <p>This is an AMP Story.</p>
               </amp-story-grid-layer>
            </amp-story-page>

            <amp-story-page id = "page-3">
               <amp-story-grid-layer template = "fill">
                  <amp-img src = "images/christmas3.jpg"
                     width = "300" height = "250"
                     layout = "responsive">
                  </amp-img>
               </amp-story-grid-layer>
               <amp-story-grid-layer template = "vertical">
                  <h1>Hello World</h1>
                  <p>This is an AMP Story.</p>
               </amp-story-grid-layer>
            </amp-story-page>

            <amp-story-page id = "page-4">
               <amp-story-grid-layer template = "fill">
                  <amp-img src = "images/christmas4.jpg"
                     width = "300" height="250"
                     layout = "responsive">
                  </amp-img>
               </amp-story-grid-layer>
               <amp-story-grid-layer template = "vertical">
                  <h1>Hello World</h1>
                  <p>This is an AMP Story.</p>
              </amp-story-grid-layer>
            </amp-story-page>

            <amp-story-bookend src = "ampstory.json" layout = "nodisplay">
         </amp-story-bookend>
      </amp-story>
   <body>
</html>

ampstory.json

{
   "bookendVersion": "v1.0",
   "shareProviders": [
      "email",
      "twitter",
      "tumblr",
      {
         "provider": "facebook",
         "app_id": "254325784911610"
      }
   ],
      "components": [
      {
         "type": "heading",
         "text": "Introduction"
      },
      {
         "type": "small",
         "title": "Next Story is on Car Brands",
         "url": "ampcarbrandl",
         "image": "images/audi.jpg"
      }
   ]
}

デスクトップへの出力

デスクトップに出力

デスクトップ上の出力

デスクトップの出力

出力デスクトップ

これがストーリーセクションの表示方法です。 ビデオやその他のアンプコンポーネントを追加して、ストーリーをよりインタラクティブにすることもできます。

それが物語の終わりに達すると、以下に示すようにアンプブックエンドで与えられているものを示します- 

<amp-story-bookend
   src = "ampstory.json" layout = "nodisplay">
</amp-story-bookend>

ampstory.jsonファイルをamp-bookendに指定しました。jsonファイルには、次のように次のストーリーのプレビューの詳細が含まれています。 ユーザーが右側に示されている3つのドットをクリックすると、次の画面が表示されます-

amp bookend

ストーリーを再度ロードするリプレイボタンが表示されます。 あなたは車のブランドの物語を表示する車の画像をクリックすることができます。

モバイルモードでの出力は次のとおりです-

モバイルモード

モバイルモード

モバイルモード

Google AMP-セレクター

アンプセレクターはオプションのメニューを表示するアンプコンポーネントであり、ユーザーはオプションを選択できます。 表示されるオプションは、テキスト、画像、またはその他のアンプコンポーネントです。 この章では、これについて詳しく説明します。

amp-selectorを使用するには、次のjavascriptファイルを含める必要があります- 

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

アンプセレクターの形式

次のコードは、アンプセレクターの形式のサンプルを示しています- 

<amp-selector layout = "container">
   <amp-img src = "images/christmas1.jpg"
      width = "60"
      height = "40"
      option = "1">
   <amp-img src = "images/christmas2.jpg"
      width = "60"
      height = "40"
      option = "2">
   </amp-img>
   <amp-img src = "images/christmas3.jpg"
      width = "60"
      height = "40"
      option = "3">
   </amp-img>
   <amp-img src = "images/christmas4.jpg"
      width = "60"
      height = "40"
      option = "4">
   </amp-img>
</amp-selector>

amp-selector内で標準のhtmlタグまたはampコンポーネントを使用できます。コンテンツは画面上のメニューのように表示され、ユーザーはそれらを選択できます。表示されるメニューは、単一選択または複数選択です。

以下に示す単一および複数選択の例を使用して、これを理解しましょう。

アンプセレクターシングルセレクト

次のコードは、アンプセレクターシングルセレクトのサンプルです- 

<!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 Selector</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-selector"
         src = "https://cdn.ampproject.org/v0/amp-selector-0.1.js">
      </script>
      <style amp-custom>
         amp-selector:not([disabled])
         amp-img[option][selected]:not([disabled]) {
            outline-color: #b6A848;
            outline-width: 2px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Selector</h3>
      <amp-selector layout = "container">
         <amp-img src = "images/christmas1.jpg"
            width = "60"
            height = "40"
            option="1">
         </amp-img>
         <amp-img src="images/christmas2.jpg"
            widt h = 60"
            height = "40"
            option = "2">
         </amp-img>
         <amp-img src = "images/christmas3.jpg"
            width = "60"
            height = "40"
            option = "3">
         </amp-img>
         <amp-img src = "images/christmas4.jpg"
            width = "60"
            height = "40"
            option = "4">
         </amp-img>
      </amp-selector>
   </body>
</html>

出力

上記のコードの出力は以下のとおりです-

Amp Sector

上記の例では、オプションを表示するためにamp-selectorと内部の画像を使用していることに注意してください。 これは単一の選択セレクタであるため、出力に示すように任意の1つの画像を選択できます。

アンプセレクターマルチセレクト

この例では、複数の属性を使用した画像でamp-selectorを表示します。セレクターから複数のオプションを選択できます。

例

<!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 Selector</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-selector"
         src = "https://cdn.ampproject.org/v0/amp-selector-0.1.js">
      </script>

      <style amp-custom>
         amp-selector:not([disabled])
         amp-img[option][selected]:not([disabled]) {
            outline-color: blue;
            outline-width: 2px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Selector</h3>
      <amp-selector layout = "container" multiple>
         <amp-img src = "images/christmas1.jpg"
            width = "60"
            height ="40"
            option = "1">
         </amp-img>
         <amp-img src="images/christmas2.jpg"
            width = "60"
            height = "40"
            option = "2">
         </amp-img>
         <amp-img src ="images/christmas3.jpg"
            width = "60"
            height = "40"
            option = "3">
         </amp-img>
         <amp-img src = "images/christmas4.jpg"
            width = "60"
            height = "40"
            option = "4">
         </amp-img>
      </amp-selector>
   </body>
</html>

出力

上記のコードの出力は以下のとおりです-

複数選択

また、以下のコードに示すように、アンプセレクタを使用してラジオボタンを表示することもできます-

例

<!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 Selector</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-selector"
         src = "https://cdn.ampproject.org/v0/amp-selector-0.1.js">
      </script>
      <style amp-custom>
         .radio-menu {
            list-style: none;
         }
         .radio-menu [option][selected] {
            outline: none;
         }
         .radio-menu [option] {
            display: flex;
            align-items: center;
         }
         .radio-menu [option]:before {
            transition: background 0.25s ease-in-out;
            content: "";
            display: inline-block;
            width: 24px;
            height: 24px;
            margin: 8px;
            border-radius: 100%;
            border: solid 1px black;
         }
         .radio-menu [option  = red][selected]:before {
            text-align: center;
            content: "✓";
            color: white;
            background: red;
         }
         .radio-menu [option  = green][selected]:before {
            text-align: center;
            content: "✓";
            color: white;
            background: green;
         }
         .radio-menu [option  = blue][selected]:before {
            text-align: center;
            content: "✓";
            color: white;
            background: blue;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Selector</h3>
      <amp-selector class = "radio-menu" layout = "container" name = "my-selector">
         <div option = "red">Red</div>
         <div option = "green">Green</div>
         <div option = "blue">Blue</div>
      </amp-selector>
   </body>
</html>

出力

ラジオボタン

Google AMP-リンク

ampのLinkタグは、利用可能なampページと非ampページについてGoogle検索エンジンに通知するために使用されます。 この章では、Linkタグに関連する側面と、Googleがampページとnon ampページについて決定する方法について詳しく説明します。

AMPページの発見

www.mypage.comというサイトがあるとします。 ニュース記事はページにリンクしています-www.mypage.com/news/myfirstnewsl。

ユーザーがGoogle検索エンジンで検索し、たまたまアンプページへの参照を取得するために、非アンプページを取得する場合、以下に示すようにリンクタグを使用してアンプのURLを指定する必要があります-

例

  • 非アンプページのページURL *
<link rel = "amphtml" href = "https://www.mypage.com/news/amp/myfirstnews_ampl">

ここでは、_rel =” amphtml” _がampバージョンを指すようにamp以外のページに指定されているため、プラットフォームに基づいて適切なものが表示されます。 

*amp-pageのページURL*
<link rel = "canonical" href = "https://www.mypage.com/news/myfirstnewsl">

ここで_rel =” canonical” _はampページでhtmlの標準バージョンを指すように指定されているため、Googleはプラットフォームに基づいて正しいバージョンを表示します。

あなたのサイトがアンプページである1つのページしか持っていない場合、それ自体を指すrel =” canonical”を追加することを忘れないでください- 

<link rel = "canonical" href = "https://www.mypage.com/news/amp/myfirstnews_ampl">

次の図は、ampページを指すrel =” amphtml”および標準のhtmlページを指すrel =” canonical”への参照を示しています。

AMP Html

リンクを使用するフォント

以下に示すように、リンクを使用してフォントを外部から読み込むことができます- 

<link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Roboto">

ホワイトリストに登録されたオリジンのみが許可されることに注意してください。 フォントを取得できるホワイトリストに登録されているオリジンのリストは、次のとおりです-

_rel =” canonical” _および_rel =” stylesheet” _を使用した作業例を以下に示します-

例

<!doctype html>
<html amp>
   <head>
      <meta charset ="utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "amppagel">
      <meta name = "viewport" content = "width = device-width,minimum-scale=1,initial-scale = 1">
      <style amp-custom>
         h1 {color: red}
      </style>

      <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>

      <link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Roboto">
   </head>
   <body>
      <h1>Amp Sample Page</h1>
      <p>
         <amp-img src = "images/christmas1.jpg"
            width = "300" height = "250"
            layout = "responsive">
         </amp-img>
      </p>

      <p style = "font-family: 'Roboto'; font-size:25px;">
         Welcome to Amp Page
      </p>
   </body>
</html>

出力

上記のコードの出力は以下のとおりです-

リンクを使用したフォント

Google AMP-フォント

Ampフォントはampのampコンポーネントであり、基本的にampページへのカスタムフォントのトリガーと監視に役立ちます。 この章では、amp-fontについて詳しく説明します。

amp-fontを使用するには、次のjavascriptファイルを追加する必要があります- 

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

amp-fontコンポーネントは、フォントのロードにかかる時間を制御するために使用されます。 タイムアウト属性があり、ミリ秒単位で時間がかかります。デフォルトでは、3000msです。 このコンポーネントを使用すると、必要なフォントがロードされているかエラー状態になっているかに応じて、document.documentElementまたはdocument.bodyからクラスを追加または削除できます。

amp-fontタグの形式は以下のとおりです- 

<amp-font
   layout = "nodisplay"
   font-family = "Roboto Italic"
   timeout = "2000"
   on-error-remove-class = "robotoitalic-loading"
   on-error-add-class = "robotoitalic-missing"
   on-load-remove-class = "robotoitalic-loading"
   on-load-add-class = "robotoitalic-loaded">
</amp-font>

ampページでamp-fontを使用する方法の実例は、次のとおりです-

例

<!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 Font</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>

      <cript async custom-element = "amp-font"
         src = "https://cdn.ampproject.org/v0/amp-font-0.1.js"
      ></script>
      <style amp-custom>
         @font-face {
            font-family: 'This font is not available';
            font-style: normal;
            font-weight: 300;
            src: url(fonts/MissingFont.ttf) format('truetype');
         }
         .font-missing {
            color:red;
            font-size:25px;
         }
      </style>
   </head>
   <body>
      <h1>Google AMP - Amp Font</h1>
         <amp-font
            layout = "nodisplay"
            font-family = "Font Does Not exist"
            timeout = "2000"
            on-error-remove-class = "font-missing"
            on-error-add-class = "font-error"
            on-load-remove-class = "font-missing"
            on-load-add-class = "font-loaded">
         </amp-font>
         <p class = "font-missing">
            Example of amp-font component to show how
            attributes on-error-remove-class,
            on-error-add-class, on-load-remove-class
            and on-load-add-class works when the font
            file to be loaded does not exist.
         </p>
   </body>
</html>

出力

上記のサンプルコードの出力は以下のとおりです-

Amp Font

フォントファイルが正常にロードされたときのamp-fontの例はここに示されています-

例

<!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 Font</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-font"
         src = "https://cdn.ampproject.org/v0/amp-font-0.1.js">
      </script>
      <style amp-custom>
         @font-face {
            font-family: 'This font is not available';
            font-style: normal;
            font-weight: 300;
            src: url(fonts/MissingFont.ttf)
            format('truetype');
         }
         @font-face {
            font-family: 'Roboto Italic';
            font-style: normal;
            font-weight: 300;
            src:url(fonts/Roboto-Italic.ttf) format('truetype');
         }
         .font-missing {
            color:red;
            font-size:25px;
         }
         .robotoitalic-loading {
            color: green;
         }
         .robotoitalic-loaded {
            font-size:25px;
            color: blue;
         }
         .robotoitalic-missing {
            color: red;
         }
         .robotoitalic {
            font-family: 'Roboto Italic';
         }
      </style>
   </head>
   <body>
      <h1>Google AMP - Amp Font</h1>
         <amp-font
            layout = "nodisplay"
            font-family = "Font Does Not exist"
            timeout = "2000"
            on-error-remove-class = "font-missing"
            on-error-add-class = "font-error"
            on-load-remove-class = "font-missing"
            on-load-add-class = "font-loaded">
         </amp-font>
         <p class="font-missing">
            Example of amp-font component to show
            how attributes on-error-remove-class,
            on-error-add-class, on-load-remove-class
            and on-load-add-class works when the
            font file to be loaded does not exist.
         </p>

         <amp-font
            layout = "nodisplay"
            font-family = "Roboto Italic"
            timeout = "2000"
            on-error-remove-class = "robotoitalic-
            loading"
            on-error-add-class = "robotoitalic-missing"
            on-load-remove-class = "robotoitalic-loading"
            on-load-add-class = "robotoitalic-loaded">
         </amp-font>
         <p class = "robotoitalic">
            Example of amp-font component to show how
            attributes on-error-remove-class,
            on-error-add-class, on-load-remove-class
            and on-load-add-class works when the font
            file exists and loads fine.
         </p>
   </body>
</html>

出力

上記のサンプルコードの出力は以下のとおりです-

Amp Font Loads

上記の例は、 font-family、timeout、on-error-remove-class、on-error-add-class、on-load-remove-class、on-load-add-class などのフォント属性を使用する方法を示しています。クラスは、フォントの読み込みにエラーがあるか成功したかを決定します。

Google AMP-リスト

amp-listは、CORS jsonエンドポイントを呼び出し、テンプレート内のjsonファイルの形式でデータを表示するampコンポーネントです。 例を使用してこれを理解しましょう。

amp-listを使用するには、次のスクリプトを含める必要があります- 

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

これはamp-listタグの形式です- 

<amp-list width = "auto" height = "100"
layout = "fixed-height" src = "amplist.json" class = "m1">
   <template type = "amp-mustache">
      <div class = "images_for_display">
         <amp-img width = "150"
            height = "100"
            alt = "{{title}}"
            src = "{{url}}">
         </amp-img>
      </div>
   </template>
</amp-list>

amp-listに使用されるsrcは、リストされる詳細を含むjsonファイルです。 通常のhtmlタグまたはamp-list内のamp-componentsを使用して、jsonファイルのデータを表示できます。 テンプレートタイプamp-mustacheは、表示するデータのデータバインディングに使用されます。

以下に示すように、実際の例を使用してこれを理解しましょう-

例

<!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 List</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-list"
         src = "https://cdn.ampproject.org/v0/amp-list-0.1.js">
      </script>

      <script async custom-template = "amp-mustache"
         src ="https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
      </script>

      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp List</h3>
      <amp-list width = "auto" height = "100"
         layout = "fixed-height" src = "amplist.json" class = "m1">
         <template type = "amp-mustache">
            <div class = "images_for_display">
               <amp-img width = "150"
                  height = "100"
                  alt = "{{title}}"
                  src = "{{url}}">
               </amp-img>
            </div>
         </template>
      </amp-list>
   </body>
</html>

出力

上記の作業例の出力は以下のとおりです-

Amp Font Working Example

上記の作業例で使用されているjsonファイルは次のとおりです- 

{
   "items": [
      {
         "title": "Christmas Image 1",
         "url": "images/christmas1.jpg"
      },
      {
         "title": "Christmas Image 2",
         "url": "images/christmas2.jpg"
      },
      {
         "title": "Christmas Image 3",
         "url": "images/christmas3.jpg"
      },
      {
         "title": "Christmas Image 4",
         "url": "images/christmas4.jpg"
      }
   ]
}

以下のコードに示すように、amp-listのイベントを使用してリストを更新できます-

例

<!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 List</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-list"
         src = "https://cdn.ampproject.org/v0/amp-list-0.1.js">
      </script>

      <script async custom-template = "amp-mustache"
         src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
      </script>

      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
         button{
            background-color: #ACAD5C;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: right;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp List</h3>
      <button on = "tap:amplist.refresh">Refresh Images</button>

      <amp-list id = "amplist" width = "auto" height = "100"
         layout = "fixed-height" src = "amplist.json" class = "m1">
      <template type = "amp-mustache">
         <div class = "images_for_display">
            <amp-img width = "150"
               height = "100"
               alt = "{{title}}"
               src = "{{url}}"></amp-img>
         </div>
      </template>
      </amp-list>
   </body>
</html>

出力

上記の作業例の出力は、次のとおりです-

Amp Font List

クリックすると、以下に示すようにonイベントを使用して更新アクションを呼び出すボタンが追加されます- 

<button on = "tap:amplist.refresh">
   Refresh Images
</button>
//amplist is the id used for amp-list

ボタンをクリックすると、jsonファイルが再度呼び出され、コンテンツがロードされます。 すでにロードされている画像がある場合、それらはキャッシュされます。

Google AMP-ユーザー通知

Google amp-user-notificationは、ユーザーに非表示のダイアログボックスメッセージを表示するために使用されます。 これを使用して、ページ上のCookieについてユーザーに通知できます。

amp-user-notificationを使用するには、ページに次のスクリプトを追加する必要があります- 

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

Amp-user-notificationタグの形式- 

<amp-user-notification id = "my-notification" layout = "nodisplay">
   <div>Example of amp-user-notification.
      <button on = "tap:my-notification.dismiss">I accept
      </button>
   </div>
</amp-user-notification>

実際の例を使用してamp-user-notificationを理解しましょう-

例

<!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 Selector</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-user-notification"
         src = "https://cdn.ampproject.org/v0/amp-user-notification-0.1.js">
      </script>

      <style amp-custom>
         div {
            font-size: 15px;
            background-color : #ccc;
            padding: 10px 10px;
            border-radius: 2px;
         }
         button{
            background-color: #ACAD5C;
            color: white;
            cursor: pointer;
            float: right;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp User Notification</h3>
      <amp-user-notification
         id = "my-notification"
         layout = "nodisplay">
         <div>Example of amp-user-notification.
            <button on = "tap:my-notification.dismiss">I accept
            </button>
         </div>
      </amp-user-notification>
   </body>
</html>

出力

上記の作業例のコードの出力は以下のとおりです-

Amp Font User Notification

ユーザーがボタンをクリックすると、通知は閉じられます。 一度削除すると、ページをリロードしても通知は表示されません。

ユーザー通知のデータはブラウザーのlocalStorageに保存されます。localstorageがクリアされてページが更新されると、通知を再度表示できます。 ブラウザコンソールで* localStorage.clear（）*を使用して同じことを試すことができます。 

*dismiss* アクションを使用すると、次のようにボタンのアクションを使用して、通知を却下できます。
<button on = "tap:my-notification.dismiss">
   I accept
</button>

ユーザーがボタンをタップすると、通知は消えます。

Google AMP-次のページ

アンプの次のページは、ユーザーがドキュメントの最後に到達したときに、より多くのページを動的にロードできるアンプコンポーネントです。 この章では、この概念について詳しく説明します。

amp-next-pageコンポーネントを使用するには、次のスクリプトを追加する必要があります- 

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

また、amp-next-pageは完全には起動されないため、テストページを機能させるには、次のメタタグを追加します- 

<meta name = "amp-experiments-opt-in" content = "amp-next-page">

ページを動的にロードするには、以下に示すように、type =” application/json”のスクリプトタグにページURLを指定する必要があります- 

<amp-next-page>
   <script type = "application/json">
      {

         "pages": [
            {
            "title": "Page 2",
            "image": "images/christmas1.jpg",
            "ampUrl": "ampnextpage1l"
            },
            {
            "title": "Page 3",
            "image": "images/christmas1.jpg",
            "ampUrl": "ampnextpage2l"
            }
         ]
      }
   </script>
</amp-next-page>

上記のタグでは、2つのページ ampnextpage1l および ampnextpage2l をロードしようとしています。

それでは、最終的な出力を見てみましょう。 ロードする必要があるすべてのページは、title、image、およびampUrlを含むページ配列に追加する必要があります。

例

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Google Amp - Next Page</title>
      <link rel = "canonical" href = "ampnextpagel">
      <meta name = "amp-experiments-opt-in" content = "amp-next-page">
      <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 src="https://cdn.ampproject.org/v0.js">
      </script>
      <script async custom-element = "amp-next-page"
         src = "https://cdn.ampproject.org/v0/amp-next-page-0.1.js">
      </script>
   </head>
   <body>
      <h1>Google Amp - Next Page</h1>
      <h1>Page 1</h1>
      <p>Start of page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>This content is loaded from page 1</p>
      <p>End of page 1</p>

      <amp-next-page>
         <script type = "application/json">
            {
               "pages": [
                  {
                     "title": "Page 2",
                     "image": "images/christmas1.jpg",
                     "ampUrl": "ampnextpage1l"
                  },
                  {
                     "title": "Page 3",
                     "image": "images/christmas1.jpg",
                     "ampUrl": "ampnextpage2l"
                  }
               ]
            }
         </script>
      </amp-next-page>
   </body>
</html>

出力

次の通知を受け取る

次のページを開く

次のページを開く

スクロールすると、ロードされる次のページが表示され、アドレスバーのページURLも変更されることに気付くことができます。

Google AMP-属性

この章では、アンプコンポーネントで使用されるすべての一般的な属性について説明します。

一般的な属性のリストは次のとおりです-

  • 後退する
  • ハイツ
  • レイアウト
  • メディア
  • 無負荷
  • on
  • プレースホルダー
  • サイズ
  • 幅と高さ

フォールバック属性

フォールバック属性は、ブラウザが使用されている要素をサポートしていない場合、またはファイルの読み込みに問題がある場合、または使用されているファイルにエラーがある場合に主に使用されます。

たとえば、amp-videoを使用していて、メディアファイルにブラウザーの問題があるため、このような場合、フォールバック属性を指定して、メディアファイルを再生できないか、ブラウザーでサポートされていないというメッセージを表示できますページ上のエラーメッセージ。

amp-videoで使用されるフォールバック

<amp-video controls
   width = "640"
   height = "360"
   layout = "responsive"
   poster = "images/videoposter.png">
   <source src = "video/bunny.webm" type = "video/webm"/>
   <source src = "video/samplevideo.mp4" type = "video/mp4"/>
   <div fallback>
      <p>This browser does not support the video element.</p>
   </div>
</amp-video>

私たちは例を使用してOSのフォールバックを理解してみましょう-

例

<!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 Video</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-video"
         src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Amp Video</h3>
      <amp-video controls
         width = "640"
         height = "360"
         layout = "responsive"
         poster = "images/videoposter.png">
         <source src = "video/bunny.webm"type="video/webm"/>
         <source src = "video/samplevideo.mp4"type = "video/mp4"/>
         <div fallback>
            <p>This browser does not support the video element.</p>
         </div>
      </amp-video>
   </body>
</html>

出力

フォールバック属性

高さ属性

この属性は基本的にレスポンシブレイアウトでサポートされています。 メディア式をheights属性に使用すると、要素の高さに適用されます。 また、パーセント値も取得するため、指定されたパーセント幅に基づいて高さが計算されます。

例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - heights attribute</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>

      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         h1{font-family: "Segoe UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - heights attribute</h1>
      <amp-img src = "images/christmas1.jpg"
         width = "320" height = "256"
         heights = "(min-width:500px) 200px, 80%">
      </amp-img>
   </body>
</html>

出力

高さ属性

レイアウト属性

AMP-Layoutは、google-ampで利用できる重要な機能の1つです。 Amp Layoutは、ページが読み込まれたときに、ちらつきやスクロールの問題を引き起こすことなく、アンプコンポーネントが適切にレンダリングされるようにします。 また、画像のHTTPリクエストなどの他のリモートリソースの前にページレンダリングをチェックし、データ呼び出しが行われます。

ampがサポートするレイアウトのリストは次のとおりです-

  • 現在ではない
  • 容器
  • fill
  • 一定
  • 固定高さ
  • フレックスアイテム
  • 固有の
  • ディスプレイなし
  • レスポンシブ

このチュートリアルの* Google AMP-レイアウト*の章で同じことについて詳しく学びます。

示されている例の助けを借りて、layout = "responsive"の動作を理解しましょう-

例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image>/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>

      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         displayitem {
            display: inline-block;
            width: 200px;
            height:200px;
            margin: 5px;
         }
         h1{font-family: "Segoe
         UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Layout = responsive Image Example>/h1>
      <div class = "displayitem">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            width = "246"
            height = "205"
            layout = "responsive">
         </amp-img>
      </div>
   </body>
</html>

出力

レイアウト属性

メディア属性

この属性は、ほとんどのアンプコンポーネントで使用できます。 メディアクエリを受け取り、値がコンポーネントと一致しない場合、レンダリングされません。

例の助けを借りてメディア属性の働きを理解しましょう-

例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image</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>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         h1{font-family: "Segoe
         UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Media Attribute</h1>
      <div class = "displayitem">
         <amp-img
            media = "(min-width: 600px)"
            src = "images/christmas1.jpg"
            width = "466"
            height = "355"
            layout = "responsive">
         </amp-img>
      </div>
   </body>
</html>

以下に示すように、<amp-img>タグでmedia属性を使用しました- 

<amp-img
   media = "(min-width: 600px)"
   src = "images/christmas1.jpg"
   width = "466"
   height = "355"
   layout = "responsive">
</amp-img>

画面の幅が600ピクセル未満の場合、画像は表示されないことに注意してください。 Googleエミュレーターモバイルモードを使用して例をテストします。

スマートフォンでの出力

メディア属性

デバイスの幅が600px未満であるため、画像が表示されないデバイスをチェックしました。 タブレットで確認すると、以下に示すような出力が得られます-

IPADでの出力

IPADで出力

ローディング属性

<amp-img>、<amp-video>、<amp-facebook>などのAmpコンポーネントは、実際のコンテンツがロードされてユーザーに表示される前にロードインジケーターを表示します。

ロードインジケータの表示を停止するには、次のようにnoloading属性を使用することができます- 

<amp-img src = "images/christmas1.jpg"
   noloading
   height = "300"
   width = "250"
   layout = "responsive">
</amp-img>

属性について

on属性は、イベント処理の要素とampコンポーネントのアクションで使用されます。 属性で使用する構文は次のとおりです-

構文- 

on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]"
*on* 属性に渡される詳細は次のとおりです-
  • eventName -これはampコンポーネントで利用可能なイベントの名前を取ります。 たとえば、フォームの場合、submit-success、submit-error eventNamesを使用できます。
  • elementId -これは、イベントを呼び出す必要がある要素のIDを取得します。 成功またはエラーについて知りたいフォームのIDを指定できます。
  • methodName -これは、イベント発生時に呼び出されるメソッドの名前を取ります。
  • arg = value -これは、key = value形式の引数をメソッドに渡します。

次のようにOn属性に複数のイベントを渡すことも可能です- 

on = "submit-success:lightbox;submit-error:lightbox1"

注-複数のイベントがある場合、それらはon属性に渡され、セミコロン（;）を使用して分離されます。

アクション属性

アクションは基本的にon属性で使用され、構文は次のとおりです- 

on = "tab:elementid.hide;"

次のように複数のアクションを渡すことができます- 

on = "tab:elementid.open;tab:elementid.hide;”
*Elementid* は、アクションが実行される要素のIDです。

Ampには、すべてのampコンポーネントで使用できるグローバルに定義されたイベントとアクションがあり、それらは*タップイベント*であり、アクションは hide、show および togglevisibility です。

注-htmlまたはampコンポーネントで非表示/表示またはtogglevisibilityを使用する場合は、 on =” tap：elementid。[hide/show/togglevisibility]” を使用できます。

プレースホルダー属性

プレースホルダー属性は、入力要素などの任意のhtml要素で使用でき、ampコンポーネントでも使用できます。プレースホルダーは、ページに最初に表示され、コンテンツが読み込まれるとプレースホルダーが削除され、見えなくなりました。

入力要素のプレースホルダー

<input type = "text" id = "date" name = "date" placeholder = "Start Date">

ampコンポーネントのプレースホルダー

<amp-anim src = "images/loreal.gif" width = "300" height = "250" layout = "responsive">
   <amp-img placeholder src = "images/flower.jpg"
   layout = "fill">
   </amp-img>
</amp-anim>

サイズ属性

これは、高さ属性と同じように使用されます。 値は以下に示す式です- 

<amp-img src = "amp.png"
   width = "400" height = "300"
   layout = "responsive"
   sizes = "(min-width: 250px) 250px, 100vw">
</amp-img>

幅と高さの属性

それらは、ほぼすべてのhtml要素とampコンポーネントで使用されます。 幅と高さは、アンプ要素がページ上で占めるスペースを示すために使用されます。

例

<amp-img src = "amp.png"
   width = "400" height = "300"
   layout = "responsive">
</amp-img>

Google AMP-スタイルとカスタムCSS

Ampは、多くの慎重な検討の後に画面にページをレンダリングします。読み込まれるページには、実行されるHTTP要求の多くである画像、ビデオ、iframeなどが含まれます。 そのため、ページ上のコンテンツが表示され、画像、ビデオ、iframeをロードするために必要なスペースが作成されるように、実行されるhttpリクエストが遅延されます。

Ampには、プレースホルダー、フォールバック、srcset、レイアウト属性などの機能があり、ページをレスポンシブにし、ページのコンテンツが乱されないようにします。 この章では、これらすべてについて詳しく説明します。

アンプスタイルタグ

Ampには、以下に示すように、 amp-custom が付いたスタイルタグがあります- 

<style amp-custom>
   button{
      background-color: #ACAD5C;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      float: left;
   }
   amp-img {
      border: 1px solid black;
      border-radius: 4px;
      padding: 5px;
   }
   p {
      padding: 1rem;
      font-size:25px;
   }
   largeText {
      font-size:30px;
      background-color:red;
   }
</style>

基本的に、ページに必要なカスタムcssを記述するために使用されます。 amp-custom 属性を追加することを忘れないでください。そうしないと、以下に示すようにアンプの検証に失敗します-

Amp Style Tag

Ampは、以下に示すように、html要素のインラインcssもサポートしています- 

<div style = "color:green;margin-left:30px;">
Welcome to finddevguides</p>

外部スタイルシートタグ

Ampは外部スタイルシートをサポートしていないため、ampで検証されると検証に失敗します。

例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Dynamic Css Classes</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-bind" src = "
      https://cdn.ampproject.org/v0/amp-bind-0.1.js">
      </script>

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

      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.9 8.0/css/materialize.min.css">
      <style amp-custom>
         p {
            padding: 1rem;
            font-size:25px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Dynamic Css Classes</h3>
      <div style = "color:green;margin-left:30px;">
      Welcome to finddevguides</p>
   </body>
</html>

AMP validatorで検証すると、次のエラーが発生します。

Amp Style Tag

ページの要素をレスポンシブに表示するには、amp要素は要素がページ上で取る幅と高さを指定する必要があります。 レイアウト=「レスポンシブ」を追加すると、要素がページでレスポンシブになり、アスペクト比が維持されます。

レイアウト属性の詳細については、* Google AMP –レイアウト*の章で詳しく説明します。

Google AMP-動的CSSクラス

amp-dynamic-css-classesは、動的クラスをbodyタグに追加します。 この章では、このタグの詳細を学びましょう。

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

<script asynccustom-element="amp-dynamic-css-classes"
   src = "https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js">
</script>

amp-dynamic-css-classesによって世話をされる2つの重要なクラスがあります- 

*amp-referrer-*
*アンプビューア

それぞれについて詳しく説明します。

amp-referrer-*

これらのクラスは、ユーザーの来方に応じて設定されます。 ユーザーがGoogleから来ている場合、Googleに関連するリファラークラスが設定されます。 同じことがTwitterとPinterestにも当てはまります。

クラスはリファラーのタイプに基づいて利用可能です。

たとえば、Googleの場合、ユーザーがGoogle検索エンジンからampページをクリックすると、次のクラスが追加されます。

  • amp-referrer-www-google-com
  • amp-referrer-google-com
  • amp-referrer-com

同様に、Twitter、Pinterest、Linkedinなどで利用できるクラスがあります。

アンプビューア

Ampビューアーは、基本的にアンプのURLを変更して、Googleキャッシュから詳細を取得します。 Google検索で何かを検索すると、表示されるカルーセルにはすべてのアンプページが表示されます。

それらをクリックすると、接頭辞としてGoogle urlを使用してURLにリダイレクトされます。 amp-viewerクラスは、ユーザーがamp-viewerでページを表示し、動的クラスを使用しているときに設定されます。

amp viewer

アンペアページをクリックすると、アドレスバーに表示されるURLは次のようになります- 

https://www.google.co.in/amp/s/m.timesofindia.com/sports/cricket/india-in-australia/to-hell-with-the-nets-boys-need-rest-ravi-shastri/amp_articleshow/67022458.cms

amp viewer

例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset =  "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Dynamic Css Classes</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-bind"
         src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
      </script>
      <script async custom-element = "amp-dynamic-css-classes"
         src = "https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js">
      </script>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">

      <style amp-custom>
         body:not(.amp-referrer-pinterest-com) .if-pinterest,
         body:not(.amp-referrer-ampbyexample-com) .if-ampbyexample,
         body:not(.amp-referrer-google-com) .if-google,
         body:not(.amp-referrer-twitter-com) .if-twitter,
         body:not(.amp-referrer-linkedin-com) .if-linkedin,
         body:not(.amp-referrer-localhost) .if-localhost {
            display: none;
         }
         body:not(.amp-viewer) .if-viewer,
            body.amp-viewer .if-not-viewer {
            display: none;
         }
         p {
            padding: 1rem;
            font-size:25px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Dynamic Css Classes</h3>
      <div>

         <p class = "if-pinterest">You were referred here or embedded by Pinterest!</p>
         <p class = "if-twitter">You were referred here or embedded by Twitter!</p>
         <p class = "if-google">You were referred here or embedded by Google!</p>
         <p class = "if-ampbyexample">You came here directly! Cool :)</p>
         < class = "if-localhost">You came here directly! Cool :)&lt/p>
      &lt/div>
      &ltdiv>
         <p class = "if-not-viewer">Hey! You are not coming from amp viewer&lt/p>
         <p class = "if-viewer">Hey! From amp viewer.</p>
      <div>
   </body>
</html>

出力

amp動的cssクラス

Google AMP-アクションとイベント

ampコンポーネントでアクションまたはイベントを使用するには、on属性を使用できます。 この章では、それらについて詳しく説明します。

イベント

イベントで動作する構文は次のとおりです- 

on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]"
*on* 属性に渡される詳細は次のとおりです-
  • eventName -これはampコンポーネントで利用可能なイベントの名前を取ります。 たとえば、フォームの場合、submit-success、submit-error eventNamesを使用できます。
  • elementId -これは、イベントを呼び出す必要がある要素のIDを取得します。 成功またはエラーについて知りたいフォームのIDを指定できます。
  • methodName -これは、イベント発生時に呼び出されるメソッドの名前を取ります。
  • arg = value -これは、key = value形式の引数をメソッドに渡します。

また、複数のイベントをon属性に渡すこともでき、次のように行われます- 

on = "submit-success:lightbox;submit-error:lightbox1"

複数のイベントがある場合、それらはon属性に渡され、セミコロン（;）を使用して区切られます。

行動

アクションは基本的にon属性で使用され、構文は次のとおりです- 

on = "tab:elementid.hide;"

次のように複数のアクションを渡すことができます- 

on = "tab:elementid.open;tab:elementid.hide;”
*Elementid* は、アクションが実行される要素のIDです。

Ampには、任意のampコンポーネントで使用できるグローバルに定義されたイベントとアクションがあり、それらは* tapイベント*であり、アクションは hide、show および togglevisibility です。

htmlコンポーネントまたはampコンポーネントで非表示/表示またはtogglevisibilityを使用する場合は、 on =” tap：elementid。[hide/show/togglevisibility]” を使用できます。

イベントとアクションの実例をいくつか見てみましょう。

入力要素上

実用的な例の助けを借りてこれをよりよく理解しましょう-

例

<!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 Bind</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-bind" src = "
         https://cdn.ampproject.org/v0/amp-bind-0.1.js">
      </script>

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

      <style amp-custom>
         button{
            background-color: #ACAD5C;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: left;}

         .lightbox {
            background: rgba(211,211,211,0.8);
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
         }
         #txtname{
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
         }
         div {
            font-size:25px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Bind</h3>
      <button on = "tap:AMP.setState({displaylightbox: true})">
         Click Here
      </button>
      <br/>
      <br/>

      <h3>AMP - Input Element</h3>
      <input id = "txtname" placeholder = "Type here" on =
         "input-throttled:AMP.setState({name: event.value})">
      <div [text] = "name"></div>
   </body>
</html>

出力

amp bind

上記の例では、次のように入力フィールドでイベントを使用していることに注意してください- 

<input id = "txtname" placeholder = "Type here"
on = "input-throttled:AMP.setState({name: event.value})">

使用されるイベントは input-throlled です。

また、次のように変更を使用することができます- 

<input id = "txtname" placeholder = "Type here" on =
"change:AMP.setState({name: event.value})">

ユーザーが入力ボックスから出てくると、出力が表示されます。 ラジオ、チェックボックスなどの入力タイプ、およびselect要素でchangeイベントを使用できます。 

<input id = "txtname" placeholder = "Type here" on =
"input-debounced:AMP.setState({name: event.value})">

イベント input-debounced は* change * eventと同じですが、ユーザーが入力してから300ms後に出力が表示されます。

例

<!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 Bind</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-bind"
         src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
      </script>

      <script async custom-element = "amp-lightbox"
         src = "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
      </script>
      <style amp-custom>
         button{
            background-color: #ACAD5C;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: left;
         }
         .lightbox {
            background: rgba(211,211,211,0.8);
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
         }
         #txtname{
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
         }
         div {
            font-size:25px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Bind</h3>
      <button on = "tap:AMP.setState({displaylightbox: true})">
         Click Here
      </button>
      <br/>
      <br/>

      <h3>AMP - Input Element</h3>
         <input id = "txtname" placeholder = "Type here" on =
         "input-debounced:AMP.setState({name: event.value})">
      <div [text] = "name"></div>
   </body>
</html>

出力

Amp Input Bounced

Amp Lightboxで

このセクションでは、ライトボックスで次のイベントをテストします-

  • lightboxOpen
  • ライトボックス閉じる

例

<!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 Lightbox</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-bind"
         src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
      </script>

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

      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
         button {
            background-color: #ACAD5C;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: left;
         }
         .lightbox {
            background: rgba(211,211,211,0.8);
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
         }
         p{font-size:30px;}
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Lightbox</h3>
      <p [text] = "'Lightbox is ' + lightboxstatus + '.'">
         Lightbox Event Testing
      </p>
      <button on = "tap:my-lightbox.open">
         Show LightBox
      </button>
      <amp-lightbox id = "my-lightbox" layout = "nodisplay"
      close-button on = "lightboxOpen:AMP.setState({lightboxstatus:'opened'});
      lightboxClose:AMP.setState({lightboxstatus:'closed'});">
         <div class = "lightbox">
            <amp-img alt = "Beautiful Flower" src = "images/loreal.gif"
               width = "246"
               height = "205">
            </amp-img>
         </div>
      </amp-lightbox>
   </body>
</html>

出力

Amp Lightbox

次のコードは、イベントの開閉がライトボックスでどのように実装されるかを示しています- 

<p [text]="'Lightbox is ' + lightboxstatus + '.'">Lightbox Event Testing</p>
<button on = "tap:my-lightbox.open">Show LightBox</button>
<amp-lightbox id = "my-lightbox" layout = "nodisplay"
   close-button on = "lightboxOpen:AMP.setState({lightboxstatus:'opened'});
   lightboxClose:AMP.setState({lightboxstatus:'closed'});">

   <div class = "lightbox">
      <amp-img alt = "Beautiful Flower" src = "images/loreal.gif"
         width = "246"
         height = "205">
      </amp-img>
   </div>
</amp-lightbox>

Amp -Selectorのイベント

amp-selectorで利用可能なイベントは select です。

例

<!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 Selector</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-bind"
         src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
      </script>

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

      <style amp-custom>
         .radio-menu {
            list-style: none;
         }
         .radio-menu [option][selected] {
            outline: none;
         }
         .radio-menu [option] {
            display: flex;
            align-items: center;
         }
         .radio-menu [option]:before {
            transition: background 0.25s ease-in-out;
            content: "";
            display: inline-block;
            width: 24px;
            height: 24px;
            margin: 8px;
            border-radius: 100%;
            border: solid 1px black;
         }
         .radio-menu [option = red][selected]:before {
            text-align: center;
            content: "✓";
            color: white;
            background: red;
         }
         .radio-menu [option = green][selected]:before {
            text-align: center;
            content: "✓";
            color: white;
            background: green;
         }
         .radio-menu [option = blue][selected]:before {
            text-align: center;
            content: "✓";
            color: white;
            background: blue;
         }
         p{font-size:30px;}
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Selector</h3>
      <p [text] = "'Color selected is ' + ampselectorstatus + '.'">
         Amp Selector Event Testing
      <p>
      <amp-selector
         class = "radio-menu"
         layout = "container"
         name = "my-selector"
         on = "select:AMP.setState({ampselectorstatus:event.selectedOptions})">
         <div option = "red">
            Red
         </div>
         <div option = "green">
            Green
         </div>
         <div option = "blue">
            Blue
         </div>
      </amp-selector>
   </body>
</html>

出力

アンプのイベント

イベント選択は次のように使用されます- 

<p [text]="'Color selected is ' + ampselectorstatus + '.'">
   Amp Selector Event Testing
</p>
<amp-selector
   class = "radio-menu"
   layout  ="container"
   name =" my-selector"
   on = "select:AMP.setState({ampselectorstatus:event.selectedOptions})">
   <div option = "red">
      Red
   </div>
   <div option = "green">
      Green
   </div>
   <div option = "blue">
      Blue
   </div>
</amp-selector>

アンプサイドバーのイベント

使用可能なイベントは、 sidebarOpen および sidebarClose です。

例

<!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 Sidebar</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-bind"
         src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
      </script>
      <script async custom-element = "amp-sidebar"
         src = "https://cdn.ampproject.org/v0/amp-sidebar-0.1.js">
      </script>
      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
         button{
            background-color: #ACAD5C;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: left;
         }
         .amp-sidebar-toolbar-target-shown {
            display: none;
         }
         p{font-size:30px;}
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Sidebar</h3>
      <p [text] = "'Sidebar is ' + ampsidebarstatus + '.'">
         Amp Sidebar Event Testing
      </p>
      <button on = "tap:sidebar1">
         Show Sidebar
      </button>
      <amp-sidebar
         id = "sidebar1"
         layout = "nodisplay"
         side = "right"
         on = "sidebarOpen:AMP.setState({ampsidebarstatus: 'Opened'});
         sidebarClose:AMP.setState({ampsidebarstatus: 'Closed'})">
         <ul>
            <li>Nav item 1</li>
            <li>
               <a href = "#idTwo" on = "tap:idTwo.scrollTo">Nav item 2</a>
            </li>
            <li>Nav item 3</li>
            <li>
               <a href = "#idFour" on="tap:idFour.scrollTo">Nav item 4</a>
            </li>
            <li>Nav item 5</li>
            <li>Nav item 6</li>
         </ul>
      </amp-sidebar>
      <div id = "target-element">
      </div>
   </body>
</html>

出力

Amp-Sidebar

イベントは次のように使用されます- 

<p [text] = "'Sidebar is ' + ampsidebarstatus + '.'">
   Amp Sidebar Event Testing
</p>
<button on = "tap:sidebar1">
   Show Sidebar
</button>
<amp-sidebar
   id = "sidebar1"
   layout = "nodisplay"
   side = "right"
   on = "sidebarOpen:AMP.setState({ampsidebarstatus: 'Opened'});
   sidebarClose:AMP.setState({ampsidebarstatus: 'Closed'})">
   <ul>
      <li>Nav item 1</li>
      <li>
         <a href = "#idTwo" on = "tap:idTwo.scrollTo">Nav item 2</a>
      </li>
      <li>Nav item 3</li>
      <li>
         <a href = "#idFour" on = "tap:idFour.scrollTo">Nav item 4</a>
      </li>
      <li>Nav item 5</li>
      <li>Nav item 6</li>
   </ul>
</amp-sidebar>

Google AMP-アニメーション

アンプアニメーションは、他のアンプコンポーネントで使用されるアニメーションを定義するアンプコンポーネントです。 この章では、それらについて詳しく説明します。

アンプアニメーションを使用するには、次のスクリプトを追加する必要があります- 

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

アニメーションの詳細は、json構造内で定義されます。

  • アンプアニメーション*の基本構造はここに示されているとおりです-
<amp-animation layout = "nodisplay">
   <script type = "application/json">
      {
        //Timing properties
         ...
         "animations": [
            {
              //animation 1
            },
            ...
            {
              //animation n
            }
         ]
      }
   </script>
</amp-animation>

アニメーション*コンポーネントは、次のもので構成されます-*セレクター、変数、タイミングプロパティ、キーフレームなど。 

{
   "selector": "#target-id",
  //Variables
  //Timing properties
  //Subtargets
   ...
   "keyframes": []
}

セレクタ

ここでは、アニメーションが使用される要素のクラスまたはIDを指定する必要があります。

変数

キーフレーム内で使用されるように定義されている値です。 変数は* var（）*を使用して定義されます。

例

{
   "--delay": "0.5s",
   "animations": [
      {
         "selector": "#target1",
         "delay": "var(--delay)",
         "--x": "150px",
         "--y" : "200px",
         "keyframes": {
            "transform": "translate(var(--x), var(--y, 0px)"
         }
      }
   ]
}

ここで、 delay 、x、および y は変数であり、変数の値は示されている例で定義されています。

タイミング特性

ここで、アニメーションの継続時間と遅延を定義できます。 以下は、サポートされているタイミングのプロパティです-

Property Value Description
duration Time property.Value has to be in milliseconds. The duration used for animation.
delay Time property.Value has to be in milliseconds. The delay before animation starts executing
endDelay Time property.Value has to be in milliseconds or seconds. The delay given which applies when the animation completes.
iterations Value has to be a number. The number of times the animation has to repeat.
iterationStart Value has to be a number. The time offset at which the effect begins animating.
easing Value is a string This is used to get the easing effect to the animation.Some examples for easing are linear , ease, ease-in, ease-out , ease-in-out etc
direction Value is a string One of "normal", "reverse", "alternate" or "alternate-reverse".
fill Value is a string Values can be "none", "forwards", "backwards", "both", "auto".

キーフレーム

キーフレームは、オブジェクト形式や配列形式など、さまざまな方法で定義できます。 次の例を検討してください。

例

"keyframes": {"transform": "translate(100px,200px)"}

例

{
   "keyframes": {

      "opacity": [1, 0],
      "transform": ["scale(1)", "scale(2)"]
   }
}

例

{
   "keyframes": [
      {"opacity": 1, "transform": "scale(1)"},
      {"opacity": 0, "transform": "scale(2)"}
   ]
}

例

{
   "keyframes": [
      {"easing": "ease-out", "opacity": 1, "transform": "scale(1)"},
      {"opacity": 0, "transform": "scale(2)"}
   ]
}

CSSを使用したキーフレーム

<style amp-custom>
   div {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
      margin: 0 auto;
      transform:scale(3);
   }
   @keyframes example { 0% {transform:scale(3)}
      75% {transform:scale(2)}
      100% {transform:scale(1)}
   }

</style>

<amp-animation layout = "nodisplay">
   <script type = "application/json">
      {
         "duration": "4s",
         "keyframes": "example"
      }
   </script>
</amp-animation>

キーフレーム内で使用できるCSSプロパティがいくつかあります。 サポートされているものは、ホワイトリストプロパティと呼ばれます。 以下は、キーフレーム内で使用できるホワイトリストに登録されたプロパティです-

  • 不透明度
  • 変形する
  • 視認性
  • 'offsetDistance'

注意-ホワイトリストにあるプロパティ以外のプロパティを使用すると、コンソールでエラーがスローされます。

ここで、アニメーションが適用されたときに画像を回転させる簡単な例を通して理解しましょう。 この例では、アンプアニメーションを使用して画像を回転させています。

例

<!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 Video</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
            -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-animation"
         src =" https://cdn.ampproject.org/v0/amp-animation-0.1.js">
      </script>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Animation Example</h3>
      <amp-animation id = "anim1" layout = "nodisplay" trigger = "visibility">
         <script type = "application/json">
            {
               "duration": "1s",
               "fill": "both",
               "direction": "alternate",
               "animations": [
                  {
                     "selector": "#image1",
                     "easing": "cubic-bezier(0,0,.21,1)",
                     "keyframes": {
                        "transform": "rotate(20deg)"
                     }
                  }
               ]
            }
         </script>
      </amp-animation>
      <br/>
      <br/>
      <amp-img
         id = "image1"
         src = "images/christmas1.jpg"
         width = 300
         height = 250
         layout = "responsive">
      </amp-img>
      <br/>
   </body>
</html>

出力

画像の回転

上記で使用されるアンプアニメーションの詳細の詳細は、以下に示すコードで与えられます- 

<amp-animation id = "anim1" layout = "nodisplay" trigger = "visibility">
   <script type = "application/json">
   {
      "duration": "1s",
      "fill": "both",
      "direction": "alternate",
      "animations": [
         {
            "selector": "#image1",
            "easing": "cubic-bezier(0,0,.21,1)",
            "keyframes": {
               "transform": "rotate(20deg)"
            }
         }
      ]
   }
   </script>
</amp-animation>

ここのセレクタは、回転アニメーションが適用される画像のIDです- 

<amp-img
   id = "image1"
   src = "images/christmas1.jpg"
   width = 300
   height = 250
   layout = "responsive">
</amp-img>

CSSのキーフレームを使用した例

例

<!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 Video</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-animation"
         src = "https://cdn.ampproject.org/v0/amp-animation-0.1.js">
      </script>
      <style amp-custom>
         div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            margin: 0 auto;
            transform:scale(3);
         }

         @keyframes example {
            0% {transform:scale(3)}
            75% {transform:scale(2)}
            100% {transform:scale(1)}
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Animation Example</h3>
      <amp-animation id = "anim1" layout = "nodisplay" trigger = "visibility">
         <script type = "application/json">
            {
               "duration": "3s",
               "fill": "both",
               "direction": "alternate",
               "animations": [{
                  "selector": "#image1",
                  "easing": "cubic-bezier(0,0,.21,1)",
                  "keyframes":"example"
               }]
            }
         </script>
      </amp-animation>
      <br/>
      <br/>
      <div id = "image1"></div>
      <br/>
   </body>
</html>

出力

AMPキーフレーム

アニメーショントリガー

トリガー=「可視性」の場合、アニメーションはデフォルトで適用されます。 イベントでアニメーションを開始するには、以下の例に示すように、トリガー=「可視性」を削除し、イベントを追加してアニメーションを開始する必要があります-

例

<!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 Video</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-animation"
         src = "https://cdn.ampproject.org/v0/amp-animation-0.1.js">
      </script>
      <style amp-custom>
         div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            margin: 0 auto;
            transform:scale(2);
         }
         @keyframes example {
            0% {transform:scale(2)}
            75% {transform:scale(1)}
            100% {transform:scale(0.5)}
         }
         button{
            background-color: #ACAD5C;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: left;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Animation Example</h3>
      <amp-animation id = "anim1" layout = "nodisplay">
         <script type = "application/json">
            {
               "duration": "3s",
               "fill": "both",
               "direction": "alternate",
               "animations": [{
                  "selector": "#image1",
                  "easing": "cubic-bezier(0,0,.21,1)",
                  "keyframes":"example"
               }]
            }
         </script>
      </amp-animation>
      <button on = "tap:anim1.start">Start</button>
      <br/>
      <br/>
      <div id = "image1"></div>
   </body>
</html>

開始ボタンをタップするとアニメーションが開始することに注意してください。

出力

アニメーショントリガー

Onで start というアクションを使用して、アニメーションを開始しました。 同様に、次のような他のアクションがサポートされています-

  • 開始
  • 一時停止
  • 再起動
  • 履歴書
  • togglePause
  • 探す
  • 逆
  • 終える
  • キャンセル

アクションを使用できる実用的な例を見てみましょう。

例

<!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 Video</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-animation"
         src = "https://cdn.ampproject.org/v0/amp-animation-0.1.js">
      </script>
      <style amp-custom>
         #image1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            margin: 0 auto;
            transform:scale(2);
         }
         @keyframes example {
            0% {transform:scale(2)}
            75% {transform:scale(1)}
            100% {transform:scale(0.5)}
         }
         button1{
            background-color: #ACAD5C;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: left;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Animation Example</h3>
      <amp-animation id = "anim1" layout = "nodisplay">
         <script type = "application/json">
            {
               "duration": "3s",
               "fill": "both",
               "direction": "alternate",
               "animations": [{
                  "selector": "#image1",
                  "easing": "cubic-bezier(0,0,.21,1)",
                  "keyframes":"example"
               }]
            }
         </script>
      </amp-animation>
      <button on = "tap:anim1.start">Start</button>
      <button on = "tap:anim1.pause">Pause</button>
      <button on = "tap:anim1.resume">Resume</button>
      <button on = "tap:anim1.reverse">Reverse</button>
      <button on = "tap:anim1.cancel">cancel</button>
      <button on = "tap:anim1.finish">finish</button>
      <button on = "tap:anim1.togglePause">togglePause</button>
      <button on = "tap:anim1.seekTo(percent = 1.00)">seekTo(100%)</button>
      <br/>
      <br/>
      <br/>
      <br/>
      <div id="image1"></div>
   </body>
</html>

出力

アニメーション開始

Google AMP-データバインディング

Amp-bindは、データバインディングとJSのような式を使用したアクションに基づいて、アンプコンポーネントとHTMLタグに対話性を追加するのに役立ちます。 この章では、データバインディングについて詳しく説明します。

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

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

示されているように実際の例を使用してこれを完全に理解しましょう-

例

<!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 Bind</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-bind"
         src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
      <style amp-custom>
         button{
            background-color: #ACAD5C;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Bind</h3>
      <p [text] = "'Hello ' + world + '.'">
         Click on the button to change the text
      </p>
      <button on = "tap:AMP.setState({world: 'This is amp-bind example'})">
      Click Here
      </button>
   </body>
</html>

出力

データバインディング

下に示すようにテキストが変化するのを見るためにボタンをクリックしてください-

Ampデータバインディング

したがって、上記の例では、amp-bindを使用して、ボタンをクリックしたときにテキストを変更しました。

アンプバインドには3つのコンポーネントがあります-

  • 状態-最初は状態は空です。 ボタンをクリックすると、状態が変更されます。 例えば、
<button on = "tap:AMP.setState({world: 'This is amp-bind example'})">
   Click Here
</button>

AMP.setStateメソッドは、状態を変更するために使用されます。 変数 world には値*これはamp-bindの例*が割り当てられます。 変数 world はhtmlタグ内で使用されます- 

<p [text] = "'Hello ' + world + '.'">
   Click on the button to change the text
</p>

ボタンをクリックすると、worldに新しい値が割り当てられます。これはamp-bindの例です。

また、以下に示すように、バインド付きのamp-stateを使用できます- 

<amp-state id = "myState">
   <script type = "application/json">
      {
         "foo": "bar"
      }
   </script>
</amp-state>

式には、バインディング中に bmyState.foo が割り当てられます。

  • 式-amp-bindが機能するための式は次のとおりです-
'Hello ' + world
*world* は *_state variable_* と呼ばれます。
  • Bindings -バインディングは[attributes]形式の特別な属性に適用されます。 たとえば-
<p [text] = "'Hello ' + world + '.'">
   Click on the button to change the text
</p>

上記の例では、 [text] には、 p タグのバインドに使用される式が含まれています。

私たちはバインディングに次の属性を使用できます-

  • [テキスト]
  • [クラス]
  • [非表示]
  • [幅] *[高さ]

バインディングはampコンポーネントで実行することもでき、特定の属性のみが許可されます。 次のリストは、Suhコンポーネントと属性を示しています-

Sr.No Amp component Attributes & Description
1 <amp-carousel type=slides>
  • [slide]**

このバインド動作を使用してスライドを変更します

2 <amp-date-picker>

[min]

min→選択可能な最も早い日付を設定します

  • [最大]*

max→選択可能な最新の日付を設定します

3 <amp-iframe>

[src]

iframeのソースを変更

4 <amp-img>
  • [alt]

[srcset]*

alt、属性、srcおよびsrcsetを変更できます。srcを変更する場合は、キャッシングに使用されるsrcsetを変更してください

5 <amp-lightbox>

[open]*

_open_にバインドしてライトボックスを表示/非表示にできます

6 <amp-list>

[src]

式が文字列の場合、文字列URLからJSONを取得してレンダリングします。 式がオブジェクトまたは配列の場合、式データをレンダリングします。

7 <amp-selector>

[selected] [disabled]*

オプション属性値によって識別される現在選択されている子要素を変更します。 複数選択のための値のコンマ区切りリストをサポートします

Amp-Stateを使用したバインド

html要素またはampコンポーネントで使用するすべてのデータでamp-stateを定義できます。

amp-state内で使用されるデータは、以下に示すようにJSON形式である必要があります- 

<amp-state id = "myCarsList">
   <script type = "application/json">
      {
         "currentcar" : "bmw",
         "audi": {
            "imageUrl": "images/audi.jpg"
         },
         "bmw": {
            "imageUrl": "images/bmw.jpg"
         }
      }
   </script>
</amp-state>

したがって、車の名前と車に使用される画像でキーと値のペアを定義しました。

テキストとアンプ画像のアンプバインド

amp-bindでamp-stateを使用した作業例を以下に示します- 

<!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 Bind</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-bind" src =
         "https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
      <style amp-custom>
         button{
            background-color: #ACAD5C;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: left;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Bind</h3>
      <amp-state id = "myCarsList">
         <script type = "application/json">
            {
               "currentcar" : "bmw",
               "audi": {
               "imageUrl": "images/audi.jpg",
               "style": "greenBackground"
               },
               "bmw": {
               "imageUrl": "images/bmw.jpg",
               "style": "redBackground"
               }
            }
         </script>
      </amp-state>
      <amp-img
         width = "300"
         height = "200"
         src = "images/bmw.jpg"
         [src] = "myCarsList[currentcar].imageUrl">
      </amp-img>
      <p [text] = "'This is a ' + currentcar + '.'">
         This is a BMW.
      </p>
      <br/>
      <button on = "tap:AMP.setState({currentcar: 'audi'})">
         Change Car
      </button>
   </body>
</html>

出力

Amp Image Text

ボタンをクリックして、車の変化の画像と下のテキストを表示します。

Amp Image Texts

ビデオとIFrameのアンプバインド

amp-iframeとamp-video srcを変更する実例が表示されます。 

<!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 Bind</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-bind" src =
         "https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
      <script async custom-element = "amp-video" src =
         "https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
      <script async custom-element = "amp-iframe" src =
         "https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
      <style amp-custom>
         button{
            background-color: #ACAD5C;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: left;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Bind</h3>
      <button on = "tap:AMP.setState({currentlist: 'list1'})">
      Click Here
      </button>
      <br/>
      <br/>
      <amp-state id = "myList">
         <script type = "application/json">
            {
               "currentlist" : "",
               "list1": {
                  "url": "video/m.mp4",
                  "style": "greenBackground",
                  "iframeurl":"https://maps.google.com/maps?q=hyderabad&t=&z=13&ie=UTF8&iwloc=&output=embed"
               }
            }
         </script>
      </amp-state>
      <h3>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"
         [src] = "myList[currentlist].iframeurl">
         <amp-img
            layout = "fill"
            src = "images/loading.jpg"
            placeholder
            >
        /amp-img>
      </amp-iframe>
      <h3>AMP - VIDEO</h3>
      <amp-video
         id = "amp-video"
         src = "video/samplevideo.mp4"
         layout="responsive"
         [src] = "myList[currentlist].url"
         width = "300"
         height = "170" autoplay controls>
      </amp-video>
   </body>
</html>

ここでは、iframesrcおよびvideo srcでamp-stateを使用していることに注意してください。 

<amp-state id = "myList">
   <script type = "application/json">
      {
         "currentlist" : "",
         "list1": {
            "url": "video/m.mp4",
            "style": "greenBackground",
            "iframeurl":"
            https://maps.google.com/maps?q=hyderabad&t=&z=13&ie=UTF8&iwloc=&output=embed"
         }
      }
   </script>
</amp-state>

currentlistは空に設定され、ボタンをタップすると、list1に設定されます。currentlist変数は、以下に示すようにiframeとビデオのsrcに使用されます- 

<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"
   [src] = "myList[currentlist].iframeurl">
      <amp-img layout = "fill" src = "images/loading.jpg" placeholder>
      </amp-img>
</amp-iframe>
<amp-video id = "amp-video" src = "video/samplevideo.mp4"
   layout = "responsive" [src] = "myList[currentlist].url" width = "300"
   height = "170" autoplay controls>
</amp-video>

出力

Amp Video Iframe

ボタンをクリックして、ビデオとiframe srcの変化を確認します。

Amp Video Iframe

amp-lightboxとのamp-bind

それでは、バインディングとamp-lightboxを併用した場合の動作を見てみましょう。

例

<!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 Bind</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-bind" src =
         "https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
      <script async custom-element = "amp-lightbox" src =
         "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
      <style amp-custom>
         button{
            background-color: #ACAD5C;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: left;
         }
         .lightbox {
            background: rgba(211,211,211,0.8);
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Bind</h3>
      <button on = "tap:AMP.setState({displaylightbox: true})">
      Click Here
      </button>
      <br/>
      <br/>
      <h3>AMP - Lightbox</h3>
      <amp-lightbox
         id = "my-lightbox"
         [open] = "displaylightbox"
         layout = "nodisplay"
         close-button>
         <div class = "lightbox" on = "tap:AMP.setState({displaylightbox: false})">
            <amp-img alt = "Beautiful Flower"
               src = "images/loreal.gif"
               width = "246"
               height = "205">
            </amp-img>
         </div>
      </amp-lightbox>
   </body>
</html>

amp-lightboxでバインディングを使用するには、以下に示すようにamp-lightboxで[open]を使用しました- 

<amp-lightbox id = "my-lightbox" [open] = "displaylightbox"
   layout = "nodisplay" close-button>
   <div class = "lightbox" on="tap:AMP.setState({displaylightbox: false})">
      <amp-img alt = "Beautiful Flower"
         src = "images/loreal.gif"
         width = "246"
         height = "205">
      </amp-img>
   </div>
</amp-lightbox>

[open] =“ displaylightbox”は変数の状態であり、ボタンのクリックとライトボックスdivのタップでtrue/falseに変更されます- 

<button on = "tap:AMP.setState({displaylightbox: true})">
   Click Here
</button>

<div class = "lightbox" on = "tap:AMP.setState({displaylightbox: false})">
   <amp-img alt = "Beautiful Flower"
      src = "images/loreal.gif"
      width = "246"
      height = "205">
   </amp-img>
</div>

出力

Amp Lightbox Bind

InputエレメントへのAmpバインディング

示されているように、実際の例を使用して、入力要素へのamp-bindingの動作を理解しましょう- 

<!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 Bind</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-bind"
         src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
         <script>
         <script async custom-element = "amp-lightbox"
            src = "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
      </script>
      <style amp-custom>
         button{
            background-color: #ACAD5C;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: left;
         }
         .lightbox {
            background: rgba(211,211,211,0.8);
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
         }
         #txtname{
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
         }
         div {
            font-size:25px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Bind</h3>
      <button on = "tap:AMP.setState({displaylightbox: true})">
         Click Here
      </button>
      <br/>
      <br/>
      <h3>
         AMP - Input Element
      <h3>
      <input id = "txtname" placeholder = "Type here"
         on = "input-throttled:AMP.setState({name: event.value})">
      <div [text] = "name">
      </div>
   </body>
</html>

出力

Amp Input Element

テキストボックス内に入力されたデータは、下部に表示されます。 これは、入力イベントの状態変数 name を次のように変更することで実行できます- 

<input id = "txtname" placeholder = "Type here" on =
"input-throttled:AMP.setState({name: event.value})">
<div [text] = "name">
</div>

Google AMP-レイアウト

AMP-Layoutは、Google-ampで利用できる重要な機能の1つです。 Amp Layoutは、ページが読み込まれたときに、ちらつきやスクロールの問題を引き起こすことなく、アンプコンポーネントが適切にレンダリングされるようにします。 Google AMPは、画像のhttpリクエストなどの他のリモートリソース、データ呼び出しが行われる前に、ページでレイアウトのレンダリングが行われるようにします。

レイアウト属性のリストを以下に示します。

  • 幅と高さ
  • レイアウト
  • サイズ
  • ハイツ
  • メディア
  • プレースホルダー
  • 後退する
  • 無負荷

この章では、 _ layout_ 属性について詳しく検討します。 残りの属性については、このチュートリアルの「Google AMP-属性*」の章で詳しく説明しています。

レイアウト属性

ampコンポーネントのレイアウト属性を使用して、ページ内でのコンポーネントのレンダリング方法を決定できます。 ampがサポートするレイアウトのリストは以下のとおりです-

  • 現在ではない
  • 容器
  • fill
  • 一定
  • 固定高さ
  • フレックスアイテム
  • 固有の
  • ディスプレイなし
  • レスポンシブ

このレイアウトごとに、レイアウト属性がampコンポーネントを異なる方法でレンダリングする方法を示す実用的な例を見ることができます。 例では、 amp-img コンポーネントを使用します。

存在しない例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src="https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image</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>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
      </style>
   </head>
   <body>
      <h1>Google AMP - Image Example</h1>
      <amp-img
         alt = "Beautiful
         Flower"src = "images/flower.jpg"
         width = "246"
         height = "205">
      </amp-img>
   </body>
</html>

出力

Amp Not Present

コンテナの例

Layout =” container”は主に親要素に与えられ、子要素は定義されたサイズを取ります。 

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image</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>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         h1{
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;margin: 10px 0;
         }
      </style>
   </head>
   <body>
      <h1>Google AMP - Layout = container Image Example</h1>
      <amp-accordion layout = "container">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            width = "246"
            height = "205">
         </amp-img>
      </amp-accordion>
   </body>
</html>

出力

Amp Container

塗りつぶしの例

Layout =” fill”は、親要素の幅と高さを取ります。 

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>
      Google AMP - Image
      <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>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         h1{font-family: "Segoe UI",Arial,sans-serif;
         font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Layout = fill Image Example</h1>
      <div style = "position:relative;width:100px;height:100px;">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            width = "246"
            height = "205"
            layout = "fill">
         </amp-img>
      </div>
   </body>
</html>

出力

Amp Fill Ex

固定および固定高度の例

固定および固定高さの使用法を理解する前に、次の2つの点に注意してください-

  • layout =” fixed” には幅と高さが必要で、その中にアンプコンポーネントが表示されます。
  • layout =” fixed-height” は、コンポーネントの高さを指定する必要があります。高さが変更されないようにします。fixed-heightを使用する場合は幅を指定しないでください。
<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image</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>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         div{
            display: inline-block;
            width: 200px;
            height:200px;
            margin: 5px;
         }
         h1{font-family: "Segoe UI",Arial,sans-serif;
         font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Layout = fixed and
         Layout = fixed-height Image Example
      </h1>
      <div>
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            width = "246"
            height = "205"
            layout = "fixed">
         </amp-img>
      </div>
      <div>
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            height = "205"
            layout = "fixed-height">
         </amp-img>
      </div>
   </body>
</html>

出力

早期修正アンプ

フレックスアイテムと組み込み

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src ="https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image</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>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         displayitem {
            display: inline-block;
            width: 200px;
            height:200px;
            margin: 5px;
         }
         h1{font-family: "Segoe UI",Arial,sans-serif;
         font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Layout = flex-item and
         Layout = intrinsic Image Example
      </h1>
      <div class = "displayitem">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            layout = "flex-item">
         </amp-img>
      </div>
      <div class = "displayitem">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            width = "246"
            height = "205"
            layout = "intrinsic">
         </amp-img>
      </div>
   </body>
</html>

出力

Amp Intrinsic

ディスプレイなしで反応する

layout：nodisplayのAmpコンポーネントは、display：noneのようにページ上のスペースを占有しません。 そのようなレイアウトに幅と高さのプロパティを追加する必要はありません。

layout = responsiveのAmpコンポーネントは、使用可能なスペースまたはページの幅を占有し、要素のアスペクト比を維持しながら高さを変更します。 

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Image</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>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         displayitem {
            display: inline-block;
            width: 200px;
            height:200px;
            margin: 5px;
         }
         h1{font-family: "Segoe UI",Arial,sans-serif;
         font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Layout=no-display and
      Layout = responsive Image Example</h1>
      <div class = "displayitem">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            layout = "no-display">
         </amp-img>
      </div>
      <div class = "displayitem">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            width = "246"
            height = "205"
            layout = "responsive">
         </amp-img>
      </div>
   </body>
</html>

出力

Amp nodisplay responsive

Google AMPでサポートされているレイアウトのリストは次のとおりです

  • アコーディオン
  • カルーセル
  • ライトボックス
  • スライダー
  • サイドバー

アンプアコーディオン

Amp-accordionは、コンテンツを展開/折りたたみ形式で表示するために使用されるampコンポーネントです。 ユーザーがモバイルデバイスで表示しやすくなり、アコーディオンからの選択に従ってセクションを選択できるようになります。

アンペアアコーディオンを使用するには、次のスクリプトを追加する必要があります- 

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

アンプアコーディオンタグ

<amp-accordion>
   <section class = "seca">
      <h3>Content 1</h3>
      <div>
         <p>Content 1 is opened for amp-accordion</p>
         <p>Content 1 is opened for amp-accordion</p>
         <p>Content 1 is opened for amp-accordion</p>
         <p>Content 1 is opened for amp-accordion</p>
         <p>Content 1 is opened for amp-accordion</p>
         <p>Content 1 is opened for amp-accordion</p>
      </div>
   </section>
   …
</amp-accordion>

アンペアアコーディオンの実例を見て​​みましょう。 

<!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 Accordion </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-accordion" src =
         "https://cdn.ampproject.org/v0/amp-accordion-0.1.js">
      </script>
      <style>
         input[type = text]{
            width: 50%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: vertical;
         }
         label {
            padding: 12px 12px 12px 0;
            display: inline-block;
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;
         }
         .col-label {
            float: left;
            width: 25%;
            margin-top: 6px;
         }
         .col-content {
            float: left;
            width: 75%;
            margin-top: 6px;
         }
         .row:after {
            content: "";
            display: table;
            clear: both;
         }
         .amp_example {
            background-color: #f1f1f1;
            padding: 0.01em 16px;
            margin: 20px 0;
            box-shadow: 0 2px 4px 0
            rgba(0,0,0,0.16),0 2px 10px 0
            rgba(0,0,0,0.12)!important;
         }
         h3{
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;margin: 10px 0;
         }
         input[type=submit] {
            background-color: #ACAD5C;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: right;
         }
         .lightbox {background-color: rgba(100, 100, 100, 0.5);}
         .seca {background-color:#fff;}
      </style>
   </head>
   <body>
      <div class = "amp_example">
         <h3>Google AMP - Amp Accordion</h3>
         <amp-accordion>
            <section class = "seca">
               <h3>Content 1</h3>
               <div>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
               </div>
            </section>
            <section expanded class = "seca">
               <h3>Content 2</h3>
               <div>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
               </div>
            </section>
            <section class="seca">
               <h3>Content 3</h3>
               <div>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
               </div>
            </section>
         </amp-accordion>
      </div>
   </body>
</html>

出力

Amp nodisplay Accordion

アンプアコーディオンには内部にセクションがあります。 各セクションには2つの子があり、ブラウザコンソールに2つ以上のエラーが表示されます。 セクションにコンテナを追加し、その中に複数の要素を含めることができます。

デフォルトでは、セクションに展開された属性を使用して、1つのセクションを展開モードで保持しています。

自動折りたたみアコーディオン

自動折りたたみの場合、例に示すようにamp-accordionの属性 expand-single-section を使用します。ユーザーが開いたセクションは展開された残りの部分にのみ残り、他は expand-single-section 属性を使用して閉じます。 

<!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 Accordion </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-accordion" src =
         "https://cdn.ampproject.org/v0/amp-accordion-0.1.js">
      </script>
      <style>
         input[type = text]{
            width: 50%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: vertical;
         }
         label {
            padding: 12px 12px 12px 0;
            display: inline-block;
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;
         }
         .col-label {
            float: left;
            width: 25%;
            margin-top: 6px;
         }
         .col-content {
            float: left;
            width: 75%;
            margin-top: 6px;
         }
         .row:after {
            content: "";
            display: table;
            clear: both;
         }
         .amp_example {
            background-color: #f1f1f1;
            padding: 0.01em 16px;
            margin: 20px 0;
            box-shadow: 0 2px 4px 0
            rgba(0,0,0,0.16),0 2px 10px 0
            rgba(0,0,0,0.12)!important;
         }
         h3{
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;
            margin: 10px 0;
         }
         input[type=submit] {
            background-color: #ACAD5C;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: right;}
         .lightbox {background-color: rgba(100, 100, 100, 0.5);}
         .seca {background-color:#fff;}
      </style>
   <head>
   <body>
      <div class = "amp_example">
         <h3>Google AMP - Amp Accordion</h3>
         <amp-accordion expand-single-section>
            <section class = "seca">
               <h3>Content 1</h3>
               <div>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
               </div>
            </section>
            <section class = "seca">
               <h3>Content 2</h3>
               <div>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <;p>Content 2 is opened for amp-accordion</p>
               </div>
            </section>
            <section class = "seca">
               <h3>Content 3</h3>
               <div>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
               </div>
            </section>
         </amp-accordion>
      </div>
   </body>
</html>

出力

Amp nodisplayアコーディオンタグ

アコーディオンのアニメーション

*animate* 属性を使用して、アコーディオンの展開と折りたたみのアニメーションを追加できます。 以下の例を見てください-
<!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 Accordion </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-accordion" src =
         "https://cdn.ampproject.org/v0/amp-accordion-0.1.js">
      </script>
      <style>
         input[type = text]{
            width: 50%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: vertical;
         }
         label {
            padding: 12px 12px 12px 0;
            display: inline-block;
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;
         }
         .col-label {
            float: left;
            width: 25%;
            margin-top: 6px;
         }
         .col-content {
            float: left;
            width: 75%;
            margin-top: 6px;
         }
         .row:after {
            content: "";
            display: table;
            clear: both;
         }
         .amp_example {
            background-color: #f1f1f1;
            padding: 0.01em 16px;
            margin: 20px 0;
            box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),
            0 2px 10px 0 rgba(0,0,0,0.12)!important;
         }
         h3{
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;margin: 10px 0;
         }
         input[type=submit] {
            background-color: #ACAD5C;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: right;
         }
         .lightbox {background-color: rgba(100, 100, 100, 0.5);}
         .seca {background-color:#fff;}
      </style>
   </head>
   <body>
      <div class = "amp_example">
         <h3>Google AMP - Amp Accordion</h3>
         <amp-accordion animate expand-single-section>
            <section class = "seca">
               <h3>Content 1</h3>
               <div>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
                  <p>Content 1 is opened for amp-accordion</p>
               </div>
            </section>
            <section class = "seca">
               <h3>Content 2</h3>
               <div>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
                  <p>Content 2 is opened for amp-accordion</p>
               </div>
            </section>
            <section class="seca">
               <h3>Content 3</h3>
               <div>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
                  <p>Content 3 is opened for amp-accordion</p>
               </div>
            </section>
         </amp-accordion>
      </div>
   </body>
</html>

出力

アコーディオンのアニメーション

AMPカルーセル

Amp-carouselは、画面上に一連の同様のコンテンツを表示し、矢印を使用してコンテンツ間を移動するためのアンプコンポーネントです。

アンペアカルーセルを使用するには、次のスクリプトを追加する必要があります- 

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

アンプカルーセルタグ

amp-carouselタグは以下に示すとおりです- 

<amp-carousel height="300" layout="fixed-height" type="carousel">
      <amp-img src="images/christmas1.jpg" width="400" height="300" alt="a sample image"></amp-img>
   ….
</amp-carousel>

amp-carouselで使用可能な属性

amp-carouselに使用可能な属性は、以下に示す表にリストされています-

Sr.No Attribute & Description
1

type

カルーセルとスライドとしてカルーセル項目を表示できます

2

height

カルーセルの高さ（ピクセル単位）

3

controls (optional)

画面に左/右矢印が表示されます。デバイスでは数秒後にITが消えます。Cssを使用して、常に矢印を表示できます。

4

data-next-button-aria-label (optional)

次のカルーセルのラベルを設定するために使用します。

5

data-prev-button-aria-label (optional)

前のカルーセルのラベルを設定するために使用します。

6

autoplay (optional)

5000ミリ秒後に次のスライドを表示するために使用します。ITはamp-carouselでミリ秒のないdelay属性を使用して上書きできます。自動再生を機能させるには少なくとも2つのスライドが必要です。

次に、カルーセルをさまざまな方法で表示するための例に取り組みましょう。

カルーセルとしてのアンプカルーセルタイプ

カルーセルタイプでは、アイテムは水平方向にスクロールできます。

例 

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>amp-carousel</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <!-- ## Setup -->
      <!-- Import the carousel component in the header. -->
      <script async custom-element = "amp-carousel" src =
         "https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
      </script>
      <link rel = "canonical" href="
      https://ampbyexample.com/components/amp-carousel/">
      <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>
      <style amp-custom>
         h3{
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;
            margin: 10px 0;
         }
      </style>
   </head>
   <body>
      <h3>Google Amp-Carousel</h3>
      <amp-carousel height = "300" layout = "fixed-height" type = "carousel">
         <amp-img
            src = "images/christmas1.jpg"
            width = "400"
            height = "300"
            alt = "a sample image">
         </amp-img>
         <amp-img src = "images/christmas2.jpg"
            width = "400"
            height = "300"
            alt = "another sample image">
         </amp-img>
         <amp-img
            src = "images/christmas3.jpg"
            width = "400"
            height = "300"
            alt = "and another sample image">
         </amp-img>
      </amp-carousel>
   </body>
</html>

出力

アニメーションカルーセルタイプ

スライドとしてのアンプカルーセルタイプ

Ampカルーセル type =” slides” は一度に1つのアイテムを表示します。レイアウトは、塗りつぶし、固定、固定高さ、フレックスアイテム、非表示、レスポンシブとして使用できます。

例 

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>amp-carousel</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <!-- ## Setup -->
      <!-- Import the carousel component in the header. -->
      <script async custom-element = "amp-carousel" src =
         "https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
      </script>
      <link rel = "canonical" href=
      "https://ampbyexample.com/components/amp-carousel/">
      <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>
      <style amp-custom>
         h3{
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h3>Google Amp-Carousel</h3>
         <amp-carousel
            width = "400"
            height = "300"
            layout = "responsive"
            type = "slides">
               <amp-img
                  src = "images/christmas1.jpg"
                  width = "400"
                  height = "300"
                  layout = "responsive"
                  alt = "a sample image">
               </amp-img>
               <amp-img
                  src = "images/christmas2.jpg"
                  width = "400"
                  height = "300"
                  layout = "responsive"
                  alt="another sample image">
               </amp-img>
               <amp-img
                  src = "images/christmas3.jpg"
                  width = "400"
                  height = "300"
                  layout = "responsive"
                  alt = "and another sample image">
               </amp-img>
      </amp-carousel>
   </body>
</html>

出力

アニメーションカルーセルタイプのスライド

自動再生を使用したアンプカルーセル

以下の例では、2000ミリ秒（2秒）の遅延で自動再生属性を追加しています。 これにより、2秒後にスライドが変更されます。 デフォルトでは、遅延は5000ミリ秒（5秒）です。

  • 例 *
<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>amp-carousel</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <!-- ## Setup -->
      <!-- Import the carousel component in the header. -->
      <script async custom-element = "amp-carousel" src =
         "https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
      </script>
      <link rel = "canonical" href =
      "https://ampbyexample.com/components/amp-carousel/">
      <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>
      <style amp-custom>
         h3{
            font-family: "Segoe UI",Arial,sans-serif;
            font-weight: 400;
            margin: 10px 0;
         }
      </style>
   </head>
   <body>
      <h3>Google Amp-Carousel</h3>
      <amp-carousel
         width = "400"
         height = "300"
         layout = "responsive"
         type = "slides"
         autoplay delay = "2000">
            <amp-img
               src = "images/christmas1.jpg"
               width = "400"
               height = "300"
               layout = "responsive"
               alt = "a sample image">
            </amp-img>
            <amp-img
               src = "images/christmas2.jpg"
               width = "400"
               height = "300"
               layout = "responsive"
               alt = "another sample image">
            </amp-img>
            <amp-img
               src = "images/christmas3.jpg"
               width = "400"
               height = "300"
               layout = "responsive"
               alt = "and another sample image">
            </amp-img>
      </amp-carousel>
   </body>
</html>

出力

アニメーションカルーセルの自動再生

AMPライトボックス

Amp-lightboxは、フルビューポートを占有してオーバーレイのように表示するアンプコンポーネントです。

amp-lightboxを使用するには、次のスクリプトを追加します- 

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

amp-lightboxで利用可能な属性

amp-lightboxの属性のリストは以下のとおりです-

Sr.no Attributes & Description
1
  • animate-in (optional)*

ここで、ライトボックスを開くためのアニメーションのスタイルを指定できます。デフォルトでは

フェードイン

2

close-button (required on AMPHTML ads)

amphtmladsに使用する場合、ライトボックスの閉じるボタンを指定できます。

3

id (required)

ライトボックスの一意の識別子

4

layout (required)

レイアウトの値はnodisplayになります

5

Scrollable (optional)

amp-lightboxでこの属性を使用すると、ライトボックスのコンテンツをスクロールして、ライトボックスの高さをオーバーフローさせることができます。

ライトボックスの例

<!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 Lightbox</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-lightbox" src =
         "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
      </script>
      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
         button{
            background-color: #ACAD5C;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: left;
         }
         .lightbox {
            background: rgba(211,211,211,0.8);
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Lightbox</h3>
      <button on = "tap:my-lightbox">
         Show LightBox
      </button>
      <amp-lightbox id = "my-lightbox" layout = "nodisplay">
         <div class = "lightbox" on="tap:my-lightbox.close" tabindex = "0">
            <amp-img
               alt = "Beautiful Flower"
               src = "images/flower.jpg"
               width = "246"
               height = "205">
            </amp-img>
         </div>
      </amp-lightbox>
   </body>
</html>

出力

AMP Lightbox Ex

AMPライトボックスExs

画面上の任意の場所をクリックして、ライトボックスを閉じます。

ライトボックスに閉じるボタンを追加できます。これは主に、オーバーレイタイプの広告が表示されるときに使用されます。 次の例を観察してください-

例

<!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 Lightbox</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-lightbox" src =
         "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
      </script>
      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
         button{
            background-color: #ACAD5C;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: left;
         }
         .lightbox {
            background: rgba(211,211,211,0.8);
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Lightbox</h3>
      <button on = "tap:my-lightbox">
         Show LightBox
      </button>
      <amp-lightbox id = "my-lightbox" layout = "nodisplay" close-button>
         <div class = "lightbox" on = "tap:my-lightbox.close">
            <amp-img
               alt = "Beautiful Flower"
               src = "images/flower.jpg"
               width = "246"
               height = "205">
            </amp-img>
         </div>
      </amp-lightbox>
   </body>
</html>

出力

AMPオーバーレイ

アンプサイドバー

アンプサイドバーは、ボタンをタップするとウィンドウの側面からスライドするコンテンツを表示するために使用されるアンプコンポーネントです。

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

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

アンプサイドバータグ

<amp-sidebar id = "sidebar" layout = "nodisplay" side = "right">
   <span on = "tap:sidebar.close">X</span>
   Html content here..
</amp-sidebar>

アンプサイドバーで利用可能な属性のリストは以下のとおりです-

Sr.no Attributes & Description
1

side

この属性は、指定された方向にサイドバーを開きます。 左/右の例

2

layout

サイドバーのレイアウトにはディスプレイは使用されません

3

open

この属性は、サイドバーが開いているときに追加されます。

4

data-close-button-aria-label

閉じるボタンのラベルを設定するために使用されます。

上記の属性を使用してサイドバーを操作します。 以下に示す例を観察してください-

例

<!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 Sidebar</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-sidebar" src =
         "https://cdn.ampproject.org/v0/amp-sidebar-0.1.js">
      </script>
      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
         button{
            background-color: #ACAD5C;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: left;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Sidebar</h3>
      <button on = "tap:sidebar">
         Show Sidebar
      </button>
      <amp-sidebar id = "sidebar" layout = "nodisplay" side = "right">
         <span on = "tap:sidebar.close">X</span>
         <ul>
            <li><a href = "/">About</a></li>
            <li><a href = "/">Services</a></li>
            <li><a href = "/">Contact US</a></li>
         </ul>
      </amp-sidebar>
   </body>
</html>

出力

AMPスライドバー 

*side* 属性を使用して、右側のサイドバーを開きました。 *_side_* 属性に左の値を使用して、左側で開くことができます。 *layout* 属性は、サイドバーが開かれたときに *nodisplay.Open* 属性が存在する必要があります。

データクローズボタンアリアラベル

アンプ画像スライダー

Amp-image-sliderは、画像上で垂直に移動するスライダーを追加することで2つの画像を比較するために使用されるアンプコンポーネントです。

amp-img-sliderを使用するには、次のスクリプトを追加します- 

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

amp-img-sliderタグ

<amp-image-slider width = "300" height = "200" layout = "responsive">
   <amp-img src = "images/christmas1.jpg" layout = "fill">
   </amp-img>
   <amp-img src = "images/christmas2.jpg" layout = "fill">
   </amp-img>
</amp-image-slider>

amp-img-sliderの例を次に示します。 ここでは、amp-img-slider内に2つの画像を追加しました。最初の画像はスライダーのように機能し、2番目の画像の上部でスライドインできます。

例

<!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 Image Slider</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-image-slider" src =
         "https://cdn.ampproject.org/v0/amp-image-slider-0.1.js">
      </script>
      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Image Slider</h3>
      <amp-image-slider
         width = "300"
         height = "200"
         layout = "responsive">
            <amp-img
               src = "images/christmas1.jpg"
               layout = "fill">
            </amp-img>
            <amp-img
               src = "images/christmas2.jpg"
               layout = "fill">
            </amp-img>
      </amp-image-slider>
   </body>
</html>

出力

AMP Image Slider

Amp-image-sliderにはseekToと呼ばれるアクションがあり、これを使用して以下の例に示すように画像を変更できます-

例

<!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 Image Slider</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-image-slider" src =
         "https://cdn.ampproject.org/v0/amp-image-slider-0.1.js">
      </script>
      <style amp-custom>
         amp-img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
         }
         button{
            background-color: #ACAD5C;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: left;
         }
         .amp-sidebar-toolbar-target-shown {
            display: none;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Image Slider</h3>
      <amp-image-slider
         width = "300"
         id="slider1"
         height = "200"
         layout = "responsive">
         <amp-img src = "images/christmas1.jpg" layout = "fill">
         </amp-img>
         <amp-img src = "images/christmas2.jpg" layout = "fill">
         </amp-img>
      </amp-image-slider>
      <button on = "tap:slider1.seekTo(percent = 1)">
         Image 1
      </button>
      <button on = "tap:slider1.seekTo(percent = 0)">
         Image 2
      </button>
   </body>
</html>

出力

AMP Image Slider Seek

ボタンをタップして画像を変更できます。

AMP Image Slider Tapping 

<button on = "tap:slider1.seekTo(percent = 1)">Image 1</button>
<button on = "tap:slider1.seekTo(percent = 0)">Image 2</button>
</div>

Google AMP-広告

広告はサイト運営者の収益源であるため、サイト運営者のページにとって広告は重要な役割を果たします。 アンペアページの場合、わずかな変動があります。 サードパーティのJavaScriptファイルを追加することはできません。 ページに広告を表示するために、ページに広告を表示するのに役立つamp-adと呼ばれるampコンポーネントがあります。 広告を配信する広告ネットワークのほとんどは、amp-adタグと互換性があります。

広告の仕組みに関する詳細は、次の画像に示されています-

AMP Ads

サイト運営者のページに広告を表示するには、ページに広告を配信するためのプレースホルダーとして機能する<amp-ad>を追加する必要があります。 <amp-ad>は、typeに指定された広告ネットワークを呼び出します。

ADネットワークは、広告主がHTMLまたはamphtml広告である広告主から提供されたページに表示される広告を内部的に呼び出します。

動作させるには、最初にページにスクリプトを追加する必要があります。 

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

doubleclickのamp-adタグは次のようになります- 

<amp-ad width = "300"
   height = "200"
   type = "doubleclick"
   data-slot = "/4119129/ad">
   <div placeholder>
      <b>Placeholder here!!!</b>
   </div>
</amp-ad>

amp-adをサポートする多くの広告ネットワークがあります。 例では、 doubleclick amp-ad tag を見ることに注意してください。広告ネットワーク名は、* type *属性で指定する必要があります。

例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - AD</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-ad" src =
         "https://cdn.ampproject.org/v0/amp-ad-0.1.js">
      </script>
      <style amp-custom>
         div {
            text-align:center;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - AD</h3>
      <h3>300x250 - Banner AD</h3>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <div>
         <amp-ad
            data-slot =/30497360/amp_by_example/AMP_Banner_300x250
            height = 250
            layout = fixed
            style = width:300px;height:250px;
            type = doubleclick
            width = 300>
         </amp-ad>
      </div>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
   </body>
</html>

出力

Amp Banner Ad

以下の表にリストされているように、amp-adで利用可能な重要な属性のいくつかを見てみましょう-

Sr.No Attributes & Description
1

type

広告ネットワークの名前

2

width

広告の幅

3

height

広告の高さ

4

placeholder

子要素として使用され、広告の読み込み中にユーザーに表示されるプレースホルダ。この属性は広告ネットワーク側でサポートする必要があることに注意してください。

5

data-*

広告ネットワークに渡されるデータ属性。 たとえば、ダブルクリック広告ネットワークのニーズ

  • _ data-slot _ *=/30497360/amp_by_example/AMP_Banner_300x250でページに広告を表示します。

各広告ネットワークによって指定されたデータパラメータがあります。

data-override-widthとdata-override-heightを使用して、使用される幅と高さをオーバーライドすることもできます。

6
  • fallback*

フォールバックはamp-adの子要素として使用され、配信する広告がない場合に表示されます。

配信する広告がないときに実行される placeholder を使用する実例の助けを借りてこれを理解しましょう。

例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - AD</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&gt
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      <script async custom-element = "amp-ad" src =
         "https://cdn.ampproject.org/v0/amp-ad-0.1.js">
      </script>
      <style amp-custom>
      div {
         text-align:center;
      }
      </style>
   </head>
   <body>
      <h3>Google AMP - AD</h3>
      <h3>300x250 - Banner AD</h3>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <div>
         <amp-ad
            data-slot =/30497360/amp_by_example/AMP_Banner_300x250
            height = 250
            layout = fixed
            style = width:300px;height:250px;
            type = doubleclick
            width = 300>
            <div placeholder>
               <b>Placeholder Example : Ad is loading!!!</b>
            </div>
         </amp-ad>
      </div>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad<p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
   </body>
</html>

出力

Amp Banner Ad Ex

amp-adの子要素であり、配信する広告がない場合に表示されるfallback属性を使用できます。

例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - AD</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-ad" src =
         "https://cdn.ampproject.org/v0/amp-ad-0.1.js">
      </script>
      <style amp-custom>
         div, p{
            text-align:center;
         }
         amp-ad {
            border : solid 1px black;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - AD</h3>
      <h3>300x250 - Banner AD</h3>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <div>
         <amp-ad
            width = "300"
            height = "250"
            type = "doubleclick"
            data-slot = "/4119129/no-ad">
            <div fallback>
               <p style = "color:green;font-size:25px;">No ads to Serve!</p>
            </div>
         </amp-ad>
      </div>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
   </body>
</html>

出力

Amp Child Element

  • フォールバック属性の場合、広告がビューポートにある場合、フォールバック要素内にメッセージが表示されます。
  • 広告コンポーネントがビューポートの下にあり、広告がない場合、amp-adはスペースを折りたたみ、フォールバックメッセージを表示しません。
  • 広告ユニットが折りたたまれているのは、noadがあり、ビューポートの下にある場合のみです。折りたたむとコンテンツが移動するため、コンテンツの読み取り中にユーザーが邪魔されることはありません。

サポートされている広告ネットワークのリストは、https://www.ampproject.org/docs/ads/ads_vendorsにあります。

この章では、アンプ内の次の広告関連タグについて説明します-

  • Google AMP-イベントトラッキングピクセル
  • Google AMP-スティッキー広告
  • Google AMP-AMPHTML広告

イベントトラッキングピクセル

Ampは、ピクセルを起動してページビューをカウントするために基本的に使用されるamp-pixelを提供します。 amp-pixelはimgタグに似ており、起動するピクセルURLを指定する必要があり、ユーザーはデバッグ中にブラウザーのネットワークタブで起動したURLを確認できます。ピクセルはページに表示されません。

amp-pixelを使用するために、コアのampスクリプトで機能が利用できるため、スクリプトを追加する必要はありません。

タグamp-pixelは次のようになります- 

<amp-pixel src = "https://urlhere" layout = "nodisplay">
</amp-pixel>

実用例の助けを借りてアンプピクセルの動作を理解しましょう-

例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Tracking Pixel</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>
   </head>
   <body>
      <h3>Google AMP - Tracking Pixel</h3>
      <amp-pixel src = "https://www.trackerurlhere.com/tracker/foo"
      layout = "nodisplay">
      </amp-pixel>
   </body>
</html>

出力

Amp Tracking Pixel

ブラウザのネットワークタブにURLが表示されます。 ここでは、amp-pixelの動作を示すためだけにダミーピクセルを使用しました。 ライブ環境では、発射されたピクセルに対してデータが追跡されるのを見るはずです。 ライブWebページでピクセルが呼び出されるたびに、ピクセル全体のデータがサーバー側でカウントされます。 後で、ビジネスの観点からデータを分析できます。

Amp Tracking Pixel

スティッキー広告

スティッキーADは、広告を表示するための形式の一種です。 広告はページの下部に貼り付けられ、 amp-ad コンポーネントを子として呼び出します。 これは基本的に、ページ上でほとんど見られるフッター広告のようなものです。

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

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

amp-sticky-adにリンクされている条件は次のとおりです-

  • ページで使用できるamp-sticky-adは1つだけです。
  • amp-adはamp-sticky-adの直接の子である必要があります。 たとえば-
<amp-sticky-ad>
   <amp-ad></amp-ad>
</amp-sticky-ad>
  • スティッキー広告コンポーネントは常にページの下部に配置されます。
  • スティッキー広告はコンテナの幅いっぱいになり、スペースをアンプ広告の幅と高さで埋めます
  • sticky-adの高さは100pxです。amp-adの高さが100px未満の場合、sticky adはamp-adの高さになります。amp-adの高さが100pxを超える場合、高さは100pxのままです。オーバーフローコンテンツを非表示にします。スティッキー広告の高さを100ピクセル以上に変更することはできません。
  • スティッキー広告の背景色は変更できます。 ただし、透明な背景は許可されていません。
  • ユーザーがスクロールしてページの下部に到達すると、ページの最後に広告が表示されるため、下部のコンテンツは非表示になりません。
  • 横長モードでは、スティッキー広告は中央揃えになります。
  • 配信する広告がない場合、スティッキー広告のコンテナは折りたたまれ、表示されません。

以下に示すページでamp-sticky-adの実際の例を見てみましょう-

例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - AD</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-sticky-ad" src =
         "https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js">
      </script>
      <style amp-custom>
         div, p{
            text-align:center;
         }
         amp-ad {
            border : solid 1px black;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Sticky AD</h3>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <div>
         <amp-sticky-ad layout = "nodisplay">
            <amp-ad
               width = "320"
               height = "50"
               type = "doubleclick"
               data-slot = "/35096353/amptesting/formats/sticky">
            </amp-ad>
         </amp-sticky-ad>
      </div>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>

      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>

      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>

      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>

      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>

      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>

      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>

      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>

      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>

      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>

      <h2>END OF PAGE IS VISIBLE AND CONTENT IS NOT COVERED</h2>
   </body>
</html>

出力

Amp Sticky Ad

これは、ユーザーがページの最後までスクロールしたときの外観です-

Amp Sticky Ad Scroll

ページの最後に到達しても、広告はコンテンツと重複しません。 ユーザーが広告を閉じることができる閉じるボタンが使用可能になります。

閉じるボタンに関連するもの、つまり画像や幅などを変更する場合は、スタイルコンポーネントの .amp-sticky-ad-close-button を使用して実行できます。

閉じるボタンの背景色を変更する例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - AD</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-sticky-ad"
         src = "https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js">
      </script>
      <style amp-custom>
         div, p{
            text-align:center;
         }
         amp-ad {
            border : solid 1px black;
         }
         .amp-sticky-ad-close-button {
            background-color: red;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Sticky AD</h3>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <div>
         <amp-sticky-ad layout = "nodisplay">
            <amp-ad
               width = "320"
               height = "50"
               type = "doubleclick"
               data-slot = "/35096353/amptesting/formats/sticky">
            </amp-ad>
         </amp-sticky-ad>
      </div>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>

      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>

      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>

      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>

      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>

      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>

      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>

      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>

      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>

      <h2>END OF PAGE IS VISIBLE AND CONTENT IS NOT COVERED</h2>
   </body>
</html>

出力

Amp Sticky Background

出版社のページのアンプスティッキー広告の例

Amp Sticky Publisher

AMPHTML広告

広告の読み込みに使用される<amp-ad>を見てきました。 <amp-ad>を使用してロードされた広告コンテンツは、非ampスタイルのロード広告を使用できます。 ケースでは、<amp-ad>は、広告にamp仕様を使用する広告をロードし、amphtml広告と呼ばれます。 AmpHTML広告は、amp仕様に従っているため、amp以外の広告と比べて高速です。

ライトボックスやカルーセルなどの利用可能なアンプコンポーネントを使用して、広告の表示に役立つさまざまな種類のamphtml広告フォーマットを作成できます。

現在、次の広告サービスはamphtml広告をサポートしています-

  • DoubleClick for Publishers
  • TripleLift
  • ディアノミ
  • アドゼルク
  • グーグルアドセンス

amphtml広告は、以下に示すように<amp-ad>コンポーネントから配信されます-

例

<!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 HTMLAds</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-ad" src =
         "https://cdn.ampproject.org/v0/amp-ad-0.1.js">
      </script>
      <style amp-custom>
         .ad-container {
            background: #FFFFFF;
            margin: 0;
            padding: 0px;
            text-align:center;
         }
         .article-body{
            font-family: avenir, Helvetica, arial, serif, sans-serif !important;
            font-weight: 400;
            text-align:center;
         }
         .adv {
            text-align:center;
         }
      </style>
   </head>
   <body>
      <div>
         <p>Amphtml ads are faster in comparison to the non
         amp ones as they follow the amp specification.</p>
         <p>Amphtml ads work fine in amp pages as well as non amp pages</p>
         <div class = "ad-container">
            <div>Advertising</div>
            <amp-ad layout = "fixed"
               width = "300"
               height = "250"
               type = "fake"
               id = "i-amphtml-demo-fake"
               src = "ampimgl">
            </amp-ad>
         </div>
         <p>Amphtml ads are faster in comparison to the non amp
         ones as they follow the amp specification.</p>
         <p>Amphtml ads work fine in amp pages as well as non amp pages</p>
      </div>
   </body>
</html>

広告を表示するためにamp-adを呼び出しています。 amp-adで使用されるsrcは別のampページです。 type =” fake”およびid =” i-amphtml-demo-fake”を使用しました。 ampページの詳細またはamp-adタグで使用されているampimglは、次のとおりです。

ampimgl

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Image</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>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
      </style>
   </head>
   <body>
      <amp-img alt = "Beautiful Flower"
         src = "images/bannerad.png"
         width = "246"
         height = "205">
      </amp-img>
   </body>
</html>

出力

Amp Img Html

amp-ad内にampページを表示しています。 同様に、amp-video、amp-carouselを使用してampページに広告を表示できます。 リストされている広告サーバーは、amphtml広告の下で広告を配信するための適切なampページを呼び出すサポートを持っています。

Google AMP-分析

アンプ分析は、ページ上のデータを追跡するために使用されるアンプコンポーネントです。 ページ上のすべてのユーザーインタラクションを記録および保存して、データを分析し、さらなる改善やビジネス目的に使用できます。

amp-analyticsコンポーネントを使用するには、ヘッドセクション内に次のスクリプトを追加する必要があります- 

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

amp-analyticsで使用されるイベントを記録するには、サードパーティベンダーを使用するか、社内追跡システムを使用することができます。

GoogleAnalyticsベンダーを使用したamp-analyticsの例-

<amp-analytics type = googleanalytics>
   <script type = application/json>{
      "requests": {
         "pageview": "${eventId}"
      },
      "vars": {
         "account": "UA-44450152-1"
      },
      "triggers": {
         "trackPageview" : {
            "on": "visible",
            "request": "pageview",
            "vars": {
               "eventId": "pageview"
            }
         }
      }
   }
   </script>
</amp-analytics>

comscoreベンダーを使用したamp-analyticsの例

<amp-analytics type = comscore>
   <script type = application/json>
      {"vars": {"c2":"7922264"}}
   </script>
</amp-analytics>

chartbeatベンダーを使用したアンプ分析の例

<amp-analytics type = chartbeat>
   <script type = application/json>{
      "vars": {
         "uid": "230",
         "domain": "dummyurl.com",
         "sections": "us",
         "authors": "Hello World"
      }
   }</script>
</amp-analytics>

ベンダーの詳細なリストはhttps://www.ampproject.org/docs/analytics/analytics-vendors [こちら]で入手できます。

社内分析ベンダーの使用方法に関する実例を以下に示します-

例

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>amp-analytics</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <script async custom-element = "amp-analytics"
         src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
      </script>
      <link rel = "canonical" href = "ampanalyticsl">
      <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>
   </head>
   <body>
      <h1>Google Amp - Analytics</h1>
      <amp-analytics>
         <script type = "application/json">
            {
               "requests": {
                  "event": "http://localhost:8080/googleamp/tracking.php?
                  user=test&account=localhost&event=${eventId}"
               },
               "triggers": {
                  "trackPageview": {
                     "on": "visible",
                     "request": "event",
                        "vars": {
                           "eventId": "pageview"
                        }
                  }
               }
            }
         </script>
      </amp-analytics>
   </body>
</html>

ページがブラウザでヒットすると、トラッカーはページビューのために起動されます。 以下に示すように、Googleネットワークのタブに表示されます。

Amp Pageview

特定の要素がページに表示されているときにamp-analyticsイベントを発生させることもできます。 同じための実用的な例はここに示されています-

例

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>amp-analytics</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <script async custom-element = "amp-analytics"
         src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
      </script>
      <link rel = "canonical" href = "ampanalyticsl">
      <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-video"
         src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
      </script>
   </head>
   <body>
      <h1>Google Amp - Analytics</h1>
      <amp-video controls
         id = "videoplayer"
         width = "640"
         height = "360"
         layout = "responsive"
         poster = "images/videoposter.png"
         autoplay>
            <source src = "video/bunny.webm" type = "video/webm"/>
            <source src = "video/samplevideo.mp4" type = "video/mp4"/>
               <div fallback>
                  <p>This browser does not support the video element.</p>
               </div>
      </amp-video>
      <amp-analytics>
         <script type = "application/json">
         {
         "requests": {
            "event": "http://localhost:8080/googleamp/tracking.php?
            user=test&account=localhost&event=${eventId}"
         },
         "triggers": {
            "trackPageview": {
               "on": "visible",
               "request": "event",
                  "visibilitySpec": {
                     "selector": "#videoplayer",
                     "visiblePercentageMin": 20,
                     "totalTimeMin": 2000,
                     "continuousTimeMin": 200
                  },
                  "vars": {
                     "eventId": "video"
                  }
               }
            }
         }
         </script>
      </amp-analytics>
   </body>
</html>

出力

Amp Analytics

Amp-analyticsコンポーネントでは、jsonオブジェクトをscriptタグに渡す必要があります。 JSONの形式は次のとおりです- 

{
   "requests": {
      request-name: request-value,
      ...
   },
   "vars": {
      var-name: var-value,
      ...
   },
   "extraUrlParams": {
      extraurlparam-name: extraurlparam-value,
      ...
   },
   "triggers": {
      trigger-name: trigger-object,
      ...
   },
   "transport": {
      "beacon": *boolean*,
      "xhrpost": *boolean*,
      "image": *boolean*,
   }
}

上記で指定されたすべてのオブジェクトは、必ずしもamp-analyticsに渡される必要はありません。 サードパーティベンダーを使用している場合、ベンダーはそのフォーマットを使用しているため、ユーザーはその方法でデータを渡す必要があります。

各オブジェクトを詳細に理解しましょう-

リクエスト

要求オブジェクトには、条件が満たされたときに起動するために使用されるURLがあります。 要求オブジェクトの例はここに示されています- 

"requests": {
   "request-name": "http://localhost:8080/googleamp/tracking.php?
   user=test&account=localhost&event=${eventId}"
},

request-nameはトリガーオブジェクトで指定され、同じ名前を使用する必要があります。

Vars

要求オブジェクトで使用されるすべての変数は、varsオブジェクトで指定されます。 

"requests": {
   "event": "http://localhost:8080/googleamp/tracking.php?
   user=test&account=localhost&event=${eventId}"
},
"vars": {
   "eventId": "video"
}

追加のURLパラメータ

クエリ文字列としてリクエストURLに追加される追加パラメータは、このオブジェクトで定義できます。 次の例をご覧ください 

"requests": {
   "event": "http://localhost:8080/googleamp/tracking.php?
   user=test&account=localhost&event=${eventId}&x=1&y=2&z=3"
},
"vars": {
   "eventId": "video"
},
"extraUrlParams": {
   "x": "1",
   "y": "2",
   "z": "3"
}

トリガー

このオブジェクトは、リクエストURLをいつ実行する必要があるかを通知します。 トリガーオブジェクト内で利用可能なキーと値のペアは以下のとおりです- 

*on* -リスニングするイベントに言及する必要があります。 *_on_* に使用できる値は、_render-start、ini-load、click、scroll、timer、visible、hidden、user-error、access- *、およびvideo-* _です。
*request* -これはリクエストの名前です。 これは、_requests_オブジェクトのrequest-nameと一致する必要があります。
*vars* -これは、トリガーオブジェクト内で使用されるように定義された、または定義されたvarsキー値をオーバーライドするために使用されるキー値変数を持つオブジェクトです。
*selector* -これは、トリガーが設定されている要素の詳細を表示します。
*scrollSpec* -これにはスクロールトリガーの詳細が含まれます。
*timerSpec* -これには、指定する時間の詳細が含まれます。
*videoSpec* -これには、ビデオに対して呼び出される詳細が含まれます。

amp-videoを追加した例を次に示します。 Amp-analyticsは、ページ上でビデオ要素が使用可能で、ページ上で少なくとも20％表示され、ビデオが少なくとも2秒間再生され、200ミリ秒間連続して表示されると、トラッカーを起動します。 これらの条件がすべて満たされると、トラッカーだけが解雇されます。 詳細を以下に示します-

Amp Analytics Ex

要素の可視性に関する条件や、要素などのその他の条件を少なくとも20％表示できるようにするには、ビデオを2秒間再生する必要があります。これらの条件はすべて、以下に示すように visibilitySpec 内で指定する必要があります- 

<amp-analytics>
  <script type = "application/json">
   {
      "requests": {
         "event": "http://localhost:8080/googleamp/tracking.php?
         user=test&account=localhost&event=${eventId}"
      },
      "triggers": {
         "trackPageview": {
            "on": "visible",
            "request": "event",
               "visibilitySpec": {
                  "selector": "#videoplayer",
                  "visiblePercentageMin": 20,
                  "totalTimeMin": 2000,
                  "continuousTimeMin": 200
               },
               "vars": {
                  "eventId": "video"
               }
         }
      }
   }
   </script>
</amp-analytics>
*videoSpec* を使用すると、トラッカーの起動をトリガーする条件に基づいて条件を定義できます。 条件はここにリストされています-

を待つ

このプロパティは、特定のケースを待機してから発火する可視性トリガーに使用されます。 waitForで利用可能なオプションは、 none、ini-load 、および render-start です。 デフォルトでは、waitForの値はini-loadです。 

*reportWhen*

このプロパティは、特定のケースを待機してから発火する可視性トリガーに使用されます。 サポートされている値はdocumentExitです。 visibilitySpec 内で reportWhen および repeat プロパティを一緒に使用することはできません。 

*continuousTimeMinおよびContinuousTimeMax*

このプロパティは、 continuousTimeMin と continuousTimeMax の間で連続してビューポートに存在する必要のある要素を必要とする可視性トラッカーを示します。 continousTimeMinが指定されていない場合、デフォルトで0に設定されます。 値はミリ秒単位で指定されます。 

*totalTimeMinおよびtotalTimeMin*

このプロパティは、 totalTimeMin と totalTimeMin の間の合計時間の間、要素がビューポートに存在する必要があることを起動する可視性トラッカーを示します。 totalTimeMinが指定されていない場合、デフォルトの0になります。値はミリ秒単位で指定されます。 

*visiblePercentageMinおよびvisiblePercentageMax*

このプロパティは、それを起動する可視性トラッカーが、visiblePercetageMinとvisiblePercentageMaxに割り当てられた割合の間のビューポート内で要素を表示する必要があることを示します。 visiblePercentageMin のデフォルト値は0および visibilePercentageMax の100です。どちらも値が0で、要素が表示されていないときに可視性トリガーが起動し、要素が完全に表示されたときに両方が100である場合に起動します。

繰り返す

trueに設定すると、visibilitySpec条件が満たされるたびにトリガーが起動します。 デフォルトでは、repeatの値はfalseです。 reportWhenプロパティと一緒に使用することはできません。

クリックトリガーの例はここに示されています- 

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>amp-analytics</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <script async custom-element = "amp-analytics"
      src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
      </script>
      <link rel = "canonical" href = "ampanalyticsl">
      <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-video"
         src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
      </script>
      <style amp-custom>
         a {
            color: blue;
         }
      </style>
   </head>
   <body>
      <h1>Google Amp - Analytics</h1>
      <a>Click Here</a>
      <amp-analytics>
         <script type = "application/json">
            {
               "requests": {
                  "event": "http://localhost:8080/googleamp/tracking.php?
                  user=test&account=localhost&event=${eventId}"
               },
               "triggers": {
                  "trackAnchorClicks": {
                  "on": "click",
                  "selector": "a",
                  "request": "event",
                     "vars": {
                        "eventId": "clickonlink"
                     }
                  }
               }
            }
         </script>
      </amp-analytics>
   </body>
</html>

出力

Amp Visibility

リンクをクリックすると、イベントは以下のように発生します-

Amp Visibility Link

Google AMP-ソーシャルウィジェット

Ampは、外部ライブラリをロードせずに、ページにソーシャルウィジェットを表示するサポートを提供します。 この章では、ここにリストされている人気のあるソーシャルウィジェットについて説明します-

  • Google AMP-Facebook
  • Google AMP-Twitter
  • Google AMP-Pinterest

Google Amp-Facebook

amp-facebookコンポーネントを使用して、facebookに接続し、投稿、ビデオ、コメントをampページに表示できます。

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

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

Amp-facebookタグ形式

<amp-facebook
   width = "552"
   height = "310"
   layout = "responsive"
   data-href = "https://www.facebook.com/finddevguidesindia/
   posts/1784197988358159">
</amp-facebook>

amp-facebookの動作例を次に示します-

例：Facebookからの投稿を表示する

<!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 Facebook</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-facebook"
         src = "https://cdn.ampproject.org/v0/amp-facebook-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Amp Facebook</h3>
      <h2>Learn Python webscrapping</h2>
      <amp-facebook
         width = "552"
         height = "310"
         layout = "responsive"
         data-href = "https://www.facebook.com/finddevguidesindia/posts/1784197988358159">
      </amp-facebook>
   </body>
</html>

出力

Amp Visibility

例：Facebookのビデオを表示する

<!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 Facebook>/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-facebook"
         src = "https://cdn.ampproject.org/v0/amp-facebook-0.1.js">
      </script>
   </head>
   <body>
      <h3<Google AMP - Amp Facebook Video</h3>
      <h2<Learn Python</h2>
      <amp-facebook
         width = "476"
         height = "316"
         layout = "responsive"
         data-embed-as = "video"
         data-href = "https://www.facebook.com/thetutorialkings/videos/701545820223256">
      </amp-facebook>
   </body>
</html>

出力

Amp Facebook Video

例：Facebook投稿のコメントを表示する

<!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 Facebook</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-facebook"
         src = "https://cdn.ampproject.org/v0/amp-facebook-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Amp Facebook comment for post</h3>
      <h2>Learn Microprocessor</h2>
      <amp-facebook
         width = "552"
         height = "500"
         layout = "responsive"
         data-embed-type = "comment"
         data-href = "https://www.facebook.com/finddevguidesindia/posts/1744145745696717?
         comment_id=1744179789026646&include_parent=false">
      </amp-facebook>
   </body>
</html>

出力

Amp Facebook Post 

*amp-facebook* で利用可能な属性は次のとおりです。
  • data-href （必須）-ここでは、facebookのURLを指定する必要があります。
  • * data-embed-as *-利用可能なオプションは投稿、ビデオ、コメントです。 デフォルトでは、投稿です。
  • data-locale （必須）-ロケール言語で表示します。選択に応じて変更できます。
  • * data-include-comment-parent *-値はtrueまたはfalseを取ります。 デフォルトではfalseです。 コメントとしてdata-embed-asオプションを使用する場合、親がコメントに返信する必要がある場合は、このオプションをtrueに設定できます。

これまで、投稿/ビデオとコメントをアンプページに追加する方法を見てきました。 facebookページを追加する必要がある場合、ampには amp-facebook-page というコンポーネントがあります。

Amp Facebookページプラグイン

amp-facebook-pageコンポーネントは、必要なfacebookページの詳細を提供します。amp-facebook-pageを使用するには、次のスクリプトを追加する必要があります- 

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

amp-facebook-pageを使用した実際の例を次に示します-

例

<!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 Facebook</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-facebook-page"
         src = "https://cdn.ampproject.org/v0/amp-facebook-page-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Amp Facebook Page</h3>
      <h3>Welcome to finddevguides Facebook Page</h3>
      <amp-facebook-page
         width = "340"
         height = "130"
         layout = "responsive"
         data-href = "https://www.facebook.com/finddevguidesindia/">
      </amp-facebook-page>
   </body>
</html>

出力

Amp Facebookページ

Amp-facebookのような

ボタンプラグインのようなFacebookページを埋め込むには、amp-facebookのようなコンポーネントを使用できます。 amp-facebookのように動作するには、次のスクリプトを追加する必要があります- 

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

例

<!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 Facebook</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-facebook-like"
         src = "https://cdn.ampproject.org/v0/amp-facebook-like-0.1.js">
      </script>
      <style amp-custom>
         amp-facebook-like {
            margin: 1rem
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Facebook Likes</h3>
      <h3>Welcome to finddevguides Facebook Likes</h3>
      <amp-facebook-like
         width = "110"
         height = "20"
         layout = "fixed"
         data-layout = "button_count"
         data-href = "https://www.facebook.com/finddevguidesindia">
      </amp-facebook-like>
   </body>
</html>

出力

Amp Facebook Like

Amp facebook commentsプラグイン

Amp-facebook-commentsコンポーネントは、指定されたページのコメントを提供します。

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

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

例

<!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 Facebook</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-facebook-comments"
         src = "https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js">
      </script>
      <style amp-custom>
         amp-facebook-like {
            margin: 1rem
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Facebook Likes</h3>
      <amp-facebook-comments
         width = 486
         height = 657
         layout = "responsive"
         data-numposts = "2"
         data-href = "https://developers.facebook.com/docs/plugins/comments">
      </amp-facebook-comments>
   </body>
</html>

出力

Facebookのいいね！

属性 data-numposts は、画面に表示されるコメントの数を決定します。 すべてのコメントを取得する場合は、属性を削除できます。

Google AMP-Pinterest

Ampは、amp-pinterestコンポーネントを使用してpinterestウィジェットを提供します。 このコンポーネントを使用して、pinterestウィジェット、pinterest保存ボタン、pinterestフォローボタンを表示できます。

amp-pinterestでの作業を開始するには、次のスクリプトを追加する必要があります- 

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

Amp-pinterestタグ

<amp-pinterest width = 300 height = 450 data-do = "embedPin"
   data-url = "https://in.pinterest.com/pin/856739529089490354/">
</amp-pinterest>

Pinterestウィジェット

例

pinterestウィジェットを表示するには、属性data-do = "embedPin"を使用する必要があります。 同じための実用的な例はここに示されています- 

<!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 Pinterest Widget</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 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-pinterest"
         src = "https://cdn.ampproject.org/v0/amp-pinterest-0.1.js">
      </script>
      <style amp-custom>
         amp-facebook-like {
            margin: 1rem
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Pinterest Widget</h3>
      <amp-pinterest
         width = 300
         height = 450
         data-do = "embedPin"
         data-url = "https://in.pinterest.com/pin/856739529089490354/">
      </amp-pinterest>
   </body>
</html>

出力

Amp Pinterestウィジェット

Pinterest保存ボタン

pinterestの保存ボタンを表示するには、属性 data-do = "buttonPin" を使用する必要があります。 pinterest保存ボタンの実用例はここに示されています-

例 

<!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 Pinterest Widget</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-pinterest"
         src = "https://cdn.ampproject.org/v0/amp-pinterest-0.1.js">
      </script>
      <style amp-custom>
         amp-facebook-like {
            margin: 1rem
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Pinterest Save Button</h3>
      <h3>finddevguides - ReactJS</h3>
      <amp-img
         src = "images/reactjs.png"
         width = "100"
         height = "100"
         alt = "blockchain image">
      </amp-img>
      <amp-pinterest
         height = "18"
         width = "56"
         data-do = "buttonPin"
         data-url = "https://www.finddevguides.com/"
         data-media = "https://www.finddevguides.com/images/tp-logo-diamond.png"
         data-description = "amp-pinterest in action">
      </amp-pinterest>
   </body>
</html>

出力

Amp Pinterest保存ボタン

Pinterestフォローボタン

Pinterestのフォローフォローボタンを表示するには、属性 data-do = "buttonFollow" を使用する必要があります。 Pinterestの保存ボタンの実際の例を次に示します-

例 

<!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 Pinterest Widget</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-pinterest"
         src = "https://cdn.ampproject.org/v0/amp-pinterest-0.1.js">
      </script>
      <style amp-custom>
         amp-facebook-like {
            margin: 1rem
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Pinterest Follow Button</h3>
      <amp-pinterest
         height = 50
         width = 130
         data-do = "buttonFollow"
         data-href = "https://in.pinterest.com/wedgehairstyles/"
         data-label = "wedgehairstyles">
      </amp-pinterest>
   </body>
</html>

出力

Amp Pinterestフォローボタン

Google Amp-Twitter

Ampには、amp-twitterを使用してTwitterフィードを表示するコンポーネントがあります。

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

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

Amp-twitterタグ

<amp-twitter width = "375" height = "472"
   layout = "responsive" data-tweetid = "885634330868850689">
</amp-twitter>

ツイートを示す実例がここに示されています

例 

<!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 Twitter</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-twitter" src =
         "https://cdn.ampproject.org/v0/amp-twitter-0.1.js">
      </script>
      <style amp-custom>
         amp-facebook-like {
            margin: 1rem
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Twitter</h3>
      <amp-twitter
         width = "375"
         height = "472"
         layout = "responsive"
         data-tweetid = "885634330868850689">
      </amp-twitter>
   </body>
</html>

出力

Amp twitterタグ

Google AMP-メディア

この章では、jwplayerやYoutubeなどのサードパーティパートナーからのビデオとオーディオを表示する方法について説明します。 次のことについて詳しく学びましょう-

  • Google AMP-JwPlayer
  • Google AMP-YouTube
  • Google AMP-オーディオ

Google AMP-JwPlayer

jwplayerを使用してページにビデオを表示する場合、ampにはamp-jwplayerがあります。

amp-jwplayerを使用するには、ページに次のスクリプトを含めます- 

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

amp-jwplayerタグ

<amp-jwplayer
   data-playlist-id = "482jsTAr"
   data-player-id = "uoIbMPm3"
   layout = "responsive"
   width = "16"
   height = "9">
</amp-jwplayer>

ampページのjwplayerの動作例を以下に示します-

例

<!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 Jwplayer</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-jwplayer" src =
         "https://cdn.ampproject.org/v0/amp-jwplayer-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Amp Jwplayer</h3>
      <amp-jwplayer
         data-playlist-id = "482jsTAr"
         data-player-id = "uoIbMPm3"
         layout = "responsive"
         width = "16"
         height = "9">
      </amp-jwplayer>
   </body>
</html>

出力

Amp jwplayerタグ

amp-jwplayerには、3つの重要な属性があります

  • データプレーヤーID
  • データメディアID
  • データプレイリストID

プレーヤー、メディア、プレイリストのIDを取得するには、ここから実行できるjwplayerにログインする必要があります-https://dashboard.jwplayer.com//players/list?pageLength=s&page=1&view=list&dateRange= 7d＆dateRangeEnd = 2019-02-22＆dateRangeStart = 2019-02-15 [https://dashboard.jwplayer.com//players]

プレーヤーIDはjwplayerプレーヤーセクションで利用できます。 メディアIDは* jwplayerコンテンツセクション*で、プレイリストIDは* jwplayerプレイリストセクション*で利用できます。

Jwplayerは、各属性のamp-jwplayerで使用する必要がある8桁の英数字IDを提供します。

Google AMP-Youtube

アンプページにYoutubeビデオを表示する場合、ampにはamp-youtubeがあり、ページにyoutubeビデオを埋め込みます。

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

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

amp-youtubeタグ

<amp-youtube
   width = "480"
   height = "270"
   layout = "responsive"
   autoplay = "true"
   data-videoid = "fWZ6-p7mGK0">
</amp-youtube>

このページでamp-youtubeの動作を示す例に取り組みましょう。

例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Youtube</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-youtube" src =
         "https://cdn.ampproject.org/v0/amp-youtube-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Youtube</h3>
      <h3>Youtube Videos from finddevguides</h3>
      <amp-youtube
         width = "480"
         height = "270"
         layout = "responsive"
         autoplay = "true"
         data-videoid = "fWZ6-p7mGK0">
      </amp-youtube>
   </body>
</html>

出力

Amp youtube tag

YouTubeビデオを表示するには、以下に示すようにamp-youtubeにvideoidを与える必要があります- 

<amp-youtube
   width = "480"
   height = "270"
   layout = "responsive"
   autoplay = "true"
   data-videoid = "fWZ6-p7mGK0">
</amp-youtube>

data-videoidを取得する方法は？

たとえばhttps://www.youtube.com/watch?v=fWZ6-p7mGK0などのYouTubeのURLを検討してください。 ハイライトされた部分は、amp-youtubeで使用されるIDです。

属性 autoplay をtrueとして使用しました。 ビデオはブラウザでサポートされているように自動再生され、ミュートモードで再生されます。 ミュートを解除するには、動画をタップする必要があります。 ビデオは、表示されなくなると一時停止し、表示されると一時停止状態から再開します。 ユーザーがビデオを一時停止して表示/非表示になった場合、ビデオは一時停止状態のままになります。 同じことがミュート/ミュート解除にも適用されます。

Google Amp-オーディオ

Ampには、html5オーディオタグに代わるオーディオを再生するタグがあります。 ampページでオーディオを再生するには、amp-audioを使用できます。

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

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

アンプオーディオタグ

<amp-audio
   width = "auto"
   height = "50"
   src = "audio/test.mp3">
  <div fallback>
     <p>HTML5 audio is not supported on your browser!</p>
   </div>
</amp-audio>

したがって、amp-audioは、オーディオファイルへのhttp要求であるsrc属性を使用します。 標準のhtml5オーディオの代わりにamp-audioを使用している理由は、ampがhttp要求を必要とする要素に対して遅延ロードの概念を導入しているためです。

優先度に基づいてリクエストのロードを開始します。ビューポートに到達する直前または直前にロードされます。

あなたのページでアンプオーディオを使用する実用的な例はここに示されています-

例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Audio</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-audio"
         src = "https://cdn.ampproject.org/v0/amp-audio-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Audio</h3>
      <amp-audio
         width = "auto"
         height = "50"
         src="audio/test.mp3">
            <div fallback>
               <p>HTML5 audio is not supported on your browser!</p>
            </div>
      </amp-audio>
   </body>
</html>

出力

Amp-audioタグ

幅、高さ、srcなどの属性が指定されているamp-audioのタグを以下に示します。 また、ブラウザでamp-audioがサポートされていない場合のフォールバックとして機能する* fallback属性*を含むdivを追加しました。 

<amp-audio
   width = "auto"
   height = "50"
   src = "audio/test.mp3">
   <div fallback>
      <p>HTML5 audio is not supported on your browser!</p>
   </div>
</amp-audio>

コントロールはデフォルトでオーディオタグに追加され、オーディオの再生/一時停止、ミュート/ミュート解除に使用できることに注意してください。 以下に示すように、オーディオタグのダウンロードオプションを取得します-

Amp pause tag

Amp再生タグ

ダウンロードをクリックすると、使用するメディアファイルをダウンロードできます。 ダウンロードを無効にするには、次の例に示すように、属性- controlsList = "nodownload" を使用できます-

例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Audio</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-audio"
            src = "https://cdn.ampproject.org/v0/amp-audio-0.1.js">
         </script>
   </head>
   <body>
      <h3>Google AMP - Audio</h3>
      <amp-audio
         width = "auto"
         height = "50"
         src = "audio/test.mp3"
         controlsList = "nodownload">
            <div fallback>
               <p>HTML5 audio is not supported on your browser!</p>
            </div>
      </amp-audio>
   </body>
</html>

出力

Amp audio tag Ex 

*controlsList = "nodownload"* を使用すると、右側の3つの縦のドットが消えます。
*preload* や *autoplay* などの属性があり、それらがオーディオタグに追加されると、ページのロード時にオーディオファイルがロードされ、ブラウザがサポートしている場合は自動再生されます。 次の例は、オーディオの自動再生を示しています。

例

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset="utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Audio</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-audio"
         src = "https://cdn.ampproject.org/v0/amp-audio-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Audio</h3>
      <amp-audio
         width = "auto"
         height = "50"
         src = "audio/test.mp3" preload autoplay>
            <div fallback>
               <p>HTML5 audio is not supported on your browser!</p>
            </div>
      </amp-audio>
   </body>
</html>

出力

Amp Preload

属性 loop （存在する場合）は、オーディオが完了すると再びオーディオを再生します。

例

<amp-audio
   width = "auto"
   height = "50"
   src = "audio/test.mp3" loop>
   <div fallback>
      <p>HTML5 audio is not supported on your browser!</p>
   </div>
</amp-audio>

Google AMP-HTMLページからアンプページ

この章では、通常のhtmlページをampページに変換する方法を理解します。 ampのページも検証し、最後に出力を確認します。

まず、以下に示すように、通常のhtmlページを取り上げます-

testl

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>Tutorials</title>
      <link href = "style.css" rel = "stylesheet"/>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <script src = "js/jquery.js"></script>
   </head>
   <body>
      <header role = "banner">
         <h2>Tutorials</h2>
      </header>
      <h2>Some Important Tutorials List</h2>
      <article>
         <section>
            <img src = "images/tut1.png" width="90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut2.png" width="90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut3.png" width="90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut4.png" width="90%" height = "90%"/>
         </section>
      </article>
      <footer>
         <p>For More tutorials Visit <a href =
         "https://finddevguides.com/">Tutorials Point</a></p>
      </footer>
   </body>
</html>

私たちはその中でstyle.cssを使用していることに注意してください、cssファイルの詳細はここに示されているとおりです- 

h1 {color: blue;text-align: center;}
   h2 {text-align: center;}
      img {
         border: 1px solid #ddd;
         border-radius: 4px;
         padding: 5px;
      }
      article {
         text-align: center;
      }
      header{
         width: 100%;
         height: 50px;
         margin: 5px auto;
         border: 1px solid #000000;
         text-align: center;
         background-color: #ccc;
      }
      footer {
         width: 100%;
         height: 35px;
         margin: 5px auto;
         border: 1px solid #000000;
         text-align: center;
         background-color: yellow;
      }

上記のlでもjquery.jsファイルを使用していることに注意してください。

今、testlをローカルでホストし、ここに与えられたリンクで見られる出力を見てください- 

*http：//localhost：8080/googleamp/testl*

Amp Htmlページ

では、ステップバイステップで上記のtestlファイルをtest_amplファイルに変更してみましょう。

まず、testlをtest_amplとして保存し、以下の手順に従います。

  • ステップ1 *-以下に示すように、ヘッドセクションにアンプライブラリを追加します-
<script async src = "https://cdn.ampproject.org/v0.js">
</script>

たとえば、test_amplに追加すると、次のようになります- 

<head>
   <meta charset = "utf-8">
   <title>Tutorials</title>
   <script async src = "https://cdn.ampproject.org/v0.js">
   </script>
   <link href = "style.css" rel = "stylesheet"/>
   <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <script src = "js/jquery.js"></script>
</head>

次に、ブラウザーでtest_amplページを実行し、ブラウザーコンソールを開きます。 以下に示すように、コンソールメッセージが表示されます-

Amp Page

あなたのhtmlファイルが有効なアンプであるかどうかを知るには、以下に示すように、最後に＃development = 1をhtmlページのURLに追加します- 

http://localhost:8080/googleamp/test_ampl#development=1

ブラウザとGoogle Chromeコンソールで上記のURLにアクセスします。 ampの仕様の観点から、ampが無効であると考えるエラーをリストします。

test_amplで発生したエラーを以下に示します-

テストアンプページ

ampの成功メッセージが表示されるまで、それらを1つずつ修正しましょう。

  • ステップ2 *-コンソールに次のエラーが表示されます-

テストエラーコンソール

これを修正するには、htmlタグに⚡またはampを追加します。 以下に示すように、htmlタグにampを追加します- 

<html amp>
  • ステップ3 *-以下に示すように、headタグにcharsetおよびname =” viewport”を含むメタタグがあることを確認してください-
<head>
   <meta charset = "utf-8">
   <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
</head>
  • ステップ4 *-次のエラーがここに表示されます-

次のエラー

リンクrel = stylesheetでhrefを示しています。つまり、次のリンクはエラーをスローしています。 これは、ampでは、hrefを使用したリンクを使用する外部スタイルシートをページ内に配置できないためです。 

<link href = "style.css" rel = "stylesheet"/>
We can add the all the css in style.css as follows −
<style amp-custom>
  /*All styles from style.css please add here */
</style>

したがって、style.cssにあるcssデータは、amp-custom属性を使用してスタイルに追加する必要があります。 

<style amp-custom>
   h1 {color: blue;text-align: center;}
   h2 {text-align: center;}
      img {
         border: 1px solid #ddd;
         border-radius: 4px;
         padding: 5px;
      }
      article {
         text-align: center;
      }
      header{
         width: 100%;
         height: 50px;
         margin: 5px auto;
         border: 1px solid #000000;
         text-align: center;
         background-color: #ccc;
      }
      footer {
         width: 100%;
         height: 35px;
         margin: 5px auto;
         border: 1px solid #000000;
         text-align: center;
         background-color: yellow;
      }
</style>

スタイルタグをアンプページに追加します。 ブラウザーで上記のスタイルタグを使用して同じことをテストしてみましょう。 test_amplに対してこれまでに行った変更を以下に示します- 

<!DOCTYPE html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Tutorials</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <script src = "js/jquery.js"></script>
      <style amp-custom>
         h1 {color: blue;text-align: center;}
         h2 {text-align: center;}
            img {
               border: 1px solid #ddd;
               border-radius: 4px;
               padding: 5px;
            }

            article {
               text-align: center;
            }
            header{
               width: 100%;
               height: 50px;
               margin: 5px auto;
               border: 1px solid #000000;
               text-align: center;
               background-color: #ccc;
            }
            footer {
               width: 100%;
               height: 35px;
               margin: 5px auto;
               border: 1px solid #000000;
               text-align: center;
               background-color: yellow;
            }
      </style>
   </head>
   <body>
      <header role = "banner">
         <h2>Tutorials</h2>
      </header>
      <h2>Some Important Tutorials List</h2>
      <article>
         <section>
            <img src = "images/tut1.png" width = "90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut2.png" width = "90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut3.png" width = "90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut4.png" width="90%" height = "90%"/>
         </section>
      </article>
      <footer>
         <p>For More tutorials Visit <a href =
         "https://finddevguides.com/">Tutorials Point</a></p>
      </footer>
   </body>
</html>

上記のページのコンソールで出力とエラーを見てみましょう。 次のスクリーンショットを確認してください-

出力とエラー

コンソールに表示されるエラーは次のとおりです-

出力とエラーのスクリーンショット

これで、ampのエラーの一部について、スタイルが削除されていることがわかります。 残りのエラーを今すぐ修正しましょう。

  • ステップ5 *-リストに表示される次のエラーは次のとおりです-

Amp See List

jqueryファイルを呼び出すスクリプトタグを追加しました。 ampページでは、ページ内のカスタムjavascriptが許可されないことに注意してください。 これを削除し、利用可能なampコンポーネントを使用する必要があります。

たとえば、アニメーションが必要な場合はamp-animationがあります。amp-analyticsでは、Google Analyticsコードをページに追加する必要があります。 同様に、ページに表示される広告を表示するamp-adコンポーネントがあります。 また、srcを同じオリジンに向け、amp-iframeで必要に応じてカスタムjavascriptを呼び出すことができるamp-iframeコンポーネントもあります。

次に、ページからスクリプトタグを削除します。

  • ステップ6 *-表示される次のエラーはここに表示されます-

表示されるエラー

上記のエラーは、ページで使用した画像タグを指しています。 Ampでは、ページ内で<img src =””/>タグを使用できません。 代わりにamp-imgタグを使用する必要があることに注意してください。

ここに示すように<img>タグを<amp-img>で置き換えましょう- 

<section>
   <amp-img alt = "Beautiful Flower"
      src = "images/tut1.png"
      width = "500"
      height = "160"
      layout = "responsive">
   </amp-img>
</section>
<section>
   <amp-img alt = "Beautiful Flower"
      src = "images/tut2.png"
      width = "500"
      height = "160"
      layout = "responsive">
   </amp-img>
</section>
<section>
   <amp-img alt = "Beautiful Flower"
      src = "images/tut3.png"
      width = "500"
      height = "160"
      layout = "responsive">
   </amp-img>
</section>
<section>
   <amp-img alt = "Beautiful Flower"
      src = "images/tut4.png"
      width = "500"
      height = "160"
      layout = "responsive">
   </amp-img>
</section>

上記のように、すべての<img>タグを<amp-img>に置き換えました。 ここで、ブラウザでページを実行して、出力とエラーを確認します-

Replaced Img

エラー

交換されたエラー

現在、エラーが少なくなっていることを確認してください。

  • ステップ7 *-コンソールに表示される次のエラーは次のとおりです-

エラーの減少

headセクションにlink rel = canonicalタグを追加する必要があります。 これは必須タグであり、常に次のように頭に追加する必要があることに注意してください- 

<link rel = "canonical" href =
   "http://example.ampproject.org/article-metadatal">

ステップ8 *-コンソールに noscriptタグがない場合に表示される次のエラー*

noscript tag

次のように、ヘッドセクションにamp-boilerplateで囲まれた<noscript>タグを追加する必要があります- 

<noscript>
   <style amp-boilerplate>
      body{
         -webkit-animation:none;
         -moz-animation:none;
         -ms-animation:none;
         animation:none}
   </style>
</noscript>
  • ステップ9 *-表示される次のエラーは以下のとおりです-

表示される次のエラー

もう1つの必須タグはamp-boilerplateを使用したスタイルタグで、noscriptタグの前に配置する必要があります。 amp-boilerplateを使用したスタイルタグを次に示します- 

<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>

上記のスタイルタグをtest_amplページに追加します。

完了したら、ブラウザでページをテストして、出力とコンソールを確認します-

browser

コンソールの詳細はここに示されています-

コンソールの詳細

したがって、最終的にすべてのエラーが解決され、test_amplページは有効なampページになります。

ヘッダーとフッターが切り捨てられるため、追加するスタイルがいくつかあります。追加したカスタムスタイルで同じものを更新できます。 そのため、ヘッダーとフッターからwidth：100％を削除しました。

これが最終出力です-

切り捨て

最終的なtest_amplファイル

<!DOCTYPE html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Tutorials</title>
      <link rel = "canonical" href=
      "http://example.ampproject.org/article-metadatal">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <meta name = "viewport" content = "width = device-width,
      initial-scale = 1.0">

      <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>
      <style amp-custom>
         h1 {color: blue;text-align: center;}
         h2 {text-align: center;}
            amp-img {
               border: 1px solid #ddd;
               border-radius: 4px;
               padding: 5px;
            }
            article {
               text-align: center;
            }
            header{
               height: 50px;
               margin: 5px auto;
               border: 1px solid #000000;
               text-align: center;
               background-color: #ccc;
            }
            footer {
               height: 35px;
               margin: 5px auto;
               border: 1px solid #000000;
               text-align: center;
               background-color: yellow;
            }
      </style>
   </head>
   <body>
      <header role = "banner">
         <h2>Tutorials</h2>
      </header>
      <h2>Some Important Tutorials List</h2>
      <article>
         <section>
            <amp-img
               alt = "Beautiful Flower"
               src = "images/tut1.png"
               width = "500"
               height = "160"
               layout = "responsive">
            </amp-img>
         </section>
         <section>
            <amp-img
               alt = "Beautiful Flower"
               src = "images/tut2.png"
               width = "500"
               height = "160"
               layout = "responsive">
            </amp-img>
         </section>
         <section>
            <amp-img
               alt = "Beautiful Flower"
               src = "images/tut3.png"
               width = "500"
               height = "160"
               layout = "responsive">
            </amp-img>
         </section>
         <section>
            <amp-img
               alt = "Beautiful Flower"
               src = "images/tut4.png"
               width = "500"
               height = "160"
               layout = "responsive">
            </amp-img>
         </section>
      </article>
      <footer>
         <p>For More tutorials Visit <a href =
         "https://finddevguides.com/">
            Tutorials Point</a>
         </p>
      </footer>
   </body>
</html>

したがって、通常のhtmlファイルをampに変換することで、最終的には完了です。

Google AMP-基本的な構文

この章では、Google AMPページを開始するための基本的な要件について説明します。

サンプルアンプページ

アンプページの基本的な例を以下に示します- 

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "./regular-html-versionl">
      <meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-scale = 1">
      <style amp-custom>
         h1 {color: red}
      </style>

      <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>
      <h1>Amp Sample Page</h1>
      <p>
         <amp-img
            src = "images/christmas1.jpg"
            width = "300"
            height = "300"
            layout = "responsive">
         </amp-img>
      </p>
   </body>
</html>

必須タグ

ampページに含める必須タグがいくつかあります。 このセクションでは、それらについて詳しく説明します-

  • 以下に示すように、htmlタグに amp またはaddを追加する必要があります。
<html amp>
   OR
<html ⚡>
  • <head>および<body>タグをhtmlページに追加する必要があります。

必須のメタタグのいずれかが欠落すると、Amp検証が失敗する場合があります。 ページのヘッドセクションに追加されるいくつかの必須のmetsタグはここに示されています- 

<meta charset="utf-8">
   <meta name  =  "viewport"
      content = "width = device-width,
      minimum-scale = 1,
      initial-scale = 1">
  • headタグ内に追加されるrel = "canonical"のリンク
<link rel = "canonical" href = "./regular-html-versionl">
  • amp-boilerplateを使用したスタイルタグ-
<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>
  • amp-boilerplateを使用したNoscriptタグ-
<noscript>
   <style amp-boilerplate>
      body{
         -webkit-animation:none;
         -moz-animation:none;
         -ms-animation:none;
         animation:none}
   </style>
</noscript>
  • 以下に示すように、asyncが追加されたampスクリプトタグ。 これはすべての最も重要なタグです-
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
  • このタグは、ページにカスタムcssを追加する場合に使用する必要があります。 ampページで外部スタイルシートを呼び出すことはできません。 カスタムCSSを追加するには、すべてのCSSがここに行かなければなりません-
<style amp-custom>
  //all your styles here
</style>

page-urlの最後で＃developement = 1を使用すると、ブラウザで上記のページを検証できます。

それでは、ブラウザで同じことをテストしましょう。 ページをローカルでホストし、amppagelとして保存しました。

テストする上記のURLは 

*http：//localhost/googleamp/amppagel＃development = 1*

例

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "./regular-html-versionl">
      <meta name = "viewport" content = "width=device-width,
      minimum-scale = 1,initial-scale = 1">
      <style amp-custom>
         h1 {color: red}
      </style>
      <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>
      <h1>Amp Sample Page</h1>
      <p>
         <amp-img
            src = "images/christmas1.jpg"
            width = "300"
            height = "250"
            layout = "responsive">
         </amp-img>
      </p>
   </body>
</html>

出力

Ampサンプルページ

次のように、開発者コンソールでアンプ検証ステータスを見ることができます-

検証開発者

有効なampページに必要な必須タグをすべて追加したため、AMP検証が成功しました。

Google AMP-検証

Google AMPは、デバイスでのWebページの読み込みを高速化する方法です。 ampを使用するには、HTML5、CSS、およびampコンポーネントを使用できます。

Google Ampには、ampページを検証する多くの方法が用意されています。 この章で議論する重要なもののいくつかは-

  • ＃development = 1を使用する
  • Amp Validatorを使用する
  • コマンドラインを使用する

それぞれについて詳しく説明します。

#development = 1を使用する

ページの検証の準備ができたら、＃development = 1をpage-urlの最後に追加し、Chrome開発者ツールで同じことをテストします。

次の例に示すように、最後に*＃development = 1 *をHTMLページのURLに追加できます- 

http://localhost:8080/googleamp/test_ampl#development=1

ブラウザとGoogle Chromeコンソールで上記のURLにアクセスします。 ampがアンプの仕様の観点から無効であると考えるエラーをリストします。

test_amplで発生したエラーは次のとおりです。

テストAMP

あなたが表示されたエラーを修正することができ、すべてのエラーが修正されると、次のように表示されます-

修正されたエラー

Amp Validatorを使用する

Ampには、HTMLコンテンツを入力できる検証ツールがあり、ステータスをPASSまたはERRORとして表示し、ページにエラーも表示します。 リンクは-https://validator.ampproject.org/です

アンプ検証ツールの表示は以下のとおりです-

検証ツール

ページコンテンツのエラーの例を以下に示します-

ページコンテンツ

コマンドラインを使用する

次のコマンドを使用してnpmパッケージをインストールできます- 

npm install -g amphtml-validator

コマンドライン

amptest/フォルダーを作成し、そのフォルダーにamp_testlファイルを保存しました。 コマンドラインで次のコマンドを使用して、amp_testlを検証します。 

amphtml-validator youramppagel

タグを削除

ページからいくつかのタグを削除して、エラーが表示されるかどうかを確認します。

タグを削除

表示されたエラーは、ステータスがPASSになるまで修正できます。

Google AMP-キャッシュ

Google ampは、純粋なampページを提供するプロキシベースのコンテンツ配信ネットワークであるキャッシング機能を提供します。 デフォルトでは、有効なすべてのアンプページでアンプキャッシュを使用できます。 非ampページと比較して、ページをより速くレンダリングするのに役立ちます。

現在、2つのampキャッシュプロバイダー Google AMP Cache と Cloudflare AMP Cache があります。 前述のように、アンプキャッシュはすべての有効なアンプページで利用できます。 ユーザーがアンプキャッシュ機能を使用したくない場合は、アンプページを無効にする必要があります。 無効なアンプページにはアンプキャッシュは適用されません。

Google検索がクロールしてHTMLコンテンツのamp（）を見つけると、キャッシュを検討します。

このセクションでは、Google ampキャッシュURLのさまざまなコンポーネントについて説明します。

サブドメイン

Google AMPは、リクエストされたURLにサブドメインを追加します。 ampキャッシュサブドメインURLにはいくつかのルールがあります。 それらはここに示されています-

サブドメインキャッシュURLのルール

  • AMPドキュメントドメインをIDN（Punycode）からUTF-8に変換します。
  • URLのダッシュ（-）は2つのダッシュ（-）に置き換えられます
  • URLのドット（。）はダッシュ（-）に置き換えられます。
  • IDN（Punycode）への変換。

たとえば、 pub.mypage は pub-mypage.cdn.ampproject.com に置き換えられます。 ここで、cdn.ampproject.comはgoogle ampによって追加されたサブドメインです。 キャッシュされたURLはPub-mypage.cdn.ampproject.comです。

コンテンツタイプ

使用可能なコンテンツタイプは、AMP HTMLドキュメントの場合はc、イメージの場合はi、フォントなどのリソースの場合はrです。 コンテンツタイプが指定されたものと一致しない場合、404エラーが発生します。

オプションの「s」

sが存在する場合、コンテンツはオリジンhttps://から取得されます。それ以外の場合、http：//からフェッチします

httpsとhttpからキャッシュされたイメージに対して行われたリクエストの例はここに示されています-

例

https://pub-mypage-com.cdn.ampproject.org/i/s/examples/images/testimage.png

したがって、上記の例では、URLはiを持っています。これはhttpsのイメージとsを意味します-

例

http://pub-mypage-com.cdn.ampproject.org/i/examples/images/testimage.png

したがって、上記の例では、URLにiがあり、これは画像を意味し、sはないため、URLはhttpから取得されます。

フォントキャッシュファイルの場合、URLは次のようになります-

例

https://pub-mypage-com.cdn.ampproject.org/r/s/examples/themes/lemon/fonts/Genericons.ttf

コンテンツタイプ r はフォントなどのリソースに使用され、 s は安全なURLに使用されます。

HTMLドキュメントの場合、URLは次のとおりです-

例

https://pub-mypage-com.cdn.ampproject.org/c/s/trends/mainl

urlにcがあり、HTMLドキュメント用であり、sがhttps://用です。

Google AMPキャッシュは、 Max-age などのhttpヘッダーを使用して、コンテンツキャッシュが古いか新しいかを判断し、次のユーザーがコンテンツを更新できるように新しい要求を自動的に送信してコンテンツを更新します。

Google AMP-カスタムJavascript

前の章では、多くのアンプコンポーネントを研究しました。 また、各コンポーネントが機能するにはjavascriptファイルを追加する必要があることも確認しました。

たとえば、amp-iframeの場合、追加されるスクリプトは次のとおりです- 

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

スクリプトタグに async を追加しました。 これは、すべてのjavascriptファイルを非同期にロードするampの標準です。 使用されるコンポーネントの名前を持つ custom-element 属性が追加されています。

コアamp javascriptファイルの一部でない場合にampコンポーネントを使用するには、上記のようにスクリプトを追加する必要があります。

私たちは、ページ内に多くのJavaScriptコードを記述し、スクリプトタグを使用したjavascriptファイルも含めることに主に慣れています。

ampでどのようにできますか？ そのため、AMPでは、スクリプトコードを記述したり、スクリプトタグを外部から読み込んだりすることはできません。

Ampには、ページに追加される追加のスクリプトによって実行されると想定されるジョブを処理するための独自のコンポーネントがあります。 これは基本的にパフォーマンス上の理由で行われます。ページコンテンツをより速くロードし、JavaScriptによるレンダリングの遅延やDOMの変更を行わないようにします。

これは、スクリプトタグのhttps://www.ampproject.org/docs/fundamentals/spec [公式サイト]に従ってAMPによって指定された仕様です-

タイプがapplication/ld + jsonでない限り、禁止されています。 （必要に応じて、その他の非実行可能値を追加できます。）例外は、AMPランタイムをロードする必須のスクリプトタグと、拡張コンポーネントをロードするスクリプトタグです。

ampページ内で application/ld + json を使用できる実用的な例を次に示します。 amp-analyticsコンポーネントにtype =” application/ld + json”を指定したscriptタグを使用してトラッカーを起動していることに注意してください。

同様に、必要に応じて他のampコンポーネントでtype =” application/ld + json”を指定したscriptタグを使用できます。

例

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>amp-analytics</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <script async custom-element = "amp-analytics"
         src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
      </script>
      <link rel = "canonical" href = "ampanalyticsl">
      <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>
   </head>
   <body>
      <h1>Google Amp - Analytics</h1>
      <amp-analytics>
         <script type = "application/json">
            {
            "requests": {
               "event": "http://localhost:8080/googleamp/tracking.php?
               user=test&account=localhost&event=${eventId}"
            },
            "triggers": {
               "trackPageview": {
                  "on": "visible",
                  "request": "event",
                  "vars": {
                     "eventId": "pageview"
                  }
               }
            }
         }
         </script>
      </amp-analytics>
   </body>
</html>

ブラウザでページがヒットすると、トラッカーはページビューのために起動されます。 以下に示すように、Googleネットワークのタブで確認できます。

Googleネットワークタブ

Google AMP-Cors

この章では、AMPのCORSを理解しようとします。 詳細を掘り下げる前に、CORSの基本とその有用性を理解しましょう。

CORSとは何ですか？

CORSはCross Origin Resource Sharingの略です。 CORSは、たとえば_xyz.com_ originで実行されているWebページによってURLに対して行われた要求に、要求されたURLのデータにアクセスする許可を与える必要があるかどうかをブラウザに伝えるために、追加のHTTPヘッダーデータが必要なプロセスです。 Webページから多くのhttpリクエストを行います。そのためには、必要なデータを取得するためにCORSを配置する必要があります。

ホストとは異なるサーバーにhttpリクエストを行う場合、クロスオリジンリクエストと呼びます。これは、ドメイン、プロトコル、ポートのいずれかがホストオリジンと異なることを意味します。 そのような場合、要求されたURLからデータにアクセスするための許可が必要です。 GET/PUT/POST/DELETEリクエストが行われたことを意味します。

この追加データは、行われたhttp要求呼び出しのブラウザーヘッダーで利用可能です。 この許可ステップは基本的にセキュリティ上の理由で必要であるため、必要な許可なしにWebページが別のドメインからデータを作成または取得することはできません。

ブラウザのヘッダーには、以下に示す値を持つことができる Access-Control-Allow-Origin などの詳細が必要です- 

Access-Control-Allow-Origin : *

要求URLヘッダーに値*を指定すると、ブラウザーに、任意のオリジンからのデータへのアクセスを許可してリソースにアクセスするよう指示します。 

Access-Control-Allow-Origin: https://www.example.com

上記の値を設定すると、ブラウザにWebページhttp://www.example.com/[www.example.com]からのリクエストがリクエストされたURLのデータの取得のみ許可されます。

CORSのサーバー構成は、共有されるデータの使用方法を念頭に置いて行う必要があります。 それに応じて、サーバー側で必要なヘッダーを設定する必要があります。

CORSが何であるかがわかったので、次のステップに進みましょう。 ampの場合、httpエンドポイントを使用してデータを動的にロードするamp-form、amp-listなどのコンポーネントがあります。

ampページの場合、http要求が同じ発信元から行われた場合でも、CORS設定を適切に行う必要があります。 ここで疑問が生じます。要求と応答が同じ発信元から来たとしても、なぜCORSを有効にする必要があるのでしょうか。 技術的には、同じドメイン、オリジンなどのデータをリクエストおよび表示しているため、そのような場合はCORSを有効にする必要はありません。

Ampには、ページをヒットしたユーザーにより速くデータを取得するために追加されるキャッシングと呼ばれる機能があります。 ユーザーが既にページにアクセスしている場合、データはgoogle cdnにキャッシュされ、次のユーザーはキャッシュからデータを取得します。

データは、現在は異なるドメインを持つアンプエンドに保存されます。 ユーザーが任意のボタンをクリックして最新のデータを取得すると、ampキャッシュURLがWebページドメインと比較され、新しいデータが取得されます。 ここで、CORSがampキャッシュされたURLとWebページドメインを処理するため有効になっていない場合、リクエストは無効になり、CORSの許可に対して失敗します。 これが、アンプページの場合に同じオリジンでもCORSを有効にする必要がある理由です。

CORSが有効になっているフォームを使用した作業の例を次に示します- 

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Form</title>
      <link rel = "canonical" href = "ampforml">
      <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-form"
         src = "https://cdn.ampproject.org/v0/amp-form-0.1.js">
      </script>
      <script async custom-template = "amp-mustache"
         src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
      </script>
      <style amp-custom>
         form.amp-form-submit-success [submit-success],
         form.amp-form-submit-error [submit-error]{
            margin-top: 16px;
         }
         form.amp-form-submit-success [submit-success] {
            color: white;
            background-color:gray;
         }
         form.amp-form-submit-error [submit-error] {
            color: red;
         }
         form.amp-form-submit-success.hide-inputs > input {
            display: none;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Form</h3>
      <form
         method = "post"
         class = "p2"
         action-xhr = "submitform.php"
         target = "_top">
            <p>AMP - Form Example</p>
            <div>
               <input
                  type = "text"
                  name = "name"
                  placeholder = "Enter Name" required>
               <br/>
               <br/>
               <input
                  type = "email"
                  name = "email"
                  placeholder = "Enter Email"
                  required>
               <br/>
               <br/>
            </div>
            <input type = "submit" value = "Submit">
            <div submit-success>
               <template type = "amp-mustache">
                  Form Submitted! Thanks {{name}}.
               </template>
            </div>
            <div submit-error>
               <template type = "amp-mustache">
                  Error! {{name}}, please try again.
               </template>
            </div>
      </form>
   </body>
</html>
*submitform.php*
<?php
   if(!empty($_POST)){
      $domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") .
         "://$_SERVER[HTTP_HOST]";
      header("Content-type: application/json");
      header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
      header("Access-Control-Expose-Headers:
         AMP-Access-Control-Allow-Source-Origin");
      $myJSON = json_encode($_POST);
      echo $myJSON;
   }
?>

出力

Submitform

submitform.phpに追加された応答ヘッダーの詳細-

応答送信フォーム

フォームが機能するには、値がAMP-Access-Control-Allow-Source-Originおよびamp-access-control-allow-source-originのaccess-control-expose-headersなどのヘッダーを追加する必要があります- http：//localhost：8080 。

ここではphpファイルを使用しており、apacheが使用されています。 PHPファイルでは、以下に示すように必要なヘッダーを追加しました- 

<?php
   if(!empty($_POST)){
      $domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") .
         "://$_SERVER[HTTP_HOST]";
      header("Content-type: application/json");
      header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
      header("Access-Control-Expose-Headers:
         AMP-Access-Control-Allow-Source-Origin");
      $myJSON = json_encode($_POST);
      echo $myJSON;
   }
?>

必要なヘッダーが追加されると、オリジン http：//localhost：8080 が対話してデータを取得できるようになります。

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