JAMStack作成の軌跡Part4

はじめに

• 前回でTailwindCSSの導入を行った
• 今まではサイトの目的が曖昧だったが、今回は下記を行いテックブログ としての体裁を整えていく
  • Contentfulとの連携
  • ブログコンポーネント の作成
  • TailwindCSS Typographyの導入
  • 動的ページの作成
• 完成形はこちら

Contentfulとの連携

• ContentfulはヘッドレスCMSの一種であり、コンテンツを表示するフロント部分は持たない(ヘッドレスの由来)
• コンテンツの作成やモデル管理はContentfulのWebコンソース上から行うことが可能で、コンテンツはAPI経由で取得できるためJAMStackの要素として利用されることが多い模様
• 具体的な連携手順はGatsby入門を参照
• 作成したモデルは以下の通り

ブログコンポーネント の作成

• 色やフォントはそれほど拘らず最小限の配色だけ決めた
• いきなりソースコードを書こうとしても全体像がわからないため、ワイヤーフレームだけ書くことにした

配色の決定

• 色やフォントはこだわるほどのセンスはないため決め手となる色だけ決めた
  • 色はtailwindcssにデフォルトで用意されている色を選択した
  • 参考: color-palette-reference
• 色のカスタマイズも出来るがデフォルトカラーは濃淡も用意されているため使い勝手が良かった
  • 参考: customizing-colors
  • (base1, base2はいい名前が思いつかなかった)

項目	色
テーマカラー(primay)	teal[400]
アクセントカラー(accent)	rose[400]
文字色(base1)	blueGray[800]
背景色(base2)	coolGray[100]

ワイヤーフレームの作成

• 手軽に作成できるGoogleスライドを利用して作成した

• 各ページの構成

  

• トップページのコンポーネント

  

TailwindCSS Typographyの導入

• 今回はContentful経由で取得したHTMLをそのまま表示するため、取得したHTMLのタグごとにtailwindcssを適用するのが面倒
• そのためプラグインのtailwindcss-typographyを用いることで、プラグインを指定したブロックない全てのタグにスタイリングを適用する

const Layout: React.VFC<LayoutProps> = ({ children }) => {
  const data = useStaticQuery<GatsbyTypes.LayoutQuery>(graphql`
    query Layout {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

  return (
    <>
      <Header siteTitle={data?.site?.siteMetadata?.title || "Title"} />
      <div className="container mx-auto px-16 py-8 max-w-screen-lg prose bg-white"> #
        <main>{children}</main>
      </div>
      <Footer />
    </>
  );
};

• この例ではLayoutコンポーネント化のh1タグやpタグにスタイリングが適用される

Typographyのカスタマイズ

• tailwind.config.jsでカスタマイズが可能
• h2タグを下図のようにカスタマイズしたかったのでいくつかのタグで設定した

typography: {
  DEFAULT: {
    css: {
      img: {
        margin: "0",
      },
      h1: {
        padding: "0.25rem 0rem",
        margin: "0.25rem 0rem",
        fontWeight: "600",
      },
      h2: {
        padding: "0.25rem 0.5rem",
        color: colors.blueGray["800"],
        background: "transparent",
        borderLeft: `solid 8px ${colors.teal[400]}`,
      },
      p: {
        margin: "0.25rem 0rem",
      },
      a: {
        textDecoration: "none",
      },
    },
  },
},

• 気になる点としては「Typographyを適用したブロックでは、Typographyのスタイリングを上書きすることが出来ない」ということ
  • 例えばpタグのmarginはtailwind.config.jsで0.25rem 0remと指定しているが、これをpタグ内でclassName=m-0としても0.25rem 0remのまま替わらない
  • これは公式のIssuesでもどうにかならない？と言われている(執筆時はOpen)

動的ページの作成

• 動的ページの作成に関してもGatsby入門の記事を参考にさせていただいた
• また、以下の記事を参考にgatsby-node.jsのTypeScript化を試みたが、Contentfulからデータが取得出来なかったり型が正しく定義出来なかったりとつまづく点が多かったため、今回は断念し今後の課題とした。
  • GatsbyJS + TypeScript でゼロから作るサーバーレスブログ
  • Gatsby.jsのTypeScript化 2020

残っている課題

• これで最低限ブログとしての体裁を保つまでにはなった。
• 一方で以下のような課題が残っている
  • ブログとして
    • ブログのタグ付与
    • アイキャッチ画像の表示
  • 開発環境として
    • gatsby-node.jsのTypeScript化
    • ブログのデプロイ
    • componentsの分割(Atomic Designなど)
• 今後はこのような課題にも挑戦していきたい