山梨県でホームページの制作をしています。コンテンツを重要視した使いやすいWebサイトを提供します。
  1. Home ›
  2. BLOG ›
  3. HTML+CSS ›
2020-11-04

今度こそAMPを試してみた

この記事は2020年11月に書かれたもので、内容が古い可能性がありますのでご注意ください。

いよいよ試してみました

今見ていただいているこのサイトをWordpressのプラグインでAMP化しようとしたのですが、結局、色んな問題がありましてその計画が頓挫しました。

以前の投稿

でもまぁ、改めて、ちょっとどんなものか試してみましたのでそのエントリーです。

WordPressのAMP化が頓挫した理由

まずJQueryのプラグインが多数使われていること。
※AMPではJQueryは使えません。

プラグインを使うと現状のデザインと変わってしまうこと。
※AMPではHTMLやCSSの記述の仕方に制限があります。試してみたプラグインを使うとカスタマイズされてしまいました。

そんなわけで、取りあえずこのサイトのAMP化は保留とさせていただきました。

使ったのはテンプレート

で、今回はできるだけシンプルなHTMLテンプレートを使って試そうと思いまして『CLOUD TEMPLATE』のテンプレート No.1411［シンプル黒］を使ってテストすることにしました。

前置きはさておき

テンプレートをAMP化したサンプルWebサイトをご覧ください。

AMP化したテンプレート

テンプレートをAMP化する前のサンプルWebサイトもご覧ください。

AMP化する前のテンプレート

ファイル名をhtnlからphpにします

index.htmlをindex.phpにします。subpage.htmlはsubpage.phpにします。
これは後述しますが、include関数でCSSファイルを読み込むようにしたいからです。

head内を変更

冒頭の<html>に『amp』を追加します。
『<html amp dir=”ltr” lang=”ja”>』と、こんな感じです。

次はCSSファイル、『<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen”>』です。これはAMPでは使えませんので、削除します。
CSSを読み込まないわけにはいきませんので『<style amp-custom><?php echo file_get_contents(“style.css”);?></style>』を記述します。
これをするためにphpファイルにしたんです。

それからJavaScriptのライブラリ。
JavaScriptは使えないので全部削除します。

  • html5.js
  • css3-mediaqueries.js
  • jquery1.7.2.min.js
  • script.js

今回、利用したテンプレートから上記のJSファイルを削除します。

さらに以下を記述します。

<link rel="canonical" href="https://www.magnetic-labo.com/amp/">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<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>

rel=”canonical”

これはGoogleやYahoo！などの検索エンジン等に、このWebページが何らかのコンテンツのコピーであることを伝えるためのものです。
今回はこのhttps://www.magnetic-labo.com/amp/となっていますが、こちらは任意のものに変更してください。

imgタグが使えません

imgタグは使えませんのでamp-imgタグに置き換えていきます。
例えば、ロゴのイメージですが、
『<img src=”images/banners/logo.png” alt=””>』
この表記を。
『<amp-img alt=”ロゴ” src=”images/banners/logo.png” width=”175″ height=”38″ layout=”responsive”></amp-img>』
これに変えます。
ここがちょっと曲者で画像はJavaScriptで読み込んでいるようなのですが、position: absolute;とかスタイルが効いていたりするのでレイアウトは注意が必要です。

JQueryは使えませんが

JQueryに変わるAMP専用のライブラリがあります。
今回はamp-accordion(アコーディオンメニュー機能)とamp-bind(トグルでCSSをコントロールする機能)というのを使います。
メニューの開閉部分とドロップダウン効果に使います。

<script async custom-element=”amp-accordion” src=”https://cdn.ampproject.org/v0/amp-accordion-0.1.js”></script>
<script async custom-element=”amp-bind” src=”https://cdn.ampproject.org/v0/amp-bind-0.1.js”></script>

こんな感じで読み込みます。JQueryを扱ったことがある方ならわかると思いますが、だいたい一緒ですね。

詳しくは以下をご覧ください。

amp-accordion
https://amp.dev/ja/documentation/components/amp-accordion/?format=Websites

amp-bind
https://amp.dev/ja/documentation/components/amp-bind/?format=Websites

AMPライブラリは厄介かも

今回はamp-accordionとamp-bindを使っただけですが、このプラグインが持っているスタイルシートが曲者です。
borderやbackground-colorとか装飾が入っていたりするのでスタイルをリセットするような作業が発生します。

なんとか完成

AMPテストのページでテストして完成していることを確認しました。

前回、試したようにちゃちゃっとWordpressプラグインを使うのもいいですが、こうやって静的なWebページをAMP向けにタグから編集することで、構造や仕組みはかなり理解できたように感じました。

WordPressをAMP化するのは

すでに完成しているWordpressサイトをプラグインを使ってAMP化する場合はある程度、現状のデザインや機能を損なうことを割り切るか、時間と労力を割いてガッツリとカスタマイズしないとならないと思いますね。
新規にAMP対応サイトを作成するのなら、あらかじめAMP対応前提でHTML+CSSコーディングをしておかないと大変だろうなぁ。という感想です。
でも最近はAMP対応のWordpressテンプレートも出てきているようですね。

今回はテンプレートを使ったカスタマイズでしたが、ちょっと勉強になりました。

もっと勉強しないと。。。。。
では。

関連記事
新着記事