おはこんにちばんは。最近、NextJS が出力したOpenAPI (Swagger) によって記述された API 定義ファイルをもとに、Next.js でTypeScript の型や API クライアントを自動生成したいと思ったのですが、意外とまとまった資料がなかったのでその方法をご紹介します。今回は、openapi generator typescript-axios を元に利用します。 サンプルはこちら。（<a href="https://github.com/IshinoJun/nextjs-example-openapi-generator" target="_blank" rel="noopener noreferrer">フロント</a>、<a href="https://github.com/IshinoJun/nestjs-example-openapi-generator" target="_blank" rel="noopener noreferrer">バック</a>） <h2 id="hed900658dc">環境</h2><ul><li>Node.js v12.18.0</li><li>macOS Big Sur</li></ul> <h2 id="hb40c68615d">NextJS でAPIを用意</h2>こちらに関しては、前回ご紹介した <a href="http://localhost:3000/blogs/nestjs-mikroorm-tutorial" target="_blank" rel="noopener noreferrer">NestJSにMikroORMの導入手順。CRUDのAPIを実装するまで。</a> で利用した<a href="https://github.com/IshinoJun/nestjs-mikroorm-example-app" target="_blank" rel="noopener noreferrer">リポジトリ</a>を修正していきます。 <h3 id="h9133ad7bea">パッケージの導入</h3>APIの定義ファイルを出力する必要があるので、<code>Swagger</code> を導入します。<pre><code>yarn add @nestjs/swagger swagger-ui-express</code></pre> 次に<code>main.ts</code>に以下の設定情報を追加します。<pre><code>./src/main.ts

async function bootstrap() {
 const app = await NestFactory.create(AppModule);

 const config = new DocumentBuilder()
 .setTitle('Example API')
 .setDescription('The Example API description')
 .setVersion('1.0')
 .build();

 const options: SwaggerDocumentOptions = {
 operationIdFactory: (_: string, methodKey: string) =&gt; methodKey,
 };

 const document = SwaggerModule.createDocument(app, config, options);
 SwaggerModule.setup('api', app, document);

 await app.listen(8080);
}</code></pre> OpenAPI Generatorは API クライアントを生成する際に OperationId を参照しています。一方で nestjs/swagger は OperationIdを「Controller名 + メソッド名」で出力します。 なので、 API クライアントでアクセスする際、呼び出しが<code>exampleApi.controller.method</code> となり少しくどくなります。そこで<code>exampleApi.method</code>とするために以下を行なっています。<pre><code>const options: SwaggerDocumentOptions = {
 operationIdFactory: (_: string, methodKey: string) =&gt; methodKey,
};</code></pre> 最後にコントローラー毎にインスタンスを区切るためにタグを以下のように追加しましょう。<pre><code>./src/example/example.controller.ts

@ApiTags('example')
export class ExampleController {
...</code></pre> これでNestJS側の最低限の設定は以上になります。 <h2 id="h5d6dce4d37">Next.jsにopenapi generator typescript-axios を導入</h2>次にNext.js側の設定を行なっていきます。 <h3 id="h702d09d558">プロジェクトを作成</h3><pre><code>yarn create next-app --typescript</code></pre> <h3 id="hb15c49acba">パッケージを導入</h3><pre><code>yarn add -D openapitools/openapi-generator-cli

yarn add axios gulp</code></pre> <h2 id="h872930db14">openapi generator typescript-axios の設定</h2>以下の設定ファイルを追加します。<pre><code>./openapiConfig.yml

withSeparateModelsAndApi: true
apiPackage: 'api'
modelPackage: 'dto'
modelPropertyNaming: 'camelCase'
supportsES6: true
withInterfaces: true</code></pre> <ul><li>withSeparateModelsAndApi<ul><li>API と model を別々にしたかったので true にしています。</li></ul></li><li>apiPackage<ul><li>api が格納されるフォルダ名を api としたかったので api にしています。</li></ul></li><li>modelPackage<ul><li>model が格納されるフォルダ名を model としたかったので model にしています。</li></ul></li><li>modelPropertyNaming<ul><li>キャメルケースで出力したかったためです。</li></ul></li><li>supportsES6</li><li>withInterfaces<ul><li>使ってもいいかなっと思ったので追加しています。（雑）</li></ul></li></ul><h3 id="h74216feda6"> 出力するコマンドを追加</h3>APIエンドポイントの TypeScript の型 と API クライアント 自動生成するコマンドを追加します。 openapi generator は <code>openapi-generator-cli generate -g typescript-axios -i &lt;OpenAPI定義ファイル&gt;&nbsp;-o &lt;出力先&gt;</code>のようなコマンドで出力します。ただ、OpenAPI定義ファイルの出力先が本番や開発環境で変わる可能性があるので、<code>gulp</code> を利用して環境変数から出力先を変えられるようにします。gulpの使い方については省略します。 以下のファイルを追加します。<pre><code>./gulpfile.ts
import * as cp from "child_process";

import { loadEnvConfig } from "@next/env";
import gulp from "gulp";

loadEnvConfig(process.env.PWD ?? "");

gulp.task("generate-example-client", (done) =&gt; {
 cp.spawnSync(
 "openapi-generator-cli",
 [
 "generate",
 "-g",
 "typescript-axios",
 "-i",
 `${process.env.API_JSON_URL ?? ""}`,
 "-o",
 "./openapi-generator/example-api",
 "-c",
 "./openapiConfig.yml",
 ],
 {
 stdio: [process.stdin, process.stdout, process.stderr],
 shell: true,
 }
 );
 done();
});</code></pre> 環境変数には以下を追加します。<pre><code>./.env

API_JSON_URL=http://localhost:8080/api-json</code></pre> 最後にコマンドを追加します。<pre><code>./package.json
"scripts": {
 "generate-example-client": "gulp generate-example-client"
},
....</code></pre> <h3 id="h9d756a342d">openapi generator typescript-axios で出力</h3>先ほど追加したコマンドを実行します。<pre><code>yarn generate-example-client</code></pre> 以下が出力されれば完了です。<pre><code>################################################################################
# Thanks for using OpenAPI Generator.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #
# Please consider donation to help us maintain this project 🙏&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#
# https://opencollective.com/openapi_generator/donate&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #
################################################################################
Finished 'generate-example-client' after 3.55 s</code></pre> <h3 id="hd0b0994538">APIクライアント まとめるクラスを追加</h3>エンドポイント毎に設定を渡す必要があるので、集約するクラスを定義しておきます。basePathにはバックエンド側のURLを指定します。<pre><code>./clients/ExampleClient.ts

import { Configuration, ExampleApi } from "../openapi-generator/example-api";

export class ExampleClient {
 private config = new Configuration({
 basePath: process.env.NEXT_PUBLIC_API_BASE_URL || "/api",
 });

 public exampleApi = new ExampleApi(this.config);
}</code></pre> <h3 id="h39017e0df9">インスタンスをどこでも扱えるようにする</h3>最後に <code>ExampleClient</code> をどこでも扱えるようにします。今回は <code>context</code> を利用します。ここでは細かい説明は行いません。 <pre><code>./contexts/ExampleClientContext.ts

import React from "react";

import type { ExampleClient } from "../clients/ExampleClient";

export const ExampleClientContext = React.createContext&lt;
 ExampleClient | undefined
&gt;(undefined);</code></pre> <pre><code>./pages/_app.tsx

const exampleClient = new ExampleClient();

function MyApp({ Component, pageProps }: AppProps) {
 return (
 &lt;ExampleClientContext.Provider value={exampleClient}&gt;
 &lt;Component {...pageProps} /&gt;
 &lt;/ExampleClientContext.Provider&gt;
 );
}</code></pre> <pre><code>./hooks/useExampleClient.ts

import { useContext } from "react";

import type { ExampleClient } from "../clients/ExampleClient";
import { ExampleClientContext } from "../contexts";

export const useExampleClient = (): ExampleClient =&gt; {
 const exampleClient = useContext(ExampleClientContext);
 if (!exampleClient)
 throw new Error("useExampleClient must be inside a Provider with a value");

 return exampleClient;
};</code></pre> 以下のようAPIをアクセスできるようになれば完了です。<pre><code> useEffect(() =&gt; {
 void (async () =&gt; {
 console.log(await exampleClient.exampleApi.findAll());
 })();
 });</code></pre> これで終わりです。お疲れ様でした。 <h2 id="h3bcda3e6b0">最後に</h2>OpenAPI Generator typescript-axios を使ってNext.js と NestJSを連携する方法をご紹介しました。TypeScript の型や API クライアントを自動生成されるので便利ですね。ただ、ドキュメントなどはあまり揃ってないので、利用するにはある程度の覚悟が必要かなっと思います。

OpenAPI Generator を使ってNext.js と NestJSを連携する方法

おはこんばんは。最近、Next.js（React）でアイコンのリサイズ機能を実装してみたのですが、意外とまとまった記事が無かったので実装方法をご紹介しようと思います！ 今回はこんな感じのを実装します。<a style="background-color:#ffffff" href="https://github.com/IshinoJun/next-icon-editor" target="_blank" rel="noopener noreferrer">サンプルはこちら。</a> <img src="https://images.microcms-assets.io/assets/7758ea7c4c9e428cbf0a23d966011ccb/b8cddbc6a6ea40c2ad53a7905edd1408/5b1553b4096b9320849cd7c3f5b59568.gif" alt=""> <h2 id="hfe5a8eaaf7">実行環境</h2><ul><li>next 10.0.9</li><li>react 17.0.1</li><li>react-modal 3.12.1</li><li>react-avater 3.10.0</li><li>react-avater-editor 11.1.0</li><li>rc-slider 9.7.1</li><li>pica 6.1.1</li></ul> <h2 id="h3397385dbf">機能説明</h2>今回の機能は主に以下となります。これを順に紹介していきます。 <ol><li>アイコンの表示</li><li>画像のアップロード</li><li>アイコンのプレビュー表示</li><li>アイコンのサイズ・切り取り範囲の変更</li></ol> <h2 id="h6ead2eb18d">アイコンの表示</h2>まずは、最初の画面でアイコンを表示できるようにします。今回は<a href="https://github.com/sitebase/react-avatar" target="_blank" rel="noopener noreferrer"><code>react-avater</code></a>を利用します。画像が無い際のデフォルト表示や画像の円形表示をしてくれるお手軽ライブラリです。<pre><code>yarn add react-avatar</code></pre> 次に表示用とプレビュー用のStateを定義します。このStateで画像を管理します。<pre><code>./page/index.tsx

const [icon, setIcon] = useState&lt;File | null&gt;(null);
const [previewIcon, setPreviewIcon] = useState&lt;File | null&gt;(null);</code></pre> そして以下みたいに利用すれば表示してくれます。ただ、まだ画像が無いので、デフォルト表示になるかと思います。<pre><code>./page/index.tsx

&lt;Avatar
　size='160'
　name="アイコン"
 round
 color="#ddd"
 alt="アイコン"
 src={icon ? URL.createObjectURL(icon) : ''}
/&gt;</code></pre> <h2 id="h4ba79d7ad3">画像のアップロード</h2>では、早速画像のアップロードをできるようにします。今回はボタンを押されたら画像がアップロードされるようにします。 ページ上に表示されない input を以下のように定義し、ref を取得出来るようにします。<pre><code>./page/index.tsx

const iconInputRef = useRef&lt;HTMLInputElement | null&gt;(null);

&lt;input
 type="file"
 accept="image/*"
 style={{ display: 'none' }}
 ref={iconInputRef}
 onChange={handleChangePreviewIcon}
/&gt;</code></pre> 先ほど、取得した inputのref がボタンのクリックイベントでクリックされるようにします。これで画像選択が可能になります。<pre><code>./page/index.tsx

const handleClickChangeIcon = useCallback(() =&gt; {
if (!iconInputRef || !iconInputRef.current) return;
iconInputRef.current.click();
}, []);

&lt;button
 type="button"
 onClick={handleClickChangeIcon}
&gt;</code></pre> 最後にプレビューのStateを選択された画像を更新するようにします。<code>e.currentTarget.value = "''</code>をしているのは、同じ画像を連続で選択された際、イベントが実行されないので、valueをリセットして再実行可能とするためです。<pre><code>./page/index.tsx

const handleChangePreviewIcon = useCallback(
 (e: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
 if (!e.target.files?.length) return;
 setPreviewIcon(e.target.files[0]);
 e.currentTarget.value = '';
 },
 [],
);</code></pre> <h2 id="h0c81c97bfe">アイコンのプレビュー表示</h2>プレビューの表示では、<a href="https://github.com/reactjs/react-modal" target="_blank" rel="noopener noreferrer"><code>react-modal</code></a>を利用します。お手軽にモーダルが実装できるライブラリです。<pre><code>yarn add react-modal</code></pre> <code>previewIcon</code>に値がセットされたらモーダルが開くようにしています。<pre><code>./components/IconEditor.tsx

&lt;Modal
 isOpen={!!previewIcon}
 onRequestClose={handleCloseIsOpen}
 ariaHideApp={false}
 overlayClassName={{
 base: styles.overlayBase,
 afterOpen: styles.overlayAfter,
 beforeClose: styles.overlayBefore,
 }}
 className={{
 base: styles.contentBase,
 afterOpen: styles.contentAfter,
 beforeClose: styles.contentBefore,
 }}
 closeTimeoutMS={500}
&gt;
 &lt;div className={styles.header}&gt;
 &lt;/div&gt;
&lt;/Modal&gt;</code></pre> <h2 id="h6d0a8a7b52">アイコンのサイズ・切り取り範囲の変更</h2>画像のリサイズには<a href="https://github.com/mosch/react-avatar-editor" target="_blank" rel="noopener noreferrer"><code>react-avater-editor</code></a>と<a href="https://github.com/schrodinger/rc-slider" target="_blank" rel="noopener noreferrer"><code>rc-slider</code></a>を利用します。 <pre><code>yarn add react-avater-editor rc-slider</code></pre> <code>AvatarEditor</code>ではrefを渡すことでリサイズした画像データを取得出来ます。scaleで画像の拡大が可能です。その調整は<code>rc-slider</code>を用いて行います。<pre><code>./components/IconEditor.tsx

 const editorRef = useRef&lt;AvatarEditor | null&gt;(null);
 const [scale, setScale] = useState(1);

&lt;AvatarEditor
 ref={editorRef}
 image={previewIcon ? URL.createObjectURL(previewIcon) : ''}
 width={ICON_WIDTH}
 height={ICON_HEIGHT}
 borderRadius={100}
 color={[0, 0, 0, 0.6]}
 scale={scale}
 rotate={0}
/&gt;

&lt;Slider
 onChange={handleChangeScale}
 min={1}
 max={1.5}
 step={0.01}
 value={scale}
/&gt;</code></pre> ただ、<code>AvatarEditor</code>のwidthとheightがコンポーネントのサイズになるのですが、これが実際にリサイズされる画像の大きさになります。これを必ずしもそうしたくないケースがありますよね。そういった場合は、<a href="https://github.com/nodeca/pica" target="_blank" rel="noopener noreferrer"><code>pica</code></a>を利用します。<pre><code>yarn add pica</code></pre> <pre><code> const handleClickFileSave = useCallback(async () =&gt; {
 if (!editorRef.current) return;

 const img = editorRef.current.getImage();
 const canvas = editorRef.current.getImageScaledToCanvas();
 canvas.width = ICON_WIDTH;
 canvas.height = ICON_HEIGHT;
 const picaCanvas = await pica().resize(img, canvas, { alpha: true });

 picaCanvas.toBlob((blob) =&gt; {
 const nextFile = new File([blob], previewIcon.name, {
 type: previewIcon.type,
 lastModified: Date.now(),
 });
 onChangeIcon(nextFile);
 handleCloseIsOpen();
 });

 }, [previewIcon, onChangeIcon]);</code></pre> これで期待する画像にリサイズが出来ます。お疲れ様でした。 <h2 id="h1afe451c43">さいごに</h2>今回は、Next.jsでアイコンのリサイズ機能を実装する方法をご紹介しました！Reactは色々とライブラリがあって便利ですね。今回の記事が誰かの参考になれば幸いです。

Next.js（React）でアイコンのリサイズ機能をサクッと実装する方法

おはこんばんは。最近、&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】人気記事一覧を表示してみた

おはこんにちばんは。今回は Next.js&nbsp;で OGP画像 の動的生成をしてみました！ 自作したブログなどをどうせなら Twitter や SNS 等の SNS にシェアした際に、OGP 用画像を表示して視覚的にもアピールしたいですよね！分かります。私もそうでした。でも、どうやってページ毎に OGP画像 を生成すればいいのか分からんですよね。 そこで、今回は Next.js&nbsp;で Vercel にデプロイ時のOGP画像を動的に生成する方法を解説しようと思います。 <a style="color:#24292e" href="https://github.com/IshinoJun/sample-ogp" target="_blank" rel="noopener noreferrer">サンプルコードはこちら</a>。 <h2 id="hfe5a8eaaf7">実行環境</h2><ul><li>Next.js 10.0.0</li><li>React 17.0.1</li><li>Canves 2.6.1</li></ul> <h2 id="he0510dbd09">必要なライブラリをインストール</h2>今回は Next.js のサーバーサイド の処理で画像生成していくので、<a href="https://github.com/Automattic/node-canvas" target="_blank" rel="noopener noreferrer"> </a><a href="https://github.com/Automattic/node-canvas" target="_blank" rel="noopener noreferrer">node-canvas</a> というライブラリを利用します。サーバサイドで Canvas が利用できるライブラリです。<pre><code>yarn add canvas</code></pre> <h2 id="h0909947c4e">プロジェクトの設定</h2>次にページ毎で動的に画像生成が行われるか、確認用の静的なページを雑に作成しておきます。既にそういったページがある方はスルーでOKです！<pre><code>./pages / [dynamic] /index.ts

import { GetStaticPaths, GetStaticProps, NextPage } from 'next'
import React from 'react'
import { useRouter } from 'next/router';

const DynamicPage: NextPage = () =&gt; {
 const router = useRouter();
 return (
 &lt;div&gt;
 &lt;h1&gt;{router.query.dynamic}&lt;/h1&gt;
 &lt;/div&gt;
 )
}

export const getStaticPaths: GetStaticPaths = async () =&gt; {
 const paths = [...Array(10)].map((_, index) =&gt; ({
 params: {
 dynamic: `${index}`,
 },
 }))
 
 return { paths, fallback: false };
}

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

export default DynamicPage</code></pre> <h2 id="h218374fe23">試しに画像生成してみる</h2>では、早速画像を試しに生成してみましょう！まずは、確認用で Next.js のAPI Router を利用して画像生成していきます。そのため、<code>http://localhost:3000/api/ページID/ogp</code>&nbsp;がエンドポイントの API を作成します。 <pre><code>./pages/api/[dynamic]/ogp.ts

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

 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");

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

 const buffer = canvas.toBuffer();

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

export default createOgp;</code></pre> では、早速エンドポイント（&nbsp;<code>http://localhost:3000/api/ページID/ogp</code>&nbsp;）をブラウザで叩いてみましょう！以下のような画像が表示されれば成功です。画像サイズは調べた感じ、縦630px×横1200px が推奨サイズのようなのでこのサイズにしました。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/%E5%88%9D%E6%9C%9Fogp%E7%94%BB%E5%83%8F.png" alt=""> <h2 id="h4bccc3547b">文字を表示してみる</h2>画像の表示が出来たと思うので、ブログのタイトルなどを表示するための文字を表示してみましょう！ まずは、環境依存によってフォントが変わらないようにフォントを用意します。今回は適当にIPAから ipagp.ttf を拾ってきてルートのfontフォルダに配置しました。Google Fontの<a style="color:#6c63ff;background-color:#ffffff" href="https://fonts.google.com/?subset=japanese" target="_blank" rel="noopener noreferrer">ここ</a>とか使うのもありかもですね。 （フォントにはライセンスがあるので、利用時はライセンスの確認を必ずしてくださいね） では、以下のように先程のコードを変えてみましょう！<pre><code>./pages/api/[dynamic]/ogp.ts

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

 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");
 ctx.fillStyle = "#FFF";
 ctx.fillRect(DX, DY, WIDTH, HEIGHT);

 registerFont(path.resolve("./fonts/ipagp.ttf"), {
 family: "ipagp",
 });
 ctx.font = "60px ipagp";
 ctx.fillStyle = "#000000";
 ctx.textAlign = "center";
 ctx.textBaseline = "middle";
 ctx.fillText("わしはOGP画像を生成したい！！！！！", 600, 300);

 const buffer = canvas.toBuffer();

 res.writeHead(200, {
 "Content-Type": "image/png",
 "Content-Length": buffer.length,
 });
 res.end(buffer, "binary");
};</code></pre> 以下のように熱いメッセージが表示されれば成功です。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/OGP%E7%94%BB%E5%83%8F%E3%81%9D%E3%81%AE%EF%BC%92.png" alt=""> <h2 id="h0d3d6971bc">背景画像を変えてみる</h2>良い感じに画像が生成できるようになりましたね。ただ、これだとちょっと寂しいので背景画像を変えてみましょう！背景画像はルートの <code>public/ogp.jpg</code>に今回は配置しました。 では、以下のように先程のコードを変えてみましょう！ <pre><code>./pages/api/[dynamic]/ogp.ts

const createOgp = async (
 req: NextApiRequest,
 res: NextApiResponse
): Promise&lt;void&gt; =&gt; {
 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");
 const backgroundImage = await loadImage(path.resolve("./public/ogp.jpg"));
 ctx.drawImage(backgroundImage, DX, DY, WIDTH, HEIGHT);

 registerFont(path.resolve("./fonts/ipagp.ttf"), {
 family: "ipagp",
 });

 ctx.font = "60px ipagp";
 ctx.fillStyle = "#000000";
 ctx.textAlign = "center";
 ctx.textBaseline = "middle";
 ctx.fillText("わしはOGP画像を生成したい！！！！！", 600, 300);

 const buffer = canvas.toBuffer();

 res.writeHead(200, {
 "Content-Type": "image/png",
 "Content-Length": buffer.length,
 });
 res.end(buffer, "binary");
};</code></pre> 以下のように背景が変われば成功です！ <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/OGP%E3%81%9D%E3%81%AE%EF%BC%93.png" alt=""><h2 id="h6ce1ff42c0"> 動的にテキストを表示してみる</h2>ここまできたら、あとはテキストをページ毎に変えるだけです。では、以下のように先程のコードを変えてみましょう！ <pre><code>./pages/api/[dynamic]/ogp.ts

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 { dynamic } = req.query;

 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/ipagp.ttf"), {
 family: "ipagp",
 });

 const backgroundImage = await loadImage(
 path.resolve("./public/ogp.jpg")
 );

 ctx.drawImage(backgroundImage, DX, DY, WIDTH, HEIGHT);
 ctx.font = "60px ipagp";
 ctx.textAlign = "center";
 ctx.textBaseline = "middle";

 const title =
 String(dynamic) + "のページのOGPだよーーー";

 const lines = createTextLines(canvas, title);
 lines.forEach((line, index) =&gt; {
 const y = 314 + 80 * (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");
};</code></pre> 以下でページIDを取得しています。<pre><code> const { dynamic } = req.query;</code></pre> それをtitleに渡しているので、動的に変わっている感じです。ここはアプリ毎に変えるといいですね。 あと、テキストが長いとはみ出てしまうので、<code>createTextLines</code>でテキストを分割するようにしています。<pre><code> const title =
 String(dynamic) + "のページのOGPだよーーー";

 const lines = createTextLines(canvas, title);
 lines.forEach((line, index) =&gt; {
 const y = 314 + 80 * (index - (lines.length - 1) / 2);
 ctx.fillText(line, 600, y);
 });</code></pre> 以下のように ページID 毎にテキストが変われば成功です！ <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/OGP%E7%94%BB%E5%83%8F%E3%81%9D%E3%81%AE%EF%BC%94.png" alt=""> <h2 id="hccbcfd129c">画像を出力するようにする</h2>ここまでで画像生成は出来るようになりました。ただ、静的サイトなどでは毎回エンドポイントを叩いて画像生成する必要もないのでビルド時のみ実行し、指定フォルダに出力するようにします。 今回はルートのpublicにogpというフォルダを作成し（.gitkeepは作成しておいてください）、そこのフォルダに生成した画像を出力するようにします。またAPI Router も利用する必要がなくなるので、<code>/utils/server/ogpUtils.ts</code>に今まで実装してきた処理を移行します。 では、以下のように先程のコードを変えてみましょう！ <pre><code>./utils/server/ogpUtils.ts&nbsp;

import { createCanvas, registerFont, loadImage, Canvas } from "canvas";
import * as path from "path";
import fs from "fs";

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 (dynamic:number): Promise&lt;void&gt; =&gt; {

 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/ipagp.ttf"), {
 family: "ipagp",
 });

 const backgroundImage = await loadImage(path.resolve("./public/ogp.jpg"));

 ctx.drawImage(backgroundImage, DX, DY, WIDTH, HEIGHT);
 ctx.font = "60px ipagp";
 ctx.textAlign = "center";
 ctx.textBaseline = "middle";

 const title = dynamic + "のページのOGPだよーーー";

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

 const buffer = canvas.toBuffer();
 fs.writeFileSync(path.resolve(`./public/ogp/${dynamic}.png`), buffer);

};

export default createOgp;</code></pre> <pre><code>./pages / [dynamic] /index.ts

import { GetStaticPaths, GetStaticProps, NextPage } from 'next'
import React from 'react'
import { useRouter } from 'next/router';
import Head from 'next/head';
import fetchWrapper from '../../utils/FetchUtils';

const DynamicPage: NextPage = () =&gt; {
 const router = useRouter();
 const baseUrl = process.env.NEXT_PUBLIC_BASE_URL ?? '';
 const { dynamic } = router.query; 

 return (
 &lt;&gt;
 &lt;Head&gt;
 &lt;title&gt;Create Next App&lt;/title&gt;
 &lt;link rel="icon" href="/favicon.ico" /&gt;
 &lt;meta property="og:image" key="ogImage" content={`${baseUrl}/ogp/${dynamic}.png`} /&gt;
 &lt;meta name="twitter:card" key="twitterCard" content="summary_large_image" /&gt;
 &lt;meta name="twitter:image" key="twitterImage" content={`${baseUrl}/ogp/${dynamic}.png`} /&gt;
 &lt;/Head&gt;
 &lt;div&gt;
 &lt;h1&gt;{dynamic}のページだよ&lt;/h1&gt;
 &lt;/div&gt;
 &lt;/&gt;
 )
}


export const getStaticPaths: GetStaticPaths = async () =&gt; {
 const paths = [...Array(10)].map((_, index) =&gt; ({
 params: {
 dynamic: `${index}`,
 },
 }))
 
 return { paths, fallback: false };
}

export const getStaticProps: GetStaticProps = async (context) =&gt; {
 [...Array(10)].forEach((_, index) =&gt; {
 void createOgp(index);
 })

 return {
 props: {},
 }
}

export default DynamicPage</code></pre> まず、画像生成APIですが、以下のように <code>fs</code> を利用し指定のフォルダに生成した画像を出力するようにしています。<pre><code> fs.writeFileSync(path.resolve(`./public/ogp/${id}.png`), buffer);</code></pre> そして該当のページで画像生成の処理をビルド時に実行するようにしています。動的に変わる要素を引数で受け取るようにしています。<pre><code>export const getStaticProps: GetStaticProps = async (context) =&gt; {
 [...Array(10)].forEach((_, index) =&gt; {
 void createOgp(index);
 })

 return {
 props: {},
 }
}</code></pre> <h2 id="haf11b5c13f">本番設定</h2>ローカルでは動作するようになりましたが、まだ Vercel 環境では動作しません。 ルートに <code>canvas_lib64</code> というフォルダを作成し、<a href="unsafe:[object Object]">このライブラリ</a>を入れてあげます。次にデプロイ時に実行されるスクリプトを <code>package.json</code>に追加します。これで動作するはずです。<pre><code>./package.json

"now-build": "cp canvas_lib64/*so.1 node_modules/canvas/build/Release/ &amp;&amp; yarn build"</code></pre> <h2 id="hf2ff618d25">metaタグを追加してあげる</h2>ここまで出来たらあとは該当ページで <code>metaタグ</code>を追加してあげるだけです。これで Twitter でシェアする際、OGP画像と認識してくれます。 <pre><code>./pages / [dynamic] /index.ts

&lt;Head&gt;
 &lt;meta property="og:image" key="ogImage" content={`${baseUrl}/ogp/${dynamic}.png`} /&gt;
 &lt;meta name="twitter:card" key="twitterCard" content="summary_large_image" /&gt;
 &lt;meta name="twitter:title" content={`これはテストだよ`} /&gt;
 &lt;meta name="twitter:description" content={"これはテストだよ"} /&gt;
 &lt;meta name="twitter:image" key="twitterImage" content={`${baseUrl}/ogp/${dynamic}.png`} /&gt;
&lt;/Head&gt;</code></pre> <code>baseUrl</code>は環境変数で指定しています。<pre><code>./.env.local

NEXT_PUBLIC_BASE_URL="http://localhost:3000"</code></pre> <h2 id="he280c353ab">Vercelにデプロイしてみる</h2>該当リポジトリをimportしてあげます。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/vercel.png" alt=""> ここは特に変更せず、<code>Deploy</code> でOKです！これでデプロイされるはずです。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/%E8%A8%AD%E5%AE%9A.png" alt=""> ただ、環境変数を設定する必要があるので、以下で<code>NEXT</code><code>PUBLIC</code><code>BASE_URL</code>の値（サイトのドメイン）を設定してあげてください。また、環境変数を反映するためにもう一度デプロイし直してください！ <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0.png" alt=""> 最後に動作確認をします。<a href="https://cards-dev.twitter.com/validator" target="_blank" rel="noopener noreferrer">このページ</a>で該当ページのURLを入力して試してみてください。 以下のように表示されれば、成功です！お疲れ様でした。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/ogp-twitter.png" alt=""> <h2 id="h1afe451c43">さいごに</h2>動的に OGP画像 の生成を意外と簡単に実装出来ました。こういうの実装できるようになると楽しいですね！ <h2 id="h3de35099b3">参考</h2><a href="https://zenn.dev/dala/books/nextjs-firebase-service" target="_blank" rel="noopener noreferrer">https://zenn.dev/dala/books/nextjs-firebase-service</a>

【Next.js × Vercel】OGP画像を動的生成してみた

おはこんにちばんは。Next.jsにAdobe Fontsに対応してみました。 Adobe fontsで日本語（東アジアの言語）を含むフォントを選択した場合、スクリプトの埋め込みを求められるので、その対応手順になります。 <a style="color:#0366d6" href="https://github.com/IshinoJun/sample-next-adobe-web-font" target="_blank" rel="noopener noreferrer">サンプルコードはこちら</a>。 <h2 id="hfe5a8eaaf7">実行環境</h2><ul><li>Next.js 10.0.0</li><li>React 17.0.1</li></ul> <h2 id="h1c68c77870">AdobeFontsのプロジェクトIDを環境変数に定義</h2>まずはAdobeFontsでプロジェクトIDを取得してください。 それをルート配下の .env.local に以下のように定義してあげてください。<pre><code>NEXT_PUBLIC_KID_ID=&lt;PROJECT_ID&gt;</code></pre> <h2 id="h6fffc0d37f">フォントを読み込むスクリプトを定義</h2>これはAdobeFonts公式のサンプルをそのまま利用します。kitIdの部分は環境変数に書き換えています。 サンプルはルート配下にそのスクリプトを作成します。<pre><code>./adobeLoader

const adobeLoader = (d) =&gt; {
 var config = {
 kitId: process.env.NEXT_PUBLIC_KID_ID,
 scriptTimeout: 3000,
 async: true,
 },
 h = d.documentElement,
 t = setTimeout(function () {
 h.className = h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive";
 }, config.scriptTimeout),
 tk = d.createElement("script"),
 f = false,
 s = d.getElementsByTagName("script")[0],
 a;
 h.className += " wf-loading";
 tk.src = "https://use.typekit.net/" + config.kitId + ".js";
 tk.async = true;
 tk.onload = tk.onreadystatechange = function () {
 a = this.readyState;
 if (f || (a &amp;&amp; a != "complete" &amp;&amp; a != "loaded")) return;
 f = true;
 clearTimeout(t);
 try {
 Typekit.load(config);
 } catch (e) {}
 };
 s.parentNode.insertBefore(tk, s);
};

export default adobeLoader;</code></pre> <h2 id="hf051d4c4f3">AdobeFontsのスクリプトを読み込む</h2>次にブラウザ側の処理で1度AobeFontsのスクリプトを読み込む必要があるので、_app.tsx のuseEffect で一度実行するようにします。 サーバーサイド側で実行してしまうと、documentが無くて落ちるので注意しましょう。<pre><code>./pages/_app.tsx

import adobeLoader from "../adobeLoader";

useEffect(() =&gt; {
 if (process.browser) adobeLoader(document);
}, [])</code></pre> <h2 id="h6c094c4b4b">CSSのフォント指定</h2>最後はCSSを指定するだけです。今回はグローバルに以下のCSSを指定しています。<pre><code>font-family: 'fot-tsukuardgothic-std', sans-serif;
font-style: normal;
font-weight: 400;</code></pre> <h2 id="hab0ca1fc2c">チラつき対応</h2>そうなんです。実はこのままだとAobeFontsをロードする前に1度デフォルトのフォントが表示されてしまい、以下のように一瞬チラつきます。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/1030c1223966ddc2597064470df5a125.gif" alt=""> この対策にはAobeFontsの読み込み完了後、htmlタグに.wf-activeというclassが挿入されるので、以下のように対応すると改善されます。<pre><code>html {
 visibility: hidden;
}
html.wf-active {
 visibility: visible;
}</code></pre> これで終了です。お疲れ様でした。 <h2 id="h1afe451c43">さいごに</h2>今回は知り合いに相談されて色々調べてみましたが、あまり参考となる情報がなかったので取り敢えずで対応してみました。 もっといい方法ある気がするw <h2 id="h3de35099b3">参考</h2><a href="https://qiita.com/hirossyi73/items/6551bc32f0d8c2e56092" target="_blank" rel="noopener noreferrer">https://qiita.com/hirossyi73/items/6551bc32f0d8c2e56092</a>

【Next.js】Adobe Fontsに対応してみた

おはこんにちばんは。Next.jsで実装した静的サイトのサイトマップを生成してみました。 その手順を記載します。<a style="color:#24292e" href="https://github.com/IshinoJun/sample-sitemap" target="_blank" rel="noopener noreferrer">サンプルコードはこちら</a>。 <h2 id="hfe5a8eaaf7">実行環境</h2><ul><li>Next.js 10.0.0</li><li>React 17.0.1</li></ul> <h2 id="h0909947c4e">プロジェクトの設定</h2>まずは、雑に静的ページを生成します。<pre><code>./pages / [dynamic] /index.js

import { GetStaticPaths, GetStaticProps, NextPage } from 'next'
import React from 'react'
import { useRouter } from 'next/router';

const DynamicPage: NextPage = () =&gt; {
 const router = useRouter();
 return (
 &lt;div&gt;
 &lt;h1&gt;{router.query.dynamic}&lt;/h1&gt;
 &lt;/div&gt;
 )
}

export const getStaticPaths: GetStaticPaths = async () =&gt; {
 const paths = [...Array(10)].map((_, index) =&gt; ({
 params: {
 dynamic: `${index}`,
 },
 }))
 
 return { paths, fallback: false };
}

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

export default DynamicPage</code></pre> <h2 id="hc2e1b5db24">packageを追加</h2>今回は <code>next-sitemap</code> というpackageを利用します。<pre><code>yarn add next-sitemap -D</code></pre> 次にルート配下に <code>next-sitemap.js</code> という設定ファイルを作成します。<pre><code>module.exports = {
 siteUrl: "https://www.example.com",
 generateRobotsTxt: true,
};</code></pre> 最後にプロジェクトがビルドされるたびにサイトマップ生成をするようにするため、<code>package.json</code>の<code>script</code>に以下を追加します。<pre><code>"postbuild": "next-sitemap"</code></pre> <h2 id="ha166e75e87">プロジェクトをビルドする</h2><pre><code>yarn build</code></pre> そうするとpublic配下に以下のような<code>robots.txt</code>と<code>sitemap.xml</code>に生成されたかと思います。サイトマップにはすべての静的ページが記載されています。 <pre><code>./public/robots.txt

User-agent: *
Allow: /
Host: https://www.example.com
Sitemap: https://www.example.com/sitemap.xml</code></pre> <pre><code>./public/sitemap.xml

&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"&gt;
&lt;url&gt;&lt;loc&gt;https://www.example.com/&lt;/loc&gt;&lt;changefreq&gt;daily&lt;/changefreq&gt;&lt;priority&gt;0.7&lt;/priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;/lastmod&gt;&lt;/url&gt;
&lt;url&gt;&lt;loc&gt;https://www.example.com/0&lt;/loc&gt;&lt;changefreq&gt;daily&lt;/changefreq&gt;&lt;priority&gt;0.7&lt;/priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;/lastmod&gt;&lt;/url&gt;
&lt;url&gt;&lt;loc&gt;https://www.example.com/1&lt;/loc&gt;&lt;changefreq&gt;daily&lt;/changefreq&gt;&lt;priority&gt;0.7&lt;/priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;/lastmod&gt;&lt;/url&gt;
&lt;url&gt;&lt;loc&gt;https://www.example.com/2&lt;/loc&gt;&lt;changefreq&gt;daily&lt;/changefreq&gt;&lt;priority&gt;0.7&lt;/priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;/lastmod&gt;&lt;/url&gt;
&lt;url&gt;&lt;loc&gt;https://www.example.com/3&lt;/loc&gt;&lt;changefreq&gt;daily&lt;/changefreq&gt;&lt;priority&gt;0.7&lt;/priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;/lastmod&gt;&lt;/url&gt;
&lt;url&gt;&lt;loc&gt;https://www.example.com/4&lt;/loc&gt;&lt;changefreq&gt;daily&lt;/changefreq&gt;&lt;priority&gt;0.7&lt;/priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;/lastmod&gt;&lt;/url&gt;
&lt;url&gt;&lt;loc&gt;https://www.example.com/5&lt;/loc&gt;&lt;changefreq&gt;daily&lt;/changefreq&gt;&lt;priority&gt;0.7&lt;/priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;/lastmod&gt;&lt;/url&gt;
&lt;url&gt;&lt;loc&gt;https://www.example.com/6&lt;/loc&gt;&lt;changefreq&gt;daily&lt;/changefreq&gt;&lt;priority&gt;0.7&lt;/priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;/lastmod&gt;&lt;/url&gt;
&lt;url&gt;&lt;loc&gt;https://www.example.com/7&lt;/loc&gt;&lt;changefreq&gt;daily&lt;/changefreq&gt;&lt;priority&gt;0.7&lt;/priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;/lastmod&gt;&lt;/url&gt;
&lt;url&gt;&lt;loc&gt;https://www.example.com/8&lt;/loc&gt;&lt;changefreq&gt;daily&lt;/changefreq&gt;&lt;priority&gt;0.7&lt;/priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;/lastmod&gt;&lt;/url&gt;
&lt;url&gt;&lt;loc&gt;https://www.example.com/9&lt;/loc&gt;&lt;changefreq&gt;daily&lt;/changefreq&gt;&lt;priority&gt;0.7&lt;/priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;/lastmod&gt;&lt;/url&gt;
&lt;/urlset&gt;</code></pre> <h2 id="h7005ec096e">Google Serch Consoleからサイトマップを登録する</h2>あとは、Google Serch Consoleの管理画面からサイトマップを追加します。https://www.example.com/sitemap.xml で登録可能です。 正しく実装出来ていれば、以下のようにURLを検出してインデックスされるはずです。お疲れ様でした。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/sitemap.png" alt=""> <h2 id="h1afe451c43">さいごに</h2>このブログ自体のサイトマップを作成していなかったので、実装してみました。とても簡単ですね。 <h2 id="h3de35099b3">参考</h2><a href="https://www.iamvishnusankar.com/blogs/how-to-generate-sitemap-for-nextjs-projects/" target="_blank" rel="noopener noreferrer">https://www.iamvishnusankar.com/blogs/how-to-generate-sitemap-for-nextjs-projects/</a>

【Next.js】静的サイトのサイトマップを生成してみた

おはこんにちばんは。<a href="https://github.com/IshinoJun/nextjs-storybook" target="_blank" rel="noopener noreferrer">Next.jsにStorybookを導入</a>してみました。その手順を記載します。 <h2 id="hfe5a8eaaf7">実行環境</h2><ul><li>Next.js 9.5.3</li><li>React 16.13.1</li><li>Storybook/react 6.0.12</li><li>Node.js 12.18.0</li></ul> <h2 id="hc2e1b5db24">packageを追加</h2>いくつか便利なアドオンも追加しています。 <pre><code>yarn add -D @storybook/react @storybook/addons @storybook/addon-a11y @storybook/addon-actions @storybook/addon-info @storybook/addon-knobs @storybook/addon-links @storybook/addon-storyshots @types/storybook__addon-info @types/storybook__addon-storyshots @types/storybook__react</code></pre> <h2 id="hfa896f3411">設定ファイルを追加</h2>以下、必要な設定を追加します。 <pre><code>.storybook/main.js

const path = require("path");
const SRC_PATH = path.join(__dirname, '../src');

module.exports = {
 stories: ['../src/**/*.stories.tsx'],
 addons: [
 '@storybook/addon-a11y',
 '@storybook/addon-actions',
 '@storybook/addon-knobs',
 '@storybook/addon-links',
 ],
 webpackFinal: async(config, {configType}) =&gt; {
 config.module.rules.push({
 test: /\.(ts|tsx)$/,
 include: [SRC_PATH],
 use: [
 {
 loader: require.resolve('babel-loader'),
 options: {
 presets: [['react-app', { flow: false, typescript: true }]],
 }
 },
 { loader: require.resolve('react-docgen-typescript-loader') }
 ]
 });
 config.resolve.extensions.push('.ts', '.tsx');
 return config;
 }
};</code></pre> <pre><code>.storybook/preview.js

import { addDecorator } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { withKnobs } from '@storybook/addon-knobs';
import { withA11y } from '@storybook/addon-a11y';

addDecorator(withInfo);
addDecorator(withKnobs);
addDecorator(withA11y);</code></pre> <h2 id="hc389788d77">コンポーネントとStroyを追加</h2>簡単なコンポーネントとStoryを以下の通り追加します。 Stroyの命名は、<code>Component名 + .stories.tsx</code>&nbsp;になります。 <pre><code>src/components/Button.tsx

import * as React from "react";

interface Props {
 text:string;
}

type ButtonProps = React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt; &amp; Props;

const Button: React.FC&lt;ButtonProps&gt; = (props:ButtonProps) =&gt; {
 const { text } = props;

 return (
 &lt;button {...props}&gt;{text}&lt;/button&gt;
 );
};

export default Button;</code></pre> <pre><code>src/components/Button.stories.tsx

import { Meta } from "@storybook/react/types-6-0";
import React from "react";
import Button from "./Button";

export default {
 title: "Button",
 component: Button,
} as Meta;

export const Default = (): JSX.Element =&gt; &lt;Button text="test" /&gt;;</code></pre> <h2 id="hb047d44edf">Storybookを起動</h2>packageに以下を追加して起動できるようにします。 <pre><code>package.json

"scripts": {
 "storybook": "start-storybook -p 6006",
 "build:storybook": "build-storybook -o build/storybook"
 }</code></pre> yarn storybook&nbsp;&nbsp;で起動し、<a style="color:#6200ac" href="http://localhost:6006/" target="_blank" rel="noopener noreferrer">http://localhost:6006</a>&nbsp;にアクセス出来たら成功です。以下のような画面が出るはずです。お疲れ様でした。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/storybook.png" alt=""> <h2 id="h1afe451c43">さいごに</h2>たまたま触る気があったのでまとめてみました。調べると意外と古い情報が記事が多くありました。 例えば、Storybookの5系から推奨されるCFSで書かれていなかったり、設定ファイルが7系で消えるconfig.jsやaddons.jsを利用しているなど。移り変わりが早いですね... なので、今回は2020/9/20時点で推奨される記法で書いたつもりです。 また良き情報があれば発信したいと思います。 以上です。最後まで読んで頂きありがとうございます。

【Next.js】Storybookを導入してみた

おはこんにちばんは。<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キー周りの管理は基本的に自己責任となるので注意が必要ですね。（てかブログ書くの大変）

Next.js