メディアサイトをAMP対応させるまでの作業フロー

私は過去の業務で、オウンドメディアを3つほどAMP対応にするための開発に関わっていたのですが、複数サイトのAMP対応を行う中で、私の中で型となる作業フローが出来上がってきたので、それを皆さんにも共有したいと思います。

なお、今回はあくまでAMP対応の作業フローを整理したものであり、実際のコードを書いて、こうすればできます！といった類の記事ではないので、それを期待している方は他の記事を読むことをオススメします。（そのうち記事化するかも）

はじめに

今回、開発に関わったサイトの要件としては、主に下記となります。

• 企業のオウンドメディアサイト
• すでに完成したサイトが存在しており、それをAMPに対応させる
• WordpressなどのCMSなどは使用せず、HTMLでページを作って更新する運用方法
• rabbitのAMPジェネレーターなどの外部ツールの使用ができない
• 本番環境のサーバー設定の変更は基本的に不可。フロントエンド側しか触ることができない

Wordpress等のCMS等であれば、プラグインを入れれば一瞬で対応できますし、サーバー側を触れるなら動的言語側の処理で解決できると思いますが、今回の要件ではそれが難しかったため「HTMLページのファイルを読み込んだら、AMPページ化したHTMLを吐き出す」変換ジェネレーターを開発して、社内で運用しています。

なので、今回のサイトAMP対応化のゴールは「AMP変換ジェネレーターによる、AMPファイルの自動生成」として定義したいと思います。

1. AMP用のテンプレートを作成し、変換すべき箇所を洗い出す

まずは既存ページをAMP対応するにあたり、対象ページのうち1ファイルを複製し、あるべき姿となるAMP対応後のページを作成します。

AMP対応の詳細は他のサイトなどでも説明があるため省略しますが、主に下記の内容となります。

• AMP専用タグへの置き換え（imgタグ→amp-imgタグへの変換など）
• head内のAMP用記述の追加（boilerplateとか）
• JSON-LDの記述を追加
• CSSやJavascriptの外部読み込みを削除、CSSをHTML内にstyle amp-customタグで記述

これらの作業ではChromeアドオンのAMP Validatorを使用して、エラーが0になる（正常なAMPとして認識される）ようにHTMLを改修します。エラーメッセージは英語ですが、そこはGoogle翻訳を使いながら、がんばりましょう。

AMP Validator - Chrome Web Store

これを繰り返して、エラーが0になれば問題ないのですが、対応を進めていくと、ほぼ必ず「CSSの容量制限エラー」が残ります。その場合は、この後の2.の対応に進みます。

2. Chromeの開発ツールを使用して、AMPページのCSSを整理する

AMPページにはCSSの容量制限（50KBまで）が存在するのですが、既存ページのCSSをそのまま移行しようとすると、ほぼ確実に50KBをオーバーすることが多いです。そのため、制限オーバーになったら不要なCSSの精査・削除を行う必要が生じます。

PCとSPでCSSファイル自体を分離させている場合などは、あまり苦労しないのですが、メディアクエリを使用し、SPだけでCSSを一部変更している場合や、SP単体のCSSファイル自体が50KBをオーバーするような場合、Chromeの開発ツールを使用して、不要なCSSファイルを削除していきます。

CSSの精査の進め方は下の記事がわかりやすいです。

CSS/Javascriptの不要な部分をさくっと洗い出す - Qiita

ページ内で未使用のCSSは赤色で表示されるので、それらを削除していきます。注意点として、AMP化するページが複数ある場合、他の対象ページで使用されているCSSを削除すると表示が崩れてしまうので、必要なCSSも削除しないよう、他ページでも精査しながら進めましょう。

CSSを最小限し、かつCSSのコメント削除などの圧縮もかければ、50KB制限は回避できると思いますが、それでもまだ引っかかる場合はページ内の不要な装飾などを削除しながら、CSSを削っていきます。

容量制限を回避したことで、AMPテンプレートのエラーが0件になったら、次に進みます。

3. AMP変換ジェネレーターの開発

AMP用テンプレートを作ってしまえば、あとはテンプレートと同様に、他のページも改修するだけ！…なのですが、例えば既存ページが100ページ以上ある場合、1つずつ手作業でAMPに対応させていくのは正気の沙汰ではないので、既存ページをAMPページに変換させるジェネレータを開発します。

このジェネレーターでは、1.で手作業で改修したHTMLを自動処理するプログラムを開発します。私は個人的趣味でPythonを使い「社内開発サーバー上でHTMLの読み込み→タグの置換・AMP用記述の追加→新規ファイルを生成し、置換したテキストを流し込む」処理を行なっています。

この処理自体はプログラムじゃなくても、エクセルのマクロ等でも似たような処理はできると思います。（そうしたプログラムを作れる人がいない場合は、手作業で置換していく必要が生じますが、運用時の負荷が高すぎるため、そもそもAMP対応自体を見直すべきです）

その他、私が実案件で対応したジェネレーターでは下記の処理も実行しています。

• PCだけで表示しているタグ要素を削除
• javascriptで表示制御されている情報を、jsonなどの管理ファイルから抜き出してHTMLの中に入れる

ジェネレーター開発後は、AMPページの表示検証やAnalyticsの設定などの検証などを行っていきます。AMPページのタグ記述が正しいかを確認するなら、先ほどのAMP Validatorと、JSON-LDのチェック用に「構造化データ テストツール」を使用しましょう。

構造化データ テストツール

これらのツールでエラーが出なければ、AMPページの制作は完了です。ただ、公開前にもう一工程、作業が必要になります。

4. 既存ページにAMPページと紐づけるタグを追加する

AMPページを作り終えたあとは通常ページにも、AMPページがあることを示すタグを入れる必要があります。これはAMP公式の説明がわかりやすいので省略。

ページが検出されるようにする – AMP

5. AMPページを本番環境に公開

4.までの対応が完了したら、AMPページを本番環境に公開します。公開後は「AMP テスト」ページで表示に問題ないか確認します。

https://search.google.com/test/amp

問題なさそうなら、Googleの検索エンジンにAMPページがクロールされるのを待ちます。早ければ数時間、遅くても翌日くらいには反映されているはずです。これで一通りAMPページの作成〜公開までの一連の工程が完了となります。

まとめ

AMP対応は難易度的はさほど高くないものの、独自のローカルルールが多いため、面倒な事が多いです。とはいえ、2018年現在は日本語ドキュメントも増えてだいぶ環境は整備されてきた感があるので、興味がある方は、とりあえずチャレンジしてみましょう。