2022.7.6 2022.10.26

Nuxt.js + microCMS でdayjsを使って記事のメタ情報を表示する

JAMStack 構成でのWebメディアサイト制作を試行錯誤してます。JAMstack のこれまでの取り組みについては、以下の記事もご覧ください。

JAMstack で初めてのホームページ制作の手順を紹介します（環境構築編）

JAMstack で初めてのホームページ制作の手順を紹介します（空のブログ構築まで）

JAMstack で初めてのホームページ制作の手順を紹介します（トップページデザイン構築）

新着記事の日付などのメタ情報を表示したい

試行錯誤する環境は、前回に引き続きこちらです。

microCMS + netlify + Nuxt.js
Windows11 + VS Code + github

microCMS に追加・登録した記事の、公開日や更新日を一覧ページで表示することをしたいと思います。

microCMS で取得される記事の日時情報はISO8601規格

となっています。ISO8601規格は日付と時刻に関する国際規格で、

2022-06-22T08:06:17.716Z

のように表記されます。Tで日付と時刻を区切っており、末尾Z記号はUTC時刻を表しています。

従って、このまま日時を記事一覧ページや記事詳細ページで表示しても、ちょっと閲覧者にとっては訳が分からないですね。そのため、日付や時刻をフォーマットして、一般の人でもわかる書式に変換してあげる必要があります。

dayjsを用いて日付の文字列変換（フォーマット）を行う

nuxt.js で使える日付・時刻ライブラリはいくつかありますが、本記事ではdayjsを利用したいと思います。モジュール化されており、導入も利用方法も簡単であることが理由です。

@nuxtjs/dayjs

The best way for use Day.js easily in your Nuxt.js project.. Latest version: 1.4.1, last published: 9 months ago. Start using @nuxtjs/dayjs in your project by running `npm i @nuxtjs/dayjs`. There are 3 other projects in the npm registry using @nux...

まずは、dayjs をインストールして使えるようにしましょう。

npm install @nuxtjs/dayjs

インストールが終わったら、dayjsが利用できるようにnuxt.config.js を修正しましょう。

  modules: [
    '@nuxtjs/dayjs', // 新規に追加
  ],
  dayjs: {
    locales: ['ja'],
    defaultLocale: 'ja',
  },

続いて、メタ情報を管理するためのcomponentsを作ります。メタ情報では、記事の公開日と更新日のほか、カテゴリとタグを取得して表示したいと思います。

なお、microCMS の公式マニュアル「コンテンツに自動付与される値」で、公開日や更新日などのコンテンツパラメータについて解説があります。合わせて確認しておきましょう。今回は、createdAtとrevisedAtを利用します。

<template>
  <div>
    <div class="upper">
      <ul v-if="categories" class="category">
        <li v-for="category in categories" :key="category.id">
          <span>{{ category.name }}</span>
        </li>
      </ul>
      <ul v-if="tags" class="tag">
        <li v-for="tag in tags" :key="tag.id">
          <span>{{ tag.name }}</span>
        </li>
      </ul>
    </div>

    <div class="meta">
      <span class="timestamp">
        <img src="/images/icon_clock.svg" width="20" height="20" alt />
        <time :datetime="$dayjs(createdAt).format('YYYY-MM-DD')" itemprop="datepublished">
          公開日時：{{ $dayjs(createdAt).format('YYYY/MM/DD') }}
        </time>
        <time :datetime="$dayjs(revisedAt).format('YYYY-MM-DD')" itemprop="datemodified">
          更新日時：{{ $dayjs(revisedAt).format('YYYY/MM/DD') }}
        </time>
      </span>
    </div>
  </div>
</template>

CSSスタイル部分は省略します。JS部分では、モジュール$dayjsを用いて、表記用の日付文字列に変換をしています。htmlのtimeタグを使って、SEOも考慮しましょう。

まだ簡素な見た目ですが、タグやカテゴリーの表記とともに、記事の作成日時と更新日時を取得して表示することができるようになりました。

記事のOGP画像をLazy Loadで表示したい

microCMSでは記事のサムネイル用画像を、OGP画像として設定が可能です。サムネイル画像の表示は、表示速度の影響を考慮して遅延読み込みで表示するのが基本となっていますので、Nuxt.jsでもLazy Loadを設定しましょう。

nuxt-lazy-loadを利用して画像を遅延読み込みする

今回利用するモジュールは、nuxt-lazy-loadです。npmパッケージが公開されているので、簡単に利用することができます。

npm install nuxt-lazy-load

  modules: [
    'nuxt-lazy-load',
  ],

<img
  :data-src="content.ogimage.url + '?w=670'"
  :width="content.ogimage.width"
  :height="content.ogimage.height"
  class="ogimage"
  alt
  v-lazy-load
/>

サムネイル画像を定義するimgタグに、「v-lazy-load」を設定することで、nuxt-lazy-loadが適用されます。簡単ですね。