LaravelとmicroCMSでのコンテンツ管理 Laravelアプリ作成編

PHPフレームワークであるLaravelと、ヘッドレスCMSであるmicroCMSで、コンテンツ管理機能を実装する手法をご紹介します。Laravelの実装とmicroCMSのコンテンツ管理２つに関してハンズオン形式で記述していきます。

前回の記事はこちら

この記事では、Laravelの実装に関してハンズオン形式でご説明していきます。

新規Laravelプロジェクト作成

今回のアプリ作成用にLaravelのプロジェクトを新規に立ち上げます。

私はよく以下の記事を参考にさせて頂いております。

microCMSのSDK導入

公式のドキュメントを見ながらLaravelでmicroCMSのAPIを叩いてデータを取得するための設定を行います。

SDKの細かい設定などは以下のリポジトリに説明があります。

$ composer require microcmsio/microcms-php-sdk

.envにmicroCMSのAPIキーを追記

.env

MICRO_CMS_DOMAIN="microCMSのAPIを作成した際のサービスID"
MICRO_CMS_API_KEY="microCMS管理画面のサイドバーにある権限管理メニューの中のAPIキーを入力"

microCMSのサービスクラスを作成

app/Services/MicroCmsService.php

<?php

namespace App\Services;

use Microcms\Client;

class MicroCmsService
{
    private Client $httpClient;

    public function __construct()
    {
        $microCmsDomain = env('MICRO_CMS_DOMAIN');
        $microCmsApiKey = env('MICRO_CMS_API_KEY');

        $this->httpClient = new Client(
            $microCmsDomain,
            $microCmsApiKey
        );
    }

    public function getContents(string $contentName): array
    {
        return $this->httpClient->list($contentName)->contents;
    }
}

ルーティング、コントローラーの作成

ルーティング作成

routes/web.php

<?php

use App\Http\Controllers\ArticleController;
use Illuminate\Support\Facades\Route;

Route::get('/articles', [ArticleController::class, 'index'])->name('articles.index');

コントローラーの作成

app/Http/Controllers/ArticleController.php

<?php

namespace App\Http\Controllers;

use App\Services\MicroCmsService;
use Illuminate\View\View;

class ArticleController extends Controller
{
    private MicroCmsService $microCms;

    public function __construct(MicroCmsService $microCms)
    {
        $this->microCms = $microCms;
    }

    /**
     * 記事一覧を取得
     * @return View
     */
    public function index(): View
    {
        $articles = $this->microCms->getContents('articles');

        return view('articles.index', [
            'articles' => $articles,
        ]);
    }
}

ビューの作成（今回は時短のためスタイル直書きしてますが、CSS用のファイル作成推奨です）

@foreach ($articles as $article)
    <div style="margin: 20px; background-color: lightcyan; border-radius: 10px; padding: 15px;">
        <p>タイトル　{{ $article->title }}</p>
        <p>本文　{!! $article->detail !!}</p>
        <p>更新日　{{ $article->updatedAt }}</p>
    </div>
@endforeach

http://localhost:8080/articles
にアクセスすると以下の画面が表示されます。(localhost:8080の部分は適宜ご自身の環境に置き換えてください)

簡単にmicroCMSからデータ取得、表示ができました🎉
今回は以上になります✨最後まで見ていただきありがとうございました。