<p><strong><u>※ 2022年10月2日時点の情報です</u></strong><br><br>FacebookのGraph APIは開発モードであれば、&nbsp;<a href="https://developers.facebook.com/docs/app-review/support/faqs#faq_959251624152434" target="_blank" rel="noopener noreferrer">全ての機能が利用できる</a>ようです。なので、<a href="https://developers.facebook.com/docs/graph-api/reference/user/friends?locale=ja_JP" target="_blank" rel="noopener noreferrer">User Friends API</a> を叩けば友人の情報を取得出来そうですが、こんなことがおきました。</p><pre><code>{
&nbsp;&nbsp;"data": [
&nbsp;&nbsp;],
&nbsp;&nbsp;"summary": {
&nbsp;&nbsp;&nbsp;&nbsp;"total_count": 1
&nbsp;&nbsp;}
}</code></pre><p><br>そうなんです、<code>data</code>が空なのです... 同じアプリを許可しているアカウント同士が友人となっているのにです。。。<br></p><h2 id="h16aae2a474">テストアプリを作成する</h2><p>公式のドキュメントやコミュニティなど色々と調べた結果、<a href="https://stackoverflow.com/questions/70791826/empty-test-user-friend-list-from-facebook-graph-api" target="_blank" rel="noopener noreferrer">この情報</a>に巡り会えました。<br><br>「<strong>テストアプリを作れ</strong>」<br><br>テストアプリ is 何 ？ 状態でしたが、Facebook の開発管理画面の左上を押してみるとこんなのがありました。<br><img src="https://images.microcms-assets.io/assets/7758ea7c4c9e428cbf0a23d966011ccb/349910557f3049c292c4a3fca58c3917/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-10-02%2018.47.29.png" alt=""><br>やっと見つけました。<strong>テストアプリ</strong>という概念があるのですね... そりゃあそうかとなりましたが、この辺りの情報が全くなかったので気づきませんでした。<br></p><h2 id="h6017d556b7">テストユーザーを作成してみる</h2><p>テストアプリに切り替えている状態で、<br><br><code>役割 &gt; テストユーザー</code> に遷移し、テストユーザーを作成します。<br><img src="https://images.microcms-assets.io/assets/7758ea7c4c9e428cbf0a23d966011ccb/7a3e82a1c4d443d7a2dfe145d79f4854/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-10-02%2018.47.29.png" alt=""><br>そしてオプションから必要な権限を付与し、アカウント間で友人同士にします。<br><img src="https://images.microcms-assets.io/assets/7758ea7c4c9e428cbf0a23d966011ccb/fc1e227ce39b45bb8a7dedfb67f6357f/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-10-02%2018.59.55.png" alt=""><br><img src="https://images.microcms-assets.io/assets/7758ea7c4c9e428cbf0a23d966011ccb/310d8b1f597449be8a41307f84dae1eb/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-10-02%2019.03.07.png" alt=""><br></p><h2 id="ha1b20a45ad">友人情報を取得してみる</h2><p>これで事前準備は完了したので、実際に取得出来るか確認してみます。<br><br>オプションからテストユーザーでログインし、<a style="color:#4b4f56" href="https://developers.facebook.com/tools/explorer/?method=GET&amp;path=me%2Ffriends&amp;version=v15.0" target="_blank" rel="noopener noreferrer">グラフAPIエクスプローラ</a>にアクセスします。そして、右上の<code>送信</code>をクリックします。<br><br>以下のように<code>data</code>が取れていれば成功です！お疲れ様でした。</p><pre><code>{
&nbsp;&nbsp;"data": [
&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"name": "Maria Alhfdghedhcij Rosenthalberg",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"id": "103004972592121"
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;],
&nbsp;&nbsp;"paging": {
&nbsp;&nbsp;&nbsp;&nbsp;"cursors": {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"before": "QVFIUm1jcU9mWXhTS1p4UVpfellYb0ZAlNWl1SzVPVkJ3UFF0WFd6cURGekV0YVlxZAEg0dFgzd01TV3ZAjLVd4SWhtNXh4aEpXVGZANbExMTTJ2TUxscHNXU01R",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"after": "QVFIUm1jcU9mWXhTS1p4UVpfellYb0ZAlNWl1SzVPVkJ3UFF0WFd6cURGekV0YVlxZAEg0dFgzd01TV3ZAjLVd4SWhtNXh4aEpXVGZANbExMTTJ2TUxscHNXU01R"
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;},
&nbsp;&nbsp;"summary": {
&nbsp;&nbsp;&nbsp;&nbsp;"total_count": 1
&nbsp;&nbsp;}
}</code></pre><p><br></p><h2 id="ha214098e44">まとめ</h2><p>Facebook関連の情報があまりにもなく、地味にハマりました。誰かの参考になれば幸いです。</p>

FacebookのGraph APIを開発モードで利用し、User Friendsを取得する方法

<p>個人サイトを作り直しました。<a href="https://archived.ji23-dev.com/" target="_blank" rel="noopener noreferrer">前のサイトはこちら</a><br><br>今回、作り直した理由としては以下になります。</p><ul><li>先週の台風で旅行の予定が無くなり、まとまった時間が出来たこと</li><li>前回と異なり、シンプルで統一したデザインで作りたくなったこと</li><li>前回のはコードが汚いので綺麗にしたかったこと</li></ul><p>どんな感じで作成したかをつらつらと書いていきます。<br></p><h2 id="h137eebeb08">機能の整理</h2><p>このサイトでは、プロフィールとゆる〜く技術的なことを配信出来れば良いかなっとなったので、それ以外の機能は削ることにしました。実際、問い合わせ置いてもTwitterのDMから連絡来るのがほとんどだったりするので...<br></p><h2 id="hb570a6676d">デザイン</h2><p>デザイン経験は無いですが、今回は適当に調べながらFigmaで作りました。<br><br>デザインを作成する際は、「余白や色の統一性」、「ユーザーにメリットのない情報は排除すること」を意識しました。シンプルなサイトなので、ベースとメインカラーはダークブルー系、アクセントカラーは水色の2色をベースにし、まとまりを出すようにしています。<br><br>実際作ったやつです。多少実装と異なります。<br><img src="https://images.microcms-assets.io/assets/7758ea7c4c9e428cbf0a23d966011ccb/474d952f94c94fc6b6d7dba0479df2e6/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-09-27%200.38.53.png" alt=""><br></p><h3 id="hd7d3286564">こだわり</h3><p>シンプル過ぎてもつまらないので、<a href="https://ji23-dev.com/" target="_blank" rel="noopener noreferrer">トップ</a>はタイピング風アニメーションや背景にグラデーションを入れました。これで少し最近のサイトっぽくなった気がしていますw<br><img src="https://images.microcms-assets.io/assets/7758ea7c4c9e428cbf0a23d966011ccb/ab3e4213d5f94e72a6db3a3d93a5563a/ji23-dev.gif" alt=""><br><br>ブログのアイキャッチ画像には、OGP同様にテンプレ背景画像とタイトルのみにしました。アイキャッチ画像の作成が不要になり、ユーザーにとって必要な情報だけを伝えることができます。<br><img src="https://images.microcms-assets.io/assets/7758ea7c4c9e428cbf0a23d966011ccb/471520b1740347a0b0c8fca0a5bbe682/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-09-27%201.46.16.png" alt=""><br></p><h2 id="h922edff87b">実装</h2><p>今回も<span style="color:#24292f">&nbsp;React / Next.js / TypeScript / Vercel / microCMS のJAMstack構成です。</span><a style="color:#24292f" href="https://github.com/IshinoJun/JI23-DEV-v2.0" target="_blank" rel="noopener noreferrer">コードはこちら</a><br><br>CSSフレームワークには利用したことがなかった <a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">Tailwind CSS</a> を利用しました。統一されたデザインシステムで書けるので個人的には好きでした。Classの可読性悪くなるのは確かでしたが慣れな気も...<br><br>とはいえ、前回より読みやすいサイトが3日くらいで実装出来たのは <a style="background-color:#ffffff" href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">Tailwind CSS</a> のおかげなので、今後も必要に応じて利用していきたいです。<br></p><h2 id="ha214098e44">まとめ</h2><p>色々試せて楽しかった。肝心の記事が全く書けてないのでちゃんと書きます... </p>

個人サイトを作り直しました

<h2 id="h9707d3a59a">概要</h2><p>Next.jsでSentryを利用する際は<a href="https://docs.sentry.io/platforms/javascript/guides/nextjs/" target="_blank" rel="noopener noreferrer">公式ドキュメント</a>に従えば、比較的簡単に利用することが出来ます。<br><br>ただし、このままProduction環境にビルドするとSourceMapが公開されてしまいます。Sentryがスタックトレースを表示するために利用しているからです。（<a style="background-color:#ffffff" href="https://docs.sentry.io/platforms/javascript/sourcemaps/" target="_blank" rel="noopener noreferrer">参考</a>）<br>Devtool の <code>Sources</code> の<em><code>_N_E</code></em>からソースコードが確認可能な状況になってしまいます。このSourceMapはnext build時にSentryに送っておりビルド後は不必要であり、ソースコードが丸見えになるので隠蔽すべきです。<br><br>今回はこのビルド後に不必要なSourceMapの隠蔽方法をご紹介します。<br></p><h2 id="hb109fbdd18">対策</h2><h3 id="h44ed81e4d6">Vercel以外を利用している場合</h3><p>以下のようにビルド後にSourceMapを削除する処理を入れれば完了です。</p><pre><code>package.json

"postbuild": "find .next -name \\*.css.map -or -name \\*.js.map -delete",</code></pre><p><br></p><h3 id="h4fe5694d09">Vercelを利用している場合</h3><p>Next.js 12以降でVercelを利用してビルドした場合、上記対策だとビルドで落ちるようになります。（<a href="https://github.com/getsentry/sentry-webpack-plugin/issues/56#issuecomment-974294345" target="_blank" rel="noopener noreferrer">参考</a>）<br>恐らく、Vercel 環境では <code>/.next/server</code> 配下が Vercel 向けに特殊化されているからだと思われます。なので、<code>/.next/server</code> 以下はSourceMapの削除対象外とすれば良さそうですが、Vercel 環境がブラックボックスなので以下の対応をします。<br></p><h4 id="h73e2fc9b1f">1. hideSourceMapsを true にしてDevtoolから非表示にする</h4><p>公式の記載通り、以下の対応すればDevtoolから非表示にすることが可能です。（<a href="https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/" target="_blank" rel="noopener noreferrer">参考</a>）</p><pre><code>next.config.js

const moduleExports = {
  sentry: {
    hideSourceMaps: true,
  },
};</code></pre><p><br></p><h4 id="ha696858d5e">2. Source Mapへ直接アクセスされた場合は404にリライトする</h4><p>Devtoolから非表示出来ましたが、<code>_next/static/chunks/pages/xxx.js.map</code>を叩くとまだ直接アクセス出来てしまいます。<br>なので、以下のようにアクセスされた場合は404へリライトする処理を追加します。</p><pre><code>next.config.js

async rewrites() {
    return {
      beforeFiles: [
        {
          source: '/:path*.(js|css).map',
          destination: '/404',
        },
      ]
   }
}</code></pre><p><br></p><h2 id="h1afe451c43">さいごに</h2><p>今回は Next.jsでSentryを利用する際にSourceMapを隠蔽する方法 をご紹介しました。<br>見落としていると問題になる内容でした。ツールを追加した際は<span style="color:#24292e">ツール側の変更をちゃんと把握する必要がありますね。</span></p>

Next.jsでSentryを利用する際にSourceMapを隠蔽する方法

<h2 id="h9707d3a59a">概要</h2><p><a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">microCMS</a> ではブログなどの記事データをリッチエディタで入稿することが可能です。ただ、<span style="color:#16161d">APIではそれらが</span>生HTML<span style="color:#16161d">で返ってきます。</span><br><br><code>dangerouslySetInnerHTML</code> に渡せばレンダリングされますが、以下のようなケースもあると思います。<br></p><ul><li>Chakra UI などの定義されているコンポーネントを利用したい</li><li><span style="color:#16161d">class指定して</span>グローバルCSSを書きたくない</li><li>XSSの危険性があるから<code>dangerouslySetInnerHTML</code>を利用したくない</li></ul><p><br>今回はこれらを解決する<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の取得処理は省略しています。<br></p><h2 id="hfe5a8eaaf7">実行環境</h2><p>サンプルとして、<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> を利用します。<br></p><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><p><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のコンポーネントに変換できます。</p><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><p><br></p><h2 id="h49acf03970">microCMSのリッチエディタ（生HTML）に対応</h2><p>それでは、microCMSのリッチエディタ（生HTML）に対応していきます。<br></p><h3 id="hd8d793506b">インストール</h3><p>公式を参考に<a href="https://github.com/remarkablemark/html-react-parser#install" target="_blank" rel="noopener noreferrer">インストール</a>してください！<br></p><h3 id="h78fb6bf512">リッチエディタ（生HTML）をコンポーネントにパース</h3><p>コンポーネントを以下のように定義し、<code>parse</code>の処理を追加します。</p><pre><code>export const Markdown = (): JSX.Element =&gt; {
  return (
    &lt;Box &gt;
      {parse(source, options)}
    &lt;/Box&gt;
  );
};</code></pre><p><br>次に<code>parse</code> のoptionsについて説明します。optionsには、<code>replace</code> <span style="color:#24292f">と </span><code>domToReact</code>を利用します。<code>replace</code>はある要素をコンポーネントへ置き換えることができます。<code>domToReact</code>はその要素の子要素も再起的にコンポーネントへ置き換えることができます。<br><br>サンプルでh1だと、下記でコンポーネントに変換が可能です。こんな感じで良しなに変換内容の定義ができます。以上です。</p><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><p><br></p><h2 id="ha214098e44">まとめ</h2><p>microCMSのリッチエディタ（生HTML）をコンポーネントに変換する方法をご紹介しました。生HTMLを自由に加工出来ると拡張性が高くなるので良いですね。（このブログも対応したい）</p>

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

<p>今年も振り返りしておきます！</p><h2 id="hb52e6bbc10">仕事</h2><p><span style="color:#24292e">2019年7月から </span><a style="color:#24292e" href="https://www.kepple.co.jp/" target="_blank" rel="noopener noreferrer">株式会社ケップル</a><span style="color:#24292e">に所属し、あっという間に2年半くらいが経ちました。</span><br><br>前半は、主に要求仕様が複雑な機能の開発をしていました。<br>複雑な仕様を理解し、それを実装に落とし込むことは難しいことですが、脳を使いまくっている感があって楽しかったかなと思います。あまり頻繁にはやりたくないけどw<br><br>後半は、以前から希望していた 0-&gt;1 の開発を行うこととなりました 🎉<br>ただ、まさかのフロント 〜 インフラまで全て1人で開発することとなってしまったので、怒涛の日々を送っていました。その分、開発の立ち上げや認証まわり(OAuth)など 0-&gt;1 ならでは経験が出来ており、とても有意義でした。<br>今のところ予定位通り開発出来ているので、このままリリース出来るように頑張りたいと思います！！！<br></p><h2 id="h24a4d124d1">プライベート</h2><h3 id="hd033fd2d27">引っ越し</h3><p>この世に生まれてからずっと都内に住んでいたのですが、ほぼ会社に出社することもないので少し郊外へ引っ越しました。部屋も広くなったので、より仕事に集中出来そうです。<br></p><h3 id="h18f67c3fee">OSS活動</h3><p>後半から<a href="https://github.com/frouriojs/create-frourio-app" target="_blank" rel="noopener noreferrer">create-frourio-app</a>の開発を少しお手伝いしていました。普段の書いているコードとは全く異なり、とても勉強になることが多かったです。（めっちゃむずいけど）<br>今年はあまりコミット出来ませんでしが、来年は出来そうなので、もう少し貢献していきたいなと思います。<br></p><h3 id="h715aa40308">英語</h3><p>11月くらいから英語弱者なので、英語をまた学び直しています。ドキュメントなどを読む際に苦労しないくらいの英語力は最低限身につけていきたいです。<br></p><h3 id="h6cfaa47bdb">ブログ</h3><p>毎月は書けてはいないですが、今年は12記事書けました。頻繁に書けてないですが、継続出来たのは良かったなと思います。来年も最低限このペースをキープしていきたいです。<br></p><h2 id="h1afe451c43">さいごに</h2><p>今年は初めてやることが仕事とプライベートの共にあり、あっという間の1年でした。<br>来年はラスト20代なので、悔いがないように積極的に色々なことに挑戦していきたいと思います！！！<br><span style="color:#222222">それでは、みなさま、どうぞ良いお年をお迎えください！</span></p>

2021年の振り返り

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

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

<h2 id="h9707d3a59a">概要</h2><p><a href="https://github.com/nestjs/nest" target="_blank" rel="noopener noreferrer">NestJS</a> のログにスタック情報を追加します。<br><br>デバック時にどこで落ちているか確認をする際、ログからスタック情報を参照出来るのと便利です。<br><br>なお、今回は<a style="background-color:#ffffff" href="https://github.com/nestjs/nest" target="_blank" rel="noopener noreferrer">NestJS</a> の環境が構築されている前提でご説明します。<br></p><h2 id="hf031c5e696">実装方法</h2><h3 id="h3ce1a51dc0">HttpExceptionsFilter を実装</h3><p>NestJSの <a href="https://docs.nestjs.com/exception-filters" target="_blank" rel="noopener noreferrer">Exception filters</a><span style="color:#222222">は例外処理をキャッチし、その例外処理にカスタムの機能を追加することができます。</span><br><br>今回は その <a style="background-color:#ffffff" href="unsafe:[object Object]" target="_blank" rel="noopener noreferrer">Exception filters</a>を用いて、例外が発生する度にスタック情報をログに出力するようにします。<br></p><pre><code>import { ArgumentsHost, Catch, HttpException, Logger } from '@nestjs/common';
import { BaseExceptionFilter } from '@nestjs/core';

@Catch(HttpException)
export class HttpExceptionsFilter extends BaseExceptionFilter {
  private readonly logger = new Logger(HttpExceptionsFilter.name);

  catch(exception: HttpException, host: ArgumentsHost): void {
    super.catch(exception, host);
    const status = exception.getStatus();

    if (status &gt;= 500) {
      this.logger.error(exception.stack);
    } else {
      this.logger.warn(exception.stack);
    }
  }
}</code></pre><p><br>exceptionにはエラー情報が含まれます。その情報にスタックが含まれるので、それをログに出力するようにしています。ステータスが500以下は重要度的にも<span style="color:#303030">LogLevelを</span><code>warn</code>にしています。<br></p><h3 id="h012d97d4c5">MainにHttpExceptionsFilterを設定</h3><p>HttpExceptionsFilter をグローバルに適用するようにします。<br></p><pre><code>const { httpAdapter } = app.get(HttpAdapterHost);
app.useGlobalFilters(new HttpExceptionsFilter(httpAdapter));</code></pre><p><br></p><h3 id="h45437cb5d5">実行結果</h3><p>以下のようにエラー発生すると以下のログが出力されていれば成功です！</p><pre><code>[Nest] 2513&nbsp; - 2021/10/31 14:31:08&nbsp; &nbsp; WARN [HttpExceptionsFilter] UnauthorizedException: Unauthorized
... エラー箇所のスタック</code></pre><p><br></p><h2 id="ha214098e44">まとめ</h2><p><a style="background-color:#ffffff" href="https://github.com/nestjs/nest" target="_blank" rel="noopener noreferrer">NestJS</a> のログにスタック情報を追加する方法をご紹介しました。デバックが楽になるので良かったら追加してみてください。<br></p>

NestJS で LogにStack情報を追加する

<h2 id="h9707d3a59a">概要</h2><p><a href="https://github.com/nestjs/nest" target="_blank" rel="noopener noreferrer">NestJS</a> のログにリクエスト情報を追加します。<br><br>デバック時にどんなクエリで不具合が起きているのか確認をする際、ログからリクエスト情報を参照出来るので便利です。<br><br>なお、今回は<a style="background-color:#ffffff" href="https://github.com/nestjs/nest" target="_blank" rel="noopener noreferrer">NestJS</a> の環境が構築されている前提でご説明します。<br></p><h2 id="hf031c5e696">実装方法</h2><h3 id="he47cc28ec8">LoggerMiddleware を実装</h3><p>NestJSの <a style="background-color:#ffffff" href="https://docs.nestjs.com/middleware" target="_blank" rel="noopener noreferrer">Middleware</a><span style="color:#222222">はルートハンドラーの前に呼び出される関数です。コントローラーのエンドポイントへの処理前に特定の処理を挟めます。</span><br><br>今回は その<a style="background-color:#ffffff" href="https://docs.nestjs.com/middleware" target="_blank" rel="noopener noreferrer">Middleware</a>を用いて、リクエスト毎にリクエスト情報をログに出力するようにします。<br></p><pre><code>import { Injectable, Logger, NestMiddleware } from '@nestjs/common';
import { Request, Response } from 'express';

@Injectable()
export class LoggerMiddleware implements NestMiddleware {
  private readonly logger = new Logger(LoggerMiddleware.name);

  use(req: Request, _: Response, next: () =&gt; void): void {
    this.logger.log(this.createMessage(req));
    next();
  }

  private createMessage(req: Request): string {
    const { body } = req;
  
    const msg = `api request [url=${req.url}, method=${
      req.method
    }, body=${JSON.stringify(body)}, ip=${req.ip}]`;
    return msg;
  }
}</code></pre><p><br>NestJSの <a style="background-color:#ffffff" href="https://docs.nestjs.com/middleware" target="_blank" rel="noopener noreferrer">Middleware</a>はRequestを取得出来るので、その情報を元に今回は<code>method</code>, <code>body</code>, <code>clientIp</code> を出力するようにしています。<br></p><h3 id="hd6aa6878c1">AppModuleにLoggerMiddlewareを設定</h3><p><code>AppModule</code>に先ほど実装した <code>LoogerMiddleware</code>を設定します。これでリクエストの度に<code>LoogerMiddleware</code>が呼び出されるはずです。<br></p><pre><code>export class AppModule {
  configure(consumer: MiddlewareConsumer): void {
    consumer.apply(LoggerMiddleware).forRoutes('');
  }
}</code></pre><p><br></p><h3 id="h45437cb5d5">実行結果</h3><p>以下のようにエンドポイントを叩くと、<code>method</code>, <code>body</code>, <code>clientIp</code> が出力されていれば成功です！</p><pre><code>[Nest] 98030&nbsp; - 2021/10/30 22:23:55&nbsp; &nbsp; &nbsp;LOG [LoggerMiddleware] api request [url=/sample, method=GET, body={}, ip=::1]</code></pre><p><br></p><h2 id="ha214098e44">まとめ</h2><p><a style="background-color:#ffffff" href="https://github.com/nestjs/nest" target="_blank" rel="noopener noreferrer">NestJS</a> のログにリクエスト情報を追加する方法をご紹介しました。デバックが楽になるかもなので良かったら追加してみてください。<br><br>ただ、本番環境で上記ログを出すとパスワードといった情報も出てしまうので、以下のようにマスクをする処理を挟む必要があるかもです。（もう少し良いやり方ありそう）</p><pre><code>const { body } = req;
const nextBody = { ...body };
if ('password' in nextBody) {
  nextBody.password = '********';
}</code></pre><p><br></p>

NestJS で LogにRequest情報を追加する

<p><span style="color:#24292e">おはこんにちばんは。最近、</span>NextJS が出力したOpenAPI (Swagger)  によって記述された API 定義ファイルをもとに、Next.js でTypeScript の型や API クライアントを自動生成したいと思ったのですが、意外とまとまった資料がなかったのでその方法をご紹介します。今回は、openapi generator typescript-axios を元に利用します。<br><br>サンプルはこちら。（<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>）<br></p><h2 id="hed900658dc">環境</h2><ul><li>Node.js v12.18.0</li><li>macOS Big Sur</li></ul><p><br></p><h2 id="hb40c68615d">NextJS でAPIを用意</h2><p>こちらに関しては、前回ご紹介した <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>を修正していきます。<br></p><h3 id="h9133ad7bea">パッケージの導入</h3><p>APIの定義ファイルを出力する必要があるので、<code>Swagger</code> を導入します。</p><pre><code>yarn add @nestjs/swagger swagger-ui-express</code></pre><p><br>次に<code>main.ts</code>に以下の設定情報を追加します。</p><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><p><br>OpenAPI Generatorは API クライアントを生成する際に OperationId を参照しています。一方で nestjs/swagger は OperationIdを<span style="color:#333333">「Controller名 + メソッド名」で出力します。</span><br>なので、 API クライアントでアクセスする際、呼び出しが<code>exampleApi.controller.method</code> となり少しくどくなります。そこで<code>exampleApi.method</code><span style="font-family: Monaco, Courier New, monospace">と</span><span style="color:#333333">するために以下を行なっています。</span></p><pre><code>const options: SwaggerDocumentOptions = {
  operationIdFactory: (_: string, methodKey: string) =&gt; methodKey,
};</code></pre><p><br>最後にコントローラー毎にインスタンスを区切るためにタグを以下のように追加しましょう。</p><pre><code>./src/example/example.controller.ts

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

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

withSeparateModelsAndApi: true
apiPackage: 'api'
modelPackage: 'dto'
modelPropertyNaming: 'camelCase'
supportsES6: true
withInterfaces: true</code></pre><p><br></p><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"><br>出力するコマンドを追加</h3><p>APIエンドポイントの TypeScript の型 と API クライアント 自動生成するコマンドを追加します。<br>openapi generator は <code>openapi-generator-cli generate -g typescript-axios -i &lt;OpenAPI定義ファイル&gt;&nbsp;-o &lt;出力先&gt;</code>のようなコマンドで出力します。ただ、OpenAPI定義ファイルの出力先が本番や開発環境で変わる可能性があるので、<code>gulp</code> を利用して環境変数から出力先を変えられるようにします。gulpの使い方については省略します。<br><br>以下のファイルを追加します。</p><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><p><br>環境変数には以下を追加します。</p><pre><code>./.env

API_JSON_URL=http://localhost:8080/api-json</code></pre><p><br>最後にコマンドを追加します。</p><pre><code>./package.json
"scripts": {
  "generate-example-client": "gulp generate-example-client"
},
....</code></pre><p><br></p><h3 id="h9d756a342d">openapi generator typescript-axios で出力</h3><p>先ほど追加したコマンドを実行します。</p><pre><code>yarn generate-example-client</code></pre><p><br>以下が出力されれば完了です。</p><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><p><br></p><h3 id="hd0b0994538">APIクライアント まとめるクラスを追加</h3><p>エンドポイント毎に設定を渡す必要があるので、集約するクラスを定義しておきます。basePathにはバックエンド側のURLを指定します。</p><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><p><br></p><h3 id="h39017e0df9">インスタンスをどこでも扱えるようにする</h3><p>最後に <code>ExampleClient</code> をどこでも扱えるようにします。今回は <code>context</code> を利用します。ここでは細かい説明は行いません。<br></p><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><p><br></p><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><p><br></p><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><p><br>以下のようAPIをアクセスできるようになれば完了です。</p><pre><code>  useEffect(() =&gt; {
    void (async () =&gt; {
      console.log(await exampleClient.exampleApi.findAll());
    })();
  });</code></pre><p><br>これで終わりです。お疲れ様でした。<br></p><h2 id="h3bcda3e6b0">最後に</h2><p>OpenAPI Generator typescript-axios を使ってNext.js と NestJSを連携する方法をご紹介しました。TypeScript の型や API クライアントを自動生成されるので便利ですね。ただ、ドキュメントなどはあまり揃ってないので、利用するにはある程度の覚悟が必要かなっと思います。</p>

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

NestJSにMikroORMの導入手順。CRUDのAPIを実装するまで。

<p>最近、自分のコードレビューがイケてないなーっと思うことがあったので、今後気をつけることをメモがてらにまとめようと思います。<br></p><h2 id="h411400a885">コードレビューを依頼するときに気をつけること</h2><p>単純にレビューを依頼しただけではスムーズに終わらないケースもあるので、以下のポイントを気をつけていきます。<br></p><h3 id="h0f0da1c3d8">最終的なコードと動作のチェックを2度する</h3><p>ケアレスミスや動作確認をしていれば気づける不具合の指摘は、レビュワーの負荷にもなるので、減らせるように気をつけていたいと思います。<br>特に私は1度ミスするタイプの生き物なので、時間を置いて2度確認することで見落としを減らしていきたいです。<br></p><h3 id="hfda16f269d">相手の立場に立ったPRの説明をする</h3><p>最近、「〇〇だから△△した理解で合っているよね？」っと聞かれるケースが何度かあったのですが、これは「どのように解決したのか」という観点の説明が浅いせいだなっと最近思うこの頃です。<br>相手の立場に立って、疑問を持たれない説明になっているか考えながら説明を書くように気をつけたいと思います。<br></p><h3 id="h25f6a3cea7">より見てほしいところはコメントをする</h3><p>コード量が多かったりするとレビュワーも見切れないケースがあるので、</p><ol><li>動作に不安がある箇所</li><li>もうちょっと上手く書けないか相談したい箇所</li></ol><p>など、より見て欲しいところはコメントで主張していきたいと思います。<br></p><h2 id="h2b1f87d3db">コードレビューをするときに気をつけること</h2><p>自分が思っていることと相手の受け取り方が全然違ったりするので、以下のポイントを気をつけていきます。<br></p><h3 id="h4758d631db">自分の意見を伝えた上で質問する</h3><p>「これは必要ですか？」のように質問だけで終わらせるのはちょっと冷たい印象で捉えられるのと、議論が進みにくいコメントだなっと最近思うこの頃です。<br>「自分だったらこうするけど、これは必要ですかね？」のように自分の意見を伝えた上で質問した方が議論が進みやすそうなので、気をつけていきます。<br></p><h3 id="hc57e36d66d">優先順位を伝える</h3><p>コメントの数が多いと、どのコメントから対応したらいいか困るケースが自身でありました。<br>なのでコメントは、修正が必須か推奨か、それともただ質問なのか明確に伝えることを気をつけていきます。<br></p><h3 id="h31d4b6e301">否定的な伝え方をしない</h3><p>「〇〇にしてください」のような伝え方は否定的に捉えられやすいです。「〇〇のようにすると良いかもですね」のように否定的な伝え方にならないように気をつけていきます。<br></p><h2 id="ha214098e44">まとめ</h2><p>レビューする側・される側に共通することは「相手の立場で考える」だと思います。この辺りを十二分に意識して、相手を敬いながら生きていきます！！！</p>

コードレビューで今後気をつけること

<p>おはこんばんは。最近、CodeceptJSでE2Eテストを書くことが増えたのですが、CodeceptJSでHandsontableの項目名セルをクリックするのに少し苦戦したので、対策についてご紹介しようと思います。<br></p><h2 id="hc69c85bcf9">背景</h2><p>CodeceptJSでは、<code>I.click(locator)</code>でlocatorに指定されたリンクやボタンのクリックを実行します。ただ、Handsontableの項目名セルを指定するとうまくクリックが実行されませんでした。<br><br>Handsontableの項目名セルが検知しているイベントとCodeceptJSが<code>I.click(locator)</code>で発火しているイベントが違うみたいです...恐らく...<br></p><h2 id="hb109fbdd18">対策</h2><p>今回はCodeceptJSのI.click(locator)は利用せず、mouseEventでmousedownを発火して対応するようにしました。<br><br>以下のように該当のセルにmousedownを発火するメソッドを定義します。</p><pre><code>e2e/configs/components/Handsontable.ts  

export = {
  /**
   * I.clickではHandsontableの項目セルがクリックされないので独自で定義している
   * @param row 該当セルの行
   * @param line 該当セルの列
   */
  clickCell: async function (row: number, line: number): Promise&lt;void&gt; {
    await I.executeScript(
      (row, line) =&gt; {
        const trElement = document.querySelectorAll(".ht_master table tr");
        if (trElement?.length &lt; row) return;
        const tdElement = trElement[row-1].childNodes;
        if (tdElement?.length &lt; line) return;
  		
        const mousedownEvent = new MouseEvent("mousedown", {
          bubbles: true,
          cancelable: true,
        });
        tdElement[line-1].dispatchEvent(mousedownEvent);
      },
      row,
      line
    );
  },
}</code></pre><p><br>そしてCodeceptJSで上記を呼び出せるように設定ファイルへ追記してあげます。</p><pre><code>codecept.conf.js

include: {
  Handsontable: "./e2e/configs/components/Handsontable.ts",		
}</code></pre><p><br></p><pre><code>steps.d.ts

type Handsontable = typeof import("./e2e/configs/components/Handsontable");
				
declare namespace CodeceptJS {		
  interface SupportObject {
    Handsontable: Handsontable;	
  }
}</code></pre><p><br>これでCodeceptJSで利用できるようになったので、以下のように呼び出してあげればOKです。お疲れ様でした。</p><pre><code>Scenario(
  "test",
  async ({ Handsontable }) =&gt; {
    await Handsontable.clickCell(1, 1);
  }
);</code></pre><p><br></p><h2 id="h1afe451c43">さいごに</h2><p>CodeceptJSでHandsontableのセルをクリックする方法をご紹介しました。CodeceptJSとHandsontableは闇があったりするので、ちょっと苦戦しますね。<br><span style="color:#24292e">今回の記事が誰かの参考になれば幸いです。</span></p>

CodeceptJSでHandsontableのセルをクリックする方法

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

&lt;Avatar
　size='160'
　name="アイコン"
 round
 color="#ddd"
 alt="アイコン"
 src={icon ? URL.createObjectURL(icon) : ''}
/&gt;</code></pre><p><br></p><h2 id="h4ba79d7ad3">画像のアップロード</h2><p>では、早速画像のアップロードをできるようにします。今回はボタンを押されたら画像がアップロードされるようにします。<br><br>ページ上に表示されない input を以下のように定義し、ref を取得出来るようにします。</p><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><p><br>先ほど、取得した inputのref がボタンのクリックイベントでクリックされるようにします。これで画像選択が可能になります。</p><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><p><br>最後にプレビューのStateを選択された画像を更新するようにします。<code>e.currentTarget.value = "''</code>をしているのは、同じ画像を連続で選択された際、イベントが実行されないので、valueをリセットして再実行可能とするためです。</p><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><p><br></p><h2 id="h0c81c97bfe">アイコンのプレビュー表示</h2><p>プレビューの表示では、<a href="https://github.com/reactjs/react-modal" target="_blank" rel="noopener noreferrer"><code>react-modal</code></a>を利用します。お手軽にモーダルが実装できるライブラリです。</p><pre><code>yarn add react-modal</code></pre><p><br><code>previewIcon</code>に値がセットされたらモーダルが開くようにしています。</p><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><p><br></p><h2 id="h6d0a8a7b52">アイコンのサイズ・切り取り範囲の変更</h2><p>画像のリサイズには<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>を利用します。<br></p><pre><code>yarn add react-avater-editor rc-slider</code></pre><p><br><code>AvatarEditor</code>ではrefを渡すことでリサイズした画像データを取得出来ます。scaleで画像の拡大が可能です。その調整は<code>rc-slider</code>を用いて行います。</p><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><p><br>ただ、<code>AvatarEditor</code>のwidthとheightがコンポーネントのサイズになるのですが、これが実際にリサイズされる画像の大きさになります。これを必ずしもそうしたくないケースがありますよね。そういった場合は、<a href="https://github.com/nodeca/pica" target="_blank" rel="noopener noreferrer"><code>pica</code></a>を利用します。</p><pre><code>yarn add pica</code></pre><p><br></p><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><p><br>これで期待する画像にリサイズが出来ます。お疲れ様でした。<br></p><h2 id="h1afe451c43">さいごに</h2><p>今回は、Next.jsでアイコンのリサイズ機能を実装する方法をご紹介しました！Reactは色々とライブラリがあって便利ですね。今回の記事が誰かの参考になれば幸いです。</p>

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

<p>おはこんばんは。最近、<span style="color:#24292e">&nbsp;Next.js × microCMS&nbsp;で自作したこのサイトにブログの</span>検索機能を実装してみました。<br><br>ブログでは、サイト内検索のフォームをよく見かけますよね。ただ、全文検索の機能等を実装する必要があり、意外と面倒だったりします。<br><br>そんな面倒なことも、<span style="color:#24292e">microCMS&nbsp;の</span>APIは全文検索機能を備えているので、簡単に実装出来てしまいます。今回はその全文検索機能を用いた<span style="color:#24292e">ブログの</span>検索機能の実装方法をご紹介します。<br></p><h2 id="hfe5a8eaaf7"><span style="color:#24292e">実行環境</span></h2><ul><li>Next.js 10.0.4</li><li>React 17.0.1</li></ul><p><br></p><h2 id="h786b965285">グローバルなStateの管理</h2><p>まずは、複数のドメインでキーワードを扱うことを想定し、グローバルなStateで管理するようにします。今回は、React Context を用いた方法でご紹介します。<br><br>createContext で以下のように Context を定義します。</p><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><p><br>次に <code>_app.tsx</code> で Context を呼び出して、グローバルで管理するStateをセットします。</p><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><p><br>これでグローバルでStateを扱えるようになりました。<br></p><h2 id="h6cb2b333f2">検索用のコンポーネントを用意</h2><p>以下のように検索用のコンポーネントを用意します。今回は Material-UI を用いています。<br></p><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><p><br>先ほど、定義した Context で定義したグローバルなStateは以下のように <code>useContext</code> で呼び出しています。</p><pre><code>const { search, setSearch } = useContext(SearchContext);</code></pre><p><br><code>handleClickSearchButton</code>と<code>handleKeyDownSearch</code> で検索結果のページへ遷移するようにしています。<br><br>ポイントは、検索キーワードをURLクエリに入れていることです。Context で入れているから不要では？と思いますよね。<br><br>ただ、ブラウザをリロードすると Context のは値が消えてしまいます。なので、リロードされても検索結果が残るようにURLクエリにキーワードを入れています。<br></p><pre><code>void router.push(`/blogs/search/?keyword=${search}`);</code></pre><p><br></p><h2 id="hd9cc592a7d">ページ側の処理</h2><p>ページ側は先ほどセットしたURLクエリを元にブログの一覧を取得します。フロントから直接 <span style="color:#24292e">microCMS のAPIを叩いてしまうと、API keyが漏洩してしまうので、API Routerを叩くようにしています。</span><br></p><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><p><br>一応、URLクエリがないページに遷移した際に検索キーワードが消えるように <code>_app.tsx</code> に以下の処理も入れておくと良いでしょう。<br></p><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><p><br></p><h2 id="h9cb4759477">API Routerでブログ一覧を取得する</h2><p><span style="color:#24292e">以下のようにAPI Router を用いてサーバーサイド側から</span> <span style="color:#24292e">microCMS のAPIを叩くようにします。</span><br></p><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><p><br><span style="color:#24292e">microCMS では</span><code>q</code>で全文検索が行えます。検索対象は「テキストフィールド」「テキストエリア」「リッチエディタ」となるので、必要なフィールドに対して検索してくれます。便利ですね。<br><br>日本語などのキーワードは<code>encodeURI</code>をしないといけなので、ご注意ください。<br></p><pre><code>`https://your-service.microcms.io/api/v1/blogs?q=${encodeURI(
      req.body.keyword,
    )}`</code></pre><p><br>これで検索されたキーワードに関連するブログが取得出来るようになったはずです。お疲れ様でした。<br></p><h2 id="h1afe451c43">さいごに</h2><p>今回は <span style="color:#24292e">microCMS&nbsp;の</span>APIは全文検索機能を用いて、<span style="color:#24292e">ブログの</span>サイト内検索を実装する方法をご紹介しました！誰かの参考になれば幸いです。</p>

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

<p><span style="color:#24292e">おはこんにちばんは。最近は </span>Node.js / TypeScript で使用出来る ORM のPrismaを触っています。<br>そこでハマった、<span style="color:#454545">一対多</span> や 多対多 のようなリレーションをしているテーブルのレコードの削除について、どのような対応したのかを紹介しようと思います。<br></p><h2 id="hfe5a8eaaf7">実行環境</h2><ul><li>Prisma 2.14.0</li></ul><p><br></p><h2 id="h68b09e605a">事象内容</h2><p>リレーションしているテーブルのレコードに対して、<a href="https://www.prisma.io/" target="_blank" rel="noopener noreferrer">Prisma</a> のDeleteを使うと以下のエラーが発生しました。</p><pre><code>The change you are trying to make would violate the required relation 'XXXX' between the 'XXXX' and 'XXXX' models.</code></pre><p><br>あれ？何か設定漏れてたかなっと思い色々調べた結果、カスケードの削除（<span style="color:#333333">参照先が無くなると同時に削除される</span>）が<a href="https://github.com/prisma/prisma/issues/2810" target="_blank" rel="noopener noreferrer">非対応</a>のようでした...<br>一応、ロードマップ上では対応するよう進んでいるようです。優先度高くないっぽいけど。<br>更に調べてみると、<a href="https://paljs.com/plugins/delete/" target="_blank" rel="noopener noreferrer">Pal.js</a> を使うと対応できるよっという<a href="https://github.com/prisma/prisma/issues/2057#issuecomment-718060880" target="_blank" rel="noopener noreferrer">コメント</a>があったので実際に試してみました。<br></p><h2 id="hc2e1b5db24">packageを追加</h2><p><a style="background-color:#ffffff" href="https://paljs.com/plugins/delete/" target="_blank" rel="noopener noreferrer">Pal.js</a> を追加していきます。（何故かgraphql入れないと動かんかった。闇）</p><pre><code>yarn add paljs/plugins graphql</code></pre><p><br></p><h2 id="ha7f8f59999">事前設定</h2><p>参照先のレコードをどう扱うか設定していきます。以下の二つが設定可能です。</p><ul><li><code>SET_NULL</code>：関連するレコードをに<code>null</code>に設定します。</li><li><code>CASCADE</code>：関連するレコードを削除します。</li></ul><p><br><code>/// @onDelete(CASCADE)</code>のように設定します。以下は適当な例です。</p><pre><code>schema.prisma

model User {
  id　Int　@id @default(autoincrement())
  /// @onDelete(CASCADE)
  userDetail UserDetail?
}

model UserDetail {
  id　Int　@id @default(autoincrement())
  user  User @relation(fields: [userId], references: [id])
  userId  Int 
  displayName String
}</code></pre><p><br></p><h2 id="h597fa8c079">削除処理</h2><p>以下のように<a style="background-color:#ffffff" href="https://paljs.com/plugins/delete/" target="_blank" rel="noopener noreferrer">Pal.js</a> のDelete処理を行えば、リレーションをしているテーブルのレコードも含めて削除できます。</p><pre><code>export const deleteUser = async (id: User['id']) =&gt; {
  const prismaDelete = new PrismaDelete(prisma)
  return await prismaDelete.onDelete({
    model: 'User',
    where: { id },
    deleteParent: true
  })
}</code></pre><p><br></p><h2 id="h3bcda3e6b0">最後に</h2><p>暫定対応をご紹介しましたが、<a href="https://www.prisma.io/" target="_blank" rel="noopener noreferrer">Prisma</a> が対応してくれると良いですね。同じようにハマった人の参考になれば幸いです。</p>

Prismaで参照先のレコード削除にハマった話

<p><span style="color:#24292e">おはこんにちばんは。今回は&nbsp;Next.js × microCMS&nbsp;で ページングを実装してみました。その手順を紹介しようと思います！</span><br></p><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><p><br></p><h2 id="h559ffd8095">一覧画面の実装</h2><p>まずは雑に一覧画面を実装します。今回はUIライブラリにMaterial-UIを利用しています。構成しては以下になります。<br><br>=============<br>pages/<br>　page/<br>　　[offset].tsx<br>=============<br></p><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><p><br>Material-UI の <a href="https://material-ui.com/api/pagination/" target="_blank" rel="noopener noreferrer">Pagination</a> を使っています。ハンドラーの第二引数に次の page が取れるのでそれを元に次のページに遷移させています。こんな感じになるはずです。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/3011efc1f05f61b9fafe77ea24f8726b.gif" alt=""><br></p><h2 id="h2ec9ff6b44"><span style="color:#24292e">microCMS&nbsp;で取得したコンテンツを利用</span></h2><p><br>microCMS で取得したコンテンツを元にページングしていきます。今回は1ページ 3つまでコンテンツを取得するようにしています。<br></p><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><p><br>getStaticPathsでは microCMS で <code>totalCount</code> と <code>limit</code> を返してくれるのでこれを元にpathsを生成しています。</p><pre><code>  const paths = [...Array(Math.ceil(contents.totalCount / contents.limit))]
    .map((_, i) =&gt; i + 1)
    .map((offset) =&gt; `/page/${offset}`);</code></pre><p><br>getStaticPropsではgetStaticPathsで生成したoffsetを元にqueryを生成し、ページ単位でコンテンツを何件目から取得するかを指定しています。</p><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><p><br>Pagination コンポーネントも <code>totalCount</code> と <code>limit</code> を元にcount（何ページ目か） を指定してあげています。</p><pre><code>&lt;Pagination
   count={Math.ceil(contents.totalCount / contents.limit)}
   variant="outlined"
   shape="rounded"
   color="secondary"
   page={offset}
   onChange={handleChangePage}
/&gt;</code></pre><p><br>これで以上です。お疲れ様でした。<br><br></p><h2 id="h1afe451c43">さいごに</h2><p><span style="color:#24292e">Next.js × microCMS&nbsp;で ページングを実装してみました。一覧ページを実装したけど、ページングがよくわからんって方に参考となれば幸いです。</span></p>

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

<p><span style="color:#24292e">おはこんにちばんは。今回は </span>Next.js × microCMS&nbsp;で 人気記事一覧を Google Analytics Reporting API v4 を利用し表示してみました！<br><br>よくブログとかで人気記事一覧とか目にしますよね。<span style="color:#383838">WordPress の場合はプラグインを利用すれば比較的簡単に出来そうですが、自作ブログだとどうすべきか悩みました。</span><br><br>そこで今回は、Google Analytics Reporting API v4  を利用して人気記事一覧を表示する方法を紹介していきます。<br></p><h2 id="hfe5a8eaaf7"><span style="color:#24292e">実行環境</span></h2><ul><li>Next.js 10.0.4</li><li>React 17.0.0</li></ul><p><br></p><h2 id="h30a538611a">Google APIs を有効にする</h2><h3 id="h702d09d558">プロジェクトを作成</h3><p><a href="https://console.developers.google.com/" target="_blank" rel="noopener noreferrer">Google APIs</a> にアクセスし、プロジェクトの選択 をクリックし、新しいプロジェクト をクリックします。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/new-project.png" alt=""><br><br>プロジェクト名に任意の名前をつけてプロジェクトを作成します。<br><br><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=""><br></p><h3 id="hc2f5e80d22">Google Analytics API の有効化</h3><p>APIとサービスの有効化 をクリックして Google Analytics API を有効化します。<br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/new-project3.png" alt=""><br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/new-project4.png" alt=""><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/new-project5.png" alt=""><br><br>これで有効化されました。続いて認証情報を作成します。<br></p><h3 id="hf09298624a">認証情報の作成</h3><p>認証情報を作成 をクリックします。<br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/new-project6.png" alt=""><br><br>下記の情報を選択します。必要な認証情報 をクリックします。</p><ul><li>使用するAPI：Analytics Reporting API</li><li>APIを呼び出す場所：ウェブサーバー（node.js, Tomcat など）</li><li>アクセスするデータの種類：アプリケーションデータ</li></ul><p><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/new-project7.png" alt=""><br><br>下記の情報を選択します。次へ をクリックします。</p><ul><li>サービスアカウント名：任意</li><li>ロール：閲覧者</li><li>キータイプ：JSON</li></ul><p><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/new-project8.png" alt=""><br><br>自動的にjsonがダウンロードされます。このjsonは後ほど利用するので、適切に保管しておきます。<br></p><h3 id="h0a84e474da">Google Analytics の閲覧権限を付与</h3><p>Google Analyticsの設定を行っていきます。<br><a href="https://analytics.google.com/analytics/web/" target="_blank" rel="noopener noreferrer">Google Analytics</a> を開き、左下の歯車マーク から ビューの設定 をクリックします。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/new-project9.png" alt=""><br><br>ビューIDを後ほど利用するのでメモっておいてください。<br><br>次にユーザ管理をクリックし、+ ボタンを押してユーザを追加します。<br>ユーザのメールアドレスには、先程ダウンロードしたjsonファイルに記載されている <code>client_email</code> の値を入れて、ユーザを追加します。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/new-project10.png" alt=""><br><br>これでgoogle APIs周りの設定は完了です。<br></p><h2 id="hc6c80635a9">パッケージの追加</h2><p>それでは実装を進めていきます。今回は、Node.js用のライブラリである&nbsp;<code>google-api-nodejs-client</code>&nbsp;を利用します。</p><pre><code>$ yarn add googleapis</code></pre><p><br></p><h2 id="h936a1bbd78">ページビュー上位を取得する処理</h2><p>人気記事一覧を表示したいので、ページビューが上位の3位のパスを取得するコートを書いていきます。</p><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><p><br>以下の環境変数は先ほどダウンロードしたjsonの <code>clientemail</code> と<code> privatekey</code> を利用します。<code>view_id</code> は先ほどメモしたやつです。</p><pre><code>process.env.GOOGLE_APPLICATION_CLIENT_EMAIL
process.env.GOOGLE_APPLICATION_PRIVATE_KEY
process.env.GOOGLE_ANALYTICS_VIEW_ID</code></pre><p><br>ブログのページビューのみを取得したいので、正規表現で <code>/blogs/英数字ハイフン</code> が含むのみを取得するようにしています。</p><pre><code>dimensionFilterClauses: [
{
  filters: [
    {
      dimensionName: 'ga:pagePath',
      operator: 'REGEXP',
      expressions: ['^/blogs/[0-9a-zA-Z\\-]+$'],
    },
  ],
}]</code></pre><p><br>次に以下のようにページビュー上位3位までの記事を取得します。</p><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><p><br>以下は&nbsp;microCMS が順番を作成順に変えてしまうので、Articleのid順に並び替えています。</p><pre><code>const topArticleBlogs = compact(
    ids.map((id) =&gt; topBlogs?.contents.find((b) =&gt; b.id === id)),
);</code></pre><p><br>これで人気記事を取得出来たはずなので、あとは良しなに表記するだけです。お疲れ様でした。<br></p><h2 id="h1afe451c43">さいごに</h2><p>今回は人気記事一覧を表示する方法についてご紹介しました！意外と調べても参考になる実装方法がなかったので誰かの参考になれば幸いです。<br>（microCMSのidsはidの順番に返して欲しいと思うこの頃。方法あるのかな？）</p>

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

<p><span style="color:#24292e">おはこんにちばんは。</span><span style="color:#222222">もうすぐ2020年が終わりますねー！</span><br><span style="color:#222222">今回は今年の振り返りと来年に向けた話を書きます。</span><br></p><h2 id="hb34093dbec">2020年の振り返り</h2><p><br>良かったこと・悪かったこと<br></p><h3 id="hb52e6bbc10">仕事</h3><p>2020年も株式会社ケップルの開発部に所属し、FUNDBOARD というWEBサービスの新規機能の開発及び既存機能のエンハンスをフロントエンドとバックエンド問わず行っていました。<br><br>新規機能の開発に関しては、ライブラリ選定・設計・開発まで一通り行い、大きめの機能をリリース出来たのは良い経験でした。この辺りから設計の重要性を理解し、実装速度を落とさずにバグの頻度を減らせたことも良かったです。（「バグが減った」とCTOにドヤ顔で言ったその日にバグを仕込んだことはここだけの話）<br><br>2020年7月頃からは、本番環境の権限を持つこととなり障害対応や本番デプロイも行うようになりました。障害対応はフロントエンドとバックエンド（時々インフラ）の両面で知識が求められるので、学びが多くこちらも良い経験だったと思います。（眠れぬ日々になった気がするけど）<br><br>ただ、後半は余裕が出てきたのか80%くらいのパワーで仕事をこなしていた気がしたので、それは良くなかったなーっと考えています。<br></p><h3 id="h24a4d124d1">プライベート</h3><p>業務で扱わないライブラリやフレームワークを実際に手元で色々動かしたりしてました。特に Next.js に関しては、このブログ兼ポートフォリオを作るなどして多くのことを学べたなと思っています。やはり <strong>手を動かすこと</strong> が知識の執着には重要だと、改めて認識しました。<br><br>ブログも頻度は多くはないですが、定期的に投稿が出来ているので良かったです。<br><br>あ、でも勉強会などあまり参加出来なかったのは良くなかった気がします。（コロナとかあったのもあるけど）<br><br>筋トレに関しては、全くダメでした。（唐突）<br>まず健康のためにやっているのに腰を故障するという本末転倒なことをしてしまいました。今後は低重量でどれだけ効かせられるかを意識して生きていこうと思います。</p><h2 id="h717b42fb41"><br>2021年に向けて</h2><p><br>目標など<br></p><h3 id="hb52e6bbc10">仕事</h3><p>初心に戻り、命を削りながら120%のパワーで120%以上の結果を出せるよう開発していたいです。セルフマネジメントは大事なのでこれに尽きるかなっと思います。方法はやるしか無い状況を作って自分を追い込むだけ。（精神論）<br><br>あと、0 ⇨ 1の開発が出来ればしたい。（願望）<br></p><h3 id="h24a4d124d1">プライベート</h3><p>引き続き、ライブラリやフレームワークを実際に手元で色々動かしたりして、そこで培った知見などをブログなどで外部に発信していきたいと思います。<br><br>勉強会などにも参加して、出来れば外部との繋がりも増やしていきたいです。<br><br>あと、副業してみたかったけどNGの決まりになってしまったので、個人開発で1つアプリをリリースできるよう頑張ろうかなーっと考えています。（多分）<br></p><h2 id="h1afe451c43">さいごに</h2><p><span style="color:#000000">定性的な内容になってしまいましたが、実際に書き出すことで今後意識すべきことが明確になったので良かったです。</span><br><br><span style="color:#000000">今年も楽しい一年でした！来年もたくさん楽しみながら結果出せるように頑張りますー！</span></p>

2020年の振り返りと2021年の向けた話

<p><span style="color:#24292e">おはこんにちばんは。今回は </span>Next.js&nbsp;で OGP画像 の動的生成をしてみました！<br><br>自作したブログなどを<span style="color:#333333">どうせなら</span> Twitter や SNS 等の SNS にシェアした際に、OGP 用画像を表示して<span style="color:#333333">視覚的にもアピールしたいですよね！</span>分かります。私もそうでした。でも、どうやってページ毎に OGP画像 を生成すればいいのか分からんですよね。<br><br>そこで、今回は Next.js&nbsp;で Vercel にデプロイ時のOGP画像を動的に生成する方法を解説しようと思います。<br><a style="color:#24292e" href="https://github.com/IshinoJun/sample-ogp" target="_blank" rel="noopener noreferrer">サンプルコードはこちら</a><span style="color:#24292e">。</span><br></p><h2 id="hfe5a8eaaf7"><span style="color:#24292e">実行環境</span></h2><ul><li>Next.js 10.0.0</li><li>React 17.0.1</li><li>Canves 2.6.1</li></ul><p><br></p><h2 id="he0510dbd09"><span style="color:#24292e">必要なライブラリをインストール</span></h2><p>今回は 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"><strong>node-canvas</strong></a><strong> </strong>というライブラリを利用します。<span style="color:#333333">サーバサイドで Canvas が利用できるライブラリです。</span></p><pre><code>yarn add canvas</code></pre><p><br></p><h2 id="h0909947c4e">プロジェクトの設定</h2><p>次にページ毎で動的に画像生成が行われるか、確認用の静的なページを雑に作成しておきます。既にそういったページがある方はスルーでOKです！</p><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><p><br></p><h2 id="h218374fe23">試しに画像生成してみる</h2><p>では、早速画像を試しに生成してみましょう！まずは、確認用で Next.js のAPI Router を利用して画像生成していきます。そのため、<code>http://localhost:3000/api/ページID/ogp</code>&nbsp;がエンドポイントの API を作成します。<br></p><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><p><br>では、早速エンドポイント（&nbsp;<code>http://localhost:3000/api/ページID/ogp</code>&nbsp;）をブラウザで叩いてみましょう！以下のような画像が表示されれば成功です。画像サイズは調べた感じ、<strong>縦630px×横1200px </strong>が推奨サイズのようなのでこのサイズにしました。<br><br><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=""><br></p><h2 id="h4bccc3547b">文字を表示してみる</h2><p>画像の表示が出来たと思うので、ブログのタイトルなどを表示するための文字を表示してみましょう！<br><br>まずは、環境依存によってフォントが変わらないようにフォントを用意します。今回は適当にIPAから <strong>ipagp.ttf </strong>を拾ってきてルートのfontフォルダに配置しました。<span style="color:#333333">Google Fontの</span><a style="color:#6c63ff;background-color:#ffffff" href="https://fonts.google.com/?subset=japanese" target="_blank" rel="noopener noreferrer">ここ</a><span style="color:#333333">とか使うのもありかもですね。</span><br><br><span style="color:#333333">（</span><u style="color:#333333">フォントにはライセンスがあるので、利用時はライセンスの確認を必ずしてくださいね</u><span style="color:#333333">）</span><br><br><span style="color:#333333">では、以下のように先程のコードを変えてみましょう！</span></p><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><p><br>以下のように熱いメッセージが表示されれば成功です。<br><br><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=""><br></p><h2 id="h0d3d6971bc">背景画像を変えてみる</h2><p>良い感じに画像が生成できるようになりましたね。ただ、これだとちょっと寂しいので背景画像を変えてみましょう！背景画像はルートの <code>public/ogp.jpg</code><span style="color:#333333">に今回は配置しました。</span><br><span style="color:#333333">では、以下のように先程のコードを変えてみましょう！</span><br></p><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><p><br>以下のように背景が変われば成功です！<br><br><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=""></p><h2 id="h6ce1ff42c0"><br>動的にテキストを表示してみる</h2><p>ここまできたら、あとはテキストをページ毎に変えるだけです。<span style="color:#333333">では、以下のように先程のコードを変えてみましょう！</span><br></p><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><p><br>以下でページIDを取得しています。</p><pre><code>  const { dynamic } = req.query;</code></pre><p><br>それをtitleに渡しているので、動的に変わっている感じです。ここはアプリ毎に変えるといいですね。<br>あと、テキストが長いとはみ出てしまうので、<code>createTextLines</code>でテキストを分割するようにしています。</p><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><p><br>以下のように ページID 毎にテキストが変われば成功です！<br><br><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=""><br></p><h2 id="hccbcfd129c">画像を出力するようにする</h2><p>ここまでで画像生成は出来るようになりました。ただ、静的サイトなどでは毎回エンドポイントを叩いて画像生成する必要もないのでビルド時のみ実行し、指定フォルダに出力するようにします。<br><br>今回はルートのpublicにogpというフォルダを作成し（.<u>gitkeepは作成しておいてください</u>）、そこのフォルダに生成した画像を出力するようにします。またAPI Router も利用する必要がなくなるので、<code>/utils/server/ogpUtils.ts</code>に今まで実装してきた処理を移行します。<br><br><span style="color:#333333">では、以下のように先程のコードを変えてみましょう！</span><br></p><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><p><br></p><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><p><br>まず、画像生成APIですが、以下のように <code>fs</code> を利用し指定のフォルダに生成した画像を出力するようにしています。</p><pre><code>  fs.writeFileSync(path.resolve(`./public/ogp/${id}.png`), buffer);</code></pre><p><br>そして該当のページで画像生成の処理をビルド時に実行するようにしています。動的に変わる要素を引数で受け取るようにしています。</p><pre><code>export const getStaticProps: GetStaticProps = async (context) =&gt; {
  [...Array(10)].forEach((_, index) =&gt; {
    void createOgp(index);
  })

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

"now-build": "cp canvas_lib64/*so.1 node_modules/canvas/build/Release/ &amp;&amp; yarn build"</code></pre><p><br></p><h2 id="hf2ff618d25">metaタグを追加してあげる</h2><p>ここまで出来たらあとは該当ページで <code>metaタグ</code>を追加してあげるだけです。これで Twitter でシェアする際、OGP画像と認識してくれます。<br></p><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><p><br><code>baseUrl</code>は環境変数で指定しています。</p><pre><code>./.env.local

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

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

<p><span style="color:#24292e">おはこんにちばんは。Next.jsに</span>Adobe Fontsに対応してみました。<br><br><span style="color:#333333">Adobe fontsで日本語（東アジアの言語）を含むフォントを選択した場合、スクリプトの埋め込みを求められるので、</span>その対応手順になります。<br><a style="color:#0366d6" href="https://github.com/IshinoJun/sample-next-adobe-web-font" target="_blank" rel="noopener noreferrer">サンプルコードはこちら</a>。<br></p><h2 id="hfe5a8eaaf7"><span style="color:#24292e">実行環境</span></h2><ul><li>Next.js 10.0.0</li><li>React 17.0.1</li></ul><p><br></p><h2 id="h1c68c77870">AdobeFontsのプロジェクトIDを環境変数に定義</h2><p><span style="color:#0d0d0d">まずはAdobeFontsでプロジェクトIDを取得してください。</span><br><span style="color:#0d0d0d">それをルート配下の </span><strong>.env.local </strong>に以下のように定義してあげてください。</p><pre><code>NEXT_PUBLIC_KID_ID=&lt;PROJECT_ID&gt;</code></pre><p><br></p><h2 id="h6fffc0d37f">フォントを読み込む<span style="color:#333333">スクリプトを定義</span></h2><p>これは<span style="color:#0d0d0d">AdobeFonts</span>公式のサンプルをそのまま利用します。kitIdの部分は環境変数に書き換えています。<br>サンプルはルート配下にそのスクリプトを作成します。</p><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><p><br></p><h2 id="hf051d4c4f3"><span style="color:#0d0d0d">AdobeFontsの</span><span style="color:#333333">スクリプトを</span>読み込む</h2><p>次にブラウザ側の処理で1度AobeFontsのスクリプトを読み込む必要があるので、_app.tsx のuseEffect で一度実行するようにします。<br>サーバーサイド側で実行してしまうと、documentが無くて落ちるので注意しましょう。</p><pre><code>./pages/_app.tsx

import adobeLoader from "../adobeLoader";

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

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

<p><span style="color:#24292e">おはこんにちばんは。</span>Next.jsで実装した静的サイトのサイトマップを生成してみました<span style="color:#24292e">。</span><br><span style="color:#24292e">その手順を記載します。</span><a style="color:#24292e" href="https://github.com/IshinoJun/sample-sitemap" target="_blank" rel="noopener noreferrer">サンプルコードはこちら</a><span style="color:#24292e">。</span><br></p><h2 id="hfe5a8eaaf7"><span style="color:#24292e">実行環境</span></h2><ul><li>Next.js 10.0.0</li><li>React 17.0.1</li></ul><p><br></p><h2 id="h0909947c4e">プロジェクトの設定</h2><p>まずは、雑に静的ページを生成します。</p><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><p><br></p><h2 id="hc2e1b5db24">packageを追加</h2><p>今回は <strong><code>next-sitemap</code></strong><strong> </strong>というpackageを利用します。</p><pre><code>yarn add next-sitemap -D</code></pre><p><br>次にルート配下に <strong><code>next-sitemap.js</code></strong><strong> </strong>という設定ファイルを作成します。</p><pre><code>module.exports = {
  siteUrl: "https://www.example.com",
  generateRobotsTxt: true,
};</code></pre><p><br>最後にプロジェクトがビルドされるたびにサイトマップ生成をするようにするため、<code>package.json</code>の<code>script</code>に以下を追加します。</p><pre><code>"postbuild": "next-sitemap"</code></pre><p><br></p><h2 id="ha166e75e87">プロジェクトをビルドする</h2><pre><code>yarn build</code></pre><p><br>そうするとpublic配下に以下のような<code>robots.txt</code>と<code>sitemap.xml</code>に生成されたかと思います。サイトマップにはすべての静的ページが記載されています。<br></p><pre><code>./public/robots.txt

User-agent: *
Allow: /
Host: https://www.example.com
Sitemap: https://www.example.com/sitemap.xml</code></pre><p><br></p><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><p><br></p><h2 id="h7005ec096e">Google Serch Consoleからサイトマップを登録する</h2><p>あとは、Google Serch Consoleの管理画面からサイトマップを追加します。<strong>https://www.example.com</strong><strong>/sitemap.xml </strong>で登録可能です。<br>正しく実装出来ていれば、以下のようにURLを検出してインデックスされるはずです。お疲れ様でした。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/sitemap.png" alt=""><br></p><h2 id="h1afe451c43">さいごに</h2><p>このブログ自体のサイトマップを作成していなかったので、実装してみました。とても簡単ですね。<br></p><h2 id="h3de35099b3">参考</h2><p><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></p>

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

<p><span style="color:#24292e">おはこんにちばんは。</span><a href="https://github.com/IshinoJun/nextjs-storybook" target="_blank" rel="noopener noreferrer">Next.jsにStorybookを導入</a>してみました<span style="color:#24292e">。その手順を記載します。</span><br></p><h2 id="hfe5a8eaaf7"><span style="color:#24292e">実行環境</span></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><p><br></p><h2 id="hc2e1b5db24">packageを追加</h2><p>いくつか便利なアドオンも追加しています。<br></p><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><p><br></p><h2 id="hfa896f3411">設定ファイルを追加</h2><p>以下、必要な設定を追加します。<br></p><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><p><br></p><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><p><br></p><h2 id="hc389788d77">コンポーネントとStroyを追加</h2><p>簡単なコンポーネントとStoryを以下の通り追加します。<br>Stroyの命名は、<code>Component名 + .stories.tsx</code><span style="color:#333333">&nbsp;になります。</span><br></p><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><p><br></p><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><p><br></p><h2 id="hb047d44edf">Storybookを起動</h2><p>packageに以下を追加して起動できるようにします。<br></p><pre><code>package.json

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

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

<p><span style="color:#24292e">おはこんにちばんは。</span><a href="https://github.com/IshinoJun/nextjs-microcms-contact" target="_blank" rel="noopener noreferrer">Next.js + microCMSで問い合わせ機能</a>を実装してみました。<br></p><h2 id="h8d027c8ed3">はじめに</h2><ul><li>実装方法について触れています。特にAPIキーを隠蔽せずに実装している記事が見受けられてたので、その辺は注意して触れていきます。</li><li>Next.js や microCMSとは？っといった概要には触れません。</li></ul><p><br></p><h2 id="h38c8766536">microCMSの設定</h2><p>この辺は他のサイトで触れてるところがあったので雑に説明します。<br></p><h3 id="h2c9414f5a4">コンテンツ（API）の追加</h3><p>API名とエンドポイントを入力し、コンテンツ（API）を追加します。<br><br><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=""><br><br>続いて、POSTが使えるリスト形式を選択します。<br><br><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=""><br><br>必要なAPIスキーマーを設定すれば終了です。<br><br><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=""><br><br>なお、以下も忘れずに実施ください。</p><ol><li>POSTリクエストを有効にする（<strong>API設定 &gt; HTTPメソッド設定）</strong></li><li>APIリファレンスから<strong>X-WRITE-API-KEY</strong>を作成して控えておく</li></ol><p><br></p><h2 id="h131d3691cd">Next.jsで問い合わせ機能を実装</h2><p>フォーム機能を実装していきます。<br></p><h3 id="h2ce7c28a66">問い合わせ用の関数を作成</h3><p>Next.jsにはサーバーレス関数を起動できるAPI Routes機能があります。<br>その機能を利用し、サーバサイド経由でAPIキーを隠蔽してリクエストを送るようにします。<br><br>まず、環境変数を利用するために<strong>.env.local</strong>を作成し、先ほどメモしたX-WRITE-API-KEYを記載します。<br>NEXT_PUBLIC_を変数の前にを付けるとフロント側にも公開されてしまうので、APIキーなどでは付けない方が良さそうですね。</p><pre><code>WRITE_API_KEY="メモしたX-WRITE-API-KEY"</code></pre><p><br>次に以下のような関数とクエリをチェックするタイプガード を用意します。<br>詳しくはリンクのコード見てもられば！<br><br><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></p><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><p><br><a href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/utils/TypeGuardUtils.ts" target="_blank" rel="noopener noreferrer">/utils/TypeGuardUtils.ts</a></p><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><p><br>これで&nbsp;<strong> `/api/contact` </strong>でこの関数を起動できるようになりました。<br>処理としては、以下のチェックをし、問題無ければ200を返すようにしています。問題があればエラーを返します。</p><ol><li>クエリとして渡されるオブジェクトが期待通りのオブジェクトか</li><li>実際にmicroCMSのAPIを呼び出して正しく作成されたか</li></ol><p><br>microCMSのAPIの呼び出し処理はラッパーなりを用意した方が無難かもですね。keyの設定なりを毎回しなくてはいけないので。<br></p><h3 id="h782dc6ea91">ページ側の作成</h3><p>今回はフォームバリデーションライブラリの <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>を利用しています。<br>上記ライブラリについて詳しくは触れませんが、react-hook-formは公式に記載通り以下の点で優秀だなっと思った最近この頃。<br></p><ul><li>再レンダリングが最小に抑えられている</li><li>コードの記述量が少ない</li><li>外部 UI コンポーネントライブラリとの統合が容易</li></ul><p><br>ページとしては以下の３つを作成します。量が多いので必要なとこだけ説明します。<br><br><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></p><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><p><br>フロント側から上記のように叩くことで先ほど作成した問い合わせ用の関数を起動させています。<br>これでサーバサイド経由でAPIキーを隠蔽し、リクエストを送るよう出来ました。<br><br>「何故フロントからだとAPIキーが隠蔽されないのか」は<a href="https://microcms.io/blog/nuxt-secure-api-key/" target="_blank" rel="noopener noreferrer">このサイト</a>で詳しく解説されておりました。<br><br><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><br><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><br>上記は、問い合わせの成功時と失敗時の画面です！<br><br>これで実装としては完了です。<br><span style="color:#454545">実装後に作成したフォームで送信してみて、</span>microCMSでその結果が表示出来ていれば完成です！！！<br><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=""><br><br>最後に通知が必要な方は、<strong>Webpack &gt; API設定</strong>でSlackやメール通知などが可能なので設定しておくと良いでしょう。<br></p><h2 id="ha214098e44">まとめ</h2><p>Next.js と microCMS を問い合わせ機能しました。APIキー周りの管理は基本的に自己責任となるので注意が必要ですね。（てかブログ書くの大変）</p>

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

<h2 id="h8d027c8ed3">はじめに</h2><p>おはこんにちばんは。<br>Webのエンジニアに転身してそろそろ1年になるので、ポートフォリオ 兼ブログを作ってみた。<br>主にWeb周りの技術で色々と触った結果などをゆる〜く書こうかな。<br></p><h2 id="h696e98ee0a">自己紹介</h2><p>スタートアップで働く27歳。フロントとバック共に触っている。<br>詳しくは以下を見てもらえると。<br><a href="/profile" target="_blank" rel="noopener noreferrer">https://ji23-dev.com/profile</a></p>

Blogs

FacebookのGraph APIを開発モードで利用し、User Friendsを取得する方法

個人サイトを作り直しました

Next.jsでSentryを利用する際にSourceMapを隠蔽する方法

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

2021年の振り返り

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

NestJS で LogにStack情報を追加する

NestJS で LogにRequest情報を追加する

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

NestJSにMikroORMの導入手順。CRUDのAPIを実装するまで。

コードレビューで今後気をつけること

CodeceptJSでHandsontableのセルをクリックする方法

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

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

Prismaで参照先のレコード削除にハマった話

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

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

2020年の振り返りと2021年の向けた話

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

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

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

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

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

エンジニアかもなので、技術ブログはじめてみた

Blogs

FacebookのGraph APIを開発モードで利用し、User Friendsを取得する方法

個人サイトを作り直しました

Next.jsでSentryを利用する際にSourceMapを隠蔽する方法

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

2021年の振り返り

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

NestJS で LogにStack情報を追加する

NestJS で LogにRequest情報を追加する

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

NestJSにMikroORMの導入手順。CRUDのAPIを実装するまで。

コードレビューで今後気をつけること

CodeceptJSでHandsontableのセルをクリックする方法

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

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

Prismaで参照先のレコード削除にハマった話

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

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

2020年の振り返りと2021年の向けた話

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

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

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

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

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

エンジニアかもなので、技術ブログはじめてみた

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