Nuxt.js の AMP化に @nuxtjs/amp モジュールが便利

morita

2021.3.22

実践と知見

こんにちは森田です。
Nuxt.js を AMP化する機会があり、その際に @nuxtjs/amp モジュールが便利だったので紹介します。

@nuxtjs/amp モジュール

@nuxtjs/amp モジュールは、nuxt-communityのリポジトリに登録されているモジュールです。

この @nuxtjs/amp モジュールが登場する前までは Nuxt.js の AMP化には色々と大変な作業が必要だったのですが、このモジュールによりAMP化のハードルがとても下がりました。

セットアップ

まずはこの @nuxtjs/amp モジュールを npm や yarn でインストールし、nuxt.config.js に設定を書き込みます。

{
  modules: [
    // Simple usage
    '@nuxtjs/amp',

    // With options
    ['@nuxtjs/amp', { /* module options */ }]
  ]
}

基本的に、この設定をするだけでAMPページが生成されます。

ただしこの状態だとページは生成されているだけでスタイルなどは当たっていない状態となります。オプションの設定やAMP用のCSSを作成したりする必要があります。

オプション

@nuxtjs/amp モジュールは様々なオプションが用意されているのですが、今回は以下のオプションを設定しました。

removeInlineStyles・・・インラインスタイルを削除するかどうか
origin・・・サイトURL（ドメイン）の設定

{
  modules: [
    '@nuxtjs/amp'
  ],
  amp: {
    removeInlineStyles: false,
    origin: process.env.productionUrl || process.env.developUrl
  }
}

上記の設定で、

インラインスタイルを削除しない
dotenv で開発環境と本番環境のURLを切り分ける

という設定を行いました。

その他のオプションは、リポジトリのドキュメントをご確認ください。

AMPタグへの出し分け

AMPは専用のhtmlタグがあり、例えば <img>要素はエラーになります。 <amp-img>を使う必要がります。

そんな時は、 $isAMP というフラグが使えるので便利です。
以下のように要素を条件分岐で出し分けることができます。

<template>
  <amp-img
    v-if="$isAMP"
    src="@/assets/images/amp.png"
    alt="AMPの画像"
    width="300"
    height="300"
    layout="responsive"
  />
  <img
    v-else
    src="@/assets/images/amp.png"
    alt="AMPの画像"
    width="300"
    height="300"
    loading="lazy"
  />
</template>

上記の例では要素で出し分けをしていますが、もちろんコンポーネントで出し分けもできますし、ページであればレイアウトをAMP用に指定することもできます。
その場合はページオプションを使い ampLayout を指定します。

<script lang="ts">
  import Vue from 'vue'

  export default Vue.extend({
    name: '',
    ampLayout: 'default.amp', //AMP用レイアウト
    layout: 'default',
  })
</script>

上記ではAMPページだと default.amp レイアウトが読み込まれます。

このようにコンポーネントやレイアウトを出し分けをすることで通常のページとAMPページをハイブリッドに構築することができます。