<h2 id="h9707d3a59a">概要</h2><a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">microCMS</a> ではブログなどの記事データをリッチエディタで入稿することが可能です。ただ、APIではそれらが生HTMLで返ってきます。 <code>dangerouslySetInnerHTML</code> に渡せばレンダリングされますが、以下のようなケースもあると思います。 <ul><li>Chakra UI などの定義されているコンポーネントを利用したい</li><li>class指定してグローバルCSSを書きたくない</li><li>XSSの危険性があるから<code>dangerouslySetInnerHTML</code>を利用したくない</li></ul> 今回はこれらを解決する<a href="https://github.com/remarkablemark/html-react-parser" target="_blank" rel="noopener noreferrer">html-react-parser</a>を利用していきます。サンプルコードは<a href="https://github.com/IshinoJun/next-html-react-parser" target="_blank" rel="noopener noreferrer">こちら</a>。microCMSの取得処理は省略しています。 <h2 id="hfe5a8eaaf7">実行環境</h2>サンプルとして、<a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer">Next.js</a> と <a href="https://chakra-ui.com/" target="_blank" rel="noopener noreferrer">Chakra UI</a> を利用します。 <h2 id="h941dee673d"><a style="background-color:#ffffff" href="https://github.com/remarkablemark/html-react-parser" target="_blank" rel="noopener noreferrer">html-react-parser</a>とは</h2><a style="background-color:#ffffff" href="https://github.com/remarkablemark/html-react-parser" target="_blank" rel="noopener noreferrer">html-react-parser</a> はReactで生HTMLを自由に加工することが可能になります。例としては、以下のように生HTMLをReactのコンポーネントに変換できます。<pre><code>parse('&lt;p id="replace"&gt;text&lt;/p&gt;', {
 replace: domNode =&gt; {
 if (domNode.attribs &amp;&amp; domNode.attribs.id === 'replace') {
 return &lt;Text&gt;replaced&lt;/Text&gt;;
 }
 }
});</code></pre> <h2 id="h49acf03970">microCMSのリッチエディタ（生HTML）に対応</h2>それでは、microCMSのリッチエディタ（生HTML）に対応していきます。 <h3 id="hd8d793506b">インストール</h3>公式を参考に<a href="https://github.com/remarkablemark/html-react-parser#install" target="_blank" rel="noopener noreferrer">インストール</a>してください！ <h3 id="h78fb6bf512">リッチエディタ（生HTML）をコンポーネントにパース</h3>コンポーネントを以下のように定義し、<code>parse</code>の処理を追加します。<pre><code>export const Markdown = (): JSX.Element =&gt; {
 return (
 &lt;Box &gt;
 {parse(source, options)}
 &lt;/Box&gt;
 );
};</code></pre> 次に<code>parse</code> のoptionsについて説明します。optionsには、<code>replace</code> と <code>domToReact</code>を利用します。<code>replace</code>はある要素をコンポーネントへ置き換えることができます。<code>domToReact</code>はその要素の子要素も再起的にコンポーネントへ置き換えることができます。 サンプルでh1だと、下記でコンポーネントに変換が可能です。こんな感じで良しなに変換内容の定義ができます。以上です。<pre><code>const options: HTMLReactParserOptions = {
 replace: (domNode) =&gt; {
 if (domNode instanceof Element &amp;&amp; domNode.type === 'tag') {
 const props = attributesToProps(domNode.attribs);

 if (domNode.attribs &amp;&amp; domNode.name === 'h1') {
 return (
 &lt;Text as='h1' {...props}&gt;
 {domToReact(domNode.children, options)}
 &lt;/Text&gt;
 );
 }
 ...
 }
 },
};</code></pre> <h2 id="ha214098e44">まとめ</h2>microCMSのリッチエディタ（生HTML）をコンポーネントに変換する方法をご紹介しました。生HTMLを自由に加工出来ると拡張性が高くなるので良いですね。（このブログも対応したい）

microCMSのリッチエディタ（生HTML）をReactのコンポーネントにパースしてみた

<h2 id="h8d027c8ed3">はじめに</h2>おはこんばんは。英単語の品詞をクイズ形式で学べる「<a href="https://part-of-speech-quiz.com/" target="_blank" rel="noopener noreferrer">品詞クイズ 📝</a>」を作ってみました！ 英語弱者な私が英単語の品詞を判別することが苦手で、他の似たようなサイトを利用していたのですが、単語の意味が無かったり、読み方を音声で再生出来なかったりして、少し不便に感じたので作ってみました。はい、ただそれだけです。 <h2 id="h5a9df7cbfb">品詞クイズとは？</h2>英単語の品詞判別をクイズ形式で学べることが出来ます。単語の最後を見ると品詞を推測する事が可能な接尾辞のパターン網羅しています。またその単語の意味や読み方も音声で確認することが可能です。 まず出題方法は問題順かランダムかを選択し、「Start」を押します。 <img src="https://images.microcms-assets.io/assets/7758ea7c4c9e428cbf0a23d966011ccb/46f3b6db7cef4b87ab7ef72d41c5ea30/%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%202021-12-29%201.50.58.png" alt=""> すると問題が出題されます。音声を確認したい場合は音声マークを押すと再生されます。 <img src="https://images.microcms-assets.io/assets/7758ea7c4c9e428cbf0a23d966011ccb/9fa6c317aed84888ae9827c65c7825a9/%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%202021-12-29%2018.35.33.png" alt=""> 選択肢を選び、「解答」を押すと結果が表示されます。 <img src="https://images.microcms-assets.io/assets/7758ea7c4c9e428cbf0a23d966011ccb/338f54114fcf477e92604335d5ec61a9/%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%202021-12-29%2018.18.43.png" alt=""> 全問解答すると以下のように解答結果が表示されます！ <img src="https://images.microcms-assets.io/assets/7758ea7c4c9e428cbf0a23d966011ccb/552b460cf2ae448d855b3627ab651ec0/%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%202021-12-29%2018.21.15.png" alt=""> <h2 id="h80c274ebdd">使用したライブラリ・インフラ・ツールなど</h2>主に以下になります。 <ul><li><a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer">Next.js</a></li><li><a href="https://chakra-ui.com/" target="_blank" rel="noopener noreferrer">Chakra UI</a></li><li><a href="https://cloud.google.com/text-to-speech" target="_blank" rel="noopener noreferrer">Text-to-Speech(google)</a></li><li><a href="https://vercel.com/" target="_blank" rel="noopener noreferrer">Vercel</a></li><li><a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">microCMS</a></li><li><a href="https://www.figma.com/" target="_blank" rel="noopener noreferrer">Figma</a></li></ul>機能は多くないので、色々とは使っていません。よく利用する <a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer">Next.js</a>, <a href="https://vercel.com/" target="_blank" rel="noopener noreferrer">Vercel</a>, <a href="https://chakra-ui.com/" target="_blank" rel="noopener noreferrer">Chakra UI</a> でフロントは構築しています。テキストの音声再生のために <a href="https://cloud.google.com/text-to-speech" target="_blank" rel="noopener noreferrer">Text-to-Speech(google)</a> で音声情報を生成しています。<a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">microCMS</a> では英単語のコンテンツ管理をしています。最後にデザインを作るのに <a href="https://www.figma.com/" target="_blank" rel="noopener noreferrer">Figma</a> を利用しています。 <h2 id="hff0a69ee28">工夫したこと</h2><h3 id="haf78e85f56">音声再生</h3>英単語の音声再生は以下のように実装しました。<ol><li>音声再生には400 万文字までで毎月無料の <a style="background-color:#ffffff" href="https://cloud.google.com/text-to-speech" target="_blank" rel="noopener noreferrer">Text-to-Speech(google)</a>を利用</li><li>ビルド時に登録されているを全ての英単語を1.で音声情報を取得し、MP3にして保存</li><li>2. を利用して再生</li></ol> 音声再生毎に <a style="background-color:#ffffff" href="https://cloud.google.com/text-to-speech" target="_blank" rel="noopener noreferrer">Text-to-Speech(google)</a> を叩かれてしまうと無料の範囲を超えてしまう可能性があるので、ビルド時のみ音声情報を取得するようにしています。 <h3 id="hb570a6676d">デザイン</h3>普段、デザインは一切しないのですが、デザイナーの方の気持ちを理解するために <a style="background-color:#ffffff" href="https://www.figma.com/" target="_blank" rel="noopener noreferrer">Figma</a> でデザインを作ってみました。デザインで意識したことは以下になります。 <ul><li>暗記に良い？と言われる青色をメインカラーにした</li><li>実装の手間を無くすために<a href="https://chakra-ui.com/" target="_blank" rel="noopener noreferrer">Chakra UI</a> のデザインシステムを準拠する</li><li>暗記の妨げにならないよう表示内容はシンプルで簡潔にする</li></ul> 感想としては、デザインセンスが無い私がこの分野を磨くためにはかなりの労力が必要だな再認識できました... デザイナーの方は本当に凄い！！！また <a style="background-color:#ffffff" href="https://www.figma.com/" target="_blank" rel="noopener noreferrer">Figma</a> は普段閲覧のみの利用なので使い方に苦戦しましたw この辺フォローしてくれた <a style="color:inherit" href="https://twitter.com/MykiiTech" target="_blank" rel="noopener noreferrer">@MykiiTech</a> さんありがとうございました！！！ 雑魚なのでデザインはスクショだけw <img src="https://images.microcms-assets.io/assets/7758ea7c4c9e428cbf0a23d966011ccb/f0ba1a895864467eb19ede95eca0ed20/%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%202021-12-29%2020.23.55.png" alt=""> <h3 id="ha4f9001402">コスト</h3>今回はドメイン代だけです！基本的に自分が勉強するためだけに実装したので、無料で実装できるようにしました。世の中、無料で扱えるものが多くて最高ですね！ <h2 id="h1afe451c43">さいごに</h2>簡単なものでも作ってみると結構学びがあって良いですね！ただ、これ作る時間あるなら英単語覚えた方がよかったかもですw サイト：<a href="https://part-of-speech-quiz.com/" target="_blank" rel="noopener noreferrer">https://part-of-speech-quiz.com/</a> ソース：<a href="https://github.com/IshinoJun/part-of-speech-quiz" target="_blank" rel="noopener noreferrer">https://github.com/IshinoJun/part-of-speech-quiz</a>

英単語の品詞をクイズ形式で学べる「品詞クイズ 」を作ってみた

おはこんばんは。最近、&nbsp;Next.js × microCMS&nbsp;で自作したこのサイトにブログの検索機能を実装してみました。 ブログでは、サイト内検索のフォームをよく見かけますよね。ただ、全文検索の機能等を実装する必要があり、意外と面倒だったりします。 そんな面倒なことも、microCMS&nbsp;のAPIは全文検索機能を備えているので、簡単に実装出来てしまいます。今回はその全文検索機能を用いたブログの検索機能の実装方法をご紹介します。 <h2 id="hfe5a8eaaf7">実行環境</h2><ul><li>Next.js 10.0.4</li><li>React 17.0.1</li></ul> <h2 id="h786b965285">グローバルなStateの管理</h2>まずは、複数のドメインでキーワードを扱うことを想定し、グローバルなStateで管理するようにします。今回は、React Context を用いた方法でご紹介します。 createContext で以下のように Context を定義します。<pre><code>// context/searchContext.ts

import { createContext } from 'react';

interface SearchContextValue {
 search: string;
 setSearch: React.Dispatch&lt;React.SetStateAction&lt;string&gt;&gt;;
}

export const SearchContext = createContext&lt;SearchContextValue&gt;({
 search: '',
 setSearch: () =&gt; undefined,
});</code></pre> 次に <code>_app.tsx</code> で Context を呼び出して、グローバルで管理するStateをセットします。<pre><code>// pages/_app.tsx

import React, { useState } from 'react';
import { AppProps } from 'next/app';

const MyApp = (props: AppProps): JSX.Element =&gt; {
 const { Component, pageProps } = props;
 const [search, setSearch] = useState&lt;string&gt;('');

 return (
 &lt;SearchContext.Provider value={{ search, setSearch }}&gt;
 &lt;Component {...pageProps} /&gt;
 &lt;/SearchContext.Provider&gt;
 );
};

export default MyApp;</code></pre> これでグローバルでStateを扱えるようになりました。 <h2 id="h6cb2b333f2">検索用のコンポーネントを用意</h2>以下のように検索用のコンポーネントを用意します。今回は Material-UI を用いています。 <pre><code>// components/SearchInput

import React, { useCallback, useContext } from 'react';
import { IconButton, InputBase } from '@material-ui/core';
import SearchIcon from '@material-ui/icons/Search';
import { useRouter } from 'next/router';
import style from './SearchInput.module.scss';
import SearchContext from '../../context/searchContext';

const SearchInput: React.FC = () =&gt; {
 const { search, setSearch } = useContext(SearchContext);
 const router = useRouter();

 const handleChangeKeyword = useCallback(
 (e: React.ChangeEvent&lt;HTMLInputElement | HTMLTextAreaElement&gt;) =&gt; {
 const { value } = e.currentTarget;
 setSearch(value);
 },
 [setSearch],
 );

 const handleClickSearchButton = useCallback(() =&gt; {
 void router.push(`/blogs/search/?keyword=${search}`);
 }, [search, router]);

 const handleKeyDownSearch = useCallback(
 (e: React.KeyboardEvent&lt;HTMLInputElement | HTMLTextAreaElement&gt;) =&gt; {
 if (e.key === 'Enter') {
 void router.push(`/blogs/search/?keyword=${search}`);
 }
 },
 [search, router],
 );

 return (
 &lt;div className={style.search}&gt;
 &lt;InputBase
 placeholder="Search…"
 inputProps={{ 'aria-label': 'search' }}
 className={style.searchInput}
 value={search}
 onChange={handleChangeKeyword}
 onKeyDown={handleKeyDownSearch}
 /&gt;
 &lt;IconButton
 className={style.searchIcon}
 onClick={handleClickSearchButton}
 aria-label="Search"
 &gt;
 &lt;SearchIcon /&gt;
 &lt;/IconButton&gt;
 &lt;/div&gt;
 );
};

export default SearchInput;</code></pre> 先ほど、定義した Context で定義したグローバルなStateは以下のように <code>useContext</code> で呼び出しています。<pre><code>const { search, setSearch } = useContext(SearchContext);</code></pre> <code>handleClickSearchButton</code>と<code>handleKeyDownSearch</code> で検索結果のページへ遷移するようにしています。 ポイントは、検索キーワードをURLクエリに入れていることです。Context で入れているから不要では？と思いますよね。 ただ、ブラウザをリロードすると Context のは値が消えてしまいます。なので、リロードされても検索結果が残るようにURLクエリにキーワードを入れています。 <pre><code>void router.push(`/blogs/search/?keyword=${search}`);</code></pre> <h2 id="hd9cc592a7d">ページ側の処理</h2>ページ側は先ほどセットしたURLクエリを元にブログの一覧を取得します。フロントから直接 microCMS のAPIを叩いてしまうと、API keyが漏洩してしまうので、API Routerを叩くようにしています。 <pre><code>const [blogsQuery, setBlogsQuery] = useState&lt;{ keyword:string } | null&gt;(null);

useEffect(() =&gt; {
 const urlQuery = router.query { keyword:string };

 if (!isEmpty(urlQuery)) setBlogsQuery(urlQuery);
}, [router.query]);

useEffect(() =&gt; {
 if (blogsQuery) {
 void (async (): Promise&lt;void&gt; =&gt; {
 try {
 const res = await fetch(`/api/blogs`, {
 body: JSON.stringify(blogsQuery),
 });
 } catch {
 return;
 }
 })();
 }
}, [blogsQuery]);</code></pre> 一応、URLクエリがないページに遷移した際に検索キーワードが消えるように <code>_app.tsx</code> に以下の処理も入れておくと良いでしょう。 <pre><code>// pages/_app.tsx

 useEffect(() =&gt; {
 const urlQuery = router.query { keyword:string };
 if (urlQuery &amp;&amp; urlQuery.keyword) {
 setSearch(urlQuery.keyword);
 } else {
 setSearch('');
 }
 }, [router]);</code></pre> <h2 id="h9cb4759477">API Routerでブログ一覧を取得する</h2>以下のようにAPI Router を用いてサーバーサイド側から microCMS のAPIを叩くようにします。 <pre><code>// pages/api/blogs/index.ts

import { NextApiResponse, NextApiRequest } from 'next';

const isBlogsQuery = (item: unknown): item is { keyword: string } =&gt; {
 const target = item as { keyword: string };
 return 'keyword' in target &amp;&amp; typeof target.keyword === 'string';
};

const getSearchBlogs = async (
 req: NextApiRequest,
 res: NextApiResponse,
): Promise&lt;void&gt; =&gt; {
 // クエリのチェック
 if (!isBlogsQuery(req.body)) {
 return res.status(404).end();
 }

 const key = {
 headers: { 'X-API-KEY': process.env.API_KEY ?? '' },
 };
 const blogs = await fetch(
 `https://your-service.microcms.io/api/v1/blogs?q=${encodeURI(
 req.body.keyword,
 )}`,
 key,
 )
 .then((res) =&gt; res.json())
 .catch(() =&gt; null);

 return res.status(200).json(blogs);
};

export default getSearchBlogs;</code></pre> microCMS では<code>q</code>で全文検索が行えます。検索対象は「テキストフィールド」「テキストエリア」「リッチエディタ」となるので、必要なフィールドに対して検索してくれます。便利ですね。 日本語などのキーワードは<code>encodeURI</code>をしないといけなので、ご注意ください。 <pre><code>`https://your-service.microcms.io/api/v1/blogs?q=${encodeURI(
 req.body.keyword,
 )}`</code></pre> これで検索されたキーワードに関連するブログが取得出来るようになったはずです。お疲れ様でした。 <h2 id="h1afe451c43">さいごに</h2>今回は microCMS&nbsp;のAPIは全文検索機能を用いて、ブログのサイト内検索を実装する方法をご紹介しました！誰かの参考になれば幸いです。

Next.js × microCMSでブログの検索を実装してみた

おはこんにちばんは。今回は&nbsp;Next.js × microCMS&nbsp;で ページングを実装してみました。その手順を紹介しようと思います！ <h2 id="hfe5a8eaaf7">実行環境</h2><ul><li>Next.js 10.0.4</li><li>React 17.0.0</li><li>Material-UI 4.11.2</li></ul> <h2 id="h559ffd8095">一覧画面の実装</h2>まずは雑に一覧画面を実装します。今回はUIライブラリにMaterial-UIを利用しています。構成しては以下になります。 ============= pages/ 　page/ 　　[offset].tsx ============= <pre><code>src/pages/page/[offset].tsx

import { GetStaticPaths, GetStaticProps, NextPage } from 'next'
import React, { useCallback } from 'react'
import { useRouter } from 'next/router';
import { Pagination } from '@material-ui/lab';

const PAGE = 10 as const;

const DynamicPage: NextPage = () =&gt; {
 const router = useRouter();
 const offset = router.query.offset
 ? Number.parseInt(String(router.query.offset), 10)
 : 1;

 const handleChangePage = useCallback(
 (_: React.ChangeEvent&lt;unknown&gt;, page: number) =&gt; {
 void router.push(`/page/${page}`); 
 },
 [router],
 );
 
 return (
 &lt;div&gt;
 &lt;h1&gt;{router.query.offset}&lt;/h1&gt;
 &lt;Pagination
 count={PAGE}
 variant="outlined"
 shape="rounded"
 color="secondary"
 page={offset}
 onChange={handleChangePage}
 /&gt;
 &lt;/div&gt;
 )
}

export const getStaticPaths: GetStaticPaths = async () =&gt; {
 const paths = [...Array(PAGE)].map((_, index) =&gt; ({
 params: {
 offset: `${index + 1}`,
 },
 }))

 return { paths, fallback: false };
}

export const getStaticProps: GetStaticProps = async (context) =&gt; {
 return {
 props: {},
 }
}

export default DynamicPage;</code></pre> Material-UI の <a href="https://material-ui.com/api/pagination/" target="_blank" rel="noopener noreferrer">Pagination</a> を使っています。ハンドラーの第二引数に次の page が取れるのでそれを元に次のページに遷移させています。こんな感じになるはずです。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/3011efc1f05f61b9fafe77ea24f8726b.gif" alt=""> <h2 id="h2ec9ff6b44">microCMS&nbsp;で取得したコンテンツを利用</h2> microCMS で取得したコンテンツを元にページングしていきます。今回は1ページ 3つまでコンテンツを取得するようにしています。 <pre><code>import { GetStaticPaths, GetStaticProps, NextPage } from 'next'
import React, { useCallback } from 'react'
import { useRouter } from 'next/router';
import { Pagination } from '@material-ui/lab';

const DynamicPage: NextPage = ({ contents }) =&gt; {
 const router = useRouter();
 const offset = router.query.offset
 ? Number.parseInt(String(router.query.offset), 10)
 : 1;

 const handleChangePage = useCallback(
 (_: React.ChangeEvent&lt;unknown&gt;, page: number) =&gt; {
 void router.push(`/page/${page}`); 
 },
 [router],
 );
 
 return (
 &lt;div&gt;
 &lt;h1&gt;{router.query.offset}&lt;/h1&gt;
 &lt;Pagination
 count={Math.ceil(contents.totalCount / contents.limit)}
 variant="outlined"
 shape="rounded"
 color="secondary"
 page={offset}
 onChange={handleChangePage}
 /&gt;
 &lt;/div&gt;
 )
}

export const getStaticPaths: GetStaticPaths = async () =&gt; {

 const key = {
 headers: { 'X-API-KEY': process.env.API_KEY ?? '' },
 };
 const contents = await fetch(
 `https://jun-dev.microcms.io/api/v1/contents?offset=0&amp;limit=3`,
 key,
 )
 .then((res) =&gt; res.json())
 .catch(() =&gt; null);

 const paths = [...Array(Math.ceil(contents.totalCount / contents.limit))]
 .map((_, i) =&gt; i + 1)
 .map((offset) =&gt; `/page/${offset}`);

 return { paths, fallback: false };
}

export const getStaticProps: GetStaticProps = async ({ params }) =&gt; {
 const offset = params?.offset ? String(params?.offset) : '0';

 const query = {
 offset: String(Math.ceil(Number.parseInt(offset, 10) - 1) * 3),
 limit: '3',
 };

 const key = {
 headers: { 'X-API-KEY': process.env.API_KEY ?? '' },
 };
 const contents = await fetch(
 `https://your-service.microcms.io/api/v1/contents?offset=${query.offset}&amp;limit=${query.limit}`,
 key,
 )
 .then((res) =&gt; res.json())
 .catch(() =&gt; null);

 return {
 props: {
 contents
 },
 }
}

export default DynamicPage</code></pre> getStaticPathsでは microCMS で <code>totalCount</code> と <code>limit</code> を返してくれるのでこれを元にpathsを生成しています。<pre><code> const paths = [...Array(Math.ceil(contents.totalCount / contents.limit))]
 .map((_, i) =&gt; i + 1)
 .map((offset) =&gt; `/page/${offset}`);</code></pre> getStaticPropsではgetStaticPathsで生成したoffsetを元にqueryを生成し、ページ単位でコンテンツを何件目から取得するかを指定しています。<pre><code> const offset = params?.offset ? String(params?.offset) : '0';

 const query = {
 offset: String(Math.ceil(Number.parseInt(offset, 10) - 1) * 3),
 limit: '3',
 };</code></pre> Pagination コンポーネントも <code>totalCount</code> と <code>limit</code> を元にcount（何ページ目か） を指定してあげています。<pre><code>&lt;Pagination
 count={Math.ceil(contents.totalCount / contents.limit)}
 variant="outlined"
 shape="rounded"
 color="secondary"
 page={offset}
 onChange={handleChangePage}
/&gt;</code></pre> これで以上です。お疲れ様でした。 <h2 id="h1afe451c43">さいごに</h2>Next.js × microCMS&nbsp;で ページングを実装してみました。一覧ページを実装したけど、ページングがよくわからんって方に参考となれば幸いです。

Next.js × microCMS におけるページングの実装方法

おはこんにちばんは。今回は Next.js × microCMS&nbsp;で 人気記事一覧を Google Analytics Reporting API v4 を利用し表示してみました！ よくブログとかで人気記事一覧とか目にしますよね。WordPress の場合はプラグインを利用すれば比較的簡単に出来そうですが、自作ブログだとどうすべきか悩みました。 そこで今回は、Google Analytics Reporting API v4 を利用して人気記事一覧を表示する方法を紹介していきます。 <h2 id="hfe5a8eaaf7">実行環境</h2><ul><li>Next.js 10.0.4</li><li>React 17.0.0</li></ul> <h2 id="h30a538611a">Google APIs を有効にする</h2><h3 id="h702d09d558">プロジェクトを作成</h3><a href="https://console.developers.google.com/" target="_blank" rel="noopener noreferrer">Google APIs</a> にアクセスし、プロジェクトの選択 をクリックし、新しいプロジェクト をクリックします。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/new-project.png" alt=""> プロジェクト名に任意の名前をつけてプロジェクトを作成します。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/new-project-2.png" alt=""> <h3 id="hc2f5e80d22">Google Analytics API の有効化</h3>APIとサービスの有効化 をクリックして Google Analytics API を有効化します。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/new-project3.png" alt=""> <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/new-project4.png" alt=""> <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/new-project5.png" alt=""> これで有効化されました。続いて認証情報を作成します。 <h3 id="hf09298624a">認証情報の作成</h3>認証情報を作成 をクリックします。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/new-project6.png" alt=""> 下記の情報を選択します。必要な認証情報 をクリックします。<ul><li>使用するAPI：Analytics Reporting API</li><li>APIを呼び出す場所：ウェブサーバー（node.js, Tomcat など）</li><li>アクセスするデータの種類：アプリケーションデータ</li></ul> <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/new-project7.png" alt=""> 下記の情報を選択します。次へ をクリックします。<ul><li>サービスアカウント名：任意</li><li>ロール：閲覧者</li><li>キータイプ：JSON</li></ul> <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/new-project8.png" alt=""> 自動的にjsonがダウンロードされます。このjsonは後ほど利用するので、適切に保管しておきます。 <h3 id="h0a84e474da">Google Analytics の閲覧権限を付与</h3>Google Analyticsの設定を行っていきます。 <a href="https://analytics.google.com/analytics/web/" target="_blank" rel="noopener noreferrer">Google Analytics</a> を開き、左下の歯車マーク から ビューの設定 をクリックします。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/new-project9.png" alt=""> ビューIDを後ほど利用するのでメモっておいてください。 次にユーザ管理をクリックし、+ ボタンを押してユーザを追加します。 ユーザのメールアドレスには、先程ダウンロードしたjsonファイルに記載されている <code>client_email</code> の値を入れて、ユーザを追加します。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/new-project10.png" alt=""> これでgoogle APIs周りの設定は完了です。 <h2 id="hc6c80635a9">パッケージの追加</h2>それでは実装を進めていきます。今回は、Node.js用のライブラリである&nbsp;<code>google-api-nodejs-client</code>&nbsp;を利用します。<pre><code>$ yarn add googleapis</code></pre> <h2 id="h936a1bbd78">ページビュー上位を取得する処理</h2>人気記事一覧を表示したいので、ページビューが上位の3位のパスを取得するコートを書いていきます。<pre><code>import { analyticsreporting_v4, google } from 'googleapis';
import { isEmpty } from 'lodash';

const getTopArticle = async (): Promise&lt;analyticsreporting_v4.Schema$GetReportsResponse&gt; =&gt; {
 const client = await google.auth.getClient({
 scopes: 'https://www.googleapis.com/auth/analytics.readonly',
 credentials: {
 client_email: process.env.GOOGLE_APPLICATION_CLIENT_EMAIL,
 private_key: (process.env.GOOGLE_APPLICATION_PRIVATE_KEY ?? '').replace(
 /\\n/gm,
 '\n',
 ),
 },
 });

 const analyticsreporting = google.analyticsreporting({
 version: 'v4',
 auth: client,
 });

 const res = await analyticsreporting.reports.batchGet({
 requestBody: {
 reportRequests: [
 {
 viewId: process.env.GOOGLE_ANALYTICS_VIEW_ID,
 dateRanges: [
 {
 startDate: '30daysAgo',
 endDate: '1daysAgo',
 },
 ],
 dimensions: [
 {
 name: 'ga:pagePath',
 },
 ],
 metrics: [
 {
 expression: 'ga:pageviews',
 },
 ],
 orderBys: [
 {
 fieldName: 'ga:pageviews',
 sortOrder: 'DESCENDING',
 },
 ],
 pageSize: 3,
 dimensionFilterClauses: [
 {
 filters: [
 {
 dimensionName: 'ga:pagePath',
 operator: 'REGEXP',
 expressions: ['^/blogs/[0-9a-zA-Z\\-]+$'],
 },
 ],
 },
 ],
 },
 ],
 },
 });

 return res.data;
};

const getTopArticlePaths = async (): Promise&lt;string[]&gt; =&gt; {
 const topArticle = await getTopArticle();

 const ids: string[] = [];
 const rows = topArticle.reports
 ? topArticle.reports[0]?.data?.rows ?? []
 : [];

 rows.forEach((row) =&gt; {
 if (row.dimensions &amp;&amp; !isEmpty(row.dimensions)) {
 ids.push(row.dimensions[0].replace('/blogs/', ''));
 }
 });

 return ids;
};

export { getTopArticle, getTopArticlePaths };</code></pre> 以下の環境変数は先ほどダウンロードしたjsonの <code>clientemail</code> と<code> privatekey</code> を利用します。<code>view_id</code> は先ほどメモしたやつです。<pre><code>process.env.GOOGLE_APPLICATION_CLIENT_EMAIL
process.env.GOOGLE_APPLICATION_PRIVATE_KEY
process.env.GOOGLE_ANALYTICS_VIEW_ID</code></pre> ブログのページビューのみを取得したいので、正規表現で <code>/blogs/英数字ハイフン</code> が含むのみを取得するようにしています。<pre><code>dimensionFilterClauses: [
{
 filters: [
 {
 dimensionName: 'ga:pagePath',
 operator: 'REGEXP',
 expressions: ['^/blogs/[0-9a-zA-Z\\-]+$'],
 },
 ],
}]</code></pre> 次に以下のようにページビュー上位3位までの記事を取得します。<pre><code>export const getStaticProps: GetStaticProps = async (): Promise&lt;{
 props: Props;
}&gt; =&gt; {
 const ids = await getTopArticlePaths();
 const str = ids.join(',');

 const key = {
 headers: { 'X-API-KEY': process.env.API_KEY ?? '' },
 };
 const topBlogs = await fetch(
 `https://your-service.microcms.io/api/v1/blogs?ids=${str}`,
 key,
 )
 .then((res) =&gt; res.json())
 .catch(() =&gt; null);

 const topArticleBlogs = compact(
 ids.map((id) =&gt; topBlogs?.contents.find((b) =&gt; b.id === id)),
 );

 return {
 props: {
 topArticleBlogs,
 },
 };
};</code></pre> 以下は&nbsp;microCMS が順番を作成順に変えてしまうので、Articleのid順に並び替えています。<pre><code>const topArticleBlogs = compact(
 ids.map((id) =&gt; topBlogs?.contents.find((b) =&gt; b.id === id)),
);</code></pre> これで人気記事を取得出来たはずなので、あとは良しなに表記するだけです。お疲れ様でした。 <h2 id="h1afe451c43">さいごに</h2>今回は人気記事一覧を表示する方法についてご紹介しました！意外と調べても参考になる実装方法がなかったので誰かの参考になれば幸いです。 （microCMSのidsはidの順番に返して欲しいと思うこの頃。方法あるのかな？）

【Next.js × microCMS】人気記事一覧を表示してみた

おはこんにちばんは。<a href="https://github.com/IshinoJun/nextjs-microcms-contact" target="_blank" rel="noopener noreferrer">Next.js + microCMSで問い合わせ機能</a>を実装してみました。 <h2 id="h8d027c8ed3">はじめに</h2><ul><li>実装方法について触れています。特にAPIキーを隠蔽せずに実装している記事が見受けられてたので、その辺は注意して触れていきます。</li><li>Next.js や microCMSとは？っといった概要には触れません。</li></ul> <h2 id="h38c8766536">microCMSの設定</h2>この辺は他のサイトで触れてるところがあったので雑に説明します。 <h3 id="h2c9414f5a4">コンテンツ（API）の追加</h3>API名とエンドポイントを入力し、コンテンツ（API）を追加します。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B1.png" alt=""> 続いて、POSTが使えるリスト形式を選択します。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B2.png" alt=""> 必要なAPIスキーマーを設定すれば終了です。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B3.png" alt=""> なお、以下も忘れずに実施ください。<ol><li>POSTリクエストを有効にする（API設定 &gt; HTTPメソッド設定）</li><li>APIリファレンスからX-WRITE-API-KEYを作成して控えておく</li></ol> <h2 id="h131d3691cd">Next.jsで問い合わせ機能を実装</h2>フォーム機能を実装していきます。 <h3 id="h2ce7c28a66">問い合わせ用の関数を作成</h3>Next.jsにはサーバーレス関数を起動できるAPI Routes機能があります。 その機能を利用し、サーバサイド経由でAPIキーを隠蔽してリクエストを送るようにします。 まず、環境変数を利用するために.env.localを作成し、先ほどメモしたX-WRITE-API-KEYを記載します。 NEXT_PUBLIC_を変数の前にを付けるとフロント側にも公開されてしまうので、APIキーなどでは付けない方が良さそうですね。<pre><code>WRITE_API_KEY="メモしたX-WRITE-API-KEY"</code></pre> 次に以下のような関数とクエリをチェックするタイプガード を用意します。 詳しくはリンクのコード見てもられば！ <a href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/pages/api/contact.ts" target="_blank" rel="noopener noreferrer">/</a><a style="color:#454545" href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/pages/api/contact.ts" target="_blank" rel="noopener noreferrer">pages/api/</a><a href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/pages/api/contact.ts" target="_blank" rel="noopener noreferrer">contact.ts</a><pre><code> // クエリとAPIキーのチェック
 if (!isContact(req.body) || typeof WRITE_API_KEY === "undefined") {
 return res.status(404).end();
 }

 const content = await fetch(`https://xxxxxx.microcms.io/api/v1/contacts/`, {
 headers: { "X-WRITE-API-KEY": WRITE_API_KEY },
 body: JSON.stringify(req.body),
 })
 .then(() =&gt; "Created")
 .catch(() =&gt; null);

 // CMS側で正しく作成されたかチェック
 if (content !== "Created") {
 return res.status(401).json({ message: "Unauthorized" });
 }

 res.status(200).json({ message: "OK" });

 res.end("Contact enabled");
};</code></pre> <a href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/utils/TypeGuardUtils.ts" target="_blank" rel="noopener noreferrer">/utils/TypeGuardUtils.ts</a><pre><code>const isContact = (item: unknown): item is Contact =&gt; {
 const target = item as Contact;

 return (
 "name" in target &amp;&amp;
 typeof target.name === "string" &amp;&amp;
 !!target.name &amp;&amp;
 "email" in target &amp;&amp;
 typeof target.email === "string" &amp;&amp;
 !!target.email &amp;&amp;
 "body" in target &amp;&amp;
 typeof target.body === "string" &amp;&amp;
 !!target.body
 );
};

</code></pre> これで&nbsp; `/api/contact` でこの関数を起動できるようになりました。 処理としては、以下のチェックをし、問題無ければ200を返すようにしています。問題があればエラーを返します。<ol><li>クエリとして渡されるオブジェクトが期待通りのオブジェクトか</li><li>実際にmicroCMSのAPIを呼び出して正しく作成されたか</li></ol> microCMSのAPIの呼び出し処理はラッパーなりを用意した方が無難かもですね。keyの設定なりを毎回しなくてはいけないので。 <h3 id="h782dc6ea91">ページ側の作成</h3>今回はフォームバリデーションライブラリの <a href="https://github.com/react-hook-form/react-hook-form" target="_blank" rel="noopener noreferrer">react-hook-form</a>（<a href="https://github.com/jquense/yup" target="_blank" rel="noopener noreferrer">yup</a>）とUIライブラリの<a href="https://material-ui.com/" target="_blank" rel="noopener noreferrer">Material-UI</a>を利用しています。 上記ライブラリについて詳しくは触れませんが、react-hook-formは公式に記載通り以下の点で優秀だなっと思った最近この頃。 <ul><li>再レンダリングが最小に抑えられている</li><li>コードの記述量が少ない</li><li>外部 UI コンポーネントライブラリとの統合が容易</li></ul> ページとしては以下の３つを作成します。量が多いので必要なとこだけ説明します。 <a style="color:#454545" href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/pages/contact/index.tsx" target="_blank" rel="noopener noreferrer">pages/conatct/index.tsx</a><pre><code> const onSubmit = async (contact: Contact): Promise&lt;void&gt; =&gt; {
 try {
 await fetch(baseUrl + "/api/contact", {
 method: "POST",
 headers: {
 "Content-Type": "application/json; charset=utf-8",
 },
 body: JSON.stringify(contact),
 }).then((res) =&gt; {
 if (!res.ok) {
 throw Error(`${res.status} ${res.statusText}`);
 }
 });

 void router.push("/contact/success");
 } catch (err) {
 void router.push("/contact/error");
 }
 };</code></pre> フロント側から上記のように叩くことで先ほど作成した問い合わせ用の関数を起動させています。 これでサーバサイド経由でAPIキーを隠蔽し、リクエストを送るよう出来ました。 「何故フロントからだとAPIキーが隠蔽されないのか」は<a href="https://microcms.io/blog/nuxt-secure-api-key/" target="_blank" rel="noopener noreferrer">このサイト</a>で詳しく解説されておりました。 <a style="color:#454545" href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/pages/contact/success/index.tsx" target="_blank" rel="noopener noreferrer">pages/success/index.tsx</a> <a style="color:#454545" href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/pages/contact/error/index.tsx" target="_blank" rel="noopener noreferrer">pages/error/index.tsx</a> 上記は、問い合わせの成功時と失敗時の画面です！ これで実装としては完了です。 実装後に作成したフォームで送信してみて、microCMSでその結果が表示出来ていれば完成です！！！ <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B5.png" alt=""> 最後に通知が必要な方は、Webpack &gt; API設定でSlackやメール通知などが可能なので設定しておくと良いでしょう。 <h2 id="ha214098e44">まとめ</h2>Next.js と microCMS を問い合わせ機能しました。APIキー周りの管理は基本的に自己責任となるので注意が必要ですね。（てかブログ書くの大変）

microCMS

microCMSのリッチエディタ（生HTML）をReactのコンポーネントにパースしてみた

英単語の品詞をクイズ形式で学べる「品詞クイズ」を作ってみた

Next.js × microCMSでブログの検索を実装してみた

Next.js × microCMS におけるページングの実装方法

【Next.js × microCMS】人気記事一覧を表示してみた

【Next.js】 microCMSで問い合わせ機能を実装してみた

microCMS

microCMSのリッチエディタ（生HTML）をReactのコンポーネントにパースしてみた

英単語の品詞をクイズ形式で学べる「品詞クイズ 」を作ってみた

Next.js × microCMSでブログの検索を実装してみた

Next.js × microCMS におけるページングの実装方法

【Next.js × microCMS】人気記事一覧を表示してみた

【Next.js】 microCMSで問い合わせ機能を実装してみた

英単語の品詞をクイズ形式で学べる「品詞クイズ」を作ってみた