AMP HTML まとめ

技術情報

Accelerated Mobile Pages Project

AMPはGoogleが行っている、モバイル端末でのウェブページの表示を高速化するというプロジェクトです。

AMP HTML

  • 対応するとgoogleがモバイルの表示を速くしてくれる。
  • javascriptは使えない。
  • リッチコンテンツを表現したい場合は各種代替要素を利用する。
  • CSSは「<head>」内にインラインで記述する。
  • PCとモバイルのソースがディレクトリで分かれている場合は、普通にコーディングするだけ。
  • PCとモバイルがワンソースの場合は、システムでタグなどの記述を切り替える必要がある。
  • ソースをいじれない、プラグインがないレンタルブログのAMP HTML化は無理。
  • 完全な自動化は今のところ難しい。

記述方法

htmlに「⚡」か「amp」を記述する。

<html ⚡>

meta要素を指定する必要がある。

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

link要素のcanonical属性で指定する。

<link rel="canonical" href="hello-world.html" >

AMPを高速化させる「boilerplate」を記述する。

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

Twitterなど、AMP用のタグで表示する場合は専用のライブラリを読み込む。

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

AMPを動作させるためにライブラリを読み込む。

<script async src="https://cdn.ampproject.org/v0.js"></script>

「img」は「amp-img」といったようにAMP用のタグがある。

<p><amp-img src="hoge.png" width="100" height="200" /></p>

基本的な書き方

<!doctype html>
<html ⚡>
<head>
    <meta charset="utf-8">
    <link rel="canonical" href="hello-world.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 src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html

AMP HTML source code, samples, and documentation.

モバイルの表示が爆速になるAMP(Accelerated Mobile Pages)
去年Googleが提唱したAMP(Accelerated Mobile Pages) が、最近また活発になってきたようです。 というわけで、今回はAMPをご紹介いたします。 AMP(Accelerated Mobile Page
AMP HTMLの記述例
前回はAMP HTMLの概要をご紹介いたしました。今回は具体的な記述例をサンプルを交えてご紹介いたします。 AMP HTML amp-twitter amp-twitterタグでツイッターを表示するには、ツイートIDを

AMP HTML Built-in Components

代替が推奨されているタグは下記のようになる。

コンポーネント概要
amp-ad広告表示の代替。
amp-imgimgタグの代替。
amp-pixelアクセス解析などのログの代替。
amp-videovideoタグの代替。
amp-embedembedタグの代替。

HTML Tags

使用が禁止されているタグ、または代替する必要があるタグは下記のようになる。

タグ概要
base使用禁止。
imgamp-imgで代替。
videoamp-videoで代替。
audioamp-audioで代替。
iframeamp-iframeで代替。
frame使用禁止。
frameset使用禁止。
object使用禁止。
param使用禁止。
applet使用禁止。
embed使用禁止。
form使用禁止。将来的に対応予定あり。
input使用禁止

AMP HTML Extended Components

AMP専用のタグは下記のようになる。

コンポーネント概要
amp-animアニメーションGIFを表示。
amp-audioオーディオプレーヤーを表示。
amp-brightcove「ブライトコーブ」の「Video Cloud」か「perform」の動画プレーヤーを表示。
amp-carouselカルーセルを表示。
amp-fit-text内容にフィットするフォントを表示。
amp-fontカスタムフォントを読み込んで表示。
amp-iframeインラインフレームを表示。
amp-image-lightbox画像をライトボックス表示。
amp-instagramInstagramを表示。
amp-install-serviceworkerServiceWorkerをインストール。
amp-lightboxライトボックスを表示。
amp-list動的にリストアイテムを作成し、表示。
amp-twitterTwitterを表示。
amp-vine動画ファイルを表示。
amp-youtubeYouTubeを表示。

プラグイン

WordPressには「AMP」というプラグインがあるが、現時点では変換が完全ではない。

WordPress amp-plugin

AMP — WordPress Plugins

表示確認

Chromeブラウザでは、PCでもAMP HTMLの表示確認ができる「⚡️ Desktop AMP」という拡張機能がある。

desk-top-amp

⚡️ Desktop AMP – Chrome ウェブストア

バリデーション

URLの末尾に「#development=1」を記述

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

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

Chromeブラウザのコンソール表示で、下記のように「AMP validation successful.」という表示がされていれば、バリデーションはOK。

AMP HTML Validation

「The AMP Validator」サイトで検証する

AMPページのバリデーションをWeb上で行える「The AMP Validator」を使ってみた

「The AMP Validator」
テキストエリアにソースを張り付ける

Chrome拡張機能の「AMP Validator」で検証する

Chrome拡張機能の「AMP Validator」を使ってみた
以前にAMPページのバリデーションをWeb上で行える「The AMP Validator」をご紹介いたしました。 AMPページのバリデーションをWeb上で行える「The AMP Validator」を使ってみた 「The AMP Val
「The AMP Validator」サイトとAMPプロジェクトのリファレンスページで確認
アイコンから検証できる

AMP HTMLを研究してるWebサイト

q-Az

AMP 用 schema.org をワードプレスで設定する方法 | q-Az

WordPressでのAMP用schema.orgなどの設定を行われてます。まるでロボットのように理路整然と記事を書かれています。

シンカー

AMPの対応方法まとめ (作成途中)

章立ててAMP HTMLをきれいにまとめています。ラーメン好きの管理人さんが運営されています。

Creator Clip

【WordPress】プラグイン無しでAMP(Accelerated Mobile Pages)に対応にする手順 | Creator Clip

かなり複雑なサイトですが、AMP HTML化に成功されています。ガジェット系のレビューをされているので、遊びに行ってみてはいかがでしょうか。

AMP HTMLってなに?サイトをAMP HTML化したい!自動化ってできないの?といった方は上記のWebサイトには訪れた方がいいでしょう。

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

コメント