microCMSの有効な使い方【ブログではなくCDNとして使う】

「ヘッドレスCMSの使い方がよくわかならない・・・」
先日、ヘッドレスCMSを上記のようにディスる記事を書きました。

ヘッドレスCMSのメリット・デメリット【WordPress勝ち】

タイトルに書いたように、CMSとしてはWordPressの圧勝です。
今でもこの考え方は、変わりません。

ただ、実際にヘッドレスCMSを触らずに評価を下したままも気持ち悪いです。
そのため、ヘッドレスCMSの「microCMS」を実際に触りました。

microCMSを選んだ理由は、日本語対応で簡単に利用をはじめることができるからです。
あとは、日本で最も盛り上がっている（上がりつつある？）ヘッドレスCMSだからです。

さて、実際に触ってみての感想ですが、意外なモノとなりました。
この記事では、次の内容に沿って説明していきます。

本記事の内容

microCMSの有効な使い方【ブログではなくCDNとして使う】
microCMSのCDNとしての評価
microCMSをCDNとして使う実例
他のヘッドレスCMSの可能性

この記事を書いている私は、現在は大手企業で働く副業エンジニアです。

副業実績は総収入2000万円以上
転職経験6回（ベンチャーから上場企業まで）
要件定義、設計、開発、保守まで何でもOK、サーバー構築も得意

この記事は、CDNに関して知識のある人向けです。
「CDNとは何ぞや？」という方は、まずはCDN自体について検索で調べてください。

CDNに関して知識のある方には、メリットのある内容です。

microCMSの有効な使い方【ブログではなくCDNとして使う】

結論から言います。
microCMSはCMSではなく、CDNとして使えます。

CMSとして使えない理由は、次の記事をご覧ください。
ヘッドレスCMSのメリット・デメリット【WordPress勝ち】

では、CDNとして使えるという意味を説明します。
microCMSでは、画像が登録可能です。
※実際の登録方法は、「microCMSをCDNとして使う実例」で説明

その画像は、microCMSの保有するサーバーに保存されます。
そして、以下のようなURLが付与されます。
https://images.microcms-assets.io/○○○

この画像は、microCMSに登録した画像です。

画像URLの後ろにパラメータを付与することにより、画像のリサイズや切り抜きを柔軟に行うことができます。
ちなみに上記の画像には、?=300を付加しています。

これって、普通にCDNです。
現在は、画像のアップロードを管理画面から行うだけのようです。
将来的には、プログラムで画像をアップロードできて欲しいですね。

microCMSのCDNとしての評価

CDNとして技術面で評価すると、まだまだ貧弱かもしれません。
上記で述べたように、プログラムで自動的にアップロードなどできませんので。

ただ、ブログや企業サイトレベルであれば、それほど高機能なCDNは不要です。
よって、機能的にはmicroCMSで十分です。

機能的には、問題ナシなので、コストの面だけで比較します。
microCMSの無料枠で利用可能な100GB（1ヶ月）での比較です。

Amazon CloudFront	1,221円
Azure Content Delivery Network	1,381円
NTT Com Cloudn CDN	1,500円
IIJ GIO コンテンツアクセラレーション	1,500円
KeyCDN Asia	1,071円
IDC Frontier コンテンツキャッシュ	900円
microCMS	無料

※記事作成時点（2020年5月17日16時）のレート1ドル107.09 円で計算しています。

こうやって比較してみると、やばくないですか？
転送量が100GBという制限はありますが、無料でCDNを利用できるのはアリエナイです。

ちなみに、転送量100GBですが、20万PVぐらいまで耐えられそうです。

microCMSのwidth900 — **PCでも表示できる画像サイズにしたもの**

1枚でサイズが約54KBです。
1ページに多めで10枚の画像を表示したとします。
そうすると、1ページに合計で約540KBの転送量となります。

100GB（104857600KB）÷ 540KB ＝約194181

これが20万PVの根拠です。
また、この数字以上に耐えられる可能性が高いです。

上図は、画像のhttpヘッダー情報です。
Chromeデベロッパー・ツールで見ることができます。

cache-control:public, max-age=31536000
status:304

これらの値より、ブラウザキャッシュが効いていることがわかります。
最大で1年間はブラウザキャッシュが有効です。

ブラウザキャッシュが有効であれば、転送量が増えることもありません。
よくわからない方は、詳細は知る必要はありません。
とにかく、転送量はそれほど増えないという認識でＯＫです。

うまくいけば、30万PVぐらいまでは耐えることができるかもしれません。
もちろん、これは推測に過ぎないことを留意してください。

microCMSをCDNとして使う実例

microCMSの使い方はこちらをご覧ください。
かなり、わかりやすいです。
https://microcms.io/blog/getting-started/

上記に従って、APIの型（リスト形式）まで作成してください。

フィールド：img
表示：画像URL
種類：画像
これらを入力します。

「完了」ボタンをクリック。

「追加」ボタンをクリック。

以下のペンアイコンをクリック。

次のポップアップが表示。
これは、メニューの「メディア」をクリックした場合と内容です。

WordPressの「メディアライブラリ」と同じです。
画像は画像だけで管理する場所が、あるということですね。

画像が何もない場合は、「追加」ボタンを追加してください。
そうすれば、上記画像のように画像一覧が表示されます。
そこから公開したい画像を選択します。

「選択」ボタンをクリック。

「公開」ボタンをクリック。
「コンテンツを保存しました」とポップアップが表示されます。
これは、すぐに消えます。

「APIプレビュー」リンクをクリック。

「取得」ボタンをクリック。
同じ画面内に次の内容が、表示されます。

{
    "id": "eqhdjtbui",
    "createdAt": "2020-05-17T07:55:53.676Z",
    "updatedAt": "2020-05-17T07:56:13.808Z",
    "img": {
        "url": "https://images.microcms-assets.io/protected/ap-northeast-1:baba86e3-3162-4815-a061-a28e3cffaf1d/service/jikolog/media/baseball_shinpan_safe.png"
    }
}

次のURL部分が、画像URLです。
https://images.microcms-assets.io/protected/ap-northeast-1:baba86e3-3162-4815-a061-a28e3cffaf1d/service/jikolog/media/baseball_shinpan_safe.png