<p>このブログのAPIはmicroCMSを利用していて、microCMSには検索のAPIが用意されていますが、algoliaを使って検索機能を実装してみました。<br>個人のブログでは検索機能があったとしても、来訪者はほとんど使わないはずなので、記事を削除したりURLが変わって404になった時のために、404ページにalgoliaによる検索機能をつけました。<br><a href="https://www.mismith.me/404" target="_blank" rel="noopener noreferrer">https://www.mismith.me/404</a><br></p><h2 id="h466509ec71">やること</h2><ul><li>algoliaにビルド時にAPIで記事データを登録</li><li>algoliaで用意されている検索フォーム、検索結果コンポーネントをカスタマイズ</li><li>検索結果数制限</li><li>初期表示は何も検索結果を出さない</li></ul><p><br></p><h2 id="h18ee94fcac">algoliaに登録</h2><p>まずは、algoliaのアカウントを取得します。登録はGoogleアカウントなどでできるので特に問題ないと思います。<br><a href="https://www.algolia.com/" target="_blank" rel="noopener noreferrer">https://www.algolia.com/</a><br><br>登録が完了したら、Indexを作っておきます。Indexにブログのデータを登録する方法は手動でやったり、APIで登録したり、いくつか方法がありますが、今回はAPIで登録します。<br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/083c12dc68234e2abb260233e54bdd72/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-01-23%205.12.33.png" alt="" width="1818" height="998"><br></p><h3 id="h459b2ff34e">必要な情報</h3><p>管理画面左下にある「Settings（歯車アイコン）」→「API keys」を開く。</p><ul><li><span style="color:#23263b">Application ID</span></li><li><span style="color:#23263b">Search-Only API Key</span></li><li><span style="color:#23263b">Admin API Key</span></li></ul><p><br><code>.env</code>  ファイルに上記の情報を書いておきます。本番にデプロイする時のためにVercelなどに環境変数の登録を忘れないようにしましょう。</p><pre><code>NEXT_PUBLIC_ALGOLIA_APPLICATION_ID={Application ID}
ALGOLIA_ADMIN_API_KEY={Admin API Key}
NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY={Search-Only API Key}</code></pre><p><br></p><h2 id="ha5d8a935e1">インデックスへ情報を送る</h2><p><br>まずは必要なパッケージを追加しておきます。<code>algoliasearch</code>  はalgoliaのパッケージ、<code>remove-markdown</code>  はalgoliaへ記事データを送る時にプレーンテキストにするためのものです。 <code>@types/remove-markdown</code>  はその型定義ファイル。</p><pre><code>yarn add remove-markdown @types/remove-markdown algoliasearch </code></pre><p><br></p><h3 id="h3b68b9656c">インデックスへ送る情報を作る</h3><p>以下のコードを書きます。このブログの構成の場合は <code>libs/algolia.ts</code>  に書いています。<br>getAllContentsについてはこちらの記事を見てください。<br><a href="https://www.mismith.me/blog/web/microcms-get-all-contents" target="_blank" rel="noopener noreferrer">microCMSで全記事取得する</a></p><pre><code>import removeMd from 'remove-markdown'
import algoliasearch from 'algoliasearch'
import { getAllContents } from '@/libs/getAllContents'
import { Blog } from '@/types/Blog'

export const generateIndex = async (): Promise&lt;void&gt; =&gt; {
  const applicationId = process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID ?? ''
  const adminApiKey = process.env.ALGOLIA_ADMIN_API_KEY ?? ''
  const posts = await getAllContents()

  const objects = posts.map((post: Blog) =&gt; {
    return {
      objectID: post.id,
      url: `https://www.mismith.me/blog/${post.category.id}/${post.id}`,
      title: post.title,
      description: post.description,
      content: removeMd(post.content),
    }
  })

  const client = algoliasearch(applicationId, adminApiKey)
  const index = client.initIndex('mismith')
  await index.saveObjects(objects, { autoGenerateObjectIDIfNotExist: true })
}</code></pre><p><br></p><h3 id="ha5d8a935e1">インデックスへ情報を送る</h3><p>記事一覧ページの <code>getStaticProps</code>  で <code>generateIndex</code>  を呼び出します。<br>ローカル環境でいいので、記事一覧ページへアクセスし、algoliaの管理画面のインデックスを見ると記事のデータが登録されているはずです。</p><pre><code>export const getStaticProps: GetStaticProps = async () =&gt; {
  // 省略
  await generateIndex()
  // 省略
}</code></pre><p><br>このままだとテスト環境で開発する時に記事一覧ページにアクセスすると毎回送信されてしまうので、 <code>libs/algolia.ts</code>  の最後を以下のように書き換えておきます。 <code>getStaticProps</code> に記述しているので、ビルド時に送信するようになります。</p><pre><code>process.env.NODE_ENV === 'production' &amp;&amp;
    (await index.saveObjects(objects, { autoGenerateObjectIDIfNotExist: true }))</code></pre><p><br></p><h2 id="h59e148e731">検索フォーム、検索結果一覧を表示</h2><p>algoliaで用意されているUI Component用のパッケージと型定義ファイルを追加します。</p><pre><code>yarn add react-instantsearch-dom @types/react-instantsearch-dom</code></pre><p><br>特にスタイルはしてないですが、とりあえず検索されるかを確認したければ、以下のように書くと検索フォームと結果が表示されます。自分のブログでは <code>Search</code>  というコンポーネントを作って、ページで呼び出しています。</p><pre><code>import { Wrap } from './styles'
import algoliasearch from 'algoliasearch/lite'
import {
  InstantSearch,
  SearchBox,
  Hits,
} from 'react-instantsearch-dom'
import { Props } from './types'

export const Search = ({ className }: Props) =&gt; {
  const applicationId = process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID ?? ''
  const searchApiKey = process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY ?? ''
  const searchClient = algoliasearch(applicationId, searchApiKey)
  const indexName = 'your index name'

  return (
    &lt;Wrap className={className}&gt;
      &lt;InstantSearch indexName={indexName} searchClient={searchClient}&gt;
        &lt;SearchBox /&gt;
        &lt;Hits /&gt;
      &lt;/InstantSearch&gt;
    &lt;/Wrap&gt;
  )
}</code></pre><p><br></p><h2 id="hc1dbbce155">検索結果数を制限</h2><p><code>Configure</code> を追加し、<code>hitsPerPage</code> を指定することで制限できます。</p><pre><code>import { Wrap } from './styles'
import algoliasearch from 'algoliasearch/lite'
import {
  InstantSearch,
  SearchBox,
  Hits,
  Configure,
} from 'react-instantsearch-dom'
import { Props } from './types'

export const Search = ({ className }: Props) =&gt; {
  const applicationId = process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID ?? ''
  const searchApiKey = process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY ?? ''
  const searchClient = algoliasearch(applicationId, searchApiKey)
  const indexName = 'your index name'

  return (
    &lt;Wrap className={className}&gt;
      &lt;InstantSearch indexName={indexName} searchClient={searchClient}&gt;
        &lt;Configure hitsPerPage={5} /&gt;
        &lt;SearchBox /&gt;
        &lt;Hits /&gt;
      &lt;/InstantSearch&gt;
    &lt;/Wrap&gt;
  )
}</code></pre><p><br></p><h2 id="ha7a40523b7">初期表示で検索結果を表示しない</h2><p>何もしないと初期表示である程度候補を出してくれますが、まだ何も検索してないので表示したくない場合もあると思います。<br>その時は <code>MultipleQueriesQuery</code> をimportして以下のように書きます。<br>何もなかった時の <code>empty</code> を用意しておきます。</p><pre><code>import { Wrap } from './styles'
import algoliasearch from 'algoliasearch/lite'
// 以下追加
import { MultipleQueriesQuery } from '@algolia/client-search'
import {
  InstantSearch,
  SearchBox,
  Hits,
  Configure,
} from 'react-instantsearch-dom'
import { Props } from './types'

export const Search = ({ className }: Props) =&gt; {
  // 以下書き換え
  const algoliaClient = algoliasearch(
    process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID || '',
    process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY || ''
  )
  const indexName = 'your index name'

  const empty = {
    hits: [],
    nbHits: 0,
    nbPages: 0,
    page: 0,
    processingTimeMS: 0,
  }

  const searchClient = {
    ...algoliaClient,
    search(requests: MultipleQueriesQuery[]) {
      if (requests.every(({ params }) =&gt; !params?.query)) {
        return Promise.resolve(empty)
      }
      return algoliaClient.search(requests)
    },
  }

  return (
    &lt;Wrap className={className}&gt;
      &lt;InstantSearch indexName={indexName} searchClient={searchClient}&gt;
        &lt;Configure hitsPerPage={5} /&gt;
        &lt;SearchBox /&gt;
        &lt;Hits /&gt;
      &lt;/InstantSearch&gt;
    &lt;/Wrap&gt;
  )
}</code></pre><p><br></p><h2 id="hdcb785d342">UI Componentをカスタマイズする</h2><p>UI Componentsの使い方やカスタマイズはReactやVueなどフレームワークごとにドキュメントがあるので、それを読めばだいたいわかります。<br><a href="https://www.algolia.com/doc/api-reference/widgets/react/" target="_blank" rel="noopener noreferrer">https://www.algolia.com/doc/api-reference/widgets/react/</a><br><br>以下の3つをカスタマイズします。基本的にはどれも自分でスタイルを当てたコンポーネントを <code>connect~</code> でラップして使います。それぞれのコンポーネントの記述例を書いた後に、カスタマイズしたコンポーネントを呼び出してみます。</p><ul><li>SearchBox（検索フォーム）</li><li>Hits（検索結果）</li><li>PoweredBy（無料プランでは表示必須）</li></ul><p><br></p><h3 id="h13cf42ceff">SearchBox</h3><p><code>input</code> にスタイルを当てて以下のように書きました。<br><a href="https://www.algolia.com/doc/api-reference/widgets/search-box/react/" target="_blank" rel="noopener noreferrer">https://www.algolia.com/doc/api-reference/widgets/search-box/react/</a></p><pre><code>import { Wrap, StyledInputText } from './styles'

type Props = {
  className?: string
  currentRefinement: string
  refine: (value: string) =&gt; void
}

export const SearchInput = ({
  className,
  currentRefinement,
  refine,
}: Props) =&gt; {
  return (
    &lt;Wrap className={className}&gt;
      &lt;StyledInputText
        type="search"
        value={currentRefinement}
        onChange={(event) =&gt; refine(event.currentTarget.value)}
        placeholder="Next.js, microCMS, Firebase..., etc..."
      /&gt;
    &lt;/Wrap&gt;
  )
}</code></pre><p><br></p><h3 id="h010da8b4e8">Hits</h3><p>検索結果は以下のように書きました。<br><a href="https://www.algolia.com/doc/api-reference/widgets/hits/react/#full-example" target="_blank" rel="noopener noreferrer">https://www.algolia.com/doc/api-reference/widgets/hits/react/#full-example</a></p><pre><code>import Link from 'next/link'
import { Hit } from 'react-instantsearch-core'
import { connectPoweredBy } from 'react-instantsearch-dom'
import {
  Wrap,
  List,
  Item,
  StyledLink,
  Description,
  EmptyContent,
  EmptyContentText,
} from './styles'

export type HitDoc = {
  objectID: string
  url: string
  title: string
  description: string
  content: string
}

type Props = {
  readonly className?: string
  readonly hits: Hit&lt;HitDoc&gt;[]
}

export const SearchResults = ({ className, hits }: Props) =&gt; {
  return (
    &lt;Wrap className={className}&gt;
      {hits.length &gt; 0 ? (
        &lt;List&gt;
          {hits.map((hit: HitDoc) =&gt; (
            &lt;Item key={hit.objectID}&gt;
              &lt;Link href={hit.url} passHref&gt;
                &lt;StyledLink&gt;{hit.title}&lt;/StyledLink&gt;
              &lt;/Link&gt;
              &lt;Description&gt;{hit.description}&lt;/Description&gt;
            &lt;/Item&gt;
          ))}
        &lt;/List&gt;
      ) : (
        &lt;EmptyContent&gt;
          &lt;EmptyContentText&gt;検索結果がありません。&lt;/EmptyContentText&gt;
        &lt;/EmptyContent&gt;
      )}
    &lt;/Wrap&gt;
  )
}</code></pre><p><br></p><h3 id="hcb29ad4540">PoweredBy</h3><p>PoseredByはそのまま使うとaタグで <code>Warning: Prop "href" did not match. Server: </code>  というエラーがでるので、カスタマイズしました。<br><a href="https://www.algolia.com/doc/api-reference/widgets/powered-by/react/#examples" target="_blank" rel="noopener noreferrer">https://www.algolia.com/doc/api-reference/widgets/powered-by/react/#examples</a></p><pre><code>import Link from 'next/link'
import { Wrap, StyledLink, StyledSvg } from './styles'
import { Props } from './types'

type Props = {
  readonly className?: string
  readonly url: string
}

export const PoweredBy = ({ className, url }: Props) =&gt; {
  return (
    &lt;Wrap className={className}&gt;
      powerd by
      &lt;Link
        href={url}
        passHref
      &gt;
        &lt;StyledLink target="_blank"&gt;
          &lt;StyledSvg
            width="512px"
            height="127px"
            viewBox="0 0 512 127"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            preserveAspectRatio="xMidYMid"
          &gt;
            ...
          &lt;/StyledSvg&gt;
        &lt;/StyledLink&gt;
      &lt;/Link&gt;
    &lt;/Wrap&gt;
  )
}</code></pre><p><br>ロゴのSVGはSVG Pornからダウンロードしました。<br><a href="https://svgporn.com/" target="_blank" rel="noopener noreferrer">https://svgporn.com/</a><br></p><h3 id="h67a7e18c1f">カスタマイズしたコンポーネントの呼び出し</h3><p>以下のように <code>Search</code> コンポーネントを書き換えて、呼び出します。<br>具体的には検索フォームコンポーネントは<code>connectSearchBox</code> で、検索結果コンポーネントは <code>connectHits</code>  でラップします。<br>あとはそれをデフォルトのコンポーネントと同じように配置するだけ。</p><pre><code>import {
  Wrap,
  Title,
  Text,
  StyledSearchInput,
  StyledSearchResults,
} from './styles'
import algoliasearch from 'algoliasearch/lite'
import { MultipleQueriesQuery } from '@algolia/client-search'
import {
  InstantSearch,
  Configure,
  connectSearchBox,
  connectHits,
} from 'react-instantsearch-dom'
import { Props } from './types'

export const Search = ({ className }: Props) =&gt; {
  // ここ2行追記
  const CustomSearchBox = connectSearchBox(StyledSearchInput)
  const CustomHits = connectHits(StyledSearchResults)
  const algoliaClient = algoliasearch(
    process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID || '',
    process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY || ''
  )
  const indexName = 'your index name'

  const empty = {
    hits: [],
    nbHits: 0,
    nbPages: 0,
    page: 0,
    processingTimeMS: 0,
  }

  const searchClient = {
    ...algoliaClient,
    search(requests: MultipleQueriesQuery[]) {
      if (requests.every(({ params }) =&gt; !params?.query)) {
        return Promise.resolve(empty)
      }
      return algoliaClient.search(requests)
    },
  }

  return (
    &lt;Wrap className={className}&gt;
      &lt;InstantSearch indexName={indexName} searchClient={searchClient}&gt;
        &lt;Configure hitsPerPage={5} /&gt;
        &lt;CustomSearchBox /&gt;
        &lt;CustomHits /&gt;
      &lt;/InstantSearch&gt;
    &lt;/Wrap&gt;
  )
}</code></pre><p><br><code>poweredBy</code> はCustomHitsの中に含めています。</p><pre><code>export const SearchResults = ({ className, hits }: Props) =&gt; {
  const CustomPoweredBy = connectPoweredBy(StyledPoweredBy)

  return (
    &lt;Wrap className={className}&gt;
      {hits.length &gt; 0 ? (
        &lt;List&gt;
          {hits.map((hit: HitDoc) =&gt; (
            &lt;Item key={hit.objectID}&gt;
              &lt;Link href={hit.url} passHref&gt;
                &lt;StyledLink&gt;{hit.title}&lt;/StyledLink&gt;
              &lt;/Link&gt;
              &lt;Description&gt;{hit.description}&lt;/Description&gt;
            &lt;/Item&gt;
          ))}
        &lt;/List&gt;
      ) : (
        &lt;EmptyContent&gt;
          &lt;EmptyContentText&gt;検索結果がありません。&lt;/EmptyContentText&gt;
        &lt;/EmptyContent&gt;
      )}
      &lt;CustomPoweredBy /&gt;
    &lt;/Wrap&gt;
  )
}</code></pre><p><br></p><h2 id="h1afe451c43">さいごに</h2><p>これで検索機能を追加できました。カスタマイズで時間かかりましたが、実装自体は思ったより簡単にできました。<br>個人で使う分には無料枠で十分ですし、すごく便利です。</p>

検索サービスのalgoliaを使ってNext.jsで作っている静的サイトに検索機能を追加しました

Next.js × algoliaで検索機能を実装する

<p>microCMSの記事取得件数はドキュメントに書いてるとおりデフォルトで10件です。<br>数値の指定に上限はないですが、レスポンスサイズが5MBを超えるとエラーになってしまいます。<br><a href="https://document.microcms.io/content-api/get-list-contents#h4cd61f9fa1" target="_blank" rel="noopener noreferrer">https://document.microcms.io/content-api/get-list-contents#h4cd61f9fa1</a><br><br>そのため、大量コンテンツを全件取得するにはoffsetを使って再帰的に10件ずつ取得し、それを繋げます。<br>記事の取得はmicroCMS SDKを使ってますが、10件取得できれば他の方法でもいいです。</p><pre><code>import { client } from '@/libs/client'
import { Blog } from '@/types/Blog'

const getAllContents = async (limit = 10, offset = 0): Promise&lt;Blog[]&gt; =&gt; {
  const data = await client.get({
    endpoint: 'blog',
    queries: { limit, offset },
  })

  if (data.offset + data.limit &lt; data.totalCount) {
    const contents = await getAllContents(data.limit, data.offset + data.limit)
    return [...data.contents, ...contents]
  }

  return data.contents
}

export { getAllContents }</code></pre><p><br>あとは取得したいページで呼び出せば、全件取得できます。<br></p><h2 id="h335a87b5ef">参考サイト</h2><ul><li><a href="https://zenn.dev/rabbit/scraps/0478726d184b2b" target="_blank" rel="noopener noreferrer">microCMSのコンテンツ情報を全件取得する</a></li></ul>

microCMSで全記事取得する方法です。

microCMSで全記事取得する

<p>Micromodal.jsは<a style="color:#357edd" href="https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal" target="_blank" rel="noopener noreferrer">WAI-ARIA guidelines</a>に準拠した実装をしていて、しかも1.9kbしかありません。<br><a href="https://micromodal.vercel.app/" target="_blank" rel="noopener noreferrer">https://micromodal.vercel.app/</a><br><br>ただ開いて閉じるだけのモーダルを作るのは難しくないですが、Micromodal.jsを使うとアクセシビリティの課題もクリアできます。具体的には以下の対応などをしています。</p><ul><li>モーダルを開いてる間は裏側のコンテンツを操作しない、フォーカスを当てない</li><li>モーダルを開いてる間はモーダル内にのみフォーカスが当たるようにする</li><li>escキーで閉じる</li></ul><p><br></p><h2 id="h91a938017a">サンプル</h2><p>CSSは自分で書く必要がありますが、逆にいうと余計なスタイリングがないので、カスタマイズしやすいです。</p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fmismith0227%2Fembed%2Fpreview%2FxxXoMxp%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DxxXoMxp&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fmismith0227%2Fpen%2FxxXoMxp&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="hd8d793506b">インストール</h2><p>以下でライブラリを追加します</p><pre><code>yarn add micromodal</code></pre><p><br></p><h2 id="hd0e9724409">HTML</h2><p>最低限ですが、以下のような構造です。</p><ul><li>モーダルにid名を指定しておく</li><li><code>data-micromodal-trigger</code> でid名を指定すると、そのモーダルのトリガーに</li><li><code>data-micromodal-close</code>  を指定するとそのタグでモーダルを閉じる</li></ul><pre><code>// 開くボタン
&lt;button data-micromodal-trigger="modal"&gt;Modal&lt;/button&gt;

// モーダル
&lt;div class="modal micromodal-slide" id="modal" aria-hidden="true"&gt;
&nbsp; &lt;div class="modal__overlay" tabindex="-1" data-micromodal-close="modal"&gt;
&nbsp; &nbsp; &lt;div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-title"&gt;
      // モーダル　コンテンツ
&nbsp; &nbsp; &nbsp; &lt;button aria-label="Close modal" data-micromodal-close="modal"&gt;Close&lt;/button&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; &lt;/div&gt;
&lt;/div&gt;</code></pre><p><br></p><h2 id="h20b4c98e2a">CSS</h2><p>CSSは以下です。ふわっと表示して、消えるアニメーションのコードも書いてます。</p><pre><code>.modal {
&nbsp; display: none;

&nbsp; &amp;.is-open {
&nbsp; &nbsp; display: block;
&nbsp; }

&nbsp; &amp;[aria-hidden="false"] {
&nbsp; &nbsp; .modal__overlay {
&nbsp; &nbsp; &nbsp; animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
&nbsp; &nbsp; }

&nbsp; &nbsp; .modal__container {
&nbsp; &nbsp; &nbsp; animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
&nbsp; &nbsp; }
&nbsp; }

&nbsp; &amp;[aria-hidden="true"] {
&nbsp; &nbsp; .modal__overlay {
&nbsp; &nbsp; &nbsp; animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
&nbsp; &nbsp; }

&nbsp; &nbsp; .modal__container {
&nbsp; &nbsp; &nbsp; animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
&nbsp; &nbsp; }
&nbsp; }

&nbsp; &amp;__container,
&nbsp; &amp;__overlay {
&nbsp; &nbsp; will-change: transform;
&nbsp; }

&nbsp; &amp;__overlay {
&nbsp; &nbsp; position: fixed;
&nbsp; &nbsp; top: 0;
&nbsp; &nbsp; left: 0;
&nbsp; &nbsp; right: 0;
&nbsp; &nbsp; bottom: 0;
&nbsp; &nbsp; background: rgba(0, 0, 0, 0.2);
&nbsp; &nbsp; display: flex;
&nbsp; &nbsp; justify-content: center;
&nbsp; &nbsp; align-items: center;
&nbsp; &nbsp; z-index: 100;
&nbsp; }

&nbsp; &amp;__container {
&nbsp; &nbsp; width: 94%;
&nbsp; &nbsp; max-width: 820px;
&nbsp; &nbsp; background: #fff;
&nbsp; &nbsp; padding: 24px;
&nbsp; }
}

@keyframes mmfadeIn {
&nbsp; from {
&nbsp; &nbsp; opacity: 0;
&nbsp; }
&nbsp; to {
&nbsp; &nbsp; opacity: 1;
&nbsp; }
}

@keyframes mmfadeOut {
&nbsp; from {
&nbsp; &nbsp; opacity: 1;
&nbsp; }
&nbsp; to {
&nbsp; &nbsp; opacity: 0;
&nbsp; }
}

@keyframes mmslideIn {
&nbsp; from {
&nbsp; &nbsp; transform: translateY(15%);
&nbsp; }
&nbsp; to {
&nbsp; &nbsp; transform: translateY(0);
&nbsp; }
}

@keyframes mmslideOut {
&nbsp; from {
&nbsp; &nbsp; transform: translateY(0);
&nbsp; }
&nbsp; to {
&nbsp; &nbsp; transform: translateY(-10%);
&nbsp; }
}</code></pre><p><br></p><h2 id="hd148c32f21">JavaScript</h2><p>JSは以下です。オプションがいくつか用意されています。</p><pre><code>import MicroModal from 'micromodal'

MicroModal.init({
  onShow: modal =&gt; console.info(`${modal.id} is shown`),
  onClose: modal =&gt; console.info(`${modal.id} is hidden`),
  openTrigger: 'data-custom-open',
  closeTrigger: 'data-custom-close',
  openClass: 'is-open',
  disableScroll: true,
  disableFocus: false,
  awaitOpenAnimation: false,
  awaitCloseAnimation: false,
  debugMode: true
});</code></pre><p><br></p><h3 id="h32a67f9128">オプション</h3><ul><li>onShow<ul><li>モーダルが開いた時に実行する関数</li></ul></li><li>onClose<ul><li>モーダルが閉じた時に実行する関数</li></ul></li><li>openTrigger<ul><li>モーダルを開くデータ属性をカスタマイズできる</li><li>デフォルトは <code>data-micromodal-trigger</code>  </li></ul></li><li>closeTrigger<ul><li>モーダルを閉じるデータ属性をカスタマイズできる</li><li>デフォルトは <code>data-micromodal-close</code>  </li></ul></li><li>openClass<ul><li>モーダルを開いた時にモーダルにつけるclass</li><li>デフォルトは <code>is-open</code>  </li></ul></li><li>disableScroll<ul><li>モーダルを開いてる間、ページのスクロールをしないようにする</li></ul></li><li>disableFocus<ul><li>モーダルを開いた時に、モーダル内のフォーカス可能な要素に自動でフォーカスしないようにする</li></ul></li><li>awaitOpenAnimation<ul><li>アニメーションを使ってモーダルを開くようにする</li></ul></li><li>awaitCloseAnimation<ul><li>アニメーションの終了を待ってから、モーダルを非表示にする</li></ul></li><li>debugMode<ul><li>trueにするとconsoleに表示される警告を抑制する</li></ul></li></ul><p><br>軽量でアクセシビリティに配慮されていて、使い方も簡単なのでおすすめです。<br></p>

軽量でアクセシビリティに配慮されたモーダルのプラグインMicromodal.jsを使う

軽量でアクセシビリティに配慮されたMicromodal.jsを使う

<p>まずはサンプルから。これはちょっと応用して、波を複数重ねたり、blend-modeを使ってます。<br>簡単な実装の考え方を書いた後に、シンプルなパターンも下の方に貼っておきます。</p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fmismith0227%2Fembed%2Fpreview%2FZEKEjoE%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DZEKEjoE&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fmismith0227%2Fpen%2FZEKEjoE&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="hf031c5e696">実装方法</h2><p>実装方法の考え方は以下の通りです。</p><ul><li>viewBoxの横幅いっぱい(100%)に波の形状を作る</li><li>その波形をviewBoxをはみ出して、もう一つ作る（200%分）</li><li>CSSアニメーションでviewBox内の<code>path</code> を<code>transform: translateX(-100%)</code>  で左に100%動かす<ul><li>左に100%動かすとちょうど2つ目の波形の右端まで移動する</li></ul></li><li>そのアニメーションを <code>infinite</code>  で無限に繰り返す</li></ul><p><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/24ef633d71e5436cb6f6237df8ece171/svg.png" alt="" width="1200" height="300"><br></p><h2 id="hac87aa97b4">波形の作り方</h2><p>以下のようなsvgを作ります。</p><ul><li>viewBox は以下の例だと、&nbsp;<code>横 : 縦</code>&nbsp;が&nbsp;<code>12 : 1.8</code>&nbsp;の画像を作ってると思ってください。</li><li>pathについて<ul><li>X 座標は 30 おきに指定してます。</li><li>30 おきに Y 座標の位置を指定することで波線を表現しています。</li><li>なので基本的には Y 座標の方を変更して、波の高さを調整してください。</li><li>注意点としては 0 は下ではなく、viewBox の上です。</li></ul></li><li>SVG の左端(0)の高さと右端(240)の Y 座標は揃っていないと、途切れてるように見えてしまいます。</li></ul><pre><code>&lt;svg viewBox="0 0 120 18" class="svg-wave"&gt;
  &lt;path
    class="wave"
    d="M 0,0 C 30,0 30,5 60,5 90,5 90,0 120,0 150,0 150,5 180,5 210,5 210,0 240,0 v 28 h -240 z"
  /&gt;
&lt;/svg&gt;</code></pre><p><br>アルファベットの意味は以下です。 気になったら調べてください</p><ul><li>M・・・開始点</li><li>C・・・開始点から終点までのベジェ曲線を描く</li><li>z・・・終点</li></ul><p>参考&nbsp;<a href="https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/d" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/d</a>&nbsp;<br></p><h2 id="h6b3f65e230">CSSアニメーション</h2><p>波形ができれば後はアニメーションさせるだけです。<br><code>path</code>  に指定している <code>.wave</code>  に対してアニメーションを指定すると、波打ってるように見えます。</p><pre><code>.wave {
&nbsp; animation: wave 3s cubic-bezier(0.55, 0.5, 0.45, 0.5);
&nbsp; animation-iteration-count: infinite;
&nbsp; fill: #000;
}

@keyframes wave {
&nbsp; 100% {
&nbsp; &nbsp; transform: translateX(-100%);
&nbsp; }
}</code></pre><p><br></p><h2 id="h90487f515d">シンプルな波</h2><p>最後にシンプルな波のサンプルです。</p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fmismith0227%2Fembed%2Fpreview%2FVwMJmoY%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DVwMJmoY&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fmismith0227%2Fpen%2FVwMJmoY&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p>

SVGを使って波打ってるような滑らかなアニメーションを簡単に実装する方法です。

SVGで波形のアニメーションを簡単に実装する

<p>Next.jsとmicroCMSで作っているブログにプレビュー（下書き）機能をつけてみました。<br></p><h2 id="h293f170a56">仕組み</h2><p>仕組みとしては以下です。</p><ul><li>microCMSの管理画面からプレビューを開く</li><li>プレビュー関数が動く</li><li><code>PreviewData</code>  に <code>draftkey</code>  をセットし、プレビュー用のcookieが発行され、ブログ画面にリダイレクト</li><li>画面に表示</li></ul><p><br></p><h2 id="haf8848a269">プレビュー用関数</h2><p><code> pages/api/preview/index.ts</code>  に以下を書きます。</p><pre><code>import { NextApiRequest, NextApiResponse } from 'next'
import { client } from '@/libs/client'

const preview = async (req: NextApiRequest, res: NextApiResponse) =&gt; {
  const { draftKey, slug } = req.query

  if (typeof draftKey !== 'string' || typeof slug !== 'string') {
    res.status(404).end()
    return
  }

  const data = await client.get({
    endpoint: 'blog',
    contentId: slug,
    queries: {
      draftKey,
    },
  })

  if (!data) {
    return res.status(401).json({ message: 'Invalid slug' })
  }

  res.setPreviewData({ ...data, draftKey })
  res.writeHead(307, { Location: `/blog/${data.category.id}/${data.id}` })
  res.end('Preview mode enabled')
}

export default preview</code></pre><p><br></p><h2 id="h4a30be2029">ブログコンポーネントの修正</h2><p><code>getStaticProps</code>  を修正します。必要な箇所だけ書き出してます。</p><pre><code>export const getStaticProps: GetStaticProps&lt;StaticProps&gt; = async (context) =&gt; {
  const { params, previewData } = context
  if (!params?.category || !params?.id) {
    throw new Error('Error: ID not found')
  }

  const draftKey = isDraft(previewData)
    ? { draftKey: previewData.draftKey }
    : {}

  try {
    const id = toStringId(params.id)
    const data = await client.get({
      endpoint: 'blog',
      contentId: id,
      queries: {
        ...draftKey,
      },
    })

    return {
      props: {
        blog: data,
        ...draftKey,
      },
    }
  } catch (e) {
    return { notFound: true }
  }
}</code></pre><p><br></p><h2 id="h2252f8f848">プレビュー有効のテキストを表示</h2><p>現在プレビュー中ですという文言を表示する</p><pre><code>{draftKey &amp;&amp; (
    &lt;div&gt;
      現在プレビューモードで閲覧中です。
      &lt;Link href={`/api/exitPreview`}&gt;
        &lt;a&gt;プレビューを解除&lt;/a&gt;
      &lt;/Link&gt;
    &lt;/div&gt;
)}</code></pre><p><br></p><h2 id="h8f798e9163">プレビュー無効の関数</h2><p><code>pages/api/exitpreview/index.ts</code>  にプレビューを止めるための関数を書きます。</p><pre><code>import { NextApiRequest, NextApiResponse } from 'next'

const exitPreview = async (
  req: NextApiRequest,
  res: NextApiResponse
): Promise&lt;void&gt; =&gt; {
  res.clearPreviewData()
  res.writeHead(307, { Location: `/` })
  res.end('Preview mode disabled')
}

export default exitPreview</code></pre><p><br></p><h2 id="he153fcd751">micorCMSの設定</h2><p>管理画面の「API設定」→「画面プレビュー」にURLを設定します。</p><pre><code>https://your-domain.com/api/preview?slug={CONTENT_ID}&amp;draftKey={DRAFT_KEY}</code></pre><p><br></p><h2 id="hcdb5e3e560">プレビュー</h2><p>これで準備できたので、記事を書いて下書き保存をし、プレビューボタンを押すと、公開前に見た目のチェックができます。</p>

Jamstackなサイトでプレビュー機能をつけてみました

Next.js × microCMSのブログにプレビュー機能をつける

<p>ブログでよくある関連記事の表示です。<br>このブログでも下の方に「Read next」というセクションを用意しています。<br><br>microCMSで関連記事を表示するには、複数コンテンツ参照を使って表示したい記事を選択します。自分で記事を選ぶので、関連記事というよりは読んで欲しい記事を選ぶといいと思います。<br></p><h2 id="hae6947d5ce">microCMS</h2><p>「API設定」→「APIスキーマ」で関連記事のフィールドを追加します。種類は「複数コンテンツ参照」を選択し、表示したいAPIを選択します。<br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/6aa1234cc6b4487ca874eceda0cfcc36/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-01-15%2022.28.48.png" alt="" width="1710" height="590"><br>ここではブログというAPIでその関連記事を表示したいので、ブログを選択します。<br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/aa6ec078acfe47f79ac25034e71332ec/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-01-15%2022.29.11.png" alt="" width="974" height="476"><br>これで記事を書くページに関連記事の項目ができるので、表示したい記事を選択し、記事を公開したらOKです。<br></p><h2 id="haab1fd6475">Next.js</h2><p>上記の設定をすると、記事のAPIに <code>related_post</code>  が追加されていて、中身は記事のスキーマと同じなので、それを表示するだけです。このブログで作っているReadNextコンポーネントでの実装例です。</p><pre><code>import Link from 'next/link'
import { Container, List, Item, StyledLink, Title, Date } from './styles'
import { Props } from './types'
import dayjs from 'dayjs'

export const ReadNext = ({ readNestPosts, className }: Props) =&gt; {
  return (
    &lt;Container className={className}&gt;
      &lt;Title&gt;Read next&lt;/Title&gt;
      &lt;List&gt;
        {readNestPosts.map((item) =&gt; {
          return (
            &lt;Item key={item.id}&gt;
              &lt;Date&gt;{dayjs(item.createdAt).format('YYYY年M月D日')}&lt;/Date&gt;
              &lt;Link href={`/blog/${item.category.id}/${item.id}`} passHref&gt;
                &lt;StyledLink&gt;{item.title}&lt;/StyledLink&gt;
              &lt;/Link&gt;
            &lt;/Item&gt;
          )
        })}
      &lt;/List&gt;
    &lt;/Container&gt;
  )
}</code></pre><p><br>自動で関連記事を表示してくれるわけではないですが、簡単に実装できます。</p>

microCMSの複数コンテンツ参照を使って関連記事を表示する方法です。

Next.js × microCMSで関連記事を表示

<p>ブログを書いてて面倒なのがOGP画像の作成です。デザイナーならササっと作れるかもしれませんが、エンジニアではそういきません。<br>そこでZennやはてなブログであるような、ブログのタイトルをOGP画像として生成するのをやってみました。<br><br>完成イメージはこちらです。<br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/e831d4cbd0624800ac9b0cc2452709d8/ogp%20(1).png" alt="" width="1200" height="630"><br></p><h2 id="h43b7545a9a">ライブラリインストール</h2><p>node-canvasを利用します。<br><a href="https://github.com/Automattic/node-canvas" target="_blank" rel="noopener noreferrer">https://github.com/Automattic/node-canvas</a><br><br> <code>node-canvas</code>  が <code>2.6.0</code>  で固定しないと、Vercelのデプロイ時にエラーになるため、<code>2.6.0</code>  を使用します。</p><pre><code>yarn add 'canvas@2.6.0'</code></pre><p><br>2022年1月現在でバージョン指定しないと <code>2.8.0</code>  がインストールされますが、そのままデプロイするとVercelのFunctionsのログで以下のエラーがでます。</p><pre><code>Error: /lib64/libz.so.1: version `ZLIB_1.2.9' not found</code></pre><p>VercelはAWSのLambdaを使っていて、node-canvasがバージョンアップにより容量が増えて、容量超過しデプロイできないそうです。確かに <code>2.8.0</code>  でデプロイしたときは、Function DetailsのSizeが50MBパンパンで赤くなってましたが、<code>2.6.0</code>  に下げると、31MBほどに下がっていました。<br></p><h2 id="hc5232a23b8">ディレクトリ構成・追加ファイル</h2><p>今回主に使用するファイルを書き出したディレクトリ構成です。<br>pages以下のディレクトリ構成は、プロジェクトに合った構成にしてください。</p><pre><code>.
├── canvas_lib64 （本番環境デプロイで必要なファイル）
│&nbsp;&nbsp; ├── libblkid.so.1
│&nbsp;&nbsp; ├── libfontconfig.so.1
│&nbsp;&nbsp; ├── libmount.so.1
│&nbsp;&nbsp; ├── libpixman-1.so.0
│&nbsp;&nbsp; └── libuuid.so.1
├── fonts （OGP生成時のフォント指定する場合に必要）
│&nbsp;&nbsp; └── NotoSansJP-Bold.otf
├── pages（OGPを使う個別記事ページとそれに対応するOGPのAPI Router）
│&nbsp;&nbsp; ├── api
│&nbsp;&nbsp; │&nbsp;&nbsp; └── blog
│&nbsp;&nbsp; │&nbsp;&nbsp;     └── [category]
│&nbsp;&nbsp; │&nbsp;&nbsp;         └── [id]
│&nbsp;&nbsp; │&nbsp;&nbsp;             └── ogp.ts
│&nbsp;&nbsp; ├── blog
│&nbsp;&nbsp; │&nbsp;&nbsp; ├── [category]
│&nbsp;&nbsp; │&nbsp;&nbsp; │&nbsp;&nbsp; ├── [id]
│&nbsp;&nbsp; │&nbsp;&nbsp; │&nbsp;&nbsp; │&nbsp;&nbsp; └── index.tsx</code></pre><p><br></p><h2 id="h125a58c73e">フォント</h2><p>フォントはライセンスに注意して、好きなフォントファイルをfonts以下に配置しておきましょう。<br>Googleフォントなどを使うといいと思います。<br><a href="https://fonts.google.com/" target="_blank" rel="noopener noreferrer">https://fonts.google.com/</a><br></p><h2 id="h78df02fd38">API</h2><p>OGP画像を生成するAPIです。<br>パラメータから記事IDを取得し、microCMSからそのidの記事タイトルを取得し、Canvasに描画しています。</p><pre><code>import { client } from '@/libs/client'
import { NextApiRequest, NextApiResponse } from 'next'
import { createCanvas, Canvas, registerFont } from 'canvas'
import * as path from 'path'

interface SeparatedText {
  line: string
  remaining: string
}

const createTextLine = (canvas: Canvas, text: string): SeparatedText =&gt; {
  const context = canvas.getContext('2d')
  const MAX_WIDTH = 1000 as const

  for (let i = 0; i &lt; text.length; i += 1) {
    const line = text.substring(0, i + 1)

    if (context.measureText(line).width &gt; MAX_WIDTH) {
      return {
        line,
        remaining: text.substring(i + 1),
      }
    }
  }

  return {
    line: text,
    remaining: '',
  }
}

const createTextLines = (canvas: Canvas, text: string): string[] =&gt; {
  const lines: string[] = []
  let currentText = text

  while (currentText !== '') {
    const separatedText = createTextLine(canvas, currentText)
    lines.push(separatedText.line)
    currentText = separatedText.remaining
  }
  return lines
}

const createOgp = async (
  req: NextApiRequest,
  res: NextApiResponse
): Promise&lt;void&gt; =&gt; {
  const { id } = req.query

  const data = await client.get({
    endpoint: 'blog',
    contentId: String(id),
  })

  const WIDTH = 1200 as const
  const HEIGHT = 630 as const
  const DX = 0 as const
  const DY = 0 as const
  const canvas = createCanvas(WIDTH, HEIGHT)
  const ctx = canvas.getContext('2d')

  registerFont(path.resolve('./fonts/NotoSansJP-Bold.otf'), {
    family: 'NotoSansJP',
  })

  ctx.fillStyle = '#FFF'
  ctx.fillRect(DX, DY, WIDTH, HEIGHT)

  ctx.font = '60px NotoSansJP'
  ctx.fillStyle = '#000000'
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'

  const lines = createTextLines(canvas, data.title)
  lines.forEach((line, index) =&gt; {
    const y = 314 + 120 * (index - (lines.length - 1) / 2)
    ctx.fillText(line, 600, y)
  })

  const buffer = canvas.toBuffer()

  res.writeHead(200, {
    'Content-Type': 'image/png',
    'Content-Length': buffer.length,
  })
  res.end(buffer, 'binary')
}

export default createOgp</code></pre><p><br>ローカルでここまで書くと、 <code>http://localhost:3000/api/blog/{category</code><em><code>name}/[blog</code></em><code>id]/ogp</code> をブラウザで開くとタイトルが描画された画像が生成されてると思います。<br></p><h2 id="h9b5218e792">記事でOGP画像を設定する</h2><p>まずは環境変数でベースのURLを指定します。これはOGP画像を絶対パスで指定するのですが、ローカルと本番でURLが異なるためです。 <code>.env.development.local</code>  や <code>.env.local</code>  に以下を指定、もしくは追記します。</p><pre><code>NEXT_PUBLIC_BASE_URL="http://localhost:3000"</code></pre><p><br>人によって記事ページの書き方違うと思いますが、 <code>http://localhost:3000/api/blog/{categoryname}/[blogid]/ogp</code>  のlocalhostの部分を環境変数に変えて、取得したOGP画像をmetaタグに指定すればOKです。<br>以下参考までに書いておきます。</p><pre><code>const BlogDetailPage: NextPage&lt;PageProps&gt; = (props) =&gt; {
  const { blog, draftKey, body, category, currentCategory } = props

  const meta = {
    path: 'blog',
  }

  const ogpImageUrl = `${process.env.NEXT_PUBLIC_WEB_URL}/api/blog/${currentCategory}/${blog.id}/ogp`

  return blog ? (
    &lt;Layout path={meta.path} disableLoading&gt;
      &lt;Seo
        title={blog.title ? blog.title : ''}
        description={blog.description ? blog.description : ''}
        path={meta.path}
        ogpImageUrl={ogpImageUrl}
      /&gt;
      &lt;BlogDetailContent
        data={blog}
        body={body}
        category={category}
        currentCategory={currentCategory}
      /&gt;
    &lt;/Layout&gt;
  ) : (
    &lt;div&gt;no content&lt;/div&gt;
  )</code></pre><h3 id="hc2975b025c">seo.tsx</h3><p>metaタグに取得したパスを指定しておきます。</p><pre><code>&lt;meta property="og:image" key="ogImage" content={ogpImageUrl} /&gt;
&lt;meta
  name="twitter:card"
  key="twitterCard"
  content="summary_large_image"
/&gt;
&lt;meta name="twitter:image" key="twitterImage" content={ogpImageUrl} /&gt;</code></pre><p><br></p><h2 id="h285d874193">本番デプロイ</h2><p>Vercelでデプロイします。</p><h3 id="hd2e4a75f9f">環境変数</h3><p>まずは環境変数を追加しておきます。</p><pre><code>NEXT_PUBLIC_WEB_URL: サイトドメイン</code></pre><p><br></p><h3 id="h87f460f186">canvas_lib64を追加</h3><p>ルートにcanvas_lib64ディレクトリを追加し、以下の5つのファイルを配置しておきます。<br><a href="https://github.com/mismith0227/mismith.me/tree/master/canvas_lib64" target="_blank" rel="noopener noreferrer">https://github.com/mismith0227/mismith.me/tree/master/canvas_lib64</a><br></p><h3 id="h010248e8b0">package.json</h3><p>package.jsonの <code>scripts</code>  に以下を追加しておきます。</p><pre><code>"now-build": "cp canvas_lib64/*so.1 node_modules/canvas/build/Release/ &amp;&amp; yarn build"</code></pre><p><br>これでデプロイすればOGPが生成されるはずです。<br></p><h2 id="h9679fe45f0">Twitter Card Validator</h2><p>以下でOGP画像のバリデーションができます。<br><a href="https://cards-dev.twitter.com/validator" target="_blank" rel="noopener noreferrer">https://cards-dev.twitter.com/validator</a><br><br>以下のメッセージが出た時は、robots.txtにapi以下をdisableにする記述があるかもしれません</p><pre><code>specified by the 'twitter:image' metatag may be restricted by the site's robots.txt file, which will prevent Twitter from fetching it.</code></pre><p><br></p><h2 id="h335a87b5ef">参考サイト</h2><p>この記事ではテキストを描画するだけでしたが、背景が画像も設定したい場合は参考サイトで紹介されています。</p><ul><li><a href="https://ji23-dev.com/blogs/nextjs-ogp" target="_blank" rel="noopener noreferrer">【Next.js × Vercel】OGP画像を動的生成してみた</a></li><li><a href="https://zenn.dev/dala/books/nextjs-firebase-service/viewer/ogp" target="_blank" rel="noopener noreferrer">Next.jsとFirebaseで質問箱のようなサービスを作る - OGP用画像を作成する -</a></li><li><a href="https://zenn.dev/tiwu_dev/articles/68d58d4ab710af" target="_blank" rel="noopener noreferrer">Next.js + Vercel で OGP の画像を動的に生成する</a></li><li><a href="https://github.com/Automattic/node-canvas/issues/1779" target="_blank" rel="noopener noreferrer">Error: /lib64/libz.so.1: version `ZLIB</a><a href="https://github.com/Automattic/node-canvas/issues/1779" target="_blank" rel="noopener noreferrer"><em>1.2.9' not found (required by /opt/nodejs/node</em></a><a href="https://github.com/Automattic/node-canvas/issues/1779" target="_blank" rel="noopener noreferrer">modules/canvas/build/Release/libpng16.so.16)</a></li><li><a href="https://offiter.net/blogs/k7xwk933ohhy" target="_blank" rel="noopener noreferrer">node-canvasをvercelにdeployしたときのerror</a></li></ul>

ブログのタイトルをCanvasに描画し、OGP画像として生成する方法です

Next.js × microCMS × VercelでOGP画像をブログのタイトルで自動生成する

<p>ブログの記事が増えた場合に備えてNext.jsとmicroCMSでページネーションを作りました。<br></p><h2 id="h00b8af9eb7">仕様</h2><p>仕様としては以下です。</p><ul><li>「次へ（&lt;）」「前へ（&gt;）」ボタン</li><li>1ページ目は「次へ」を非表示、最終ページは「前へ」を非表示</li><li>現在ページから±3ページ以上は非表示にし、三点リーダーを表示する</li><li>1ページ目と最終ページは常に表示</li><li>現在ページはアクティブ状態のスタイルを当てる</li></ul><p><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/7d6222238ef64c30976116afd2c933e3/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-01-11%2023.25.11.png" alt="" width="1064" height="312"><br></p><h2 id="hcf2b66e679">コード</h2><p>必要なデータは全記事数と現在ページの数です。<br>microCMSでは記事を取得するAPIで <code>totalCount</code>  を取得できるので全記事数はこの <code>totalCount</code>  を使います。<br>現在のページ数はパラメータから取得するようにしておきます。<br><br>それをPaginationコンポーネントに流し込んでおきます。Paginationのコードは省略してますが、こんな感じです。</p><pre><code>export const Pagination = ({
  totalCount,
  currentPage,
  className,
  currentCategory,
}: Props) =&gt; {
  const range = (start: number, end: number) =&gt;
    [...Array(end - start + 1)].map((_, i) =&gt; start + i)

  // ここはカテゴリでパスを変えてるので、必要な人だけ。
  const paginationPath = currentCategory
    ? `/blog/${currentCategory}/page`
    : `/blog/page`

  // BLOG_PER_PAGEは1ページに表示する件数。
  const lastPage = Math.ceil(totalCount / BLOG_PER_PAGE)

  return (
    &lt;Container className={className}&gt;
      {currentPage !== 1 &amp;&amp; (
        &lt;Item&gt;
          &lt;Link href={`${paginationPath}/${currentPage - 1}`} passHref&gt;
            &lt;StyledLink&gt;
              &lt;StyledChevron /&gt;
            &lt;/StyledLink&gt;
          &lt;/Link&gt;
        &lt;/Item&gt;
      )}

      &lt;Item key={1}&gt;
        &lt;Link href={`${paginationPath}/${1}`} passHref&gt;
          &lt;StyledLink isCurrent={currentPage === 1}&gt;{1}&lt;/StyledLink&gt;
        &lt;/Link&gt;
      &lt;/Item&gt;
      {range(2, lastPage - 1).map((number, index) =&gt; {
        return Math.abs(currentPage - number) &lt; 3 ? (
          &lt;Item key={index}&gt;
            &lt;Link href={`${paginationPath}/${number}`} passHref&gt;
              &lt;StyledLink isCurrent={currentPage === number}&gt;
                {number}
              &lt;/StyledLink&gt;
            &lt;/Link&gt;
          &lt;/Item&gt;
        ) : (
          Math.abs(currentPage - number) === 3 &amp;&amp; &lt;Item key={index}&gt;...&lt;/Item&gt;
        )
      })}
      &lt;Item key={lastPage}&gt;
        &lt;Link href={`${paginationPath}/${lastPage}`} passHref&gt;
          &lt;StyledLink isCurrent={currentPage === lastPage}&gt;
            {lastPage}
          &lt;/StyledLink&gt;
        &lt;/Link&gt;
      &lt;/Item&gt;

      {currentPage !== lastPage &amp;&amp; (
        &lt;Item&gt;
          &lt;Link href={`${paginationPath}/${currentPage + 1}`} passHref&gt;
            &lt;StyledLink&gt;
              &lt;StyledChevron rotate={180} /&gt;
            &lt;/StyledLink&gt;
          &lt;/Link&gt;
        &lt;/Item&gt;
      )}
    &lt;/Container&gt;
  )
}</code></pre><p><br></p><h2 id="h53c24a8f45">全体的なロジック</h2><ul><li>前へ次へボタン<ul><li>現在ページが <code>1</code>  の時は「前へ」を非表示、現在ページが最終ページの時は「次へ」を非表示。</li></ul></li><li>1ページ目と最終ページ<ul><li>この二つは常に表示</li></ul></li><li>2~最終ページ手前まで<ul><li><code>range</code>  をループさせてまずは全部表示する</li><li><code> Math.abs(現在ページ - ページ数）</code>  から絶対値を出す</li><li>絶対値が3の場合は三点リーダー（...）にする</li><li>絶対値が4以上の場合は非表示</li></ul></li></ul><p><br>全体のソースコードは<a href="https://github.com/mismith0227/mismith.me/blob/636371cbcbd8aa979b83c08c0327bda0cedf91cd/components/molecules/Pagination/index.tsx" target="_blank" rel="noopener noreferrer">こちら</a>です。<br><br></p>

Next.js × microCMSで前へ次へとページが多い場合に3点リーダーを表示するページネーションを作ります

Next.js × microCMSでページネーションを自作する

<p>例年、アドベントカレンダーで今年撮った写真があるんですが、今年は誰もカレンダー立ててないし、自分で立てる気もなかったので、勝手に書くことにしました。<br><br>去年のブログはこちら。<br><a href="https://blog.mismith.me/entry/2020/12/01/092436" target="_blank" rel="noopener noreferrer">意外と写真を撮ってた2020年 ~今年撮った写真Advent Calendar 2020~</a><br></p><h2 id="h9048474d89">撮った写真</h2><p>特に気に入ってる写真をピックアップしました。<br>ピックアップした印象としては、ノージャンルで撮りたいものを撮っていて、中でもストリートフォトの割合が多い傾向にありますが、今年はポートレートが多かったです。<br>デジタルとフィルムごちゃまぜですが、ぜひ見てください。<br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/adbb367e34c34c5e92fa71eb8aa39715/2021-03-19_15-11-26_000.jpeg" alt="" width="959" height="1447"><br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/c52947ed82d54993ad8eb82bf7a57df8/2021-09-04_11-08-42_000.jpeg" alt="" width="1345" height="892"><br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/2ca5fa23f7bc4fa88f9debf30edc76be/2021-07-18_17-32-01_000%20(2021-07-19T01_55_42.278).jpeg" alt="" width="1080" height="1616"><br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/6c4fb0efc39647fc90a2cf4b094f99ae/2021-08-16_17-04-13_000.jpeg" alt="" width="1469" height="975"><br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/8e2dd011f9964731a54d6495e480f4ee/2021-04-24_18-17-53_000.jpeg" alt="" width="1080" height="1616"><br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/1ec3c7c050aa4d9588f59f17537b84ba/%E5%86%99%E7%9C%9F%202021-04-01%2020%2039%2056.jpg" alt="" width="1582" height="1074"><br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/617df5dddfad485ca743e557715cdbfb/2021-08-16_15-43-36_000.jpeg" alt="" width="1357" height="901"><br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/cc8344dc3943419582e78ef2c570cf80/19400004.jpg" alt="" width="1818" height="1228"><br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/7b9b26b940df40d2b80a9510a8aed9b6/2021-05-08_14-55-49_000.jpeg" alt="" width="1080" height="1616"><br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/c1dc60800e93401c800b1c18afe27d0d/2021-08-07_18-36-52_000.jpeg" alt="" width="1080" height="1616"><br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/47089f4dcda74240bf5ee4d9c3f61a55/2021-08-28_16-21-13_000.jpeg" alt="" width="1558" height="1034"></p><h2 id="h415a2fa409">展示</h2><p>今年は2,3年ぶりに展示に写真を出展しました。<br>特に京橋にあるRoom305の今年を締めくくる展示では、投票が行われるのですが嬉しいことに一番投票をしてもらいました。</p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【ザ・ベスト展2021】<br>5日間で107名の方に投票頂きました。ありがとうございます。<br><br>以下開封結果、今年のベスト3です！<br>1位21票㉓番ミスミタクマ<br>2位19票⑩番パイソン中村<br>3位18票㊱番RYU<br><br>ご来場頂いた皆様ありがとうございました！ <a href="https://t.co/CYl5kkZVqh">https://t.co/CYl5kkZVqh</a> <a href="https://t.co/613mMdPaEd">pic.twitter.com/613mMdPaEd</a></p>&mdash; Gallery Room305 (@gallery_room305) <a href="https://twitter.com/gallery_room305/status/1475056934256791555?ref_src=twsrc%5Etfw">December 26, 2021</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br><br>出展した写真はこの水溜りに映ったカラスの写真です。<br>この写真はその辺の路地で撮りました。通り雨の後にできた水溜りを見ていると、近くにカラスが飛んでいるのがわかったので、うまく飛んできたらいいなとしばらく待っていたら、ちょうど飛んできてくれました。<br><img src="https://images.microcms-assets.io/assets/4c8e21603bf74d96a440d08e6e40f61e/c52947ed82d54993ad8eb82bf7a57df8/2021-09-04_11-08-42_000.jpeg" alt="" width="1345" height="892"><br></p><h2 id="h21722e9580">来年</h2><p>来年も写真は撮っていきたいですが、2,3ヶ月全く写真を撮りに行けてないので、来年は時間をとれる環境に変えて写真活動再開したいと思っています。<br>また、今まで撮ってこなかったジャンルや撮り方にも挑戦できたらいいなと思います。<br>性格的に同じことをしていると飽きてしまうので、ちょっとずつ変化をつけて楽しんでいこうと思います。<br><br>機材は相変わらずRX100とRollei B35の小型軽量装備でしたが、来年もし写真を今年以上に頑張るなら、フジのAPS-C機いいなと思ってます。もしくはフルサイズに戻るか。<br><br>他に撮った写真は500pxで公開してるので、ぜひ見てください。<br>それでは良いお年を。<br><a href="https://500px.com/p/mismith2216?view=photos" target="_blank" rel="noopener noreferrer">https://500px.com/p/mismith2216?view=photos</a></p>

今年撮った写真のまとめです。去年よりは写真撮りに行った気がするけど、最後は忙しくて全然行けなかった

今年撮った写真2021

<p>共同でCSSを書く時に、ルールが決まっていないとどうしてもプロパティの書き順がばらばらになってしまいます。<br>そこでStylelintとPrettierでアルファベット順に整形してみます。<br><br>前提としてSassを使った方法です。<br>テンプレート作ってるので、よかったら参考にしてください<br><a href="https://github.com/mismith0227/web_template_gulp" target="_blank" rel="noopener noreferrer">https://github.com/mismith0227/web_template_gulp</a><br></p><h2 id="hc65079daa4">必要なパッケージを追加</h2><p>以下のコマンドを打ちます。</p><pre><code>yarn add stylelint stylelint-config-prettier stylelint-config-recommended-scss stylelint-order stylelint-prettier stylelint-scss</code></pre><p><br></p><h2 id="h97e63be105">.stylelintrc.jsonを作成</h2><p>.stylelintrc.jsonを作り以下のように書きます。</p><pre><code>{
  "plugins": ["stylelint-order"],
  "rules": {
    "order/properties-alphabetical-order": true
  },
  "extends": [
    "stylelint-config-recommended-scss",
    "stylelint-prettier/recommended",
    "stylelint-config-prettier"
  ],
  "ignoreFiles": ["./src/scss/foundation/_reset.scss"]
}</code></pre><p><br></p><h2 id="hbcb7e85cd5">package.jsonにlintのコマンド追加</h2><p>package.jsonのscriptsにlintのコマンドを追加します。</p><pre><code>"scripts": {
  "dev": "npx gulp dev",
  // 省略
  "lint:css": "stylelint --fix **/*.scss" // 追加
},</code></pre><p><br></p><h2 id="h5cd5805259">自動フォーマットしてみる</h2><p><code>yarn lint:css</code>  を実行するとアルファベット順に自動でフォーマットしてくれます</p><pre><code>body {
  background-color: $color--body;
  margin: 0;
  padding: 0;
  letter-spacing: 0.05em;
}

// コマンド実行後 ↓
body {
  background-color: $color--body;
  letter-spacing: 0.05em;
  margin: 0;
  padding: 0;
}</code></pre><p><br></p><h2 id="h47ef8c9cea">VSCoceで保存時にフォーマットする</h2><p>ここまでできたらいいですが、残念ながらうまく動いていないです。<br>調べてみると、拡張機能の <code>vscode-stylelint</code> を追加し、vscodeのsetting.json以下を書けばいいという記事はたくさんあるのですが、うまく動かないんですよね...。<br><a href="https://github.com/stylelint/vscode-stylelint#editorcodeactionsonsave" target="_blank" rel="noopener noreferrer">vscode | editor.codeActionsOnSave</a></p><pre><code>{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  }
}</code></pre><p><br>stylelint-plusという拡張機能を使えば保存時に自動フォーマットされましたが、できればStylelint公式の拡張機能だけで実現したいし、保存時の自動フォーマットはできればやりたいぐらいなので、保存自動フォーマットは現状は取り入れていないです。</p>

Stylelint + PrettierでCSSプロパティをアルファベット順で自動フォーマットする方法です。

Blog