(cache) WordpressをマジメにAMP（Accelerated Mobile Pages）対応させた話 #AMPlify

こんにちは、2016年中途入社のku-sukeです。現在はkidslyという保育園むけサービスのプロダクトオーナーを担当しています。今回は個人的にも注目しているAMP（Accelerated Mobile Pages）をこのテックブログに実装した話を書きたいと思います。特に、WordPressプラグインを入れるだけの簡易対応ではなく、フッターまわりやデザインの調整などをまじめに対応させたので、企業をはじめメディア運営をWordPressで運用されている方のお役に立てば幸いです。

事業サイドがAMPに乗っかるか考える事 – ku-sukeのブログ

AMPとは？

AMPとはAccelerated Mobile Pagesの略で、その名の通りモバイル端末向けの高速表示可能なHTMLページのことです。GoogleやTwitterをはじめインターネットサービス企業の多くが参加しオープンソースで開発が進められています。

AMPの技術的な特徴は以下の通りです。

作成したページはGoogleのCDNなどにキャッシュされ、他社ドメインから配信される
さらにデザイン上もGoogleの場合ヘッダーにドメイン名のバーが表示される
JavaScriptは原則使用できない
imgやiframeは専用タグに置き換えられ、遅延ロードされる
CSSはheadタグ内に直接コードを埋め込むのみで、サイズは 50KB が上限。外部ファイルの参照はできない

他にもいくつか特徴がありますが、リソースを制限しサーバからクライアントまでの配信速度を高速にすることと、JS/CSSを抑制し、レンダリングプロセスも高速化することに注力していることがうかがわれます。

AMP project（公式サイト）

AMPを利用するメリット・デメリット

ちょうど先日、GoogleのWebマスターブログでも発表がありましたが、AMPに対応することでGoogleなどの検索エンジンから即座にページ内容を表示することができ、ユーザー体験の向上や遅延による離脱を減らすことが期待できます。

現在のところAMPに対応したからといって検索順位が上がるわけではありませんが、AMPアイコンがついたりニュースとして別枠で表示される場合があるため、トラフィックを獲得できる可能性があります。

ただし、AMPはまだコメントフォームやGTMのようなタグマネージャなどいくつかの機能が仕様上提供できないため、それらのユーザー体験やマーケティング施策とトレードオフになることを意識しておきましょう。

WordPressをAMP化してみたい

単純にWordPressをAMP化するだけであれば、実は以下のプラグインをインストールするだけで簡単に対応できてしまいます。

AMP – WordPress Plugins

しかしながら、それだけではシンプルなアイキャッチのないヘッダと本文のみ、デザインもWordPress標準のブルーベースのものになりますので、検索結果から読みに来ていただいた方をお迎えするには少し力不足です。

例えば、読み終わった記事をシェアしてもらいたいのにシェアボタンが無い、他の記事も見てほしいのに回遊リンクが無いといった点はメディア運営上致命的ともいえるでしょう。

そこで、保守性を考えながらも出来るだけ標準に近いユーザー体験が提供できるようカスタマイズを行いました。カスタマイズした結果上記の画面はこのようになりました。比較的もとのデザインに近いユーザー体験を提供できていると思います。

必要な要素の洗い出し

AMPを導入するにあたり、以下のような点を調査しました。

記事の本文
- 画像はそのまま表示できるのか
- SlideShareやSpeaker Deckのような埋め込みコンテンツは利用できるのか
- コードスニペットは表示崩れせず、シンタックスハイライトも利用できるのか
- コメントプラグインのDisqusは利用できるのか
- SNS シェアボタンは動作するか
フッター
- 関連記事や最新記事などの回遊リンクを表示できるのか
- カテゴリ一覧リンクを表示できるのか
- その他フッターの固定リンクは表示できるのか

まずはAMPプラグインを入れて主要なページを閲覧してみました。画像やSlideShareなどのiframe要素は、プラグインによって<amp-xxx>タグに変換されており、問題なく閲覧することができましたが、コードスニペットが問題でした。コードスニペットはこの行のようなインラインのものと、Syntax Highliterを利用した複数行のものがあります。インラインのものはCSSなので問題ないとして、複数行のものはJSを使用しているためそのままでは再現できませんでした。

次に、フッターについてですが、WordPressにおける関連記事や最新記事の実装はプラグインを利用したりテーマのウィジェットを利用したりと様々な実装方法がありますが、このブログはテーマ内の関数で実現していました。
そのためテーマ関数にも改造を施すことが必要そうです。それ以外の要素は、テーマファイルを改造するかAMPプラグインに用意されているフックを利用すれば実現できそうです。

また、検索フォームはAMPが入力フォームに対応していないため見送り、Disqusも執筆時点でまだissueが進行中でしたので見送りました。

実装する（子テンプレート方式）

調査が完了し、当テックブログの管理者と相談の上、次の実装方針で進めることにしました。

本文・デザイン面
- デザイン要素はできるだけ近づけるが、現状SCSSからのビルドで100KB超えているので、書き出し済みCSSから必要な要素に絞り抜粋し50kb以下に抑える
- Schema.orgのロゴサイズや、先行するサイトが600pxの最大幅で提供されているので合わせておき、media-queryは原則使用しない
- コードのシンタックスハイライトはあきらめ、フォントのみ合わせる
- footnotesプラグインで実装している著者プロフィールもAMP用に移植する
回遊メニュー・ソーシャル
- 最新記事と関連記事の実装方法の違いより、最新記事のみを提供
- SNSシェアボタンは、CDNでキャッシュされることを考慮しカウント表示を使用しないシンプルなものを実装
- 固定フッターはそのまま実装

AMPプラグインをカスタマイズする方法はいくつかありますが、今回は子テンプレート方式にしました。wp-content/plugins/ampのなかからテンプレートフォルダを現在のテーマディレクトリ内にコピーします。今回のカスタマイズでは最終的に以下のような構成になりました。

┌ amp-site-logo.png
├ footer.php
├ functions.php
├ meta-author.php
├ meta-taxonomy.php
├ meta-time.php
├ recent-posts.php
├ single.php
└ style.php

AMPは現状でトップページなどの一覧ページではなく、個別記事テンプレートであるsingle.phpの改造のみになります。そのため最新記事やフッターなどの部品化しやすい部分を切り出したり、親テーマのfunctionで<img>タグを使っている箇所を<amp-img>に変更するなど、AMP専用の関数を用意して置き換えていく移植方式になります。

SCSS→CSSの移植に関してはあまり良い方法が見つからなかったのですが、基本的には不要なセレクタ・定義をそぎ落として50KBを目指しました。たとえば現在のテーマはnormalizeやbootstrapを使用していますが、これらはグリッドも含めて最小限のみの移植としました。移植後に、PHPの出力バッファを利用して空白を除去することで、実質35KBくらいに抑えることができました。

<?php
ob_start();
$THEME_DIR = get_template_directory_uri();
?>
/* Generic WP styling */
amp-img.alignright {
（中略・・・約1000行）
}
<?php
$compress = ob_get_clean();
$compress = preg_replace('/\s+/', ' ', $compress);
$compress = preg_replace('/\/\*[^\/]+\*\//', '', $compress);
echo $compress;