LoginSignup
6
7

More than 5 years have passed since last update.

@nyamazu

とあるシンプルな既存ページのAMP対応をした時のメモ

Last updated at Posted at 2016-11-04

はじめに

  • AMPプロジェクトは現在進行系で開発中なので、仕様が追加・変更されることがあります。
  • いたってシンプルなページのAMP対応だったので、AMPタグもAMP JSライブラリもほぼ使っていません。
  • 主に、CSSをこねくりまわしたお話です。
  • Gruntが主役です

AMP（アンプ）

  • Accelerated Mobile Pages
  • モバイル端末でのWebページの表示を高速化するためのプロジェクト
  • 通常版HTMLと別にAMP版HTMLを作成し、それぞれを関連付け
  • HTML5をベースに、いくつかの制約を設けた AMP HTMLや AMP JS を使って実装
    • 一部HTMLタグの置き換え、インラインCSS、AMP JS以外のJS禁止、など

詳しい概要や現時点での動向は、公式サイトや海外SEO情報ブログをチェック！

実装前にやること

  • JSで実装されている部分の代替（AMP JSライブラリ）、削除などを検討
  • 他、構成要素の整理
  • 必要に応じて、UIやデザインの調整

■参考サイト
- Accelerated Mobile Pages Project
- AMP 対応のトップニュース  |  Structured Data  |  Google Developers
- amphtml/extensions at master · ampproject/amphtml
- AMP by Example

構造化データ

  • リッチスニペット（リッチカード）を導入するために必要
  • schema.org + JSON-LD の組み合わせ（Google推奨）
    • JSON-LDのメリット：Microdata、RDFaと違ってどこにでも記述でき、DOMに変更を加えることがない

■参考サイト
- Google、リッチスニペットよりもさらにビジュアルな"リッチカード"をモバイル検索に導入 | 海外SEO情報ブログ
- Schemas - schema.org
- Recipes  |  Search  |  Google Developers

Google CDNのAMPキャッシュ

  • AMP版ページはGoogleのサーバーにキャッシュされている（ゆえに高速）
  • ユーザーが閲覧する限り、AMPキャッシュは自動で更新される

キャッシュを確認（強制更新）するには

自分でAMPキャッシュのURLにアクセスする

httpsの場合：https://cdn.ampproject.org/c/s/hogehoge
httpの場合：https://cdn.ampproject.org/c/hogehoge
※hogehoge=確認したいURLからプロトコルを省いたもの

javascript:(function(){var protocol=window.location.protocol;protocol=protocol.substr(0,(protocol.length-1));var cdnURL='https://cdn.ampproject.org/c/';switch(protocol){case 'http':window.open(location.href.replace(protocol+'://',cdnURL));break;case 'https':window.open(location.href.replace(protocol+'://',cdnURL+'s/'));break;}})();

■参考サイト
- AMPページがAMP CDNにキャッシュされているかどうかを調べる方法 | 海外SEO情報ブログ
- Google CDNのAMPキャッシュを大解剖――URLフォーマット、更新プロセス、更新方法、削除方法 | 海外SEO情報ブログ

開発中の検証やバリデート

ローカルで可

javascript:(function(){if(document.getElementsByTagName("html")[0].hasAttribute("⚡")||document.getElementsByTagName("html")[0].hasAttribute("amp")){window.location.href=location.href+"#development=1";location.reload()}else{if(document.querySelectorAll("link[rel='amphtml']").length){window.location.href=document.querySelectorAll("link[rel='amphtml']")[0].href+"#development=1"}else{alert("AMP%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%9B%E3%82%93%E3%80%82")}}})()

■参考サイト
- AMPページに＃development=1を付けて開くブックマークレット | q-Az

オンライン

AMP版HTMLビルドのフロー

※あくまでも今回やった対応の話なので、サイト構造やページ構成、開発環境によって色々あると思います。
※既存ページ（通常版）のAMP版HTMLを、できるだけ自動化してつくりたかった…。

CSSなしのAMP版HTMLをビルド

一旦、CSSを無視して、AMP用に調整したHTMLをビルド。
amphtml/amp-html-format.md at master · ampproject/amphtml

※2016/11/01時点。最新情報は常に要確認。

タグ AMP HTML
script application/ld+json以外NG
img, video, audio, iframe AMPタグに置き換え
img AMP HTMLではsrc、width、height属性の数値指定が必須（空だとエラー）またlayout属性にresponsiveを指定すると、アスペクト比を保ったまま、画面幅に合わせて画像が拡大、縮小することができます。
frame, frameset, object, param, applet, embed, form, input elements NG（buttonはOK）formは将来的にサポート予定→ついさきほど、formの正式対応が発表されたという記事を見たので、近々対応。
style headタグ内OK、amp-custom属性が必要
link canonical以外NG。stylesheetとpreconnect、prerender、prefetchの値は許可しない。例外としてWebフォントの読み込みは使用可能
meta http-equivのみNG
a href属性にjavascript:から始まる値を指定するのは禁止。target属性を指定する場合は_blankのみ設定可能。それ以外は制限なし。
svg ほとんどOK

ページで必要なCSSの抽出とインライン化

通常版のCSSをそのままインラインCSSとして読み込むとAMP仕様の容量オーバー（50KB）になるので、必要なセレクタだけ抽出したかった。

grunt-criticalを使用。
ページで必要なCSSセレクタのみを抽出し、インラインCSSとしてHTMLに書き出す。

※criticalの注意点
- 仕様？で、値がないHTML属性に勝手に=“”を付けてくるので、下記AMPバリデートエラーの一因
- 読み込み元CSSの画像パスが相対パスでもルートパスに変更してくる

バリデートエラーを解消

grunt-string-replaceを使用して置換。
HTML, CSSのバリデートエラーを解消してAMP validation successful.にする。

■HTML
criticalによって付与される余計な記述を削除
amphtml/amp-html-format.md at master · ampproject/amphtml

<html amp="" lang="ja"> -> <html amp lang="ja">
<style amp-boilerplate=""> -> <style amp-boilerplate>

■CSS
Supported CSS | AMP

<style type="text/css"> -> <style amp-custom>
@charset "UTF-8"; -> 削除
!important -> 削除

※2016/11/01時点。最新情報は常に要確認。
- インラインCSSの容量上限は50KB
- !important, *, :not(), filterの使用禁止
- amp-で始まる要素に疑似要素の使用禁止（CSSは使用可能）

その他の調整

一部HTMLのタグやCSSの記述が変わることになり、ページの内容や構造によってはCSSが適用されなくなったりレイアウトが崩れるので、別途調整します。

起こった問題と解決・回避策

CSSばかり

ローカルにファイルがないCSSを抽出できなかった

criticalは、Gruntfile.jsで指定している（ローカルに存在する）ファイルからCSSを抽出するため、サーバー上にあるファイルからCSSを抽出できず、困った（通常版サイトの仕様）
↓↓↓
grunt-curlでファイルをダウンロードしてローカルに配置

今度は背景画像が表示されない

criticalのオプション maxImageFileSize のデフォルト値を超えていたので表示されず。
↓↓↓
オプションの値を変更
maxImageFileSize: 100000

なんかCSSの記述が微妙に足りない

HTMLから静的に抽出されるので、動的に出し分けされる部分のパターンが抽出できない。
↓↓↓
HTMLに全パターン出した状態でrunさせる

CSSの記述がまだ足りない

要素に直接指定しているCSSが抽出されていなかった（具体的にはimg）
criticalをrunさせる前にAMPタグに書き換えていたため。
↓↓↓
criticalがrunした後にAMPタグへの書き換えを行う。インラインCSSも同様。

img -> amp-img

他、minifyによってなぜか記述が消えたり、画像パスが変わったりしたものを
grunt-string-replace で調整。

CSSがまだおかしい

元CSSの!importantが原因。!important強い。
↓↓↓
AMP調整用のCSSを追加

そして、インラインCSSの容量が仕様の倍以上へ

DATA-URIによる背景（しかもスプライト）画像の埋め込みが主な原因。
↓↓↓
DATA-URIの背景を画像読み込みに変更

AMP validation successful.

amp.png

まとめ

  • 結局、CSSの調整に一番苦労した。
  • 次は、もう少しシンプルではないページでAMPタグやAMP JSライブラリを使ってみたい
6
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
7