LoginSignup
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Day 5

microCMSでやってみた！AI活用からユースケースまで大募集 by microCMS Advent Calendar 2025

@Sakai_path

microCMS が意外と C# と相性良かった件【WinFormsでAPI連携】

Posted at

この記事は
microCMS Advent Calendar 2025 5日目の記事です。

microCMS は、日本語で使える Headless CMS の代表格です。
Web 管理画面で記事やデータを編集すると、その内容が REST API から JSON として取得できます。React / Next.js で使われることが多いですが、実際には「API で取得できる」仕組みさえあればどんな言語からでも利用できます。

はじめに

microCMS といえば Next.js や React といった JavaScript フレームワークと組み合わせる CMS というイメージが強いかもしれません。

しかし今回、
「C#（それも WinForms）から microCMS を触るとどうなる？」
と試してみたところ・・・

意外と、驚くほど簡単に動いた！！

という結果になったので、

  • なぜ C# と相性がいいと感じたのか
  • 実際のコードはどの程度で済むのか

をまとめました。

なぜ microCMS と C# は“意外と”相性がいいのか？

まず最初に、今回感じた 「相性の良さ」 を先に整理しておきます。

▶ REST API がとても“素直”に作られていた

microCMS の API は、かなりシンプルです。

  • 認証は APIキーをヘッダに付けるだけ
  • 特殊な署名やトークン生成は不要
  • HTTP GET で単純に JSON が返ってくる

C# の HttpClient との組み合わせが非常にスムーズで、ほぼ追加設定なしで通信が成立しました。

→ C# から叩く上で障壁がほぼゼロ。

▶ microCMS の JSON 構造が C# のクラスにマッピングしやすい

microCMS のデータは、クセのないシンプルな JSON で返ってきます。

そのため C# 側では、

  • JSON のキー名と同じプロパティを用意して
  • System.Text.Json でデシリアライズするだけ

で、ほぼ何も考えずに扱えます。

→ DataClass（モデルクラス）の設計が非常に簡単。

▶ C#の事例が少ないので色々な発見があって面白い

microMS の記事やサンプルは JS などが中心です。

C# + WinForms の組み合わせはあまり見かけないため、

「既存のデスクトップアプリを、ちょっとだけクラウド化したい」

といったオンプレ環境でのニーズには、意外と活用できそうな構成だと思います。

→ 例えば、複数ある既存アプリに一斉に「作業手順」を表示したいみたいなことが簡単にできる！

1. microCMS 側の準備

ここからは、実際に動かすための手順に入ります。
まずは microCMS 側で最低限の API を準備ていきます。

mm007 (1).png

※アカウント作成は「無料ではじめる」から簡単に登録できるのでここでは割愛します。やはり「日本語で使える」というのは安心感がありますね。

✔ 1-1. サービスを追加する

まずは、新しくサービスを追加してきます。

mm001 (1).png

左側のメニューから「＋」を選択します。

mm002 (1).png

サービスの追加で「一から作成する」を選択してください。

mm021 (2).png

「サービス名」と「サービスID」は何でもOKなのですが。ここでは以下を設定しました。

  • サービス名：お知らせ
  • サービスID：message （サービスIDは重複禁止）

mm004 (1).png

完成です！！

✔ 1-2. コンテンツを作成する

次にコンテンツを作成します。

mm022 (1).png

「お知らせ」を選択します。

✔ 1-3. テストデータを1件登録する

動作確認用に、1件だけコンテンツを作っておきます。
・・・と思ったら最初にひとつ自動ですでに作成されていました。

mm023 (1).png

せっかくなので、もうひとつ登録しておきましょう..

mm024 (1).png

  • タイトル：テスト通知
  • 本文：WinFormsから取得できるかの確認です。

mm025 (1).png

後ほど WinForms アプリで、このタイトルと本文がそのまま表示されます。

✔ 1-3. APIキーを発行

mm029 (1).png

左メニューの「１個のAPIキー」が自動で作成されています。今回はデフォルトで許可されている GET のみ許可なので何もしなくてOKです。

mm030 (1).png

  • この APIキーを C# のコードから利用します
  • 今回はサンプルのためコードに直書きしますが、実務では環境変数や Secret Manager などで管理するのがおすすめです

2. C# WinForms プロジェクトの作成

次に、Visual Studio で WinForms プロジェクトを作成します。
今回は Visual Studio 2022 + .NET 8.0 を使用しました。

ここでは「シンプルなお知らせビューア」を構成していきます。

✔ UI の構成

フォームに次のコントロールを配置します。

mm009 (1).png

  • Button … [button1] 再読み込み処理（Text = "再読み込み"）
  • ListBox … [listBox1] 記事タイトル一覧を表示
  • TextBox … [textBox1] 本文表示（Multiline = true、ScrollBars = Vertical）

ポイント

WinForms の良さは 「最速でデスクトップUIが作れる」 ところ。今回も「とりあえず表示まで」を最速で実現するという目的にピッタリです。

3. microCMS のレスポンスを C# のクラスで扱える形にする

ここからは C# 側の実装に入ります。
まずは、microCMS の JSON を C# のクラスで扱えるようにします。

✔ なぜクラス化するのか

  • JSON 文字列のままだと扱いづらい
  • ListBox にバインドしやすくなる（DataSource で一覧表示できる）
  • 将来フィールドが増えたときの変更に強い

という実用面があります。

✔ 実装コード（Models.cs）

C#
// Models.cs
// namespace はプロジェクト名に合わせてください
namespace WinFormsApp1;

using System.Collections.Generic;

// microCMS の一覧レスポンス全体を受けるクラス
public class MicrocmsListResponse<T>
{
    public int TotalCount { get; set; }
    public List<T> Contents { get; set; } = new();
}

// 「お知らせ」1件分のモデル
public class NoticeItem
{
    public string Id { get; set; } = "";
    public string Title { get; set; } = "";
    public string Content { get; set; } = "";
}

この2つのクラスだけで、
GET /api/v1/notices のレスポンスを綺麗に受け取れます。

4. microCMS API を叩くクライアントクラス

次は、microCMS にリクエストを飛ばす MicrocmsClient を作成します。

✔ なぜクライアントクラスを作るのか

  • API 通信ロジックが Form1 に混ざると可読性が落ちる
  • WinForms 以外（WPF, Console, ASP.NET）にも流用したくなる
  • テスト、デバッグ、差し替え（モックなど）がしやすい

「UI」と「外部サービス呼び出し」を分けておくと、後々楽になります。

✔ 実装コード（MicrocmsClient.cs）

C#
// MicrocmsClient.cs
namespace WinFormsApp1;

using System.Net.Http;
using System.Text.Json;
using System.Threading.Tasks;

public class MicrocmsClient
{
    private readonly HttpClient _http;
    private readonly string _serviceId;
    private readonly string _endpoint;

    /// <summary>
    /// microCMS 用クライアント。
    /// </summary>
    public MicrocmsClient(string serviceId, string endpoint, string apiKey)
    {
        _serviceId = serviceId;
        _endpoint  = endpoint;

        _http = new HttpClient();
        _http.DefaultRequestHeaders.Add("X-MICROCMS-API-KEY", apiKey);
    }

    /// <summary>
    /// 「お知らせ」一覧を取得する。
    /// </summary>
    public async Task<MicrocmsListResponse<NoticeItem>> GetNoticesAsync()
    {
        var url = $"https://{_serviceId}.microcms.io/api/v1/{_endpoint}";

        using var response = await _http.GetAsync(url);
        response.EnsureSuccessStatusCode();   // 200系以外なら例外

        await using var stream = await response.Content.ReadAsStreamAsync();

        var options = new JsonSerializerOptions
        {
            // totalCount / contents / title / content など
            // JSON 側の小文字プロパティ名とマッピングするため
            PropertyNameCaseInsensitive = true
        };

        var result =
            await JsonSerializer.DeserializeAsync<MicrocmsListResponse<NoticeItem>>(stream, options);

        return result ?? new MicrocmsListResponse<NoticeItem>();
    }
}

大事なのは X-MICROCMS-API-KEY をヘッダに付けるだけでよい という点です。このシンプルさのおかげで、C# でも拍子抜けするくらい簡単に扱えます。

5. WinForms で実際に表示させる

続いて、Form1 で API から取得したデータを UI に流し込みます。

✔ 処理の流れ

  1. フォーム起動時（OnLoad）に microCMS へリクエスト
  2. 取得した一覧を ListBox にバインド
  3. 選択されたアイテムの本文を TextBox に表示

という非常にシンプルな3ステップです。

✔ 実装コード（Form1.cs）

C#
// Form1.cs
namespace WinFormsApp1;

using System;
using System.Linq;
using System.Threading.Tasks;
using System.Windows.Forms;

public partial class Form1 : Form
{
    // microCMS の serviceId（https://{serviceId}.microcms.io/ の {serviceId}）
    private const string ServiceId = "message";           // ← 自分の環境に合わせて変更

    // API設定画面の「エンドポイント名」
    private const string Endpoint  = "news";              // ← 自分の環境に合わせて変更

    // コンテンツ API キー（GET 権限付き）
    private const string ApiKey    = "YOUR_CONTENT_API_KEY"; // ← 自分のキーに変更

    private MicrocmsClient? _client;

    public Form1()
    {
        InitializeComponent();

        // デザイナの既定名をそのまま使う
        button1.Text   = "再読み込み";
        button1.Click += async (_, __) => await ReloadAsync();

        listBox1.SelectedIndexChanged += listBox1_SelectedIndexChanged;
        // textBox1 は MultiLine / ScrollBars をデザイナで設定しておくと見やすいです
    }

    protected override async void OnLoad(EventArgs e)
    {
        base.OnLoad(e);

        _client = new MicrocmsClient(ServiceId, Endpoint, ApiKey);

        await ReloadAsync();
    }

    /// <summary>
    /// microCMS から一覧を取得して画面へ反映。
    /// </summary>
    private async Task ReloadAsync()
    {
        if (_client is null)
        {
            MessageBox.Show("microCMS クライアントが初期化されていません。", "エラー",
                MessageBoxButtons.OK, MessageBoxIcon.Error);
            return;
        }

        try
        {
            var result = await _client.GetNoticesAsync();

            if (result.Contents is null || result.Contents.Count == 0)
            {
                listBox1.DataSource = null;
                textBox1.Clear();

                MessageBox.Show(
                    "microCMS から 0 件のデータが返ってきました。\n\n" +
                    "・公開ステータスの記事があるか\n" +
                    "・エンドポイント名（" + Endpoint + "）が合っているか\n" +
                    "・APIキーの権限（GET）が付与されているか\n" +
                    "を確認してください。",
                    "データなし",
                    MessageBoxButtons.OK,
                    MessageBoxIcon.Information);
                return;
            }

            listBox1.DataSource    = result.Contents;
            listBox1.DisplayMember = nameof(NoticeItem.Title);

            textBox1.Text = result.Contents.First().Content ?? "";
        }
        catch (HttpRequestException ex)
        {
            MessageBox.Show(
                "microCMS への HTTP アクセスでエラーが発生しました。\n\n" +
                ex.Message,
                "HTTP エラー",
                MessageBoxButtons.OK,
                MessageBoxIcon.Error);
        }
        catch (Exception ex)
        {
            MessageBox.Show(
                "想定外のエラーが発生しました。\n\n" + ex,
                "エラー",
                MessageBoxButtons.OK,
                MessageBoxIcon.Error);
        }
    }

    /// <summary>
    /// ListBox の選択変更時に本文を表示。
    /// </summary>
    private void listBox1_SelectedIndexChanged(object? sender, EventArgs e)
    {
        if (listBox1.SelectedItem is NoticeItem item)
        {
            textBox1.Text = item.Content ?? "";
        }
    }
}

① namespace はプロジェクト名に合わせてください

C#
namespace WinFormsApp1;

Visual Studio で作成したプロジェクト名が WinFormsApp1 以外の場合は、ここを自分のプロジェクト名に変更します。

② フォーム名やコントロール名はデフォルトです

  • フォーム … Form1
  • ボタン … button1
  • リスト … listBox1
  • テキストボックス … textBox1

すべて デザイナで追加したときの既定名のまま 使っています。
名前を変えている場合は、コード側も同じ名前に合わせてください。

③ ServiceId / Endpoint / ApiKey を microCMS 側に合わせてください

C#
private const string ServiceId = "message";           // サービスID
private const string Endpoint  = "news";              // エンドポイント名
private const string ApiKey    = "YOUR_CONTENT_API_KEY";
ServiceId / Endpoint
microCMS の「サービスID」「サービスID」の確認方法

mm035.png

左メニューの「お知らせ」→ 右上の「API設定」を選択します。

mm036 (1).png

この画面の「エンドポイント」のアドレスから確認できます。

https://message.microcms.io/api/v1/news

ServiceId = "message"; // サービスID
Endpoint = "news"; // エンドポイント名

ApiKey
APIキーの確認方法

mm037 (1).png

右側メニューの１個のAPIキーを選択してコピーすることができます。

④ 起動時に自動ロード＆ボタンで再読み込みできます

  • フォームの OnLoad で ReloadAsync() を一度呼び出し
  • button1 のクリックでも ReloadAsync() を実行

という構成なので、

  • アプリ起動時 → 最新のお知らせを自動で取得
  • 「再読み込み」ボタン → microCMS 側の更新を手動で反映

という流れになります。

この記事では分かりやすさのために 直書き していますが、実務では環境変数や Secret Manager などに退避させるのがおすすめです。

6. 実行するとどうなる？

アプリを起動すると・・

image.png

  • ListBox に microCMS のタイトルが一覧表示される
  • アイテムをクリックすると本文が TextBox に表示される
  • （ボタンを付けていれば）「再読み込み」で最新情報を取得できる

という、シンプルなお知らせビューアが出来上がります。

CMS 側を更新するだけで、WinForms アプリにも反映される のがポイントです。

mm025 (1).png
（microCMS側）

オンプレ・スタンドアロン環境でも “軽いクラウド化” が実現できます。

microCMS の本文（content）は、リッチエディタで作成された HTML がそのまま文字列として返ってきます。今回のサンプルでは、API 連携のシンプルさに焦点を当てたかったため、あえて TextBox に HTML を生のまま表示しています。

実際の業務用途では、HTML をそのまま描画できる「WebView2（Edge ベースのブラウザコンポーネント）」を使うことでmicroCMS の記事をそのままのレイアウトで表示できます。

7. この構成が役立つ場面

この「microCMS × C# WinForms」の構成が活きるのは、たとえばこんな場面がありそうかな・・

  • 社内LAN向けの 簡易ポータル
  • 現場端末での マニュアル閲覧ツール
  • レガシーアプリに 「クラウドで管理する情報」だけ足したい
  • メンテナンス担当者に 非エンジニアでも更新可能な CMS を渡したい

特に、既存の WinForms アプリが残っている現場では、「全部作り直し」は難しくても “お知らせだけクラウド化” という落とし所 が現実的かも。

8. 発展案

今回のサンプルをベースに、次のような発展ができると思う！

  • HTML を TextBox ではなく WebView2 でリッチ表示
  • カテゴリ・検索機能の追加
  • 画像・添付ファイル対応
  • Draft モードと公開フラグに対応してプレビュー機能
  • デスクトップ常駐アプリ化して、最新のお知らせをトレイアイコンからポップアップ表示

まとめ - 微妙と思いきや、microCMS × C# はかなり“アリ”

今回わかったのは、microCMS と C# の組み合わせは 次の理由で 「意外と相性が良い」 ということです。

  • REST API が素直で、C# 側が苦労しない
  • JSON が C# のデータモデルに綺麗にはまる
  • SDK不要で HttpClient だけで普通に使える
  • C# の事例が少ないため、現場の選択肢として価値が高い

JavaScript の CMS と思われがちな microCMS ですが、C# × WinForms のようなレガシー寄りの環境でも、「DX の入り口として効果的に機能しそうだな」 と感じました。

特に C# アプリは、製造業・金融・物流など オンプレ前提の現場に深く根付いているため、

「大規模リプレイスは無理だけど、情報更新だけクラウド化したい」

といった“現実的なDX”との相性がとても良いのがポイントです。

microCMS のように扱いやすい Headless CMS を組み合わせることで、レガシー環境でも無理なくクラウド要素を取り入れられるかも そんな手触りを感じられた検証でした。

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?