サイトへのAMPのとても簡単な導入手順

結城永人 -2017年9月26日 (火)

普段、Google検索を使っていてAMPの実装サイトはブラウザで瞬時に開いたりして表示速度が圧倒的に速い。というのもGoogleにサイト内容がキャッシュされていてサイトへ行かずに出て来るためだ。AMPサイトならばGoogle検索でのサイト評価が上がるとも聞かれるし、訪問者の利便性を高めると共に検索エンジンからのアクセスアップにも繋がるはずだ。羨ましくて自分でもやってみたいと思うけれども既存のサイトを専用のコードで書き換えなくてはならないか、またはオリジナルとは別のAMPサイトを作成しなくてはならないのが大変だから無理だと何もせずにいた。ところが好奇心からサイトへのAMPの導入手順を調べていたら意外とできそうな感じがし来て実際にやってみたら最初はエラーを連発して相当に苦しんだにしても色々と細かく学びながら成功するや否やとても簡単だったと振り返ってしまった。

GoogleのAMPテストでのForevermoreの「有効なAMPページです」のテスト結果

メインのホームページ（ブログへ移転）にAMPを実装すると決めた。専用のコードや通常のJavaScriptが使えないせいで、取り入れるだけでも表示速度が上がるのが嬉しい。なのでオリジナルをAMPサイトに書き換えてどちらでも表示できるようにした。Googleアナリティクス（アクセス解析）やGoogleアドセンス（サイト広告）も対応しているから以前と全く変わらないし、デザインでもソーシャルメディアの埋め込みやソーシャルボタンも提供されていて慣れると却ってオリジナルよりもAMPでのサイト作成の方が楽な部分が増えていて良いと思う。難点としてはプロフィールで音楽にHTML5のaudioタグを使っていたけれどもサーバーがSSL暗号化通信の「https」ではなくては反映しなくて断念せざるを得なかった。Googleドライブに音楽をアップロードして埋め込みコードを取得してAMPの専用コードに修正して取り込むように変更した。文章と画像は「http」のサイトでも大丈夫だけれどもファイル／メディアによって表示されない場合があるから注意しなくてはならない。もう一つHTML5でcache-manifestを使ってブラウザにサイトをキャッシュして二回目以降の閲覧での高速化を図っていたけれどもAMPとは両立しないんだ。エラーになってしまうので、外すしかなくなった。オリジナルとは別にAMPサイトを作って振り分けないかぎり、cache-manifestは使えない。

サイトへAMPを実装するための必須の五項目
headタグのamp指定について
metaタグのcharset挿入にいて
metaタグのview-port挿入について
linkタグのcanonical挿入について
AMP対応のstyle設定について
AMP対応のマークアップで出易いエラー

サイトへAMPを実装するための必須の五項目

headタグのamp指定

metaタグのcharset挿入

metaタグのview-port挿入

linkタグのcanonical挿入

AMP対応のstyle設定

既存のサイトをAMPに変更する場合にはHTMLをAMPの専用コードに書き換えたり、通常のHTMLの一部やJavaScriptを外したりしないとエラーが出てしまうかも知れない。只単にAMPに対応するための標準設定は五つしかないし、規定通りにやれば済むから決して難しくはないんだ。標準設定のオリジナルとAMPの共通サイトのサンプルのソースコード<!DOCTYPE html> <html amp> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0"> <link rel="canonical" href="正規URL"> <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> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> （中略） </body> </html>AMPはHTML5の設定を下地にしているので、そこからだと導入する手間は少ない。HTML4以前のサイトだとマークアップの仕様を完全に変更する必要にも迫られる。無料サービスのホームページやブログでhHTML5でなければマークアップの設定も含めてhead内を操作できないとAMPの標準設定は不可能だから自力では導入できない。htmlタグのamp指定について<html amp>サイトのhtmlタグに「amp」を追加する。記載は絵文字の稲妻（⚡）でも大丈夫らしい。好みに応じて使い分ける。オリジナルとAMPで二つのサイトを作るならば絵文字の稲妻を使うと違いが一目で分かって良いかも知れない。metaタグのcharset挿入について<meta charset="utf-8">サイトの文字コードが「utf-8」でなくてはならない。HTML5ではもう既に入っている場合もある。二つ入れると重複でエラーになるからサンプルのソースコードのコピー＆ペースには注意するべきだ。metaタグのview-port挿入にいて<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0">サイトのモバイルフレンドリーで画面幅を自動で調節するmetaタグのviewportだけれども「minimum-scale=1」が付いてないと駄目みたいなので、最初から使っている場合でもちょっと違うかも知れないから確認しておきたい。linkタグのcanonical挿入について<link rel="canonical" href="正規URL">サイトの正規URLを指定するlinkタグのcanonicalが欠かせなくてオリジナルとAMPで共通のサイトを作成する場合には使い方は何も変わらない。正規URLの記載は絶対パス（http～）で行うのが完全な形だから相応しい。オリジナルとAMPを振り分けて二つのサイトを作成する場合には指定が変わる。前者から後者を指定するのは<link rel="amphtml" href="AMPサイトのURL">で、後者から前者を指定するのは<link rel="canonical" href="正規URL">（共通版と同じ）になる。AMP対応のstyle設定について<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> <script async src="https://cdn.ampproject.org/v0.js"></script>サイトのheadタグの終了タグの</head>の直前に専用のJavaScriptの<script async src="https://cdn.ampproject.org/v0.js"></script>を記載する。他の部分は必ずしもその真上とサンプルのソースコードの順番通りでなくてもhead内ならば大丈夫だ。AMPのstyleタグのamp-boilerplateの中身は余計な隙間があるとエラーになるから、全部、詰めないと駄目で、属性の値の並びを除いて要素間は隙間を残さずに改行もしないように記載しなくてはならない。他のstyleタグは構わないけど、しかしAMPを設定するためのamp-boilerplateが入ると受け付けない。AMPの標準設定の必須の五項目が完了したらAMPプロジェクトの検証ツール（ウェブインターフェース）でエラーが出なければ対応済みになる。Google検索で大丈夫かどうかはGoogleのAMPテストで確認できる。既存のサイトをAMPに変更すると他のところでエラーを連発する可能性が非常に高い。現状、AMPの公式サイトのマークアップの検証が日本語に対応してなくてどんなエラーが出ているのかが英語で分からなくて余計に大変だったりもする。実際にやってみて気がかりなところを幾つか挙げて纏めておきたいと思う。AMP対応のマークアップで出易いエラー通常のCSSはhead内に一回だけ<style amp-custom></style>の形で使用できる。概して従来の基本的なstyle要素の開始タグに「amp-custom」を付けるだけで、中身を完全に保ったまま、AMPに移行できるような感じになっている。サポートされるCSSによればインラインスタイル（body内でのHTML要素へのstyleタグの記載）や「!important」（最優先の指定）やカスタムフォントを除いてのlinkタグのstylesheet（外部CSS）などが受け付けなくてAMP対応で残してしまったためにエラーを引き起こしそうなところだ。そしてCSSの容量は50KBまでに制限されているからソースコードが越える場合には圧縮したり、削減したりしなくてはならない。通常のJavaScriptは使用できない。全て消しておくしかない。使用できるのはAMP専用のものを除いて「application/Id+json」というJSONのタイプだけみたいだ。AMP専用のものは標準設定の他にもソーシャルメディアの埋め込みなどで使うけれども全てサイトのHTMLのhead内に記載しなければならない。通常のHTMLで変更しないとエラーのタグがある。最も多いのは画像のimgだろう。AMPの専用コードではamp-imgで、しかも記載するには開始と終了のタグが両方とも求められる。さらにサイズの属性も横と縦の「width」と「height」が必須になっている。AMPの画像を表示するサンプルのソースコード<amp-img src="画像URL" width="幅" height="丈" alt="画像の説明文" layout="responsive"></amp-img>画像の説明文のaltは通常のHTMLと同じで、layoutが専用のコードなんだ。サイズを指定するとデバイスの画面幅が狭いとはみ出す可能性があるのを「responsive」を指定すると止められる。AMPは基本的にサイトのスマホでの高速化のために実装するから小さな画面で画像がはみ出すデザインは是非とも避けておきたいからlayout属性は重宝する。注意点として「responsive」を指定するとデザインの画面幅よりも小さな画像でも画面一杯に広がる。低画質だと粗が目立つ恐れもあるので、避けるのならばlayout属性は記載しないでおくか、またはCSSの「max-width」を使って最大幅を抑えると良い。HTML5だと文章と画像以外のファイル／メディアを表示できるけれども記載のパターンは画像と似ていて元々のタグに「amp-」を付けてサイズを指定する。ただし音楽のamp-audioタグのように専用のJavaScriptがhead内に必要なものもあるから追加しなくてならないし、サーバーが「https」でなければエラーは出なくても実際には動かないという場合には対策しなくてはならない。メインのホームページでAMP対応に成功して標準設定と専用コードの使い方を覚えてしまえば導入手順はとても簡単だと感じた。元々、マークアップそのものは長くなかったし、新しく変更するのにも時間はかからなかった。やる前は無理だと手を伸ばす気持ちにさえもならなかったにせよ、基本を身に付けると他にさらに色んな表現が可能だと思うし、かねて望んでいたAMP対応で久々に大きく着手して上手く行ったので、サイト作成の面白さにも改めて気付かされた。

参考サイト

コメント