<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>

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

おはこんにちばんは。今回は 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>

Vercel

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

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

Vercel

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

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

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