concrete5 Ver.5.6系向けのAMP Add-onを作ってみた。

Share on Facebook
LINEで送る
Pocket

最近、AMP ( Accelerated Mobile Pages ) 対応ページって増えてきましたよね。
ますますPCからモバイルへとインターネット端末になっていくなか、軽快に閲覧できるこの機能はとても良いなぁと思っています。

WordPressはいち早く対応プラグインが公開されていましたが、concrete5用のAMP対応アドオンはVer.7系や8系のはhissyが作ったのが既にあるんですが、5.6系のは無かったので、作ってみました。

結構まだまだVer.5.6系使っている人多いんですよね。

AMP ( Accelerated Mobile Pages )とは?

そもそも、AMPってなんでしょう?

AMPとは、Accelerated Mobile Pagesの略で、Googleが提唱しているHTMLの仕様です。
インターネットへの接続端末のメインがスマホなどの携帯端末に変わってきたことにより、不安定な回線速度やPCに比べ非力なCPU等でも快適にWebサイトを閲覧できる様にするものです。

具体的な仕組みとしては、通常各ホームページのサーバでホストされているWebサイトの情報を、Googleが代わりに保存(キャッシュ)しておいてそれをユーザに見せます。
ここで、Googleが保存しやすく、かつモバイル端末でも快適に見れる様に専用のHTMLの仕様がAMP HTMLです。

その他にも、Googleのサイト高速表示のノウハウが詰まったAMP JSというJavascriptのライブラリも使います。

AMP HTMLとHTML5

AMP用のHTML、 AMP HTMLと通常のHTML5とはどこが違うのでしょう?
利用できるタグに制限があったりと色々違うのですが、大きいところだと外部のリソースを参照する系のタグ(imgタグやiframeタグ)が使えなかったり、style属性が使えなかったりとかでしょうか?

詳しくはこことかここに書いてありますので興味があったら参照してください。僕はちょっと見ただけで自力での変換を諦めましたw

AMPってSEOに効くの?

今のところSEO的には直接的に表示順位に影響があるかというと微妙なところです。複合的、間接的に影響があるといったところでしょうか?
ただ、Googleはモバイル向けに高速なWebブラウジングを提供することがユーザの大きな価値になると考えており、やっておいた方がSEO的にプラスな事にかわりは無いと思います。

また、schema.orgタグを使った構造化マークアップをする事により、検索結果のカルーセルに表示されたりと、通常の検索結果よりも目立つ事になるので、そういった事からトラフィックは増えそうです。

concrete5をカスタマイズ?いいえadd-onです。

さあ、ではconcrete5のページをAMP対応してみましょう。テーマやコアファイルをカスタマイズすると、バージョンアップの時に面倒なので、イベントを使ったAdd-on(Package)として作ります。

concrete5のEvent(フック)機能を使おう

concrete5にはEvent(イベント)という特定のタイミングで処理を挟む機能があります。プログラミングの世界では「フック」や「トリガー」とも言われる仕組みです。

cnocrete5はデータベースの中にあるページやブロックの情報を、CMSが組み立てて最終的に出力するHTMLを作ります。HTMLの各部品ごとにブロックという単位で処理が行われるので、そのタイミングでAMP HTMLへの変換を行うと細かい事が色々できるのですが、その分処理が複雑になったり遅くなったりするので、今回は最終的な出力前のHTMLをとっ捕まえて丸っと変換します。

この、「最終的な出力直前のHTML」を取得し、処理を挟めるのが、
on_page_output というイベントです。
パッケージコントローラにon_start()というメソッドを作り、この中でこのEventに処理を割り当てます。

    public function on_start()
    {
        //URLのチェック
        $req = Request::get();
        if($req->isAmp()){//URLの末尾に/ampがある場合
            Events::extend('on_page_output', 'AmpHelper', 'convert', DIRNAME_PACKAGES . '/' . $this->pkgHandle . '/helpers/amp.php',null,99);
        }
    }

Eventに処理を割り当てる場合は、Event::extend()を使います。
引数はそれぞれ

  • フックさせるEvent
  • 実行するクラス名
  • 実行するメソッド名
  • クラスファイルの場所
  • 該当メソッドに引き渡す引数
  • 優先順位

です。

今回はAmpHelperというHelperクラスを作り、そこのconvert()関数に実際の変換処理を書いていますので、on_page_outputのイベントにバインドさせています。
引数の最後の99は処理の優先順位です。同じイベントに複数の処理がバインドされていた場合に、処理の順番を指定するものです。

AMP HTMLへの変換がとにかく面倒

次に実際のHTMLの変換処理です。
通常のHTML5のWebページをAMP HTMLに変換するのはとても大変です。使えないタグの判断と置き換え処理が結構な数あるからです。あと、head内の記述も通常のHTMLとは違っており、色々大変。

なので、誰かもう作ってんじゃないかとPHPの変換ライブラリを探してみました。

PHPのAMPライブラリ

AMP PHP Library
https://github.com/Lullabot/amp-library

やっぱり作ってるモンですね〜
Githubで検索してみたらいくつかありました、PHPのAMP HTMLへの変換ライブラリがありました。しかもDrupalのAMPプラグインで利用されていて実績もあるし、PSR、autoloadも対応してる。これはそのまんま7系や8系でも使えそうですね。面倒なタグの置き換えも関数一個で丸っとやってくれます。

しかもLicenseはApacheライセンスでターミナルでも使える。いや〜、楽チン楽チン。

AMP PHP Libraryの使い方

ライブラリをクローン/ダウンロードしてきたら、とりあえず関連ライブラリをインストールします。

comporser install

venderディレクトリができ、autoload.phpができます。これをパッケージのLivraries/3dparty配下に置き、実際の変換処理を書いてある先ほどのAmpHelperで以下の様なコードを書きます。

<?php defined('C5_EXECUTE') or die("Access Denied."); 

require_once(__DIR__."/../libraries/3dparty/amp-library/vendor/autoload.php");
use Lullabot\AMP\AMP;

class AmpHelper
{       
    public function convert($html)
    {
        $amp = new AMP();
        $amp->loadHtml($html, array('scope' => 'html'));
        return $amp->convertToAmpHtml();
    }
}

正成されたAMPページのバリデーションチェック

作成したパッケージをインストールし、AMPページの表示の確認ができたら、正常にAMP HTMLとして出力されているか確認しましょう。

簡単な確認方法はGoogleのSearch Consoleを使う方法です。既にアカウントを持っている場合は以下のURLにアクセスしてAMPページのURLを入力して確認してみましょう。
https://search.google.com/search-console/amp

もう一つはchromeのdeveloper toolを使う方法です。
デベロッパーツールを開いた状態で、consoleタブを開き、AMPページのURLの末尾に「#development=1」を足したURLを開きます。

AMP chrome developer tool validation

するとコンソールにAMPのでバックメッセージが表示され、構文エラーがなければ

AMP validation successful.

と表示されます。

ここで要注意なのが、正しいAMP HTML形式のHTMLを出力するだけではダメだという事です。Googleに正しくAMPとしてキャッシュさせるには、構造化データのマークアップも必要になります。

実際にはもう一手間必要?

こんな感じで比較的簡単にAMP対応ができました。実際にはライブラリがPHP5.5以上を必要とするのに対し、サーバのPHPが5.4でバージョンアップできなかったので、ライブラリ側を5.4に対応させたりしました。

AMP HTMLへ変換前のHTMLがシンプルで正しいマークアップをされているものであればこのままでも十分使えると思います。
しかし、構造化マークアップ(検索結果でカルーセルでカードが表示されます)やStyle属性で書かれたCSSの置き換え、テーマのCSSファイルの切り替えやインライン化など、実際に本番サイトで利用するためにはもう少し手間がかかります。
この辺りは実際に利用しているテーマやサイトの構成によって細かいとこが変わってくるので、ご自分のサイトに合わせて調整してみてください。

Share on Facebook
LINEで送る
Pocket