Google-amp-attributes

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

Google AMP-属性

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

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

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

フォールバック属性

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

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

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

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

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

例

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

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

      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;-moz-animation:none;
               -ms-animation:none;animation:none
            }
         </style>
      </noscript>

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

出力

フォールバック属性

高さ属性

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

例

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

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

      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;-moz-animation:none;
               -ms-animation:none;animation:none
            }
         </style>
      </noscript>

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

出力

高さ属性

レイアウト属性

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

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

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

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

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

例

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

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

      <noscript>
         <style amp-boilerplate>
            body {
               -webkit-animation:none;-moz-animation:none;
               -ms-animation:none;animation:none
            }
         </style>
      </noscript>

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

出力

レイアウト属性

メディア属性

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

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

例

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

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

      <noscript>
         <style amp-boilerplate>
            body {
               -webkit-animation:none;-moz-animation:none;
               -ms-animation:none;animation:none
            }
         </style>
      </noscript>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         h1{font-family: "Segoe
         UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Media Attribute</h1>
      <div class = "displayitem">
         <amp-img
            media = "(min-width: 600px)"
            src = "images/christmas1.jpg"
            width = "466"
            height = "355"
            layout = "responsive">
         </amp-img>
      </div>
   </body>
</html>

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

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

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

スマートフォンでの出力

メディア属性

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

IPADでの出力

IPADで出力

ローディング属性

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

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

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

属性について

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

構文- 

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

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

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

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

アクション属性

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

on = "tab:elementid.hide;"

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

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

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

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

プレースホルダー属性

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

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

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

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

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

サイズ属性

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

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

幅と高さの属性

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

例

<amp-img src = "amp.png"
   width = "400" height = "300"
   layout = "responsive">
</amp-img>
「https://www.finddevguides.com/index.php?title=Google-amp-attributes&oldid=6538」から取得
Powered by MediaWiki