GatsbyJS + microCMS でブログ構築していた時にやったことの備忘録。

絵文字を使用できるようにする

タイトルのままなのですが先人たちを参考に、トップページの記事一覧のサムネイルと単一記事のアイキャッチに、画像を用意せず絵文字を使うことでなんかそれっぽく見せるようにカスタマイズ。

使用するツール

tommoor/react-emoji-render

まずは npm install を。

npm install react-emoji-render

Twemoji が使えるのでTwemojiを使います。

必要なコンポーネント/ページで読み込む。

import { Twemoji } from 'react-emoji-render';

表示させたいところには

<Twemoji
    svg
    text={emoji || "💻"}
/>

のようにして、emojiのフィールドが空でもラップトップの絵文字が表示されるように。

GraphQLで情報を取得しようとするとCannot query fieldエラー

コンテンツはmicroCMSで管理しています。フィールドIDはわかりやすく emoji にしました。記事毎のemojiの記入は任意。 入力しないと、空の値が発生します。

空の値がある場合にGraphQLで情報を取得しようとすると、エラーでbuildできない。 https://github.com/gatsbyjs/gatsby/issues/2392

解決策はgatsby-node.jsで、emoji（空の可能性があるフィールド）にスキーマを設定する。

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions

  const typeDefs = `
  type allMicrocmsPost implements Node {
    emoji: String
  }
  type microcmsPost {
    emoji: String
  }
  `
  createTypes(typeDefs)
}

ブロックの中央に絵文字を配置

ブロック内で左右上下中央配置にするためにCSSで次を指定した。

display: flex;
align-items: center;
justify-content: center;

絵文字のサイズを調整

絵文字のサイズ指定はCSSで width, height を指定します。

img{
    width:5rem !important;
    height:5rem !important;
}

そんな感じ。