WordPressのAMP再入門

Webデザイナーを謳ってることもあり、このHPは表示速度も気にして入るのですが、canvasアニメーションを入れたりとデザインを重視しています。

昨年、AMPが出てきたところですぐにAMP対応をしたり、AMPのテンプレート「Simp」の配布をしたりしていたのですが、当時はGoogleフォントが使えなかったりと制限が多かったのでこのHPのAMP対応は解除して通常のページを表示するようにしていました。

しかし、最近AMPのことを調べると、GoogleフォントやFont awesomeが使えるようになってたり、ハンバーガーメニューをクリックするとメニューを表示することができるようになっていたりと表現の幅が広がっていたので、AMPに再対応することにしました。

AMPでできること

AMPで現在できることは以下の「Learn AMP by Example」を参照していただくとよいかと思います。

Learn AMP by Example

自分のHPでAMPプラグインに加えてカスタマイズして使用したのは、「amp-sidebar」のみです。

amp-sidebarの表示例

ハマったところと気付き

  • amp-sidebarのタグはbodyの直下に置かないとエラーになる
  • amp-sidebarクリック時に表示する薄黒いマスクのcssは変更できないっぽい
  • keyframeは問題なく使えるっぽい
  • WPのAMPプラグイン対応の場合、外観のカスタマイズで適応するロゴが設定されるっぽいが、設定してない場合は、function.phpからフックでいじってカスタマイズが必要
  • 当たり前だがjsが使えないのでAmazonJSやシンタックスハイライトなどのJSに依存しているものは使えない
  • amp-bind」を使えば、クリックでclassの書き換えやつはいけそう。(まだやってない)

indexに関して

自分のサイトはそんなにアクセスもないのでindexまで少々時間かかるみたいです。以下のAMPのCDNサーバーに既にキャッシュはされているようです。

https://cdn.ampproject.org/c/s/www.sho-yamane.me/1994/amp

PWAに関して

Googleの講演で話題にもなっていましたが、そのうちPWAにも対応しなければならないのでそのへんの知見も高めていきたいところ。AMP to PWAの実装が一番良さそう?ただiOSのSafariが対応してないのでしばらく様子見だなと思っています。

AMP化案件ってあるの?

現在、AMPの対応したい!というお客さんに出会ったことがないのでクライアントワークでのAMP対応は未経験ですが、そういうニーズ増えてるのかな?関西だとAMPすら知らないお客さん多そう…。予算取りが大変そうですね。メディアやEC系はやっといたほうがパフォーマンスが高いと言われていますが。


AMPに再対応してみての感想をズラズラっと書きなぐってみました。次はRailsで実装したサイトがあるのでそのAMP対応をやってみようかなと思っている次第です。おわり。

© 2011 - 2017 ShoYamane