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

<h2 id="hafd6467929">X-GLOBAL-DRAFT-KEY</h2><p><span style="color:#24292e">全ての下書き状態のコンテンツを一度に取得するための認証キーです。</span><br>複数の下書きコンテンツを同時に取得する必要がある場合にリクエストヘッダに値を設定して送信してください。<br>（<span style="color:#24292e">通常、下書き状態のコンテンツを取得するにはコンテンツ毎に生成されたdraftKeyを使用します。）</span></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>複数の下書き状態のコンテンツを同時に取得したい場合には認証キーである<em>X-GLOBAL-DRAFT-KEY</em>をご利用ください。</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><p><br></p><h2 id="ha8abec0b2f">q</h2><p><span style="color:#24292e">コンテンツの全文検索を行います。</span>検索対象となるフィールドは「テキストフィールド」「テキストエリア」「リッチエディタ」です。<br>日本語などのマルチバイト文字列の検索を行う際はURLエンコードして値を渡す必要がありますのでご注意ください。<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="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>）<br></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>なおコンテンツ参照については単数の場合は<em>[equals]</em>（例：<em>category[equals]uN28Folyn</em>）、複数の場合は<em>[contains]</em>のみが利用可能です。（例：<em>tags[contains]oJIZmiban</em>）<br>その場合は<em>{VALUE}</em>部分に対象のコンテンツの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&#x2F;11&#x2F;14以降またはタイトルが存在している記事を抽出</p><pre><code>$curl --glob &quot;https:&#x2F;&#x2F;{your-service}.microcms.io&#x2F;api&#x2F;v1&#x2F;blog?filters=category[equals]engineering[and](date[begins_with]2019-11-14[or]title[exists])&quot; -H &quot;X-API-KEY: {api-key}&quot;</code></pre><p><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>{
  &quot;id&quot;: &quot;id1&quot;,
  &quot;title&quot;: &quot;title1&quot;,
  &quot;body&quot;: &quot;body1&quot;,
  &quot;related_blog&quot;: {
    &quot;id&quot;: &quot;id2&quot;,
    &quot;title&quot;: &quot;title2&quot;,
    &quot;body&quot;: &quot;body2&quot;,
    &quot;related_blog&quot;: {
      &quot;id&quot;: &quot;id3&quot;
    }
  }
}</code></pre><p><br>例）<em>depth = 2</em>の場合</p><pre><code>{
  &quot;id&quot;: &quot;id1&quot;,
  &quot;title&quot;: &quot;title1&quot;,
  &quot;body&quot;: &quot;body1&quot;,
  &quot;related_blog&quot;: {
    &quot;id&quot;: &quot;id2&quot;,
    &quot;title&quot;: &quot;title2&quot;,
    &quot;body&quot;: &quot;body2&quot;,
    &quot;related_blog&quot;: {
      &quot;id&quot;: &quot;id3&quot;,
      &quot;title&quot;: &quot;title3&quot;,
      &quot;body&quot;: &quot;body3&quot;,
      &quot;related_blog&quot;: {
        &quot;id&quot;: &quot;id4&quot;
      }
    }
  }
}</code></pre><p><br></p>

GET /api/v1/{endpoint}

<p>リスト型APIにおいて、idで指定したコンテンツを取得できるAPIです。<br></p><h1 id="h91d3988597">リクエストヘッダー</h1><h2 id="h8d67b5abc5">X-API-KEY</h2><p>GET APIリクエストの際に必要な認証キーです。リクエストヘッダーに含めて送信してください。</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>複数の下書き状態のコンテンツを同時に取得したい場合には認証キーである<em>X-GLOBAL-DRAFT-KEY</em>をご利用ください。<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>{
  &quot;id&quot;: &quot;id1&quot;,
  &quot;title&quot;: &quot;title1&quot;,
  &quot;body&quot;: &quot;body1&quot;,
  &quot;related_blog&quot;: {
    &quot;id&quot;: &quot;id2&quot;,
    &quot;title&quot;: &quot;title2&quot;,
    &quot;body&quot;: &quot;body2&quot;,
    &quot;related_blog&quot;: {
      &quot;id&quot;: &quot;id3&quot;
    }
  }
}</code></pre><p><br>例）<em>depth = 2</em>の場合</p><pre><code>{
  &quot;id&quot;: &quot;id1&quot;,
  &quot;title&quot;: &quot;title1&quot;,
  &quot;body&quot;: &quot;body1&quot;,
  &quot;related_blog&quot;: {
    &quot;id&quot;: &quot;id2&quot;,
    &quot;title&quot;: &quot;title2&quot;,
    &quot;body&quot;: &quot;body2&quot;,
    &quot;related_blog&quot;: {
      &quot;id&quot;: &quot;id3&quot;,
      &quot;title&quot;: &quot;title3&quot;,
      &quot;body&quot;: &quot;body3&quot;,
      &quot;related_blog&quot;: {
        &quot;id&quot;: &quot;id4&quot;
      }
    }
  }
}</code></pre><p><br></p>

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

<p>POST APIを用いることで、コンテンツの入稿をAPI経由で行うことができます。<br><a href="https://microcms.io/pricing" target="_blank">プラン</a>によってPOST APIのリクエスト上限数は異なります。<br></p><h1 id="h91d3988597">リクエストヘッダー</h1><h2 id="h0f55d7d60a">X-WRITE-API-KEY</h2><p>POST, PUT, PATCH, DELETE APIリクエストの際に必要な認証キーです。<br>リクエストヘッダーに含めて送信してください。<br>未使用の場合は削除しておくことを推奨します。</p>

<h2 id="h82d2472f5c">Content-Type</h2><p>送信するデータの形式を指定します。<br>microCMSではJSON形式のデータのみ扱っているため、<em>application&#x2F;json</em>と指定してください。<br></p><h1 id="h44fdca3bb7">リクエストボディ</h1><p>APIスキーマに沿って送信したい内容のJSONを用意し、文字列として渡してください。<br>例：</p><pre><code>{&quot;title&quot;:&quot;bodyサンプル&quot;,&quot;publishedAt&quot;:&quot;2020-04-23T14:32:38.163Z&quot;}</code></pre><p>各フィールドにおける値の指定方法は下記の通りです。<br></p><h3 id="h6165104509">テキストフィールド</h3><p>任意の文字列を指定してください。<br>（例：&quot;テキスト1&quot;）<br></p><h3 id="h2289ee5a1d">テキストエリア、リッチエディタ</h3><p>改行コードを用いることで複数行の文字列を指定できます。<br>（例：&quot;複数行のテキストを入力\n複数行のテキストを入力&quot;）<br></p><h3 id="h85a0f187d4">画像、ファイル</h3><p>非対応です。指定しても空になります。<br></p><h3 id="h1e35956891">日時</h3><p>ISO 形式 (ISO 8601) の文字列で指定してください。<br>（例：&quot;2020-04-23T14:32:38.163Z&quot;）<br></p><h3 id="hcd3ae79fbe">数字</h3><p>数字を指定してください。<br>（例：123）<br></p><h3 id="hac16e128af">真偽値</h3><p>真偽値を指定してください。<br>（例：true）<br></p><h3 id="h9c184228ff">コンテンツ参照</h3><p>参照先コンテンツのcontentIdを指定してください。<br>（例：&quot;参照先id&quot;）<br></p><h3 id="h909b716ba0">コンテンツ複数参照</h3><p>参照先コンテンツのcontentIdを配列で指定してください。<br>（例：[&quot;参照先id1&quot;,&quot;参照先id2&quot;]）<br></p><h3 id="h4ad852ed2c">カスタムフィールド</h3><p>対象フィールド内容をオブジェクト形式で指定してください。<br>（例：{ &quot;fieldId&quot;: &quot;YOUR_FIELD_ID&quot;, &quot;some_value&quot;: &quot;&quot; }）<br></p><h3 id="had86c3779e">繰り返しフィールド</h3><p>対象となるデータ内容をカスタムフィールドのリスト形式で指定してください。<br>（例：[ { &quot;fieldId&quot;: &quot;YOUR_FIRST_FIELD_ID&quot;, &quot;some_text_value&quot;: &quot;&quot; }, { &quot;fieldId&quot;: &quot;YOUR_SECOND_FIELD_ID&quot;, &quot;some_int_value&quot;: 10 } ]）<br></p><h3 id="hf54fefe404">インラインフレーム</h3><p>対象となるデータ内容（message部分）をオブジェクト形式で指定してください。詳しい仕様はドキュメントをご確認ください。<br>（例：{ &quot;id&quot;: &quot;some-id&quot;, &quot;title&quot;: &quot;some-title&quot;, &quot;description&quot;: &quot;some-description&quot;, &quot;imageUrl&quot;: &quot;some-image-url&quot;, &quot;updatedAt&quot;: &quot;some-updated-at&quot;, &quot;data&quot;: { &quot;id&quot;: &quot;123&quot; } }）</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>によってPUT APIのリクエスト上限数は異なります。<br></p><h1 id="h91d3988597">リクエストヘッダー</h1><h2 id="h0f55d7d60a">X-WRITE-API-KEY</h2><p>POST, PUT, PATCH, DELETE APIリクエストの際に必要な認証キーです。<br>リクエストヘッダーに含めて送信してください。<br>未使用の場合は削除しておくことを推奨します。</p>

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

<p>PATCH APIを用いることで、コンテンツの編集をAPI経由で行うことができます。<br><a href="https://microcms.io/pricing" target="_blank" rel="noopener noreferrer">プラン</a>によってPATCH APIのリクエスト上限数は異なります。<br></p><h1 id="h91d3988597">リクエストヘッダー</h1><h2 id="h0f55d7d60a">X-WRITE-API-KEY</h2><p>POST, PUT, PATCH, DELETE APIリクエストの際に必要な認証キーです。<br>リクエストヘッダーに含めて送信してください。<br>未使用の場合は削除しておくことを推奨します。</p>

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

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

<p>PATCH APIを用いることで、コンテンツの削除をAPI経由で行うことができます。<br><a href="https://microcms.io/pricing" target="_blank" rel="noopener noreferrer">プラン</a>によってDELETE APIのリクエスト上限数は異なります。<br></p><h1 id="h91d3988597">リクエストヘッダー</h1><h2 id="h0f55d7d60a">X-WRITE-API-KEY</h2><p>POST, PUT, PATCH, DELETE APIリクエストの際に必要な認証キーです。<br>リクエストヘッダーに含めて送信してください。<br>未使用の場合は削除しておくことを推奨します。</p>

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

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

<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">microCMS&#x306E;&#x59CB;&#x3081;&#x65B9;</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="/docs/manual/signup">&#x30A2;&#x30AB;&#x30A6;&#x30F3;&#x30C8;&#x767B;&#x9332;</a></li><li><a href="/docs/manual/signin">&#x30ED;&#x30B0;&#x30A4;&#x30F3;</a></li><li><a href="/docs/manual/create-service">&#x30B5;&#x30FC;&#x30D3;&#x30B9;&#x306E;&#x4F5C;&#x6210;</a></li><li><a href="/docs/manual/create-api">API&#x306E;&#x4F5C;&#x6210;</a></li><li><a href="/docs/manual/create-content">&#x30B3;&#x30F3;&#x30C6;&#x30F3;&#x30C4;&#x306E;&#x4F5C;&#x6210;</a></li><li><a href="/docs/manual/api-request">API&#x306E;&#x547C;&#x3073;&#x51FA;&#x3057;</a></li><li><a href="/docs/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">アカウント登録画面</a>から登録を行ってください。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms-docs/media/signup-01.png" alt><br><br>パスワードの条件は以下になります。</p><ul><li>半角英数</li><li>8文字以上</li><li>大文字、小文字、数字を含む</li></ul><p><br>登録するボタンをクリック後は、入力したメールアドレスに2段階認証コードが送信されます。<br>次の画面で入力してください。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms-docs/media/signup-02.png" alt><br><br>無事入力が完了すれば、アカウント登録は完了です。</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>

画像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=0</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=&quot;https:&#x2F;&#x2F;xxxxxx&#x2F;sample.png?h=300&amp;w=500&amp;dpr=1 1x,
        https:&#x2F;&#x2F;xxxxxx&#x2F;sample.png?h=300&amp;w=500&amp;dpr=2 2x,
        https:&#x2F;&#x2F;xxxxxx&#x2F;sample.png?h=300&amp;w=500&amp;dpr=3 3x&quot;
    src=&quot;https:&#x2F;&#x2F;xxxxxx&#x2F;sample.png?h=300&amp;w=500&amp;dpr=1&quot;
&#x2F;&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>{
  &quot;Content-Type&quot;: &quot;image&#x2F;png&quot;,
  &quot;Output&quot;: {},
  &quot;ColorModel&quot;: &quot;RGB&quot;,
  &quot;Content-Length&quot;: &quot;104152&quot;,
  &quot;Depth&quot;: 8,
  &quot;PNG&quot;: {
    &quot;InterlaceType&quot;: 0,
    &quot;sRGBIntent&quot;: 0,
    &quot;Gamma&quot;: 0.45455,
    &quot;Chromaticities&quot;: [
      0.3127,
      0.329,
      0.64,
      0.33,
      0.3,
      0.6,
      0.15,
      0.06
    ]
  },
  &quot;PixelHeight&quot;: 300,
  &quot;PixelWidth&quot;: 600,
  &quot;ProfileName&quot;: &quot;sRGB IEC61966-2.1&quot;
} </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>はそれぞれ赤&#x2F;緑&#x2F;青を表す値です。<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>例: <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>はそれぞれ赤&#x2F;緑&#x2F;青を表す値です。<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>はそれぞれ赤&#x2F;緑&#x2F;青を表す値です。<br><br>例）<em>?border=10,55ff0000</em></p>

枠線

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

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

<p><a href="https://app.microcms.io/signin" target="_blank">ログイン画面</a>からログインすることができます。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms-docs/media/signin-01.png" alt><br><br>メールアドレス、パスワードを入力してログインしてください。<br></p><h1 id="h03e644dc44">パスワードを忘れてしまった場合</h1><p><a href="https://app.microcms-dev.net/forgot-password" target="_blank">パスワード再設定申請画面</a>にアクセスしてください。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms-docs/media/signin-02.png" alt><br><br>入力したメールアドレス宛てにパスワード再設定用の認証コードが送られます。<br>次の画面で認証コードを入力すれば再設定は完了です。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms-docs/media/signin-03.png" alt></p>

<p>アカウント登録、ログイン後はサービスを作成しましょう。<br><br>サービスはmicroCMSの中で最上位の概念です。<br>サービス &gt; API &gt; コンテンツという階層構造になっています。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms-docs/media/create-service-01.png" alt><br><br>まずはサービス情報の入力です。<br>サービス名にはmicroCMSの導入を考えているプロダクト名や組織名を入力すると良いでしょう。<br>サービスIDは管理画面のURL、APIのエンドポイントのサブドメインに設定される値です。<br>サービスIDは一度設定すると変更ができないので慎重に決めましょう。（どうしても変更しなければならない場合はお問い合わせください）<br><br>例として、架空の株式会社マイクロというサービスを作ってみます。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms-docs/media/create-service-02.png" alt><br><br>次の画面ではサービス画像を選択することができます。<br>サービス画像を設定すると管理画面の一番左の列に表示されます。<br>画面右下のボタンをクリックすれば、画像設定をスキップすることもできます。（後からでも設定が可能です）<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 のサブドメインとしてアクセスできるようになります。</p>

サービスの作成

<p>APIの作成について解説していきます。<br>APIはサービスごとに複数作成することができます。<br>（<a href="https://microcms.io/pricing" target="_blank" rel="noopener noreferrer">プラン</a>ごとに作成できるAPI数の上限は異なります。）<br><br>まずは基本情報の入力です。<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名 &#x2F; エンドポイントの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: &#x27;おはよう&#x27; }, { message: &#x27;こんにちは&#x27; }, { message: &#x27;こんばんは&#x27; } ]</code></pre><h4 id="hcf83e1357e"><br></h4><h2 id="ha3b9fbc8d9">オブジェクト形式</h2><p>単一のコンテンツを取り扱います。<br>設定情報や単体ページの情報などの単一コンテンツの管理に適しています。<br>APIでは下記のようにオブジェクトデータを取得できます。</p><pre><code>{ title: &#x27;プロフィール&#x27;, profile: &#x27;ヘッドレスCMSを勉強しています&#x27; }</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><br>以上でAPIの作成は完了です。</p>

APIの作成

<p>コンテンツの作成について、<a href="/docs/manual/create-api" target="_blank">APIの作成</a>で用意したAPIを元に解説していきます。<br></p><h1 id="h95b40124ab">APIがリスト形式の場合</h1><p>まずはAPIをリスト形式として作成した場合について解説します。<br>画面上部のコンテンツ管理タブをクリックするとコンテンツ一覧画面が表示されます。<br>画面右上の追加ボタンをクリックすることでコンテンツ作成画面に遷移できます。<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-content-01.png" alt><br><br>内容を入力し、右上の公開ボタンにある三角マークをクリックすると、公開または下書き保存のどちらかを行うことができます。<br>公開を選択し、クリックするとコンテンツは公開され、APIから取得できるようになります。<br></p><h1 id="h2dd72095e8">APIがオブジェクト形式の場合</h1><p>APIをオブジェクト形式として作成した場合は、単一コンテンツのみが入稿可能となります。<br>よって、画面上部のコンテンツ管理タブをクリックしてもコンテンツ一覧画面には遷移せず、最初からコンテンツ作成&#x2F;編集画面に遷移します。<br><br>コンテンツ作成画面における操作はリスト形式の際と同じです。<br>ただし、オブジェクト形式の場合は単一コンテンツのため、コンテンツの削除ボタンが用意されていません。<br>コンテンツを削除したい場合はAPI設定からAPIごと削除してください。</p>

コンテンツの作成

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

<p>APIを呼び出すためには<strong>API-KEYが必要です</strong>。<br>API-KEYはサービス設定 &gt; API-KEYから確認可能です。<br>（サービス設定画面には、画面左上のサービス名をクリックすることで遷移することができます。）<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms-docs/media/api-request-03.png" alt><br><br>また、microCMSには管理画面上で簡単にAPIを試すことができる「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/api-request-01.png" alt><br><br>既にデータ取得リクエストの準備は整っています。<br>画面内の「取得」ボタンを押してみましょう。<br>実際にブラウザからAPIリクエストが行われ、次のようなJSONレスポンスが表示されます。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms-docs/media/api-request-02.png" alt><br><br>また、画面内にはAPIを叩くためのcurlコマンドも表示されています。<br>こちらで直接データを取得することも可能です。<br></p><pre><code>$ curl &quot;https:&#x2F;&#x2F;micro.microcms.io&#x2F;api&#x2F;v1&#x2F;news&#x2F;FwVfA_GeL&quot; -H &quot;X-API-KEY: 1598164e-2d58-488c-a4af-c51bd7d131a5&quot;</code></pre><p><br>そのほかAPI仕様の詳細については<a href="/docs/content-api/get-content">コンテンツAPIリファレンス</a>をご覧ください。</p>

<h1 id="hb89ab674d4">コンテンツ一覧の取得</h1><p>リスト形式のAPIでは次のエンドポイントを利用することで、コンテンツ一覧の取得を行うことも可能です。<br><br><em>GET &#x2F;api&#x2F;v1&#x2F;{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&#x2F;JavaScript を使って表示してみます。<br>実際にはAPIさえ呼び出せればデータ表示をするプラットフォームは何でも構いません。<br><br>こちらが今回作成した index.html です。<br></p><pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ja&quot;&gt;
  &lt;body&gt;
    &lt;main&gt;
      &lt;h1 id=&quot;title&quot;&gt;&lt;&#x2F;h1&gt;
      &lt;div id=&quot;body&quot;&gt;&lt;&#x2F;div&gt;
    &lt;&#x2F;main&gt;
    &lt;script&gt;
      fetch(&quot;https:&#x2F;&#x2F;micro.microcms.io&#x2F;api&#x2F;v1&#x2F;news&#x2F;0ik_dv015&quot;, {
        headers: {
          &quot;X-API-KEY&quot;: &quot;1598164e-2d58-488c-a4af-c51bd7d131a5&quot;
        }
      })
        .then(res =&gt; res.json())
        .then(json =&gt; {
          document.getElementById(&quot;title&quot;).innerHTML = json.title;
          document.getElementById(&quot;body&quot;).innerHTML = json.body;
        })
   &lt;&#x2F;script&gt;
  &lt;&#x2F;body&gt;
&lt;&#x2F;html&gt;</code></pre><p><br>Fetch APIを使ってmicroCMSからデータを取得し、そのデータを基にDOMを書き換えています。<br>（何らかのテンプレートエンジン&#x2F;フレームワークを用いることで、より効率的な実装も可能です）<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>小 &#x2F; 標準 &#x2F; 大 &#x2F; 最大 から選択可能です。<br>それぞれ、<em>font-size</em>が 0.75em &#x2F; 1em &#x2F; 1.5em &#x2F; 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>左寄せ &#x2F; 中央寄せ &#x2F; 右寄せ &#x2F; <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:&#x2F;&#x2F;</em>または<em>http:&#x2F;&#x2F;</em>始まりの場合は外部リンクとなり、<em>&#x2F;hoge</em>などのパス入力の場合は内部リンクとなります。<br></p><h1 id="h7b3c950f25">画像</h1><p>画像のアップロード、選択ができます。<br>画像のアップロードはメディア画面から行うことも可能です。<br>リッチエディタ内に入力された画像をクリックすることで、画像の width &#x2F; height &#x2F; 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>その他の対応サービスや対応スキーマURLは<a href="https://oembed.com/" target="_blank" rel="noopener noreferrer">こちら</a>をご参照ください。<br>（ただし、情報がアップデートされておらず未対応の場合もございます）<br></p><h1 id="hdb2c2bf549">マークダウン記法</h1><p>リッチエディタ内ではマークダウン記法も可能です。<br>下記の記法に対応しております。</p><pre><code># 見出し
**太字**
*イタリック*
***太字イタリック***
~~打ち消し線~~
- リスト
1. 番号付きリスト
[]() リンク
&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/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms-docs/media/roles-01.png" alt><br><br>以下で各種権限の詳細を解説します。<br></p><h2 id="h21ed721515">メンバー設定</h2><h4 id="h853e877289">読み取り</h4><p>メンバー一覧、メンバー詳細画面にアクセスできるようになります。<br>左メニューにもサービスに所属しているメンバー数が表示されます。<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キーの作成 &#x2F; 編集は可能となります。<br></p><h2 id="hf485b2462e">利用量確認</h2><h4 id="h853e877289">読み取り</h4><p>データ転送量確認画面、APIリクエスト数確認画面にアクセスできるようになります。<br></p><h2 id="h700b917b86">レビュー申請</h2><h4 id="h6761d7dd5b">読み取り（すべて）</h4><p>すべてのレビュー申請を閲覧することができます。<br></p><h4 id="h4a047e7f10">読み取り（自作成のみ）</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="h6761d7dd5b">読み取り（すべて）</h4><p>すべてのメディア（画像・ファイル）を閲覧することができます。<br></p><h4 id="h97543afbf1">読み取り（自アップロードのみ）</h4><p>自分でアップロードしたメディアのみ閲覧することができます。<br></p><h4 id="h5ccbebcd40">読み取り（なし）</h4><p>メディアを一切閲覧することができません。<br>リッチメディアフィールドからの画像選択や、画像 &#x2F; ファイルフィールドにおける画像選択もできなくなります。<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設定全般とカスタムフィールドの作成 &#x2F; 編集 &#x2F; 削除が可能になります。<br></p><h4 id="h419eb04cda">削除</h4><p>APIの削除ができるようになります。<br></p><h2 id="h1480a3aa00">コンテンツ</h2><h4 id="h6761d7dd5b">読み取り（すべて）</h4><p>すべてのコンテンツを閲覧することができます。<br></p><h4 id="h4a047e7f10">読み取り（自作成のみ）</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の変更や、公開予約 &#x2F; 公開停止予約が可能です。<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&#x2F;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 &#x2F; コンテンツに対して制限が適用されます。<br>サービス全体で一括して権限設定を行いたい場合に有効です。<br><br>一方、<strong>個別権限はAPI単位にかけられる権限</strong>で、デフォルト権限を上書きすることができます。<br>個別権限では下記の項目を設定することができます。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms-docs/media/roles-03.png" alt><br></p><h1 id="h61db3fef7b">権限の優先順位</h1><p>1メンバーに対して複数のロールを設定可能です。<br>メンバーに対するロールの紐付けはメンバー詳細画面から行うことができます。<br><br>設定した複数のロール同士で権限が異なる場合、より権限が広い方が優先されます。</p>

権限管理

<p>microCMSではインラインフレーム（iFrame）を用いて、外部データを管理画面内で選択できる機能があります。<br>（ご利用できるプランについては<a href="https://microcms.io/pricing/" target="_blank" rel="noopener noreferrer">料金表</a>の「外部データ連携」欄をご参照ください）<br></p><h1 id="h00b8af9eb7">仕様</h1><p>インラインフレームフィールドを用いて、iFrameとmicroCMS管理画面の間で<em>window.postMessage</em> APIを用いて値のやり取りを行います。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms-docs/media/iframe-field-03.png" alt><br></p><h2 id="h93adfe217e">microCMSからiFrameへの通信仕様</h2><h3 id="h9e44c21a42">①初期値の取得</h3><p>まず、インラインフレームフィールドが設定されているコンテンツ作成&#x2F;編集画面を開くと、microCMS管理画面からiFrameに対して下記のようにpostMessageを行います。</p><pre><code>{
　　id: &#x27;sfa3ff2c&#x27;,  &#x2F;&#x2F; iFrame識別子
  action: &quot;MICROCMS_GET_DEFAULT_DATA&quot;,
  message: value  &#x2F;&#x2F; 設定済みの値
}</code></pre><p><br>iFrame側はmessageイベントに対してEventListenerを設定しておくことで、上記のメッセージを受け取ることができます。<br><em>id</em>は送信時に使用するのでどこかに保持しておきましょう。<br><em>message</em>の値は初期値として利用します。（初回は<em>undefined</em>です）</p><pre><code>window.addEventListener(&#x27;message&#x27;, (e) =&gt; {
  if (
    e.isTrusted === true &amp;&amp;
    e.data.action === &#x27;MICROCMS_GET_DEFAULT_DATA&#x27;
  ) {
   &#x2F;&#x2F; idやmessageを保存する
    &#x2F;&#x2F; e.data.id: 識別子
    &#x2F;&#x2F; e.data.message: 設定済みの値
  }
});</code></pre><p><br></p><h2 id="hb330403397">iFrameからmicroCMSへの通信仕様</h2><h3 id="h7f543cc470">②データの送信</h3><p>逆に何らかのデータをiFrame側からmicroCMSの管理画面に対してPOSTしたい場合は下記のようにpostMessageを行います。</p><pre><code>window.parent.postMessage(
　　{
　　　　id: &#x27;sfa3ff2c&#x27;,  &#x2F;&#x2F; iFrame識別子
　　　　action: &#x27;MICROCMS_POST_DATA&#x27;,
　　　　message: {
      id: &#x27;some-id&#x27;,
      title: &#x27;some-title&#x27;,
      description: &#x27;some-description&#x27;,
      imageUrl: &#x27;some-image-url&#x27;,
      updatedAt: &#x27;some-updated-at&#x27;,
      data: {    &#x2F;&#x2F; APIのレスポンスとなる部分
        id: &#x27;123&#x27;
      }
　　　　}
　　},
　　&#x27;https:&#x2F;&#x2F;your-service-id.microcms.io&#x27;
);</code></pre><p><br><em>id</em>には画面ロード時にmicroCMS側から受け取ったidを指定してください。<br><em>action</em>には<em>&#x27;MICROCMS_POST_DATA&#x27;</em>と指定してください。<br><em>message</em>にはメタ情報として次の項目があります。</p><ul><li>id（String）</li><li>title（String）</li><li>description（String）</li><li>imageUrl（String: URL形式）</li><li>updatedAt（Date）</li></ul><p><br>これらは全て任意項目であり、microCMSの管理画面内で管理しやすいように設定する値です。<br>設定しておくと、コンテンツ一覧画面等で表示されます。<br><br>また、APIレスポンス用のフィールドとして<em>data</em>があります。</p><ul><li>data（型不定）</li></ul><p><br><em>data</em>に指定した値が実際にコンテンツのGET APIからiFrameフィールド用の値として返されます。<br><br>セキュアな通信を行うために、postMessageの第二引数にはmicroCMS管理画面のURLを指定します。<br></p><h3 id="h6295cee063">②&#x27;レスポンス</h3><p>postMessageにはレスポンスは存在しないのですが、データ変更が成功したかどうかを知るために擬似的なレスポンスを返します。<br>成功時には以下のようなpostMessageを受け取ることができます。</p><pre><code>{
　　id: &#x27;sfa3ff2c&#x27;,  &#x2F;&#x2F; iFrame識別子
  action: &quot;MICROCMS_POST_DATA_SUCCESS&quot;,
  message: value  &#x2F;&#x2F; 送信した値
}</code></pre><p><br>失敗時には以下のようなpostMessageが返されます。</p><pre><code>{
　　id: &#x27;sfa3ff2c&#x27;,  &#x2F;&#x2F; iFrame識別子
  action: &quot;MICROCMS_POST_DATA_FAILURE&quot;,
  error: &#x27;エラーメッセージ&#x27;
}</code></pre><p><br></p><h3 id="hddc40608fe">③スタイルの変更</h3><p>iFrameの高さは初期ロード時に決定してしまうため、iFrame内のUIが変化した際に見づらくなってしまう可能性があります。<br>そこで、iFrameから下記のようなpostMessageを行うことで、iFrame自体の<em>height</em>, <em>width</em>を変更することができます。</p><pre><code>window.parent.postMessage(
　　{
　　　　id: this.id,
　　　　action: &#x27;MICROCMS_UPDATE_STYLE&#x27;,
　　　　message: {
      height: 300,
      width: &#x27;100%&#x27;
　　　　}
　　},
　　&#x27;https:&#x2F;&#x2F;your-service-id.microcms.io&#x27;
);</code></pre><p><br></p><h2 id="h59d6ccf20c">APIからのレスポンス</h2><h3 id="h21574cda34">④レスポンスの取得</h3><p>次のようなAPIスキーマを例に挙げます。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms-docs/media/iframe-field-04.png" alt><br><br>iFrameフィールドにdataとして下記の値をセットします。<br></p><pre><code>{
    data: {
        id: &#x27;123&#x27;
    }
}</code></pre><p><br>入力された値はコンテンツのGET APIから次のように取得することができます。<br></p><pre><code>{
    &quot;id&quot;: &quot;mir1wo77g&quot;,
    &quot;createdAt&quot;: &quot;2020-07-21T14:12:14.606Z&quot;,
    &quot;updatedAt&quot;: &quot;2020-07-21T14:12:14.606Z&quot;,
    &quot;publishedAt&quot;: &quot;2020-07-21T14:12:14.606Z&quot;,
    &quot;title&quot;: &quot;タイトルのテスト&quot;,
    &quot;iframe&quot;: {
        &quot;id&quot;: &quot;123&quot;
    }
}</code></pre><p><br></p><h1 id="h4c87115483">microCMS管理画面での設定方法</h1><p>API設定 &gt; APIスキーマの種類から「インラインフレーム」を選択します。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms-docs/media/iframe-field-01.png" alt><br><br>iFrameで読み込む先のURLを入力します。<br>localhostも指定可能です。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms-docs/media/iframe-field-02.png" alt><br><br>フィールドの設定は以上で完了です。<br>コンテンツの編集画面に遷移すると、先ほど指定したURLがiFrameによって表示されます。</p>

外部データ連携（iFrameフィールド）

<p>microCMSではAPIや画像・ファイルの使用量を「<strong>データ転送量</strong>」と表現します。<br>1ヶ月あたりのデータ転送量の上限はプラン毎に定められおり、上限を超えるとご請求が発生しますのでご注意ください。<br>各プランのデータ転送量は<a href="https://microcms.io/pricing/" target="_blank" rel="noopener noreferrer">料金ページ</a>に記載されていますのでご確認ください。<br></p><h1 id="hc2f9bd415b">データ転送量を確認する</h1><p>データ転送量は管理画面より確認ができます。<br>サービスの設定画面内のメニューを洗濯すると以下のようなグラフが表示されます。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:11889c08-ec2f-4d7a-b37c-49c5982b2b47/service/microcms-docs/media/data-amount.png" alt><br><br>データ転送量は直近3ヶ月間の一日毎の値と合計値を確認できます。<br>画面の更新頻度に保証はありませんが、概ね前日分までがこちらの画面に記載されます。<br></p><h1 id="h84e5c31f7f">データ転送量として加算される操作</h1><p>データ転送量として加算される操作には以下があげられます。</p><ul><li><a href="/docs/content-api/get-list-contents">コンテンツAPI</a>を使ったjsonデータの取得</li><li>microCMSにアップロードした画像やファイルの取得（<a href="/docs/image-api/introduction">画像API</a>を使った場合も含む）</li><li>管理画面での画像の表示</li></ul><p><br></p>

<p><br></p><h1 id="h10162b75c3">データ転送量を節約する</h1><p>多くのケースで、データ転送量の多くを占めるのは<strong>画像の取得</strong>です。<br>コンテンツAPIによる1回のjsonデータの取得は通常数KBのデータ転送量であるのに対し、画像の場合は一度の取得で数MBものデータ転送量となることがあります。<br><br>例えば1MBの画像を取得するページを1ヶ月に100万回アクセスする場合、【<strong>1MB × 100万回 = 100万MB ≒1TB】</strong>でデータ転送量は約1TBとなります。<br><br>これを節約するために利用できるのが<a href="/docs/image-api/introduction">画像API</a>です。<br><br>ここに1枚の画像を用意し、microCMSにアップロードしました。<br>この画像のサイズは先ほどの例とおなじく約1MBです。<br><a href="https://images.microcms-assets.io/protected/ap-northeast-1:11889c08-ec2f-4d7a-b37c-49c5982b2b47/service/microcms-docs/media/1mb_sample.jpg" target="_blank" rel="noopener noreferrer">https://images.microcms-assets.io/protected/ap-northeast-1:11889c08-ec2f-4d7a-b37c-49c5982b2b47/service/microcms-docs/media/1mb_sample.jpg</a><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:11889c08-ec2f-4d7a-b37c-49c5982b2b47/service/microcms-docs/media/1mb_sample.jpg" alt><br><br>それでは画像APIを使ってみます。<br>今回はサイズの縮小として横幅を500ピクセル（URLに ?w=500 を付加）にしてみます。<br><a href="https://images.microcms-assets.io/protected/ap-northeast-1:11889c08-ec2f-4d7a-b37c-49c5982b2b47/service/microcms-docs/media/1mb_sample.jpg?w=200" target="_blank" rel="noopener noreferrer">https://images.microcms-assets.io/protected/ap-northeast-1:11889c08-ec2f-4d7a-b37c-49c5982b2b47/service/microcms-docs/media/1mb_sample.jpg?w=500</a><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:11889c08-ec2f-4d7a-b37c-49c5982b2b47/service/microcms-docs/media/1mb_sample.jpg?w=500&h=375" alt><br><br>たったこれだけですが前者の画像サイズは約1MBなのに対し、後者の画像サイズは約25KBと<strong>1&#x2F;40</strong>程度のサイズとなりました。<br>この画像を100万回取得した場合のデータ転送量は<strong>【25KB × 100万回 ≒ 2.5GB】</strong>と桁違いに小さくなります。<br><br>無駄なデータ転送量をかけないよう画像APIをぜひともご活用ください。</p>

データ転送量の確認方法

<p>別サービスで類似のAPIを作成する場合などのため、microCMSではAPIスキーマのエクスポート &#x2F; インポートに対応しています。<br>APIスキーマをJSONファイルとしてエクスポートし、APIの作成時にこのJSONファイルをインポートすることで手動による設定を省くことができます。<br></p><h1 id="hce5de2e41a">APIスキーマのエクスポート</h1><p>まずはエクスポート操作です。<br>APIスキーマをエクスポートしたいコンテンツを選択し、「API設定」→「APIスキーマ」を選択してください。<br><br>次に画面の下部にエクスポートメニューが表示されているのでこちらをクリックしてください。<br>エクスポート結果であるJSONファイルをダウンロードできます。</p>

<p><br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:11889c08-ec2f-4d7a-b37c-49c5982b2b47/service/microcms-docs/media/export-api-fields.png" alt></p><h1 id="hf95e7cc83a">APIスキーマのインポート</h1><p>次にインポートです。<br>インポートは先ほどダウンロードしたJSONファイルをAPIスキーマの設定時に読み込むことで行います。<br><br>下記画像の①よりAPIの作成を開始し、いくつかの項目を入力後に表示される下記の画面で②からファイルを選択してください。<br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:11889c08-ec2f-4d7a-b37c-49c5982b2b47/service/microcms-docs/media/import-api-fields.png" alt></p>

<p>コンテンツの保存後、自動でいくつかの値が付与されます。<br>自動で付与された値は管理画面で確認や変更が可能なほか、コンテンツAPIでも取得が可能です。</p><h1 id="h6f21981a23">contentId：コンテンツのid</h1><p>作成したコンテンツのidです。<br>ランダムな英小文字、数字、記号で構成されます。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:11889c08-ec2f-4d7a-b37c-49c5982b2b47/service/microcms-docs/media/content-id-in-management-screen.png" alt><br><br>contentIdは管理画面上で編集が可能です。<br>コンテンツAPIではパスを示す部分ですので、スラッグとしての利用も可能です。</p><h1 id="h8414d43a03">createdAt：コンテンツの作成日時</h1><p>コンテンツを作成した日時です。<br>初回にコンテンツを作成した日時が含まれます。</p><h1 id="h745a230a8c">updatedAt：コンテンツの更新日時</h1><p>コンテンツを更新した日時です。<br>コンテンツの更新にあたる操作やイベントには以下が含まれます。</p><ul><li>管理画面上での「公開」ボタン押下</li><li>管理画面上での「下書きボタン」押下</li><li>管理画面上での「下書きの破棄」ボタン押下</li><li>管理画面上での「下書きに戻す」ボタン押下</li><li>公開予約・予約停止による公開状態の変化時</li></ul><h1 id="h22e9748a5b">publishedAt：コンテンツの公開日時</h1><p>コンテンツを公開した日時です。<br><br>現在のmicroCMSでは、コンテンツのステータスが以下の3つのうちのいずれかとなります。</p><ul><li>公開中</li><li>下書き中</li><li>公開中かつ下書き中</li></ul><p><br>このうち、<strong>「下書き中」から「公開中」に変更された日時</strong>がpublishedAtが変更される日時となります。<br><br>公開日時は公開してある記事を一度下書きにした後、再度公開を行った場合にも値が変化します。<br>下記にいくつかのパターンと公開日時の状態を示します。<br><br></p><ol><li><strong>下書き中</strong>：公開日時は存在しない。</li><li><strong>下書き中→公開中</strong>：公開日時が付与される。</li><li><strong>下書き中→公開中→下書き中→公開中</strong>：2回目に公開したタイミングで公開日時が更新される。</li><li><strong>下書き中→公開中→公開中かつ下書き中→公開中</strong>：記事のリライトなどの想定。1回目の公開以降、下書き保存は追加されるものの常に公開状態。そのため2回目の公開時にも公開日時は更新されない。</li></ol><h1 id="h32b68db00f">revisedAt：コンテンツの改定日時</h1><p><strong>公開状態のコンテンツが更新された日時</strong>です。<br><br>上記更新日時（updatedAt）との違いとして、改定日時（revisedAt）は下書き保存時には値が更新されません。<br>そのため記事などで「更新日」の表記が必要な場合には改定日時をお使いいただけます。<br><br>管理画面における公開ボタンの押下、もしくはPOST &#x2F; PUT &#x2F; PATCHといった書き込み系APIによる公開状態の更新時に値が更新されます。</p>

コンテンツに自動付与される値

 APIスキーマのエクスポート・インポート

<p>microCMSではセキュリティに関する機能として、2段階認証を設定することができます。<br><br>2段階認証ではGoogle Authenticatorのような認証アプリが必要ですので、設定に先立ってご用意ください。<br></p><ul><li><a href="https://apps.apple.com/jp/app/google-authenticator/id388497605" target="_blank" rel="noopener noreferrer">Google Authenticator（iOS）</a></li><li><a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&amp;hl=ja&amp;gl=US" target="_blank" rel="noopener noreferrer">Google Authenticator（Android）</a></li></ul><p><br>上記のアプリをご用意いただいたら、<a href="https://app.microcms.io/profile/mfa" target="_blank" rel="noopener noreferrer">アカウントの設定画面</a>にて2段階認証の設定が可能です。</p>

<p><br>ここからは設定手順を以下に示します。<br>まずは設定画面を開き「設定する」と書かれたスイッチをONにします。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:11889c08-ec2f-4d7a-b37c-49c5982b2b47/service/microcms-docs/media/setting-mfa-before.png" alt><br><br>すると、QRコードの読み取り画面が表示されますので、Google Authenticatorなどの認証アプリを使って読み取ります。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:11889c08-ec2f-4d7a-b37c-49c5982b2b47/service/microcms-docs/media/setting-mfa-after.png" alt><br><br>うまく読み取れた場合は認証アプリにて6桁の数字が表示されますので、その数字を入力して「送信」をクリックします。<br>正しい数値が入力されていれば設定は完了し、次回以降のログインで2段階認証が求められるようになります。</p>

2段階認証の設定

<p>microCMS管理画面を安心してご利用いただくために、下記ブラウザでの閲覧を推奨しております。<br>ブラウザのバージョンは、いずれも最新版を利用してください。<br></p><h1 id="h86670169d0">PC</h1><ul><li>Google Chrome</li><li>Microsoft Edge</li><li>Firefox</li><li>Safari</li></ul><p><br></p><h1 id="h642c42ee32">スマートフォン</h1><ul><li>Google Chrome</li><li>Safari</li></ul>