Accelerated Mobile Pagesの構築
前回の記事WEBとDBの分離、そして静的ファイルを配信するプロキシキャッシュサーバ導入をご紹介しました。
最終回となる今回はAccelerated Mobile Pagesというモバイル専用の新たな高速化ページの構築方法をご説明します。
個人ブログ(特にニュースサイト以外)では今のところあまり必要ないと考えられるので、やってみたいと思っている方以外は無理に構築する必要はありません。
(本文前に)簡単な3行まとめ
- AMPはモバイルページ高速化を目指す最新の計画。
- AMPの速度は凄まじく、わずか1秒未満で表示が完了。
- ただし、導入は非常に面倒で構築に時間がかかる。
記事目次
- AMPとは
AMPに関しての簡単な説明。
- AMPページを構築する
AMPページの構築方法。
- AMPページの動作確認
AMPページの動作確認方法。
- 高速化への道は長い
簡単なコメント。
- シリーズ目次
これまでに公開された関連記事。
AMPとは
昔と比べて回線は比べ物にならないほど高速化しましたが、それに慣れた現在のインターネットユーザーはウェブサイトに更なる高速化を求めています。
ただ、多くのウェブサイトは広告をはじめとする様々なスクリプトを利用しており、ユーザビリティが低下する事態にもなっています。
この時に登場するのがAMPで、特殊なページを構築することでより高速な動作を実現することが出来ます。
AMPはAccelerated Mobile Pagesの略であり、その名の通りモバイルページを加速させるという意味を持っています。
また、AMPはGoogleをはじめとするテクノロジー企業が開発を行っているオープンソースの最新プロジェクトです。
Googleの公式ブログによると2016年2月末までに朝日新聞、映画.com、zakzak、THE PAGE、産経ニュース、SankeiBiz、SANSPO.COM、シネマトゥディ、日刊スポーツ、BLOGOS、毎日新聞、マイナビニュース、レスポンス （五十音順）がAMPを導入しているとのこと(現在は更に多くのサイトが対応済み)。
AMPの動作は驚く程の早さ(ページ表示が一秒未満)となっており、https://googleblog.blogspot.jp/2015/10/introducing-accelerated-mobile-pages.htmlではその動作サンプルが動画で公開されています。
また、AMPで構築されたページはGoogleの検索でAMP枠として通常検索とは別に公開されます。
とても役に立ちそうなAMPですが、導入にはかなりシビアな設定が必要です。
しかし、導入すれば高速に記事を表示してくれるというメリットがあるため(Googleが代わりに記事を提供するのでサーバーの負担も無し)、やってみる価値は十分にあります。
なお、今回は全て自力でAMPの環境を作っていきますが、面倒な人向けにWordPressのプラグインが公開されています。
AMPの必須要素
AMPは様々な必須要素が含まれており、一つでも欠けると正常に動作してくれないというシビアなものです。
例として『CSSはインラインのみ(更に50kbまで)!importantも使用禁止』『JSはAMP専用以外使用禁止』『linkタグ・インラインstyleは使用禁止』『formタグ使用禁止』などです。
というような様々な制約がありますが、詳しくは公式のガイドページに掲載されていますので必ず読んでおきましょう。
他にもGithubの公式ドキュメントにもサンプルや説明が掲載されています。
なお、AMPページはリッチスニペットも必須となっているため、事前に対策しておく必要があります。
以下のページは非常に参考となるため、一度読んでおくことをおすすめします。
Googleリッチスニペット対策！初心者向けSchema.org解説！ – SYNCER
https://syncer.jp/schema-entering
また、当サイト以外にAMPページの作成に役立つ記事も以下に掲載しておきます。
AMPをワードプレスにプラグイン無しで設定する方法 – q-Az
https://q-az.net/amp-wordpress-without-plugin/【WordPress】プラグイン無しでAMP（Accelerated Mobile Pages）に対応にする手順 – Creator Clip
http://creatorclip.info/2016/02/wordpress-accelerated-mobile-pages/
AMPページを構築する
では実際にAMPページを構築します。
最初はAMPと通常ページの分岐を行わせ、AMP対応の場合には専用のheaderページを読み込ませます。
header.php
<!DOCTYPE html>
<!?php
//AMPチェック
$myAmp = false;
$string = $post->post_content;
// ampのパラメーターが1かつ記事ページの中に<script>タグが入っていない
// かつsingleページのみ$myAmpをtrueにする
if($_GET['amp'] === '1' && strpos($string,'<script>') === false && is_single()){
$myAmp = true;
}
// 上記の固定ページ版
if($_GET['amp'] === '1' && strpos($string,'<script>') === false && is_page()){
$myAmp = true;
}
?>
<!?php if($myAmp): // AMP対応ページの場合 ?>
<!?php get_template_part( 'amp-header' ); ?>
<!?php else: // 対応していない場合 ?>
ここに通常ページの記述
<?php endif; // AMP分岐終了 ?>
amp-header.php
amp-header.php内です。
以下の記述でcustomと付いていないものは必須です。
amp-header.php
<html amp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title><?php wp_title(''); ?></title>
<?php $canonical_url = get_permalink(); ?>
<link rel="canonical" href="<?php echo $canonical_url; ?>">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-vine" src="https://cdn.ampproject.org/v0/amp-vine-0.1.js"></script>
<script custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js" async></script>
<script custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js" async></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>
<style amp-custom>
ここにCSSの内容
</style>
//
以下通常の内容(img等タグは編集必須)
//
single.php
次に通常のsingle.phpを編集します。
AMPに対応していた場合にamp-single.phpとamp-footer.phpを読み込ませます。
amp-footer.phpは単にimgタグ等を修正するくらいなので例は除外します。
single.php
<?php
//AMPチェック
$myAmp = false;
$string = $post->post_content;
// ampのパラメーターが1かつ記事の中に<script>タグが入っていない
// かつsingleページのみ$myAmpをtrueにする
if($_GET['amp'] === '1' && strpos($string,'<script>') === false && is_single()){
$myAmp = true;
}
?>
<?php get_header(); ?>
<?php if($myAmp): // AMP対応ページの場合 ?>
<?php get_template_part( 'amp-single' ); ?>
<?php get_template_part( 'amp-footer' ); ?>
<?php else: // 対応していない場合 ?>
//
通常の内容
//
<?php endif; // AMP分岐終了 ?>
amp-single.php
amp-single.php内の記事が開始する直前( the_content() )には自動埋め込み禁止の内容を記述しておきます。
WordPressでは自動埋め込み機能があるため、youtubeなどのURLを貼り付けるだけでAMP非対応の内容が勝手に構築されるためです。
amp-single.php
<?php
// 自動埋め込み無効
remove_filter( 'the_content', array( $GLOBALS['wp_embed'], 'autoembed' ), 8 );
?>
<?php the_content(); ?>
functions.php
最後に置換作業を行うのですが、https://gist.github.com/unfulvio/5889564というページにあるHTML圧縮コードを流用し、functions.php内に記述しています。
functions.phpは真っ白エラーが出やすいため、FTP等でファイルの修正が出来るようにしておいた方が良いです。
コードはprotected function removeWhiteSpaceの途中から記述しています。
functions.php
// コードの途中から
protected function removeWhiteSpace($str)
{
$str = str_replace("\t", '', $str);
$str = str_replace("\n", '', $str);
$str = str_replace("\r", '', $str);
// youtubeのframeborderを削除
$str = str_replace("frameborder=\"0\"", '', $str);
// amp用タグ入れ替え
if($_GET['amp'] === '1' && strpos($string,'<script>') === false && is_single()){
// imgをamp-imgに入れ替える
$str = str_replace("<img", '<amp-img layout="responsive"', $str);
// youtubeをamp-youtubeに入れ替える
$pattern = '/https:\/\/www.youtube.com\/watch\?v\=(.*)/i';
$append = '<amp-youtube layout="responsive" data-videoid="$1" width="480" height="270"></amp-youtube>';
$str = preg_replace($pattern, $append, $str);
// twitterをamp-twitterに入れ替える
$pattern = '/https:\/\/twitter.com\/.*\/status\/(.*).*/i';
$append = '<amp-twitter width=480 height=270 layout="responsive" data-tweetid="$1"></amp-twitter>';
$str = preg_replace($pattern, $append, $str);
// 画像一覧をstatic.example.comに変更(プロキシキャッシュサーバーを構築している場合)
//$str = str_replace("example.com/wp-content/uploads", 'static.example.com/wp-content/uploads', $str);
}
// amp用タグ入れ替え page用
if($_GET['amp'] === '1' && strpos($string,'<script>') === false && is_page()){
// imgをamp-imgに入れ替える
$str = str_replace("<img", '<amp-img layout="responsive"', $str);
// youtubeをamp-youtubeに入れ替える
$pattern = '/https:\/\/www.youtube.com\/watch\?v\=(.*)/i';
$append = '<amp-youtube layout="responsive" data-videoid="$1" width="480" height="270"></amp-youtube>';
$str = preg_replace($pattern, $append, $str);
// twitterをamp-twitterに入れ替える
$pattern2 = '/https:\/\/twitter.com\/.*\/status\/(.*).*/i';
$append2 = '<amp-twitter width=480 height=270 layout="responsive" data-tweetid="$1"></amp-twitter>';
$content2 = preg_replace($pattern2, $append2, $content2);
// 画像一覧をstatic.example.comに変更(プロキシキャッシュサーバーを構築している場合)
//$str = str_replace("example.com/wp-content/uploads", 'static.example.com/wp-content/uploads', $str);
}
// 以下コードの続き
AMPページの動作確認
AMPページの動作確認を行うにはGoogle Chromeが必要です。
Google Chromeで通常のAMPページ(例では?amp=1)にdevelopment=1を付ける(http://example.com/page-title/?amp=1#development=1)と開発者ツールのconsoleにてエラーのチェックを行う事が可能となります。
こちらも以下の記事に分かりやすい詳細が記述されています。
AMPでエラーチェックをする方法 – SYNCER
https://syncer.jp/amp/validation-errors
これでエラーが出なかった場合は晴れてAMP化の成功となります。
なお、GoogleのSearch Consoleでは記事のAMP登録の可否について調べる事が出来ますので、利用している方は是非活用しましょう。
高速化への道は長い
今回でシリーズ最終回ですが、これまでに紹介してきた方法以外にも多くの方法がまだまだ存在しています。
そしてこれからのテクノロジーの進歩によって、確実に高速化技術は更に上を行く事になるでしょう。
新しい技術を覚え、試すのは億劫になる方もいるかもしれませんが、これまでの内容を超えるテクニックやテクノロジーの到来は凄く刺激的で自分自身にも大きなメリットをもたらします。
これからも常にアンテナを張り巡らせて良い情報は手に入れていきたいものですね。
シリーズ目次
記事内でのサンプルは『さくらVPS4G・Ubuntu14.04・Nginx・PHP7・MariaDB・Wordpress・+α』となっています。
- 【はじめに】高速で強力なWordPressサイトを構築する１
簡単な説明のみ。次回から設定方法。
- 【インストール】高速で強力なWordPressサイトを構築する２
『OS』『WEB』『DB』『WordPress』のインストール、『PHPMyAdmin』『FTP(SFTP)』の導入まで。
- 【サーバ高速化】高速で強力なWordPressサイトを構築する３
『NginxとMariaDBのチューニング』『OPcache』『APCu』の導入。
- 【WP設定】高速で強力なWordPressサイトを構築する４
導入推奨の『プラグイン』、『functions.php』などの設定。
- 【画像圧縮】高速で強力なWordPressサイトを構築する５
『ImageMagick(Imagick)』『mozjpeg』『OptiPNG』『pngquant』の導入。
- 【SSL導入】高速で強力なWordPressサイトを構築する６
『SSL(HTTPS・TLS)』の導入。サンプルは『LetsEncrypt』
- 【更に高速化】高速で強力なWordPressサイトを構築する７
『WEBとDBの分離』『静的プロキシキャッシュサーバ』の構築。
- 【AMP導入】高速で強力なWordPressサイトを構築する８
今回の記事。『Accelerated Mobile Pages(AMP)』の導入。
記事の執筆時、参考となった情報はここのtxtで公開しています。