MicroCMSためした

はじめに

こんばんは。

今回は存在は知っていたけど、使ったことなかったヘッドレスCMSの MicroCMSを試してみました。

会員登録を先程終わらせたバリバリ初心者です。

ではやっていきます。

本題

とりあえずAPIのURLを登録して、早速テスト用のAPIを作成します。

今回は お知らせ の情報のみをもらう、リスト形式のAPIとして作成します。

APIのスキーマはこんな感じで、ほぼほぼ placeholderに出てきた内容そのままです。

各項目の詳細設定で、必須にするなどの選択もできます。

実際に登録すると、サイドバーにコンテンツとして、登録したAPIが作成されて、そこに遷移すると、スキーマとして登録した状態で、入力フィールドが生成されてます。こんな感じで登録してみました。

今回はわかりやすく、コンテンツIDもわかりやすいものに変更しておきます。

これで公開することで、実際に登録した情報がAPIを実行することで取得できます。

今回は以下の通り、2個のお知らせを登録しました。

ちなみにAPIリファレンスで実際に叩くAPIや、サポートされているクエリなども確認できます。

ちょっとやってみます。

ちょうど前回の記事で落としてきたCakePHPのプロジェクトがあるのでそれで試してみます。

src/Controller/ExampleController.php

<?php
namespace App\Controller;

class ExampleController extends AppController
{
    public function index()
    {
        $url = 'https://********.microcms.io/api/v1/news';
        $http = new Client();
        $response = $http->get($url, [], [
            'headers' => [
                'X-API-KEY' => '******************************'
            ]
        ]);

        $newsData = json_decode($response->getStringBody(), true);
dd($newsData);die();
    }
}

テンプレートで表示するとこんな感じ？

<div>
    <p>こんにちは！</p>
    <p>CakePHPのテンプレートですよ！</p>
</div>

<div>
    <?php foreach ($newsData['contents'] as $newsDatum): ?>
        <div>
            <?php echo $newsDatum['title']; ?><br />
            <?php echo $newsDatum['body']; ?><br />
            <?php echo $newsDatum['publishedAt']; ?>
        </div>
    <?php endforeach; ?>
</div>

リンクも画像も問題ないですね。

こんな感じで、簡単でした。

終わりに

流行るのわかりますね。 すげー簡単。

wordpressで頑張るよりは、遥かに使いやすい感じだと思いました。

現場からは以上です。