MD-Blog_Web System

AMP（Accelerated Mobile Pages）対応で爆速モバイルサイト！　基本仕様とWordPressでの適用方法

2017.02.10 Fri.

Posted by mio.satoh

お久しぶりです、MDのWordPress担当大臣ことmioです。

今日日、いただく仕事のほとんどはモバイル対応前提。SPメインでPC版は情報が見られればいいというサイトも増えてきました。
こんな時流に合わせてGoogleのエンジンもモバイルサイトの重要度がどんどん増しているところですが、今の話題はやはりこれでしょう。

AMP（Accelerated Mobile Pages）

ご存知の方が多いでしょうが、最近よく見かけるこのカミナリアイコンの正体がAMPです。

AMP（Accelerated Mobile Pages）

これに対応したページをモバイルで開くと、脅威の爆速で表示されます。

Googleが正式対応してから着々と対応サイトが増えており、うちも導入するべき？　するならどうすればいいの？　というサイトオーナーやウェブ制作者も多いでしょう。
MDとしてもこれから必ず対応が必要となってくるといったところで、AMPについて勉強してみましょう。

AMPの基本

そもそもなぜAMP対応ページは早いのか？

それは、AMP対応ページの内容がすべてGoogleのサーバにキャッシュされ、Googleによりホスティングされるようになるからです。

AMPの仕様に沿って作られたページはそもそもデータ量が小さく、Googleさんがガンガン吸い取ってくれるのです。

そのために必要なことは、AMP仕様に準拠したページを作るだけです。

Googleがキャッシュを取りに来てくれたら、あとは上のスクリーンショットのようにAMP対応ページとして検索結果に表示されます。

いいことずくめに思われるAMPですが、じゃあなんでもAMP対応すればいいかといえば、そういうわけではありません。
キャッシュ化されたデータをDLさせることによって表示速度を上げているので、反面、更新の多いページには不向きです。

Googleが公式に謳っていますが、
AMPは、あらゆるタイプの静的なウェブコンテンツ（ニュース、レシピ、映画情報、製品ページ、レビュー、動画、ブログなど）で大きな効果を発揮します。一方、動的で双方向性を重視した単一ページのサービス（地図の経路案内、メール、ソーシャルネットワークなど）にはあまり効果的ではありません。

ということなので、基本的にはブログ記事などの静的コンテンツ中心のページをAMP対応させていくことになります。

AMPの仕様

まずはAMP Projectの公式ドキュメントを見てみます。

https://www.ampproject.org/docs/reference/spec

書かれているとおり、AMPにはHTML記述の細かな制限があります。

例えば、img/video/audio/iframeといったメディア埋め込み系タグは使えません。画像を貼りたいときはimgの代わりに専用のamp-imgというタグを使います。

また、フォーム系のタグが禁止されています。

もう一つ大きな所でいうと、独自のJavaScriptが使えません（仕様で決められた特定の処理だけは記載可能）。

例えば、多くのSP版サイトでは上部に開閉可能なハンバーガーメニューが搭載されていますが、JSで書かれたその開閉機能は使用できないのです。
AMP対応ページではフッターにまとめて静的にグローバルメニューを表示するなど、UI面での工夫が必要です。

こういった制約を守ったページを作成し、通常ページとAMP対応ページとで相互にmetaタグを指定すれば、AMP対応完了です。

通常ページ側

<link rel="amphtml" href="/blog/web_system/20160922_001473_amp.php">

AMP対応ページ側

<link rel="canonical" href="/blog/web_system/20160922_001473.php">

AMP Projectの公式ドキュメントに載っているサンプルコードは以下の通り。

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <title>Sample document</title>
    <link rel="canonical" href="./regular-html-version.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-custom>
      h1 {color: red}
    </style>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "Article headline",
      "image": [
        "thumbnail1.jpg"
      ],
      "datePublished": "2015-02-05T08:00:00+08:00"
    }
    </script>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-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>
    <h1>Sample document</h1>
    <p>
      Some text
      <amp-img src=sample.jpg width=300 height=300></amp-img>
    </p>
    <amp-ad width=300 height=250
        type="a9"
        data-aax_size="300x250"
        data-aax_pubname="test123"
        data-aax_src="302">
    </amp-ad>
  </body>
</html>

というわけで、通常のHTML5とはかなり異なるルールの下でコーディングしなければならないのです。
AMP対応のためには、ヘッダーやメニュー等の共通部分の作りを変えるだけでなく、コンテンツの中身も書き換える必要があるわけです。

WordPressにおける対応方法

さて、実際にWordPressで作成されたブログをAMP対応する場合、いかがいたしましょう。

プラグインでサクッと対応する

WordPressで作られたブログを自動的にAMP対応するプラグインがすでにいくつか公開されています。

https://ja.wordpress.org/plugins/search.php?q=amp

これらのプラグインの多くは出力されるタグを勝手にAMP仕様に書き換えてくれるので、お手軽にAMP対応可能です。

ただし強制的にタグが置き換えられたる・消されるので、おそらく出来上がったAMP対応ページはデザインが崩れたり必要な情報が抜けてしまったりしているはずです。

配布されているシンプルなテーマファイルをそのまま導入している場合などはそれほど気にならないかもしれませんが、ゴリゴリにカスタマイズしたオリジナルテーマの場合はちゃんと調整してあげたいところ。

自分でカスタマイズして対応する

テンプレートファイルをカスタマイズして独自に対応すれば、細かいデザイン調整や機能要求にも対応できますよ。

ざっくりした手順

記事テンプレート（single.php）内に通常表示とAMP表示の分岐を作る(全体をまとめて分岐してしまうのがおすすめ
AMP表示の分岐内に、前述のAMP仕様に準拠するように書き直したHTMLを記述する
the_content()で出力される内容をAMPに対応するため、PHPで文字列の置換処理を追加する
デバッガで確認して、問題なければGO

ポイントは1と3です。

通常表示とAMP表示の分岐

WordPressは1ページに1URLが基本なので、AMP対応ページを出力されるためにはクエリを使います。

例えば
https://www.monster-dive.com/blog/20170206/
というURLの記事であれば、
https://www.monster-dive.com/blog/20170206/?amp=1
といった形でAMP表示用のクエリをつけることで表示を分岐することができます。

テンプレート内のif文はこんな感じになりましょう。

if(isset($_GET['amp']) && $_GET['amp'] === '1') {
    // AMP表示
} else {
    // 通常表示
}

記事本文の文字列を置換する

対応すべきタグが多くてなかなか骨が折れます。
例えばimgタグの画像をamp-imgタグに書き換える場合の例でいうと、

$content = get_the_content();
$pattern = '/<img(.*?)\/>/i';
$replace = '<amp-img$1 layout="responsive"></amp-img>';
$content = preg_replace($pattern, $replace, $content);

と、地道に正規表現で対応するのが確実です。

また、ページ内のJSをすべて無効にするために、PHPのstrip_tagsで禁止タグをまるごと剥いでしまえば確実に余計なタグを消し去ることができます。

$content = strip_tags($content, '<div><p><a>...'); // 残したいタグを引数に指定する

こんな感じで色々なノウハウが必要で面倒ですが、とても丁寧に個別の処理を解説されている記事があったので、紹介させていただきます。

https://creatorclip.info/2016/02/wordpress-accelerated-mobile-pages/

AMP対応が出来ているかを確認する

最後にデバッグ方法を。
Chromeのデベロッパーツールを使えばクライアントサイドで簡単に確認できます。
手順は以下の通り。

対応させたページのURLの末尾に#development=1を付ける
デベロッパーツールを開き、コンソールに"Powered by AMP ⚡"という表示が出ていれば成功！

簡単！

まとめ

AMPの仕様自体はシンプルで難しいところはないですが、出来上がったサイトを後からAMP対応するのは、正直ちょっと大変です。

これから新しく立ち上げるサイトやブログは予めAMP対応させるか詳細のAMP対応を意識して構築することをオススメします。

既存サイトをAMP対応させる場合は、プラグインで出来る範囲、出来ない範囲を確認して最適な方法を検討するところから始めましょう。

なお、このMD-BlogはMovable Typeで構築されているので、mioは専門外になります！

Recent Entries

MD EVENT REPORT

What's Hot?

株式会社MONSTER DIVE

タグリスト

カテゴリアーカイブ