AMP HTML対応の断念のその後の履歴差分(No.2)

履歴一覧
現在との差分を表示
ソースを表示
pukiwikiカスタマイズ箇所/2019/AMP HTML対応の断念のその後へ行く。

追加された行はこの色です。
削除された行はこの色です。

#author("2019-11-11T19:01:20+09:00","default:tgoto","tgoto")
#author("2019-11-14T20:47:30+09:00;2019-11-11T19:01:20+09:00","default:tgoto","tgoto")
2011.11.11初稿
2011.11.14追記

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

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

#ogp(https://oncology.uvs.jp/?ac495292e4,amp)

しかしその後に別途作成した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が挿入される。layout= \"responsive\"を入れておくとレスポンシブ対応も簡単だ。

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

*おわりに

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

pukiwikiカスタマイズ箇所/2019/AMP HTML対応の断念のその後 の履歴差分(No.2)

pukiwikiカスタマイズ箇所/2019/AMP HTML対応の断念のその後の履歴差分(No.2)