• テクノロジー

Hugoで作ってるこのブログのAMP対応をした

巷で話題のAMP対応をしました。 僕のブログはこの規模なので、別ページとして作るのではなく純粋にページ自体を作り変えました。

Accelerated Mobile Pages

Accelerated Mobile Pages Project

For many, reading on the mobile web is a slow, clunky and frustrating experience - but it doesn’t have to be that way. The Accelerated Mobile Pages (AMP) Project is an open source initiative that embodies the vision that publishers can create mobile optimized content once and have it load instantly everywhere.

モバイル用に爆速な感じのページを作ろうぜってやつですね。 そのためにHTMLをゴリゴリ書き換えなければいけない。

いろいろなサイトを見てると、AMP対応のために別ページを用意してrelを張るパターンがほとんどだった。

Make Your Page Discoverable

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

実際対応してみた感想としては、この対応が一番理想的だと思う。

始め方

ドキュメントはかなり整理されているので、特に詰まることなく実装は出来ると思う。

このページにある通り、必須の項目をheadタグ内に入れたりするだけで始められる。

Create Your AMP HTML Page

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </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:[email protected] -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>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

<html>ampもしくは「⚡」を入れることでAMP対応を明示する。 せっかくなので、このブログは絵文字で対応した。

IMGタグの置き換え

基本的にAMPは機能拡張ではなく制限なので、既存のHTMLの置き換えや削除で対応出来る。 まず最初に説明されているのは画像の表示について。

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

AMP用のタグが用意されているので、それに置き換える必要がある。 layoutなどの属性も用意されているので、少しだけ融通は効く。widthheightは必須のよう。

Include Iframes and Media#include-an-image

スタイルの定義

スタイルシートは<head>内にベタで置くことになっている。

<style amp-custom>
  /* any custom style goes here */
  body {
    background-color: white;
  }
  amp-img {
    background-color: gray;
    border: 1px solid black;
  }
</style>

この<style amp-custom>タグは1ページに1個までとの制約があったり、:not()など、禁止されている機能もある。

How to Style Your Pages#disallowed-styles

外部スタイルシートは原則フォント読み込みのみ可、とのこと。Google Fontsとかは使える。

BootstrapやSkeletonなどのCSSフレームワークはどうしたらいいんだろうと思ったけど、 そもそもAMPの目的を考えると、CSSフレームワークが必要なほどのデザインを施すこと自体が間違っているのかもしれない。

もしくは、何らかのタスクランナーでUnifyしてHTMLにベタで吐き出す仕組みを作るとか。

僕は今回の対応で3rdパーティ系のライブラリはすべて撤去した。(.containerとグリッドシステムくらいしか使っていなかったので、そもそも不要だった。)

JavaScriptの排除

原則禁止。 Google Analytics等、ポピュラーなものについては専用の記述が用意されている。

Adding Analytics to your AMP pages  |  Analytics for AMP Pages  |  Google Developers

このブログではコードハイライトのためにhighlight.jsを使っていたけど、それもこの対応で外した。

バリデーション

当該ページのURL末尾に#development=1をつけてChromeでアクセスすれば、Chrome DevTools consoleにバリデーション結果が表示されるようになっている。

Validate AMP Pages

個々のエラーメッセージに応じた対応方法なども記載されていて、やはりドキュメントは充実していると思う。

終わりに

JS禁止などを見てもわかるように、やはりAMPはAMP用のページを別で作るのが理想的だと思う。

Google Search Console等でもAMP対応の状況が表示されるようになっているので、おそらくAMPはこのまま普及していくと思ってる。

仕様も今後変わっていくと思うので、その辺も追う元気があれば対応していきたいと思う。