ソフトウェア技術研究会

続: サークルのウェブサイトを作った話

📅 2025-12-19

📛 lag129

この記事は東北工業大学ソフトウェア技術研究会 Advent Calendar 2025の19日目の記事になります。

はじめに

去年の12月にサークルのウェブサイトを作成したという記事を投稿したのですが、あれから丸一年…システム構成がだいぶ変わってきたので、このあたりで記事にまとめておきたいと思います！

昨年度の記事はこちらから↓

昨年度から変わったところ

ブログのフレームワークであるGatsbyを使用した構成は変わっていません。GitHubで行っていたブログのコンテンツ管理を外部のCMSへ移行した形になります。

システムの構成は次のようになりました。

システム構成

ウェブサイトのデプロイはCloudflare Pagesで行っており、ソースコードの変更とコンテンツが更新されたことを検知して、自動でデプロイされる設定になっています。

なんで移行したの？

旧ウェブサイトでは、ブログの内容を更新するために、GitHubアカウントを作成してもらう必要がありました。しかし、ソフトウェア技術研究会にはプログラミング以外にも3DCGやイラストの分野に興味を持っている方も多いため、全員がGitHubのアカウントを所有しているとは限りません…。

そこで検討したのがヘッドレスCMSの導入です。ウェブサイトのプログラムは引き続きGitHubで管理しながら、ブログ記事のコンテンツだけを外部のCMSで管理することで、メンバーがブログを更新するハードルを下げたいと考えました。

CMSとの連携

CMSを選定する基準として以下の要素を考えました。

  1. セルフホストをしない
  2. Gatsbyとの連携ができる
  3. 日本語で操作ができる

私たちのサークルは、サーバ用途のPCを持っていなかったため、セルフホストでしか利用できないCMSは選択肢から外れました。

この3つの要素を満たすCMSを探した結果、microCMSを使用することに決めました。公式ドキュメントでGatsbyとの連携方法が書いてあったことが選んだポイントです。

移行作業

GatsbyではGraphQLを使用してデータの取得を行います。GitHubにマークダウンを上げていたときのGraphQLのクエリは次のように書いていました。

export const pageQuery = graphql`
  query ($id: String!) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        date(formatString: "YYYY-MM-DD")
        slug
        title
        thumbnail {
          childImageSharp {
            gatsbyImageData(width: 800, height: 400, transformOptions: { cropFocus: CENTER })
          }
        }
      }
    }
  }
`;

そして移行後のmicroCMSへブログページのデータを取得する際のクエリは次のようになりました。

export const pageQuery = graphql`
  query ($id: String!) {
    microcmsBlogs(id: { eq: $id }) {
      title
      slug
      publishedAt(formatString: "YYYY-MM-DD")
      thumbnail {
        url
        height
        width
      }
      content
    }
  }
`;

markdownRemarkが使えなくなったので、gatsby-source-microcmsプラグインを使ったデータの取得方法にクエリを変更しています。

さらに受け取ったデータの型を指定してあげるためのインターフェースも記述しています。

export interface BlogPostData {
  microcmsBlogs: {
    id: string;
    title: string;
    publishedAt: string | null;
    slug: string;
    content: string;
    auther: string;
    thumbnail?: {
      url?: string;
      height?: number;
      width?: number;
    };
  };
}

GraphQLのおかげで変更するソースコードを最小限にしながら、CMSへの移行作業が出来たのではないかと思います。

ちなみに、以前のウェブサイトでは新しい記事が投稿されるとRSSを配信する機能を実装していたのですが、メンテナンスが難しいのと自分しか使っていなかったという理由で廃止しました。
（使ってた方がいたらごめんなさい…）

まとめ

プラグイン周りで実装に詰まったりもしたのですが、無事にサークルウェブサイトのCMS化をすることが出来ました。
実はこの作業を行っていたのは今年の6月頃で、7月頃には完全にCMSへの移行が完了していました。それから約半年ほど経ちましたが、実際にブログを書いてくれたり、興味を持ってくれている部員の方が少しずつ増えだしているので、やって良かったなぁと思いました！

ぜひ、自分の好きなものを発信できる場所として、このサークルのブログを使ってもらえたら嬉しいです！！

© 2025 ソフトウェア技術研究会