「ヘッドレスCMS」としてのClipkit活用術（JSONデータ書き出しの仕組み）

INDEX

1. なぜ今、「ヘッドレス」CMSなのか
2. ReactやVue.jsが現場で選ばれる理由
3. Clipkitの「カスタムページ」で自由なデータが作れる
4. 【実践】ClipkitをAPIとして動かす実装例
① Clipkit側：カスタムページでJSONを作る
② フロント側：Vue.js（Vue 3）で読み込む
5. まとめ：使い慣れたツールの「新しい一面」

1. なぜ今、「ヘッドレス」CMSなのか

最近よく聞く「ヘッドレス」。直訳すると「頭（表示画面）がない」という意味です。これまでは「CMS＝Webサイトを作るもの」でしたが、今はそれだけじゃ足りなくなってきました。

•「Webサイト以外」でも記事を使いたい：スマホアプリにニュースを流したり、店舗のサイネージに情報を出したりしたいというニーズがあります。
•デザインをもっと自由にしたい： CMSの決まったルールに縛られず、もっとリッチでかっこいい画面をイチから作りたいという要望が増えています。

こうしたニーズに応えるために、中身（データ）だけをきれいに取り出せる「ヘッドレス」という仕組みが求められています。

2. ReactやVue.jsが現場で選ばれる理由

モダンな制作現場でReactやVue.jsが選ばれるのは、単なる流行ではありません。「作る側のストレスが減り、使う側の満足度が上がる」というはっきりした理由があります。

• 「ヌルヌル」動く操作感：ページを移動するたびに画面が白くなって読み込みを待たされるストレスがなくなります。データだけをサッと入れ替えるので、スマホアプリのような快適な動きが作れます。
•パーツを使い回せる：「記事のカード」などを一つの部品（コンポーネント）として管理できるため、一箇所直せばサイト中の同じパーツが全部変わります。
•作業がスムーズ：「どんなデータが来るか」さえ決めておけば、中身の完成を待たずに、表側のデザインや動きをどんどん進められます。

これらを実現するには、CMSからHTMLではなく、「JSON（ジェイソン）」というデータの塊を出してもらう必要があります。

3. Clipkitの「カスタムページ」で自由なデータが作れる

ここで「Clipkit」の出番です。実はClipkit、普通のページを作るだけでなく、この「JSON」や「XML」といったデータそのものを自作できるんです。

使うのは、おなじみの「カスタムページ」機能。ここを単なる「会社概要ページ」として使うのではなく、テンプレートにデータ構造（構造体）を書き込むことで、「自作API」として活用できます。

•データの形を自由にデザイン：いつものテンプレートを書く感覚で、必要な項目だけを並べた「ピュアなデータ」を定義できます。
•Clipkit内で全部完結：別でサーバーを借りる必要はありません。Clipkitを「データを置く場所」にしながら、同じClipkit内のHTMLからそのデータを読み込んで表示させる

……という、賢い使い方ができます。

4. 【実践】ClipkitをAPIとして動かす実装例

具体的にどのようにデータを吐き出し、フロント側で受け取るのか。マークアップエンジニアが一人ですぐに試せる構成を紹介します。

最新の記事をAPIとVUE3でつくる例をご紹介します

① Clipkit側：カスタムページでJSONを作る

カスタムページのテンプレートに、Clipkitの変数を使ってJSON形式で記述します。

JSON
{
  "articles": [
    {% for article in articles | limit:5 %}
    {
      "id": "{{ article.id }}",
      "title": "{{ article.title }}",
      "url": "{{ article.url }}",
      "image": "{{ article.image_url }}"
    }{% if not forloop.last %},{% endif %}
    {% endfor %}
  ]
}

② フロント側：Vue.js（Vue 3）で読み込む

Vue.jsは単独のスクリプトとしても扱いやすいため、ClipkitのHTML土台の上で動かすのに最適です。

HTML
<div id="app">
  <div v-if="loading">読み込み中...</div>
  <ul v-else>
    <li v-for="article in articles" :key="article.id">
      <a :href="article.url">
        <img :src="article.image" :alt="article.title">
        <p>{{ article.title }}</p>
      </a>
    </li>
  </ul>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp, ref, onMounted } = Vue;

  createApp({
    setup() {
      const articles = ref([]);
      const loading = ref(true);

      onMounted(async () => {
        try {
          // 先ほどClipkitで作ったカスタムページのURLを指定
          const response = await fetch('/api/latest-news');
          const data = await response.json();
          articles.value = data.articles;
        } finally {
          loading.value = false;
        }
      });

      return { articles, loading };
    }
  }).mount('#app');
</script>

5. まとめ：使い慣れたツールの「新しい一面」

ヘッドレスをやるなら新しいツールを覚えなきゃ」と身構える必要はありません。
Vue.jsを使って今っぽいサイトを作りたい。でも、管理画面は使い慣れたClipkitがいい。そんなワガママを叶えてくれるのが、カスタムページを使ったデータの書き出しです。
いつものカスタムページを「データの出口」として捉え直すだけで、制作の自由度はぐっと広がります。

16 件