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

<h1 id="hJ00qvLZWv9">クエリ</h1>URLの語尾にGETパラメータ形式で指定できます。 <h2 id="hzD1yzgExjk">draftKey</h2>下書き状態のコンテンツを取得するためのパラメータです。 コンテンツの編集画面で確認できるdraftKeyをパラメータとして追加してください。 <h2 id="hegZAoPwEAD">limit</h2>取得件数を指定します。 デフォルト値は10です。 上限値はありませんが、レスポンスサイズ（レスポンスヘッダのcontent-lengthの値）が約10MBを超えるとエラーが発生します。 そのため、大量のコンテンツの全件取得をしたい場合は下記のoffsetパラメータと組み合わせてページング処理を行ってください。 <h2 id="hRqx8MvABoY">offset</h2>何件目から取得するかを指定します。 デフォルト値は0です。 <h2 id="hpvg7XMnAo6">fields</h2>コンテンツの中で取得する要素を指定します。 fields=title,main_image,updatedAt,author.nameのようにカンマ区切りで値を記載してください。author.organization.nameのようにドットでつないでキーを指定することで参照コンテンツの要素も指定できます。fieldsが指定されていない場合は全ての要素を取得します。 <h2 id="h9w8OOmJPKB">filters</h2>公開されているコンテンツの中から取得するコンテンツを絞り込みます。 ただし下書き状態のコンテンツやリッチテキストについては絞り込みの対象外です。 利用できる条件式は以下の通りです。 <h3 id="hppOGl5YjAX">equals</h3>指定に一致したコンテンツを取得します。 （例：gender[equals]women） <h3 id="hBJ0xgOr10y">not_equals</h3>指定に一致しないコンテンツを取得します。 （例：gender[not_equals]women） <h3 id="horkMQWwwED">less_than</h3>指定より小さいコンテンツを取得します。 （例：createdAt[less_than]2019-11） <h3 id="hmpqDqM62g8">greater_than</h3>指定より大きいコンテンツを取得します。 （例：createdAt[greater_than]2019-10） <h3 id="hmmrZMxq5xk">contains</h3>指定した値を含むコンテンツを取得します。 （例：title[contains]おすすめ） <h3 id="h6lL8lEL9rz">exists</h3>指定した値が存在するコンテンツを取得します。 （例：nextLink[exists]） <h3 id="hlo4zOXR84o">not_exists</h3>指定した値が存在しないコンテンツを取得します。 （例：nextLink[not_exists]） <h3 id="h1OyzJzDJMN">begins_with</h3>指定した値から始まるコンテンツを取得します。 （例：publishedAt[begins_with]2019-11） なおコンテンツ参照については単数の場合は[equals]のみが利用可能です。 （例：category[equals]uN28Folyn） 複数の場合は[contains]のみが利用可能です。（例：tags[contains]oJIZmiban） {VALUE}部分に対象のコンテンツのidを入力してください。 また、式は[and]（AND条件) もしくは[or]（OR条件)で 区切ることで複数指定ができます。 複数指定した場合は基本的には左から右に順に評価されますが、[and]と[or]が混在した場合については[and]が優先されます。 条件式を括弧()で囲って一部の式を優先させることもできますので、適切な値が取れるよう優先順位をコントロールしてください。 例：カテゴリーがエンジニアリングかつ、2019&#x2F;11&#x2F;14以降またはタイトルが存在している記事を抽出<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> <h2 id="hdNL4PvqDRp">depth</h2>参照コンテンツを取得する階層の深さを指定します。 デフォルト値は1、最大値は3です。 例えば、ブログコンテンツに関連記事を表示するために、自分自身を循環参照しているとします。 例）depth = 1の場合<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> 例）depth = 2の場合<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>

GET /api/v1/{endpoint}

リスト型APIにおいて、idで指定したコンテンツを取得できるAPIです。 <h1 id="hPOO7l9q9ZX">リクエストヘッダー</h1><h2 id="h1o5B3Yy0WA">X-API-KEY</h2>GET APIリクエストの際に必要な認証キーです。リクエストヘッダーに含めて送信してください。

<h1 id="hJ00qvLZWv9">クエリ</h1>URLの語尾にGETパラメータ形式で指定できます。 <h2 id="hzD1yzgExjk">draftKey</h2>下書き状態のコンテンツを取得するためのパラメータです。 コンテンツの編集画面で確認できるdraftKeyをパラメータとして追加してください。 <h2 id="hpvg7XMnAo6">fields</h2>コンテンツの中で取得する要素を指定します。 fields=title,main_image,updatedAt,author.nameのようにカンマ区切りで値を記載してください。author.organization.nameのようにドットでつないでキーを指定することで参照コンテンツの要素も指定できます。fieldsが指定されていない場合は全ての要素を取得します。 <h2 id="hdNL4PvqDRp">depth</h2>参照コンテンツを取得する階層の深さを指定します。 デフォルト値は1、最大値は3です。 例えば、ブログコンテンツに関連記事を表示するために、自分自身を循環参照しているとします。 例）depth = 1の場合<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> 例）depth = 2の場合<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>

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

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

<h2 id="h9vGVyKMJv8">Content-Type</h2>送信するデータの形式を指定します。 microCMSではJSON形式のデータのみ扱っているため、application&#x2F;jsonと指定してください。 <h1 id="h411QwqnqRE">リクエストボディ</h1>APIスキーマに沿って送信したい内容のJSONを用意し、文字列として渡してください。 例：<pre><code>{&quot;title&quot;:&quot;bodyサンプル&quot;,&quot;publishedAt&quot;:&quot;2020-04-23T14:32:38.163Z&quot;}</code></pre>各フィールドにおける値の指定方法は下記の通りです。 <h3 id="hQPPng9q71P">テキストフィールド</h3>任意の文字列を指定してください。 （例：&quot;テキスト1&quot;） <h3 id="hxRRnLKN1GR">テキストエリア、リッチエディタ</h3>改行コードを用いることで複数行の文字列を指定できます。 （例：&quot;複数行のテキストを入力\n複数行のテキストを入力&quot;） <h3 id="hG18vJzz963">画像、ファイル、カスタムフィールド、繰り返しフィールド</h3>非対応です。指定しても空になります。 <h3 id="ho3QzwVk1XN">日時</h3>ISO 形式 (ISO 8601) の文字列で指定してください。 （例：&quot;2020-04-23T14:32:38.163Z&quot;） <h3 id="h6DRJJWgQA9">数字</h3>数字を指定してください。 （例：123） <h3 id="hKgQYm3YVJn">真偽値</h3>真偽値を指定してください。 （例：true） <h3 id="hnEErE6Mgqr">コンテンツ参照</h3>参照先コンテンツのcontentIdを指定してください。 （例：&quot;参照先id&quot;） <h3 id="hNMM9MWZYm9">コンテンツ複数参照</h3>参照先コンテンツのcontentIdを配列で指定してください。 （例：[&quot;参照先id1&quot;,&quot;参照先id2&quot;]）

POST /api/v1/{endpoint}

品質

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

画像APIとは

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

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

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

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

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

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

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

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

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

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

画像サイズ

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

<h3 id="hmbkr6wy5az">dpr</h3>画像の出力密度を制御します。 これによって一つの画像からあらゆるデバイスに対して正しいサイズの画像を配信できます。 デフォルト値は1で最大で8まで入力できます。 また、dprパラメータを指定する際には高さや幅も指定してください。 このパラメータは画面サイズ別に画像を利用したい場合に適しています。 例えば以下のようにsrcset指定での利用が考えられます。<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>例）?dpr=2&amp;w=300

解像度・画面サイズ

<h2 id="h1lj3N05O3N">fm=json</h2>画像のメタ情報を取得します。 例）?fm=json<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="h"> </h3><h2 id="hGOZWrL8Nrm">fm=webp</h2>画像をWebP形式に変換します。

フォーマット

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

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

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

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

例）?txt=ABCDEFGHIJKLMNOPQRSTUVWXYZ&amp;txt-size=62&amp;txt-color=ffffff&amp;txt-align=middle,center&amp;txt-clip=middle

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

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

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

例: ?txt=microCMS&amp;txt-size=62&amp;txt-color=fff&amp;txt-align=middle,center&amp;txt-font=serif,italic

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

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

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

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

例）?txt=ABCDEFGHIJKLMNOPQRSTUVWXYZ&amp;txt-size=62&amp;txt-color=ffffff&amp;txt-align=middle,center&amp;txt-clip=end,ellipsis&amp;txt-pad=50

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

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

テキスト

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

<h1 id="hMlqK0EkXv5">microCMSの始め方</h1>microCMSは次のようなステップで始めることができます。<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>

まずはアカウントの登録が必要です。 <a href="https://app.microcms.io" target="_blank">アカウント登録画面</a>から登録を行ってください。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms-docs/media/signup-01.png" alt> パスワードの条件は以下になります。<ul><li>半角英数</li><li>8文字以上</li><li>大文字、小文字、数字を含む</li></ul> 登録するボタンをクリック後は、入力したメールアドレスに2段階認証コードが送信されます。 次の画面で入力してください。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:f6a90bbf-db9f-4b4a-8bc8-93d66a77ea58/service/microcms-docs/media/signup-02.png" alt> 無事入力が完了すれば、アカウント登録は完了です。

アカウント登録

はじめに

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

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

サービスの作成

APIの作成について解説していきます。 APIはサービスごとに複数作成することができます。 （<a href="https://microcms.io/pricing" target="_blank">プラン</a>ごとに作成できるAPI数の上限は異なります。） まずは基本情報の入力です。 <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> ここでは、API名 &#x2F; エンドポイントの2つを入力します。 API名は管理画面上で各APIを識別するために設定する名前になります。 エンドポイントはAPIのエンドポイントの最後尾のパスにあたる値です。 エンドポイントの入力条件は以下になります。<ul><li>3文字以上20文字以内</li><li>半角英数字</li><li>小文字のみ</li><li>記号はハイフン、アンダースコアのみ</li><li>すでに設定済みのAPIエンドポイントとの重複不可</li></ul> ここでは例として、お知らせ情報を取得するAPIを作成します。 次に、APIのレスポンス形式の指定です。 <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> ここではAPIレスポンスをリスト形式で返すか、オブジェクト形式で返すか選択することができます。 <h2 id="hXZZLw0B0L7">リスト形式</h2>複数のコンテンツを取り扱います。 お知らせやブログなどの複数コンテンツの管理に適しています。 APIでは下記のように配列データを取得できます。<pre><code>[ { message: &#x27;おはよう&#x27; }, { message: &#x27;こんにちは&#x27; }, { message: &#x27;こんばんは&#x27; } ]</code></pre><h4 id="h"> </h4><h2 id="h1XXrKqAkpG">オブジェクト形式</h2>単一のコンテンツを取り扱います。 設定情報や単体ページの情報などの単一コンテンツの管理に適しています。 APIでは下記のようにオブジェクトデータを取得できます。<pre><code>{ title: &#x27;プロフィール&#x27;, profile: &#x27;ヘッドレスCMSを勉強しています&#x27; }</code></pre> 例として、お知らせ情報は複数コンテンツから成り立つのでリスト形式を選択します。 次にAPIスキーマの設定です。 <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> APIレスポンスの構造を決めることができます。 下記3つの項目を入力します。 <h3 id="hjzzZg6WVoq">フィールドID</h3>APIレスポンスのプロパティ名です。 <h3 id="hQoAM9WkO2A">表示名</h3>コンテンツを入力する際に表示されます。 <h3 id="h9JgABkGoXz">種類</h3>コンテンツを入力する際の入力フォームを指定することができます。 テキストフィールド、リッチエディタ、画像選択フォームなど様々な種類から選択可能です。 以上でAPIの作成は完了です。

APIの作成

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

コンテンツの作成

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

APIを呼び出すためにはAPI-KEYが必要です。 API-KEYはサービス設定 &gt; API-KEYから確認可能です。 （サービス設定画面には、画面左上のサービス名をクリックすることで遷移することができます。） <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> また、microCMSには管理画面上で簡単にAPIを試すことができる「APIプレビュー」機能が標準で搭載されています。 コンテンツ編集画面の右上に「APIプレビュー」ボタンがあるのでクリックしてみましょう。 <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> 既にデータ取得リクエストの準備は整っています。 画面内の「取得」ボタンを押してみましょう。 実際にブラウザからAPIリクエストが行われ、次のようなJSONレスポンスが表示されます。 <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> また、画面内にはAPIを叩くためのcurlコマンドも表示されています。 こちらで直接データを取得することも可能です。 <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> そのほかAPI仕様の詳細については<a href="/docs/content-api/get-content">コンテンツAPIリファレンス</a>をご覧ください。

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

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

コンテンツをAPIから取得することができたら、実際にそのデータをブラウザで表示してみましょう。 ※microCMSで取得できるのはJSONデータのみのため、ユーザーに内容を見せるためには何らかの表示ロジックが必要です。 ここではサンプルとして HTML&#x2F;JavaScript を使って表示してみます。 実際にはAPIさえ呼び出せればデータ表示をするプラットフォームは何でも構いません。 こちらが今回作成した index.html です。 <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> Fetch APIを使ってmicroCMSからデータを取得し、そのデータを基にDOMを書き換えています。 （何らかのテンプレートエンジン&#x2F;フレームワークを用いることで、より効率的な実装も可能です） このHTMLをブラウザから開くと次のように表示されます。 <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>

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

APIの呼び出し

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

<h1 id="h4ARZLmV3XK">文字サイズ</h1>小 &#x2F; 標準 &#x2F; 大 &#x2F; 最大 から選択可能です。 それぞれ、font-sizeが 0.75em &#x2F; 1em &#x2F; 1.5em &#x2F; 2.5em に相当します。 <h1 id="hp4w6wQp9NQ">太字</h1>テキストがstrongタグで囲われます。 <h1 id="h3ZZ2LLLZ52">イタリック</h1>テキストがemタグで囲われます。 <h1 id="hWYY73EYg65">アンダーライン</h1>テキストがuタグで囲われます。 <h1 id="hm1QgP4Er8D">打ち消し線</h1>テキストがsタグで囲われます。 <h1 id="hlZ8XKZW87l">背景色</h1>テキストに背景色をつけます。 <h1 id="hwomLr92wWg">文字色</h1>テキストに文字色をつけます。 <h1 id="hjzzZ6pV82z">テキスト寄せ</h1>左寄せ &#x2F; 中央寄せ &#x2F; 右寄せ &#x2F; 均等割付 の指定ができます。 <h1 id="hJ4DmNG1O72">引用</h1>テキストがblockquoteタグで囲われます。 <h1 id="hQPP0Pg36pv">コード</h1>テキストがpreタグとcodeタグで囲われます。 ソースコードの入力に適しています。 シンタックスハイライトの実装を行い場合は下記の記事をご参考ください。

<h1 id="hZA080xYkkD">番号付き箇条書き</h1>テキストがolタグ、liタグで囲われます。 <h1 id="ho3y9MjZ9gm">箇条書き</h1>テキストがulタグ、liタグで囲われます。 <h1 id="hvPPl5z6zYW">リンク</h1>リンクを指定することができます。 https:&#x2F;&#x2F;またはhttp:&#x2F;&#x2F;始まりの場合は外部リンクとなり、&#x2F;hogeなどのパス入力の場合は内部リンクとなります。 <h1 id="h2yWxP229kK">画像</h1>画像のアップロード、選択ができます。 画像のアップロードはメディア画面から行うことも可能です。 リッチエディタ内に入力された画像をクリックすることで、画像の width &#x2F; height &#x2F; alt とリンク先を指定することができます。 <h1 id="hgRYKB52nyj">外部サービス埋め込み</h1>外部サービスのURLを入力することで埋め込みをすることができます。 現在、対応しているサービスは以下になります。<ul><li>YouTube</li><li>Vimeo</li><li>Twitter</li><li>Instagram</li><li>Facebook</li><li>Speaker Deck</li><li>SlideShare</li></ul>

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

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

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