Nuxt.js + microCMS でdayjsを使って記事のメタ情報を表示する
目次
JAMStack 構成でのWebメディアサイト制作を試行錯誤してます。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を利用したいと思います。モジュール化されており、導入も利用方法も簡単であることが理由です。
まずは、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が適用されます。簡単ですね。
これで、トップページの記事一覧をmicroCMSを使って表示する準備が整いました。あとは、CSSを適宜設定して見た目を整えましょう。
弊社ではホームページの制作について、ご要望に応じた最適な制作方式・運用管理方式をご提案いたします。お困りごとがありましたら、お気軽にお問い合わせください。
