この記事は、【 microCMS Advent Calendar 2025 】の1日目の記事です。
こんにちは。tampopo256です。
今年もアドベントカレンダーの時期がやってきました。
(昨年はサボって書かなかったのですが...)
今回はmicroCMSを使って短縮URLサービスでも作ろうと思います。
microCMSとは
APIベースの日本製ヘッドレスCMS「microCMS」とは？
ヘッドレスCMSはヘッド（表示面）がなく、APIによってコンテンツを配信するのが特徴。
サイト全体ではなくコンテンツ単位で管理、ノーコードでスピーディーに編集。従来のCMS＝サイト全体を管理
従来のCMSはコンテンツの管理に加えて、表示面がセットになっています。管理にはサーバーやデータベースなど専門>知識が必要になります。
ヘッドレスCMS＝コンテンツを管理コンテンツをAPIから取得しサイトやアプリ内の任意の箇所のみCMS化が可能。サイト自体はCMS外で管理するため、>柔軟性の高い運用ができます。
2024年に株式会社エイチーム(現:株式会社エイチームホールディングス)に買収されたので、サービスが改悪されるかと思いきや、毎月機能や修正リリースが入っていて今後に期待のサービスです。
なお、設立当初は "岐阜県多治見市" に本社があったのでご近所さんです。
なぜこれを今作るのか😕
アドベントカレンダーのプレゼントを見ていて、「よっしゃ作るか。」
と思ったら昨年度でした...
と思っていたら今年もありましたので、書きます。
リファのシャワーヘッドが欲しかった...
最近、Cloudflare Workersなどに頼り切っていて面白くないので、今回は以下の制約を設けます。
縛り開発ってやつですね。
⛔️ 制約
- フロントエンドは静的であること
- お金がかからないこと
- 非エンジニアでも短縮URLが容易に登録できること
- 誰でも簡単に真似できること
を元にやっていきます。
🛠️ 開発
まずは、microCMSにアカウント登録します。
実は企業内でしか使ったことなかったので、個人のアカウントは初作成でした。
✅ コンテンツモデル設計（最小構成）
今回は 本当に最低限 にしました。
不要な情報は一切持ちません。
API ID：short-links
フィールド構成
| フィールドID | 型 | 用途 |
|---|---|---|
| originalUrl | テキスト | リダイレクト先URL |
| enabled | 真偽値 | 有効／無効 |
そして重要なのが、
microCMS の「コンテンツID」そのものを短縮URLのパスとして使います
例：
- コンテンツID：
abc123 - リダイレクト先：
https://example.com - 短縮URL：
https://r.example.com/?r=VHKgZ5
これにより 重複しないID管理 すら不要になります。
また、microCMSならコンテンツIDを自分で設定することもできるので、任意の文字列にすることも簡単にできます。
追伸(2025/12/27)
microCMSのブログを漁っていたところ、以下の記事より1文字~60文字のコンテンツIDを指定できるようになったようです。
✅ セキュリティ方針
今回は ブラウザから microCMS API を直接叩く構成 なので、バックエンドや管理画面などは一切不要です。
✅ 挙動ルール（超シンプル）
今回の短縮URLは、次のルールで動作します。
| 状態 | 表示 |
|---|---|
| レコードが存在しない | 「見つかりません」 |
| enabled = false | 「見つかりません」 |
| originalUrl が空 | 「見つかりません」 |
| enabled = true & URLあり | 301 リダイレクト |
つまり：
「リンクが見つかった時だけリダイレクトし、それ以外はすべて Not Found」
という仕様です。
存在するかどうかを外部から推測しにくく、セキュリティ的にも安全です。
🌍 GitHub Pages 側の構成
リポジトリにindex.htmlを配置して、pagesで公開。
その後、独自ドメインを設定し公開。
短縮URLは
https://r.example.com/?r=<コンテンツID>
などで簡単に作れます。
📄 index.html
GitHub Pages に置く index.html はこれだけです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Not Found</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
text-align: center;
padding: 48px 16px;
color: #333;
}
</style>
</head>
<body>
<h1>見つかりません</h1>
<p>指定されたリンクは存在しないか、無効化されています。</p>
<script>
(async () => {
const SERVICE_DOMAIN = "village-se"; // 自身のものに変更
const API_KEY = "C0vNh6hGUNitwPo4RmGeF1SEa5M2kl4z90Xf"; // 自身のものに変更
// どの GET パラメータを slug として使うか
// 例: https://example.com/?code=abc123 → code=abc123 を使う
const TARGET_PARAM = "r"; // 好きな名前に変更してOK
const params = new URLSearchParams(window.location.search);
let slug = params.get(TARGET_PARAM);
if (!slug) return;
try {
const endpoint =
`https://${SERVICE_DOMAIN}.microcms.io/api/v1/short-links/${encodeURIComponent(slug)}`;
const res = await fetch(endpoint, {
headers: {
"X-MICROCMS-API-KEY": API_KEY,
},
});
if (!res.ok) return;
const data = await res.json();
if (!data.enabled || !data.originalUrl) return;
// 取得できたURLにリダイレクト
window.location.replace(data.originalUrl);
} catch {
// 何もしない（常に Not Found 表示）
}
})();
</script>
</body>
</html>
運用方法
- コンテンツIDを短縮パスとして決定
- originalUrl に転送先URLを入力
- enabled = true にする
完了
非エンジニアでも GUIだけで短縮URLを発行できます。
実運用して感じたメリット
- DB不要
- サーバー不要
- 管理画面が最初から完成している
- 権限管理も microCMS 任せ
- 社内用短縮URLにも最適
⚠ 注意点
- 高トラフィック用途には不向き
- APIキーは 読み取り専用
クリック数などの分析をしたい場合は
別途ログ基盤（GA4 等）と併用が無難
✅ まとめ
microCMS は CMSというより軽量設定DBとしても使える
GitHub Pages と組み合わせることで
完全無料・完全静的な短縮URLサービスが構築できる
個人用・イベント用・社内用には十分すぎる構成
🎁 おわりに
無事に microCMS アドベントカレンダーにも一応貢献しつつ、一つサービスが完成しました。