Google-amp-introduction

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

Google AMP-はじめに

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

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

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

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

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

モバイルページの高速化

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

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

Amp Address Bar

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

サンプルアンプページ

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

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "./regular-html-versionl">
      <meta name = "viewport" content = "width = device-width,
         minimum-scale = 1,initial-scale = 1">
      <style amp-custom>
         h1 {color: red}
      </style>
      <script type = application/json>{
         "vars": {
            "uid": "23870",
            "domain": "dummyurl.com",
            "sections": "us",
            "authors": "Hello World"
         }
      }
      </script>
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>

      <script async src = "https://cdn.ampproject.org/v0.js"></script>
   </head>
   <body>
      <h1>Amp Sample Page</h1>
      <p>
         <amp-img src = "imgurl.jpg" width = "300" height = "300"
            layout = "responsive"></amp-img>
      </p>
      <amp-ad width = "300" height = "250" type = "doubleclick"
         data-slot = "/4119129/no-ad">
         <div fallback>
            <p style = "color:green;font-size:25px;">No ads to Serve!</p>
         </div>
      </amp-ad>
   </body>
</html>

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

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

必須タグ

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

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

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

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

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

アンプ広告

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

amp-iframe

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

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

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

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

HTMLタグ

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

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

Sr.No HTML Tag & Description
1

img

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

2

video

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

3

audio

amp-audioに置き換え

4

iframe

amp-iframeに置き換え

5

object

禁止されている

6

embed

禁止されている

7

form

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

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

Input elements 

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

<fieldset>

許可された

10

<label>

許可された

11

P, div, header,footer,section

許可された

12

button

許可された

13

a

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

14

svg

禁止されている

15

meta

許可された

16

Link

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

17

style

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

18

base

禁止されている

19

noscript

許可された

コメント

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

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

HTMLイベント

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

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

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

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

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

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

クラス

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

Ids

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

リンク集

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

例 

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

スタイルシート

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

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

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

@-ルール

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

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

カスタムフォント

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

例 

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

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

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

例 

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

AMPランタイム

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

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

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

例 

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

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

AMPコンポーネント

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

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

  • ビルトイン
  • 外部

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

共通の属性

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

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

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

Google Mobile Emulator

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

Google Mobile Emulator

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

開発者ツール

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

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

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

デスクトップモード

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

デバイスのリスト

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

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