GitHub Pages を AMP 対応する

ちょっとしたお遊びで、自分の GitHub Pages を AMP 対応して立ち上げてみた。ということで作業メモを記録しておきたい。

---

実際に立ち上げたページはこちら。

---

今回も例のごとく公式ドキュメントにお世話になった。

ちなみに今回の場合、もともと普通に静的 HTML で作成していたものがあったので、それに手を加える形で AMP 対応する手段を取った。

＜作業の流れ＞

1. 公式ドキュメントに従い HTML を AMP 用に変更する

具体的にどのように書き換えたかは、HTML ファイルの History を見ていただくと分かりやすいかもしれない。

上記 URL にあるように、主に変更した部分は <head></head> 内部。

また、CSS/JS ファイルは AMP では利用できないので削除している。

2. 公式のデバッグツールで動作確認する

AMP には「Validate AMP Pages」というデバッグ機能がある。

次の画像は Chrome のコンソールで確認した時の様子。特にエラーがなければ「AMP validation successful.」と表示される。

f:id:red_snapper:20161130112535p:plain

上記コンソールでの確認方法について、ローカルで見る際は、下記コマンドのようにローカルサーバを立ち上げて作業する。

＜Python 2 系を使う場合＞

$ cd {HTML ファイルをおいているディレクトリに入る}

$ python -m SimpleHTTPServer 8888

# ブラウザで「http://localhost:8888/#development=1」にアクセス

AMP 対応が無事終わったら、いそいそと git push して作業完了。

---

ページの内容が内容だけにあっさり対応できてしまったが、記事などを扱うなら schema.org のプロパティもしっかり書いておく必要がある。大規模サイトで対応しようと思ったらこりゃもう根気だなという印象を持った（実際に半年や１年などの長いスパンで改修に当たったという話も聞いたことがある）。

ただ表示速度が速いのはやっぱり気持ちがいいものだなあと思う。もともと作っていた静的ページの速度を測っておけばよかった。

そんなこんなで、今回は以上。

鯛めしのお釜