LaravelとmicroCMSでのコンテンツ管理 応用編

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

## 前回の記事はこちら

https://qiita.com/masakichi_eng/items/6ceda3b4d7f82ec22aa5

この記事では、応用編として記事詳細ページの表示と、記事にタグを設定する方法について解説していきます。

## 記事詳細ページの実装

### ルーティングの追加

```php:routes/web.php
Route::get('/articles/{id}', [ArticleController::class, 'show'])->name('articles.show');
```

### microCMSのサービスクラスに追記

```php:app/Services/MicroCmsService.php
    public function getSingleContent(string $contentName, string $contentId): object
    {
        return $this->httpClient->get($contentName, $contentId);
    }
```

### コントローラーのメソッド追加

```php:app/Http/Controllers/ArticleController.php

    /**
     * 記事詳細を取得
     * @param Request $request
     * @param string $id
     * @return View
     */
    public function show(Request $request, string $id): View
    {
        $article = $this->microCms->getSingleContent('articles', $id);

        return view('articles.show', [
            'article' => $article,
            'request' => $request
        ]);
    }
```

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

```php:resources/views/articles/show.blade.php
<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>
```

### 一覧ページのビューの編集
タイトルに詳細ページへのリンクを追加します。
一覧っぽく本文は表示せず、タイトルと更新日のみ表示にします。

```php:resources/views/articles/index.blade.php
@foreach ($articles as $article)
    <div style="margin: 20px; background-color: lightcyan; border-radius: 10px; padding: 15px;">
        <a href="{{ route('articles.show', ['id'=>$article->id]) }}">
            <p>タイトル　{{ $article->title }}</p>
        </a>
        <p>更新日　{{ $article->updatedAt }}</p>
    </div>
@endforeach
```

![画面遷移.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1008745/c8745bc5-a50d-4e06-5de6-d8480dac8d03.gif)


## 記事にタグをつける方法
記事にタグをつける方法は複数ありますが、今回は複数コンテンツ参照を使用したいと思います。

### microCMSの設定
新しくタグ用のAPIを作成します。作り方は前々回に記事を作成した時と同様です。

https://qiita.com/masakichi_eng/items/f3a76d40d98bec431649

今回はAPI名を「タグ」、エンドポイント末尾を　「tags」に設定します。

APIスキーマは下記の画像の内容で設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1008745/609282bb-f73d-954e-e022-f43e1b12ffdc.png)

コンテンツは下記の画像の内容で設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1008745/3afd5312-a8ef-1187-f9d0-86434cd6db30.png)

### 記事にタグを設定

記事のAPIを選択して「API設定」から「フィールドを追加」をクリックしてタグ用のフィールドを追加します。
フィールドIDを「tags」、表示名を「タグ」、種類を「複数コンテンツ参照」に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1008745/5f2bddfd-901f-7edb-68c3-7459c40be8e8.png)


記事のAPIから記事を選択するとタグのフィールドが追加されているので設定を行いタグを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1008745/480b3a84-0cb2-1563-229f-45dbe6c171e9.png)

### Laravel側の設定

一覧ページと詳細ページのビューを変更します

一覧ページ編集
```php:resources/views/articles/index.blade.php
@foreach ($articles as $article)
    <div style="margin: 20px; background-color: lightcyan; border-radius: 10px; padding: 15px;">
        <a href="{{ route('articles.show', ['id'=>$article->id]) }}">
            <p>タイトル　{{ $article->title }}</p>
        </a>
        @foreach ($article->tags as $tag)
            <span style="background: {{$tag->tagColor}}; color: #fff; padding: 5px; border-radius: 10px">{{$tag->tagName}}</span>
        @endforeach
        <p>更新日　{{ $article->updatedAt }}</p>
    </div>
@endforeach
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1008745/a7b4416d-c00c-3916-2e89-f2e3d963fbf8.png)




詳細ページ編集
```php:resources/views/articles/show.blade.php
<div style="margin: 20px; background-color: lightcyan; border-radius: 10px; padding: 15px;">
    <p>タイトル　{{ $article->title }}</p>
    @foreach ($article->tags as $tag)
        <span style="background: {{$tag->tagColor}}; color: #fff; padding: 5px; border-radius: 10px">{{$tag->tagName}}</span>
    @endforeach
    <p>本文　{!! $article->detail !!}</p>
    <p>更新日　{{ $article->updatedAt }}</p>
</div>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1008745/defd3113-3db7-0ac0-44fd-cb1244f2c6a8.png)

タグが追加されました🙌

今回は以上になります。最後まで見ていただきありがとうございました✨