<p><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/af468b88417944b98d54fe4b1a734727/thumbnail-android.png" alt=""><br><br>このドキュメントでは <a href="https://github.com/wantainc/microcms-android-sdk" target="_blank" rel="noopener noreferrer">microcms-android-sdk</a> を用いたAndroidアプリとmicroCMSの連携方法について説明していきます。<br><br>SDKではmicroCMSのGET APIを利用するための機能を主に利用しており、下書きの取得にも対応しています。<br><br>microCMSではAndroidだけでなく各言語やフレームワーク向けにて開発を行っています。<br><br>SDKのインストールはこちら。<code>app/build.gradle</code> などに依存設定を追加してください。</p><pre><code>implementation 'io.microcms:android-sdk:2.0.0'</code></pre><p>また、インターネット接続のパーミッションも必要です。<code>AndroidStudio.xml</code> に以下を追加してください。</p><pre><code>&lt;uses-permission android:name="android.permission.INTERNET"/&gt;</code></pre><p><br>初期化コード例はこちら。</p><pre><code>import io.microcms.android.MicrocmsClient

val client = MicrocmsClient("&lt;YOUR_SERVICE&gt;", "&lt;YOUR_API_KEY&gt;")
// &lt;YOUR_SERVICE&gt; は　XXXX.microcms.io の XXXX 部分</code></pre>

<p>こちらのドキュメントでは、microCMSをAndroidアプリケーションから利用するための最短手順を示します。<br>初めてAndroidアプリケーションからmicroCMSをご利用される場合にはまずはこちらの手順をお試しください。<br></p><h1 id="hc6cf92f070">事前に確認が必要なこと</h1><ul><li>microCMSのアカウント登録やサービス作成、API作成の仕方を理解している必要があります。<a href="https://microcms-docs.microcms.io/manual/getting-started" target="_blank" rel="noopener noreferrer">操作マニュアル</a>などをご確認ください。</li><li>Androidの開発環境が必要です。<a href="https://developer.android.com/studio/install?hl=ja" target="_blank" rel="noopener noreferrer">Android Studio公式サイト</a>を参考に、準備を行ってください。</li><li><a href="https://github.com/microcmsio/microcms-android-sdk" target="_blank" rel="noopener noreferrer">microcms-android-sdk</a> の利用要件を満たしている必要があります。対応プラットフォームやライセンスなどご理解いただいたうえでご利用ください。</li></ul>

<h1 id="h8db47e6fc4">microCMSのセットアップ</h1><p>まずはmicroCMSで非常に単純なAPIを作成します。<br></p><ul><li>オブジェクト形式</li><li>テキストフィールド１つ</li></ul><p><br>設定例を以下に示していきます。APIの作成の詳細手順については<a href="https://document.microcms.io/manual/create-api" target="_blank" rel="noopener noreferrer">APIの作成</a>もご参照ください。</p>

<p>APIの作成画面で適当なAPI名とエンドポイントを入力します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/5c839a967e9341c7a7ba9ad6834b0c70/hello-microcms-api.png" alt=""><br><br>次にオブジェクト形式を選択します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/a390d3435baa4643a6d1e8ee5def8635/select-object-type.png" alt=""><br><br>最後にフィールドを設定します。今回はテキストフィールドを一つのみ設定します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/2518c1c47f37469aa9f836a2d61d7638/simple-text-field.png" alt=""><br><br>上記設定でAPIを作成すると非常にシンプルな入稿画面ができあがるため値を入稿して公開します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/51a4619d8720481aa960834db6f0afd8/very-simple-text-screen.png" alt=""><br><br>以下のような<code>curl</code>コマンドでJSONを取得できることも確認しておきましょう。（ターミナル等を開かなくても、上記画面内の「APIプレビュー」で即座に確認可能です）<br></p><pre><code>curl "https://YOUR_SERVICE.microcms.io/api/v1/YOUR_ENDPOINT" -H "X-API-KEY: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"</code></pre><p><br></p><h1 id="hd2ce277edf">Androidアプリの開発</h1><p>次にAndroidアプリ側の開発を行います。<br>まずは通常通り、Androidプロジェクトを作成します。（Android Studio 4.1.3にて確認済み）<br>テンプレートとして「Empty Actity」します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/34ae051db6ff488dbe96572d2725bf75/android_select_project_template.png" alt=""><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/5c4b9da3c54f4cd8bbb3f171e037a763/android_input_basic_info.png" alt=""><br></p><h2 id="h7990337a91">SDKの読み込み</h2><p><a href="https://github.com/microcmsio/microcms-android-sdk" target="_blank" rel="noopener noreferrer">microcms-android-sdk</a> は Maven Central にて配布しています。<br>デフォルトでは参照先には含まれていないため、まずはルートの<code>build.gradle</code>に追記します。</p><pre><code>buildscript {
    //...

    repositories {
        mavenCentral() //この行を追加
        google()
        jcenter()
    }

    //...
}</code></pre><p><br>次に依存関係を追加します。<br></p><pre><code>dependencies {
    implementation 'io.microcms:android-sdk:2.1.0'  //この行を追加

    //...
}</code></pre><p><br>SDKの読み込みは以上です。<br></p><h2 id="hb420d4fe43">microCMSから情報を取得して表示</h2><p>次に先ほど作成したmicroCMSのAPIから情報を取得して画面に表示を行います。<br>まずはデフォルトで表示されているテキストにidを設定しておきましょう。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/92a93f661a8048878655d58912eef9e8/android-simple-text-view.png" alt=""><br><br>次に<code>AndroidManifest.xml</code>を編集します。microCMSからの情報取得には通信が必須となるため、INTERNETパーミッションを付与しておきます。<br></p><pre><code>&lt;uses-permission android:name="android.permission.INTERNET"/&gt;</code></pre><p><br>最後に<code>MainActivity.kt</code>です。SDKを使った情報取得と画面表示を行います。<br></p><pre><code>import io.microcms.android.MicrocmsClient

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //ここから追加
        val textView = findViewById&lt;TextView&gt;(R.id.text)
        val client = MicrocmsClient("YOUR_SERVICE", "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX")
        client.get("YOUR_ENDPOINT") { result -&gt;
            result.onSuccess { json -&gt;
                textView.text = json.getString("text")
            }
        }
        //ここまで
    }
}</code></pre><p><br>この状態で実行するとmicroCMSに入稿した内容を取得し、画面表示が行われます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/2e8b2d0202b14387928273af7ca11128/android-hello-microcms.png" alt=""><br><br>microCMSの入稿内容も変更すると画面表示される内容が変わることも合わせてご確認ください。</p>

Getting Started

Androidとの連携

<p>microCMSのAndroid SDKはMaven Centralで配布されています。</p>

<p>また、ソースコードはオープンソースとなっており、どなたでもIssueやPull Requestの作成が可能です。</p>

<p>リスト形式のAPIにおいてはコンテンツ一覧が取得でき、オブジェクト形式のAPIにおいては単一コンテンツの取得ができます。<br><br>オブジェクト形式のAPIの場合は<em>GET /api/v1/{endpoint}/{content_id}</em>と同様の結果が得られるので<a href="/docs/content-api/get-content">そちら</a>をご参照ください。<br>ここではリスト形式のAPIの場合におけるリクエストヘッダー、クエリパラメータについて解説します。<br></p><h1 id="h91d3988597">リクエストヘッダー</h1><h2 id="h5938e21403">X-MICROCMS-API-KEY</h2><p>GET APIリクエストの際に必要な認証キーです。<br>デフォルト権限もしくは個別権限で「GET」を有効にして、リクエストヘッダーに含めて送信してください。</p>

<h1 id="hace968f950">下書き全取得</h1><p>この権限を付与するためには<a href="https://document.microcms.io/content-api/x-microcms-api-key#h1875982dad " target="_blank" rel="noopener noreferrer">APIキーの権限設定</a>で「GET」「下書き全取得」の両方を有効にしてください。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/99f19658f0364223bbaa23d9b928906b/x-microcms-api-key-10.png" alt=""></p>

<h1 id="h9ce528688c">クエリ</h1><p>URLの語尾にGETパラメータ形式で指定できます。<br></p><h2 id="hab2c474417">draftKey</h2><p>下書き状態のコンテンツを取得するためのパラメータです。 コンテンツの編集画面で確認できる<em>draftKey</em>をパラメータとして追加してください。<br><em>draftKey</em>を使って取得できる下書きコンテンツは通常1つのみです。<br>複数の下書き状態のコンテンツを同時に取得したい場合には、デフォルト権限もしくは個別権限で「下書き全取得」を有効にしてリクエストをしてください。</p>

<h2 id="h4cd61f9fa1">limit</h2><p>取得件数を指定します。<br>デフォルト値は<em>10</em>です。<br>上限値はありませんが、レスポンスサイズ（レスポンスヘッダのcontent-lengthの値）が約<em>5MB</em>を超えるとエラーが発生します。<br>そのため、大量のコンテンツの全件取得をしたい場合は下記の<em>offset</em>パラメータと組み合わせてページング処理を行ってください。<br></p><h2 id="h41838110ca">offset</h2><p>何件目から取得するかを指定します。<br>デフォルト値は<em>0</em>です。<br></p><h2 id="hf1af2f632c">orders</h2><p>取得するコンテンツの並び替えを行います。<br>並び替え対象とするフィールド名を<em>orders=publishedAt</em>といった形で指定してください。<br>複数のフィールドを並び替え対象とする場合は<em>orders=publishedAt,-updatedAt</em>のようにカンマ区切りで指定が可能です。<br><br>また降順を指定する場合はフィールド名の先頭に<em>-（マイナス）</em>を付与してください。</p><ul><li>降順：<em>-publishedAt</em></li><li>昇順：<em>publishedAt</em></li></ul><p><br>なお、並び替えが可能なのは以下のデータ型を持つフィールドのみです。<br>これ以外のフィールドを指定しても無視されます。</p><ul><li>日付</li><li>真偽値（true or false）</li><li>数値</li></ul><h2 id="ha8abec0b2f">q</h2><p><span style="color:#24292e">コンテンツの全文検索を行います。特定のフィールドに対しての検索ではなく、複数のフィールドに対しての検索になります。</span>検索対象となるフィールドは、すべての「<strong>テキストフィールド</strong>」「<strong>テキストエリア</strong>」「<strong>リッチエディタ</strong>」です。<br><br><code>q=queryA,queryB</code>のようにカンマ区切りで複数キーワードを指定することで、<strong>AND検索</strong>が実施できます。<br><br>日本語などのマルチバイト文字列の検索を行う際は、<strong>URLエンコード</strong>して値を渡す必要がありますのでご注意ください。</p>

<h2 id="h7462d83de4">fields</h2><p>コンテンツの中で取得する要素を指定します。<br><em>fields=title,main_image,updatedAt,author.name</em>のようにカンマ区切りで値を記載してください。<em>author.organization.name</em>のようにドットでつないでキーを指定することで参照コンテンツの要素も指定できます。<em>fields</em>が指定されていない場合は全ての要素を取得します。<br></p><h2 id="h6b992e0fe4">ids</h2><p>コンテンツのidを<em>first_id,second_id,third_id</em>のようにカンマ区切りで指定することで対象コンテンツのみを取得できます。<br></p><h2 id="hdebbdc8e86">filters</h2><p>条件を指定することでコンテンツを絞り込んで取得できます。利用できる条件式は以下の通りです。<br></p><h3 id="hf768a2fd4d">equals</h3><p>指定に一致したコンテンツを取得します。<br>（例：<em>gender[equals]women</em>）<br></p><h3 id="h233ee09eb0">not_equals</h3><p>指定に一致しないコンテンツを取得します。<br>（例：<em>gender[not_equals]women</em>）<br></p><h3 id="hbc115dc003">less_than</h3><p>指定より小さいコンテンツを取得します。<br>（例：<em>createdAt[less_than]2019-11</em>）<br></p><h3 id="h40c49a5760">greater_than</h3><p>指定より大きいコンテンツを取得します。<br>（例：<em>createdAt[greater_than]2019-10</em>）<br></p><h3 id="hfe668245b0">contains</h3><p>指定した値を含むコンテンツを取得します。<br>（例：<em>title[contains]おすすめ</em>）</p>

<h3 id="h7c2df9171b">exists</h3><p>指定した値が存在するコンテンツを取得します。<br>（例：<em>nextLink[exists]</em>）<br></p><h3 id="h0b8e0ad809">not_exists</h3><p>指定した値が存在しないコンテンツを取得します。<br>（例：<em>nextLink[not_exists]</em>）<br></p><h3 id="hcd3e2ddb48">begins_with</h3><p>指定した値から始まるコンテンツを取得します。<br>（例：<em>publishedAt[begins_with]2019-11</em>）<br><br>なおコンテンツ参照/複数コンテンツ参照を使用していて、参照先のコンテンツによって絞り込みを行いたいケースがあるかと思います。その場合、</p><ul><li>コンテンツ参照の場合は<em>[equals]</em>（例：<em>category[equals]uN28Folyn</em>）</li><li>複数コンテンツ参照の場合は<em>[contains]</em>（例：<em>tags[contains]oJIZmiban</em>）</li></ul><p>をご利用ください。<br>また絞り込みの条件には、コンテンツIDを使用してください。<br><br>また、カスタムフィールドの場合は<em>{フィールド名}.{カスタムフィールドのフィールド名}[equals]{VALUE}</em>といった形でフィールド内の値を対象に絞り込みが可能です。<br>同様に繰り返しフィールドの場合は<em>{フィールド名}.{カスタムフィールドのフィールドID}.{カスタムフィールドのフィールド名}[contains]{VALUE}</em>とすることで繰り返しフィールド内の値を対象に絞り込みが可能です。<br><br>最後に条件式は<em>[and]</em>（AND条件) もしくは<em>[or]</em>（OR条件)で 区切ることで複数指定ができます。<br>条件式を括弧<em>()</em>で囲って一部の式を優先させることもできますので、適切な値が取れるよう優先順位をコントロールしてください。<br><br>例：カテゴリーがエンジニアリングかつ、2019/11/14以降またはタイトルが存在している記事を抽出</p><pre><code>$curl --glob "https://{your-service}.microcms.io/api/v1/blog?filters=category[equals]engineering[and](date[begins_with]2019-11-14[or]title[exists])" -H "X-API-KEY: {api-key}"</code></pre><p><br></p>

<p><br>注意点として、下記のように指定をしてしまうと日付のフォーマットが正しくないためエラーが発生します。</p><pre><code>"filters=createdAt[greater_than]" + new Date().toString())
// filters=createdAt[greater_than]Fri Oct 22 2021 17:23:00 GMT+0900 (日本標準時)</code></pre><p><br>例えば次のように指定することで正しく動作します。</p><pre><code>"filters=createdAt[greater_than]" + new Date().toISOString())
// filters=createdAt[greater_than]2021-10-22T08:23:05.896Z</code></pre>

<h2 id="h30fce9c966">depth</h2><p>参照コンテンツを取得する階層の深さを指定します。<br>デフォルト値は<em>1</em>、最大値は<em>3</em>です。<br><br>例えば、ブログコンテンツに関連記事を表示するために、自分自身を循環参照しているとします。<br><br>例）<em>depth = 1</em>の場合</p><pre><code>{
  "id": "id1",
  "title": "title1",
  "body": "body1",
  "related_blog": {
    "id": "id2",
    "title": "title2",
    "body": "body2",
    "related_blog": {
      "id": "id3"
    }
  }
}</code></pre><p><br>例）<em>depth = 2</em>の場合</p><pre><code>{
  "id": "id1",
  "title": "title1",
  "body": "body1",
  "related_blog": {
    "id": "id2",
    "title": "title2",
    "body": "body2",
    "related_blog": {
      "id": "id3",
      "title": "title3",
      "body": "body3",
      "related_blog": {
        "id": "id4"
      }
    }
  }
}</code></pre>

<h1 id="h0c0b84b0b7">レスポンス</h1><p>レスポンスの例です。</p><pre><code>{
    "contents": [
        {
            "id": "ywsd1lc_z",
            "createdAt": "2022-04-27T02:44:50.280Z",
            "updatedAt": "2022-04-27T02:44:50.280Z",
            "publishedAt": "2022-04-27T02:44:50.280Z",
            "revisedAt": "2022-04-27T02:44:50.280Z",
            "name": "更新情報"
        },
        {
            "id": "t9xe_ys44",
            "createdAt": "2022-04-27T02:44:50.197Z",
            "updatedAt": "2022-04-27T02:44:50.197Z",
            "publishedAt": "2022-04-27T02:44:50.197Z",
            "revisedAt": "2022-04-27T02:44:50.197Z",
            "name": "チュートリアル"
        },
        {
            "id": "4sqeq8g36n8",
            "createdAt": "2022-04-27T02:44:50.068Z",
            "updatedAt": "2022-04-27T02:44:50.068Z",
            "publishedAt": "2022-04-27T02:44:50.068Z",
            "revisedAt": "2022-04-27T02:44:50.068Z",
            "name": "テクノロジー"
        }
    ],
    "totalCount": 3,
    "offset": 0,
    "limit": 10
}</code></pre><p><br>取得したAPIの値は <code>contents</code>  という配列で返されます。それに加え以下の値がレスポンスに含まれます。<br></p><h2 id="hae4e49f442">totalCount</h2><p>APIに含まれるコンテンツの総数です。<br></p><h2 id="h4cd61f9fa1">limit</h2><p>取得件数を指定した値です。<br>デフォルト値は<em>10</em>です。<br></p><h2 id="h41838110ca">offset</h2><p>何件目から取得するかを指定した値です。<br>デフォルト値は<em>0</em>です。<br></p>

GET /api/v1/{endpoint}

<p>リスト型APIにおいて、idで指定したコンテンツを取得できるAPIです。<br></p><h1 id="h91d3988597">リクエストヘッダー</h1><h2 id="h5938e21403">X-MICROCMS-API-KEY</h2><p>GET APIリクエストの際に必要な認証キーです。<br>デフォルト権限もしくは個別権限で「GET」を有効にして、リクエストヘッダーに含めて送信してください。</p>

<h1 id="hace968f950">下書き全取得</h1><p>この権限を付与するためには<a href="https://document.microcms.io/content-api/x-microcms-api-key#h1875982dad" target="_blank" rel="noopener noreferrer">APIキーの権限設定</a>で「GET」「下書き全取得」の両方を有効にしてください。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/99f19658f0364223bbaa23d9b928906b/x-microcms-api-key-10.png" alt=""></p>

<h1 id="h9ce528688c">クエリ</h1><p>URLの語尾にGETパラメータ形式で指定できます。<br></p><h2 id="hab2c474417">draftKey</h2><p>下書き状態のコンテンツを取得するためのパラメータです。 コンテンツの編集画面で確認できる<em>draftKey</em>をパラメータとして追加してください。<br><em>draftKey</em>を使って取得できる下書きコンテンツは通常1つのみです。<br>複数の下書き状態のコンテンツを同時に取得したい場合には、デフォルト権限もしくは個別権限で「下書き全取得」を有効にしてリクエストをしてください。<br></p><h2 id="h7462d83de4">fields</h2><p>コンテンツの中で取得する要素を指定します。<br><em>fields=title,main_image,updatedAt,author.name</em>のようにカンマ区切りで値を記載してください。<em>author.organization.name</em>のようにドットでつないでキーを指定することで参照コンテンツの要素も指定できます。<em>fields</em>が指定されていない場合は全ての要素を取得します。<br></p><h2 id="h30fce9c966">depth</h2><p>参照コンテンツを取得する階層の深さを指定します。<br>デフォルト値は<em>1</em>、最大値は<em>3</em>です。<br><br>例えば、ブログコンテンツに関連記事を表示するために、自分自身を循環参照しているとします。<br><br>例）<em>depth = 1</em>の場合</p><pre><code>{
  "id": "id1",
  "title": "title1",
  "body": "body1",
  "related_blog": {
    "id": "id2",
    "title": "title2",
    "body": "body2",
    "related_blog": {
      "id": "id3"
    }
  }
}</code></pre><p><br>例）<em>depth = 2</em>の場合</p><pre><code>{
  "id": "id1",
  "title": "title1",
  "body": "body1",
  "related_blog": {
    "id": "id2",
    "title": "title2",
    "body": "body2",
    "related_blog": {
      "id": "id3",
      "title": "title3",
      "body": "body3",
      "related_blog": {
        "id": "id4"
      }
    }
  }
}</code></pre><p><br></p>

GET /api/v1/{endpoint}/{content_id}

<p>POST APIを用いることで、コンテンツの入稿をAPI経由で行うことができます。<br>コンテンツの上限数は<a href="https://microcms.io/pricing/" target="_blank" rel="noopener noreferrer">プラン</a>によって異なりますのでご確認ください。<br></p><h1 id="h91d3988597">リクエストヘッダー</h1><h2 id="h5938e21403">X-MICROCMS-API-KEY</h2><p>POST APIリクエストの際に必要な認証キーです。<br>デフォルト権限もしくは個別権限で「POST」を有効にして、リクエストヘッダーに含めて送信してください。</p>

<h2 id="h82d2472f5c">Content-Type</h2><p>送信するデータの形式を指定します。<br>microCMSではJSON形式のデータのみ扱っているため、<em>application/json</em>と指定してください。<br></p><h1 id="h9ce528688c"><span style="color:#2b2c30">クエリ</span></h1><p>URLの語尾にPOSTパラメータ形式で指定できます。<br><br>※ WRITE APIのクエリは有料プランにてご利用いただけます。詳しくは<a href="https://microcms.io/pricing" target="_blank" rel="noopener noreferrer">料金プラン</a>も合わせてご覧ください。<br></p><h2 id="h1276dbba7e">status</h2><p>下書き状態でコンテンツを作成するためのパラメータです。<strong>status=draft</strong>をパラメータとして追加してください。<br></p><h1 id="h44fdca3bb7">リクエストボディ</h1><p>APIスキーマに沿って送信したい内容のJSONを用意し、文字列として渡してください。<br>例：</p><pre><code>{"title":"サンプルタイトル","category": ["サンプルカテゴリ"]}</code></pre><p>各フィールドにおける値の指定方法は下記の通りです。<br></p><h3 id="h6165104509">テキストフィールド</h3><p>任意の文字列を指定してください。<br>（例："テキスト1"）<br></p><h3 id="h2289ee5a1d">テキストエリア、リッチエディタ</h3><p>改行コードを用いることで複数行の文字列を指定できます。<br>（例："複数行のテキストを入力\n複数行のテキストを入力"）<br></p><h3 id="h85a0f187d4">画像、ファイル</h3><p>非対応です。指定しても空になります。<br></p><h3 id="h1e35956891">日時</h3><p>ISO 形式 (ISO 8601) の文字列で指定してください。<br>（例："2020-04-23T14:32:38.163Z"）<br></p><h3 id="hcd3ae79fbe">数字</h3><p>数字を指定してください。<br>（例：123）<br></p><h3 id="hac16e128af">真偽値</h3><p>真偽値を指定してください。<br>（例：true）<br></p><h3 id="hb5011814b9">セレクトフィールド</h3><p>セレクトフィールドの要素を配列で指定してください。<br>（例：["要素1","要素2"]）<br></p><h3 id="h9c184228ff">コンテンツ参照</h3><p>参照先コンテンツのcontentIdを指定してください。<br>（例："参照先id"）<br></p><h3 id="h909b716ba0">コンテンツ複数参照</h3><p>参照先コンテンツのcontentIdを配列で指定してください。<br>（例：["参照先id1","参照先id2"]）<br></p><h3 id="h4ad852ed2c">カスタムフィールド</h3><p>対象フィールド内容をオブジェクト形式で指定してください。<br>（例：{ "fieldId": "YOUR_FIELD_ID", "some_value": "" }）<br></p><h3 id="had86c3779e">繰り返しフィールド</h3><p>対象となるデータ内容をカスタムフィールドのリスト形式で指定してください。<br>（例：[ { "fieldId": "YOUR_FIRST_FIELD_ID", "some_text_value": "" }, { "fieldId": "YOUR_SECOND_FIELD_ID", "some_int_value": 10 } ]）<br></p><h3 id="hf54fefe404">インラインフレーム</h3><p>対象となるデータ内容（message部分）をオブジェクト形式で指定してください。詳しい仕様はドキュメントをご確認ください。<br>（例：{ "id": "some-id", "title": "some-title", "description": "some-description", "imageUrl": "some-image-url", "updatedAt": "some-updated-at", "data": { "id": "123" } }）</p><h1 id="h0c0b84b0b7">レスポンス</h1><p>正常にコンテンツを作成できた場合は<code>201</code>レスポンスが返却されます。</p>

POST /api/v1/{endpoint}

<p>PUT APIを用いることで、コンテンツの入稿をAPI経由で行うことができます。<br>POSTとは異なり、コンテンツのidを指定しての作成が可能です。<br>コンテンツの上限数は<a href="https://microcms.io/pricing/" target="_blank" rel="noopener noreferrer">プラン</a>によって異なりますのでご確認ください。<br></p><h1 id="h91d3988597">リクエストヘッダー</h1><h2 id="h5938e21403">X-MICROCMS-API-KEY</h2><p>PUT APIリクエストの際に必要な認証キーです。<br>デフォルト権限もしくは個別権限で「PUT」を有効にして、リクエストヘッダーに含めて送信してください。</p>

<h2 id="h82d2472f5c">Content-Type</h2><p>送信するデータの形式を指定します。<br>microCMSではJSON形式のデータのみ扱っているため、<em>application/json</em>と指定してください。<br></p><h1 id="h9ce528688c">クエリ</h1><p>URLの語尾にPUTパラメータ形式で指定できます。<br><br>※ WRITE APIのクエリは有料プランにてご利用いただけます。詳しくは<a href="https://microcms.io/pricing" target="_blank" rel="noopener noreferrer">料金プラン</a>も合わせてご覧ください。<br></p><h2 id="h1276dbba7e">status</h2><p>下書き状態でコンテンツを作成するためのパラメータです。<strong>status=draft</strong>をパラメータとして追加してください。<br></p><h1 id="h44fdca3bb7">リクエストボディ</h1><p>APIスキーマに沿って送信したい内容のJSONを用意し、文字列として渡してください。<br>例：</p><pre><code>{"title":"サンプルタイトル","category": ["サンプルカテゴリ"]}</code></pre><p>各フィールドにおける値の指定方法は下記の通りです。<br></p><h3 id="h6165104509">テキストフィールド</h3><p>任意の文字列を指定してください。<br>（例："テキスト1"）<br></p><h3 id="h2289ee5a1d">テキストエリア、リッチエディタ</h3><p>改行コードを用いることで複数行の文字列を指定できます。<br>（例："複数行のテキストを入力\n複数行のテキストを入力"）<br></p><h3 id="h85a0f187d4">画像、ファイル</h3><p>非対応です。指定しても空になります。<br></p><h3 id="h1e35956891">日時</h3><p>ISO 形式 (ISO 8601) の文字列で指定してください。<br>（例："2020-04-23T14:32:38.163Z"）<br></p><h3 id="hcd3ae79fbe">数字</h3><p>数字を指定してください。<br>（例：123）<br></p><h3 id="hac16e128af">真偽値</h3><p>真偽値を指定してください。<br>（例：true）<br></p><h3 id="hb5011814b9">セレクトフィールド</h3><p>セレクトフィールドの要素を配列で指定してください。<br>（例：["要素1","要素2"]）<br></p><h3 id="h9c184228ff">コンテンツ参照</h3><p>参照先コンテンツのcontentIdを指定してください。<br>（例："参照先id"）<br></p><h3 id="h909b716ba0">コンテンツ複数参照</h3><p>参照先コンテンツのcontentIdを配列で指定してください。<br>（例：["参照先id1","参照先id2"]）<br></p><h3 id="h4ad852ed2c">カスタムフィールド</h3><p>対象フィールド内容をオブジェクト形式で指定してください。<br>（例：{ "fieldId": "YOUR_FIELD_ID", "some_value": "" }）<br></p><h3 id="had86c3779e">繰り返しフィールド</h3><p>対象となるデータ内容をカスタムフィールドのリスト形式で指定してください。<br>（例：[ { "fieldId": "YOUR_FIRST_FIELD_ID", "some_text_value": "" }, { "fieldId": "YOUR_SECOND_FIELD_ID", "some_int_value": 10 } ]）<br></p><h3 id="hf54fefe404">インラインフレーム</h3><p>対象となるデータ内容（message部分）をオブジェクト形式で指定してください。詳しい仕様はドキュメントをご確認ください。<br>（例：{ "id": "some-id", "title": "some-title", "description": "some-description", "imageUrl": "some-image-url", "updatedAt": "some-updated-at", "data": { "id": "123" } }）</p><h1 id="h0c0b84b0b7">レスポンス</h1><p>正常にコンテンツを作成できた場合は<code>201</code>レスポンスが返却されます。</p>

PUT /api/v1/{endpoint}/{content_id}

<p>PATCH APIを用いることで、コンテンツの編集をAPI経由で行うことができます。<br></p><h1 id="h91d3988597">リクエストヘッダー</h1><h2 id="h5938e21403">X-MICROCMS-API-KEY</h2><p>PATCH APIリクエストの際に必要な認証キーです。<br>デフォルト権限もしくは個別権限で「PATCH」を有効にして、リクエストヘッダーに含めて送信してください。</p>

<h2 id="h82d2472f5c">Content-Type</h2><p>送信するデータの形式を指定します。<br>microCMSではJSON形式のデータのみ扱っているため、<em>application/json</em>と指定してください。<br></p><h1 id="h44fdca3bb7">リクエストボディ</h1><p>APIスキーマに沿って送信したい内容のJSONを用意し、文字列として渡してください。<br>例：</p><pre><code>{"title":"サンプルタイトル","category": ["サンプルカテゴリ"]}</code></pre><p>各フィールドにおける値の指定方法は下記の通りです。<br></p><h3 id="h6165104509">テキストフィールド</h3><p>任意の文字列を指定してください。<br>（例："テキスト1"）<br></p><h3 id="h2289ee5a1d">テキストエリア、リッチエディタ</h3><p>改行コードを用いることで複数行の文字列を指定できます。<br>（例："複数行のテキストを入力\n複数行のテキストを入力"）<br></p><h3 id="h85a0f187d4">画像、ファイル</h3><p>非対応です。指定しても空になります。<br></p><h3 id="h1e35956891">日時</h3><p>ISO 形式 (ISO 8601) の文字列で指定してください。<br>（例："2020-04-23T14:32:38.163Z"）<br></p><h3 id="hcd3ae79fbe">数字</h3><p>数字を指定してください。<br>（例：123）<br></p><h3 id="hac16e128af">真偽値</h3><p>真偽値を指定してください。<br>（例：true）<br></p><h3 id="hb5011814b9">セレクトフィールド</h3><p>セレクトフィールドの要素を配列で指定してください。<br>（例：["要素1","要素2"]）<br></p><h3 id="h9c184228ff">コンテンツ参照</h3><p>参照先コンテンツのcontentIdを指定してください。<br>（例："参照先id"）<br></p><h3 id="h909b716ba0">コンテンツ複数参照</h3><p>参照先コンテンツのcontentIdを配列で指定してください。<br>（例：["参照先id1","参照先id2"]）<br></p><h3 id="h4ad852ed2c">カスタムフィールド</h3><p>対象フィールド内容をオブジェクト形式で指定してください。<br>（例：{ "fieldId": "YOUR_FIELD_ID", "some_value": "" }）<br></p><h3 id="had86c3779e">繰り返しフィールド</h3><p>対象となるデータ内容をカスタムフィールドのリスト形式で指定してください。<br>（例：[ { "fieldId": "YOUR_FIRST_FIELD_ID", "some_text_value": "" }, { "fieldId": "YOUR_SECOND_FIELD_ID", "some_int_value": 10 } ]）<br></p><h3 id="hf54fefe404">インラインフレーム</h3><p>対象となるデータ内容（message部分）をオブジェクト形式で指定してください。詳しい仕様はドキュメントをご確認ください。<br>（例：{ "id": "some-id", "title": "some-title", "description": "some-description", "imageUrl": "some-image-url", "updatedAt": "some-updated-at", "data": { "id": "123" } }）</p><h1 id="h0c0b84b0b7">レスポンス</h1><p>正常にコンテンツを作成できた場合は<code>200</code>レスポンスが返却されます。</p>

PATCH /api/v1/{endpoint}/{content_id}

<p>DELETE APIを用いることで、コンテンツの削除をAPI経由で行うことができます。<br></p><h1 id="h91d3988597">リクエストヘッダー</h1><h2 id="h5938e21403">X-MICROCMS-API-KEY</h2><p> DELETE APIリクエストの際に必要な認証キーです。<br>デフォルト権限もしくは個別権限で「DELETE」を有効にして、リクエストヘッダーに含めて送信してください。</p>

<h1 id="h44fdca3bb7">リクエストボディ</h1><p>不要です。</p><h1 id="h0c0b84b0b7">レスポンス</h1><p>正常にコンテンツを削除できた場合は<code>202</code>レスポンスが返却されます。</p>

DELETE /api/v1/{endpoint}/{content_id}

<p><strong>X-MICROCMS-API-KEY</strong>は各APIリクエスト(GET、POST、PUT、PATCH、DELETE)の際に必要な認証キーです。<br>APIキーを作成し、リクエストヘッダーに含めて送信してください。<br>旧APIキー形式からの移行については<a href="https://document.microcms.io/content-api/from-oldapikey-to-x-microcms-apikey" target="_blank" rel="noopener noreferrer">旧API（X-API-KEYなど）からの移行</a>をご覧ください。<br></p><h1 id="h8bb8734b16">設定方法</h1><p>サイドバーの「n個のAPIキー」をクリックしてAPIキー一覧画面に遷移することができます。<br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/9c3d4839db6d47d99edec1d41945ed81/CleanShot%202022-04-27%20at%2016.15.35%402x.png" alt=""><br><br>APIキー管理一覧の「追加」ボタンをクリックして、APIキーを作成できます。<br>また各APIキーをクリックすることで、詳細画面で編集できます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/bb2e79de345d447f8c0a075cc9297228/CleanShot%202022-04-27%20at%2016.16.36%402x.png" alt=""><br><br>APIキーの作成画面は以下のようになります。<br>APIキーの権限はサービス全体のAPIキーの権限を設定する「①デフォルト権限」と各APIごとに個別の権限を設定する「②個別権限」があります(詳細は後述)。<br>それぞれ、必要なメソッドの権限を設定してAPIキーを作成してください。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/0cf5c5204167470982c363f3ec6eab0d/x-microcms-api-key-3.png" alt=""><br><br>「+ 個別権限を追加」をクリックすると、各APIを選択してAPIごとに追加できます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/b236d875e7624585a73e0b08bda1fa85/x-microcms-api-key-4.png" alt=""><br></p>

<h1 id="h1875982dad">権限設定</h1><p>APIキーの権限設定には「デフォルト権限」と「個別権限」があります。<br></p><h2 id="hdbaf6876c3">デフォルト権限</h2><p><span style="color:#616269">サービス全てのAPIのデフォルト権限を設定できます。</span><br><span style="color:#616269">設定できるメソッドは「GET」「下書き全取得」「POST」「PUT」「PATCH」「DELETE」です。</span><br><span style="color:#616269">デフォルト権限は</span><strong style="color:#616269">サービス全体の全てのAPIに適用されます</strong><span style="color:#616269">。</span><br></p>

<h2 id="hbbcd75efe4">個別権限</h2><p><span style="color:#616269">API単位で個別に権限を設定できます。指定したAPIに関しては</span><strong style="color:#616269">デフォルト権限が上書きされます</strong><span style="color:#616269">。</span><br><span style="color:#616269">例えば、デフォルト権限で「GET」を指定し、個別権限設定で「POST」「PUT」権限を付与した場合、該当のAPIには「POST」「PUT」の権限が付与されることになります。この例のようにAPIの個別権限では、GETの権限が打ち消されます。</span><br><span style="color:#616269">設定できるメソッドはデフォルト権限と同じく「GET」「下書き全取得」「POST」「PUT」「PATCH」「DELETE」です。</span></p>

<h1 id="h9ab4ef6b46">ユースケース</h1><p>X-MICROCM-API-KEYの権限管理を活用いただくことで、要件に応じて権限を設定することができます。各プロダクト・プランに応じて適切な権限設定を行ってください。<br></p><h2 id="hf798b680fb">ユースケース１（より安全に書き込み系のAPIキーを使用する）</h2><p>書き込み系のメソッド(POST、PUT、PATCH、DELETE)の権限が付与されたAPIキーが漏洩等してしまった場合、コンテンツを不正に書き換えられる等のリスクがあります。ですので、書き込み系のメソッドが付与されたAPIキーを取り扱う際は特に注意が必要です。<br>読み取りメソッド(GET)と書き込み系のメソッドの権限を分け、管理することでより安全にかつ柔軟にAPIキーを活用することができます。<br>以下のような設定・運用が考えられるでしょう。</p><ul><li>デフォルト権限ではGETのみを許可する。</li></ul><p><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/29d0da75949443f7aa94cdd2160799f3/x-microcms-api-key-8.png" alt=""></p><ul><li>お問い合わせなどの更新がされるコンテンツAPIのみPOSTなどの書き込み系の個別権限を設定する。このAPIキーはサーバーサイドで処理するなど取り扱いには注意をする。</li></ul><p><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/bdb4d218097d408b8e60789a0800a93e/x-microcms-api-key-9.png" alt=""><br></p><h2 id="h815feebac6">ユースケース２（公開・非公開コンテンツで使い分ける）</h2><p>基本的に全てのコンテンツをユーザに公開するが、一部のAPIだけはユーザには見せず社内でのみ使いたいというようにコンテンツに応じて公開・非公開を分けたいケースがあるかと思います。<br>このようなケースでは、</p><ul><li>デフォルト権限は全て false</li></ul><p><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/1ad4a7e596674121878497ad9382e539/x-microcms-api-key-5.png" alt=""></p><ul><li>公開する API は個別権限で GET のみ true</li></ul><p><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/a070f41f210f40b499497216f8acb1fd/x-microcms-api-key-6.png" alt=""></p><ul><li>プライベートな API は個別権限なし</li></ul><p><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/3aad4e9618fb4275887edce2c8f5d1fd/x-microcms-api-key-7.png" alt=""><br>という設定でキーを作ると、そのキーを直接クライアントに埋め込むことができるので API キーを隠すための中間サーバを作る手間を省くことができます。<br></p><h2 id="h351605327a">ユースケース３（マルチデバイスごとの設定）</h2><p>マルチデバイスに展開をしている場合、「ウェブサイト用」「iOS用」「Android用」のように同じ権限でAPIキーを複数作成することができます。<br>これによりチームやデバイス毎に更新サイクルのコントロールやアクセス範囲の調整ができます。<br><br><br>その他にも「ランキング処理を行うバッチ処理用」や「ローカルでのデータを簡単に確認するための最低限の読み取り用」など、「開発をスムーズかつ安全に進めるための様々な用途」が考えられます。<br><br></p>

<h1 id="he07e89bb25">料金</h1><p>プランによって、作成できるAPIキーの数が異なります。詳しくは<a href="https://microcms.io/pricing" target="_blank" rel="noopener noreferrer">料金表</a>をご覧ください。</p>

<h1 id="h4c790b8e65">SDK</h1><ul><li>microcms-js-sdkはv2.0.0から対応済です。 <a href="https://github.com/microcmsio/microcms-js-sdk" target="_blank" rel="noopener noreferrer">https://github.com/microcmsio/microcms-js-sdk</a></li><li>microcms-ios-sdkはv2.0.0から対応済です。<a href="https://github.com/microcmsio/microcms-ios-sdk" target="_blank" rel="noopener noreferrer">https://github.com/microcmsio/microcms-ios-sdk</a></li><li>microcms-android-sdkはv2.0.0から対応済です。<a href="https://github.com/microcmsio/microcms-android-sdk" target="_blank" rel="noopener noreferrer">https://github.com/microcmsio/microcms-android-sdk</a></li><li>gatsby-source-microcmsはv2.0.0から対応済です。<a href="https://github.com/microcmsio/gatsby-source-microcms" target="_blank" rel="noopener noreferrer">https://github.com/microcmsio/gatsby-source-microcms</a></li><li>nuxt-microcms-moduleはv2.0.0から対応済です。<a href="https://github.com/microcmsio/nuxt-microcms-module" target="_blank" rel="noopener noreferrer">https://github.com/microcmsio/nuxt-microcms-module</a></li></ul>

APIキー（X-MICROCMS-API-KEY）

<p>旧形式APIキー（X-API-KEY、X-WRITE-API-KEY、X-DRAFT-API-KEY）からX-MICROCMS-API-KEYへの移行について解説します。<br><br>X-MICROCMS-API-KEYについては<a href="https://document.microcms.io/content-api/x-microcms-api-key" target="_blank" rel="noopener noreferrer">こちら</a>のページをご覧ください。<br></p><h1 id="hef09770feb">X-MICROCMS-API-KEYへの移行について</h1><p>以前は X-API-KEY などのヘッダを使ってリクエストを行なっていただく必要がありました。</p><pre><code>$ curl "https://&lt;subdomain&gt;.microcms.io/api/v1/&lt;endpoint&gt;" \
    -H "X-API-KEY: &lt;旧APIキー&gt;"

$ curl "https://&lt;subdomain&gt;.microcms.io/api/v1/&lt;endpoint&gt;" \
    -H "X-API-KEY: &lt;旧APIキー&gt;" \
    -H "X-GLOBAL-DRAFT-KEY: &lt;旧APIキー&gt;"

$ curl -X POST "https://&lt;subdomain&gt;.microcms.io/api/v1/&lt;endpoint&gt;" \
    -H "X-WRITE-API-KEY: &lt;旧APIキー&gt;"</code></pre><p><br>現在はAPIキーは <strong>X-MICROCMS-API-KEY</strong> ヘッダに統一されており、各種権限管理がこれまで以上にわかりやすくできるようになりました。<br><a href="https://document.microcms.io/content-api/x-microcms-api-key" target="_blank" rel="noopener noreferrer">https://document.microcms.io/content-api/x-microcms-api-key</a><br><br>X-API-KEYなど今後も旧ヘッダは使えますが、移行することを推奨します。（廃止についても検討中です）<br>移行時のコマンド実装例：</p><pre><code>$ curl "https://&lt;subdomain&gt;.microcms.io/api/v1/&lt;endpoint&gt;" \
    -H "X-MICROCMS-API-KEY: &lt;旧APIキー&gt;"</code></pre><p><br>旧形式APIキーでX-API-KEY、X-WRITE-API-KEY、X-DRAFT-API-KEYを作成していた場合、それぞれ3種類のX-MICROCMS-API-KEYが生成されています。<br>各旧APIキーのデフォルト権限は以下の通りです。HTTPメソッド <a style="color:#3067af" href="https://blog.microcms.io/http_post_api/" target="_blank" rel="noopener noreferrer">https://blog.microcms.io/http_post_api/</a> の設定を行なっていた場合は個別権限として移行されています。<br>　・X-API-KEY → GET のみtrue<br>　・X-WRITE-API-KEY → すべてfalse<br>　・X-GLOBAL-DRAFT-KEY → 全ての下書きのみtrue</p>

旧API（X-API-KEYなど）からの移行

<html><head></head><body><p>microCMS&#x306F;API&#x30D9;&#x30FC;&#x30B9;&#x306E;&#x65E5;&#x672C;&#x88FD;&#x30D8;&#x30C3;&#x30C9;&#x30EC;&#x30B9;CMS&#x3067;&#x3059;&#x3002;<br>&#x30D8;&#x30C3;&#x30C9;&#x30EC;&#x30B9;CMS&#x306B;&#x3064;&#x3044;&#x3066;&#x306F;&#x3053;&#x3061;&#x3089;&#x306E;&#x8A18;&#x4E8B;&#x3092;&#x3054;&#x53C2;&#x8003;&#x304F;&#x3060;&#x3055;&#x3044;&#x3002;</p></body></html>

ヘッドレスの「ヘッド」は、ビュー（表示する画面）を指します。ヘッドレスなので、ビューの無いCMSということになります。ビューがないとはどういう事でしょうか？

ヘッドレスCMSとは何か？従来CMSとの違いやメリデメを解説！

<html><head></head><body><h1 id="h6c72713731"><a href="#h6c72713731">microCMS&#x306E;&#x59CB;&#x3081;&#x65B9;</a></h1><p>microCMS&#x306F;&#x6B21;&#x306E;&#x3088;&#x3046;&#x306A;&#x30B9;&#x30C6;&#x30C3;&#x30D7;&#x3067;&#x59CB;&#x3081;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;</p><ol><li><a href="/manual/signup">&#x30A2;&#x30AB;&#x30A6;&#x30F3;&#x30C8;&#x767B;&#x9332;</a></li><li><a href="/manual/signin">&#x30ED;&#x30B0;&#x30A4;&#x30F3;</a></li><li><a href="/manual/create-service">&#x30B5;&#x30FC;&#x30D3;&#x30B9;&#x306E;&#x4F5C;&#x6210;</a></li><li><a href="/manual/create-api">API&#x306E;&#x4F5C;&#x6210;</a></li><li><a href="/manual/create-content">&#x30B3;&#x30F3;&#x30C6;&#x30F3;&#x30C4;&#x306E;&#x4F5C;&#x6210;</a></li><li><a href="/manual/api-request">API&#x306E;&#x547C;&#x3073;&#x51FA;&#x3057;</a></li><li><a href="/manual/display-contents">&#x30B3;&#x30F3;&#x30C6;&#x30F3;&#x30C4;&#x3092;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x3067;&#x8868;&#x793A;&#x3059;&#x308B;</a></li></ol><p><br></p></body></html>

<p>まずはアカウントの登録が必要です。<br><a href="https://app.microcms.io" target="_blank" rel="noopener noreferrer">アカウント登録画面</a>から登録を行ってください。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/e9835d79b2a04402b95baa210e917b1a/CleanShot%202022-04-27%20at%2013.11.55%402x.png" alt=""><br><br>パスワードの条件は以下になります。</p><ul><li>半角英数</li><li>8文字以上</li><li>大文字、小文字、数字を含む</li></ul><p><br>登録ボタンをクリックすると、アカウント登録は完了です。<br><br>アカウント登録後、入力したメールアドレスに2段階認証コードが送信されます。<br>メールアドレス認証については<a href="https://document.microcms.io/manual/email-auth" target="_blank" rel="noopener noreferrer">こちら</a>をご覧ください。<br></p>

アカウント登録

はじめに

<p><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/789ef2d3cf424a9db8c35ee666fae010/thumbnail-gatsby.png" alt=""></p><h1 id="hacb141a014">GatsbyJSとは</h1><p>GatsbyJSはReact製の静的サイトジェネレーターです。<br>GraphQLを用いて必要なデータを取得し、Reactコンポーネントに渡すことができるのが特徴です。<br>詳しくはGatsbyJSの公式ドキュメントをご覧ください。</p>

<h1 id="he62cd286e8">gatsby-source-microcms</h1><p>microCMSと連携することで事前に全コンテンツを取得し、GatsbyJSに備わっている機構によりGraphQLで必要なコンテンツを取り出し、画面に表示させることが可能です。<br><br>microCMSとの連携には下記npmパッケージをご利用いただけます。<br>こちらはオープンソースとなっているため、どなたでもIssueの追加やプルリクエストが可能です。</p>

<p>こちらのドキュメントでは、microCMSをGatsbyJSで利用するための最短手順を示します。<br>初めてGatsbyJSからmicroCMSをご利用される場合にはまずはこちらの手順をお試しください。<br></p><h1 id="hc6cf92f070">事前に確認が必要なこと</h1><ul><li>microCMSのアカウント登録やサービス作成、API作成の仕方を理解している必要があります。<a href="https://microcms-docs.microcms.io/manual/getting-started" target="_blank" rel="noopener noreferrer">操作マニュアル</a>などをご確認ください。</li><li>GatsbyJSで開発するためにNodeとnpmが必要になります。ご自身の開発環境にインストールしてください。</li></ul>

<p>APIの作成画面で適当なAPI名とエンドポイントを入力します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/5c839a967e9341c7a7ba9ad6834b0c70/hello-microcms-api.png" alt=""><br><br>次にオブジェクト形式を選択します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/a390d3435baa4643a6d1e8ee5def8635/select-object-type.png" alt=""><br><br>最後にフィールドを設定します。今回はテキストフィールドを一つのみ設定します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/2518c1c47f37469aa9f836a2d61d7638/simple-text-field.png" alt=""><br><br>上記設定でAPIを作成すると非常にシンプルな入稿画面ができあがるため値を入稿して公開します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/51a4619d8720481aa960834db6f0afd8/very-simple-text-screen.png" alt=""><br><br>以下のような<code>curl</code>コマンドでJSONを取得できることも確認しておきましょう。（ターミナル等を開かなくても、上記画面内の「APIプレビュー」で即座に確認可能です）<br></p><pre><code>curl "https://YOUR_SERVICE.microcms.io/api/v1/YOUR_ENDPOINT" -H "X-API-KEY: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"</code></pre><h1 id="hdca2da065d">GatsbyJSプロジェクトの準備</h1><p>次にGatsbyJSのプロジェクトを作成します。GatsbyJSが公式で公開しているCLIを使います。下記のコマンドを実行してみましょう。</p><pre><code>npx gatsby new gatsby-microcms</code></pre><p>プロジェクト作成が完了後、開発サーバーを立ち上げてみましょう。<code>develop</code>コマンドを使います。</p><pre><code>cd gatsby-microcms
npm run develop</code></pre><p>そして、<code>localhost:8000</code>にアクセスします。作成に成功してる場合下記のような画面がブラウザにでます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/37123c7223fd4df7ace136c66c8c4d35/gatsby-start-1.png" alt=""></p><h2 id="hb420d4fe43">microCMSから情報を取得して表示</h2><p>次に先ほど作成したmicroCMSのAPIから情報を取得して画面に表示を行います。<br>GatsbyJSでデータを取得するために、<code>gatsby-source-microcms</code>をインストールします。</p><pre><code>npm install gatsby-source-microcms</code></pre>

<p>そして、<code>gatsby-config.js</code>にmicroCMSのデータを取得するための設定を追加します。API_KEYはサービス設定 &gt; API-KEYから確認可能です。<code>serviceId</code>はご自身が設定したものを設定してください。今回はオブジェクト形式なので、<code>format</code>に<code>object</code>を指定します。</p><pre><code>module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-microcms',
      options: {
        apiKey: 'API_KEY',
        serviceId: 'example',
        apis: [{
          endpoint: 'hello',
          format: 'object',
        }],
      },
    },
  ],
};</code></pre><p>そして、<code>src/pages</code>の中にhello.jsを作成しましょう。</p><pre><code>// hello.js
import * as React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"

const Hello = ({ data: { microcmsHello } }) =&gt; (
&nbsp; &lt;Layout&gt;
&nbsp; &nbsp; &lt;SEO title="Hello, microCMS!!" /&gt;
&nbsp; &nbsp; &lt;h1&gt;{microcmsHello.text}&lt;/h1&gt;
&nbsp; &lt;/Layout&gt;
)

export default Hello

export const query = graphql`
&nbsp; query {
&nbsp; &nbsp; microcmsHello {
&nbsp; &nbsp; &nbsp; text
&nbsp; &nbsp; }
&nbsp; }
`</code></pre><p>ここではGraphQLのクエリを使ってデータを取得しています。<code>microcmsHello.text</code>で先程入稿したデータを取得できます。<br>この状態で<code>localhost:8000/hello</code>にアクセスしてみましょう。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/610f0221445441bbbc9b8be891891b13/gatsby-start-2.png" alt=""><br><br>microCMSの入稿内容を変更して、再度開発サーバーを立ち上げると画面表示される内容が変わることも合わせてご確認ください。</p>

GatsbyJSとの連携

<p>こちらはGatsbyを用いてメディアを作成するチュートリアルです。</p>

<p><br>microCMSの画面プレビュー機能を用いて下書き状態のコンテンツをプレビューすることができます。</p>

チュートリアル

<p><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/e8e2df5e2c314cd789e605a40d5d04f8/thumbnail-go.png" alt=""><br><br>このドキュメントでは&nbsp;<a style="color:#3067af" href="https://github.com/microcmsio/microcms-go-sdk" target="_blank" rel="noopener noreferrer">microcms-go-sdk</a>&nbsp;を用いたmicroCMSの連携方法について説明していきます。<br><br>SDKではmicroCMSのGET API、WRITE APIの両方に対応しており、様々な自動化などを行えます。<br><br>SDKのインストールはこちらです。</p><pre><code>$ go get github.com/microcmsio/microcms-go-sdk</code></pre>

<h1 id="h7bbeb3349e">Getting Started</h1><p>こちらのドキュメントでは、microCMSをGoアプリケーションから利用するための最短手順を示します。<br>初めてGoアプリケーションからmicroCMSをご利用される場合にはまずはこちらの手順をお試しください。<br></p><h1 id="hc6cf92f070"><a style="color:#2b2c30" href="https://document.microcms.io/tutorial/javascript/javascript-getting-started#hc6cf92f070" target="_blank" rel="noopener noreferrer">事前に確認が必要なこと</a></h1><ul><li>microCMSのアカウント登録やサービス作成、API作成の仕方を理解している必要があります。<a style="color:#3067af" href="https://microcms-docs.microcms.io/manual/getting-started" target="_blank" rel="noopener noreferrer">操作マニュアル</a>などをご確認ください。</li></ul><p><br></p>

<p>APIの作成画面で適当なAPI名とエンドポイントを入力します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/5c839a967e9341c7a7ba9ad6834b0c70/hello-microcms-api.png" alt=""><br><br>次にオブジェクト形式を選択します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/a390d3435baa4643a6d1e8ee5def8635/select-object-type.png" alt=""><br><br>最後にフィールドを設定します。今回はテキストフィールドを一つのみ設定します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/2518c1c47f37469aa9f836a2d61d7638/simple-text-field.png" alt=""><br><br>上記設定でAPIを作成すると非常にシンプルな入稿画面ができあがるため値を入稿して公開します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/51a4619d8720481aa960834db6f0afd8/very-simple-text-screen.png" alt=""><br><br>以下のような<code>curl</code>コマンドでJSONを取得できることも確認しておきましょう。（ターミナル等を開かなくても、上記画面内の「APIプレビュー」で即座に確認可能です）<br></p><pre><code>curl "https://YOUR_SERVICE.microcms.io/api/v1/YOUR_ENDPOINT" -H "X-MICROCMS-API-KEY: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"</code></pre><p><br></p>

<h2 id="h4123c00ee6">Goでデータを取得する</h2><p>最初にGoでデータを取得する場合の方法です。ご自身の環境に、<code>microcms-go-sdk</code>  をインストールしましょう。</p><pre><code>$ go mod init test-project
$ go get github.com/microcmsio/microcms-go-sdk</code></pre><p>そして、<code>main.go</code>を作成してデータを取得します。<code>service-domain</code>と<code>api-key</code>はご自身が設定したものを設定してください。</p><pre><code>package main

import (
  "fmt"
  "time"

  "github.com/microcmsio/microcms-go-sdk"
)

type Content struct {
  Text        string    `json:"text,omitempty"`
  CreatedAt   time.Time `json:"createdAt,omitempty"`
  UpdatedAt   time.Time `json:"updatedAt,omitempty"`
  PublishedAt time.Time `json:"publishedAt,omitempty"`
  RevisedAt   time.Time `json:"revisedAt,omitempty"`
}

func main() {
  serviceDomain := "service-domain"
  apiKey := "api-key"

  c := microcms.New(serviceDomain, apiKey)

  params := microcms.GetParams{
    Endpoint: "hello",
  }
  var data Content
  err := c.Get(params, &amp;data)
  if err != nil {
    panic(err)
  }

  fmt.Printf("%+v", data)
}</code></pre><p>ローカルの <code>main.go</code> を実行してみましょう。microCMSに入稿した内容を取得できます。</p><pre><code>$ go run main.go</code></pre><p><br></p>

Goとの連携

<p>microCMSのGo SDKはGitHubで配布されています。どなたでもIssueやPull Requestの作成が可能です。</p>

<p>microCMSにはコンテンツAPI以外にも画像APIが備わっています。<br>画像アップロード後に、画像URLにパラメータを付与することで様々な編集が可能です。<br><br>画像フィールドからのアップロード、リッチエディタ内からのアップロード共に対応しています。<br><br>画像処理にはimgixのAPIを利用しています。<br>APIに関して詳しく知りたい方はimgixの<a href="https://docs.imgix.com/apis/url" target="_blank" rel="noopener noreferrer">公式リファレンス</a>をご覧ください。</p>

<h2 id="h1ff8e8aec5">利用可能な主な画像方式</h2><p>gif / jpg / png / webp / avif<br>などが画像APIをご利用いただけます。</p>

<h2 id="ha930bd31fb">画像APIの活用・設定方法</h2>

画像APIとは

<h2 id="h84865a8759">w</h2><p>画像のwidthを指定します。<br>例）<em>?w=200</em></p>

<h2 id="h7ec8040a52">h</h2><p>画像のheightを指定します。<br>例）<em>?h=200</em></p>

<h2 id="h835cbba716">fit</h2><p>画像の縦横比調整、切り取りや表示領域の最適化を行います。<br>デフォルトは<em>clip</em>です。<br></p><h3 id="h769ee70f73">fit=clip</h3><p>画像の縦横比を固定してリサイズします。<br>例）<em>?fit=clip&amp;w=200&amp;h=200</em></p>

<h3 id="hb0dd2b7f33">fit=clamp</h3><p>画像の切り抜きや歪みなしに指定した画像サイズにフィットさせます。 上下左右の端のピクセルを延長させた形になります。<br>例）<em>?fit=clamp&amp;w=200&amp;h=300</em></p>

<h3 id="h91cc482d1f">fit=crop</h3><p>画像を指定したサイズに拡大・縮小後・余白部分は切り落とします。<br>wとhの指定が必須です。<br>例）<em>?fit=crop&amp;w=200&amp;h=200</em></p>

<p>cropクエリを用いるとさらに詳細を設定できます。<br>例）<em>?fit=crop&amp;crop=left,top&amp;w=200&amp;h=200</em></p>

<h3 id="heee6a29066">fit=fill</h3><p>画像を指定したサイズに収まるように配置します。<br>余白部分を<em>fill-color</em>で補います。<br>また、<em>fill=blur</em>を用いるとブラー画像を背景に配置することもできます。<br>例）<em>?fit=fill&amp;fill-color=3331cbf&amp;w=200&amp;h=200</em></p>

<h3 id="hd8306bc24a">fit=fillmax</h3><p>元画像以上のサイズ指定を行い、画像をその中央に配置します。<br>余白部分を<em>fill-color</em>で補います。<br>また、<em>fill=blur</em>を用いるとブラー画像を背景に配置することもできます。<br>例）<em>?fit=fillmax&amp;fill-color=3331cbf&amp;w=700&amp;h=400</em>（元画像は600x300）</p>

<h3 id="h5cebc6ede9">fit=max</h3><p>指定したサイズ内に縦横比を固定しつつ画像を最大限配置します。<br>例）<em>?fit=max&amp;w=200&amp;h=200</em></p>

<h3 id="h882590aec2">fit=scale</h3><p>指定したサイズに画像を拡大・縮小します。<br>縦横比は維持されません。<br>例）<em>?fit=scale&amp;w=200&amp;h=200</em></p>

画像サイズ

<h2 id="ha8abec0b2f">q</h2><p>画像の出力品質を制御します。<em>0~100</em>で値を指定できます。デフォルト値は<em>75</em>です。<br>例）<em>?q=40</em></p>

品質

<h3 id="h5fbe6cc314">dpr</h3><p>画像の出力密度を制御します。<br>これによって一つの画像からあらゆるデバイスに対して正しいサイズの画像を配信できます。 <br>デフォルト値は<em>1</em>で最大で<em>8</em>まで入力できます。 <br><br>また、dprパラメータを指定する際には高さや幅も指定してください。<br>このパラメータは画面サイズ別に画像を利用したい場合に適しています。<br>例えば以下のようにsrcset指定での利用が考えられます。</p><pre><code>&lt;img
    srcset="https://xxxxxx/sample.png?h=300&amp;w=500&amp;dpr=1 1x,
        https://xxxxxx/sample.png?h=300&amp;w=500&amp;dpr=2 2x,
        https://xxxxxx/sample.png?h=300&amp;w=500&amp;dpr=3 3x"
    src="https://xxxxxx/sample.png?h=300&amp;w=500&amp;dpr=1"
/&gt;</code></pre><p>例）<em>?dpr=2&amp;w=300</em></p>

解像度・画面サイズ

<h2 id="h5d78138f6c">fm=json</h2><p>画像のメタ情報を取得します。<br>例）<em>?fm=json</em></p><pre><code>{
  "Content-Type": "image/png",
  "Output": {},
  "ColorModel": "RGB",
  "Content-Length": "104152",
  "Depth": 8,
  "PNG": {
    "InterlaceType": 0,
    "sRGBIntent": 0,
    "Gamma": 0.45455,
    "Chromaticities": [
      0.3127,
      0.329,
      0.64,
      0.33,
      0.3,
      0.6,
      0.15,
      0.06
    ]
  },
  "PixelHeight": 300,
  "PixelWidth": 600,
  "ProfileName": "sRGB IEC61966-2.1"
} </code></pre><h3 id="hcf83e1357e"><br></h3><h2 id="hcaa678afb4">fm=webp</h2><p>画像をWebP形式に変換します。<br></p>

フォーマット

<h3 id="hec6a971011">txt</h3><p>テキストを画像にオーバーレイします。<br>テキストを表示するためにはこの値が必須です。<br>設定されていない場合、他のすべてのテキストパラメータは無視されます。<br>例）<em>?txt=Hello%20World!</em><br></p>

<p><br>例）<em>?txt=HELLO%20WORLD!&amp;txt-size=62&amp;txt-color=ffffff&amp;txt-align=middle,center&amp;txt-font=Futura%20Condensed%20Medium</em></p>

<h2 id="h4bd3ec5548">txt-align</h2><p>画像内のテキストオーバーレイの配置を設定します。<br>縦方向は<em>top</em>,<em>middle</em>,<em>bottom</em>、横方向は<em>left</em>,<em>center</em>,<em>right</em>が選択できます。<br>デフォルトは<em>bottom</em>,<em>right</em>です。<br>例）<em>?txt=Hello%20World!&amp;txt-align=middle,center</em></p>

<h2 id="h73ef87510f">txt-clip</h2><p>表示領域を超えたテキストを切り取ります。<br><em>start</em>,<em>middle</em>,<em>end</em>から切り取る位置を指定し、ellipsisの有無で「...」の表示が可能です。<br>デフォルトは<em>end</em>です。<br>また、<em>txt-pad</em>,<em>txt-width</em>を用いることで表示領域をコントロールすることができます。<br>例）<em>?txt=ABCDEFGHIJKLMNOPQRSTUVWXYZ&amp;txt-size=62&amp;txt-color=ffffff&amp;txt-align=middle,center&amp;txt-clip=end,ellipsis</em><br></p>

<p><br>例）<em>?txt=ABCDEFGHIJKLMNOPQRSTUVWXYZ&amp;txt-size=62&amp;txt-color=ffffff&amp;txt-align=middle,center&amp;txt-clip=middle</em></p>

<h2 id="h247bb74dfa">txt-color</h2><p>文字色を指定できます。<br><em>RGB</em>,<em>ARGB</em>,<em>RRGGBB</em>,<em>AARRGGBB</em>, の16進数形式で指定します。<br><em>A</em>はアルファ値（透過値）、<em>RGB</em>はそれぞれ赤/緑/青を表す値です。<br>デフォルトは<em>000</em>です。<br>例）<em>?txt=microCMS&amp;txt-size=62&amp;txt-color=99ffffff&amp;txt-align=middle,center</em><br></p>

<h2 id="ha88acd4f49">txt-fit</h2><p>テキストを表示領域にフィットさせます。<br><em>max</em>のみ指定できます。<br>デフォルトは指定なしです。<br>例）<em>?txt=ABCDEFGHIJKLMNOPQRSTUVWXYZ&amp;txt-size=62&amp;txt-color=fff&amp;txt-align=middle,center&amp;txt-fit=max</em><br></p>

<h2 id="hbd544cc5d9">txt-font</h2><p>テキストのフォントを指定できます。<br>CSSのカテゴリ指定（<em>serif</em>,<em>sans-serif</em>,<em>monospace</em>,<em>cursive</em>,<em>fantasy</em>）、または明示的なフォント名を指定可能です。<br>太字、イタリックについてもカンマつなぎで<em>bold</em>,<em>italic</em>を指定可能です。<br>例）<em>?txt=microCMS&amp;txt-size=62&amp;txt-color=fff&amp;txt-align=middle,center&amp;txt-font=Helvetica%20Neue</em><br></p>

<p><br>例:&nbsp;<em>?txt=microCMS&amp;txt-size=62&amp;txt-color=fff&amp;txt-align=middle,center&amp;txt-font=serif,italic</em></p>

<h2 id="h1aebc2e14a">txt-size</h2><p>文字サイズを指定できます。<br>デフォルト値は<em>12</em>です。<br>例）<em>?txt=microCMS&amp;txt-size=24&amp;txt-color=fff&amp;txt-align=middle,center</em><br></p>

<h2 id="h6d27006b5d">txt-line</h2><p>テキストをアウトライン幅を指定できます。<br>アウトラインはテキストの内側に描画されます。<br>デフォルト値は<em>0</em>です。<br>例）<em>?txt=microCMS&amp;txt-size=70&amp;txt-color=0000&amp;txt-align=middle,center&amp;txt-line=2</em><br></p>

<h2 id="hedb794e185">txt-line-color</h2><p>テキストのアウトライン色を指定できます。<br><em>txt-line</em>とセットで用いてください。<br><em>RGB</em>,<em>ARGB</em>,<em>RRGGBB</em>,<em>AARRGGBB</em>, の16進数形式で指定します。<br><em>A</em>はアルファ値（透過値）、<em>RGB</em>はそれぞれ赤/緑/青を表す値です。<br>デフォルトは<em>fff</em>です。<br>例）<em>?txt=microCMS&amp;txt-size=70&amp;txt-color=0000&amp;txt-align=middle,center&amp;txt-line=2&amp;txt-line-color=ffc427</em><br></p>

<h2 id="h2f8b1f1d30">txt-pad</h2><p>テキスト周りの余白を指定できます。<br>デフォルトは<em>10</em>です。<br>例）<em>?txt=microCMS&amp;txt-pad=20</em><br></p>

<p><br>例）<em>?txt=ABCDEFGHIJKLMNOPQRSTUVWXYZ&amp;txt-size=62&amp;txt-color=ffffff&amp;txt-align=middle,center&amp;txt-clip=end,ellipsis&amp;txt-pad=50</em><br></p>

<h2 id="hda7bb2a002">txt-shad</h2><p>テキストに陰影をつけます。<br><em>0</em>-<em>10</em>のパラメータで指定します。<br>デフォルトは<em>0</em>です。<br>例）<em>?txt=HELLO%20WORLD!&amp;txt-size=32&amp;txt-color=ffffff&amp;txt-align=middle,center&amp;txt-shad=5</em><br></p>

<h2 id="h155f33cd14">txt-width</h2><p>テキストの横幅を指定します。<br>テキスト領域を超えた場合は自動的に切り取られます。<br><em>txt-clip</em>パラメータを用いることで切り取られ方を調整できます。<br>デフォルト値は画像の横幅によって自動計算されます。<br>例）<em>?txt=HELLO%20WORLD!&amp;txt-size=32&amp;txt-color=ffffff&amp;txt-align=middle,center&amp;txt-width=200</em><br></p>

テキスト

<h3 id="h88a624b002">border</h3><p>枠線を表示します。<br>枠線の太さと色をカンマ区切りで設定してください。<br><em>色はRGB</em>,<em>ARGB</em>,<em>RRGGBB</em>,<em>AARRGGBB</em>, の16進数形式で指定します。<br><em>A</em>はアルファ値（透過値）、<em>RGB</em>はそれぞれ赤/緑/青を表す値です。<br><br>例）<em>?border=10,55ff0000</em></p>

枠線

<p><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/ff0957a4e0ba4b4c858134e8e0b68bf9/thumbnail-ios.png" alt=""><br><br>このドキュメントでは <a href="https://github.com/microcmsio/microcms-ios-sdk" target="_blank" rel="noopener noreferrer">microcms-ios-sdk</a> を用いたiOSアプリとmicroCMSの連携方法について説明していきます。<br><br>SDKではmicroCMSのGET APIを利用するための機能を主に利用しており、下書きの取得にも対応しています。<br><br>microCMSではSwiftだけでなく各言語やフレームワーク向けにて開発を行っています。<br><br>SDKのインストールはXcode のメニューから「File &gt; Swift Packager &gt; Add Package Dependency...」を選択し、以下のURLを指定してください。</p><pre><code>https://github.com/microcmsio/microcms-ios-sdk</code></pre><p><br>初期化コード例はこちら。</p><pre><code>import MicrocmsSDK

let client = MicrocmsClient(serviceDomain: "&lt;YOUR_SERVICE&gt;", apiKey: "&lt;YOUR_API_KEY&gt;")
//&lt;YOUR_SERVICE&gt; は XXXX.microcms.io の XXXX 部分</code></pre>

<p>こちらのドキュメントでは、microCMSをiOSアプリケーションから利用するための最短手順を示します。<br>初めてiOSアプリケーションからmicroCMSをご利用される場合にはまずはこちらの手順をお試しください。<br></p><h1 id="hc6cf92f070">事前に確認が必要なこと</h1><ul><li>microCMSのアカウント登録やサービス作成、API作成の仕方を理解している必要があります。<a href="https://microcms-docs.microcms.io/manual/getting-started" target="_blank" rel="noopener noreferrer">操作マニュアル</a>などをご確認ください。</li><li>iOSの開発環境が必要です。<a href="https://apps.apple.com/jp/app/xcode/id497799835?mt=12" target="_blank" rel="noopener noreferrer">Xcode</a>などの必要な開発環境を事前にご準備ください。</li><li><a href="https://github.com/microcmsio/microcms-ios-sdk" target="_blank" rel="noopener noreferrer">microcms-ios-sdk</a> の利用要件を満たしている必要があります。対応プラットフォームやライセンスなどご理解いただいたうえでご利用ください。</li></ul><p><br></p>

<p>APIの. 成画面で適当なAPI名とエンドポイントを入力します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/5c839a967e9341c7a7ba9ad6834b0c70/hello-microcms-api.png" alt=""><br><br>次にオブジェクト形式を選択します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/a390d3435baa4643a6d1e8ee5def8635/select-object-type.png" alt=""><br><br>最後にフィールドを設定します。今回はテキストフィールドを一つのみ設定します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/2518c1c47f37469aa9f836a2d61d7638/simple-text-field.png" alt=""><br><br>上記設定でAPIを作成すると非常にシンプルな入稿画面ができあがるため値を入稿して公開します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/51a4619d8720481aa960834db6f0afd8/very-simple-text-screen.png" alt=""><br><br>以下のような<code>curl</code>コマンドでJSONを取得できることも確認しておきましょう。（ターミナル等を開かなくても、上記画面内の「APIプレビュー」で即座に確認可能です）<br></p><pre><code>curl "https://YOUR_SERVICE.microcms.io/api/v1/YOUR_ENDPOINT" -H "X-API-KEY: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"</code></pre><p><br></p><h1 id="hfdc7195840">iOSアプリの開発</h1><p>iOSアプリ側の開発を行います。<br>まずはiOSプロジェクトの作成です。「App」を選択して「Next」を選択します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/9e74f6d483c24f729740ff56a3a77ea9/ios-select-template.png" alt=""><br><br>アプリ名は「HelloMicroCms」とします。<br>今回はStoryboardを使った方法を紹介しますが、SwiftUIでもほぼ同じコードで動作します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/c902efd762af4174bde4fb30169aa779/ios-create-project.png" alt=""><br></p><h2 id="h7990337a91">SDKの読み込み</h2><p><a href="https://github.com/microcmsio/microcms-ios-sdk" target="_blank" rel="noopener noreferrer">microcms-ios-sdk</a> は Swift Package Manager で配布しています。<br>Xcode のメニューから「File &gt; Swift Packager &gt; Add Package Dependency...」を選択します。<br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/c1c4d917577b4aa68202666ef5baaa71/ios-spm-add.png" alt=""><br><br>URLを入力する画面が表示されるので microcms-ios-sdk のGitHubのURLを入力します。</p><ul><li><strong>https://github.com/microcmsio/microcms-ios-sdk</strong></li></ul><p><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/132d899519e34158a19e8872613bdd67/ios-spm-url.png" alt=""><br><br>次に利用するSDKのバージョンを指定します。ここでは <strong>2.2.0</strong> を指定します。<br>利用可能なバージョンについては<a href="https://github.com/microcmsio/microcms-ios-sdk/releases" target="_blank" rel="noopener noreferrer">GitHubページ</a>でご確認ください。<br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/142eb47dd6e44492bd97f1aa41b500aa/ios-spm-version-exact.png" alt=""><br><br>最後に追加先のTargetの確認が表示されるので、このままFinishします。<br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/be6fa1cee27b410d8e946eb6f8c0a364/ios-spm-confirm.png" alt=""><br><br>SDKの読み込みは以上です。<br></p><h2 id="hb420d4fe43">microCMSから情報を取得して表示</h2><p>先ほど作成したmicroCMSのAPIから情報を取得して画面に表示を行います。<br><code>Main.storyboard</code> を開き、Label を画面の中央に追加しましょう。<br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/f3cb13a3b02b4d63bc5cd7508782e9a2/ios-append-label.png" alt=""><br><br>このLabelのOutletを繋ぎ、<code>label</code>という変数名で定義します。</p><pre><code>class ViewController: UIViewController {
&nbsp; &nbsp; @IBOutlet weak var label: UILabel!
}</code></pre><p><br>次に、SDKを使った情報取得の処理を<code>ViewController.swift</code>に追加します。<br>今回は画面表示のタイミングで情報を表示するので、<code>viewDidLoad()</code> 内で処理を行います。</p><pre><code>import UIKit

// 1. import文を追加
import MicrocmsSDK

class ViewController: UIViewController {
&nbsp; &nbsp; @IBOutlet weak var label: UILabel!

&nbsp; &nbsp; override func viewDidLoad() {
&nbsp; &nbsp; &nbsp; &nbsp; super.viewDidLoad()

        // 2. クライアントを初期化
&nbsp; &nbsp; &nbsp; &nbsp; let client = MicrocmsClient(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; serviceDomain: "&lt;YOUR_SERVICE&gt;",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; apiKey: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX")

        // 3. SDKで情報を取得して画面に表示
&nbsp; &nbsp; &nbsp; &nbsp; client.get(endpoint: "YOUR_ENDPOINT") { [weak self] result in
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; switch result {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case .success(let object):
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;if let object = object as? [String: Any],
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let title = object["title"] as? String {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; self?.label.text = title
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case .failure(let error):
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print("[Error] \(error)")
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }
}</code></pre><p><br>この状態で実行するとmicroCMSに入稿した内容を取得し、画面表示が行われます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/dd0eba87a7d94fceb0459528f5ae4a3f/ios-hello-world.png?w=640&amp;h=1194" alt=""><br><br>microCMSの入稿内容も変更すると画面表示される内容が変わることも合わせてご確認ください。</p>

iOSとの連携

<p>このチュートリアルではmicroCMSとiOS SDKを使って、iOSのニュースアプリを作ります。<br>その過程で、</p><ul><li>リストの取得と表示</li><li>繰り返しコンテンツの取得と表示</li></ul><p>について紹介します。<br><br>SDKのセットアップがまだ完了してない方は「Getting Started」を参考にセットアップしてください。</p>

<p>まず、今回作成する画面はこちらです。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/69ff61928db94c75867b6ddd8a580869/Simulator%20Screen%20Shot%20-%20iPhone%2012%20-%202021-05-12%20at%2009.27.28.png?w=272&amp;h=588" alt=""><br>2つの記事がリストに並んでいます。それぞれの項目をタップすると詳細画面に遷移します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/e42a40dbcaf646c7b74371079483d120/Simulator%20Screen%20Shot%20-%20iPhone%2012%20-%202021-05-12%20at%2009.28.31.png?w=272&amp;h=588" alt=""><br>詳細画面で読めるニュースの本文は、「見出し」「テキスト」「画像」から構成されています。<br><br></p>

<h1 id="h0e77dd5d86">プロジェクトの作成（その1）</h1><p><br></p><ul><li>リスト形式でプロジェクトを作成</li><li>サンプルのコンテンツを入稿</li></ul>

<h1 id="he471f3f896">iOSアプリの作成</h1><h2 id="hb513a5f3d2">リスト画面を作る</h2><p><br>まずは、ニュースを表現する <code>Article</code>  クラスを作ります。<br></p><pre><code>struct Article {
&nbsp; &nbsp; let id: String
&nbsp; &nbsp; let title: String
&nbsp; &nbsp; let contents: [ArticleContent]
&nbsp; &nbsp; let imageUrl: URL
&nbsp; &nbsp; let publishedAt: Date

&nbsp; &nbsp; init(id: String, title: String, body: [ArticleContent], imageUrl: URL, publishedAt: Date) {
&nbsp; &nbsp; &nbsp; &nbsp; self.id = id
&nbsp; &nbsp; &nbsp; &nbsp; self.title = title
&nbsp; &nbsp; &nbsp; &nbsp; self.contents = body
&nbsp; &nbsp; &nbsp; &nbsp; self.imageUrl = imageUrl
&nbsp; &nbsp; &nbsp; &nbsp; self.publishedAt = publishedAt
&nbsp; &nbsp; }

&nbsp; &nbsp; init(object: [String: Any]) {
&nbsp; &nbsp; &nbsp; &nbsp; self.id = object["id"] as! String
&nbsp; &nbsp; &nbsp; &nbsp; self.title = object["title"] as! String&nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; let imageObject = object["image"] as! [String: Any]
&nbsp; &nbsp; &nbsp; &nbsp; self.imageUrl = URL(string: imageObject["url"] as! String)!

&nbsp;&nbsp; &nbsp; &nbsp;  let formatter = ISO8601DateFormatter()
        formatter.formatOptions.insert(.withFractionalSeconds)
&nbsp; &nbsp; &nbsp; &nbsp; let publishedAt = formatter.date(from: object["publishedAt"] as! String)
&nbsp; &nbsp; &nbsp; &nbsp; self.publishedAt = publishedAt!
&nbsp; &nbsp; }
}</code></pre><p>ニュース記事が持っているプロパティの定義と、JSONオブジェクトから初期化するイニシャライザとを持っています。<br><br>次はニュース一覧の取得です。<code>MicrocmsService.swift</code> という名前で、以下の内容を記述します。</p><pre><code>import Foundation
import MicrocmsSDK

class MicrocsmService: ObservableObject {
&nbsp; &nbsp; @Published var articles: [Article] = []

&nbsp; &nbsp; func request() {
&nbsp; &nbsp; &nbsp; &nbsp; let client = MicrocmsClient(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; serviceDomain: "SERVICE_DOMAIN",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; apiKey: "YOUR_API_KEY")
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; client.get(endpoint: "trends") { result in
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; switch result {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case .success(let object):
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if let object = object as? [String: Any],
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let contents = object["contents"] as? [[String: Any]] {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; self.articles = contents.map { Article(object: $0) }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case .failure(let error):
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print("[ERROR] \(error)")
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }
}</code></pre><p><code>request()</code> を実行するとニュースの一覧がmicroCMSから取得され、その内容が<code>Article</code>の型で保持されます。<br><br>この<code>MicrocmsService</code> を使って、ニュース一覧画面は以下のように作れます。</p><pre><code>import SwiftUI
struct ContentView: View {
&nbsp; &nbsp; @ObservedObject var service = MicrocsmService()
&nbsp; &nbsp; var body: some View {
&nbsp; &nbsp; &nbsp; &nbsp; NavigationView {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; List {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ForEach(0..&lt;service.articles.count, id: \.self) { index in
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ArticleListRow(article: service.articles[index])
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }.navigationTitle("すべての記事")
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; .onAppear {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; service.request()
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }
}</code></pre><p><br> <code>ArticleListRow.swift</code> </p><pre><code>import SwiftUI

struct ArticleListRow: View {
&nbsp; &nbsp; var article: Article

&nbsp; &nbsp; var dateFormatter: DateFormatter = {
&nbsp; &nbsp; &nbsp; &nbsp; let d = DateFormatter()
&nbsp; &nbsp; &nbsp; &nbsp; d.dateFormat = "yyyy/MM/dd"
&nbsp; &nbsp; &nbsp; &nbsp; return d
&nbsp; &nbsp; }()

&nbsp; &nbsp; var body: some View {
&nbsp; &nbsp; &nbsp; &nbsp; HStack {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; NetworkImage(url: article.imageUrl)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .frame(width: 136, height: 96)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .cornerRadius(4)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Spacer(minLength: 8)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; VStack(alignment: HorizontalAlignment.leading) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Text(article.title)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .font(.headline)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .padding(.bottom, 4)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Text(dateFormatter.string(from: article.publishedAt))
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .font(.caption)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Spacer()
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; .padding(4)
&nbsp; &nbsp; }
}</code></pre><p><br>画面が表示されたタイミングでニュース記事を取得し、その内容をリスト画面に表示しています。<br><br>ここまで書けたら一度アプリを実行してみましょう。以下のような画面が表示されるはずです。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/69ff61928db94c75867b6ddd8a580869/Simulator%20Screen%20Shot%20-%20iPhone%2012%20-%202021-05-12%20at%2009.27.28.png?w=272&amp;h=588" alt=""><br></p>

<h1 id="h88bc129fe0">プロジェクトの作成（その2）</h1><p>ニュース一覧画面ができたので、次はニュース詳細画面を作ります。<br><br>ニュース詳細画面ではmicroCMSの「繰り返しコンテンツ」を利用します。<br></p><ul><li>繰り返しフィールドを用いたコンテンツ入稿</li><li>設定をexportしてimportするだけで簡単に真似できるようにする</li></ul><p><br></p>

<h1 id="h80298089a1">iOSアプリ作成</h1><h2 id="h342f4592ae">詳細画面を作る</h2><p><br>まずは、先ほど作った<code>Article</code> のモデルを拡張していきます。<br><br>詳細画面の繰り返しコンテンツでは、「見出し」「本文」「画像」の要素が繰り返し登場します。<br>そこで、<code>ArticleContent</code>  というprotocolを用意し、それに準拠する形で要素を定義します。</p><pre><code>import Foundation

protocol ArticleContent {}

struct HeadingContent: ArticleContent {
&nbsp; &nbsp; let content: String
}
struct TextContent: ArticleContent {
&nbsp; &nbsp; let content: String
}
struct ImageContent: ArticleContent {
&nbsp; &nbsp; let imageUrl: URL
}</code></pre><p><br><br>Articleに <code>contents</code>  というプロパティを追加します。この配列には<code>HeadingContent</code> <code>TextContent</code><code>ImageContent</code>の要素が入ります。<br><code>fieldId</code> の情報をもとに情報をパースします。</p><pre><code>struct Article {
&nbsp; &nbsp; let id: String
&nbsp; &nbsp; let title: String
&nbsp; &nbsp; let imageUrl: URL
&nbsp; &nbsp; let publishedAt: Date
    let contents: [ArticleContent]

&nbsp; &nbsp; init(object: [String: Any]) {
&nbsp; &nbsp; &nbsp; &nbsp; self.id = object["id"] as! String
&nbsp; &nbsp; &nbsp; &nbsp; self.title = object["title"] as! String

&nbsp; &nbsp; &nbsp; &nbsp; let imageObject = object["image"] as! [String: Any]
&nbsp; &nbsp; &nbsp; &nbsp; self.imageUrl = URL(string: imageObject["url"] as! String)!

&nbsp; &nbsp; &nbsp; &nbsp; let formatter = ISO8601DateFormatter()
&nbsp; &nbsp; &nbsp; &nbsp; formatter.formatOptions.insert(.withFractionalSeconds)
&nbsp; &nbsp; &nbsp; &nbsp; let publishedAt = formatter.date(from: object["publishedAt"] as! String)
&nbsp; &nbsp; &nbsp; &nbsp; self.publishedAt = publishedAt!

        // 繰り返しコンテンツをパース
      &nbsp; let rawContents = object["body"] as! [Dictionary&lt;String, Any&gt;]
&nbsp; &nbsp; &nbsp; &nbsp; let contents = rawContents.map { content -&gt; ArticleContent in
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let fieldId = content["fieldId"] as! String
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; switch fieldId {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "text":
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return TextContent(content: content["content"] as! String)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "heading":
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return HeadingContent(content: content["content"] as! String)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "image":
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let imageObject = content["image"] as! [String: Any]
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let imageUrlString = imageObject["url"] as! String
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return ImageContent(imageUrl: URL(string: imageUrlString)!)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default:
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return TextContent(content: "")
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; self.contents = contents
&nbsp; &nbsp; }
}</code></pre><p><br>ここまででモデルの拡張ができました。<br><br>次は詳細画面への遷移の部分を作っていきましょう。<br>まずは詳細画面の作成です。<code>ArticleDetail</code>という名前で以下を記述します。</p><pre><code>import SwiftUI

struct ArticleDetail: View {
&nbsp; &nbsp; let article: Article

&nbsp; &nbsp; var body: some View {
&nbsp; &nbsp; &nbsp; &nbsp; ScrollView(.vertical) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; VStack(alignment: .leading) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ForEach(0..&lt;article.contents.count, id: \.self) { num in
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let content = article.contents[num]
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if let heading = content as? HeadingContent {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Text(heading.content)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .font(.title3)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .bold()
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if let text = content as? TextContent {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Text(text.content)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .font(.body)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if let image = content as? ImageContent {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; NetworkImage(url: image.imageUrl)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .frame(height: 200)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .cornerRadius(8)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .padding(.bottom, 20)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .padding(8)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .padding(12)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .navigationBarTitle(article.title, displayMode: .inline)
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }
}</code></pre><p>先ほどパースした <code>contents</code> の中身を見ながら要素を配置しています。<br><br>それでは、リスト画面から詳細画面への遷移を実装しましょう。<code>NavigationLink</code> を用いて簡単に実装できます。</p><pre><code>struct ContentView: View {
&nbsp; &nbsp; @ObservedObject var service = MicrocsmService()&nbsp;&nbsp; &nbsp;

&nbsp; &nbsp; var body: some View {
&nbsp; &nbsp; &nbsp; &nbsp; NavigationView {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; List {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ForEach(0..&lt;service.articles.count, id: \.self) { index in
                    // ここを追加
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; NavigationLink(destination: ArticleDetail(article:&nbsp; service.articles[index])) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ArticleListRow(article: service.articles[index])
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }.navigationTitle("すべての記事")
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; .onAppear {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; service.request()
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }
}</code></pre><p><br>以上で詳細画面を作成できました。実際にアプリを実行して確認しましょう。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/e42a40dbcaf646c7b74371079483d120/Simulator%20Screen%20Shot%20-%20iPhone%2012%20-%202021-05-12%20at%2009.28.31.png?w=272&amp;h=588" alt=""><br><br>このような画面が表示されていれば成功です。見出し、本文、画像が繰り返し表示されていますね。<br>microCMSで入稿したデータを変更し、アプリに反映されることを確認しましょう。<br></p>

<p>microCMSのiOS SDKはGitHubで配布されています。どなたでもIssueやPull Requestの作成が可能です。</p>

<p><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/cec7ea24db67400ab412690aef289c37/thumbnail-javascript.png" alt=""><br><br><br>JavaScriptを用いてmicroCMSを扱う方法を紹介します。<br>JavaScriptはフレームワークを利用することで比較的楽にアプリケーションを作成することができます。<br><br>SDKのインストール方法はこちら。</p><pre><code>$ npm init
$ npm install --save microcms-js-sdk</code></pre><p><br>初期化コード例はこちら。</p><pre><code>const { createClient } = require('microcms-js-sdk');
const client = createClient({ serviceDomain: '&lt;YOUR_SERVICE&gt;', apiKey: '&lt;YOUR_API_KEY&gt;' });
//&lt;YOUR_SERVICE&gt; は XXXX.microcms.io の XXXX 部分</code></pre><p><br>また、各jsフレームワークのドキュメントも用意されています。<br>Next.jsを利用する場合はこちら。</p>

<p><br>Nuxt.jsを利用する場合はこちら。</p>

<p><br>GatsbyJSを利用する場合はこちら。</p>

<p>こちらのドキュメントでは、microCMSをJavaScriptアプリケーションから利用するための最短手順を示します。<br>初めてJavaScriptアプリケーションからmicroCMSをご利用される場合にはまずはこちらの手順をお試しください。<br></p><h1 id="hc6cf92f070"><a style="color:#2b2c30" href="https://document.microcms.io/tutorial/android/android-getting-started#hc6cf92f070" target="_blank" rel="noopener noreferrer">事前に確認が必要なこと</a></h1><ul><li>microCMSのアカウント登録やサービス作成、API作成の仕方を理解している必要があります。<a style="color:#3067af" href="https://microcms-docs.microcms.io/manual/getting-started" target="_blank" rel="noopener noreferrer">操作マニュアル</a>などをご確認ください。</li><li>Nodeとnpmが必要になります。ご自身の開発環境にインストールしてください。</li></ul>

<h1 id="h8db47e6fc4"><a style="color:#2b2c30" href="https://document.microcms.io/tutorial/android/android-getting-started#h8db47e6fc4" target="_blank" rel="noopener noreferrer">microCMSのセットアップ</a></h1><p>まずはmicroCMSで非常に単純なAPIを作成します。</p><ul><li>オブジェクト形式</li><li>テキストフィールド１つ</li></ul><p><br>設定例を以下に示していきます。APIの作成の詳細手順については<a style="color:#3067af" href="https://document.microcms.io/manual/create-api" target="_blank" rel="noopener noreferrer">APIの作成</a>もご参照ください。</p>

<p>APIの作成画面で適当なAPI名とエンドポイントを入力します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/5c839a967e9341c7a7ba9ad6834b0c70/hello-microcms-api.png" alt=""><br><br>次にオブジェクト形式を選択します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/a390d3435baa4643a6d1e8ee5def8635/select-object-type.png" alt=""><br><br>最後にフィールドを設定します。今回はテキストフィールドを一つのみ設定します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/2518c1c47f37469aa9f836a2d61d7638/simple-text-field.png" alt=""><br><br>上記設定でAPIを作成すると非常にシンプルな入稿画面ができあがるため値を入稿して公開します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/51a4619d8720481aa960834db6f0afd8/very-simple-text-screen.png" alt=""><br><br>以下のような<code>curl</code>コマンドでJSONを取得できることも確認しておきましょう。（ターミナル等を開かなくても、上記画面内の「APIプレビュー」で即座に確認可能です）<br></p><pre><code>curl "https://YOUR_SERVICE.microcms.io/api/v1/YOUR_ENDPOINT" -H "X-API-KEY: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"</code></pre><h2 id="he49cb4c284">Node.jsで使う場合</h2><p>最初にNode.jsでデータを取得する場合の方法です。まずは<code>package.json</code>を作成して、microcms-js-sdkをインストールしましょう。</p><pre><code>$ npm init -y
$ npm install microcms-js-sdk</code></pre><p>そして、<code>index.js</code>を作成してデータを取得します。<code>service-domain</code>と<code>api-key</code>はご自身が設定したものを設定してください。</p><pre><code>const { createClient } = require('microcms-js-sdk');

const client = createClient({ serviceDomain: 'service-domain', apiKey: 'api-key' });
// service-domain は XXXX.microcms.io の XXXX 部分
client
&nbsp; .get({
&nbsp; &nbsp; endpoint: 'hello',
&nbsp; })
&nbsp; .then((res) =&gt; console.log(res))
&nbsp; .catch((err) =&gt; console.log(err));</code></pre><p>ローカルのindex.jsを実行してみましょう。microCMSに入稿した内容を取得できます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/414e6bf61dc14768bc5c4279050281c9/microcms-javascript-2.png" alt=""></p><h2 id="h0cc67c14fb">ブラウザで使う場合</h2><p>次にブラウザでmicroCMSのデータを取得する場合の方法です。microcms-js-sdkは<span style="color:#3e3e3e">CDNサービスのunpkgでも提供されています。</span></p><pre><code>&lt;script src="https://unpkg.com/microcms-js-sdk@latest/dist/umd/microcms-js-sdk.js"&gt;&lt;/script&gt;</code></pre><p>バージョンを指定する場合は@latestの部分を変更してください。</p><pre><code>&lt;script src="https://unpkg.com/microcms-js-sdk@1.0.0/dist/umd/microcms-js-sdk.js"&gt;&lt;/script&gt;</code></pre><p><code>index.html</code>を作成してデータを取得しましょう。<code>service-domain</code>と<code>api-key</code>はご自身が設定したものを設定してください。</p><pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&nbsp; &lt;head&gt;
&nbsp; &nbsp; &lt;title&gt;microCMS SDK&lt;/title&gt;
&nbsp; &lt;/head&gt;
&nbsp; &lt;body&gt;
&nbsp; &nbsp; &lt;h1 id="text"&gt;&lt;/h1&gt;
&nbsp; &lt;/body&gt;
&nbsp; &lt;script src="https://unpkg.com/microcms-js-sdk@latest/dist/umd/microcms-js-sdk.js"&gt;&lt;/script&gt;
&nbsp; &lt;script&gt;
&nbsp; &nbsp; const { createClient } = microcms;

&nbsp; &nbsp; const client = createClient({
&nbsp; &nbsp; &nbsp; serviceDomain: 'service-domain', // service-domain は XXXX.microcms.io の XXXX 部分
&nbsp; &nbsp; &nbsp; apiKey: 'api-key',
&nbsp; &nbsp; })
&nbsp; &nbsp; client.get({ endpoint: 'hello'}).then((res) =&gt; {
&nbsp; &nbsp; &nbsp; document.querySelector('#text').textContent = res.text
&nbsp; &nbsp; })
&nbsp; &lt;/script&gt;
&lt;/html&gt;</code></pre><p>この状態でindex.htmlを開いてみましょう。microCMSに入稿した内容を取得し、画面表示が行われます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/e9c30098a3b64e628d6fd9856e365df3/microcms-javascript-1.png" alt=""></p>

JavaScriptとの連携

<p>microCMSのJavaScript SDKはnpmで配布されています。</p>

<p>リスト形式のAPIにおいてはコンテンツのメタ情報一覧が取得でき、オブジェクト形式のAPIにおいては単一コンテンツのメタ情報が取得ができます。<br><br>オブジェクト形式のAPIの場合は<span style="color:#331cbf">GET /api/v1/contents/{endpoint}/{content_id}</span>と同様の結果が得られます。</p>

<p>ここではリスト形式のAPIの場合におけるリクエストヘッダー、クエリパラメータについて解説します。<br></p><h1 id="h91d3988597">リクエストヘッダー</h1><h2 id="h5938e21403">X-MICROCMS-API-KEY</h2><p>マネジメントAPIのGET APIリクエストの際に必要な認証キーです。<br>マネジメントAPIのデフォルト権限で「コンテンツの取得 (一覧・詳細)」を有効にして、リクエストヘッダーに含めて送信してください。</p>

<h1 id="hb41154cc38">レスポンス例</h1><p>こちらがマネジメントAPIで取得したコンテンツ一覧のレスポンス例です。</p><pre><code>{
  "contents": [
    {
      "id": "string",
      "createdAt": "2019-08-24T14:15:22Z",
      "updatedAt": "2019-08-24T14:15:22Z",
      "publishedAt": "2019-08-24T14:15:22Z",
      "revisedAt": "2019-08-24T14:15:22Z",
      // 公開終了時は日時が入る
      "closedAt": null,
      "status": [
        "DRAFT"
      ],
      //カスタムステータス
      "customStatus": null,
      //コンテンツの公開時はnullが入る
      "draftKey": "draftKey",
      "createdBy": "string",
      "updatedBy": "string",
      // 予約が設定されていない場合nullが入る
      "reservationTime": {
        "publishTime": "2019-08-24T14:15:22Z", //公開開始予約設定がされていない場合nullが入る
        "stopTime": "2019-08-24T14:15:22Z" //公開停止予約設定がされていない場合nullが入る
      }
    }
  ],
  "totalCount": 1,
  "offset": 0,
  "limit": 10
}</code></pre><p><br></p><h1 id="h9ce528688c"><span style="color:#2b2c30">クエリ</span></h1><p>URLの語尾にGETパラメータ形式で指定できます。<br></p><h2 id="h4cd61f9fa1"><span style="color:#2b2c30">limit</span></h2><p>取得件数を指定します。<br>デフォルト値は<span style="color:#331cbf">10</span>です。<br>上限値はありませんが、レスポンスサイズ（レスポンスヘッダのcontent-lengthの値）が約<span style="color:#331cbf">5MB</span>を超えるとエラーが発生します。<br>そのため、大量のコンテンツの全件取得をしたい場合は下記の<span style="color:#331cbf">offset</span>パラメータと組み合わせてページング処理を行ってください。</p><h2 id="h41838110ca"><span style="color:#2b2c30">offset</span></h2><p>何件目から取得するかを指定します。<br>デフォルト値は<span style="color:#331cbf">0</span>です。</p>

<h1 id="hb59515d0f5">カスタムステータス</h1><p>カスタムステータスが設定されたコンテンツでは以下のように <code>customStatus</code>  がレスポンスに含まれます。</p><pre><code>{
  "id": "string",
  "createdAt": "2019-08-24T14:15:22Z",
  "updatedAt": "2019-08-24T14:15:22Z",
  "publishedAt": "2019-08-24T14:15:22Z",
  "revisedAt": "2019-08-24T14:15:22Z",
  "status": [
    "PUBLISH"
  ],
  // このcustomStatusが新たに追加されます。
  // customStatusが未対応のプランや設定されていない場合はnullになります。
  "customStatus": [
    {
      "key": "USER_DEFINED_CUSTOM_STATUS_KEY123",
      "description": "ユーザが定義したカスタムステータスです。",
      "name": "カスタムステータスのテスト",
      "behaviour": "PUBLISH",
      "color": "#a20063",
      "createdAt": "2019-08-24T14:15:22Z",
      "updatedAt": "2019-08-24T14:15:22Z"
    }
  ],
  "draftKey": "string",
  "createdBy": "string",
  "updatedBy": "string",
  "reservationTime": {
    "publishTime": "2019-08-24T14:15:22Z",
    "stopTime": "2019-08-24T14:15:22Z"
  }
}</code></pre><p><br>カスタムステータスについて詳しくは以下ドキュメントをご覧ください。</p>

GET /api/v1/contents/{endpoint}

<p>リスト型APIにおいて、idで指定したコンテンツのメタ情報を取得できるAPIです。</p><h1 id="h91d3988597">リクエストヘッダー</h1><h2 id="h5938e21403"><span style="color:#2b2c30">X-MICROCMS-API-KEY</span></h2><p>GET APIリクエストの際に必要な認証キーです。<br>マネジメントAPIのデフォルト権限で「コンテンツの取得 (一覧・詳細)」を有効にして、リクエストヘッダーに含めて送信してください。</p>

<h1 id="hb41154cc38">レスポンス例</h1><p>こちらがコンテンツ詳細のレスポンス例です。</p><pre><code>{
    "id": "contentId",
    "createdAt": "2019-08-24T14:15:22Z",
    "updatedAt": "2019-08-24T14:15:22Z",
    "publishedAt": "2019-08-24T14:15:22Z",
    "revisedAt": "2019-08-24T14:15:22Z",
    "closedAt": null,
    "status": [
      "DRAFT"
    ],
    //カスタムステータス
    "customStatus": null,
    //コンテンツの公開時はnullが入る
    "draftKey": "draftKey",
    "createdBy": "string",
    "updatedBy": "string",
    // 予約が設定されていない場合nullが入る
    "reservationTime": {
      "publishTime": "2019-08-24T14:15:22Z", //公開開始予約設定がされていない場合nullが入る
      "stopTime": "2019-08-24T14:15:22Z" //公開停止予約設定がされていない場合nullが入る
    }
}</code></pre><p><br>ステータスが「公開終了」のコンテンツの場合のレスポンス例です。closedAt  に公開終了時刻が入ります。</p><pre><code>{
&nbsp; "id": "string",
&nbsp; "createdAt": "2022-03-01T04:49:01.635Z",
&nbsp; "updatedAt": "2022-03-01T05:05:54.711Z",
&nbsp; "publishedAt": "2022-03-01T04:49:01.635Z",
&nbsp; "revisedAt": "2022-03-01T04:49:01.635Z",
&nbsp; "closedAt": "2022-03-01T05:05:54.711Z",
&nbsp; "status": [
&nbsp; &nbsp; "CLOSED"
&nbsp; ],
   //カスタムステータス
   "customStatus": null,
&nbsp; "draftKey": "string",
&nbsp; "createdBy": "681dcd71-b7b9-4149-b45b-5e96eb51fecf",
&nbsp; "updatedBy": "681dcd71-b7b9-4149-b45b-5e96eb51fecf",
&nbsp; "reservationTime": null
}</code></pre><p><br></p>

<h1 id="hb59515d0f5">カスタムステータス</h1><p>カスタムステータスが設定されたコンテンツでは以下のように <code>customStatus</code>  がレスポンスに含まれます。</p><pre><code>{
  "id": "string",
  "createdAt": "2019-08-24T14:15:22Z",
  "updatedAt": "2019-08-24T14:15:22Z",
  "publishedAt": "2019-08-24T14:15:22Z",
  "revisedAt": "2019-08-24T14:15:22Z",
  "status": [
    "PUBLISH"
  ],
  // このcustomStatusが新たに追加されます。
  // customStatusが未対応のプランや設定されていない場合はnullになります。
  "customStatus": [
    {
      "key": "USER_DEFINED_CUSTOM_STATUS_KEY123",
      "description": "ユーザが定義したカスタムステータスです。",
      "name": "カスタムステータスのテスト",
      "behaviour": "PUBLISH",
      "color": "#a20063",
      "createdAt": "2019-08-24T14:15:22Z",
      "updatedAt": "2019-08-24T14:15:22Z"
    }
  ],
  "draftKey": "string",
  "createdBy": "string",
  "updatedBy": "string",
  "reservationTime": {
    "publishTime": "2019-08-24T14:15:22Z",
    "stopTime": "2019-08-24T14:15:22Z"
  }
}</code></pre><p><br>カスタムステータスについて詳しくは、以下ドキュメントをご覧ください。</p>

GET /api/v1/contents/{endpoint}/{content_id}

<p>PATCH APIを用いることで、コンテンツの公開状態をAPI経由で変更することができます。<br></p><h1 id="h91d3988597"><span style="color:#2b2c30">リクエストヘッダー</span></h1><h2 id="h5938e21403"><span style="color:#2b2c30">X-MICROCMS-API-KEY</span></h2><p>PATCH APIリクエストの際に必要な認証キーです。<br>マネジメントAPIのデフォルト権限で「コンテンツの公開状態を変更」を有効にして、リクエストヘッダーに含めて送信してください。</p>

<h2 id="h82d2472f5c"><span style="color:#2b2c30">Content-Type</span></h2><p>送信するデータの形式を指定します。<br>microCMSではJSON形式のデータのみ扱っているため、<span style="color:#331cbf">application/json</span>と指定してください。<br></p><h1 id="h44fdca3bb7"><span style="color:#2b2c30">リクエストボディ</span></h1><p>公開状態を変更するためには、<code>PUBLISH</code>、または<code>DRAFT</code>を配列に文字列として渡してください。<code>PUBLISH</code>はコンテンツを公開状態に変更できます。<code>DRAFT</code>はコンテンツを下書き状態に変更できます。</p><pre><code>{"status": ["PUBLISH"]}</code></pre><p><br>公開終了にステータスを変更することはできません。statusに <code>CLOSED</code> を渡すとエラーが返されます。<br></p><h1 id="h0c0b84b0b7"><span style="color:#2b2c30">レスポンス</span></h1><p>正常にコンテンツを作成できた場合は<code>200</code>レスポンスが返却されます。</p>

PATCH /api/v1/contents/{endpoint}/{content_id}/status

<p>microCMSはAPIベースの日本製ヘッドレスCMSです。<br>ヘッドレスCMSについてはこちらの記事をご参考ください。</p>

<h1 id="h6c72713731">microCMSの始め方</h1><p>microCMSは次のようなステップで始めることができます。</p><ol><li><a href="/manual/signup">アカウント登録</a></li><li><a href="/manual/signin">ログイン</a></li><li><a href="/manual/create-service">サービスの作成</a></li><li><a href="/manual/create-api">APIの作成</a></li><li><a href="/manual/create-content">コンテンツの作成</a></li><li><a href="/manual/api-request">APIの呼び出し</a></li><li><a href="/manual/display-contents">コンテンツをブラウザで表示する</a></li></ol><p><br></p>

<p><a href="https://app.microcms.io/signin" target="_blank" rel="noopener noreferrer">ログイン画面</a>からログインすることができます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/943a2ab3faff424baed277f6fb206dc4/CleanShot%202022-04-27%20at%2013.16.14%402x.png?w=1200&amp;h=1158" alt=""><br><br>メールアドレス、パスワードを入力してログインしてください。<br></p><h1 id="h03e644dc44">パスワードを忘れてしまった場合</h1><p><a href="https://app.microcms.io/forgot-password" target="_blank" rel="noopener noreferrer">パスワード再設定申請画面</a>にアクセスしてください。<br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/78988413210d4d63ae95aba89e42f9a9/CleanShot%202022-04-27%20at%2013.16.46%402x.png?w=1200&amp;h=950" alt=""><br><br>入力したメールアドレス宛てにパスワード再設定用の認証コードが送られます。<br>次の画面で認証コードを入力すれば再設定は完了です。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/c663d1f2827446d5907105c40c295352/CleanShot%202022-04-27%20at%2013.17.28%402x.png?w=1200&amp;h=1079" alt=""><br><br><span style="color:#222222">204959</span></p>

<p>アカウント登録、ログイン後はサービスを作成しましょう。<br><br>サービスはmicroCMSの中で最上位の概念です。<br>サービス &gt; API &gt; コンテンツという階層構造になっています。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/7f8720abba8b4800b643d4864ae25852/create-service-01.png" alt=""><br><br>まずはサービス情報の入力です。<br>サービス名にはmicroCMSの導入を考えているプロダクト名や組織名を入力すると良いでしょう。<br>サービスIDは管理画面のURL、APIのエンドポイントのサブドメインに設定される値です。<br><br>サービス情報入力画面にはデフォルトの値が入力されています。<br>サービス名とサービスIDは後から変更することができるので、デフォルト値のままでスキップすることもできます。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms-docs/media/create-service-03.png" alt=""><br><br>画像の設定が終われば、サービスの作成は完了です。<br>ここから先はサービスIDを microcms.io のサブドメインとしてアクセスできるようになります。<br><br>有料プランをご利用の際は、この後<a href="https://document.microcms.io/manual/change-plan-and-billing" target="_blank" rel="noopener noreferrer">「料金プラン変更」</a>の手順をご参照ください。<br>Hobbyプラン（無料プラン）にて、進める場合には、「<a href="https://document.microcms.io/manual/create-api" target="_blank" rel="noopener noreferrer">APIの作成</a>」の手順をご参照ください。</p>

サービスの作成

<p>APIの作成について解説していきます。<br>APIはサービスごとに複数作成することができます。<br>（<a href="https://microcms.io/pricing" target="_blank" rel="noopener noreferrer">プラン</a>ごとに作成できるAPI数の上限は異なります。）<br><br>こちらはAPIの作成画面です。自分で決めるか、テンプレートから選んで作成します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/f37ce227419e4799973f48ed795c4292/api%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%81%AE%E9%81%B8%E6%8A%9E.png" alt=""></p><h2 id="hb8207a0d6d">自分で決める</h2><p><span style="color:#2b2c30">まずは基本情報の入力です。</span><br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms-docs/media/create-api-01.png" alt=""><br><br>ここでは、API名 / エンドポイントの2つを入力します。<br><br>API名は管理画面上で各APIを識別するために設定する名前になります。<br>エンドポイントはAPIのエンドポイントの最後尾のパスにあたる値です。<br>エンドポイントの入力条件は以下になります。</p><ul><li>3文字以上32文字以内</li><li>半角英数字</li><li>小文字のみ</li><li>記号はハイフン、アンダースコアのみ</li><li>すでに設定済みのAPIエンドポイントとの重複不可</li></ul><p><br>ここでは例として、お知らせ情報を取得するAPIを作成します。<br>次に、APIのレスポンス形式の指定です。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms-docs/media/create-api-02.png" alt=""><br><br>ここではAPIレスポンスをリスト形式で返すか、オブジェクト形式で返すか選択することができます。<br></p><h2 id="hfab6db4976">リスト形式</h2><p>複数のコンテンツを取り扱います。<br>お知らせやブログなどの複数コンテンツの管理に適しています。<br>APIでは下記のように配列データを取得できます。</p><pre><code>[ { message: 'おはよう' }, { message: 'こんにちは' }, { message: 'こんばんは' } ]</code></pre><h4 id="hcf83e1357e"><br></h4><h2 id="ha3b9fbc8d9">オブジェクト形式</h2><p>単一のコンテンツを取り扱います。<br>設定情報や単体ページの情報などの単一コンテンツの管理に適しています。<br>APIでは下記のようにオブジェクトデータを取得できます。</p><pre><code>{ title: 'プロフィール', profile: 'ヘッドレスCMSを勉強しています' }</code></pre><p><br>例として、お知らせ情報は複数コンテンツから成り立つのでリスト形式を選択します。<br>次にAPIスキーマの設定です。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms-docs/media/create-api-03.png" alt=""><br><br>APIレスポンスの構造を決めることができます。<br>下記3つの項目を入力します。<br></p><h3 id="h8e35157ab0">フィールドID</h3><p>APIレスポンスのプロパティ名です。<br></p><h3 id="h5b5474cb91">表示名</h3><p>コンテンツを入力する際に表示されます。<br></p><h3 id="he665b3e0a1">種類</h3><p>コンテンツを入力する際の入力フォームを指定することができます。<br>テキストフィールド、リッチエディタ、画像選択フォームなど様々な種類から選択可能です。<br></p><h2 id="he7c119b4c5">テンプレート</h2><p>テンプレートは<strong>ブログ</strong>、<strong>お知らせ</strong>、<strong>バナー</strong>の3つの利用シーンで作成することができます。各テンプレート毎に作成されるAPIが異なります。<br></p><ul><li><strong>ブログ</strong> ブログを作る方向け。記事とカテゴリのAPIを作成します。</li><li><strong>お知らせ</strong> 更新情報やニュースの用途に。お知らせとタグのAPIを作成します。</li><li><strong>バナー</strong> キャンペーンなど、バナーの運用に。バナー要素のAPIを作成します。</li></ul><p><br>対象のテンプレートをクリックすると作成が始まります。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/9aa67aca97004c1399e45160e37da7bd/api%E3%81%AE%E4%BD%9C%E6%88%90%E4%B8%AD%E7%94%BB%E9%9D%A2.png" alt=""><br><br>完了すると、各APIや、コンテンツと画像が入稿された状態で作成されます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/d2704727221a4fb09ca94d4f7d13ee5e/api%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90%E5%BE%8C%E7%94%BB%E9%9D%A2.png" alt=""><br><br>APIの作成手順は以上になります。</p>

APIの作成

<h1 id="h3ec48e700f">料金プラン変更手順</h1><p>料金プランについては、設定画面からいつでも自由に変更することが可能です。<br>手順に沿ってサービス作成を進めた場合、Hobbyプラン（無料プラン）でサービスが開始されますので、上位のプランをご利用されたい場合は、以下手順に沿って変更をお願いします。<br><br>１.サイドバーの歯車アイコンをクリックして、サービス設定を開きます。<br>２.「お支払い」をクリックして、お支払い設定画面に遷移します。<br>３.「変更する」をクリックします。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/111ab2e70bc245bea009534e824fbd52/plan-select.png" alt=""><br><br>４.ご利用したいプランを選択し、「開始する」ボタンをクリックしてください。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/9318de949ee94ec5b0733740f38b58b8/start-trial.png" alt=""><br><br>５.お支払い情報の登録画面が表示されますので、フォームにしたがって登録してください。<br>※こちらの作業はスキップ可能です。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/dcbfed70bfca42bca381cd3040eba624/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-04-27%2015.11.26.png" alt=""><br><br>６.2週間の無料トライアルが開始されます。<br><br>７.トライアル期間終了時点から、1ヶ月先払いでご請求が開始されます。<br>※この時点でお支払い情報のご登録がない場合、自動的にHobbyプラン(無料プラン)にプランが戻ります。このタイミングで、Hobbyプランの規定値を超える設定をしている場合は、即座にメディア配信/APIが停止しますので、ご注意ください。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/79668c9bdb77485996192b85919423bb/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-04-27%2015.33.29.png" alt=""></p>

料金プラン変更

<p>microCMSでは、<strong>クレジットカード払い</strong>と<strong>請求書払い</strong>の2種類で決済を行うことができます。<br><br>請求書払いは有料プランのみとなっています。<br><span style="color:#2b2c30">（ご利用できるプランについては</span><a style="color:#3067af" href="https://microcms.io/pricing/" target="_blank" rel="noopener noreferrer">料金表</a><span style="color:#2b2c30">の「請求書でのお支払い」欄をご参照ください）</span><br></p><h1 id="hacead39b6b">クレジットカード決済の設定</h1><p>クレジットカード決済の設定は、サービス設定 &gt; お支払いから、<strong>お支払い情報を登録する</strong>をクリックすると行えます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/c416a3cf37b247c7b205bc25372135c0/Screenshot%20from%202022-04-27%2017-17-25.png" alt=""><br><br>クレジットカード決済に必要な情報は以下になります。</p><ul><li>クレジットカード情報</li><li>請求先メールアドレス</li><li>請求先会社名</li><li>請求先ご担当者名</li><li>請求先電話番号(ハイフン無し)</li></ul><p><br><span style="color:#2b2c30">後からお支払い方法を変更する場合は、お支払い情報から</span><strong style="color:#2b2c30">変更する</strong><span style="color:#2b2c30">をクリックします。</span><br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/d3f0e60dc5ee4f64964d0c0df4de3a81/Screenshot%20from%202022-04-27%2017-27-10.png" alt=""></p><h1 id="h3bbe0e7ec4">請求書払いの設定</h1><p><strong style="color:#2b2c30">請求書払い</strong><span style="color:#2b2c30">にチェックを入れて必要な情報を入力してください。</span><br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/8bde41ee69b94bbcb3ff120ecbf008b4/invoice-setting.png" alt=""><br><br><span style="color:#2b2c30">決済方法に</span><strong style="color:#2b2c30">請求書払い</strong><span style="color:#2b2c30">を設定された場合、お支払い予定日の当日にメールで請求書を送付いたします。メールの内容をご確認いただき、</span><strong style="color:#2b2c30">インボイスをダウンロード</strong><span style="color:#2b2c30">をクリックして請求書をダウンロードしてください。</span><br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/f10e535e51934579af77bfb39a6e70ab/business-billing-invoice-8.png" alt=""><br><br><span style="color:#2b2c30">そして、請求書のフッター部分に振込先情報が記載してあります。</span><br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/96ad8e1bed5b4d27acb407b58d416341/business-billing-invoice-9.png" alt=""><br></p><h1 id="h5ac1c6ebd8">クレジットカードの削除</h1><p>Hobbyプランのみ、クレジットカード設定を削除することができます。お支払い情報のカード情報記載されている部分にカーソルと合わせると、バツボタンが表示されるのでクリックしてください。<br><br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/6967e8263d6746a59f7107b72f6b347d/Screenshot%20from%202022-04-27%2017-33-17.png" alt=""><br></p>

決済方法(クレジットカード・請求書払い)

<p>サービス設定は設定画面から「サービス名」「サービス画像」「サービスID」が変更可能です。<br></p><h2 id="hee1fca1d93">サービス名・サービス画像を設定する</h2><p><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/673bf7a6b371483996288fa031399bbb/CleanShot%202022-04-27%20at%2013.20.04%402x.png?w=1770&amp;h=829" alt=""><br>1.サービス名・サービス画像を設定するには管理画面右上の歯車アイコンをクリックして、サービス設定を開きます。<br><br>2.サービス設定メニューの「サービス名」をクリックすると、サービス名・画像編集画面に遷移します。<br><br>3.サービス名を入力します。<span style="color:#616269">サービス名は管理画面内で表示されるラベルです。コンテンツ作成者にとってわかりやすい名前を付けましょう。</span><br><br><span style="color:#616269">4.サービス画像を選択します。サービス画像はサイドバーやサービス一覧画面で表示される画像です。180 × 180 以上の画像を選択してください。ドラッグアンドドロップによる選択も可能です。拡張子はpng / jpg / svg / bmp に対応しています。</span><br><br><span style="color:#616269">5.サービス名・サービス画像を編集後、「変更」ボタンをクリックすることで設定することができます。</span><br></p><h2 id="h490f475695">サービスIDを設定する</h2><p><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/2da673f800e4442ca6d8b906fcce5b75/CleanShot%202022-04-27%20at%2013.22.16%402x.png?w=1769&amp;h=1009" alt=""><br>「サービス名」の編集と同様に歯車アイコンをクリックしてサービス設定画面を開きます。<br>1.メニュー「サービスIDの変更」をクリックして、サービスID編集画面を開きます。<br><br>2.変更したいサービスIDを入力して、「サービスIDを変更する」をクリックすることでサービスIDを設定することができます。<br><br><br></p>

サービス設定

<p>コンテンツの作成について、<a href="/manual/create-api">APIの作成</a>で用意したAPIを元に解説していきます。<br>コンテンツの上限数は<a href="https://microcms.io/pricing/" target="_blank" rel="noopener noreferrer">プラン</a>によって異なりますのでご確認ください。<br></p><h1 id="h95b40124ab">APIがリスト形式の場合</h1><p>まずはAPIをリスト形式として作成した場合について解説します。<br>作成したコンテンツ（API）を選択するとコンテンツ一覧画面が表示されます。<br>画面右上の「＋追加」ボタンをクリックすることでコンテンツ作成画面に遷移できます。<br><br>コンテンツ作成画面ではAPIスキーマで設定した内容に合わせて入稿フォームが用意されます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/4ef6171df6a9422e9ee3c88684cce450/CleanShot%202022-04-27%20at%2013.26.19%402x.png" alt=""><br><br>内容を入力し、右上のボタンから公開または下書き保存のどちらかを行うことができます。<br>公開を選択し、クリックするとコンテンツは公開され、APIから取得できるようになります。<br></p><h1 id="h2dd72095e8">APIがオブジェクト形式の場合</h1><p>APIをオブジェクト形式として作成した場合は、単一コンテンツのみが入稿可能となります。<br>よって、画面上部のコンテンツ管理タブをクリックしてもコンテンツ一覧画面には遷移せず、最初からコンテンツ作成/編集画面に遷移します。<br><br>コンテンツ作成画面における操作はリスト形式の際と同じです。<br>ただし、オブジェクト形式の場合は単一コンテンツのため、コンテンツの削除ボタンが用意されていません。<br>コンテンツを削除したい場合はAPI設定からAPIごと削除してください。</p>

コンテンツの作成

<p>コンテンツにはそれぞれ<strong>公開中</strong>、<strong>公開終了</strong>、<strong>下書き中</strong>、<strong>公開中かつ下書き中</strong>の4つのステータスが存在します。各ステータスによってAPIでの動作が異なります。</p><h1 id="hcc42887447">ステータスの説明</h1><p>各コンテンツのステータスについて説明していきます。</p><h2 id="h41fa5b20a4">公開中</h2><p>ステータスが公開中の場合、APIでコンテンツの内容を取得することができます。ステータスコードは200になります。</p><h2 id="h4b2394371f">公開終了の場合</h2><p>ステータスが公開終了の場合、APIでコンテンツの内容を取得することはできません。ステータスコードは404になります。</p><h2 id="h5680f02d25">下書き中の場合</h2><p>ステータスが下書き中の場合、APIでコンテンツの内容を取得することはできません。ステータスコードは404になります。ただし、<a href="https://document.microcms.io/content-api/get-list-contents#hab2c474417" target="_blank" rel="noopener noreferrer">draftKey</a>を付与してリクエストするか、APIキーに<a href="https://document.microcms.io/content-api/get-list-contents#hace968f950" target="_blank" rel="noopener noreferrer">下書き全取得</a>権限をつけた場合は、コンテンツの内容を取得することができます。</p><h2 id="h5bc39f6308">公開中かつ下書き中の場合</h2><p>ステータスが公開中かつ下書き中の場合、APIで公開中のコンテンツの内容のみ取得することができます。ステータスコードは200になります。ただし、<a style="background-color:#ffffff" href="https://document.microcms.io/content-api/get-list-contents#hab2c474417" target="_blank" rel="noopener noreferrer">draftKey</a>を付与してリクエストするか、APIキーに<a style="background-color:#ffffff" href="https://document.microcms.io/content-api/get-list-contents#hace968f950" target="_blank" rel="noopener noreferrer">下書き全取得</a>権限をつけた場合は、下書き中のコンテンツの内容を取得することができます。</p>

コンテンツのステータス

<p>コンテンツIDのフォーマットはAPI毎に設定が可能です。<br>設定箇所は「API設定」→「コンテンツID」となります。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/bd1e4b1444994492898e72bfae07b641/CleanShot%202022-04-27%20at%2013.31.55%402x.png?w=1194&amp;h=559" alt=""><br><br>設定できる項目は大きく2つあります。<br>まずは文字の種類です。コンテンツIDに含まれる文字の種類を下記4種類の中から選択できます。<br></p><ul><li>英語小文字（a ~ z）</li><li>英語大文字（A ~ Z）</li><li>数字（0 ~ 9）</li><li>記号（ - と _ ）</li></ul><p><br>次に文字数です。こちらはコンテンツIDの文字数を3文字〜50文字の間で固定することができます。<br>指定をしない場合には文字数の制限は行いません。<br></p>

<p>次に、コンテンツIDの設定が適用される箇所についてです。<br>主に下記の箇所で設定した内容が反映されます。<br></p><h2 id="h32898be6e0">自動生成されるケース</h2><ul><li>コンテンツの新規作成時</li><li>POST APIの利用時</li><li>ファイルインポート時（コンテンツIDを指定しない）</li></ul><h2 id="h3b85f8b1ad">フォーマットの確認が行われるケース</h2><ul><li>コンテンツIDの変更時</li><li>PUT APIの利用時</li><li>ファイルインポート時（コンテンツIDを指定する）</li></ul>

コンテンツIDの設定

<p>microCMSでは『公開中』『下書き中』『公開終了』の3つのステータスを用意していますが、新たに独自のステータスを作成することができます。<br>（ご利用できるプランについては<a href="https://microcms.io/pricing/" target="_blank" rel="noopener noreferrer">料金表</a>の「カスタムステータス」欄をご参照ください）<br></p><h1 id="hc7ff40effa">作成方法</h1><p>カスタムステータスはAPIごとに作成が可能です。<br>カスタムステータスを作成したいAPIの画面右上にある「API設定」→「カスタムステータス」と進むと設定画面に遷移します。<br><br>ここではキャンペーン終了ステータスを作成する例をご紹介します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/f3448cffdbc54664a8ae555baec65fc6/%E4%BB%AE_API%E8%A8%AD%E5%AE%9A%20-%20%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%82%B9%E3%83%86%E3%83%BC%E3%82%BF%E3%82%B9.jpg" alt=""><br><br>追加ボタンを押してステータスを作成するための情報を入力します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/766acff2264e4d60aca4b66d0b464a1a/%E4%BB%AE_%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%82%B9%E3%83%86%E3%83%BC%E3%82%BF%E3%82%B9%E4%BD%9C%E6%88%90.jpg" alt=""><br><br>それぞれの項目は以下のような情報を入力してください。</p><ul><li>APIステータス名：APIに反映されるステータス名です。デフォルトのコンテンツステータス「PUBLISH」「DRAFT」「CLOSED」以外の名前を設定してください。</li><li>表示ステータス名：管理画面で表示されるステータス名です。一目でどんなステータスなのかがわかる名前を設定します。</li><li>ステータスの説明：ステータスの説明があれば設定します。空欄可。</li><li>ステータスの状態：ステータスの状態を「公開」「下書き」「公開終了」から選択します。</li><li>ステータスカラー：管理画面で表示されるステータスの色をカラーパレットから設定します。</li></ul><p><br>APIステータス名と表示ステータス名は既存のステータスと重複しない値を入力してください。<br>カスタムステータスが作成されると一覧に表示されます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/be216ee40e744e438f5575b4ad571678/%E4%BB%AE_API%E8%A8%AD%E5%AE%9A%20-%20%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%82%B9%E3%83%86%E3%83%BC%E3%82%BF%E3%82%B9_%E4%BD%9C%E6%88%90%E5%BE%8C.jpg" alt=""><br></p><h1 id="h4d6fdb4d08">利用方法</h1><p>カスタムステータスを作成するとコンテンツ詳細画面のステータス表示がプルダウンに変更されるので、ここでステータスを切り替えることができます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/67be503ef2044616a4410c825b571a50/%E4%BB%AE_%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E8%A9%B3%E7%B4%B0%20-%20%E7%B7%A8%E9%9B%86%20-%20%E5%85%AC%E9%96%8B%E4%B8%AD.jpg" alt=""></p>

<h1 id="h72a886c1f0">マネジメントAPI</h1><p>カスタムステータスはコンテンツAPIのレスポンスには含まれません。<br><br>API経由でカスタムステータスを取得する場合にはマネジメントAPI（ベータ）を使用します。<br>カスタムステータスが含まれたコンテンツをこれらのエンドポイントで叩くと以下のようにレスポンスに <code>customStatus</code>  が配列で含まれます。<br>管理画面の内容がレスポンスに反映されます。</p><ul><li>APIステータス名：<code>key</code>  </li><li>表示ステータス名：<code>name</code>  </li><li>ステータスの説明：<code>description</code>  </li><li>ステータスの状態：<code>behavior</code>  </li><li>ステータスカラー：<code>color</code>  </li></ul><pre><code>{
  "id": "string",
  "createdAt": "2019-08-24T14:15:22Z",
  "updatedAt": "2019-08-24T14:15:22Z",
  "publishedAt": "2019-08-24T14:15:22Z",
  "revisedAt": "2019-08-24T14:15:22Z",
  "status": [
    "PUBLISH"
  ],
  // このcustomStatusが新たに追加されます。
  // customStatusが未対応のプランや設定されていない場合はnullになります。
  "customStatus": [
    {
      "key": "USER_DEFINED_CUSTOM_STATUS_KEY123",
      "description": "ユーザが定義したカスタムステータスです。",
      "name": "カスタムステータスのテスト",
      "behaviour": "PUBLISH",
      "color": "#a20063",
      "createdAt": "2019-08-24T14:15:22Z",
      "updatedAt": "2019-08-24T14:15:22Z"
    }
  ],
  "draftKey": "string",
  "createdBy": "string",
  "updatedBy": "string",
  "reservationTime": {
    "publishTime": "2019-08-24T14:15:22Z",
    "stopTime": "2019-08-24T14:15:22Z"
  }
}</code></pre><p><br>現時点では以下のエンドポイントに対応しています（PATCHには対応していません）。<br>マネジメントAPIの詳細は下記のドキュメントをご覧ください。</p>

カスタムステータス

<p>microCMSではコンテンツの編集履歴を管理することができます。<br>（ご利用できるプランについては<a href="https://microcms.io/pricing/" target="_blank" rel="noopener noreferrer">料金表</a>の「コンテンツ編集履歴管理」欄をご参照ください）<br></p><h1 id="h3ec1162dcf">ご利用方法</h1><p>コンテンツ編集画面内の「更新履歴」ボタンからご確認が可能です。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/ed8d409c1c604f1a8d9985a96462dbd4/content-history-01.png" alt=""><br><br>ボタンを押すとコンテンツの編集履歴を一覧で見ることができます。<br>編集履歴は普段のコンテンツ編集で「公開」や「下書き保存」などをした際に自動的に記録されています。<br>（カスタムステータスが設定されている場合は、その内容も記録されます）<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/c2b16743b3a448eaa9b967ddc7e58c91/content-history-02.png" alt=""><br><br>「内容を確認」リンクから指定したバージョン時のコンテンツ内容をご確認いただけます。<br>その際にコンテンツの「公開」や「下書き保存」を行うことで、そのバージョン時のコンテンツ内容で再度上書きすることも可能です。<br><br>また、画面右下には現在確認中の履歴バージョンが表示されます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/0082109fb36a42b384b00388f46ceb68/content-history-03.png" alt=""></p>

コンテンツ編集履歴管理

<h1 id="h767241111a">APIスキーマ設定画面</h1><p>APIスキーマの設定方法を説明します。<br>APIスキーマを設定・編集するには、まず設定したいAPIページの右上「API設定」をクリックします（①）。<br>メニュー「APIスキーマ」をクリックして編集画面を開きます（②）。<br>この画面でAPIスキーマの様々な詳細設定ができます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/b132323600694d81ad5f5e5da91bbe14/api-model-settings-01.png" alt=""></p>

<h1 id="hb67fd94d64">APIスキーマ設定</h1><p>APIレスポンスの構造を決めることができます。<br>下記3つの項目を入力します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/dd4051bec9804b2ea50620a807af55d2/api-model-settings-02.png" alt=""><br></p><h3 id="h8e35157ab0"><a style="color:#2b2c30" href="https://document.microcms.io/manual/create-api#h8e35157ab0" target="_blank" rel="noopener noreferrer">フィールドID</a></h3><p>APIレスポンスのプロパティ名です。</p><h3 id="h5b5474cb91"><a style="color:#2b2c30" href="https://document.microcms.io/manual/create-api#h5b5474cb91" target="_blank" rel="noopener noreferrer">表示名</a></h3><p>コンテンツを入力する際に表示されます。</p><h3 id="he665b3e0a1"><a style="color:#2b2c30" href="https://document.microcms.io/manual/create-api#he665b3e0a1" target="_blank" rel="noopener noreferrer">種類</a></h3><p>コンテンツを入力する際の入力フォームを指定することができます。<br>テキストフィールド、リッチエディタ、画像選択フォームなど様々な種類から選択可能です。<br><br></p>

<h1 id="h954fb8ee1c">APIスキーマ詳細設定</h1><p>各フィールドでは、それぞれ様々な設定ができます。<br>各フィールド右端のメニューから詳細設定画面を開くことができます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/16b7f54d333a4257b05d3fbf2af0b575/api-model%5Esettings-03.png" alt=""><br></p><ul><li>必須項目・・・チェックを入れるとコンテンツ入稿する際に、「必須」の設定にできます。全フィールドで設定することができます。</li><li>詳細設定・・・クリックすると、フィールドごとに細かい設定ができます。</li></ul><p>詳細設定を開くとフィールドごとに以下のような画面が開きます(以下はテキストフィールドの例)。<br>フィールドごとに詳細設定をすることができます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/269776f27fd94896b23eb7333cefd626/api-model-settings-04.png" alt=""><br><br><strong>APIスキーマ設定に反映させるには、設定後「変更」ボタンをクリックします。</strong><br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/3412640943e74dbc92d7d7e1c263b1c5/api-model-settings-05.png" alt=""></p>

<h1 id="h1993cddc9a">フィールドの詳細設定項目</h1><p>各フィールドで設定できる項目です。</p>

<h2 id="h6165104509">テキストフィールド</h2><ul><li>必須項目・・・設定をONにすると入稿時の入力が必須となります。</li><li>説明文・・・入稿画面に表示する説明文です。入稿者にとってわかりやすい説明を入力しましょう。</li><li>重複を許可しない（ユニーク）・・・他のコンテンツで同じ値がある場合にはコンテンツを保存できなくなります。1つのAPIに対して最大で5つのフィールドに設定が可能です。</li><li>特定のパターンのみ入力を許可する・・・正規表現にマッチした入力のみに制限します。</li><li>文字数を制限する・・・フィールドに入力する文字数の最小文字数、最大文字数を制限します。</li></ul>

<h2 id="haea0c3e3ba">テキストエリア</h2><ul><li>必須項目・・・設定をONにすると入稿時の入力が必須となります。</li><li>説明文・・・入稿画面に表示する説明文です。入稿者にとってわかりやすい説明を入力しましょう。</li><li>特定のパターンのみ入力を許可する・・・正規表現にマッチした入力のみに制限します。</li><li>文字数を制限する・・・フィールドに入力する文字数の最小文字数、最大文字数を制限します。</li></ul>

<h2 id="hb8c330c51d">リッチエディタ</h2><ul><li>必須項目・・・設定をONにすると入稿時の入力が必須となります。</li><li>説明文・・・入稿画面に表示する説明文です。入稿者にとってわかりやすい説明を入力しましょう。</li><li>装飾ボタン・・・使用可能な装飾ボタンを制限することができます。</li><li>改行に&lt;br&gt;タグを用いる・・・オンの場合は&lt;br&gt;タグで改行します。オフの場合は&lt;p&gt;タグで段落分けします。</li><li>画像のレスポンスにwidthとheightを含む・・・オンの場合は&lt;img&gt;タグにwidthとheightが含まれます。</li></ul><p><br></p>

<h2 id="h7b3c950f25">画像</h2><ul><li>必須項目・・・設定をONにすると入稿時の入力が必須となります。</li><li>説明文・・・入稿画面に表示する説明文です。入稿者にとってわかりやすい説明を入力しましょう。</li><li>画像のサイズ制限・・・フィールドに入力する画像のwidth、heightの値を制限します。</li></ul>

<h2 id="h1e35956891">日時</h2><ul><li>必須項目・・・設定をONにすると入稿時の入力が必須となります。</li><li>説明文・・・入稿画面に表示する説明文です。入稿者にとってわかりやすい説明を入力しましょう。</li><li>日付指定のみ・・・設定をONにすると時間の指定はできなくなります。</li></ul>

<h2 id="hac16e128af">真偽値</h2><ul><li>必須項目・・・設定をONにすると入稿時の入力が必須となります。</li><li>説明文・・・入稿画面に表示する説明文です。入稿者にとってわかりやすい説明を入力しましょう。</li></ul>

<h2 id="hb5011814b9">セレクトフィールド</h2><ul><li>必須項目・・・設定をONにすると入稿時の入力が必須となります。</li><li>説明文・・・入稿画面に表示する説明文です。入稿者にとってわかりやすい説明を入力しましょう。</li><li>選択肢・・・セレクトフィールドの選択肢を設定します。</li><li>複数選択可・・・チェックをつけると複数選択可能になります。</li></ul>

<h2 id="h9c184228ff">コンテンツ参照</h2><ul><li>必須項目・・・設定をONにすると入稿時の入力が必須となります。</li><li>説明文・・・入稿画面に表示する説明文です。入稿者にとってわかりやすい説明を入力しましょう。</li><li>参照先コンテンツ・・・参照するコンテンツAPIを設定します</li><li>一覧画面に表示する項目・・・コンテンツID、またはテキストフィールドの項目から選択できます。指定した項目が存在しない場合は、コンテンツIDが代わりに表示されます。</li></ul><p><br></p>

<h2 id="hbb2b6644cb">複数コンテンツ参照</h2><ul><li>必須項目・・・設定をONにすると入稿時の入力が必須となります。</li><li>説明文・・・入稿画面に表示する説明文です。入稿者にとってわかりやすい説明を入力しましょう。</li><li>参照先コンテンツ・・・参照するコンテンツAPIを設定します</li><li>一覧画面に表示する項目・・・コンテンツID、またはテキストフィールドの項目から選択できます。指定した項目が存在しない場合は、コンテンツIDが代わりに表示されます。</li><li>複数コンテンツ参照の数を制限する・・・複数コンテンツ参照の最小数と最大数を設定します。</li></ul><p><br></p>

<h2 id="h136db6d9c7">数値</h2><ul><li>必須項目・・・設定をONにすると入稿時の入力が必須となります。</li><li>説明文・・・入稿画面に表示する説明文です。入稿者にとってわかりやすい説明を入力しましょう。</li><li>数値を制限する・・・フィールドに入力する数値の最小値、最大値を制限します。</li></ul><p><br></p>

<h2 id="h627ed5a480">カスタム</h2><ul><li>必須項目・・・設定をONにすると入稿時の入力が必須となります。</li><li>説明文・・・入稿画面に表示する説明文です。入稿者にとってわかりやすい説明を入力しましょう。</li><li>カスタムフィールド・・・使用するカスタムフィールドを設定します。</li></ul>

<h2 id="h165864f8ee">繰り返し</h2><ul><li>必須項目・・・設定をONにすると入稿時の入力が必須となります。</li><li>説明文・・・入稿画面に表示する説明文です。入稿者にとってわかりやすい説明を入力しましょう。</li><li>繰り返しフィールド・・・繰り返しフィールドに使用するカスタムフィールドを設定します。</li><li>並び順・・・カスタムフィールドを選択する際の並び順を設定します。</li><li>繰り返しフィールドの数を制限する・・・繰り返しフィールドの最小数と最大数を設定します。</li></ul><p><br></p>

<h2 id="h73f1d28c80">ファイル</h2><ul><li>必須項目・・・設定をONにすると入稿時の入力が必須となります。</li><li>説明文・・・入稿画面に表示する説明文です。入稿者にとってわかりやすい説明を入力しましょう。</li></ul>

<h2 id="hb1d419d743">拡張フィールド</h2><ul><li>必須項目・・・設定をONにすると入稿時の入力が必須となります。</li><li>説明文・・・入稿画面に表示する説明文です。入稿者にとってわかりやすい説明を入力しましょう。</li><li>拡張フィールド URL・・・拡張フィールドに使用するURLを設定します。</li></ul>

APIスキーマ設定

<p>コンテンツを作成した後は、API経由でコンテンツを取得してみましょう。<br></p><h1 id="h1b04a6654a">単一コンテンツの取得</h1><p>コンテンツをひとつだけ取得したい場合は、次のエンドポイントを利用します。<br><br><em>GET /api/v1/{endpoint}/{content_id}</em></p>

<p>APIを呼び出すためには<strong>API-KEYが必要です</strong>。<br>API-KEYは権限管理 &gt; X個のAPIキーから確認可能です。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/ecfa37797429413ea15ecfc60121c399/CleanShot%202022-04-27%20at%2013.33.17%402x.png" alt=""><br><br>また、microCMSには管理画面上で簡単にAPIを試すことができる「APIプレビュー」機能が標準で搭載されています。<br>コンテンツ編集画面の右上に「APIプレビュー」ボタンがあるのでクリックしてみましょう。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/3bb51d24c8dd4011987aeffeef1fea46/CleanShot%202022-04-27%20at%2013.35.11%402x.png" alt=""><br><br>既にデータ取得リクエストの準備は整っています。<br>画面内の「取得」ボタンを押してみましょう。<br>実際にブラウザからAPIリクエストが行われ、次のようなJSONレスポンスが表示されます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/eaf8a8ecc3704074bb17c85f2e174f6a/CleanShot%202022-04-27%20at%2013.36.41%402x.png" alt=""><br><br>また、画面内にはAPIを叩くためのcurlコマンドも表示されています。<br>こちらで直接データを取得することも可能です。<br></p><pre><code>$ curl "https://micro.microcms.io/api/v1/news/FwVfA_GeL" -H "X-API-KEY: 1598164e-2d58-488c-a4af-c51bd7d131a5"</code></pre><p><br>そのほかAPI仕様の詳細については<a href="/content-api/get-content">コンテンツAPIリファレンス</a>をご覧ください。<br></p>

<h1 id="hb89ab674d4">コンテンツ一覧の取得</h1><p>リスト形式のAPIでは次のエンドポイントを利用することで、コンテンツ一覧の取得を行うことも可能です。<br><br><em>GET /api/v1/{endpoint}</em><br></p>

<p><br>こちらのAPIに関しても、コンテンツ一覧画面右上の「APIプレビュー」ボタンから実行が可能です。<br><br>リスト形式のAPIでは入稿したコンテンツが配列で返ってくると共に、<em>totalCount</em>、<em>offset</em>、<em>limit </em>が返却されます。<br><br>コンテンツ一覧取得APIはクエリが豊富で、フィールド指定や複雑なフィルタリングを行うことができます。</p>

<p>コンテンツをAPIから取得することができたら、実際にそのデータをブラウザで表示してみましょう。<br><br>※microCMSで取得できるのはJSONデータのみのため、ユーザーに内容を見せるためには何らかの表示ロジックが必要です。<br><br>ここではサンプルとして HTML/JavaScript を使って表示してみます。<br>実際にはAPIさえ呼び出せればデータ表示をするプラットフォームは何でも構いません。<br><br>こちらが今回作成した index.html です。<br></p><pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&nbsp; &lt;body&gt;
&nbsp; &nbsp; &lt;main&gt;
&nbsp; &nbsp; &nbsp; &lt;h1 id="title"&gt;&lt;/h1&gt;
&nbsp; &nbsp; &nbsp; &lt;div id="body"&gt;&lt;/div&gt;
&nbsp; &nbsp; &lt;/main&gt;
&nbsp; &nbsp; &lt;script&gt;
&nbsp; &nbsp; &nbsp; fetch("https://micro.microcms.io/api/v1/news/0ik_dv015", {
&nbsp; &nbsp; &nbsp; &nbsp; headers: {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "X-API-KEY": "1598164e-2d58-488c-a4af-c51bd7d131a5"
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; })
&nbsp; &nbsp; &nbsp; &nbsp; .then(res =&gt; res.json())
&nbsp; &nbsp; &nbsp; &nbsp; .then(json =&gt; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("title").innerHTML = json.title;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("body").innerHTML = json.body;
&nbsp; &nbsp; &nbsp; &nbsp; })
&nbsp; &nbsp;&lt;/script&gt;
&nbsp; &lt;/body&gt;
&lt;/html&gt;</code></pre><p><br>Fetch APIを使ってmicroCMSからデータを取得し、そのデータを基にDOMを書き換えています。<br>（何らかのテンプレートエンジン/フレームワークを用いることで、より効率的な実装も可能です）<br><br>このHTMLをブラウザから開くと次のように表示されます。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms-docs/media/display-contents-01.png" alt=""></p>

コンテンツをブラウザで表示する

APIの呼び出し

<p>コンテンツを入力するフィールドのひとつとしてリッチエディタがあります。<br>ここではリッチエディタの操作方法を解説します。<br></p><h1 id="hdec08ed8b7">見出し、段落</h1><p><em>h1</em>〜<em>h5</em>、<em>p</em>タグに対応しています。<br><em>h1</em>〜<em>h5</em>にはテキストをハッシュ化した文字列が<em>id</em>として割り振られます。（つまり、テキストを変更しない限り<em>id</em>は固定となります）<br><br>割り振られた<em style="background-color:#ffffff">id</em>を用いて、フロントエンド側で目次を生成することが可能です。<br>詳細については下記の記事をご覧ください。</p>

<h1 id="heb169dcc37">文字サイズ</h1><p>小 / 標準 / 大 / 最大 から選択可能です。<br>それぞれ、<em>font-size</em>が 0.75em / 1em / 1.5em / 2.5em に相当します。<br></p><h1 id="h6548903b5d">太字</h1><p>テキストが<em>strong</em>タグで囲われます。<br></p><h1 id="hc296e45e2a">イタリック</h1><p>テキストが<em>em</em>タグで囲われます。<br></p><h1 id="hb64bcbf6df">アンダーライン</h1><p>テキストが<em>u</em>タグで囲われます。<br></p><h1 id="hdd1fc8dfe3">打ち消し線</h1><p>テキストが<em>s</em>タグで囲われます。<br></p><h1 id="h99aae68c36">インラインコード</h1><p>テキストが<em>code</em>タグで囲われます。<br></p><h1 id="h298b325e13">背景色</h1><p>テキストに背景色をつけます。<br></p><h1 id="h1371bbffe7">文字色</h1><p>テキストに文字色をつけます。<br></p><h1 id="h037aec0bed">テキスト寄せ</h1><p>左寄せ / 中央寄せ / 右寄せ / <span style="color:#000000">均等割付 の指定ができます。</span><br></p><h1 id="hdf0456f9a2"><span style="color:#000000">引用</span></h1><p>テキストが<em>blockquote</em>タグで囲われます。<br></p><h1 id="hcf2b66e679">コード</h1><p>テキストが<em>pre</em>タグと<em>code</em>タグで囲われます。<br>ソースコードの入力に適しています。<br>シンタックスハイライトの実装を行い場合は下記の記事をご参考ください。</p>

<h1 id="had36204c49">番号付き箇条書き</h1><p>テキストが<em>ol</em>タグ、<em>li</em>タグで囲われます。<br></p><h1 id="h0d78c88097">箇条書き</h1><p>テキストが<em>ul</em>タグ、<em>li</em>タグで囲われます。<br></p><h1 id="he4ba96ecb5">リンク</h1><p>リンクを指定することができます。<br><em>https://</em>または<em>http://</em>始まりの場合は外部リンクとなり、<em>/hoge</em>などのパス入力の場合は内部リンクとなります。<br></p><h1 id="h7b3c950f25">画像</h1><p>画像のアップロード、選択ができます。<br>画像のアップロードはメディア画面から行うことも可能です。<br>リッチエディタ内に入力された画像をクリックすることで、画像の width / height / alt とリンク先を指定することができます。<br></p><h1 id="haf38f3d7f3">外部サービス埋め込み</h1><p>外部サービスのURLを入力することで埋め込みをすることができます。<br>現在、対応している主なサービスは以下になります。<br></p><ul><li>YouTube（<a href="https://www.youtube.com/" target="_blank" rel="noopener noreferrer">https://www.youtube.com/</a>）</li><li><span style="color:#000000">Vimeo (</span><a href="https://vimeo.com/" target="_blank" rel="noopener noreferrer">https://vimeo.com/</a><span style="color:#000000">)</span></li><li><span style="color:#000000">Twitter (</span><a href="http://www.twitter.com/" target="_blank" rel="noopener noreferrer">http://www.twitter.com/</a><span style="color:#000000">)</span></li><li><span style="color:#000000">Instagram (</span><a href="https://instagram.com/" target="_blank" rel="noopener noreferrer">https://instagram.com</a><span style="color:#000000">)</span></li><li><span style="color:#000000">Facebook (</span><a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer">https://www.facebook.com/</a><span style="color:#000000">)</span></li><li><span style="color:#000000">TikTok (</span><a href="http://www.tiktok.com/" target="_blank" rel="noopener noreferrer">http://www.tiktok.com/</a><span style="color:#000000">)</span></li><li><span style="color:#000000">Flickr (</span><a href="https://www.flickr.com/" target="_blank" rel="noopener noreferrer">https://www.flickr.com/</a><span style="color:#000000">)</span></li><li><span style="color:#000000">Reddit (</span><a href="https://reddit.com/" target="_blank" rel="noopener noreferrer">https://reddit.com/</a><span style="color:#000000">)</span></li><li><span style="color:#000000">Tumblr (</span><a href="https://www.tumblr.com/" target="_blank" rel="noopener noreferrer">https://www.tumblr.com</a><span style="color:#000000">)</span></li><li>SoundCloud (<a href="http://soundcloud.com/" target="_blank" rel="noopener noreferrer">http://soundcloud.com/</a>)</li><li>SpeakerDeck (<a href="https://speakerdeck.com/" target="_blank" rel="noopener noreferrer">https://speakerdeck.com</a>)</li><li><span style="color:#000000">SlideShare (</span><a href="http://www.slideshare.net/" target="_blank" rel="noopener noreferrer">https://www.slideshare.net/</a><span style="color:#000000">)</span></li><li><span style="color:#000000">TED (</span><a href="https://www.ted.com/" target="_blank" rel="noopener noreferrer">https://www.ted.com</a><span style="color:#000000">)</span></li><li><span style="color:#000000">Codepen (</span><a href="https://codepen.io/" target="_blank" rel="noopener noreferrer">https://codepen.io</a><span style="color:#000000">)</span></li><li><span style="color:#000000">CodeSandbox (</span><a href="https://codesandbox.io/" target="_blank" rel="noopener noreferrer">https://codesandbox.io</a><span style="color:#000000">)</span></li></ul><p><br>外部サービスの埋め込みはEmbedlyのAPIを利用しています。その他の対応プロバイダーや対応スキーマURLは<a href="https://embed.ly/providers" target="_blank" rel="noopener noreferrer">こちら</a>をご参照ください。<br>（ただし、情報がアップデートされておらず未対応の場合もございます）<br></p><h1 id="h47f5818a53">書式のクリア</h1><p>選択範囲に対してスタイルやHTMLタグ情報をリセットすることができます。<br></p><h1 id="hdb2c2bf549">マークダウン記法</h1><p>リッチエディタ内ではマークダウン記法も可能です。<br>下記の記法に対応しております。</p><pre><code># 見出し
**太字**
*イタリック*
***太字イタリック***
~~打ち消し線~~
- リスト
1. 番号付きリスト
[]() リンク
&gt; 引用
`インラインコード`
```コードブロック```</code></pre><p><br></p><h1 id="h5f10e96a34">ショートカットキー</h1><p>リッチエディタ内では下記のショートカットキーをご利用可能です。<br>※ただし、環境によっては動作しない場合もございます。</p><pre><code>esc →　全画面解除
⌘ (Ctrl) + S →　下書き保存
⌘ (Ctrl) + B →　太字
⌘ (Ctrl) + I →　斜体
⌘ (Ctrl) + U →　下線</code></pre><p><br></p><h1 id="hd9483ffc71">装飾ボタンのカスタマイズ</h1><p>リッチエディタの装飾ボタンをカスタマイズすることができます。APIスキーマのリッチエディタから、<code>詳細設定</code>をクリックするとサイドメニューが開くので、<code>装飾ボタン</code>からカスタマイズできます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/b0b5de76eb2244c8a6c40540c41c080a/custom-richeditor.png" alt=""><br></p><h1 id="h730cd925f1">画像のレスポンスにwidthとheightを含む</h1><p>リッチエディタ内の画像のレスポンスにwidth (幅) と height (高さ) を含めることができます。APIスキーマのリッチエディタから、<code>詳細設定</code>をクリックするとサイドメニューが開くので、<code>画像のレスポンスにwidthとheightを含む</code>をオンにして設定できます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/60c8d7dc6cc443a696373c0e4aa1edb0/richeditor-image-new.png" alt=""><br>実際のレスポンス例は以下のようになります。</p><pre><code>&lt;img src="https://images.microcms-assets.io/assets/8a794a32a4bb49e5b3b04c23cae3a151/b8dd812b49994130a92536da203b69b6/test.png" alt="test" width="300" height="115"&gt;</code></pre>

リッチエディタの操作方法

<p>microCMSではメンバーに対して柔軟に権限を設定することが可能です。<br>権限管理機能は有料プランにてご利用いただけます。<br>詳しくは<a href="https://microcms.io/pricing" target="_blank" rel="noopener noreferrer">料金プランページ</a>をご覧ください。<br></p><h1 id="hdcb010c82a">ロールによる権限設定</h1><p>「ロール」単位で細かく権限の設定ができ、メンバーに対して「ロール」を複数紐づけることができます。<br>ロール設定は <strong>サービス設定 &gt; ロール</strong> から行うことができます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/0ec7ddd1864341bc94d1a6c5c6d963a8/roles-new-1.png" alt=""><br><br>以下で各種権限の詳細を解説します。<br></p><h2 id="h21ed721515">メンバー設定</h2><h4 id="h7ae9f33ba9">読み取り(すべてのメンバー)</h4><p>メンバー一覧、メンバー詳細画面にアクセスできるようになります。<br>左メニューにもサービスに所属しているメンバー数が表示されます。<br></p><h4 id="h058eb821cc">読み取り(任意のメンバーのみ)</h4><p>選択されたメンバーのみ、メンバー詳細画面にアクセスできるようになります。<br></p><h4 id="ha2cae467de">作成</h4><p>メンバーの作成ができるようになります。<br>※メンバー作成時にはロールの指定が必要なので、ロールの読み取り権限がない場合はメンバーの作成はできません。<br></p><h4 id="h962c7e628e">編集</h4><p>メンバーに紐づくロールを変更できるようになります。<br>※ロールの読み取り権限がない場合は、メンバーに紐づくロールの変更はできません。<br>※全メンバーの中で管理者が必ず1名以上必要なので、その条件を満たさない場合は変更できません。<br></p><h4 id="h419eb04cda">削除</h4><p>メンバーを削除できるようになります。<br>※全メンバーの中で管理者が必ず1名以上必要なので、その条件を満たさない場合は削除できません。<br></p><h2 id="haf2235e9af">ロール設定</h2><h4 id="h853e877289">読み取り</h4><p>ロール一覧、ロール詳細画面にアクセスできるようになります。<br></p><h4 id="ha2cae467de">作成</h4><p>ロールの作成ができるようになります。<br></p><h4 id="h962c7e628e">編集</h4><p>各ロールの権限内容を変更できるようになります。<br>※管理者ロールのみ固定ロールとなりますので、変更はできません。<br></p><h4 id="h419eb04cda">削除</h4><p>ロールを削除できるようになります。<br>※削除対象ロールにメンバーが紐づいている場合は削除できません。<br></p><h2 id="h86054d6ff8">お支払い設定</h2><h4 id="h853e877289">読み取り</h4><p>お支払い設定画面にアクセスできるようになります。<br>選択中のプラン、登録済みのクレジットカード情報、次回お支払い日などをご確認いただけます。<br></p><h4 id="h962c7e628e">編集</h4><p>プラン変更、クレジットカード変更が可能になります。<br></p><h2 id="h71a8f1fd78">APIキー設定</h2><h4 id="h853e877289">読み取り</h4><p>APIキー設定画面にアクセスできるようになります。<br></p><h4 id="h962c7e628e">編集</h4><p>こちらはロール設定から変更はできませんが、管理者ロールのみAPIキーの作成 / 編集は可能となります。<br></p><h2 id="hf485b2462e">利用量確認</h2><h4 id="h853e877289">読み取り</h4><p>データ転送量確認画面、APIリクエスト数確認画面にアクセスできるようになります。<br></p><h2 id="h700b917b86">レビュー申請</h2><h4 id="h26f2daf862">読み取り（すべてのレビュー申請）</h4><p>すべてのレビュー申請を閲覧することができます。<br></p><h4 id="he192ae84a2">読み取り（自分が作成したレビュー申請のみ）</h4><p>自分が申請したレビューのみ閲覧することができます。<br></p><h4 id="ha2cae467de">作成</h4><p>レビュー申請をすることができます。<br></p><h4 id="he839e5eebb">編集（すべて）</h4><p>レビューの承認（コンテンツ公開）、終了、再申請、コメント投稿、コメント削除（すべて）、レビュータイトル・説明の編集が可能です。<br></p><h4 id="h05686b91fd">編集（編集のみ）</h4><p>終了、再申請、コメント投稿、コメント削除（自分のコメントのみ）、レビュータイトル・説明の編集が可能です。<br></p><h4 id="hfdb20219e3">編集（なし）</h4><p>レビューに関して編集が一切できません。<br></p><h2 id="hb76587122e">メディア</h2><h4 id="h382e3e9372">読み取り（すべてのメディア）</h4><p>すべてのメディア（画像・ファイル）を閲覧することができます。<br></p><h4 id="h3e5b68345b">読み取り（このロールのメンバーが作成したメディアのみ）</h4><p>同一ロールを割り当てられたユーザーのみメディアを閲覧することができます。<br></p><h4 id="hd7a1d89685">読み取り（自分がアップロードしたメディアのみ）</h4><p>自分でアップロードしたメディアのみ閲覧することができます。<br></p><h4 id="h5ccbebcd40">読み取り（なし）</h4><p>メディアを一切閲覧することができません。<br>リッチメディアフィールドからの画像選択や、画像 / ファイルフィールドにおける画像選択もできなくなります。<br></p><h4 id="ha2cae467de">作成</h4><p>メディアのアップロードができるようになります。<br></p><h4 id="h962c7e628e">編集</h4><p>同名ファイルのアップロードによるファイルの上書きができるようになります。<br></p><h4 id="h419eb04cda">削除</h4><p>メディアの削除ができるようになります。<br></p><h2 id="h78df02fd38">API</h2><h4 id="h853e877289">読み取り</h4><p>左メニューのコンテンツ（API）の欄に該当APIが表示されるようになります。<br></p><h4 id="ha2cae467de">作成</h4><p>APIの作成ができるようになります。<br></p><h4 id="h962c7e628e">編集</h4><p>API設定全般とカスタムフィールドの作成 / 編集 / 削除が可能になります。<br></p><h4 id="h419eb04cda">削除</h4><p>APIの削除ができるようになります。<br></p><h2 id="h1480a3aa00">コンテンツ</h2><h4 id="hd137ad904c">読み取り（すべてのコンテンツ）</h4><p>すべてのコンテンツを閲覧することができます。<br></p><h4 id="hf5b06ee606">読み取り（このロールのメンバーが作成したコンテンツのみ）</h4><p>同一ロールを割り当てられたユーザーのみコンテンツを閲覧することができます。<br>コンテンツ参照先にも同様の制限が適用されます。<br></p><h4 id="h23b38f9739">読み取り（自分が作成したコンテンツのみ）</h4><p>自分で作成したコンテンツのみ閲覧することができます。<br>コンテンツ参照先にも同様の制限が適用されます。<br></p><h4 id="h5ccbebcd40">読み取り（なし）</h4><p>コンテンツを一切閲覧することができません。<br>コンテンツ参照先にも同様の制限が適用されます。<br></p><h4 id="h449c779f68">作成（公開まで）</h4><p>コンテンツを公開状態、または下書き状態で作成することができます。<br></p><h4 id="ha291a06bbb">作成（下書きまで）</h4><p>コンテンツを下書き状態で作成することができます。公開することはできません。<br></p><h4 id="hc40df1acf1">作成（なし）</h4><p>コンテンツを作成することができません。<br></p><h4 id="hb9bfcca0da">編集（公開まで）</h4><p>コンテンツを下書き =&gt; 公開、公開 =&gt; 下書き状態に変更することができます。<br>また、公開中コンテンツにおけるcontentIdの変更や、公開予約 / 公開停止予約が可能です。<br></p><h4 id="h0b7c7cee93">編集（下書きまで）</h4><p>コンテンツを下書き保存することができます。<br>公開中のコンテンツを「公開中かつ下書き中」状態に変えることも可能です。<br>また、下書き中コンテンツにおけるcontentIdの変更ができます。<br></p><h4 id="hfdb20219e3">編集（なし）</h4><p>コンテンツの編集ができません。<br></p><h4 id="h419eb04cda">削除</h4><p>コンテンツを削除することができます。<br></p><h2 id="hd70d008d6e">開発者メニュー</h2><h4 id="h853e877289">読み取り</h4><p>開発者用の設定を非表示にすることができます。<br></p><ul><li>コンテンツ管理の上部メニューの「APIリファレンス」「API設定」「カスタムフィールド」が消える</li><li>APIプレビュー、GET/POST表示が消える</li></ul><p><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms-docs/media/roles-02.png" alt=""><br></p><h1 id="hd0743dabb6">デフォルト権限と個別権限</h1><p><strong>デフォルト権限はサービス単位にかけられる権限</strong>で、全てのAPI / コンテンツに対して制限が適用されます。<br>サービス全体で一括して権限設定を行いたい場合に有効です。<br><br>一方、<strong>個別権限はAPI単位にかけられる権限</strong>で、デフォルト権限を上書きすることができます。<br>個別権限では下記の項目を設定することができます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/6c472d94290344528b3ebec273ebe832/roles-image-new-2.png" alt=""><br></p><h1 id="h61db3fef7b">権限の優先順位</h1><p>1メンバーに対して複数のロールを設定可能です。<br>メンバーに対するロールの紐付けはメンバー詳細画面から行うことができます。<br><br>設定した複数のロール同士で権限が異なる場合、より権限が広い方が優先されます。</p>

権限管理

<h1 id="hfd0321cf63">レビュー機能</h1><p>コンテンツ公開の際にレビュー申請を出すことができます。<br>複数人でのコンテンツ運用で役立つ機能です。Hobbyプランから使用できます。<br><br></p><h1 id="h7ea7b4eda5">レビュー申請を依頼する</h1><p>レビュー申請を出すには、コンテンツ編集画面のレビュー申請をクリックします。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/6d3d00646b2c420bab6755c706913edb/review-01.png" alt=""><br><br>クリックすると、レビュー作成画面に遷移します。</p><ul><li>タイトル</li><li>説明</li></ul><p>を入力することができます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/cea2acdf24db48ac994ed562c8096ad3/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-03-18%2018.10.34.png" alt=""><br></p><h1 id="h3083802a80">レビューをする</h1><p><br>レビュー申請を上記の手順ですると、レビュー画面が作成されます。<br>この画面ではレビューに対して、</p><ul><li>コメント</li><li>レビュアーの指定</li><li>公開予約日時の設定</li></ul><p>などをすることができます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/36ff97ac80164a04a992bbf2c5c1257b/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-03-18%2018.10.58.png" alt=""><br></p><h2 id="h7ef4f8e4ad">コメントをする</h2><p>下のコメント欄に入力してコメントをすることができます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/ae79238992c7424cb3e7fd9d5394991c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2022-03-18_18_10_58.png" alt=""><br><br>コメントでコミュニケーションを取ることができます。コメントを送信すると登録しているメールに通知がされます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/f8df08122a8c43fc87049e0ef7d70db4/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-03-18%2018.11.55.png" alt=""><br></p><h2 id="had2e2f29b8">レビュアーの指定</h2><p><br>画面右上の「レビュアー」をクリックすることでレビュアーを指定することができます。<br>複数人の指定も可能です。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/221df922a9aa4eb09e0be27a9142c38d/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2022-03-18_18_10_58.png" alt=""><br></p><h2 id="h1ad77ddf93">公開予約日時設定</h2><p>公開予約日時設定はレビュアーの下にある「公開予約日時」をクリックして設定できます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/82911fe102d84f1596f3df10d61677e7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2022-03-18_18_10_58.png" alt=""><br><br>クリックすると公開予約日時を設定するポップアップが表示されるので、</p><ul><li>公開予約日時</li><li>公開停止予約日時</li></ul><p>を設定することができます。その時間になると自動的にコンテンツを公開や公開停止できる機能です。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/c80c124b023143bd9e1bb507d5ceb089/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-03-18%2018.11.21.png" alt=""><br><br>公開予約日時を設定して、レビューが完了したら右上の「公開予約」をクリックして公開準備は完了です。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/2efdf1b25ebe4e69a04f8b664f12a710/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-03-18%2018.11.33.png" alt=""><br></p><h1 id="he13c0b0acd">レビュー管理</h1><p>レビュー管理は管理画面のサイドバーの「レビュー」項目をクリックします<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/1d877a8627e24406812721777737d7a0/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2022-03-22_11_52_17.png" alt=""><br><br>レビュー管理画面では「申請中」と「終了済み」のレビューの一覧を確認することができます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/0523ce7c25eb42908950a1b9036b2d72/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-03-22%2011.52.42.png" alt=""><br><br></p>

レビュー管理

<p>カスタムフィールドはAPIスキーマで選択可能なフィールドをベースに、複数のフィールドを組み合わせたり、レイアウトを調整できる機能です。<br></p><h1 id="hc7ff40effa">作成方法</h1><p>カスタムフィールドはAPIごとに作成することが可能です。<br>API選択時の画面右上にある「カスタムフィールド」リンクをクリックするとカスタムフィールドの一覧画面に遷移します。<br>その後、追加ボタンからカスタムフィールドの作成画面に遷移することができます。<br><br>ここではメタ情報をまとめたカスタムフィールドを作成する例を紹介します。<br><br>まずはカスタムフィールド名とカスタムフィールドIDを設定します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/751cfec7c3394eaf8303f55930b3cce0/CleanShot%202022-04-27%20at%2013.38.53%402x.png" alt=""><br><br>次にカスタムフィールド内における必要なスキーマ設計を行います。<br>今回はメタ情報として、タイトル / 概要 / OGP画像 の3つを用意します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/a0f340333d624bb68deed538f91e958e/CleanShot%202022-04-27%20at%2013.39.56%402x.png" alt=""><br><br>最後にレイアウトを指定します。<br>1カラム or 2カラムの選択ができ、各入力フォームの位置をドラッグ＆ドロップで変更できます。<br>今回は下記のようにタイトルと概要を左カラム、OGP画像を右カラムに配置します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/390d6b2f28664cebb94234a4b52bf237/CleanShot%202022-04-27%20at%2013.40.22%402x.png" alt=""><br><br>以上でカスタムフィールドの作成は完了です。<br>作成後は一覧画面に表示されます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/eeee1f8fdfaf4d28b043eb106e22c872/CleanShot%202022-04-27%20at%2013.40.56%402x.png" alt=""></p><h1 id="h2d1e3caed1">カスタムフィールドの利用</h1><p>作成したカスタムフィールドを利用するには「API設定 &gt; APIスキーマ」に移動します。<br>フィールドの種類から「カスタム」を選択します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/d09449e131634f0d8c9b6537f07d77cc/CleanShot%202022-04-27%20at%2013.41.38%402x.png" alt=""><br><br>「カスタム」を選択するとセレクトボックスが表示されるので、先ほど作成した「メタ情報」のカスタムフィールドを選択します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/ebdc98f9605c408596b2d0fd28d1158e/CleanShot%202022-04-27%20at%2013.42.18%402x.png" alt=""><br><br>最終的に下記のようなスキーマ設定となりました。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/f1b588b9291d471db55fe5c5cb46703a/CleanShot%202022-04-27%20at%2013.42.46%402x.png" alt=""><br><br>スキーマの変更を保存して、カスタムフィールドの設定は完了です。<br>コンテンツ編集画面に遷移すると、次のような入力画面が表示されます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/a598760c973b491a9507fe60c2ea7bbc/CleanShot%202022-04-27%20at%2013.43.48%402x.png" alt=""><br><br>メタ情報というグループがあり、その中に タイトル / 概要 / OGP画像 が指定したレイアウトで表示されます。<br></p><h1 id="hbb962924de">APIのレスポンス</h1><p>カスタムフィールドを利用した場合のレスポンスはオブジェクト形式で返却されます。<br>先ほどのメタ情報の例では下記のようなレスポンスとなります。<br>値をグルーピングして返せるという点がメリットです。<br></p><pre><code>{
    "id": "l1oc8rsy5",
    "createdAt": "2021-10-22T06:24:21.566Z",
    "updatedAt": "2021-10-22T06:25:03.283Z",
    "publishedAt": "2021-10-22T06:25:03.283Z",
    "revisedAt": "2021-10-22T06:25:03.283Z",
    "title": "カスタムフィールドのテスト",
    "body": "&lt;h1 id=\"h1c1c9233e6\"&gt;見出し&lt;/h1&gt;&lt;ul&gt;&lt;li&gt;リスト1&lt;/li&gt;&lt;li&gt;リスト2&lt;/li&gt;&lt;/ul&gt;",
    "meta": {
        "fieldId": "meta",
        "title": "メタ情報タイトル",
        "description": "メタ情報概要",
        "image": {
            "url": "https://images.microcms-assets.io/assets/069e5119630943a984ded0f5b336970c/0eff33b5c6b5429e82393a448252be1b/test.png",
            "height": 434,
            "width": 600
        }
    }
}</code></pre>

カスタムフィールド

<p>繰り返しフィールドはカスタムフィールドを複数選択し、好きな順序で入力を繰り返すことのできるフィールドです。<br>入力したデータは配列として返却されるので、フロントエンド側で自由度の高いデザインをすることが可能です。<br><br>繰り返しフィールドを利用するためには、事前にカスタムフィールドを作成しておく必要があります。<br><br>カスタムフィールドの作成についてはこちらをご覧ください。</p>

<h1 id="h6f5d759162">繰り返しフィールドの設定</h1><p>以下のようなカスタムフィールドが作成されている前提で、設定方法を紹介します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/55aea81793d54878b1a458c467851761/repeat-field-01.png" alt=""><br><br><span style="color:#2b2c30">次にこれらのカスタムフィールドを使って繰り返しフィールドを設定するために、API設定 &gt; APIスキーマ に移動します。</span><br><span style="color:#2b2c30">ここで「種類」のところに繰り返しフィールドがあるので選択します。</span><br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/66bb98f3bb6a462f894d7e9d6481aa11/repeat-field-02.png" alt=""><br><br><span style="color:#2b2c30">すると、どのカスタムフィールドを利用するか聞かれるので、使用したいカスタムフィールドを選択しましょう。</span><br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/e3d0baa5e21943c591a2ded9c741074a/repeat-field-03.png" alt=""><br><br><span style="color:#2b2c30">これで繰り返しフィールドの準備はできました。</span><br></p><h1 id="hc765c1207c">入稿画面</h1><p><br><span style="color:#2b2c30">次に入稿画面に移動してみましょう。</span><br><span style="color:#2b2c30">次のような繰り返しフィールドが用意されているはずです。</span><br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/17e5dc5464fc4ec4b3fd55fb49ce573d/repeat-field-04.png" alt=""><br><br><span style="color:#2b2c30">「＋フィールドを追加」ボタンをクリックすると、どのカスタムフィールドを使用するか選択するためのポップアップが表示されます。</span><br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/626dc2096aa74428b2ba0dd1b1586664/repeat-field-05.png" alt=""><br><br><span style="color:#2b2c30">ここで「見出し」を選ぶと、見出しとして設定したカスタムフィールドが表示されます。</span><br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/1eefce4a73914a97a6447d5b82ddb9fa/repeat-field-06.png" alt=""><br><br><span style="color:#2b2c30">フィールドの上下に「＋」ボタンがあるので、こちらをクリックすることで上にも下にもフィールドを追加していくことができます。</span><br><span style="color:#2b2c30">試しに下の「＋」ボタンをクリックして、今度は「画像＋テキスト」を追加してみます。</span><br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/0629d5c7276d4f2e90f7203a3d7d9d79/repeat-field-08.png" alt=""><br><br><span style="color:#2b2c30">上記のように「見出し」「画像＋テキスト」のフィールドを並べることができました。</span><br><span style="color:#2b2c30">「画像＋テキスト」のフィールドは入力フォームが横並びになっていますが、そのあたりの設定はカスタムフィールド側で行います。</span><br>設定方法については以下のドキュメントをご覧ください。</p>

<p><span style="color:#2b2c30">また、フィールドにオンマウスすると右上に「×」ボタンが表示されるので、そちらをクリックすることでフィールドの削除も可能です。</span><br><span style="color:#2b2c30">それでは実際に値を入力して、APIを叩いてみましょう。次のように入力してみました。</span><br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/8d66180241ee4be6bdb53fd3173e0fe6/repeat-field-07.png" alt=""><br><br><span style="color:#2b2c30">APIを叩くと次のようなレスポンスが得られます。</span><br></p><pre><code>{
    "id": "0i97uu7w5",
    "createdAt": "2022-03-18T06:43:41.069Z",
    "updatedAt": "2022-03-18T06:43:41.069Z",
    "publishedAt": "2022-03-18T06:43:41.069Z",
    "revisedAt": "2022-03-18T06:43:41.069Z",
    "title": "test",
    "mainText": [
        {
            "fieldId": "heading",
            "text": "見出しです"
        },
        {
            "fieldId": "imageText",
            "image": {
                "url": "https://images.microcms-assets.io/assets/4080bbda59134ef9876227c3d239da2d/c79128a378c24721b911c46f6ea2a03c/icon.png",
                "height": 340,
                "width": 340
            },
            "text": "&lt;h1 id=\"h4a6e27f824\"&gt;繰り返しフィールドとは&lt;/h1&gt;&lt;p&gt;カスタムフィールドを複数選択し、好きな順序で入力を繰り返すことのできるフィールドです。&lt;/p&gt;"
        }
    ]
}</code></pre><p><br><span style="color:#2b2c30">繰り返しフィールド部分は配列形式で返されており、各要素にfieldIdと入力内容が含まれています。</span></p>