LoginSignup
7
5

More than 1 year has passed since last update.

LaravelとmicroCMSでのコンテンツ管理 microCMSのAPI作成編

Last updated at Posted at 2022-08-02

PHPフレームワークであるLaravelと、ヘッドレスCMSであるmicroCMSで、コンテンツ管理機能を実装する手法をご紹介します。自分が実装する際にはあまり参考記事がなく苦労した部分もありましたので皆様のお役に立てれば幸いです。Laravelの実装とmicroCMSのコンテンツ管理2つに関してハンズオン形式で記述していきます。

この記事では、microCMSのコンテンツ管理に関してハンズオン形式でご説明していきます。

microCMSでコンテンツ管理

今回はヘッドレスCMSであるmicroCMSでコンテンツ作成を行います。
ヘッドレスCMSとはHTMLやCSSは管理せず、データのみを管理するCMSになります。
データ管理の仕方はデータベースに近いイメージで、値のみを保存します。
APIを作成してエンドポイントにGETリクエストを送るとjson形式でデータが返されるので、それをLaravel側で受け取って内容を表示します。

1. microCMSアカウントとプロジェクトを作成

microCMSのホームページから新規アカウント登録を行います。

アカウント登録完了後、プロジェクトを作成します。
サービス名とサービスIDを記入します。(サービスIDは誰とも被らない様に設定する必要があります)

image.png

2. API作成

コンテンツの情報を管理するためのAPIを作成しましょう。
コンテンツ(API)の右側の+ボタンを押して、APIを作成の中から、自分で決めるを選択します。
image.png

API名を「記事」としてエンドポイントをarticlesにしてみましょう。
image.png

次へボタンを押して、APIの型を選択でリスト形式を選択します。
image.png

次にAPIスキーマを作成します。データベースでいうところの、カラムや型を決めていきます。
型の種類は、テキストフィールド、テキストエリア、画像、日時など色々な種類が選択できます。

image.png

フィールドを追加ボタンを押すことで複数のフィールドを追加できます。
完了ボタンを押せばAPI作成完了です。

3. コンテンツ作成

早速先ほど作成したAPIのコンテンツを作成していきましょう。
image.png

コンテンツIDはどのコンテンツかを識別するためのIDです。デフォルトはランダムな文字列が割り当てられていますが、自分で自由に編集することができます。

先ほどスキーマで設定した、「本文」と「内容」の部分を埋めていきます。
記述し終わったら公開ボタンを押します。

記事が公開されました🎉

4. APIレスポンスの確認

先ほど公開したAPIのエンドポイントにGETリクエストを送ると、json形式で登録されたデータの情報が取得できます。APIプレビューをクリックして確認してみましょう。今回はLaravelを使用するため、PHPタブを選択してリクエストします。

image.png

「取得」ボタンを押すとレスポンスが確認できます。

{
    "id": "vr2wjz9qujy9",
    "createdAt": "2022-08-02T12:52:15.137Z",
    "updatedAt": "2022-08-02T12:52:15.137Z",
    "publishedAt": "2022-08-02T12:52:15.137Z",
    "revisedAt": "2022-08-02T12:52:15.137Z",
    "title": "LaravelとmicroCMSでコンテンツ管理",
    "detail": "<h1 id=\"hf887009373\">コンテンツ管理API</h1><p><span style=\"color:#c7243a\">microCMS</span>を使用して<strong>コンテンツ管理</strong>を行うアプリケーションを<span style=\"background-color:#fff8b6\">Laravel</span>で作成します。</p>"
}

microCMS側の設定は以上です。お疲れ様でした。

次回はLaravel側の設定を行なっていきます。

7
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
5