Nuxt2.9.1へのアップデートでAMPエラーが出た時に対応したこと

2020-06-11

(LastUpdated: 2020-06-11)

Nuxt2.9.1系にアップデートしました。これまで使っていたのが、2.0.0。だいぶ間が空いてしまいましたね😅

恐る恐るアップデートしてみると・・・想定どおりと言いますか、エラーが出ました。ただ、思いの外Nuxt自体のエラーは少なく、PWAのプラグインの問題があったくらいです。

しかしながら、AMPのバリデーションエラーが多発するようになりました。

今回は Nuxt2.0.0から2.9.1へのアップデートで、AMPバリデーションで出現したエラーへの対応 を書いていきたいと思います。

なぜNuxtのアップデートがAMPに影響したのか

AMPのアイコンと文字のブランドロゴのブルーバージョンご存知の通り、AMPはjavascriptの利用を厳しく制限したり、amp専用のタグにも独自のルールが課されています。それらに対応するために、nuxtでgenerateされるHTMLを操作しているのですが、これが影響してしまったと言うわけです。

具体的には、特定の文字列を検出して、不要なスクリプトを削除したり、特定のタグのブロックごと移動したりしていました。

Nuxtのアップデートにより、generateされるHTMLの記述に変更があり、文字列の検出が思い通りにできなくなってしまっていた んですね。

いきなりamp-customタグが複数になった

暗闇の中で目がバツじるしの光るLED仮面をつけた青年

ホットリロードで、インジケーターが出現するようになりました。 API: build プロパティ - Nuxt.js

かなり便利なのですが、AMPを実装した場合は、バリデーションエラーになります。インジケータのデザインを制御するCSSを、HTMLに突っ込まれるからです。

styleのタグをスクリプトでamp-customに書き換えているので、それが複数できてしまったと言うわけ。

ただ、テスト環境ではエラーになりますが、本番環境に置かれる生成されたHTMLには影響しない ので、無視してもOKです。

僕はAMPのエラーが見つけづらくなりそうなので、対応しておきました。

対応：インジケーターを表示しない

nuxt.config.jsのビルド設定のindicatorをfalseに切り替えると、インジケーターの表示を無効にできます。

  build: {
    // AMPのバリデーションえらえちゃうので、インジケーター表示をしない
    indicator: false,
    // 以下略〜
  },

デフォルトでは、trueになっています。

styleタグの置き換えが失敗するようになった

木製の三角定規と白い大きなキャンバス自動でsytleタグ内にインラインで吐き出されるスタイル。こんなコードでタグそのものを置き換えてました。

  html = html.replace(/<style data-vue-ssr/g, '<style amp-custom')

しかし、微妙にdata-vue-ssrのあたりの処理が変わったようです。

こんなエラーを吐いてました。

The attribute 'amp-custom-id' may not appear in tag 'style amp-custom'.

書き換わった後のタグに、残された-idがくっついちゃってた模様。結局、丸ごと変更することで対応しました。

  html = html.replace(/<style/g, '<style amp-custom ')

ストリートにかかる陸橋でうなだれる男性サイドメニューを開こうとしたら、動かない・・・。そして、こんなエラーが出現してました。

Target "sidebar" not found for action [tap:sidebar.open].

ソースを見てみたら、amp-sidebarがタグごと消失。おそらく、生成されたHTMLの記述そのものが変わったのだと思われます。

amp-sidebarブロックは、body直下に置くという仕様

amp-sidebarがbody直下じゃないと動かない。移動すればいいじゃんって話なんですが、nuxtが生成するブロックでラップされてしまうので難しいのです。こんな感じ。

<div id="_nuxt">
  <div id="layout">
    <!-- 以下にコンポーネントとかが入る -->

なので、生成されたHTMLからamp-sidebarのコードを無理やり、bodyの下に置きなおすと言う処理を施していました。今回の問題は、置きなおす処理がおかしくなっているのが原因でした。

置きなおす処理をやめて対応完了

試しに、処理そのものを外してみました。

そうすると、AMPのバリデーションエラーも消えてました。あれ？なんでだろ。

<amp-sidebar>は、<body>の直接の子である必要があります。

Documentation: amp-sidebar - amp.dev

一応ドキュメントでは、このように書いてあります。しかし、今のところ、AMPのバリデーションのエラーにはならないようです。

良いのかどうかが謎ですが、今回はそのまま放置しておきます😓

まとめ：NuxtでAMPするのは手間がかかります

ノートパソコンの画面を見て「キーッ！」と鉛筆を噛む美しい女性 NuxtとAMPの組み合わせは、相性が良いとは言えないですね。

今後、NuxtでAMPを考えているのであれば、ReactのNext.jsを検討してみても良いかもしれません。

ReactのNext.jsであれば、AMP用のチュートリアルが用意されていています。 Learn - Create AMP Pages | Next.js

しかし、面倒なことが悪いこととは限りませんね。僕にとっては、成長する課題を与えられているようで、辛さだけではなく楽しくも感じています。