目次

AMP とは

Accelerated Mobile Pagesの略でAMP を導入すれば、いつでも高速で美しく、パフォーマンスに優れたウェブサイトが作れるという優れものです。

カミナリ⚡マークが出ることが特徴で、AMP対応のページでDevTools を開くと

Powered by AMP ⚡ HTML

とコンソールに表示されます。

このページをAMPで見る

Nuxt.jsでの導入

公式のexample にやり方がのっています。
簡単にまとめると、

• hook してhtmlをrenderの前に修正
• CSSを assets から読み込む
• app.html を書き換え

のようになります。

フック

Nuxtで生成したHTMLをブラウザに表示される前に、フックしてHTMLをAMP対応用に修正する必要があります。
nuxt.config.jsに以下を記載します。

const modifyHtml = (html) => {
  // Add amp-custom tag to added CSS
  html = html.replace(/<style data-vue-ssr/g, '<style amp-custom data-vue-ssr')
  // Remove every script tag from generated HTML
  html = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
  // Add AMP script before </head>
  const ampScript = '<script async src="https://cdn.ampproject.org/v0.js"></script>'
  const ampSocial = '<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>'
  html = html.replace('</head>', ampScript + ampSocial + '</head>')
  return html
}

そして、hookを設定します。

  hooks: {
    // This hook is called before rendering the html to the browser
    'render:route': (url, page) => {
      page.html = modifyHtml(page.html)
    }

このフックによって、以下のことを行います。

• CSSタグに amp-custom属性付与
• scriptタグの削除
• AMPスクリプトを追加

CSSをassetsから読み込む

前提として、AMPではCSSはstyleタグにamp-custom属性を付与する必要がありますが、この属性はHTML中で1つしか記述できません。

NuxtではmodifyHtmlフックでstyleタグにamp-custom属性を付与するようにしています。
しかし、Nuxtで各コンポーネントにCSSを設定した場合、コンポーネントの分だけ<style type="text/css">タグを生成します。
そのため、コンポーネントの分だけmodifyHtmlフックによって書き換えを行われ、amp-custom属性が重複しエラーとなります。

そのため、assetsを使用し、各コンポーネントに記載するCSSを一元管理するようにして対処します。

app.html を書き換え

app.htmlはNuxtのHTML テンプレートです。
参考：ドキュメント
デフォルトのHTMLテンプレートを、AMPのボイラープレートに修正しています。

まとめ

NuxtにおけるAMP対応の主要を記載しました。
公式にexsampleがあるので、簡単に対応できるようになっているので、大変ありがたいです。