AMP化ライブラリを使って既存サイトのAMP対応を行う方法

今回は既存サイトのAMP化を自動変換ライブラリを使って試してみたことについて紹介します。

AMPとは何か、AMP対応のためにどのような変更が必要かについては以下の記事などを参考にしてください。

https://tech.marketenterprise.co.jp/2017/07/13/農機具業界初?ページをamp化した際のポイント/

AMPはgoogleが導入を進めているモバイル端末でのページの表示高速化プロジェクトです。


※注意

– 自分は普段サーバーサイドを担当しており、AMP対応の具体的なルールはよくわかっていません

– 本番運用はしていないため、動作検証は不十分です


検討

AMP対応のためにはhtmlコードを専用の書式に合わせる必要があります。

既存のhtmlソースをAMP対応したいので、以下の1, 2の方法を考えました。

1. ソースを修正(手作業 or スクリプトで変換)する

→ 元から非AMPソースとAMPソースに分かれる

2. htmlのレスポンスを仲介するものを作り、htmlをAMP変換の仕組みを通して変換してから返す

→ 元は共通で非AMPソースとAMPソースを動的に生成する

さらに手作業でない場合は以下a, bという選択肢があります。

a. 変換スクリプトは自作する

b. 既存のAMP変換ライブラリ、サービスを利用する

1と2のそれぞれのデメリットとしては、

1: 非AMP、AMPの管理の手間が増える

2: 間にかませるものが増えるのでレスポンス速度が悪化する

あたりかを考えましたが、2についてはGoogleがキャッシュするためにAMPソースにアクセスしにくるときだけなので、実害はありません。

また、aとbを比較すると、

・AMP化のルールはGoogleが管理している

・それなりに広く使われる(使われている)

ため、自前実装するよりもライブラリや外部サービスを使った方が効率的だと思います。

したがって2 & bの方法で既存サイトのソースをAMP化する方法を試しました。


使用したライブラリ

https://github.com/Lullabot/amp-library

使い方として

– コマンドライン

– PHPモジュール

の2種類が用意されています。


構成

– 複数サイトのAMP変換処理を一元化すること、既存サイトとは別環境に切り離すことを目的とし、専用のEC2インスタンスを用意しました

– ライブラリの動作にはPHP5.5以上が必要です

– WEBサーバーとしてnginxを使用しました

リバースプロキシ (もともとあったもの)

– AMP条件にマッチしたらAMP変換サーバーに振り分けるようにWEBサーバーのルーティングを設定しておく

例. URLが “.amp.html” の場合にAMP変換サーバーに振り分け

AMP変換サーバー (今回追加したもの)

アプリケーションサーバー (もともとあったもの)


処理の流れ

– リバースプロキシサーバーに以下のようなリクエストが来る

https://example.com/nanika/1.amp.html

– リバースプロキシサーバーからAMP変換サーバーにリクエストが渡される

https://example.com/nanika/1.amp.html

– AMP変換サーバーのPHPスクリプト(xxx.php)に処理を振り分ける

– xxx.php

– xxx.php の中で

https://example.com/nanika/1.html にアクセスしてhtmlを取得

– 取得したhtmlソース中のリンクを全て絶対パス (https://~~~~ に置換する)

→ AMP変換ライブラリの内部処理として、画像を読みに行って width, height を取得しているため

– AMP変換ライブラリにhtmlを渡して変換後のhtmlを得る

– 変換後htmlをレスポンスとして返す


確認方法とまとめ

https://example.com/nanika/1.amp.html#development=1

にアクセスしてコンソールに “AMP validation successful.” と表示されればOK

既存ソースがたくさんありAMP対応をしたい場合、このような方法もあるかと思います。