Crypto Times – AMP導入

担当：デバッグメンテナンス調査

課題とゴール

AMPを導入してみたが、挙動は安定せず、バリデーションではエラーが吐き出され検索結果にも反映されないということでご依頼をいただきました。

AMPとは

AMPとは一言で言うと、スマホでサイトを見るときの表示速度の高速化プロジェクトです。環境やサイトの容量などにもよりますが2~4倍速くなることもあります。

参考：AMP対応していないページの表示速度の中央値は22秒、AMP対応しているページは0.7秒

Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的としたオープンソースプロジェクトであり、簡単に言うとHTMLのスマホ向け改良版です（AMP HTML）。Javascriptやinputタグが使えないなど多くの制限があり、そのドキュメントのガイドラインに従いサイトを構築することでスマホ最適化がなされます（PCでの表示ももちろん可）。

ゴールはValidationに通した際にエラーが吐き出されないことです。

行ったこと

テストサイトの構築
AMPテーマの作成
AMPシェアボタンの導入
Javascriptの読み込みの停止
jsonタイプのscriptによる動的な処理の実装
Twitter Widgetのコード変換
htaccessにリダイレクト処理を記述

1.テストサイトの構築

AMPを導入するにあたってまずはデバッグを行うための検証環境を構築しました。サーバーの設定などの影響も考え、可能な限り本番環境と同じ環境にて検証を行いたかったため、サブドメインにテストサイトとしてオリジナルのサイトを複製しました。（SEOへの影響はないように、Google、Yahoo!などすべてのクローラーにインデックスされないよう設定）

2.AMPテーマの作成

エラーへの対処のため、AMPページにアクセスした際に表示されるテーマとしてAMPテーマを作成しました。（Wordpressを使用）

テーマフォルダ直下にampというディレクトリを作成し、オリジナルのテーマから修正が必要なファイルを複製し、修正していきます。

本来、このAMPテーマはampディレクトリを作成したら自動で適応されるとフォーラムではあったのですが、適応されなかったのでfunctions.phpにて指定します。

// AMPページのテーマの適用
 add_theme_support( 'amp', array(
     'template_dir' => 'amp',
 ));

また、ついでにampページの分岐を作成しておきます。

// AMPページの条件分岐
function is_amp() {
     $is_amp = false;
     if (function_exists('is_amp_endpoint') && is_amp_endpoint()) {
         $is_amp = true;
     }
     return $is_amp;
 }

// 使用例
if ( is_amp() ) {
     AMPページの場合の処理
}

3.AMPシェアボタンの導入

既存のサイトでのSNSのシェアボタンはJavascriptによるモーダルウィンドウを使用したものでした。AMPにおいて次のようなonclickのscript処理は使用することができないので、amp-social-shareタグを使用します。

<a href="" onclick="javascript:window.open...></a>

<!-- Facebook -->
<amp-social-share width="40" height="40" type="facebook"data-param-app_id="アプリID"></amp-social-share>
 
<!-- Twitter -->
<amp-social-share width="40" height="40" type="twitter"></amp-social-share>
 
<!-- Line -->
<amp-social-share width="40" height="40" type="line"></amp-social-share>

横幅と高さはインラインにて指定します。また、FacebookだけアプリIDが必要なので注意です。

4. Javascriptの読み込みの停止

AMP では、JavaScriptの利用が厳しく制限されています。基本的に独自の JavaScriptの実行は許可されておりません。尚、例外的にapplication/ld+json もしくは text/plainタイプであれば使用ができます。（AMP HTML Specification）

そのため、Wordpressがデフォルトで読み込むscriptやプラグインによって読み込まれるscriptをfunctions.phpにて停止させます。

// AMPページにおいてプラグインのscriptを読み込まない
 function amp_script_dequeue() {
     if (is_amp()) {
         wp_dequeue_script('handle名');
     }
 }
 add_action( 'wp_head', 'amp_script_dequeue' );

 // AMPページにおいてデフォルトのjqueryを読み込まない
 function amp_dequeue_default_jquery( ){
     if (is_amp()){
         wp_dequeue_script('jquery');
         wp_deregister_script('jquery');
     }
 }
 add_filter( 'wp_enqueue_scripts', 'amp_dequeue_default_jquery', PHP_INT_MAX );

5. jsonタイプのscriptによる動的な処理の実装

ハンバーガーメニューなど動的な部分は使用が許されたscriptにて実装します。AMPは制限が多くデザインが画一的になるなどのコメントもありますが、ユニークな表現などしていなければ結構再現できます。

また、ドキュメントが充実しており、ドキュメント見ればすんなり実装できます。

参考にしたドキュメント

メニュー・・・ amp-sidebar

スクロールと共に表示・・・ Scroll to top

モーダルウィンドウ再現・・・ amp-lightbox

タブ・・・ Tab Panels with amp-selector

6. Twitter Widgetのコード変換

Twitterの埋め込みもscriptを伴っているかと思います。次のようなやつですね。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">....</blockquote>
 <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Twitter Widget用のampタグも用意されているのでこちらに代替します。

<amp-twitter width="375" height="472" layout="responsive" data-tweetid="ツイートIDを入力"></amp-twitter>

7. htaccessにリダイレクト処理を記述

また、Really Simple SSLというプラグインを使用していたのですが、このプラグインに起因するエラーが発生しておりました。

プラグインを使用することなくSSL化させようかと色々試していたところ、htaccessにリダイレクト処理を追記し、Really Simple SSLプラグインを再起動したら直りました。

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

最後に

今回、AMP導入をさせていただきましたがご依頼いただくまでその存在を知りませんでした。

様々なサイトをトラッキングしているとモバイルからのアクセスは非常に多くなっているので、モバイルにおけるサイトの挙動は非常に大事です。

サイトの表示速度はユーザー体験に影響を及ぼし、離脱率などにも関わってくるかと思います。まだ、導入しているサイトは多くありませんが、モバイル最適化という観点で言えば非常に重要ですよね。「AMP」というその形自体はどうなるかわかりませんが、これほど制限されたモバイルに最適なサイト構築はいずれノーマルになるのではないでしょうか。

また、公式サイトにはUser-firstのコンポーネントとあります。多くの場合、ユーザーは何か情報を求めてサイトに訪れるかと思います。その目的を達成するために不必要な過度の意匠や機能は実装しない、というのはユーザーへの通信量の負担を減らし快適なWebブラウジングを実現する、ユーザーファーストな考えなのだと感じました。

思ったより大変で時間もなかなか費やしましたが、非常に勉強になりました。私がAMP導入をやったことがないことを知った上で、信じてご依頼いただいたことを心より感謝しております。

ありがとうございました。