Octopressで書いているこのページをAccelerated Mobile Pages (AMP) 対応した際のメモです。
とりあえずAMP対応とSchema.orgの対応ができたので、そのうち下みたいな表示がされることもあるのかな？
経緯
少し前に、はてなブックマークボタンを設置する作業をしていたときに はてなブックマークボタンのAMP対応(Jekyll編) を読んで、AMPってなんだと思って調べたのがきっかけでした。
急ぎで対応する理由は特になかったのですが、「いくつかの制限を設けることで高速化を目指す」的な発想はいいなと思って試してみました。
(「AMP対応してるんでページがシンプルなんです」って言い訳もできそうでいいなという思いもちょっとあります)
対応内容
すばらしいQiita記事があり、基本的にこれ通りにすすめました。
あとはGoogle先生がAMPテストや構造化データ テストツールを用意してくれていたので、 デプロイしては確認しての繰り返しでOKが出るまで試行錯誤でした。
amp-jekyll といった自動でAMP対応ページを生成してくれるプラグインを使えればなーとも思ったんですが、 jekyll3 にしか対応してなくて、2系のjekyllを使っているoctopressではダメそうだったので試しませんでした。
ただhtml, cssまわりは大変勉強になったので良かったです。 cssはsassから生成されてたものをhtmlファイルに直接読み込む形になったので、minify <> beautifyを行き来させて目grepとかやってたんですが、 たかだか1500行くらいだったのでこれなら頑張ればいじれそうだなという気持ちになりました。 とりあえずもう少し行間をあけたりをやってみたいのでそのうちやります。
以下、苦戦したところをメモとして残しておきます。
Font Awesome Icons
ブログのデザインは、cleanerpressというoctopressのサードパーティーのテーマを元にちょっとずつ弄りながら使っていますが、
.post .meta .date:before {
content: "\f073";
}
こんな感じで特定のタグの前にFont Awesomeのアイコンを埋め込むcssが使われており、これがAMPテストで怒られて使えませんでした。
css力が低く、直接的な対応方法はわからなかったので、
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
でFont Awesomeのcssを読み込んで、
<i class="fa fa-calendar" aria-hidden="true"></i>
のタグをhtml側にベタ書きして復旧しました。
Font providers can be whitelisted if they support CSS-only integrations and serve over HTTPS. The following origins are currently allowed for font serving via link tags:
Typography.com: https://cloud.typography.com Fonts.com: https://fast.fonts.net Google Fonts: https://fonts.googleapis.com Font Awesome: https://maxcdn.bootstrapcdn.com
画像
gitリポジトリで画像管理するのは面倒だったので、いままでもflickrにアップロードして、markdownの中に下みたいなhtmlを直接ペタっと埋め込みをしていました。
<a data-flickr-embed="true" href="https://www.flickr.com/photos/143361011@N02/32417181676/in/dateposted-public/" title="20170121"><img src="https://c1.staticflickr.com/1/507/32417181676_6d2d610349_c.jpg" width="800" height="600" alt="20170121"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
これをAMP対応するために、jsを消したりimgに差し替えたりなんだりするとこんな感じになります。
<a href="https://www.flickr.com/photos/143361011@N02/32417181676/in/dateposted-public/"><img src="https://c1.staticflickr.com/1/507/32417181676_6d2d610349_c.jpg" width="800" height="600" alt="20170121"></a>
もともとwidth, heightがきちんと書かれてたので、(数がまだ少なかったのもあるとはいえ)手動でもまあまあそれほど大変でなく対応できました。
Google Adsense
ブログポストの最下部に
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-8462726040479170"
data-ad-slot="6941667244"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
こんな感じでレスポンシブな広告スペースを置いていたのですが、AMP用のタグとして
<amp-ad class="ad-under-article" width=300 height=250 type="adsense" data-ad-client="ca-pub-8462726040479170" data-ad-slot="5078850846">
</amp-ad>
こんな感じで300x250の固定サイズの広告スペースを置くようになりました。
AdSense AMP版レスポンシブ広告ユニットの謎で書かれている方のいらっしゃるように、
layout="responsive"を指定しても期待の動作をしなかったので、取り急ぎは固定サイズを置くことにしました。
参考： adsense公式のヘルプ - AMP 広告ユニットを作成する
スクロールしなければ見えない位置に配置する場合は、300×250 のレスポンシブ AMP 広告ユニットを使用することをおすすめします。AMP のレスポンシブ レイアウトを使用すると、表示される広告ユニットのサイズが端末のサイズに合わせて自動的に変更されます。
300×250 のレスポンシブ AMP 広告ユニットを作成するには、次のコード内の data-ad-client と data-ad-slot の値をお客様のサイト運営者 ID と広告ユニット ID に置き換えます（手順 1 をご覧ください）。
そのうち改修されることに期待しましょう。