MicroCMS+Now+NextJS+Typescript+AMPでオウンドメディア構築 [MicroCMSの画像表示は素晴らしい]

はじめに

https://qiita.com/kamimura3589/items/07bd5fc2a93105dfe180
こちらのQiitaの記事に触発されてMicorCMSとNextJSを駆使してオウンドメディアを構築しました。私の場合はNetlifyではなくNow
で構築してみました。

構築したサイトはこちら

MicroCMSとNextJSでの作り方は上記のサイトと同じです。

全部使った技術やコードを書くのは萎えるので小出しにしていって
あとでまとめるような形にできればと思います。

MicroCMSの素晴らしいところ

個人的にすごく気に入っているのが画像の部分です。
標準でWebpに対応しているんです！素敵！
詳しくはこちら
https://microcms.io/blog/microcms-with-image-editing/

これの素晴らしいところは、例えばAMPの場合だとamp-imgを使うのですが、
MicroCMSと組み合わせることで素敵な書き方ができてしまうのです。

amp-imgに関してはこちら公式ドキュメント

こっちにより詳しく書いている

webp形式の画像はSafariがまだ対応していませんが、
そこをamp-imgのfallbackという機能を使ってうまく保管して書くことができます。

<amp-img
  alt="Sample"
  width="550"
  height="368"
  src="https://d1pa960qlle92r.cloudfront.net/protected/example/img_sample_01.png?fm=webp"
>
  <amp-img
    alt="Sample"
    fallback
    width="550"
    height="368"
    src="https://d1pa960qlle92r.cloudfront.net/protected/example/img_sample_01.png"
  ></amp-img>
</amp-img>

amp-imgを入れ子で書く感じなのですが、MicroCMSだとパラーメーターを渡すとwebp対応の画像にしてくれるので親のamp-imgのsrcにはwebpにパラメーター?fm=webpを入れて子には何も入れないようにしてあげればSafariやiPhoneでもちゃんと表示できます。

amp-imgはsrcsetにも対応してますので、MicroCMSのdpr パラメーターと一緒に使うのも相性がいいです。

<amp-img src="https://.../img_sample_01.png"
  srcset="https://.../img_sample_01.png,
https://.../img_sample_01.png?dpr=2 1200w"
  width="600"
  height="300"
  layout="responsive"
  alt="AMP"></amp-img>

amp-imgの場合はw記述子でブラウザに画像の幅を伝えるようです。

このようにamp-imgタグとMicroCMSの画像編集機能を使えば柔軟に
色々な環境に合わせた画像の表示ができるのです！

webpにすると表示速度だいぶ早くなるのでオススメですよ！

ブログサイトで欲しいサイトマップとRSSフィードをどうするか

NextJSの場合だと、sitemap.xml.js sitemap.xml.ts とか
feed.xml.jsとかfeed.xml.tsとかをpagesフォルダに入れて記事データを
それぞれのフォーマットで書き出すように書いてあげれば
デプロイした際にサイトマップとRSSフィードとして認識してくれます。

ちなみに書き方はこちらのレポジトリを参考にさせていただきました。
https://github.com/axross/kohei.dev/tree/9a396055f59a8ef8428b80b3682a38afb33c351d

私の方で設定したfeed.xml.tsはこんな感じです。

import axios from "axios";
import * as xmljs from "xml-js";

const RssFeedXml = () => null;

RssFeedXml.getInitialProps = async ({ res }) => {
  const config = {
    headers: { "X-API-KEY": process.env.API_KEY }
  };
  const origin = "設定するサイトのURL";
  const blogData = await axios.get(
    `https://{マイクロCMSのアカウント名}.microcms.io/api/v1/{API名}`,
    config
  );
  const blogs = await blogData.data.contents;
  const xml = xmljs.js2xml(
    {
      _declaration: {
        _attributes: {
          version: "1.0",
          encoding: "utf-8"
        }
      },
      feed: {
        _attributes: {
          xmlns: "http://www.w3.org/2005/Atom"
        },
        id: {
          _text: origin + "/"
        },
        title: {
          _text: `ブログのタイトルなど自由に何でもいいと思います。`
        },
        updated: {
          _text: blogs[0].updatedAt
        },
        link: {
          _attributes: {
            rel: "self",
            href: origin + "/feed.xml"
          }
        },
        entry: blogs.map(blogPost => ({
          id: {
            _text: origin + "/blog/" + blogPost.id
          },
          title: {
            _text: blogPost.title
          },
          updated: {
            _text: blogPost.updatedAt
          },
          summary: {
            _text: blogPost.description
          }
        }))
      }
    },
    { compact: true }
  );

  res!.setHeader("content-type", "application/xml");
  res!.write(xml);
  res!.end();

  return;
};

export default RssFeedXml;

こんな感じのデータをPagesに入れてあげれば、
ビルドした時にMicroCMSのデータを取ってきて、
RSSフィードやSitemapを作ってくれます。

これだけでもGoogleのサーチコンソールに登録したり、
RSSの更新をプッシュ通知で配信したりと色々なことができるようになります。
（素敵）

---

参考
https://qiita.com/kamimura3589/items/07bd5fc2a93105dfe180
https://github.com/axross/kohei.dev/tree/9a396055f59a8ef8428b80b3682a38afb33c351d