AMP（Accelerated Mobile Pages）に対応した件
こんにちは。UI/UXD領域を担当しているT.I.です。
2月24日からGoogleの検索結果に導入されたモバイルサイトの高速表示化プロジェクトであるAccelerated Mobile Pages（以降、AMPと表記）ですが、当ブログもこれに対応してみましたので、フロント実装の内容共有エントリーです。
AMPとは
Googleが推進するモバイルでの検索結果表示を高速化するためのオープンソース仕様に沿って作成された仕様です。Google側でAMP形式で書かれたウェブページをキャッシュすることで表示速度が向上できるというものです。
参考
Accelerated Mobile Pages プロジェクトについて — 導入ガイド日本語版を本日公開しました
過去の投稿をAMP化したもの(UserAgentをスマホにして確認ください)
http://recruit.gmo.jp/engineer/jisedai/blog/customerjourneymap_201503/?amp=1
AMPの導入方法
通常ページとAMP対応ページを作ることになります。CMSなどの場合、プラグインが開発されている
WordpressやDrupalといったメジャーなCMSでは既にPlug-inが公開されています。便利な世の中ですね。https://wordpress.org/plugins/amp/
https://www.drupal.org/project/amp
独自デザインやCMSでない場合の実装
基本的に以下の3点の対応があります。1. head / meta
2. xml(html)
3. css / JavaScript など外部ファイル
head / meta
・HTMLタグに[?]を入れる・canonical と amphtml の設定
<!DOCTYPE html> <html ?> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <link rel="canonical" href="本来のURL" /> <link rel="amphtml" href="本来のURL?amp=1">
xml (html)
様々なhtmlタグの利用がNGとなっています。imgタグであれば amp-img に、analytics の場合は amp-analytics にして設定する必要があります。htmlタグについてのAMP公式解説（英語）
https://www.ampproject.org/docs/reference/spec.html#html-tags
amp-analytics についてのAMP公式解説（英語）
https://developers.google.com/analytics/devguides/collection/amp-analytics/
css / js
・AMP用jsライブラリ・構造化の設定（schema.org）
・他のjsは一切使用の禁止
・インラインでのスタイル設定の禁止
・amp-boilerplateの読み込み
デバッグ
URLの最後に #development=1 を追加すると、コンソールにエラーなどを表示でき、確認ができます。
http://recruit.gmo.jp/engineer/jisedai/blog/customerjourneymap_201503/?amp=1#development=1さいごに
本サイトにおいては /jisedai/blog/ 配下のページのみ、 ampのif分岐を設定し、amp-header、amp-footerと言った別Templateを読むようにしています。作業時間としては約3時間くらいでした。AMPの理解やコーディングに慣れていれば、もっと早く出来るかもしれませんね。次世代システム研究室では、新しい技術やユーザー体験最適化に興味を持った開発者を募集しています。特にスマートデバイスのUX設計に興味がある方、次世代システム研究室にご興味を持って頂ける方がいらっしゃいましたら、ぜひ募集職種一覧からご応募をお願いいたします。
皆様からのたくさんのご応募、お待ちしてます。
