Top / 日記 / 2019年 / 11月14日

AMP HTML対応の断念のその後

AMP対応を断念していた経緯

2019年夏頃にpukiwikiベースで作成したこのサイトをAMPに対応させようとしたが、CSS3を利用したハンバーガーメニュー（スライドメニュー）がAMP環境では正しく表示できず、AMP対応を断念していた。また、AMP下で用いるフォームに使用するamp-formではpostメソッドを使うことができず、検索フォームを対応させるのも難渋していた。

AMP HTML対応の断念

PukiwikiのAMP対応の試みと断念AMPの boilerplate とAMPライブラリを記載する（AMPでは必須）AMPの boilerplateの記載AMPライブラリの読み込みcanonical URLの記載は、短縮URL導入のところで実施されているので今回は省略。AMPで利用できないHTMLを変更するschema

しかしその後に別途作成したOGPプラグインをAMP対応させたことがきっかけで再度pukiwikiで作成した当サイトをカスタマイズして、2019年11月にAMP対応を再度試みることとした。

今回実施した変更点

検索フォームを諦める

以前は全てのページのサイドバーに検索フォームを設置していたが、amp-formをpostメソッド無しで実現するのはなかなか作業量が多そうだった。またpukiwikiの編集画面、ログイン認証フォームなどあらゆるところにあるフォームをひとつづつ対応させてゆくのも難しいと考えた。

したがってamp-formを読み込まないことでフォームが設置されているページではあえてAMPエラーを放置することとした。AMPエラーが出たまま放置していても、通常のページとしてはインデックスされる。全ページのサイドバーに設置していた検索フォームは、検索フォームを設置したページへのリンクにすることとして、ほとんどのページから検索フォームを取り払うこととした。

サイドバーのz-indexを見直す。

このAMP化の時点では当サイトではz-indexが5段階使われていた。それぞれのz-indexは、1、2、90、99、9999である。90、99、9999はハンバーガーメニューのデフォルト値だ。このメニューがAMP表示のときに正しく表示されないので、z-indexに問題があると考えた。

90と99のレイヤーは表示されるので、z-index:100;以上は正しく表示されないのかもしれない。このz-indexを1、2、10、20、21と低い数字に変更してみると、表示が修正された。

ref.inc.phpの改造

画像タグ<img>をAMP対応の<amp-img>に変更するにあたって最も苦労するのは、AMPでは画像にwidthとheightが必須だというところだ。しかしref.inc.phpプラグインの改造はこの点についてはほとんど心配いらない。なぜなら、このプラグインはデフォルトで画像のサイズを取得する機能を持っているからだ。

PLUGIN_REF_URL_GET_IMAGE_SIZEをTRUEに

これだけでこのプラグインは画像取得時にwidthとheightを取得して$infoに収納してくれる。あとは画像のimgに関するHTMLを下記のように変更するだけだ。$infoにwidthとheightが挿入される。

$params['_body'] = "<amp-img src=\"$url\" layout=\"intrinsic\" alt=\"$title\" title=\"$title\" $info></amp-img>";

layout= \"responsive\"を入れておくとレスポンシブ対応も簡単だ。 layout 属性にintrinsicを指定しているのは、responsiveを指定しても構わない。intrinsicはresponsiveの欠点を補う形で登場した属性だが、どちらが適しているかは各サイトごとに判断して使い分けるのが良さそう。ただしIE10・IE11はintrinsicよりもresponsiveのほうが正しく表示されるらしい（未確認）。

AMP の layout 属性に intrinsic が追加

AMP には、要素のレイアウトを簡単に指定できる特有の layout 属性があります。これまで 7 つの値がありましたが、ここに 8 番目の intrinsic が追加されました。responsive の欠点を補うような動作をし、より簡単なレスポンシブ対応をサポートしてくれます。

https://firstlayout.net/intrinsic-added-to-layout-attribute-of-amp/

tweet_incプラグインはどうにもならない

tweet_incプラグインでTwitterのツイートをインクルードして表示している問題については、このインクルード先にJavaScriptが使われているためどうにもならない。このプラグインを使用しているページはそれほど多くはないけれど、Twitter側で対応するまでこのページのAMPエラーは放置するしかない。

2020.5.1追記：AMP-twitterスクリプトとamptwiterプラグインで解決しました。

amptwitter.inc.php

AMP-Twitterプラグイン pukiwikiをAMP対応するとtweet_incプラグインを使うとAMPエラーが出るので、AMP化したpukiwiki でもTwitterからツイートを引用できるように、AMP-twitterスクリプトに対応するプラグインを作成しました。なお、描画に少し時間がかかるのが課題です。低速回線では読

おわりに

これでひとまずはAMP対応が一段落したはずだ。本当は表示されるURLがgoogleではなく当サイトのネイティブURLにしたいが、これはAMP real URLへの対応が進むのを待つしかなさそう。

ひとまず現時点ではトップページのみPHPで分岐させてAMP非対応にし、他のページは対応しています。

その他のAMP対応についてはpukiwikiカスタマイズ箇所/AMP対応のページを参照してください。

AMP対応

これまでにpukiwikiカスタマイズ箇所/2019で示したように、自分が使用しない多数のプラグインを犠牲にしてでもPukiwikiの徹底的な軽量化と現代化を図ってきたところですが、当サイトのようにpukiwikiをベースにしているが個人で編集するのみで多人数編集を前提としていない場合は、ここまで来るとGoogleが提唱するAMP（A

この記事に対するコメント

このページには、まだコメントはありません。

更新日：2020-05-02 閲覧数：1257 views.