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


こんにちは森田です。
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 Sou

フロントエンドグループチームマネージャー。
適切な技術提案やプロジェクトを円滑に進めるコミュニケーションを心掛けています。
CMS構築や開発環境の構築・最適化などを得意としています。チームビルティングと採用と開発環境を快適にすることにいつも燃えています。