Nuxt.js初心者がAMPに挑戦！まずはモジュールの組み込みから

何も知らない超初心者が脱WordPressしたくてNuxt.jsでサイト構築していくシリーズです。

今回はNuxt.jsでAMP対応に挑戦してみます。

<html>タグに「lang="ja"」を追加した時に「amp」を追加する方法を見つけたんですが、あれはどうも本当に「amp」と追記するだけの機能のようで、エラーまみれでした。

今回はもう一歩先へ進んで、エラーの出ないちゃんとしたAMP実装に向けて、第1弾「AMP用モジュールを組み込んでみた」話をしたいと思います。

WordPressの上でな！

※ このブログはWordPress製です

このページの目次

1 ＡＭＰについて簡単におさらい
2 「@nuxtjs/amp」モジュールで楽々AMP化
3 モジュール組み込み後の状態を確認
4 head内のAMP用設定を確認
5 次回はデフォルトで出るエラーを解決予定

ＡＭＰについて簡単におさらい

GoogleとTwitterが共同開発したとかいう、ちょっと新しいHTMLです。

「Accelerated Mobile Pages」という正式名称からも分かる通り、モバイルからアクセしした際に爆速で表示されます。

書き方はほとんどHTML5と同じで、ちょっとだけAMP独自のルールがあります。

目立つデメリットとしては「JavaScriptが使えない」「CSSのサイズに上限がある(今は75KBのはず)」。

特に「JavaScriptが使えない」というのはNuxt.jsと致命的に相性が悪いように見えるんですが、どうなんでしょう。
(↑Nuxt.jsのJavaScriptが何をやっているか理解していない人)

爆速表示なのは限定的

爆速で表示されるのはAMPキャッシュにあるページを読み込んだ時だけっぽいです。

具体的にはGoogle検索やTwitterカードからアクセス。

その場合、URLの頭に「https://www.google.com/amp/s/～」みたいなのがくっついてきます。
https:// www.google.com/ amp/ s/ dev.ore-shika.com/ nuxtjs-head-canonical/

キャッシュを読みに行った時は本当に速いんですが、その後、サイト内で移動する時なんかは割と普通。 AMP用のスクリプトをごちゃごちゃ読み込むせいで、むしろ遅いケースもあるかもしれない。

AMPのご利用は計画的に

Googleが開発してるんだから今後は全部AMPに置き換わっていって、「AMPじゃないと検索上位に来ない！」みたいな未来を考えていましたが、残念ながらそういう感じでもなさそうです。

「速い」を拡大解釈して考えなしにAMPにするのはちょっと違うのかなと最近は考えています。

まぁ、このサイトを含めオレ歯科姉妹サイトは、

全てAMPにするほどAMP好きなんだけどな！

反省。

AMPの勉強がしたかったのと、JavaScriptから逃げたのが主な理由です。

検索結果でのカルーセル表示もAMP必須じゃなくなったみたいだし、もしかすると覚える必要はなかったのかもしれない。

「@nuxtjs/amp」モジュールで楽々AMP化

AMP化するためのNuxt.js用モジュール「@nuxtjs/amp」というのがありました。

readme読んでもいまいちピンとこなかったので、実際に動かしてみて挙動を確認しながら勉強していきたいと思います。

まずはモジュールのインストールから。

ターミナルからNuxt.jsのプロジェクトフォルダへ移動して、次のコマンドを叩くだけです。


$ npm install @nuxtjs/amp

インストールしただけではモジュールは読み込まれなかったので、「nuxt.config.js」の「modules」プロパティに以下のコードを追加します。


export default {
  modules: [
    '@nuxtjs/amp',
  ],
}

これで組み込み完了。

モジュール組み込み後の状態を確認

さっそくテストサイトを確認すると見た目はそのままに、Google Chromeの拡張機能「AMP Validator」がこの↓ようなアイコンになっていました。

これはハイブリッドAMP？と呼ばれる状態で、「このページには別ページでAMP版がありますよー」というサイン。
(AMP未対応ページだとグレーのアイコンになります)

https://dev.ore-shika.com/ (通常のページ)
https://dev.ore-shika.com/amp/ (AMP版のページ)

こんな↑イメージです。

HTMLコード上はhead内に以下のようなlinkタグで設定されています。


<link rel="amphtml" href="/amp/">

このような時はこのアイコンをクリックするとAMP版のページへ飛びます。

するとアイコンはこの↑ように緑に変わります。これは「今見ているページがAMPで、なおかつエラーがないですよー」というサイン。

ところが実際はこっち↓のアイコンになりました。

これは「今見ているページがAMPで、なおかつエラーがありますよー」というサイン。

エラー内容は、


The mandatory tag 'link rel=canonical' is missing or incorrect.

「canonical」が設定されていないと怒られているので、とりあえずテキトーにcanonicalを設定してやると無事に緑アイコンになりました。

head内のAMP用設定を確認

AMPはhead内にちゃんと書くべきことを書かないとすぐにエラーが出ます。

その辺をチェックしていきます。

<html>タグの「amp」属性

AMPでは<html>タグに「amp」または「⚡」マークを付ける必要があります。


<html data-n-head-ssr lang="ja" amp data-n-head="(略)">

ちゃんと自動で「amp」の方が追加されていました。

「rel="amphtml"」の追加

これはAMPページ側ではなく、通常ページ側のお話です。

このページのAMP版が存在することとそのURLを指定します。


<link rel="amphtml" href="/amp/">

これも自動で追加。

対になるAMP側のcanonicalはなし

序盤で勝手にcanonicalを追加してましたが、自動設定はなかったです。

エラー出てるけどいいのかな。

~~オプションで設定できるとか？~~
できました。

自分でやる場合はどうするんでしょう…。

AMPページのURLが必ず「/amp/」で終わるなら、canonicalの設定同様に現在のURLを取得して末尾の「amp/」を削ればいけるかな？

Nuxt.js関連のJavaScriptの読み込み

Nuxt.jsで書き出したHTMLは「</body>」寸前でいくつかのJavaScriptを読み込みます。

そのためにhead内でプリロード(先読み？)の設定があるんですが、

なんとー！

AMP版でもプリロードの記述がありました。


<link rel="preload" href="/_nuxt/runtime.js" as="script">
<link rel="preload" href="/_nuxt/commons.app.js" as="script">
<link rel="preload" href="/_nuxt/vendors.app.js" as="script">
<link rel="preload" href="/_nuxt/app.js" as="script">
<link rel="preload" href="/_nuxt/pages/index.js" as="script">

AMPはAMP以外のJavaScriptが使用不可なので大丈夫なのかコレ。

が、ページ末尾の実際のJavaScriptロード部分はちゃんと削除されていました。

プリロードだけじゃ構文エラーにならないっぽい。

CSSの読み込み

Nuxt.jsは、Nuxt.jsのシステム＞レイアウト＞ページ＞コンポーネントの順で複数のCSSを、それぞれバラバラの<style>タグで読み込みます。


<style data-vue-ssr-id="7e56e4e3:0">
.nuxt-progress { (略)
</style>
<style data-vue-ssr-id="7e49e411:0">
.nuxt__build_indicator[data-v-71e9e103] { (略)
</style>
<style data-vue-ssr-id="56b15182:0">
html { (略)
</style>
<style data-vue-ssr-id="1b7833da:0">
.container { (略)
</style>
<style data-vue-ssr-id="1930a9a0:0">
.NuxtLogo { (略)
</style>
</head>

AMPでは、<style>タグではなく<style amp-custom>を使う点、<style amp-custom>タグは一度しか使ってはいけない点などの制約があります。


<style amp-custom data-vue-ssr-id="7e56e4e3:0">
.nuxt-progress { (略)
</style>

両方大丈夫そうですね。

「extractCSS」オプションは無効化されない

AMPのCSSでもうひとつ「外部CSSファイルは参照できない」という制約があります。

Nuxt.jsでは「nuxt.config.js」の「build」プロパティに「extractCSS: true」と追加してやると定義済みのスタイルを外部のCSSファイルに保存します。

試しにこの設定を追加してみると通常通り外部CSSに出力されました。


<link rel="stylesheet" href="/_nuxt/app.css">
<link rel="stylesheet" href="/_nuxt/pages/index.css">

もちろんエラーが出ます。


The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value '/_nuxt/app.css'.
The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value '/_nuxt/pages/index.css'.

AMPだからと「extractCSS」を強制オフにしてくれるような機能はないみたいです。

「amp-boilerplate」の追加

AMPではhead内に「<amp-boilerplate>」という一連のコードを追加する必要があります。

中身はスタイルシートですが、カスタマイズはできず、指定された形でそのままコピペする必要があります。機能的には「AMPのスクリプト前にページ内容を非表示にする」というもののようです。


<style amp-boilerplate>(略)</style><noscript><style amp-boilerplate>(略)</style></noscript>

自動で追加されていました。

AMP必須ライブラリの読み込み

独自のJavaScriptは読み込んだら怒るくせに、AMP用のJavaScriptを読み込まなくても怒る。それがAMPです。

内容にかかわらず必須のやつがひとつだけあるのでそれを確認します。


<script async src="https://cdn.ampproject.org/v0.js">

ちゃーんと追加されています。

ですがプリロード設定がないので、nuxt.config.jsに追加しておいてもいいかもしれないですね。


{ rel: 'preload', href: 'https://cdn.ampproject.org/v0.js', as: 'script' },

モジュールインストール後の状態はこのような感じでした。

次回はデフォルトで出るエラーを解決予定

Nuxt.jsのAMP用モジュール「@nuxtjs/amp」を導入するだけで、“ほぼ”正しいAMPページが生成されました。

この“ほぼ”を解決するために次回はAMP用のcanonicalの設定をしたいと思います。

以上、WordPressからお届けしました！

Nuxt.js AMP編の目次

第1回モジュール組み込みと動作確認(このページ)
第2回 AMPページのcanonical設定
第3回 AMP Optimizerの導入