Google-amp-date-countdown

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

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

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

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

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

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

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

アンプ口ひげ用

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

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

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

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

amp-date-countdownの属性

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

Sr.No Attribute & Description
1

end-date

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

2

timestamp-ms

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

3

timestamp-seconds

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

4

timeleft-ms

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

5

offset-seconds (optional)

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

6

when-ended (optional)

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

7

locale (optional)

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

フォーマット

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

Sr.No Format & Description
1

d

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

2

dd

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

3

h

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

4

hh

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

5

m

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

6

mm

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

7

s

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

8

ss

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

9

days

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

10

hours

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

11

minutes

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

12

seconds

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

例

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

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

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

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

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

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

出力

Amp Fit-Text

例

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

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

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

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

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

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

出力

Amp Countdowns

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

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

Sr.No Name & Locale
1

en

英語

2

es

スペイン語

3

fr

フランス語

4

de

ドイツ人

5

id

インドネシア人

6

it

イタリアの

7

ja

日本人

8

ko

韓国語

9

nl

オランダの

10

pt

ポルトガル語

11

ru

ロシア

12

th

Thai

13

tr

トルコ語

14

vi

ベトナム人

15

zh-cn

中国語（簡体字

16

zh-tw

中国の伝統的な

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

例

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

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

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

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

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

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

出力

Amp Countdown locale

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