Google-amp-timeago

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

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>

出力

Timeagoのサンプルコード

デフォルトでは、ロケールは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>

出力

ロケールの例

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