GoogleAMP-属性

この章では、amp-componentsで使用されるすべての一般的な属性について説明します。

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

  • fallback
  • heights
  • layout
  • media
  • noloading
  • on
  • placeholder
  • sizes
  • 幅と高さ

フォールバック属性

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

たとえば、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-metadata.html">
      <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-metadata.html">
      <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でサポートされているレイアウトのリストは次のとおりです-

  • 現在ではない
  • Container
  • fill
  • fixed
  • fixed-height
  • flex-item
  • intrinsic
  • nodisplay
  • Responsive

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

示されている例を使用して、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-metadata.html">
      <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-metadata.html">
      <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>タグでメディア属性を使用しました-

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

画面の幅が600px未満の場合、画像は表示されないことに注意してください。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-componentsのアクションで使用されます。属性で使用する構文は次のとおりです-

構文-

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

に渡された詳細 on 属性は次のとおりです-

  • eventName−これは、amp-componentで使用可能なイベントの名前を取ります。たとえば、フォームの場合、submit-success、submit-erroreventNamesを使用できます。

  • elementId−これは、イベントを呼び出す必要がある要素のIDを取ります。これは、成功またはエラーについて知りたいフォームのIDにすることができます。

  • methodName −これは、イベントの発生時に呼び出されるメソッドの名前を取ります。

  • arg=value −これは、メソッドに渡されたkey = value形式の引数を取ります。

次のように、複数のイベントをOn属性に渡すこともできます。

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

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

アクション属性

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

on = "tab:elementid.hide;"

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

on = "tab:elementid.open;tab:elementid.hide;”

Elementid アクションが実行される要素のIDです。

Ampには、グローバルに定義されたイベントとアクションがいくつかあり、これらは任意のampコンポーネントで使用できます。 tap events そして行動は hide, show そして togglevisibility。

Note − HTMLまたはアンプコンポーネントでtogglevisibilityを非表示/表示または使用する場合は、次を使用できます。 on=”tap:elementid.[hide/show/togglevisibility]”

プレースホルダー属性

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

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

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

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

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

サイズ属性

これは、heights属性と同じように使用されます。値は以下のような式です−

<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>
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved