本サイトはWordPressで運用されています。そして基本的にすべてのページがAMPに対応した形で公開されています。利用しているプラグインはAMPです。
Official AMP plugin, supported by the AMP team. Formerly Accelerated Mobile Pages, AMP enables great experiences across mobile, desktop, and stories.
https://ja.wordpress.org/plugins/amp/
このプラグインは、The AMP Project というオープンソースで開発が続けられているプロジェクトの中の一つです。Github上にリポジトリがあって、だれでもissueを書いたり、プルリクエストを送ったりできます。
WordPressにAMPプラグインをインストールして有効化すると、Website Modeとして3つの中からAMP化の方法を選ぶことができます。ざっくり説明すると以下のような感じです。
Standard
現在利用しているテーマの見栄えそのままに、全てのページをAMP化、URLもかわりません。
Transitional
現在利用しているテーマの見栄えそのままに、AMP化したURL（既存のURLの最後に?amp ）を作成し、通常ページとAMPページのどちらにもアクセスできるようになります。
Reader
現在利用しているテーマとは異なる、シンプルなテーマ（プラグイン内に同封）でAMP化したURL（既存のURLの最後に?amp ）を作成し、通常ページとAMPページのどちらにもアクセスできるようになります。
AMPプラグインを使おう！
どのモードでも、AMPの仕様としての制約（Javascriptが利用できない、CSSの容量制限）などはありますが、基本的にはモードを選ぶだけで、即座にWordPressサイトをAMP化できます。その際、既存のタグをそれぞれAMPのタグに変換したり、エラー内容を通知してくれたりもします。とても便利で素敵なプラグインです。
ですので、WordPressでAMP化する最適な方法は、このAMPプラグインを有効化する！以上！となります。
これだけと、短い感じがしますので、もう少し話を続けましょう。
これまでTransitonalを利用していた理由
これまでは、Transitionalを利用していました。というのも、既存サイトのAMP化の場合、ハンバーガーメニューや、スライダーなどなどJavascriptを利用したパーツが複数含まれており、それらが利用できなくなることや、CSSの容量制限から、正しく表示されないといった心配があったからです。
そのため、Transitionalモードを利用し、さらに、AMPを適用する範疇も記事の詳細ページだけとし、サイトに与える影響が小さくなるようにしていました。
WordCamp Euro 2019にてStandardを勧められる
WordCamp Euro2019のスポンサーブースにおいて、AMPプラグインの開発に携わるエンジニアさんと話す機会があり、「なぜ、Standardモードを利用しないの？」と聞かれました。その時には上記のような理由をお伝えしたのですが、雰囲気には、Standardモードがオススメだよ。という雰囲気を感じました。
それ以降、いつかタイミングがあったら、StandardモードでAMPサイトを作りたいなーと考えていました。
Standardモードを利用するためにテーマやプラグイン
というわけで、準備に取り掛かります。テーマについては、WordPressの最新バージョンに含まれるデフォルトテーマのtwenty-twentyなどはAMP対応テーマなので、こちらを利用する。またはAMPに対応のあるテーマを利用する。というのが簡単と思われます。プラグインも同ページで紹介されていますね。
ただ、せっかくなら1からつくってみようということで、このサイトのテーマを作りました。
とはいえ、開発にあまり時間をかけたくないので
- AMP対応
- ハンバーガーメニュー的なものの実装
- アドセンス対応
- GTMを利用したAnalyticsの測定と、イベント取得
- ブロックエディタ対応
- 頼れるものはプラグインになるべく頼る
などの対応と公開をとりあえずの目標に、テーマを作成しました。
制作の際に参考にしたもの。
- ドキュメント
- AMPのための独自実装の参考に
- わかりやすくて、サンプルもあってとても便利
- Block Unit Test for Gutenberg
- 様々なブロックをいれたダミーページを作ってくれるプラグイン
- 色々忘れたり、漏れたりするので、こういうのがあると助かりますね。
- gutenberg-starter-theme
- ブロックエディター導入後の
theme-supportの記述やCSSの参考に
- ブロックエディター導入後の
利用したプラグイン
AMPに関連するものとしては、以下を利用しました。今後とりかえたりするかもしれません。
- AMP
- AMPへの対応
- Site Kit by Google
- 管理画面からGoogle関連のサービスを確認する
- Share Buttons by AddThis
- ブックマークボタン
- Yoast SEO
- OGPなどのメタ関連設定
実際にやって見て
Standardモードはかなりいいと感じました。結果として、表示速度は早くなりますし、ブロックエディターとの相性もよく、様々な埋め込みにもAMPは対応できるということもわかりました。
付加要素として、新しい手法を取り入れられて、なんか嬉しい気持ち。というのもあります。ので、引き続き色々手を加えながら、もっと良くなるといいなーと思っています。
というわけで、よかったらAMP対応やってみてくださいませ。すぐにモード変更は可能なので、色々試してみていただければとおもいます。
おまけ、いろんな貼り付け
最後に、色々埋め込んでもAMPは動くというサンプルを紹介します。
YouTube
AMPプラグインによって提供されるブロック
以下はｍAMPプラグインを有効化すると利用できるブロックの一部なのですが、特に数式が面白かったのでご紹介します。とはいえ、さっぱり数式のことはわかりませんが。。
数式
というわけで以上です、ではまた！
次回予告
- AMPでのアクセス解析
- クリックイベントの取得
- AMPとカスタムメニューの組み合わせ
- AMPでアドセンス自動広告
- Backlog World 2020で話す、”リモートワークでプロジェクトマネジメントを上手く行うための技術” について
- 2月に行われる自分主催のイベント”めがねさんと。“について
- WordCamp ASIA 2020について
- 日記的なYoutubeを再開したい。
- 毎日続けられるかどうか。
- ロゴをかっこよくする
- メニューをサンドイッチぽくする