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を選ぶ理由
どのユーザーも、Webサイトがコンテンツを非常に高速にロードすることを期待しています。 ただし、画像、ビデオ、アニメーション、ソーシャルウィジェットがページにほとんどあふれている場合は、ページが非常に重くなり、読み込み時間が長くなります。 そのようなシナリオは、長期的にウェブサイトへのユーザーの損失を引き起こす可能性があります。
Google AMPは、この問題を解決するように設計されています。 AMPには、画像、iframe、javascript、広告、ビデオ、アニメーション、css、読み込まれたフォントなどを処理する特別な方法があります。 AMPページのコンテンツはGoogle側でキャッシュされるため、ユーザーが検索結果をクリックするたびに、キャッシュからコンテンツが提供されます。 キャッシュバージョンもタイムリーに更新されるため、ユーザーは常に最新の更新ページを取得できます。
AMPを選択する理由
このセクションでは、サイトでAMPを選択する必要がある理由を説明します-
Google検索を優先
今日、Googleで何かを検索すると、ページの上部にGoogleカルーセルが表示され、その後に検索への応答としてページのリストが表示されます。 表示されるニュースカルーセルはすべて有効なAMPサイトです。 これは、Googleがampページを優先し、ニュースカルーセルのランキングに従ってそれらを表示することを意味します。
キーワード「 latest indian news 」を使用してGoogleで行われた検索の例を次に示します-
上の画像に示すように、AMPページである上位のすべてのページがGoogleカルーセルの先頭に表示されます。
ユーザーがGoogle検索で何かを検索すると、Google AMPページは次のように表示されます。 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”への参照を示しています。
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.cmsURLはパブリッシャーから直接送信されるものではありませんが、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ページのフォームを操作するスクリプトを追加する必要があります。
|
| 8 |
Input elements |
| 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ページ内で使用できる以下の起源からホワイトリストに登録されています。
- Fonts.com-https://fast.fonts.net
- Google Fonts-https://fonts.googleapis.com
- Font Awesome-https://maxcdn.bootstrapcdn.com
- Typekit-https://use.typekit.net/kitId.css（kitIdを適宜置き換えてください）
注-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ブラウザを開き、右クリックして、以下に示すように開発者コンソールを開きます-
上記の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_タグにプロパティlayout =” responsive”を追加して、画像をレスポンシブにすることもできます。
例
より良い理解のために次のコードを観察します-
<amp-img alt = "Beautiful Flower" src = "images/flower.jpg"
width = "246"
height = "205"
layout = "responsive">
</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-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に追加された応答ヘッダーの詳細を以下に示します-
フォームを機能させるには、値 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>出力
iframeを上から600px以上に配置したことに注目してください。 以下に示すようにエラーが発生します-
上記の例では、以下の値を持つサンドボックスを使用しました-
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コンテンツが以下に示す出力に表示されるように表示されます-
出力
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で利用可能な属性は、ここの表にリストされています-
| 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>次のコードに示すように、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>出力
デフォルトでは、ロケールは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で表示がレンダリングされます-
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には、 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>出力
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>出力
例
私たちは、実際の例を使用して、オフセットカウントのアンプカウントダウン属性を理解しましょう-
<!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-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>出力
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-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-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>出力
上記のコードの出力は以下のとおりです-
開始日と終了日を取得する方法は既に説明しました。 ここでもう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>出力
ユーザーが入力フィールドをクリックすると、以下に示すように、日付ボックスがライトボックス内で開かれます-
これを実行するには、以下に示すように、入力フィールドにイベントが追加されます-
<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つのドットをクリックすると、次の画面が表示されます-
ストーリーを再度ロードするリプレイボタンが表示されます。 あなたは車のブランドの物語を表示する車の画像をクリックすることができます。
モバイルモードでの出力は次のとおりです-
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-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”への参照を示しています。
リンクを使用するフォント
以下に示すように、リンクを使用してフォントを外部から読み込むことができます-
<link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Roboto">ホワイトリストに登録されたオリジンのみが許可されることに注意してください。 フォントを取得できるホワイトリストに登録されているオリジンのリストは、次のとおりです-
- Fonts.com-https://fast.fonts.net
- Google Fonts-https://fonts.googleapis.com
- Font Awesome-https://maxcdn.bootstrapcdn.com
- Typekit-https://use.typekit.net/kitId.css（kitIdを適宜置き換えてください）
_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の例はここに示されています-
例
<!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>出力
上記のサンプルコードの出力は以下のとおりです-
上記の例は、 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>出力
上記の作業例の出力は以下のとおりです-
上記の作業例で使用されている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>出力
上記の作業例の出力は、次のとおりです-
クリックすると、以下に示すように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>出力
上記の作業例のコードの出力は以下のとおりです-
ユーザーがボタンをクリックすると、通知は閉じられます。 一度削除すると、ページをリロードしても通知は表示されません。
ユーザー通知のデータはブラウザーの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での出力
ローディング属性
<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は、以下に示すように、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要素は要素がページ上で取る幅と高さを指定する必要があります。 レイアウト=「レスポンシブ」を追加すると、要素がページでレスポンシブになり、アスペクト比が維持されます。
レイアウト属性の詳細については、* 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でページを表示し、動的クラスを使用しているときに設定されます。
アンペアページをクリックすると、アドレスバーに表示される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例
<!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 :)</p>
</div>
<div>
<p class = "if-not-viewer">Hey! You are not coming from amp viewer</p>
<p class = "if-viewer">Hey! From amp viewer.</p>
<div>
</body>
</html>出力
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>出力
上記の例では、次のように入力フィールドでイベントを使用していることに注意してください-
<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 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>出力
次のコードは、イベントの開閉がライトボックスでどのように実装されるかを示しています-
<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>出力
イベントは次のように使用されます-
<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>出力
アニメーショントリガー
トリガー=「可視性」の場合、アニメーションはデフォルトで適用されます。 イベントでアニメーションを開始するには、以下の例に示すように、トリガー=「可視性」を削除し、イベントを追加してアニメーションを開始する必要があります-
例
<!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-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> |
このバインド動作を使用してスライドを変更します |
| 2 | <amp-date-picker> |
[min] min→選択可能な最も早い日付を設定します
max→選択可能な最新の日付を設定します |
| 3 | <amp-iframe> |
[src] iframeのソースを変更 |
| 4 | <amp-img> |
[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>出力
ボタンをクリックして、車の変化の画像と下のテキストを表示します。
ビデオと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>出力
ボタンをクリックして、ビデオとiframe srcの変化を確認します。
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>出力
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>出力
テキストボックス内に入力されたデータは、下部に表示されます。 これは、入力イベントの状態変数 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>出力
コンテナの例
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>出力
塗りつぶしの例
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>出力
固定および固定高度の例
固定および固定高さの使用法を理解する前に、次の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>出力
ディスプレイなしで反応する
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>出力
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>出力
アンプアコーディオンには内部にセクションがあります。 各セクションには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>出力
アコーディオンのアニメーション
*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 |
ここで、ライトボックスを開くためのアニメーションのスタイルを指定できます。デフォルトでは フェードイン |
| 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>出力
画面上の任意の場所をクリックして、ライトボックスを閉じます。
ライトボックスに閉じるボタンを追加できます。これは主に、オーバーレイタイプの広告が表示されるときに使用されます。 次の例を観察してください-
例
<!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-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>出力
*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には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>出力
ボタンをタップして画像を変更できます。
<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-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-adで利用可能な重要な属性のいくつかを見てみましょう-
| Sr.No | Attributes & Description |
|---|---|
| 1 |
type 広告ネットワークの名前 |
| 2 |
width 広告の幅 |
| 3 |
height 広告の高さ |
| 4 |
placeholder 子要素として使用され、広告の読み込み中にユーザーに表示されるプレースホルダ。この属性は広告ネットワーク側でサポートする必要があることに注意してください。 |
| 5 |
data-* 広告ネットワークに渡されるデータ属性。 たとえば、ダブルクリック広告ネットワークのニーズ
各広告ネットワークによって指定されたデータパラメータがあります。 data-override-widthとdata-override-heightを使用して、使用される幅と高さをオーバーライドすることもできます。 |
| 6 |
フォールバックは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>
<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-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-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>出力
ブラウザのネットワークタブにURLが表示されます。 ここでは、amp-pixelの動作を示すためだけにダミーピクセルを使用しました。 ライブ環境では、発射されたピクセルに対してデータが追跡されるのを見るはずです。 ライブWebページでピクセルが呼び出されるたびに、ピクセル全体のデータがサーバー側でカウントされます。 後で、ビジネスの観点からデータを分析できます。
スティッキー広告
スティッキー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-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>出力
出版社のページのアンプスティッキー広告の例
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-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-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コンポーネントでは、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ミリ秒間連続して表示されると、トラッカーを起動します。 これらの条件がすべて満たされると、トラッカーだけが解雇されます。 詳細を以下に示します-
要素の可視性に関する条件や、要素などのその他の条件を少なくとも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>出力
リンクをクリックすると、イベントは以下のように発生します-
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>出力
例：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>出力
例：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* で利用可能な属性は次のとおりです。- 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のような
ボタンプラグインのような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 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>出力
属性 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>出力
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>出力
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>出力
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>出力
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には、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>出力
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>出力
幅、高さ、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>コントロールはデフォルトでオーディオタグに追加され、オーディオの再生/一時停止、ミュート/ミュート解除に使用できることに注意してください。 以下に示すように、オーディオタグのダウンロードオプションを取得します-
ダウンロードをクリックすると、使用するメディアファイルをダウンロードできます。 ダウンロードを無効にするには、次の例に示すように、属性- 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>出力
*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>出力
属性 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*では、ステップバイステップで上記の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ページを実行し、ブラウザーコンソールを開きます。 以下に示すように、コンソールメッセージが表示されます-
あなたの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 *-リストに表示される次のエラーは次のとおりです-
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>に置き換えました。 ここで、ブラウザでページを実行して、出力とエラーを確認します-
エラー
現在、エラーが少なくなっていることを確認してください。
- ステップ7 *-コンソールに表示される次のエラーは次のとおりです-
headセクションにlink rel = canonicalタグを追加する必要があります。 これは必須タグであり、常に次のように頭に追加する必要があることに注意してください-
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadatal">ステップ8 *-コンソールに noscriptタグがない場合に表示される次のエラー*
次のように、ヘッドセクションに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ページに追加します。
完了したら、ブラウザでページをテストして、出力とコンソールを確認します-
コンソールの詳細はここに示されています-
したがって、最終的にすべてのエラーが解決され、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検証が成功しました。
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 Validatorを使用する
Ampには、HTMLコンテンツを入力できる検証ツールがあり、ステータスをPASSまたはERRORとして表示し、ページにエラーも表示します。 リンクは-https://validator.ampproject.org/です
アンプ検証ツールの表示は以下のとおりです-
ページコンテンツのエラーの例を以下に示します-
コマンドラインを使用する
次のコマンドを使用してnpmパッケージをインストールできます-
npm install -g amphtml-validatoramptest/フォルダーを作成し、そのフォルダーに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/mainlurlに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 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.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 が対話してデータを取得できるようになります。
