AMP HTMLの記述例

技術情報
本ページは広告およびアフィリエイトプログラムによる収益を得ています。

前回はAMP HTMLの概要をご紹介いたしました。今回は具体的な記述例をサンプルを交えてご紹介いたします。

モバイルの表示が爆速になるAMP(Accelerated Mobile Pages)
去年Googleが提唱したAMP(Accelerated Mobile Pages) が、最近また活発になってきたようです。 というわけで、今回はAMPをご紹介いたします。 AMP(Accelerated Mobile Pages)とは A

AMP HTML

amp-twitter

amp-twitterタグでツイッターを表示するには、ツイートIDを記述します。

<amp-twitter width=375 height=472
    layout="responsive"
    data-tweetid="696680413364772865">
</amp-twitter>

head内に「amp-twitter」ライブラリを読み込みます。

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

全ソース

<!doctype html>
<html ⚡>
<head>
    <meta charset="utf-8">
    <title>Twitter</title>
    <link rel="canonical" href="twitter.html" >
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></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>
    <amp-twitter width=375 height=472
        layout="responsive"
        data-tweetid="696680413364772865">
    </amp-twitter>
</body>
</html>

サンプル

ツイートIDを確認する

埋め込みたいツイッターのページで「リンクをコピー」を選択します。

ツイッター リンクをコピー

ウィンドウが表示されるので、URLの数字をコピーし、タグの「data-tweetid=””」の「””」に張り付けます。

amp-facebook

amp-facebookタグでフェイスブックを表示するには、投稿ページのURLを記述します。

<amp-facebook width="486" height="657"
    layout="responsive"
    data-href="https://www.facebook.com/weblog.bohemian/posts/478617232340485">
</amp-facebook>

head内に「amp-facebook」ライブラリを読み込みます。

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

全ソース

<!doctype html>
<html ⚡>
<head>
    <meta charset="utf-8">
    <title>Facebook</title>
    <link rel="canonical" href="facebook.html" >
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></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>
    <amp-facebook width="486" height="657"
        layout="responsive"
        data-href="https://www.facebook.com/weblog.bohemian/posts/478617232340485">
    </amp-facebook>
</body>
</html>

サンプル

フェイスブックの投稿ページのURLを確認する

埋め込みたいページにある「外部へ埋め込む」を選択します。

フェイスブック 外部へ埋め込むを選択

赤枠で囲っているエリア内に、httpsから始まるURLが記述されているので、そちらをコピーし、タグの「data-href=””」の「””」に貼り付けます。

フェイスブック ソース選択

amp-youtube

amp-youtubeタグでユーチューブを表示するには、ビデオIDを記述します。

<amp-youtube width=480 height=270
    layout="responsive"
    data-videoid="LPWrWTYgYiU">
</amp-youtube>

head内に「amp-youtube」ライブラリを読み込みます。

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

全ソース

<!doctype html>
<html ⚡>
<head>
    <meta charset="utf-8">
    <title>YouTube</title>
    <link rel="canonical" href="youtube.html" >
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></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>
    <amp-youtube width=480 height=270
        layout="responsive"
        data-videoid="LPWrWTYgYiU">
    </amp-youtube>
</body>
</html>

サンプル

YouTubeのIDを確認する

埋め込みたいページの「共用」にあるIDを「data-videoid=””」の「””」に記述します。

ユーチューブ 共用にあるIDを選択

検証する

AMP HTMLのバリデーションを行いたい場合は、検証したいページのURLの末尾に「#development=1」を記述します。

例:http://www.pc-weblog.com/sample/amp/twitter.html#development=1

Chromeブラウザで確認した場合、下記のように「AMP validation successful.」という表示がされていれば、バリデーションはOKとなります。

AMP HTML Validation

まとめ

  • amp-twitterタグでツイッターを表示するには、ツイートIDを記述する。
  • amp-facebookタグでフェイスブックを表示するには、投稿ページのURLを記述する。
  • amp-youtubeタグでユーチューブを表示するには、ビデオIDを記述する。
  • AMP HTMLのバリデーションを行いたい場合は、検証したいページのURLの末尾に「#development=1」を記述する。

AMP HTMLの記述はそれほど難しくはないので、どんどんタグを試してAMP HTMLに慣れ親しんでいきましょう。

スポンサーリンク
技術情報
スポンサーリンク
シェアする
ボヘミアンをフォローする
この記事が気に入ったら
フォローしよう
最新情報をお届けします。
スポンサーリンク

コメント