<p>microCMSには、ステータスが「下書き中」になっている記事を取得できる機能が用意されています。<br>今回は、その機能を利用してブログのプレビューページを作りました。<br></p><h2 id="hac84e4e38d">モチベーション</h2><ul><li>執筆中の記事の見栄えを公開前に確認したい</li><li>このブログはJamstackな構成でできているので、記事公開 → デプロイ → ページ生成 されるまで実際の表示が確認できず、リスキー</li><li>デプロイすることなくプレビュー可能な仕組みが必要</li></ul><p><br></p><h2 id="h47d2486890">大まかな方針</h2><p>プレビュー用のページをGatsbyのsrc/pages配下に用意しておき、クエリパラメータで指定されたcontentId, draftIdに一致するコンテンツをmicroCMSからクライアントサイドで取得します。<br>取得した記事のデータをReact コンポーネントに渡してクライアントサイドでレンダリングします。<br></p><h2 id="h31d727ccda">準備</h2><p>microCMSの管理画面から、プレビューボタン押下時の遷移先URLを設定しておきます。<br><img src="https://images.microcms-assets.io/assets/702dbaa8dfa34d1195fd2644792b2156/e78223554c28f01be016f9d2207fc8cf/6ca0c36044fe9183e259e861dbf6dee8.png" alt=""><br>上記画像のblogPostPreviewにあたる文字列が、Gatsbyのプレビュー用ページのファイル名と一致することになります。<br><br>クエリパラメータからcontentIdとdraftIdを取得する必要があるため、クエリパラメータから値を取得するためのパッケージを追加しておきます。<br><code>yarn add gatsby-query-params</code></p><h2 id="h922edff87b">実装</h2><h3 id="h2fd565797a">プレビューページの追加</h3><p>src/pages配下にblogPostPreview.jsというページファイルを追加しました。今回は、ブログ投稿専用のプレビューページであることを明示したかったのでこのようなファイル名にしました。<br></p><h3 id="h2ea49f6295">下書き状態のコンテンツを取得する</h3><p><code>gatsby-query-params</code>から<code>getSearchParams</code>をimportし、contentId, draftIdを取得します。<br>contentId, draftIdを使って、下書き状態のコンテンツを取得するためのクエリを組み立ててfetchします。</p><pre><code>const { contentId, draftKey } = getSearchParams()
    const [postData, setPostData] = useState(null)
  
    useEffect(() =&gt; {
      if (!contentId || !draftKey) return
      fetch(
        `https://xxxxxxxxxxxxxxx.microcms.io/api/v1/blog/${contentId}?draftKey=${draftKey}`,
        {
          headers: {
            "X-API-KEY": "xxxxxxxxxxxxxxxxxxxxxxxx",
          },
        }
      )
        .then(response =&gt; {
          if (response.ok) {
            return response.json()
          }
        })
        .then(json =&gt; {
          if (json) {
            setPostData(json)
          }
        })
    }, [contentId, draftKey])</code></pre><p>APIキーがむき出しになってしまいますが、個人開発の用途であること・とりあえず早くプレビュー機能を使える状態にしたかったためこのままでいきます。<br>getの操作でした使用されないAPIキーなので、フロントエンドで見える状態になっていても特に問題ないかなと思います。<br>気になる方は、microCMSの公式ブログにNetlify Functionsを使ってサーバサイドで下書き状態の記事のデータを取得する実装が紹介されているのでこちらを参考にすると良さそうです。<br>Nuxt.jsでの実装例が掲載されてますが、使っているフレームワークによらず参考にできそうな実装です。<br><a style="color:#6b46c1" href="https://microcms.io/blog/nuxt-jamstack-preview" target="_blank" rel="noopener noreferrer">microCMSとNuxtでプレビュー画面を作成する</a></p><h3 id="h5e13b1fe61">レンダリング</h3><p>データが取得できたらもう殆ど完成です。最後は記事詳細ページですでに使用されているPostHeader, PostBodyコンポーネントに記事のデータをpropsで渡してあげるだけです。<br>ここまでの作業でできたファイルは以下となります。（jsx のsyntax highlightが壊れてる問題がまだ解決できてなくてめちゃくちゃ不便）<br><a style="color:#6b46c1" href="https://github.com/EringiV3/devBlog/blob/master/src/pages/blogPostPreview.js" target="_blank" rel="noopener noreferrer">https://github.com/EringiV3/devBlog/blob/master/src/pages/blogPostPreview.js</a><br><br>記事の公開日時のデータについて、SSGするときはgraphqlのクエリでフォーマット指定してリクエストを行っているため自分で公開日時のフォーマットは行っていません。<br>ただ、プレビューではgraphqlは使わずにfetchで取得しているのでフォーマットの指定はできません。そのためフォーマットされていないプレーンな状態の日時文字列をそのまま表示しています。<br>（プレビューだから対応する気が起きなかった）<br><br><br><br>以上でプレビュー機能の実装が一通り完了したので、microCMSのプレビューボタンを押してみてプレビューができてるかを確認します。<br><br>「画面プレビュー」ボタンを押して...<br><img src="https://images.microcms-assets.io/assets/702dbaa8dfa34d1195fd2644792b2156/3bf14804775feb649718a3b95f382900/f2a40858f338aed1cae5facea463598b.png" alt=""><br>プレビューページ用のURLで下書き状態の記事のプレビューができました！！<br>これで完成です！<br></p><h2 id="ha214098e44">まとめ</h2><p>microCMSのプレビュー画面機能を使用して、Gatsby上に動的なプレビューページを作りました。<br>プレビュー機能はブログには必須と言えるレベルの機能だと思うので、自作ブログを構築して早い段階で用意できて安心です。</p>

Gatsby で microCMSのプレビュー機能対応

<p>エンジニア歴2年目に突入し、もう半年ほど経ちそうです。<br>最近になって、本業では使わない（使えない）技術スタックを身につけるためにプライベートの時間を使って勉強する習慣がついてきました。<br>が、やはり仕事で使わないとすぐ頭から抜けてしまうので、理解したことを記録しておくためにこのブログを作ることにしました。<br>あと自作ブログをやってみたかったというのも理由としてはあります。</p><h3 id="h7d0aeafefc">筆者のスキルセット</h3><ul><li>まともに書ける言語の中ではPHP歴が一番長い（7系しか書いたことないです。仕事ではPHP7.4使ってます）</li><li>CSSは最低限かける。複雑なアニメーションとかは厳しい。</li><li>jsは仕事ではノンフレームワークなvalilla jsでしか書いたことない</li><li>Reactは独学で初めて2~3ヶ月くらい</li></ul><p><br>自分のスキルセットはこんな感じです。<br>このレベル感の人間がGatsbyで自作ブログ構築するにあたって、学習の流れや難しかったところ・ハマったところ等を書こうと思います。</p><h3 id="hcdab8eedf6">学習の流れ</h3><p>Gatsby.jsは、ページの表示に必要なデータをGraphqlで一気に取得して、それをReactコンポーネントに流し込むことでSSG(ServerSideGenarating)してくれる静的サイトジェネレータです（という理解です）。<br>そのため、GraphqlとReactの理解は必須となります。<br><br>GraphqlはUdemyで1本講座を買って勉強しました。この方の動画はTypeScript入門で買ったことがあるのですが、わかりやすかったです。<br><a style="color:#6b46c1" href="https://www.udemy.com/course/graphql-with-react/" target="_blank" rel="noopener noreferrer">フロントエンドエンジニアのためのGraphQL with React 入門</a><br><br>その後に、「Webサイト高速化のための静的サイトジェネレーター活用入門」という本を読みました。Gatsby本とか呼ばれてるらしいです（？）<br>この本を手を動かしながらやりきると、Gatsby + Contentful製のブログが一本出来上がります。<br>このブログもそれをベースにカスタマイズして作りました。<br>ページネーションやSEOの実装まで丁寧に解説してくれています。<br><a style="color:#6b46c1" href="https://www.amazon.co.jp/%E3%80%90%E7%89%B9%E5%85%B8%E4%BB%98%E3%81%8D-%E3%80%91Web%E3%82%B5%E3%82%A4%E3%83%88%E9%AB%98%E9%80%9F%E5%8C%96%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE-%E9%9D%99%E7%9A%84%E3%82%B5%E3%82%A4%E3%83%88%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%BC%E6%B4%BB%E7%94%A8%E5%85%A5%E9%96%80-Compass-Books%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA/dp/4839973008" target="_blank" rel="noopener noreferrer">Webサイト高速化のための静的サイトジェネレーター活用入門</a><br><br>Reactそのものに関しては、話すとボリュームが大きくなりそうなので省略します。</p><h3 id="h8c1ceaa430">Gatsby + microCMSでのブログ実装</h3><p>実現する機能としては以下のような感じです。</p><ul><li>コンテンツはすべてmicroCMSで管理</li><li>シンタックスハイライト</li><li>記事のカテゴライズ</li></ul><p><br>まずは、Gatsby本をやってできたブログから、Contentful依存の実装を剥がすしてmicroCMSでの実装に置き換えるところからはじめました。<br>microCMSを選んだのは、管理画面が日本語でUIもContentfulよりわかりやすいと感じたからです。<br>Gatsby本ではContentful依存の実装の剥がし方・microCMSへの乗り換え方まで付録で解説しくれていたのでこのステップでは特に困りませんでした。</p><h3 id="h610e988ca2">microCMSで用意するAPI</h3><p>ブログAPI、カテゴリAPI、aboutページ用APIを用意しました。<br>gatsby-source-microcms という、gatsbyでmicroCMSからGraphqlでデータ取得できるようにするためのプラグインが用意されているのでこちらにAPIの設定を記載します。</p><pre><code>
        // gatsby-config.js
        {
            resolve: "gatsby-source-microcms",
            options: {
              apiKey: process.env.microCMS_API_KEY,
              serviceId: "eringiv3devblog",
              apis: [
                {
                  endpoint: "blog",
                  query: {
                    limit: 100,
                  },
                },
                {
                  endpoint: "category",
                  query: {
                    limit: 100,
                  },
                },
                {
                  endpoint: "about",
                  format: "object",
                },
              ],
            },
        },
   </code></pre><p>リスト形式のレスポンスか、オブジェクト形式のレスポンスを返すかで、formatオプションの値を変える必要がある点に注意が必要です。<br>ドキュメントにきちんと記載されているのですが、見落としてしまいハマりました。<br>デフォルトでは、<code>format: "list"</code>が指定されるようで、オブジェクト形式のレスポンスを返すAPIで明示的に<code>format: "object"</code>を指定しないとビルドが失敗します。</p><h3 id="h5ead4ef981">コードにシンタックスハイライトを効かせる</h3><p>「Gatsby syntax highlight」とかでググっても、gatsby-remark-prismjsというプラグインを使ってmarkdownで入稿する前提でハイライトを効かせる方法ばかりヒットします。<br>「静的サイトジェネレータを使って技術ブログを開設する」という目的に対しては多くの場合、ContentfulやmicroCMSのようなヘッドレスCMSを使わなくても、markdownファイルにコンテンツを書き込んでgit pushすれば済む話なので、そもそもAPIのレスポンスの中に含まれるHTML文字列からシンタックスハイライトを効かせられるようにするというモチベーションが発生しないのだと思います。<br>ただ、今回はどうしてもmicroCMSを使ってみたかったのでmarkdownは使わずに済む方法を考えました。<br><br>レスポンスのHTML文字列からシンタックスハイライトを効かせる手順は以下のようにしました。</p><ol><li>microCMSの繰返し項目機能を使って、ブログコンテンツに繰返し項目（リッチエディタ項目 or HTML項目を設定）をもたせる</li><li>レスポンスに含まれる繰返し項目の項目IDで何の項目かを判別し、HTML項目の場合はHTMLとしてパースしReactコンポーネントに変換する</li><li>Prismjsを使って、useEffectでクライアント側でハイライトを行う</li></ol><p><br>コードはこんな感じになりました。<br><a style="color:#6b46c1" href="https://github.com/EringiV3/devBlog/blob/master/src/components/post-body.js" target="_blank" rel="noopener noreferrer">https://github.com/EringiV3/devBlog/blob/master/src/components/post-body.js</a><br><br>繰返し項目にHTML入力用の項目を設ける理由は、prismjsに言語の種類を識別させてハイライトして貰う必要があるためです。pre要素のclassに<code>language-xxx</code>を指定すると、xxx言語の構文として解釈してくれます。<br>ただ、問題点があってprismjsとjsxの相性が良くないみたいで自分の手元ではjsxのシンタックスハイライトを効かせることができていません。すぐには解決できなそうだったので今後の課題です。<br><br>繰返し項目のIDで処理を分岐させるのは、microCMSのブログに実装例があったのでそれを真似しました。<br><a style="color:#6b46c1" href="https://microcms.io/blog/update-repeater-field" target="_blank" rel="noopener noreferrer">繰り返しフィールドが追加されました</a></p><h3 id="hcc1af24286">スタイリング</h3><p>Gatsby本では外部のcssファイルにクラス指定でスタイルを当てていましたが、それをやめてstyled jsxを使ってみることにしました。CSS in JSのライブラリは種類が多くてどれを選択すればいいか迷ったのですが、グローバルな領域にスタイルを書き込んでいくのはどうしても嫌・styledComponentはコンポーネントが増えてなんか嫌という理由でstyled jsxを選びました。軽量かつ、<code>&lt;style jsx&gt;&lt;/style&gt;</code>で囲むだけでコンポーネントに対してscopedなスタイルを当てることができてシンプルなのがいいなと思いました。記法も普通のCSSと同じなのでとっつきやすかったです。<br>基本的にはすべてscopedにして、ページネーション等の複数のjsxファイルにまたがるクラスに対してのスタイルは<code>&lt;style jsx global&gt;&lt;/style&gt;</code>でグローバルな領域のスタイルとして記述しました。<br></p><h3 id="h9dcc071ccd">デプロイ</h3><p>Netlifyを使っています。GitHub, microCMSと連携してmasterへのコミットや、CMSで管理されているコンテンツの更新でデプロイされます。<br></p><h3 id="ha739b3b8f6">その他</h3><p>Google Analyticsやサイトマップの設定も、プラグインが用意されており、gatsby-config.jsにちょこっと設定を書き足すだけだったので自分でやることはほぼありませんでした。<br></p><h3 id="h4ddd7d9be8">計測</h3><p>トップページをLighthouseで計測してみたら4項目すべて100点でした！<br><img src="https://images.microcms-assets.io/assets/702dbaa8dfa34d1195fd2644792b2156/eed9428f979e15fcda16f05bc5af5273/lighthouse.png" alt=""><br><span style="color:#2d3748">まだ1記事しか存在していないのでいい点数が出やすいのは当然だと思うので、今後記事が増えても点数が下がらないように気をつけます。</span><br><span style="color:#2d3748">ちなみに、記事詳細ページで計測したらもう少し低いスコアになりました。</span><br><img src="https://images.microcms-assets.io/assets/702dbaa8dfa34d1195fd2644792b2156/2185222d9e6ab3bc2e1f56b7890125e9/lighthouse_blogpost.png" alt=""></p><h3 id="ha214098e44">まとめ</h3><p>Gatsby + microCMSという構成で、コンテンツはすべてmicroCMS管理かつシンタックスハイライトも効かせられる最低限の技術ブログができました。<br>今後の改善点として以下があります。</p><ul><li>シンタックスハイライトについて、現在はクライアントサイドで実行するようになっているがGatsbyのメリットを活かせていない気がするので、サーバーサイドでハイライトした状態のHTML文字列を返すようにしたい</li><li>TypeScript導入</li><li>microCMSのプレビュー機能対応</li></ul><p><br>TypeScriptはできれば最初から入れたかったのですが、初めて触るフレームワーク（Gatsby）、初めて触るCMS（microCMS）という構成だったので、カオスになるのを防ぐために、とても使いこなせるとは言えないレベルの習熟度のTypeScriptを入れるのは先送りとしました。<br>とりあえず公開するところまでたどり着けたのは「Webサイト高速化のための静的サイトジェネレータ活用入門」とmicroCMSの運営の方（Twitterでつまづいているところをつぶやいたら助けてくれた！）のおかげだと思います。<br>アウトプットのために作ったブログなのでこれで満足しないようにしたいです。</p>

eringiv3.dev

Category: Gatsby

Gatsby で microCMSのプレビュー機能対応

Gatsby.js + microCMSで技術ブログを構築しました