<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&#x2F;configs&#x2F;components&#x2F;Handsontable.ts  

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

include: {
  Handsontable: &quot;.&#x2F;e2e&#x2F;configs&#x2F;components&#x2F;Handsontable.ts&quot;,		
}</code></pre><p><br></p><pre><code>steps.d.ts

type Handsontable = typeof import(&quot;.&#x2F;e2e&#x2F;configs&#x2F;components&#x2F;Handsontable&quot;);
				
declare namespace CodeceptJS {		
  interface SupportObject {
    Handsontable: Handsontable;	
  }
}</code></pre><p><br>これでCodeceptJSで利用できるようになったので、以下のように呼び出してあげればOKです。お疲れ様でした。</p><pre><code>Scenario(
  &quot;test&quot;,
  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>.&#x2F;page&#x2F;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>.&#x2F;page&#x2F;index.tsx

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

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

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

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

&lt;button
  type=&quot;button&quot;
  onClick={handleClickChangeIcon}
&gt;</code></pre><p><br>最後にプレビューのStateを選択された画像を更新するようにします。<code>e.currentTarget.value = &quot;&#x27;&#x27;</code>をしているのは、同じ画像を連続で選択された際、イベントが実行されないので、valueをリセットして再実行可能とするためです。</p><pre><code>.&#x2F;page&#x2F;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 = &#x27;&#x27;;
  },
  [],
);</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>.&#x2F;components&#x2F;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;&#x2F;div&gt;
&lt;&#x2F;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>.&#x2F;components&#x2F;IconEditor.tsx

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

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

&lt;Slider
  onChange={handleChangeScale}
  min={1}
  max={1.5}
  step={0.01}
  value={scale}
&#x2F;&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"> Next.js × microCMS で自作したこのサイトにブログの</span>検索機能を実装してみました。<br><br>ブログでは、サイト内検索のフォームをよく見かけますよね。ただ、全文検索の機能等を実装する必要があり、意外と面倒だったりします。<br><br>そんな面倒なことも、<span style="color:#24292e">microCMS の</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>&#x2F;&#x2F; context&#x2F;searchContext.ts

import { createContext } from &#x27;react&#x27;;

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

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

import React, { useState } from &#x27;react&#x27;;
import { AppProps } from &#x27;next&#x2F;app&#x27;;

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

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

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

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

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(`&#x2F;blogs&#x2F;search&#x2F;?keyword=${search}`);
  }, [search, router]);

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

  return (
    &lt;div className={style.search}&gt;
      &lt;InputBase
        placeholder=&quot;Search…&quot;
        inputProps={{ &#x27;aria-label&#x27;: &#x27;search&#x27; }}
        className={style.searchInput}
        value={search}
        onChange={handleChangeKeyword}
        onKeyDown={handleKeyDownSearch}
      &#x2F;&gt;
      &lt;IconButton
        className={style.searchIcon}
        onClick={handleClickSearchButton}
        aria-label=&quot;Search&quot;
      &gt;
        &lt;SearchIcon &#x2F;&gt;
      &lt;&#x2F;IconButton&gt;
    &lt;&#x2F;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(`&#x2F;blogs&#x2F;search&#x2F;?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(`&#x2F;api&#x2F;blogs`, {
            body: JSON.stringify(blogsQuery),
          });
      } catch {
        return;
      }
    })();
  }
}, [blogsQuery]);</code></pre><p><br>一応、URLクエリがないページに遷移した際に検索キーワードが消えるように <code>_app.tsx</code> に以下の処理も入れておくと良いでしょう。<br></p><pre><code>&#x2F;&#x2F; pages&#x2F;_app.tsx

  useEffect(() =&gt; {
    const urlQuery = router.query { keyword:string };
    if (urlQuery &amp;&amp; urlQuery.keyword) {
      setSearch(urlQuery.keyword);
    } else {
      setSearch(&#x27;&#x27;);
    }
  }, [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>&#x2F;&#x2F; pages&#x2F;api&#x2F;blogs&#x2F;index.ts

import { NextApiResponse, NextApiRequest } from &#x27;next&#x27;;

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

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

  const key = {
    headers: { &#x27;X-API-KEY&#x27;: process.env.API_KEY ?? &#x27;&#x27; },
  };
  const blogs = await fetch(
    `https:&#x2F;&#x2F;your-service.microcms.io&#x2F;api&#x2F;v1&#x2F;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:&#x2F;&#x2F;your-service.microcms.io&#x2F;api&#x2F;v1&#x2F;blogs?q=${encodeURI(
      req.body.keyword,
    )}`</code></pre><p><br>これで検索されたキーワードに関連するブログが取得出来るようになったはずです。お疲れ様でした。<br></p><h2 id="h1afe451c43">さいごに</h2><p>今回は <span style="color:#24292e">microCMS の</span>APIは全文検索機能を用いて、<span style="color:#24292e">ブログの</span>サイト内検索を実装する方法をご紹介しました！誰かの参考になれば幸いです。</p>

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

<p><span style="color:#24292e">おはこんにちばんは。最近は </span>Node.js &#x2F; 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 &#x27;XXXX&#x27; between the &#x27;XXXX&#x27; and &#x27;XXXX&#x27; 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&#x2F;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>&#x2F;&#x2F;&#x2F; @onDelete(CASCADE)</code>のように設定します。以下は適当な例です。</p><pre><code>schema.prisma

model User {
  id　Int　@id @default(autoincrement())
  &#x2F;&#x2F;&#x2F; @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[&#x27;id&#x27;]) =&gt; {
  const prismaDelete = new PrismaDelete(prisma)
  return await prismaDelete.onDelete({
    model: &#x27;User&#x27;,
    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">おはこんにちばんは。今回は Next.js × microCMS で ページングを実装してみました。その手順を紹介しようと思います！</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&#x2F;<br>　page&#x2F;<br>　　[offset].tsx<br>=============<br></p><pre><code>src&#x2F;pages&#x2F;page&#x2F;[offset].tsx

import { GetStaticPaths, GetStaticProps, NextPage } from &#x27;next&#x27;
import React, { useCallback } from &#x27;react&#x27;
import { useRouter } from &#x27;next&#x2F;router&#x27;;
import { Pagination } from &#x27;@material-ui&#x2F;lab&#x27;;

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(`&#x2F;page&#x2F;${page}`);  
    },
    [router],
  );
  
  return (
    &lt;div&gt;
      &lt;h1&gt;{router.query.offset}&lt;&#x2F;h1&gt;
      &lt;Pagination
        count={PAGE}
        variant=&quot;outlined&quot;
        shape=&quot;rounded&quot;
        color=&quot;secondary&quot;
        page={offset}
        onChange={handleChangePage}
      &#x2F;&gt;
    &lt;&#x2F;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 で取得したコンテンツを利用</span></h2><p><br>microCMS で取得したコンテンツを元にページングしていきます。今回は1ページ 3つまでコンテンツを取得するようにしています。<br></p><pre><code>import { GetStaticPaths, GetStaticProps, NextPage } from &#x27;next&#x27;
import React, { useCallback } from &#x27;react&#x27;
import { useRouter } from &#x27;next&#x2F;router&#x27;;
import { Pagination } from &#x27;@material-ui&#x2F;lab&#x27;;

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(`&#x2F;page&#x2F;${page}`);  
    },
    [router],
  );
  
  return (
    &lt;div&gt;
      &lt;h1&gt;{router.query.offset}&lt;&#x2F;h1&gt;
      &lt;Pagination
        count={Math.ceil(contents.totalCount &#x2F; contents.limit)}
        variant=&quot;outlined&quot;
        shape=&quot;rounded&quot;
        color=&quot;secondary&quot;
        page={offset}
        onChange={handleChangePage}
      &#x2F;&gt;
    &lt;&#x2F;div&gt;
  )
}

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

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

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

  return { paths, fallback: false };
}

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

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

  const key = {
    headers: { &#x27;X-API-KEY&#x27;: process.env.API_KEY ?? &#x27;&#x27; },
  };
  const contents = await fetch(
    `https:&#x2F;&#x2F;your-service.microcms.io&#x2F;api&#x2F;v1&#x2F;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 &#x2F; contents.limit))]
    .map((_, i) =&gt; i + 1)
    .map((offset) =&gt; `&#x2F;page&#x2F;${offset}`);</code></pre><p><br>getStaticPropsではgetStaticPathsで生成したoffsetを元にqueryを生成し、ページ単位でコンテンツを何件目から取得するかを指定しています。</p><pre><code>  const offset = params?.offset ? String(params?.offset) : &#x27;0&#x27;;

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

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

<p><span style="color:#24292e">おはこんにちばんは。今回は </span>Next.js × microCMS で 人気記事一覧を 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用のライブラリである <code>google-api-nodejs-client</code> を利用します。</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 &#x27;googleapis&#x27;;
import { isEmpty } from &#x27;lodash&#x27;;

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

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

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

  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(&#x27;&#x2F;blogs&#x2F;&#x27;, &#x27;&#x27;));
    }
  });

  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>&#x2F;blogs&#x2F;英数字ハイフン</code> が含むのみを取得するようにしています。</p><pre><code>dimensionFilterClauses: [
{
  filters: [
    {
      dimensionName: &#x27;ga:pagePath&#x27;,
      operator: &#x27;REGEXP&#x27;,
      expressions: [&#x27;^&#x2F;blogs&#x2F;[0-9a-zA-Z\\-]+$&#x27;],
    },
  ],
}]</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(&#x27;,&#x27;);

  const key = {
    headers: { &#x27;X-API-KEY&#x27;: process.env.API_KEY ?? &#x27;&#x27; },
  };
  const topBlogs = await fetch(
    `https:&#x2F;&#x2F;your-service.microcms.io&#x2F;api&#x2F;v1&#x2F;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>以下は 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年の向けた話

【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>.&#x2F;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(&#x2F;\bwf-loading\b&#x2F;g, &quot;&quot;) + &quot; wf-inactive&quot;;
    }, config.scriptTimeout),
    tk = d.createElement(&quot;script&quot;),
    f = false,
    s = d.getElementsByTagName(&quot;script&quot;)[0],
    a;
  h.className += &quot; wf-loading&quot;;
  tk.src = &quot;https:&#x2F;&#x2F;use.typekit.net&#x2F;&quot; + config.kitId + &quot;.js&quot;;
  tk.async = true;
  tk.onload = tk.onreadystatechange = function () {
    a = this.readyState;
    if (f || (a &amp;&amp; a != &quot;complete&quot; &amp;&amp; a != &quot;loaded&quot;)) 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>.&#x2F;pages&#x2F;_app.tsx

import adobeLoader from &quot;..&#x2F;adobeLoader&quot;;

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: &#x27;fot-tsukuardgothic-std&#x27;, 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:&#x2F;&#x2F;qiita.com&#x2F;hirossyi73&#x2F;items&#x2F;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>.&#x2F;pages &#x2F; [dynamic] &#x2F;index.js

import { GetStaticPaths, GetStaticProps, NextPage } from &#x27;next&#x27;
import React from &#x27;react&#x27;
import { useRouter } from &#x27;next&#x2F;router&#x27;;

const DynamicPage: NextPage = () =&gt; {
  const router = useRouter();
  return (
    &lt;div&gt;
      &lt;h1&gt;{router.query.dynamic}&lt;&#x2F;h1&gt;
    &lt;&#x2F;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: &quot;https:&#x2F;&#x2F;www.example.com&quot;,
  generateRobotsTxt: true,
};</code></pre><p><br>最後にプロジェクトがビルドされるたびにサイトマップ生成をするようにするため、<code>package.json</code>の<code>script</code>に以下を追加します。</p><pre><code>&quot;postbuild&quot;: &quot;next-sitemap&quot;</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>.&#x2F;public&#x2F;robots.txt

User-agent: *
Allow: &#x2F;
Host: https:&#x2F;&#x2F;www.example.com
Sitemap: https:&#x2F;&#x2F;www.example.com&#x2F;sitemap.xml</code></pre><p><br></p><pre><code>.&#x2F;public&#x2F;sitemap.xml

&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;urlset xmlns=&quot;http:&#x2F;&#x2F;www.sitemaps.org&#x2F;schemas&#x2F;sitemap&#x2F;0.9&quot; xmlns:news=&quot;http:&#x2F;&#x2F;www.google.com&#x2F;schemas&#x2F;sitemap-news&#x2F;0.9&quot; xmlns:xhtml=&quot;http:&#x2F;&#x2F;www.w3.org&#x2F;1999&#x2F;xhtml&quot; xmlns:mobile=&quot;http:&#x2F;&#x2F;www.google.com&#x2F;schemas&#x2F;sitemap-mobile&#x2F;1.0&quot; xmlns:image=&quot;http:&#x2F;&#x2F;www.google.com&#x2F;schemas&#x2F;sitemap-image&#x2F;1.1&quot; xmlns:video=&quot;http:&#x2F;&#x2F;www.google.com&#x2F;schemas&#x2F;sitemap-video&#x2F;1.1&quot;&gt;
&lt;url&gt;&lt;loc&gt;https:&#x2F;&#x2F;www.example.com&#x2F;&lt;&#x2F;loc&gt;&lt;changefreq&gt;daily&lt;&#x2F;changefreq&gt;&lt;priority&gt;0.7&lt;&#x2F;priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;&#x2F;lastmod&gt;&lt;&#x2F;url&gt;
&lt;url&gt;&lt;loc&gt;https:&#x2F;&#x2F;www.example.com&#x2F;0&lt;&#x2F;loc&gt;&lt;changefreq&gt;daily&lt;&#x2F;changefreq&gt;&lt;priority&gt;0.7&lt;&#x2F;priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;&#x2F;lastmod&gt;&lt;&#x2F;url&gt;
&lt;url&gt;&lt;loc&gt;https:&#x2F;&#x2F;www.example.com&#x2F;1&lt;&#x2F;loc&gt;&lt;changefreq&gt;daily&lt;&#x2F;changefreq&gt;&lt;priority&gt;0.7&lt;&#x2F;priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;&#x2F;lastmod&gt;&lt;&#x2F;url&gt;
&lt;url&gt;&lt;loc&gt;https:&#x2F;&#x2F;www.example.com&#x2F;2&lt;&#x2F;loc&gt;&lt;changefreq&gt;daily&lt;&#x2F;changefreq&gt;&lt;priority&gt;0.7&lt;&#x2F;priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;&#x2F;lastmod&gt;&lt;&#x2F;url&gt;
&lt;url&gt;&lt;loc&gt;https:&#x2F;&#x2F;www.example.com&#x2F;3&lt;&#x2F;loc&gt;&lt;changefreq&gt;daily&lt;&#x2F;changefreq&gt;&lt;priority&gt;0.7&lt;&#x2F;priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;&#x2F;lastmod&gt;&lt;&#x2F;url&gt;
&lt;url&gt;&lt;loc&gt;https:&#x2F;&#x2F;www.example.com&#x2F;4&lt;&#x2F;loc&gt;&lt;changefreq&gt;daily&lt;&#x2F;changefreq&gt;&lt;priority&gt;0.7&lt;&#x2F;priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;&#x2F;lastmod&gt;&lt;&#x2F;url&gt;
&lt;url&gt;&lt;loc&gt;https:&#x2F;&#x2F;www.example.com&#x2F;5&lt;&#x2F;loc&gt;&lt;changefreq&gt;daily&lt;&#x2F;changefreq&gt;&lt;priority&gt;0.7&lt;&#x2F;priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;&#x2F;lastmod&gt;&lt;&#x2F;url&gt;
&lt;url&gt;&lt;loc&gt;https:&#x2F;&#x2F;www.example.com&#x2F;6&lt;&#x2F;loc&gt;&lt;changefreq&gt;daily&lt;&#x2F;changefreq&gt;&lt;priority&gt;0.7&lt;&#x2F;priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;&#x2F;lastmod&gt;&lt;&#x2F;url&gt;
&lt;url&gt;&lt;loc&gt;https:&#x2F;&#x2F;www.example.com&#x2F;7&lt;&#x2F;loc&gt;&lt;changefreq&gt;daily&lt;&#x2F;changefreq&gt;&lt;priority&gt;0.7&lt;&#x2F;priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;&#x2F;lastmod&gt;&lt;&#x2F;url&gt;
&lt;url&gt;&lt;loc&gt;https:&#x2F;&#x2F;www.example.com&#x2F;8&lt;&#x2F;loc&gt;&lt;changefreq&gt;daily&lt;&#x2F;changefreq&gt;&lt;priority&gt;0.7&lt;&#x2F;priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;&#x2F;lastmod&gt;&lt;&#x2F;url&gt;
&lt;url&gt;&lt;loc&gt;https:&#x2F;&#x2F;www.example.com&#x2F;9&lt;&#x2F;loc&gt;&lt;changefreq&gt;daily&lt;&#x2F;changefreq&gt;&lt;priority&gt;0.7&lt;&#x2F;priority&gt;&lt;lastmod&gt;2020-11-03T07:56:27.537Z&lt;&#x2F;lastmod&gt;&lt;&#x2F;url&gt;
&lt;&#x2F;urlset&gt;</code></pre><p><br></p><h2 id="h7005ec096e">Google Serch Consoleからサイトマップを登録する</h2><p>あとは、Google Serch Consoleの管理画面からサイトマップを追加します。<strong>https:&#x2F;&#x2F;www.example.com</strong><strong>&#x2F;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:&#x2F;&#x2F;www.iamvishnusankar.com&#x2F;blogs&#x2F;how-to-generate-sitemap-for-nextjs-projects&#x2F;</a></p>