<p>これまでは、メイン画像をFigmaで作成してmicroCSM側に記事と一緒に登録しており記事のメイン画像&amp;OGP画像として使用するような仕組みにしていました。<br>問題点としては毎回メイン画像を作成する手間とメインとOGP画像に別々の画像を指定できないことです。<br>色々なデザインの画像を作成することが出来るのは良いのですが、その分簡単な記事などを書くときは少し手間に感じていました...<br>そこでメイン画像とOGP画像を切り分けることにしました。<br>（メイン画像に好きな画像を差し込めるようになるのでもっと早く導入すべきでした...w）<br></p><h2 id="h0a947c85e6">OG Image Generation</h2><p><a href="https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation#" target="_blank" rel="noopener noreferrer">OG Image Generation</a> は<a href="https://vercel.com/docs/concepts/functions/edge-functions" target="_blank" rel="noopener noreferrer">Vercel Edge Functions</a> を使用したOG画像の生成に関しての題材があります。<br>Edge Functionsは簡単にいうとVercelがもつCDNのエッジにて簡単な処理を実行することができる機能です。<br><a href="https://og-playground.vercel.app/" target="_blank" rel="noopener noreferrer">https://og-playground.vercel.app/</a> で簡単に確認できるので一度見てみて下さい。<br><br>OG Imageの生成には「<a href="https://github.com/vercel/satori" target="_blank" rel="noopener noreferrer">satori</a>」とResvgでHTML, CSSをPNGに変換している。<br><br>参考のサンプルも記載があるので下記から確認してみて下さい。<br><a href="https://vercel.com/docs/concepts/functions/edge-functions/og-image-examples" target="_blank" rel="noopener noreferrer">https://vercel.com/docs/concepts/functions/edge-functions/og-image-examples</a><br></p><h2 id="hd3d292db50">今回作成したOGP画像</h2><p><img src="https://images.microcms-assets.io/assets/52c738f0d07d47978ee83b53d2344800/2a2275d98f0b45b187002db7e28b29c1/og.png" alt=""></p><h2 id="hc6c0feff31">pages/api/ogの調整</h2><p>このブログにはChakraUIを使用しているので導入したかったのですが少し手間がかかりそうだったので断念。<br>configの設定で&nbsp;<strong>runtime: 'experimental-edge' </strong>を有効にするのをお忘れなく。</p><pre><code>import { ImageResponse } from '@vercel/og'
import { NextRequest } from 'next/server'

export const config = {
  runtime: 'experimental-edge'
}

export default function handler(req: NextRequest) {
  try {
    const { searchParams } = new URL(req.url)

    const hasTitle = searchParams.has('title')
    const title = hasTitle
      ? searchParams.get('title')?.slice(0, 100)
      : 'megumu.me'

    return new ImageResponse(
      (
        &lt;div
          style={{
            display: 'flex',
            justifyContent: 'center',
            height: '100%',
            width: '100%',
            alignItems: 'center',
            background: 'linear-gradient(135deg, #6139FD, #974FFE, #C260FE)'
          }}
        &gt;
          &lt;div
            style={{
              backgroundColor: 'white',
              border: 'none',
              height: '84%',
              width: '88%',
              display: 'flex',
              textAlign: 'left',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'column',
              flexWrap: 'nowrap',
              padding: 40,
              position: 'relative',
              borderRadius: 50
            }}
          &gt;
            &lt;div
              style={{
                fontSize: 54,
                color: 'black',
                lineHeight: 1.3,
                width: '100%'
              }}
            &gt;
              {title}
            &lt;/div&gt;
            &lt;div
              style={{
                display: 'flex',
                gap: 8,
                alignItems: 'center',
                position: 'absolute',
                bottom: 20,
                right: 40
              }}
            &gt;
              &lt;div
                style={{
                  width: '40px',
                  height: '40px',
                  borderRadius: '50%',
                  background:
                    'linear-gradient(135deg, #6139FD, #974FFE, #C260FE)'
                }}
              &gt;&lt;/div&gt;
              &lt;p style={{ fontSize: 34, marginTop: 10 }}&gt;megumu.me&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      ),
      {
        width: 1280,
        height: 640
      }
    )
  } catch (e: any) {
    console.log(`${e.message}`)
    return new Response(`Failed to generate the image`, {
      status: 500
    })
  }
}</code></pre>

今更ながらVercelのOG Image Generationを個人ブログに導入しました。

今更ながらVercel OG Image Generationを個人ブログに導入する

<p>Docker, Laravelの開発環境においてsimple-qrcodeでQRコードを生成する仕組みを導入したのでそのメモ。<br>Github→ <a href="https://github.com/SimpleSoftwareIO/simple-qrcode" target="_blank" rel="noopener noreferrer">https://github.com/SimpleSoftwareIO/simple-qrcode</a><br><br></p><h2 id="hed900658dc">環境</h2><p>Docker<br>● php:7.4-fpm-alpine3.12<br>Laravel<br>● v8.12<br></p><h2 id="h2beb075646">ライブラリの導入</h2><p>simple-qrcodeのインストールを行なう。<br>v4としているのは、<a href="https://www.simplesoftware.io/#/docs/simple-qrcode" target="_blank" rel="noopener noreferrer">公式のドキュメント</a>に記載されているからです。<br>v3以前は問題があったようでv4推奨とのこと。</p><blockquote>There was a Laravel facade issue within v3 that causes some loading issues. The only way to fix this was to create a backwards breaking change so v4 has been released.</blockquote><pre><code>$ docker compose exec &lt;your-service&gt; composer require simplesoftwareio/simple-qrcode "~4"</code></pre><p><br>ライブラリ自体が導入されたかはインストール完了後に、下記コマンドで確認。<br>このような感じでインストール結果が表示されるはずです。</p><pre><code>$ docker compose exec &lt;your-service&gt; composer show --installed | grep simple-qrcode
&gt;&gt; simplesoftwareio/simple-qrcode&nbsp;&nbsp;&nbsp;&nbsp;4.2.0&nbsp;&nbsp;&nbsp;Simple QrCode is a QR code generator made for Laravel.</code></pre><h2 id="h36531c4bc9">QRコードの生成の前に...</h2><p>あとは、「simplesoftwareio/simple-qrcode」を使用してQRコードの生成を行えば良いのですが、一つ追加で確認することがあります。<br>「simple-qrcode」を含む多くのライブラリはデフォルトのQRコード生成結果を画像ではなくSVGで出力するようになっています。<br>つまり画像生成の機能自体はオプションだということです。<br>simple-qrcodeでは画像生成を行なうにはPHPの拡張モジュールの「<strong>imagick</strong>」を導入する必要があるので注意。</p><h2 id="h549f9f76da">imagickの導入</h2><p>関連パッケージのインストールを行います。<br>（環境によって既に入っているパッケージが異なるので適宜追加すること）<br>ここら辺が疎いので、諸々時間がかかりました...</p><pre><code># imagemagickに関連するパッケージの追加
RUN apk update &amp;&amp; \
	    apk add --no-cache \
	    libpng-dev libjpeg-turbo-dev freetype-dev imagemagick imagemagick-dev autoconf g++ make

RUN pecl install imagick

RUN docker-php-ext-configure gd --with-freetype --with-jpeg
RUN docker-php-ext-install -j$(nproc) gd
RUN docker-php-ext-enable imagick</code></pre><p><br>余談ですが、PHP拡張のインストールと有効化を一度に行ってくれるコマンドがあるんですね...上で言うと次の部分です。</p><pre><code>RUN docker-php-ext-install &lt;任意&gt;</code></pre><p><br>開発中に既存で入っていたので取り敢えず、peclを使ってインストール→docker-php-ext-enableで有効化としていました。<br>どうやらdocker-php-ext-installはそれをまとめてしてくれているようですね...!<br><a href="https://prograshi.com/language/php/pecl-install-docker-php-ext-install/" target="_blank" rel="noopener noreferrer">【PHP・Laravel】peclとは何か？pecl install と docker-php-ext-installの違い。docker-php-ext-enableなどの使い方を実例で解説（pearとの違い）</a><br><br>しっかりと「imagick」がインストールされ、pngが画像生成の対応するフォーマットに含まれるか確認しましょう。<br>自身のサービスの任意の画面でphpinfoを呼び出し、imagickとその対応するフォーマットが含まれているか確認。<br>（simple-qrcodeはpngでの画像生成に対応しているのでpngを確認すること。）</p><pre><code>phpinfo();</code></pre><p><br></p><h2 id="hcdadd92610">QRコードの生成処理</h2><p>たったこれだけで簡単にですが画像生成ができます。<br>formatメソッドでpngを指定することでsvg出力されるQRコードをpngに変換してくれます。<br>format('png')を指定して、変換できないとエラーが出た場合は、imagickがインストールされていないかもしれません。<br>再度インストールを試みて下さい。<br>自分の場合は、base64にエンコードして取得するAPIを作成しフロントからAjaxで取得→表示するようにしています。<br>適宜、s3に保存したり、publicに配置したりできるのでいいですね。</p><pre><code>use SimpleSoftwareIO\QrCode\Facades\QrCode;
// 省略...
$url = '任意のurl';
$base64_qrcode_img = base64_encode(QrCode::size(250)-&gt;format('png')-&gt;generate($url));
return response()-&gt;json([
  "base64_qrcode_img" =&gt; $base64_qrcode_img
]);
// ...省略</code></pre>

simple-qrcodeというPHPのライブラリを使用してDockerでの開発環境でQRコードの生成を行なう。

【Laravel】Docker環境でQRコードの生成

<p>Chakra UIを使用して、「Button」コンポーネントの初期スタイルを設定する時に少し躓いたのでメモ。<br>基本的にChakraは初期設定なしでも使用することが可能。<br>しかし、hover、activeなどに対して初期スタイルがあたっており各コンポーネントを呼び出す度に打ち消しを行わないといけないのは面倒である。<br><br>そこでextendThemeというものが用意されておりCSSの設定を行うことができる。<br>下記はextendThemeのメモ。</p><pre><code>import {
  extendTheme,
  withDefaultProps,
  type ThemeConfig,
  type ComponentStyleConfig,
} from '@chakra-ui/react'

// Dark Modeの設定ができる
const config: ThemeConfig = {
  // 初期Modeは、light・dark・systemから選択できる。
  initialColorMode: 'light',
  useSystemColorMode: false,
}

// html タグを指定してスタイルの上書きができる
const styles = {
  global: {
    body: {
      bg: 'sTMainColor',
      color: 'sTParagraph',
    },
  },
}

// コンポーネントを指定してスタイルの上書きができる
const Heading: ComponentStyleConfig = {
  baseStyle: {
    color: 'sTHeading',
  },
}

const theme = extendTheme(
  withDefaultProps({
    defaultProps: {
      variant: 'unstyled',
      size: 'auto',
    },
    components: ['Button'],
  }),
  {
    components: {
      Heading,
    },
    semanticTokens: {
      colors: {
        sTMainColor: {
          _light: '#F9F4EF',
          _dark: '#020826',
        },
        sTSecondColor: {
          _light: '#8C7851',
          _dark: '#F9F4EF',
        },
        sTHeading: {
          _light: '#020826',
          _dark: '#F9F4EF',
        },
        sTParagraph: {
          _light: '#716040',
          _dark: '#F9F4EF',
        },
        sTButton: {
          _light: '#FFFFFE',
          _dark: '#020826',
        },
        sTNotice: '#EB5757',
      },
    },
    styles,
    config,
  },
)

export default theme</code></pre><p><br>各コンポーネントには基本的に「colorScheme」と「variant」と「size」のdefault props設定されていることが多い。<br>このdefault propsはextendThemeで指定したスタイルより優先度が高いのでスタイルの変更が反映されない。<br>そこで各default propsの初期値を上書くことができる。<br><br>● <a href="https://chakra-ui.com/docs/styled-system/theming/customize-theme#theme-extension-withdefaultcolorscheme" target="_blank" rel="noopener noreferrer"><strong>withDefaultColorScheme</strong></a>：colorSchemeの初期値の上書き<br>● <a href="https://chakra-ui.com/docs/styled-system/theming/customize-theme#theme-extension-withdefaultsize" target="_blank" rel="noopener noreferrer"><strong>withDefaultSize</strong></a>：sizeの初期値の上書き<br>● <a href="https://chakra-ui.com/docs/styled-system/theming/customize-theme#theme-extension-withdefaultvariant" target="_blank" rel="noopener noreferrer"><strong>withDefaultVariant</strong></a>：variantの初期値の上書き<br>● <a href="https://chakra-ui.com/docs/styled-system/theming/customize-theme#theme-extension-withdefaultprops" target="_blank" rel="noopener noreferrer"><strong>withDefaultProps</strong></a>：Propsに渡される初期値の上書き<br><br>基本的には、「withDefaultProps」で全て更新できるので迷ったらこれを使うといい。<br>プロジェクト内で使用するコンポーネントに関しては初期設定を行っておくことでスタイルの統一性、開発体験の向上につながるのでしっかりと設定していきたい。<br></p>

Chakra UIは各コンポーネントのProps（colorSchemeやsizeなど）に初期値が指定されている。コンポーネントのbaseStyleを更新しても反映されない問題が発生したのでextendThemeを見直す。

【Chakra UI】extendThemeを使用して各コンポーネントの初期設定を行う

<p>簡単なHooksのメモ用。<br>リサイズに合わせて画面サイズを取得するHook。<br>Custom Hooksは何かとメモしておくと便利なのでメモメモ。<br><br>useWindowDimensions Custom Hook.</p><pre><code>import { useState, useEffect } from "react";

export const useWindowDimensions = () =&gt; {
&nbsp; const getWindowDimensions = () =&gt; {
&nbsp; &nbsp; const { innerWidth: width, innerHeight: height } = window;
&nbsp; &nbsp; return {
&nbsp; &nbsp; &nbsp; width,
&nbsp; &nbsp; &nbsp; height,
&nbsp; &nbsp; };
&nbsp; };

&nbsp; const [windowDimensions, setWindowDimensions] = useState(
&nbsp; &nbsp; getWindowDimensions()
&nbsp; );
&nbsp; useEffect(() =&gt; {
&nbsp; &nbsp; const onResize = () =&gt; {
&nbsp; &nbsp; &nbsp; setWindowDimensions(getWindowDimensions());
&nbsp; &nbsp; };
&nbsp; &nbsp; window.addEventListener("resize", onResize);
&nbsp; &nbsp; return () =&gt; window.removeEventListener("resize", onResize);
&nbsp; }, []);
&nbsp; return windowDimensions;
};</code></pre><p><br>使用例</p><pre><code>const { width, height } = useWindowDimensions();</code></pre>

画面リサイズ時に画面サイズを取得したい時に使ってください。

【React Hooks】画面サイズを動的に取得するHooksの作成メモ

<p>Chakra UIはFramer Motionを基盤に作られており、Framer Motionとの連携がスムーズにできます。<br>Next.JSにて画面遷移時に、下から上に向かって表示されるTransitionを作成したのでそのメモ。<br></p><h2 id="hd967fe357c">/pages/_app.jsの設定</h2><p>全ページでTransitionが使用できるように子コンポーネントをWrap。<br>ChakraUIのコンポーネントも後々使用するのでChakraProvider &gt; AnimatePresence となるようにする。</p><pre><code>function MyApp({ Component, pageProps, router }: AppProps) {
  return (
    &lt;&gt;
      &lt;ChakraProvider theme={darkTheme} resetCSS&gt;
        &lt;AnimatePresence
          exitBeforeEnter
          onExitComplete={() =&gt; window.scrollTo(0, 0)}
        &gt;
          &lt;Layout&gt;
            &lt;Component key={router.asPath} {...pageProps} /&gt;
          &lt;/Layout&gt;
        &lt;/AnimatePresence&gt;
      &lt;/ChakraProvider&gt;
    &lt;/&gt;
  )
}

export default MyAppT</code></pre><h2 id="hd9388d6554">Transition Componentの作成</h2><p>components/VisibilitySection.tsx</p><pre><code>import { ReactNode, VFC } from 'react'
import { chakra, ChakraProps, shouldForwardProp } from '@chakra-ui/react'
import { motion } from 'framer-motion'

type Props = {
  children: ReactNode
  delay?: number
  chakraProps?: ChakraProps
}

const ChakraBox = chakra(motion.div, {
  shouldForwardProp: prop =&gt; {
    return shouldForwardProp(prop) || prop === 'transition'
  }
})

const VisibilitySection: VFC&lt;Props&gt; = props =&gt; {
  const { children, delay = 0, chakraProps } = props
  return (
    &lt;ChakraBox
      {...chakraProps}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 20 }}
      // @ts-ignore no problem in operation, although type error appears.
      transition={{
        duration: 0.8,
        delay,
        type: 'spring'
      }}
    &gt;
      {children}
    &lt;/ChakraBox&gt;
  )
}

export default VisibilitySection</code></pre><h2 id="h3e8b614b22">任意のページで使用</h2><pre><code>import VisibilitySection from '../components/VisibilitySection'
...
...
&lt;VisibilitySection delay={0.4} chakraProps={{ mb: 10 }}&gt;
  &lt;p&gt;Sample Text...!!&lt;/p&gt;
&lt;/VisibilitySection&gt;</code></pre><h2 id="h3de35099b3">参考</h2><p>● https://chakra-ui.com/guides/integrations/with-framer<br>● https://www.framer.com/docs/<br>● https://github.com/craftzdog/craftzdog-homepage</p>

Chakra UI + Framer Motionで画面遷移時のTransition設定。Next.jsに組み込んでいます。

Chakra UI + Framer Motionで画面遷移時のTransition設定

<p>旧ブログ・当ブログともにお問い合わせフォームを持っていませんでした。<br>理由は、様々なSNSでやり取りができるので不要かな？と思っていたからです。<br><br>では、なぜ作ったのかは主に以下の理由からです。<br>● SNSで気軽にやり取りできるのは、近しい人だから<br>● 仕事や個人的なご相談のお問い合わせを受け付ける際に簡易的に提示できるフォームが欲しかったから<br>● 第三者に自分のアドレス・電話番号などを不要に見せたくなかったから<br>● Slackで管理したいから<br>● 技術的に勉強になるから</p><h2 id="h50dea5298e">使用したライブラリ等・環境</h2><p>● Node v16.13.1<br>● npm v8.1.0<br>● <a href="https://react-hook-form.com/jp/" target="_blank" rel="noopener noreferrer">react-hook-form</a><br>● @chakra-ui/react<br>● <a href="https://github.com/jquense/yup" target="_blank" rel="noopener noreferrer">yup</a><br>● microCMS<br>● Slack Webhook<br>to <a href="https://github.com/niiharamegumu/MegumuMe/blob/main/package.json" target="_blank" rel="noopener noreferrer">Package.json</a></p><h2 id="h06cdd4c47e">File</h2><p>● <a href="https://github.com/niiharamegumu/MegumuMe/blob/main/pages/contact/index.tsx" target="_blank" rel="noopener noreferrer">/pages/contact/index.tsx</a><br>● <a href="https://github.com/niiharamegumu/MegumuMe/blob/main/pages/api/contact.ts" target="_blank" rel="noopener noreferrer">/pages/api/contact.ts</a><br>その他のcomponentsはコード内参照</p><h2 id="h8d78e14043">感想</h2><h3 id="h01a9d12025">Yup便利</h3><p>たったこれだけでスキーマの定義ができる。<br>コンポーネント内部でどういったバリデーションを適用している方一目でわかるので更新性も高い。</p><pre><code>const schema = yup
  .object({
    name: yup.string().trim().required("お名前をご記入ください。"),
    mail: yup
      .string()
      .email("メールアドレスの形式が不正です")
      .required("メールアドレスをご記入ください。"),
    body: yup.string().trim().required("お問い合わせ内容をご記入ください。"),
  })
  .required();</code></pre><h3 id="hc8ab1da4a2">React Hook Form + Chakra UIの組み合わせは開発体験が素晴らしい</h3><p>まずは、お互いのサービスページ内に導入方法が記載されているので把握しやすい点がいい。<br><a href="https://react-hook-form.com/jp/get-started#IntegratingwithUIlibraries" target="_blank" rel="noopener noreferrer">React Hook Form - UI ライブラリを使用する</a><br><a href="https://chakra-ui.com/guides/integrations/with-hook-form" target="_blank" rel="noopener noreferrer">Chakra UI + React Hook Form</a><br>また、React Hook Formが用意しているHooksが多様にあるため、様々なUIライブラリとの相性が良さそう。<br>ちなみにemail()の関数では下記の正規表現を元にバリデーションを行っているようです。<br>かなり厳密...w</p><pre><code>let rEmail = /^((([a-z]|\d|[!#\$%&amp;'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&amp;'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i; // eslint-disable-next-line</code></pre><h3 id="h64c0027b33">Chakra UIのuseToast()はスタイリッシュ</h3><p>たったこれだけで送信の成功時・エラー時の分岐ができる上に、わかりやすいNoticeを生成できる。</p><pre><code>const toast = useToast(); // hooks
const isSuccess = await sendContact(data); // success or error.
toast({
      status: isSuccess ? "success" : "error",
      title: isSuccess
        ? "お問い合わせありがとうございます!"
        : "お問い合わせでエラーが発生しました...",
      description: isSuccess
        ? "ご確認の上、ご記載いただいたメールアドレス宛にご連絡致します。"
        : "ページの読み込み等を行って再度お問い合わせください。",
      position: "top",
      isClosable: true,
      duration: 5000,
    });</code></pre><h3 id="hf1b4700523">microCMS + Slackの組み合わせは色々試せそう</h3><p>個人的にLINEやTwitterなどでの連絡手段よりSlackを使用する。<br>そのためSlackで全部管理・確認ができるようになることは大きなメリットがある。<br>今回、microCMSへPOSTしたContactデータは、正常に作成されると同時にSlackへWebhookを介して通知されるようにしている。<br>microCMS側では、細かなイベントタイミングを設定できるのでContact以外の使用方法がありそう。<br>例えば、コメント機能とか？</p><h3 id="hd4239842a0">BFFとしてのNextJS API Routesの立ち位置</h3><p>NextJSで使用できるAPI Routesは簡易的にAPIを作成できる。<br>色々と手作りしないといけないのでしっかりとしたAPIを構築するには手を焼きそう。<br>ただ、APIをラップする機能であったり、APIKeyを隠蔽したりする使用方法であれば比較的簡易的に構築できる。<br>BFFとしてのアプローチとしては、最適解のような気もしています・・・知見不足なだけかもだけど...<br>より一層フロントエンドエンジニアがフロントで使いやすいようにAPI周りを作成していく事は増えると思うので、<br>引き続き学んでいきたい箇所。<br></p><h2 id="ha214098e44">まとめ</h2><p>これで念願の個人お問合せフォームが出来ましたw<br><br>お問い合わせは<a href="/contact">こちら</a></p>

React Hook Form・Yup・Chakra UI・microCMSでお問い合わせフォームを作成

<h2 id="h9b380a12d4">そもそもメタフィールド（meta filed）とは</h2><p>Shopifyには、メタフィールドという概念があります。<br>簡単に言うとカスタムフィールドの様なもので管理画面で指定した任意の情報をフロントに出力できる機能です。<br>商品・バリエーション（SKU）・コレクション・顧客・注文別に異なる情報を出力したい場合に使用します。<br>少し前までは、アプリを活用する必要があり使い勝手が悪かったり、そもそも認知されていないなど問題がありました。<br>最近のアップデートでShopifyの管理画面上から簡単に設定することができるようになり、様々な使い道が検討されている状態です。<br></p><h2 id="h01a4a09397">メタフィールドで使えるデータ型</h2><p>基本的な使い方や細かなデータ方の説明に関しては<a href="https://qiita.com/eijiSaito/items/ebe3465c345cafba1b42" target="_blank" rel="noopener noreferrer">こちら</a>の記事が大変綺麗にまとめてあるのでぜひご確認下さい。<br>※メタフィールド？使い方？という方はぜひ一読頂いた後にこのページに戻ってきていただくとわかりやすいかと思います。</p><h2 id="h0ed7f10d29">Ex.商品詳細ページに任意の商品を表示する</h2><p>例えば、商品詳細ページに表示されるメインの商品とは別に手動で選択した商品を表示したい場合があったとしましょう。</p><h3 id="hbbae3006b6">商品メタフィールドの追加</h3><ol><li>① Shopify管理画面＞設定＞メタフィールド＞商品を開きましょう。</li><li>② 右上の「定義を追加する」を選択</li><li>③ 名前：任意 / ネームスペース：任意 （ex.test_<em>fields.product_</em>01） / 説明：任意</li><li>④ コンテンツタイプを選択する。今回は「リファレンス＞商品」を選択。</li></ol><p>たったこれだけで商品管理ページ内にメタフィールドを追加出来ます。</p><h3 id="h32af94ed66">メタフィールド任意の商品を選択する</h3><p>選択した商品を表示したい商品管理ページへ移動します。<br>管理画面の最下部に先程設定した名前のメタフィールドが追加されていると思います。<br>リファレンス・商品タイプで登録することですでに登録済みの商品を選択できるようになっているかと思います。<br>任意の商品を選択し、保存を押しましょう。<br>これだけで任意の商品に任意の商品を紐付けることが出来ました。</p><h3 id="ha4c11f7588">商品詳細ページのLiquidにメタフィールドを記述する</h3><p>main-product.liquidやproduct.liquidが対象になるかと思います。<br>そこに先程作成時に指定したネームスペースを元に出力しましょう。</p><pre><code>{% if product.test_fields.product_01 %}
  {% assign product01 = all_products[product.test_fields.product_01] %}
  &lt;h2&gt;{{ product01.title }}&lt;/h2&gt;
{% endif %}</code></pre><p>たったこれだけで、product01には先程管理画面で指定した商品が入り、タイトルを出力することができます。<br>商品詳細ページに手動おすすめ商品を出力したり、商品詳細ページをスタイリング詳細ページとしてスタッフのスタイリングに紐づく商品を並べたりなど使い道はありそうです。<br>ちなみに「all_products」はliquid テーマのglobal objectsです。<br>全商品の中から特定の商品objectを取得することができます。<br>その他にも<a href="https://shopify.dev/api/liquid/objects" target="_blank" rel="noopener noreferrer">こちら</a>がglobal objectとして使用可能ですのでご確認下さい。</p>

Shopifyの商品メタフィールドの使いみちご紹介

【Shopify】Global Objectと商品メタフィールドを使って特定の商品を表示する

<p>このブログでは新規記事はmicroCMSの管理画面から行い、<br>ISRを使用し動的に静的な記事ページを作成しています。<br>ビルド時にSitemap.xmlを出力しても新規記事を追加する度にsitemapが古くなってしまう...<br>そのため、Sitemapに関してはSSRで最新のsitemap.xmlを作成し、出力するよう作るというのがこの記事の内容となります。<br></p><h2 id="hbb51ec97ba">実際のSSRのコード</h2><pre><code>import { format } from "date-fns";
import { GetServerSideProps } from "next";
import { getServerSideSitemap, ISitemapField } from "next-sitemap";

import { clientBlogs } from "../libs/microCMS/client";

type PostData = {
  id: string;
  updatedAt: string;
};

export const getServerSideProps: GetServerSideProps = async (context) =&gt; {
  const data = await clientBlogs.get({
    endpoint: "blogs",
    queries: { fields: "id,updatedAt" },
  });
  const postsData = data.contents;

  const fields: ISitemapField[] = [];
  postsData.forEach((data: PostData) =&gt; {
    fields.push({
      loc: `${process.env.NEXT_PUBLIC_SITE_URL}/blogs/${data.id}`,
      lastmod: format(new Date(data.updatedAt), "yyyy-MM-dd"),
      priority: 1,
      changefreq: "weekly",
    });
  });
  context.res.setHeader("Cache-Control","max-age=86400");
  return getServerSideSitemap(context, fields);
};

const Sitemap = () =&gt; null;
export default Sitemap;</code></pre><h2 id="hb61cccdb37">使っているPackage</h2><ul><li>・<a href="https://date-fns.org/" target="_blank" rel="noopener noreferrer">date-fns</a></li><li>・<a href="https://blog.microcms.io/microcms-next-jamstack-blog/" target="_blank" rel="noopener noreferrer">microcms-js-sdk</a></li></ul><h2 id="hc499e4ad38">解説</h2><h3 id="h207aecaaf0">microCMSから記事の一覧データを取得</h3><pre><code>const data = await clientBlogs.get({
    endpoint: "blogs",
    queries: { fields: "id,updatedAt" },
  });
  const postsData = data.contents;</code></pre><p>microCMSのAPIよりブログ記事のidとupdatedAt（更新日時）のみの一覧データを取得します。</p><h3 id="h7d9f67eb21">記事データを元にsitemapの中身を設定</h3><pre><code>const fields: ISitemapField[] = [];
  postsData.forEach((data: PostData) =&gt; {
    fields.push({
      loc: `${process.env.NEXT_PUBLIC_SITE_URL}/blogs/${data.id}`,
      lastmod: format(new Date(data.updatedAt), "yyyy-MM-dd"),
      priority: 1,
      changefreq: "weekly",
    });
  });
  context.res.setHeader("Cache-Control","max-age=86400");
  return getServerSideSitemap(context, fields);</code></pre><p>lastmodに関しては、必ず更新日時を入れるようにしましょう！<br>明示的にその日の日時を入れて毎日更新しているように見せかけるなどは決してしてはいけません。<br>検索エンジンのクロラーの評価が下がります。<br>サーバー負荷軽減のためcacheを24Hとしています。</p><h3 id="h86c6b8a733">Pageとしての返却はnull</h3><pre><code>const Sitemap = () =&gt; null;</code></pre><p>Page（ビュー）としての役割はないので返却値としては、nullに設定しておきましょう。<br></p><h2 id="h3de35099b3">参考</h2><p><a href="https://zenn.dev/catnose99/articles/c441954a987c24" target="_blank" rel="noopener noreferrer">https://zenn.dev/catnose99/articles/c441954a987c24</a></p>

microCMSの新規記事のsitemapを生成する

Next.js + microCMS構成にサイトマップを追加する

<h2 id="h0cca4ec9b8">Hydrogenとは（現時点では開発者プレビュー）</h2><blockquote>Hydrogenは、Shopifyのカスタムストアヘッドレスを構築するために使用されるフロントエンドのWeb開発フレームワークです。このフレームワークには、あなたのブランドをユニークにするためのスタイリングやデザインに時間を費やすことができるように、必要な構造、コンポーネント、ツールが含まれています。（<a href="https://shopify.dev/custom-storefronts/hydrogen" target="_blank" rel="noopener noreferrer">引用</a>）</blockquote><p>Shopifyは基本的にテンプレートを使うことで簡単にサイトを公開することができます。<br>テンプレートをHTML、CSS、JS、Liquidを使ってカスタマイズすることで比較的短時間でストアの公開が可能です。<br>ただ、よくも悪くもテンプレートベースのサイトになってしまい独自性を出すのが難しい場合があります。<br>そこでShopifyが開発を進めているのが<strong>Hydrogen</strong>です！<br>Shopifyが用意しているAPIを独自で構築したフロントサイトから使用し独自のECサイトを構築する事ができます。<br>１からフロント環境を構築するのは大変なため、各種Shopifyを用いたECに必要な機能が搭載されているReact製のFrameworkとなります。<br>公式：<a href="https://hydrogen.shopify.dev/?itcat=partner_blog&amp;itterm=hydrogen_developer_preview&amp;shpxid=15da200a-FFF5-4F19-416F-20FD78E301FB" target="_blank" rel="noopener noreferrer">Hydrogen Framework for dynamic commerce</a><br>Docs：<a href="https://shopify.dev/custom-storefronts/hydrogen" target="_blank" rel="noopener noreferrer">Hydrogen</a></p><h2 id="h23061a5cab">技術構成</h2><ul><li>・React.js</li><li>・Vite</li><li>・TypeScript（Viteのためno configで対応）</li><li>・Tailwind CSS</li></ul><h2 id="hf6625118dc">使ってみた感想</h2><p>最近何かと話題のViteが使われているため、環境構築がかなりスムーズです。<br>ローカル環境のサーバー起動速度も爆速で、開発体験にストレスがあまりなさそうな印象。<br>初期段階から様々なコンポーネントが用意されており開発者間でも認識をすり合わせながら開発ができそう。<br>Reactをある程度理解できる方が見たらサクッと触れそうなためShopifyのLiquidでの開発よりフロントエンド系のエンジニアには好まれそうだなと感じました。</p><h2 id="h6216260e67">テンプレートに組み込まれているコンポーネント</h2><ul><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/Button.client.jsx" target="_blank" rel="noopener noreferrer">Button</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/Cart.client.jsx" target="_blank" rel="noopener noreferrer">Cart</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/CartIcon.jsx" target="_blank" rel="noopener noreferrer">CartIcon</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/CartIconWithItems.client.jsx" target="_blank" rel="noopener noreferrer">CartIconWithItems</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/CartProvider.client.jsx" target="_blank" rel="noopener noreferrer">CartProvider</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/CartToggle.client.jsx" target="_blank" rel="noopener noreferrer">CartToggle</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/CartUIProvider.client.jsx" target="_blank" rel="noopener noreferrer">CartUIProvider</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/CurrencySelector.client.jsx" target="_blank" rel="noopener noreferrer">CurrencySelector</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/DefaultSeo.server.jsx" target="_blank" rel="noopener noreferrer">DefaultSeo</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/FeaturedCollection.jsx" target="_blank" rel="noopener noreferrer">FeaturedCollection</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/Footer.server.jsx" target="_blank" rel="noopener noreferrer">Footer</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/Gallery.client.jsx" target="_blank" rel="noopener noreferrer">Gallery</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/Header.client.jsx" target="_blank" rel="noopener noreferrer">Header</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/Layout.server.jsx" target="_blank" rel="noopener noreferrer">Layout</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/LoadingFallback.jsx" target="_blank" rel="noopener noreferrer">LoadingFallback</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/LoadMoreProducts.client.jsx" target="_blank" rel="noopener noreferrer">LoadMoreProducts</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/MobileCountrySelector.client.jsx" target="_blank" rel="noopener noreferrer">MobileCountrySelector</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/MobileNavigation.client.jsx" target="_blank" rel="noopener noreferrer">MobileNavigation</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/MoneyCompareAtPrice.client.jsx" target="_blank" rel="noopener noreferrer">MoneyCompareAtPrice</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/MoneyPrice.client.jsx" target="_blank" rel="noopener noreferrer">MoneyPrice</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/Navigation.client.jsx" target="_blank" rel="noopener noreferrer">Navigation</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/NotFound.server.jsx" target="_blank" rel="noopener noreferrer">NotFound</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/OpenIcon.jsx" target="_blank" rel="noopener noreferrer">OpenIcon</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/ProductCard.jsx" target="_blank" rel="noopener noreferrer">ProductCard</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/ProductDetails.client.jsx" target="_blank" rel="noopener noreferrer">ProductDetails</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/ProductOptions.client.jsx" target="_blank" rel="noopener noreferrer">ProductOptions</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/Seo.client.jsx" target="_blank" rel="noopener noreferrer">Seo</a></li><li>・<a href="https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/Welcome.server.jsx" target="_blank" rel="noopener noreferrer">Welcome</a></li></ul><h2 id="h20b4c98e2a">CSS</h2><p>CSSはDefaultでTailwindCSSに対応しています。不要であれば、<a href="https://shopify.dev/custom-storefronts/hydrogen/framework/css-support#remove-tailwind" target="_blank" rel="noopener noreferrer">Doc</a>内に削除の方法も書かれており、プロジェクトに合わせたCSSの管理ができそうです。</p><h2 id="h0c09297aaf">Routes</h2><p>src/pages配下のコンポーネントは、すべてルートとして登録されるようです。</p><h2 id="h641a31db93">スターターガイド</h2><p>スターターガイドに関しては<a href="https://shopify.dev/custom-storefronts/hydrogen/getting-started/create" target="_blank" rel="noopener noreferrer">こちら</a>に詳しく記載があります！<br>少ない手順で簡単に環境を構築することができるので一度触ってみてはいかがでしょうか。2022年内に正式にリリースするようなので注目のフレームワークです。</p><h2 id="ha0a2c3dbc8">Sample Code</h2><p>サンプルのコードをGithubに置いてます。<br>興味ある方は見てみて下さい。<br><a href="https://github.com/niiharamegumu/HydrogenStore" target="_blank" rel="noopener noreferrer">https://github.com/niiharamegumu/HydrogenStore</a></p>

Shopifyが開発を進めているHydrogen。今後浸透しそうな予感。

【Shopify Hydrogen】触ってみた

<p>日頃から楽しく見させてい頂いている「プログラミングをするパンダ」さんの記事で以下のような記事がありました。</p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">個人ブログを Gatsby から Next.js に移行したので記事を書きました！<a href="https://t.co/V7hT52rKFs">https://t.co/V7hT52rKFs</a></p>&mdash; プログラミングをするパンダ@Beer Break 開発中🍺 (@Panda_Program) <a href="https://twitter.com/Panda_Program/status/1488693655032381444?ref_src=twsrc%5Etfw">February 2, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p>同じような悩みを旧ブログに感じていたので、いっそのこと自分も新しくしようと本ブログを作成しました。<br>※ブログを作るのに使ったツール・パッケージ等</p><pre><code>- NextJS
- TypeScript
- ChakraUI
- Vercel
- microCMS
- cheerio
- date-fns
- highlight.js
- React Icons
- SWR</code></pre><h2 id="he6565fbbcd">旧ブログの問題点</h2><h3 id="h8e307edff9">Gatsbyそんなに詳しくなかった問題</h3><p>旧ブログはGatsby+NetlifyCMSの構成で作っていました。テンプレートを元に構築したのでかなりの短時間で作りました。（1Hとか）<br>しかし、技術的には内部の事を理解しておらず追加で機能開発を行うハードルが高くなっていました。<br>作った当時は、数年前でSSG?GraphQL?といった具合で...。なんかいい感じで動くブログを作りたかったのだと思います。<br>感じた問題点としては、自分が作ったものでは無いので愛着が全く無い点→機能拡張のモチベーションがなくなる点にありました。</p><h3 id="ha1fe5e4485">最新の記事が表示されない問題</h3><p>「プログラミングをするパンダ」さんも書かれていましたが、自分のブログでも。<br>何故か、最新の記事が表示されず直リンクでも404...。かと思えば表示される時もあったりと。<br>自分が投稿した記事が公開されているのかされていないのか分からないのは辛いものです。</p><h3 id="h14e281e391">良くも悪くもテンプレート問題</h3><p>旧ブログはテンプレートベースで作っていました。そのため、ある程度のデザインが当てられています。<br>少しの調整程度であれば、良いのですが。世界観が変わるほどの調整をした際に変更を加えないといけない箇所が目白押しでした。<br>これならば、一旦作り直してもいいかなと。</p><h2 id="he0ef39a171">かかった時間</h2><p>実際にかかった時間は、概算でこれくらいです。</p><ul><li>・環境周り構築：1H</li><li>・ブログ開発時間：20H</li><li>・本番データ登録：2H</li></ul><p>少し時間はかかりました。<br>初めて使うmicroCMSとの接続周りや装飾周りで苦戦しました...<br>ただ開発体自体はスムーズでストレスなく作ることができました。</p><h3 id="h19aee15278">ストレスフリーポイント①：Next.js with Vercel環境</h3><p>最近のフロントではNext.js + Vercelが多いと聞き試してみました。とてもスムーズな開発体験。<br>シンプルなUIで初めて触るにしても問題なく公開まで行けました。knowledgeも多いので調査もはかどります。</p><h3 id="h77a3c8fc48">ストレスフリーポイント②：Chakra UIの導入</h3><p>TailwindCSSと迷いましたがシンプルな見た目のサイトを作る予定だったのである程度機能的でコンポーネントベースで使い回せるChakraUIを選択。<br>これが良かった...!本当に...!<br>CSSの命名や設計を考えずにレスポンシブ対応までをスピーディに開発出来ました。<br>もう、みんなこれで良いんじゃないかな...wおすすめです。</p><h3 id="h1ef02bb994">ストレスフリーポイント③：microCMSの導入</h3><p>まだまだ発展途上のサービスでContentfulなどと比較するとできることや無料枠などに制限はあるものの、日本人が使いやすいような設計になっている管理画面が最高です。<br>全日本語対応でかなりシンプルなUIのためちょっと触れば全体像を把握することが出来ます。<br>API同士をうまく組み合わせれば様々な使い方も出来、個人利用、法人利用ともに活用しやすいかなと思います。<br>旧ブログではmarkdownで管理していました。<br>エンジニアとしてはmd管理は楽な面が多く重宝していたのですが、スマホから投稿できる、調整できるようにしたいと考えたときにHTML形式の方が良いかなと考えていまいした。<br>その点、microCMSはHTML形式で出力されるテキストエディタが内蔵されているので便利でした。</p><h3 id="h6d17a9cd28">ストレスフリーポイント④：Grid!Grid!!Grid!!!</h3><p>最後は、Gridレイアウトを活用するです。<br>これまでFlexレイアウトを使うことが多かったのですがレスポンシブ対応をしたり、レイアウトをスピーディに開発する際に少し面倒を感じていました。<br>しかし、最近は色々なサービスでIEのサポート終了が発表され、メジャーのブラウザでもサポートされているGrid。<br>レイアウトを柔軟に変更できるため拡張性を持って開発ができます！<br></p><h2 id="h807a725ecf">Repository</h2><p>拙いコードですが、リポジトリはこちらになります。<br><a href="https://github.com/niiharamegumu/MegumuMe" target="_blank" rel="noopener noreferrer">https://github.com/niiharamegumu/MegumuMe</a></p>

HeadlessCMSを使ってモダンなブログを3日間で構築した話

Next.jsとChakraUIとmicroCMSを使ってブログを3日間で作った話

<p>Shopify Theme開発を行っているとCSSの命名や既存のクラス・CSSの把握などやることがたくさんです。<br>簡単な機能追加やデザインの調整であれば、問題ないのですがストアまるまる構築するとなるとかなり時間の掛かる作業になります。<br>そこで今回は、Shopify Themeの開発環境にTailwindCSSを導入する方法をメモ程度に残します。<br></p><h2 id="h69d63ccaac">大まかな処理のイメージ</h2><ol><li>① TailwindCSSでクラスの指定、CSSの調整を行う。</li><li>② 常にTailwindCSSの追加を検知し、通常のCSSへ変換する</li><li>③ 通常のCSSをThemeで読み込んで使用</li></ol><p>コンパイル済みのCSSをShopify本番環境では使うようにします。<br></p><h2 id="hdbf98b940f">前提条件</h2><ul><li>・Shopfiy CLIがダウンロードされておりローカルで開発ができる人。</li><li>・Node npmの環境がある方。</li><li>・MacOSでの使用を示します。</li></ul><h2 id="hd76f960333">基本的な設定</h2><ol><li>① Shopify CLIの<a href="https://shopify.dev/themes/tools/cli/installation" target="_blank" rel="noopener noreferrer">インストール</a></li><li>② ご自身のShopify<a href="https://shopify.dev/themes/tools/cli/getting-started" target="_blank" rel="noopener noreferrer">ログイン</a>する</li><li>③ 導入するテーマを<a href="https://shopify.dev/themes/tools/cli/theme-commands#pull" target="_blank" rel="noopener noreferrer">Pull</a>してくる</li><li>④ ローカルで<a href="https://shopify.dev/themes/tools/cli/theme-commands#serve" target="_blank" rel="noopener noreferrer">Server</a>が立ち上がるか確認する</li></ol><p>④まで完了したらShopify CLIを使った基本的な開発ができるようになります。<br></p><h2 id="h498541c5f5">Shopify GitHub integration</h2><ol><li>① 通常のGithubのリポジトリを作るようにリポジトリを作成し、先程Pullしてきた（基本的な設定③）のコードをリモートに上げておく。</li><li>② Shopify StoreとGithubのリポジトリを<a href="https://shopify.dev/themes/tools/github/getting-started" target="_blank" rel="noopener noreferrer">連携する</a></li></ol><p>ここからまたままたローカルの作業に戻ります。</p><h2 id="h61b0dfa48c">Package.jsonを作成する</h2><pre><code>npm init -y</code></pre><p>package.jsonができているかの確認をする。</p><pre><code>{
  "name": "shopify-tailwind-test-2",
  "version": "1.0.0",
  "description": "description",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}</code></pre><h2 id="h5982f8b8b8">TailwindCSS Packageをインストール・設定する</h2><p>↓インストール（<a href="https://tailwindcss.com/docs/installation" target="_blank" rel="noopener noreferrer">公式</a>）</p><pre><code>npm install -D tailwindcss
npx tailwindcss init</code></pre><p>tailwind.config.jsができていることを確認する（v3の場合）<br><span style="color:#c7243a">※ tailwind css v3とv2ではconfig周りの設定が異なるので注意</span></p><pre><code>module.exports = {
&nbsp; content: ["./src/**/*.{html,js}"],
&nbsp; theme: {
&nbsp; &nbsp; extend: {},
&nbsp; },
&nbsp; plugins: [],
}</code></pre><p>TailwindCSSのコンパイル対象になるファイルをconfigへ設定する</p><pre><code>module.exports = {
  content: [
    "./layout/*.{liquid,js}",
    "./sections/*.{liquid,js}",
    "./snippets/*.{liquid,js}",
    "./templates/*.{liquid,js}",
    "./templates/customers/*.{liquid,js}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};</code></pre><p>Shopify Theme内の既存のクラスとかぶらないようにするために、Prefixを指定する。</p><pre><code>module.exports = {
  prefix: "tw-",
  content: [
    "./layout/*.{liquid,js}",
    "./sections/*.{liquid,js}",
    "./snippets/*.{liquid,js}",
    "./templates/*.{liquid,js}",
    "./templates/customers/*.{liquid,js}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};</code></pre><h2 id="h61df980f5c">TailwindCSSのInput・Outputファイルを作成する</h2><p>templateやsectionなどと同じ階層に、_css内にtailwind.cssファイルを作成する</p><pre><code>mkdir _css &amp;&amp; touch _css/tailwind.css</code></pre><p>_css/tailwind.css内にTailwind directivesを追加する<br><span style="color:#c7243a">※ @tailwind base は既存のテーマのスタイルに影響があるので、追加しないことをすすめる。</span></p><pre><code>@tailwind base;
@tailwind components;
@tailwind utilities;</code></pre><h2 id="h9e9252145a">Inputの内容をOutput用のCSSに書き出す</h2><pre><code>npx tailwindcss -i ./_css/tailwind.css -o ./assets/tailwind.css</code></pre><h2 id="h31108deec5">theme.liquidにCSSを追加する</h2><pre><code>&lt;head&gt;
  ...
  {{ "tailwind.css" | asset_url | stylesheet_tag }}
  ...
&lt;/head&gt;</code></pre><h2 id="h9c11f2dc85">npm scriptの設定をする</h2><pre><code>{
  "name": "xxxx",
  "version": "1.0.0",
  "description": "xxxx",
  "main": "index.js",
  "scripts": {
    "dev": "tailwindcss -i ./_css/tailwind.css -o ./assets/tailwind.css", //アウトプットファイルにコンパイル結果を出力する
    "dev:watch": "tailwindcss -i ./_css/tailwind.css -o ./assets/tailwind.css -w", // 監視し続けてtw-xxのtailwind classが追加される度に自動的にcompilする
    "build": "tailwindcss -i ./_css/tailwind.css -o ./assets/tailwind.css --minify",
    "help": "tailwindcss --help"
  },
  "repository": {
    "type": "git",
    "url": "xxxx"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "xxxx"
  },
  "homepage": "xxxx",
  "devDependencies": {
    "tailwindcss": "^3.0.23"
  }
}</code></pre><h2 id="h397e38daae">補足</h2><p>.gitignore ファイルを作成しnode_modulesを除外<br>.prettierignore で　.liquidを除外しておくと良いかも（Prettier使用勢）</p><pre><code>/**/*.liquid</code></pre><p>.shopifyignoreでShopifyのテーマに不要なファイルを除外する必要がある。</p><pre><code>.gitignore // 必須
.prettierignore //使っていれば

package.json　// 必須
package-lock.json　// 必須

postcss.config.js　// 必須
tailwind.config.js　// 必須

_css/tailwind.css　// 必須

README.md // 必須</code></pre><h2 id="hd4bbad742a">Prefix をパースするには</h2><p><a href="https://tailblocks.cc/" target="_blank" rel="noopener noreferrer">Tailblocks</a>などの便利なTailwindCSS製のコンポーネントを使用する際にPrefixを設定していると置換作業が発生して不便ですよね...<br>折角、便利なTailwindCSSを導入したのに、無駄な作業には時間を使いたくないものです。<br><a href="https://twc-prefix-parser.vercel.app/" target="_blank" rel="noopener noreferrer">TailwindCSS Prefix Parser</a>というサイトを作りました。<br>指定したPrefixをTailwindCSSのクラス名の接頭辞として置換します。<br>ぜひ、使ってみて下さい。</p>

Shopify Theme開発にTailwindCSSを導入方法を説明します。

Shopify Theme開発にTailwindCSSを導入する

<h2 id="h7821f40661">基本的なスタイルの指定方法</h2><p>ChakraUIでスタイルを適用するときには基本的に下記のような指定方法になると思います。<br></p><pre><code>import { VFC } from "react";
import { Box } from "@chakra-ui/react";

export const Footer: VFC = () =&gt; {
  return (
    &lt;Box
      as="footer"
      borderTop="1px solid"
      borderColor="gray.600"
      color="gray.400"
      textAlign="center"
      py={4}
    &gt;
      &amp;copy; 2022 by niihara megumu.
    &lt;/Box&gt;
  );
};</code></pre><p><br>Footerみたいにあまり使い回す必要性がなく、独立してスタイルを適用する場合はこれで良いのではないかと思います！<br>ただ、各ページのH1見出しやSection部分の下のmarginやpaddingなどページを通して共通化させておきたい箇所もあるかと思います。</p><h2 id="h704a3cbec3">共通スタイルを持つコンポーネント群を作成する</h2><pre><code>import { VFC } from "react";
import { Heading, HeadingProps } from "@chakra-ui/react";

export const HeadH2: VFC&lt;HeadingProps&gt; = (props) =&gt; {
  const { children } = props;
  return (
    &lt;Heading
      as="h2"
      textTransform="uppercase"
      fontSize="4xl"
      pb={{ base: 2, md: 4 }}
      {...props}
    &gt;
      {children}
    &lt;/Heading&gt;
  );
};</code></pre><p><br>このように共通化したコンポーネントをCommonStyle.tsxなど自身で作成します。<br>childrenで渡しているので共通スタイルとして使い回す事ができます。<br>global.css → CommonStyle.tsxになった感じです。</p>

Global.cssの役割を持つcomponentをChakraUIで作成してみましょう。

Chakra UI で共通のスタイルを適用するコンポーネントを作成する

<p>Next.js + ChakraUI + microCMSでこのブログを書いています。<br>ChakraUIでの装飾を行うには、ChakraUIが用意するコンポーネントを使用する必要があります。<br>外部から取得した生のHTML記述を装飾するには、要素を指定してstyled componentsを提要するしかないのか...と迷っていました。<br><br>せっかく...ChakraUIだけの管理を目指していたのに...と。<br>ただ、さすがはChakraUIです。内部のHTMLにスタイルを適応する方法が用意されていました。<br></p><h2 id="hc9cb5c5350">実際のサンプル</h2><pre><code>import { memo, VFC } from "react";
import { Box } from "@chakra-ui/react";


type Props = {
&nbsp; body: string;
};


// eslint-disable-next-line react/display-name
const BlogDetailBody: VFC&lt;Props&gt; = memo((props) =&gt; {
&nbsp; const { body } = props;
&nbsp; const color = "gray.900";
&nbsp; return (
&nbsp; &nbsp; &lt;Box
&nbsp; &nbsp; &nbsp; mt={4}
&nbsp; &nbsp; &nbsp; sx={{
&nbsp; &nbsp; &nbsp; &nbsp; "*": {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mb: 4,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; listStyle: "none",
&nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; &nbsp; h1: { fontSize: "3xl", fontWeight: "bold", color: color },
&nbsp; &nbsp; &nbsp; &nbsp; p: { fontSize: "md", color: color },
&nbsp; &nbsp; &nbsp; &nbsp; blockquote: {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderLeft: "3px solid",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderColor: "gray.500",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pl: 4,
&nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; &nbsp; a: {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontWeight: "bold",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: color,
&nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; &nbsp; li: {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mb: 2,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: color,
&nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; &nbsp; "pre code": {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderRadius: 10,
&nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; &nbsp; img: {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; w: "100%",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; h: { base: 200, sm: 300, md: 400 },
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; objectFit: "cover",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderRadius: 10,
&nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; }}
&nbsp; &nbsp; &gt;
&nbsp; &nbsp; &nbsp; &lt;div dangerouslySetInnerHTML={{ __html: body }}&gt;&lt;/div&gt;
&nbsp; &nbsp; &lt;/Box&gt;
&nbsp; );
});
export default BlogDetailBody;</code></pre><p><br>このように、ChakraUIのコンポーネントに【sx={}】を指定するだけで内包するHTMLのスタイルを適用することができます。<br>サンプルのようにcomponent化しておけばパーツとして使い回せますし便利です。<br>ChakraUIのメリットとも言えるCSSとHTMLを分けずに考える思想を使うことができるので、管理も楽になります。</p>

ChakraUIで内包する生のHTMLを装飾しましょう。

Next.js + ChakraUIでmicroCMSで取得した記事のHTMLを装飾する

<p>ポートフォリオを兼ねて、実例紹介＋ブログ機能を持った本サイトを作成しました。<br>個人的にいろいろなイロハが勉強でき作ってよかったです。<br>機能的にはまだまだ不十分ですが追加はこれからということで。<br>作るに至った経緯は上げるときりがないな...w<br></p><h2 id="h82783fd99f">旧ブログが全く使えていなかった</h2><p>以前はとにかくスピーディーに構築したくてGatsbyを使って構築。<br>あまりフロントの事詳しくなっかたので作ったはいいものの簡単な機能追加や調整しかできず気がつけば放置。<br>今回は、しっかりと基礎的なところから理解していくために１から作成しました。<br>凄く理解が深まりフトントってやっぱり楽しいなと。<br></p><h2 id="hca2ba8346a">スマホで記事投稿できるようにしたかった</h2><p>NetlifyCMSを使った構築していたのですが、PCでしか対応しておらずやはり時間のあるタイミングでスマホから投稿したい。<br>そう思っているときに日本製CMSのmicroCMSに出会いました。<br>これは導入するしかないと思い即導入。noteとかスマホからできますもんね。<br>凄く羨ましかったので念願のスマホ投稿をこれからしていきます。</p><h2 id="h758e0142e6">気軽に投稿したい</h2><p>上でも書いたのですが、やはりブログを書くのはときに億劫です。<br>気軽に投稿したり書きだめするには仕組み的な変化が必要でした。</p>

Next.jsとmicroCMSの構成で新ブログの構築を行いました。

blogs