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

morita

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

amp×nuxt.js

@nuxtjs/amp モジュール

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

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

セットアップ

まずはこの @nuxtjs/amp モジュール を npmyarn でインストールし、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ページをハイブリッドに構築することができます。

AMP化に便利なツール

最後にAMP化の際に欠かせないツールを紹介します。

AMP Validator

Chrome 拡張 の AMP Validator をインストールすると AMPのリンクがあると遷移でき、エラーがある場合、即座に確認できて便利です。

via. AMP Validator

まとめ

@nuxtjs/amp モジュール のおかげで Nuxt.js のAMP化をとても便利にすることができました。

ページの構成やその他のライブラリに影響などで調整が必要な可能性もありますが、ゼロからAMP化をするよりも圧倒的に簡単に導入することができると思います。

開発のお悩み、フロントエンドから解決しませんか?

あなたのチームのお悩みはなんですか? 「腕の良いエンジニアに重要でない作業まで任せてしまっている」「腕の良いデザイナーに主業務以外も任せてしまっている」「すべての手が足りず細かいことまで手が回らない」などなど… 。

そんなときは、相談相手としてGaji-Laboにお気軽にお声がけください。あなたの開発チームに足りていない役割や領域を適切に捉えてカバーすることで、チーム全体の生産性と品質をアップさせるお手伝いをします。

オンラインでのヒアリングとフルリモートでのプロセス支援に対応していますので、リモートワーク対応可のパートナーをお探しの場合もぜひ弊社にお問い合わせください!

お悩み相談はこちらから!


morita

投稿者 Morita Sou

フロントエンドグループ内チームマネージャー。
適切な技術提案やコミュニケーションを出来るように心掛けています。CSS設計・CMS構築や開発環境の構築などを得意としています。Macやエディタ、開発環境などを快適にすることにいつも燃えています。