- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2019-11-11T19:01:20+09:00","default:tgoto","tgoto")
*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と低い数字に変更してみると、表示が修正された。
これでひとまずはAMP対応が一段落したはずだ。本当は表示されるURLがgoogleではなく当サイトのネイティブURLにしたいが、これはAMP real URLへの対応が進むのを待つしかなさそう。