AMP HTML対応の断念のその後
AMP対応を断念していた経緯
2019年夏頃にpukiwikiベースで作成したこのサイトをAMPに対応させようとしたが、CSS3を利用したハンバーガーメニュー（スライドメニュー）がAMP環境では正しく表示できず、AMP対応を断念していた。また、AMP下で用いるフォームに使用するamp-formではpostメソッドを使うことができず、検索フォームを対応させるのも難渋していた。
しかしその後に別途作成した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のほうが正しく表示されるらしい（未確認）。
tweet_incプラグインはどうにもならない
tweet_incプラグインでTwitterのツイートをインクルードして表示している問題については、このインクルード先にJavaScriptが使われているためどうにもならない。このプラグインを使用しているページはそれほど多くはないけれど、Twitter側で対応するまでこのページのAMPエラーは放置するしかない。
おわりに
これでひとまずはAMP対応が一段落したはずだ。本当は表示されるURLがgoogleではなく当サイトのネイティブURLにしたいが、これはAMP real URLへの対応が進むのを待つしかなさそう。
ひとまず現時点ではトップページのみPHPで分岐させてAMP非対応にし、他のページは対応しています。
2011.11.11初稿
2011.11.14追記
この記事に対するコメント
このページには、まだコメントはありません。
更新日：2020-05-04 閲覧数：1880 views.