<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:1.0.2'</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:1.0.2'  //この行を追加

    //...
}</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><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/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><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}

<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のクエリは<strong>Standardプラン以降</strong>のお客様が対象になります。詳しくは<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":"bodyサンプル","publishedAt":"2020-04-23T14:32:38.163Z"}</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のクエリは<strong>Standardプラン以降</strong>のお客様が対象になります。詳しくは<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":"bodyサンプル","publishedAt":"2020-04-23T14:32:38.163Z"}</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":"bodyサンプル","publishedAt":"2020-04-23T14:32:38.163Z"}</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>「サービス設定」の「APIキー」をクリックしてAPIキー一覧画面に遷移することができます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/4e5e3028a97c468fbde1917f61aca896/x-microcms-api-key-1.png" alt=""><br><br>APIキー管理一覧の「追加」ボタンをクリックして、APIキーを作成できます。<br>また各APIキーをクリックすることで、詳細画面で編集できます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/f33ede82e7e74bf4bd99d94249fdd14c/x-microcms-api-key-2.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&#x306B;&#x95A2;&#x3059;&#x308B;&#x5236;&#x9650;&#x4E8B;&#x9805;&#x3067;&#x3059;&#x3002;&#x30D7;&#x30E9;&#x30F3;&#x6BCE;&#x306B;&#x7570;&#x306A;&#x308B;&#x5024;&#x306B;&#x3064;&#x3044;&#x3066;&#x306F;<a href="https://microcms.io/pricing/" target="_blank" rel="noopener noreferrer">&#x6599;&#x91D1;&#x8868;</a>&#x3092;&#x3054;&#x78BA;&#x8A8D;&#x304F;&#x3060;&#x3055;&#x3044;&#x3002;</p><h1 id="h8082d285e5"><a href="#h8082d285e5">&#x7BA1;&#x7406;&#x753B;&#x9762;&#x306B;&#x95A2;&#x3059;&#x308B;&#x5236;&#x9650;&#x4E8B;&#x9805;</a></h1><ul><li> 1&#x30B3;&#x30F3;&#x30C6;&#x30F3;&#x30C4;&#x3042;&#x305F;&#x308A;&#x306E;&#x30C7;&#x30FC;&#x30BF;&#x91CF;&#xFF1A;&#x7D04;200KB</li></ul></body></html>

<html><head></head><body><h1 id="h1eb9467502"><a href="#h1eb9467502">API&#x306B;&#x95A2;&#x3059;&#x308B;&#x5236;&#x9650;&#x4E8B;&#x9805;</a></h1><ul><li>GET API&#x306E;&#x547C;&#x3073;&#x51FA;&#x3057;&#x56DE;&#x6570;&#xFF1A;1&#x79D2;&#x3042;&#x305F;&#x308A;60&#x56DE;</li><li>WRITE API&#xFF08;POST / PUT / PATCH / DELETE&#xFF09;&#x306E;&#x547C;&#x3073;&#x51FA;&#x3057;&#x56DE;&#x6570;&#xFF1A;1&#x79D2;&#x3042;&#x305F;&#x308A;5&#x56DE;</li><li>&#x30EC;&#x30B9;&#x30DD;&#x30F3;&#x30B9;&#x30B5;&#x30A4;&#x30BA;&#xFF1A;&#x7D04;5MB</li></ul></body></html>

<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>

推奨環境

制限事項

<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>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="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=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="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>1.0.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は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>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>まずはアカウントの登録が必要です。<br><a href="https://app.microcms.io">アカウント登録画面</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><a href="https://app.microcms.io/signin" target="_blank" rel="noopener noreferrer">ログイン画面</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.io/forgot-password" target="_blank" rel="noopener noreferrer">パスワード再設定申請画面</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名 / エンドポイントの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><br>以上でAPIの作成は完了です。</p>

APIの作成

<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>画面上部のコンテンツ管理タブをクリックするとコンテンツ一覧画面が表示されます。<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>よって、画面上部のコンテンツ管理タブをクリックしてもコンテンツ一覧画面には遷移せず、最初からコンテンツ作成/編集画面に遷移します。<br><br>コンテンツ作成画面における操作はリスト形式の際と同じです。<br>ただし、オブジェクト形式の場合は単一コンテンツのため、コンテンツの削除ボタンが用意されていません。<br>コンテンツを削除したい場合はAPI設定からAPIごと削除してください。</p>

コンテンツの作成

<p>コンテンツIDのフォーマットはAPI毎に設定が可能です。<br>設定箇所は「API設定」→「コンテンツID」となります。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:11889c08-ec2f-4d7a-b37c-49c5982b2b47/service/microcms-docs/media/content-id-setting-screen.png" 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>コンテンツを作成した後は、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; 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 "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>をご覧ください。</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="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>

権限管理

<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/c42d2fd60c4c4e68bc94cfebf04bcf42/custom-field-01.png" alt=""><br><br>次にカスタムフィールド内における必要なスキーマ設計を行います。<br>今回はメタ情報として、タイトル / 概要 / OGP画像 の3つを用意します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/893bd856011541f78b86df99ea243b92/custom-field-02.png" alt=""><br><br>最後にレイアウトを指定します。<br>1カラム or 2カラムの選択ができ、各入力フォームの位置をドラッグ＆ドロップで変更できます。<br>今回は下記のようにタイトルと概要を左カラム、OGP画像を右カラムに配置します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/a83fbbed469e4f2998368af68ff850cb/custom-field-03.png" alt=""><br><br>以上でカスタムフィールドの作成は完了です。<br>作成後は一覧画面に表示されます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/941abdc5e281451993e252da08ea5745/custom-field-04.png" alt=""><br></p><h1 id="h2d1e3caed1">カスタムフィールドの利用</h1><p>作成したカスタムフィールドを利用するには「API設定 &gt; APIスキーマ」に移動します。<br>フィールドの種類から「カスタム」を選択します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/4b6f519b86744a5a94859cc259c29f90/custom-field-05.png" alt=""><br><br>「カスタム」を選択するとセレクトボックスが表示されるので、先ほど作成した「メタ情報」のカスタムフィールドを選択します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/78208ffe40d1479b9baf42baac805dcb/custom-field-06.png" alt=""><br><br>最終的に下記のようなスキーマ設定となりました。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/ba3841e361bb4637b833449e445461b0/custom-field-07.png" alt=""><br><br>スキーマの変更を保存して、カスタムフィールドの設定は完了です。<br>コンテンツ編集画面に遷移すると、次のような入力画面が表示されます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/87a8538b6d664f00a4eaaefc55d0e9dc/custom-field-08.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>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>まず、インラインフレームフィールドが設定されているコンテンツ作成/編集画面を開くと、microCMS管理画面からiFrameに対して下記のようにpostMessageを行います。</p><pre><code>{
　　id: 'sfa3ff2c',  // iFrame識別子
  action: "MICROCMS_GET_DEFAULT_DATA",
  message: value  // 設定済みの値
}</code></pre><p><br>iFrame側はmessageイベントに対してEventListenerを設定しておくことで、上記のメッセージを受け取ることができます。<br><em>id</em>は送信時に使用するのでどこかに保持しておきましょう。<br><em>message</em>の値は初期値として利用します。（初回は<em>undefined</em>です）</p><pre><code>window.addEventListener('message', (e) =&gt; {
  if (
    e.isTrusted === true &amp;&amp;
    e.data.action === 'MICROCMS_GET_DEFAULT_DATA'
  ) {
&nbsp;  // idやmessageを保存する
    // e.data.id: 識別子
    // 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: 'sfa3ff2c',  // iFrame識別子
　　　　action: 'MICROCMS_POST_DATA',
　　　　message: {
      id: 'some-id',
      title: 'some-title',
      description: 'some-description',
      imageUrl: 'some-image-url',
      updatedAt: 'some-updated-at',
      data: {    // APIのレスポンスとなる部分
        id: '123'
      }
　　　　}
　　},
　　'https://your-service-id.microcms.io'
);</code></pre><p><br><em>id</em>には画面ロード時にmicroCMS側から受け取ったidを指定してください。<br><em>action</em>には<em>'MICROCMS_POST_DATA'</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="h349fe0c3e0">②'レスポンス</h3><p>postMessageにはレスポンスは存在しないのですが、データ変更が成功したかどうかを知るために擬似的なレスポンスを返します。<br>成功時には以下のようなpostMessageを受け取ることができます。</p><pre><code>{
　　id: 'sfa3ff2c',  // iFrame識別子
  action: "MICROCMS_POST_DATA_SUCCESS",
  message: value  // 送信した値
}</code></pre><p><br>失敗時には以下のようなpostMessageが返されます。</p><pre><code>{
　　id: 'sfa3ff2c',  // iFrame識別子
  action: "MICROCMS_POST_DATA_FAILURE",
  error: 'エラーメッセージ'
}</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: 'MICROCMS_UPDATE_STYLE',
　　　　message: {
      height: 300,
      width: '100%'
　　　　}
　　},
　　'https://your-service-id.microcms.io'
);</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: '123'
    }
}</code></pre><p><br>入力された値はコンテンツのGET APIから次のように取得することができます。<br></p><pre><code>{
    "id": "mir1wo77g",
    "createdAt": "2020-07-21T14:12:14.606Z",
    "updatedAt": "2020-07-21T14:12:14.606Z",
    "publishedAt": "2020-07-21T14:12:14.606Z",
    "title": "タイトルのテスト",
    "iframe": {
        "id": "123"
    }
}</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スキーマ等の変更を行うことにリスクがあるような状況に対応するための複数環境機能をご用意しております。<br>またこれから運用を開始する際にも、開発環境と本番環境を分けておきたい場合にお使いいただけます。<br><br><span style="color:#222222">この機能をお使いいただくことで本番環境に影響を与えることなく機能追加や修正を行うことが可能です。</span><br>（ご利用できるプランについては<a style="color:#3067af" href="https://microcms.io/pricing/" target="_blank" rel="noopener noreferrer">料金表</a>の「複数環境」欄、「ステージング環境」欄をご参照ください）<br><br>コンテンツ入稿者によるコンテンツの事前確認（画面プレビュー）については、本機能の対象外で、別途下書き保存と<code>draftKey</code>を用いて解決いただけます。<br>画面プレビューについて詳しくはこちらをご覧ください。</p>

<h1 id="h74bc5c6d52">機能の概要</h1><p>複数環境機能では「本番環境」のコンテンツやメディアを複製した環境を作成できます。<br>開発時など、本番以外のウェブサイトやアプリでは環境側のAPIを利用することで本番環境には一切の影響なく安全に作業を行うことが可能です。<br>また環境側のAPIスキーマ等の変更も本番環境には影響しないため、機能追加や編集などの際にも安全に作業を進めることができます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/88225a8487db499cbb1ea713143d779b/environments-outline.jpeg" alt=""><br></p><h1 id="h5d2a9ef04a">複数環境機能の使い方</h1><p>まず、環境を作成するには管理画面内の環境メニューを開きます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/e1e83b9e4a83436082d3570ac8a7ef94/environments-menu.png" alt=""><br><br>「新規作成」ボタンを押すと環境作成ダイアログが表示されます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/f57e4690bf7a4eb6a67e6d63f7621f4e/create-environments.png" alt=""><br><br>環境の作成時には環境名（任意の文字列）と、コンテンツのコピー範囲を指定します。<br>コンテンツのコピー範囲には以下の3パターンがあります。<br></p><ul><li>すべてコピーする</li><li>公開済みのコンテンツのみをコピーする</li><li>コピーしない</li></ul><p><br>詳細は後述しますが、作成した環境内では全てのユーザーが「管理者権限」を持ちます。<br>そのため下書き中コンテンツなど、本来は閲覧されるべきでない情報が本番環境に含まれる場合にはコピー範囲を絞って環境作成を行ってください。<br><br>上記を入力後、「作成する」ボタンを押すことで環境を作成できます。<br>作成済みの環境は設定画面で確認できます。環境の削除もこの画面内にて可能です。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/cab5e63db51344a4913680716cc9fa0e/environments-setting.png" alt=""><br></p><h1 id="h6a6db416e7">2環境以上の作成について</h1><p>本番環境を除いた1環境分の作成については現状のBusinessプラン内に含まれています。<br>作成したステージング環境の削除は可能で、例えば新規機能開発のたびに新環境を作成→削除を繰り返すといった運用も可能です。<br><br><span style="color:#222222">一方で同時に複数の環境が欲しい場合や、開発者ごとに環境を作成したいような場合には、アドオン追加で10環境分まで作成可能となります。</span><br>詳しくは<a href="https://microcms.io/pricing" target="_blank" rel="noopener noreferrer">料金ページ</a>をご覧ください。<br></p><h1 id="h00b8af9eb7">仕様</h1><p>環境の詳細な仕様は以下の通りです。<br></p><ul><li>新環境にはランダム文字列付きの別のサブドメインが割り当てられます（例：本番環境 example, 作成した環境 example-0htwv5q6lmdmk0ze4l8o）</li><li>サービス配下の全API、全コンテンツ、全画像がコピーされます（コンテンツのコピー範囲は指定可能）</li><li>APIキーは別のものが発行されます</li><li>APIのパスに変化はありません（ドメイン部分は変更はあります）</li><li>レビュー機能は利用可能ですが、レビュー内容は本番環境から引き継がれません</li><li>Webhookの設定は可能ですが、本番環境からは引き継がれません</li><li>ロール機能は一切使用できません。環境側では全員が管理者とほぼ同等の権限となります。</li><li>メンバーの追加、削除はできません。本番環境のメンバーと常に同期されます。</li><li>複数環境の追加にはアドオン購入が必要です。<ul><li>詳しくは<a href="https://microcms.io/pricing" target="_blank" rel="noopener noreferrer">料金表</a>をご確認ください。</li></ul></li><li>データ転送量、WRITEリクエスト数は全環境分が合算されます。</li><li>環境内でのAPIの作成数は無制限です。APIの作成個数には計上されません。</li><li>コンテンツのインポートは上限100件までとなります。</li></ul>

複数環境（ステージング環境）

<p>監査ログはサービス上でユーザーが行った<span style="color:#616269">操作内容</span>を確認できる機能です。セキュリティ対策の一環としてご利用可能です。<br>監査ログは有料プランにてご利用いただけます。<br>詳しくは<a style="color:#3067af" href="https://microcms.io/pricing" target="_blank" rel="noopener noreferrer">料金プランページ</a>をご覧ください。</p><h1 id="ha9391b277a">監査ログの確認</h1><p>監査ログはサービス設定のデータログから確認することができます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/39c0613fceda4afd81f0fe923274b7ee/audit-log.png" alt=""><br><br>監査対象は以下の項目です。</p><ul><li>日時</li><li>IPアドレス</li><li>ユーザー</li><li>操作内容</li><li>対象API ID</li><li>対象API名</li><li>対象コンテンツID</li><li>対象メディアID</li><li>対象メディア名</li><li>対象メンバー</li><li>対象ロールID</li><li>対象ロール名</li><li>対象カスタムフィールド名</li><li>対象レビュアー</li><li>対象レビュー申請ID</li><li>対象レビュー申請タイトル</li></ul><p><br>監査ログは管理者権限を持つユーザーのみ確認することができます。</p><h1 id="h9f5f345153">CSVのダウンロード</h1><p>対象期間を指定して、CSVファイルをダウンロードすることができます。右上にある<code>ダウンロード</code>をクリックして、モーダルから対象期間を指定してください。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/22968164279e451f879125187c5b59a4/audit-log-2.png" alt=""></p>

<p>APIのIP制限は<strong>GET</strong>や<strong>POST</strong>などAPIのアクセスに対してもIP制限をかけることができる機能です。セキュリティ対策の一環としてご利用可能です。<br>APIのIP制限は有料プランにてご利用いただけます。<br>詳しくは<a style="color:#3067af" href="https://microcms.io/pricing" target="_blank" rel="noopener noreferrer">料金プランページ</a>をご覧ください。<br></p><h1 id="h4356c53f19">APIのIP制限を設定する</h1><p>制限はAPI毎に設定が可能です。<br>以下の図のように制限設定を行いたいAPIの「API設定」→「IP制限」と進んで設定を行ってください。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/faf815e51ff649dfbeb8ddc8b20bd4ee/api-ip-restriction-settings.png" alt=""><br><br>一つのAPIに設定できる許可IPアドレスは最大で10個までです。<br>また、設定はGET / POST / PUTなど全てのAPIに対して有効となりますのでご注意ください。</p>

APIのIP制限

監査ログ

<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="/content-api/get-list-contents">コンテンツAPI</a>を使ったjsonデータの取得</li><li>microCMSにアップロードした画像やファイルの取得（<a href="/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="/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&amp;h=375" alt=""><br><br>たったこれだけですが前者の画像サイズは約1MBなのに対し、後者の画像サイズは約25KBと<strong>1/40</strong>程度のサイズとなりました。<br>この画像を100万回取得した場合のデータ転送量は<strong>【25KB × 100万回 ≒ 2.5GB】</strong>と桁違いに小さくなります。<br><br>無駄なデータ転送量をかけないよう画像APIをぜひともご活用ください。</p>

データ転送量の確認方法

<p>コンテンツの変更時に他システムとの連携を行うため、microCMSではWebhook機能を用意しています。<br>設定は「API設定」→「Webhook」で行います。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/cb398fcd6c4544089c08e8f39fc51ee5/webhook-setting.png" alt=""><br><br>この画面で「追加」ボタンを押して追加したいWebhookを選び、設定を行ってください。<br>現在設定できるWebhookは以下の7種類です。<br></p><ul><li>Slack</li><li>Chatwork</li><li>Netlify</li><li>AWS Amplify</li><li>GitHub Actions</li><li>メール通知</li><li>カスタム通知</li></ul><h1 id="hf76e1d0d3f">Webhookのタイミング</h1><p>各Webhookの設定時にWebhookを発行するタイミングを設定できます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/f411a19e76f9419badd97d78c1a1bd2c/webhook-setting-timing.png" alt=""></p><h2 id="hd448946bc4">コンテンツの公開時・更新時</h2><p>コンテンツの新規公開や、公開済みのコンテンツ更新の際に通知を行います。</p><h3 id="h2e29fa5b93">コンテンツ編集画面による操作</h3><p>microCMSのコンテンツ編集画面での操作によって新規公開や公開済みコンテンツが更新された際に通知を行います。</p><h3 id="h1c28117a9c">APIによる操作</h3><p>WRITE API（PUT / PATCH / PUT / DELETE）によって新規公開や公開済みコンテンツが更新された際に通知を行います。</p><h3 id="hca3aec895c">レビューによる公開</h3><p>レビュー申請機能によって新規公開や公開済みコンテンツが更新された際に通知を行います。</p><h3 id="h98f4f1b620">予約設定による操作</h3><p>コンテンツの予約公開機能によって新規公開や公開済みコンテンツが更新された際に通知を行います。</p><h3 id="hc91246bd5a">コンテンツの並び替え</h3><p>公開済みのコンテンツをmicroCMSのコンテンツ一覧画面で並び替えた際に通知を行います。</p><h3 id="h6fac3aa2f9">コンテンツIDの変更</h3><p>公開済みのコンテンツのコンテンツIDを更新した際に通知を行います。</p><h2 id="h4903bcd43a">コンテンツの非公開時</h2><p>コンテンツが「公開中」から「下書き中」に変更された際に通知します。</p><h3 id="h2e29fa5b93">コンテンツ編集画面による操作</h3><p>microCMSのコンテンツ編集画面での操作によって公開中のコンテンツが下書き中に変更された際に通知します。</p><h3 id="h98f4f1b620">予約設定による操作</h3><p>コンテンツの予約非公開機能によって公開中のコンテンツが下書き中に変更された際に通知します。</p><h2 id="h43b869c255">コンテンツの下書き保存時</h2><p>「公開中」かつ「下書き中」もしくは「下書き中」のみのコンテンツに変更があった際に通知します。</p><h3 id="h2e29fa5b93">コンテンツ編集画面による操作</h3><p>microCMSのコンテンツ編集画面での操作によって下書き中コンテンツが更新された際に通知を行います。</p><h3 id="h1c28117a9c">APIによる操作</h3><p>下書き中のコンテンツに対するPATCH APIでのコンテンツ編集の際に通知を行います。</p><h3 id="hc91246bd5a">コンテンツの並び替え</h3><p>下書き中コンテンツをmicroCMSのコンテンツ一覧画面で並び替えた際に通知を行います。</p><h3 id="h6fac3aa2f9">コンテンツIDの変更</h3><p>下書き中コンテンツのコンテンツIDを更新した際に通知を行います。</p><h2 id="hb949b0c36c">公開中コンテンツの削除時</h2><p>公開中のコンテンツが削除された際に通知します。</p><h3 id="h2e29fa5b93">コンテンツ編集画面による操作</h3><p>microCMSのコンテンツ編集画面での操作によってコンテンツが削除された際に通知を行います。</p><h3 id="h1c28117a9c">APIによる操作</h3><p>DELETE APIによってコンテンツが削除された際に通知を行います。</p><h2 id="hb101440f6c">下書きコンテンツの削除時</h2><p>下書き中のコンテンツが削除された際に通知します。</p><h3 id="h2e29fa5b93">コンテンツ編集画面による操作</h3><p>microCMSのコンテンツ編集画面での操作によってコンテンツが削除された際に通知を行います。</p><h3 id="h1c28117a9c">APIによる操作</h3><p>DELETE APIによってコンテンツが削除された際に通知を行います。</p><h2 id="h44fb449063">APIの設定変更時</h2><p>APIの基本設定やスキーマなど、何らかの変更を行った際に通知します。</p><h2 id="h628d20ab88">APIの削除時</h2><p>APIが削除された際に通知します。</p><h1 id="h5613eeb2c3">設定内容と動作内容</h1><h2 id="hb678e6ac52">Slack</h2><p>SlackへのWebhookには以下の情報が必須で必要です。<br>Slack側の操作については<a href="https://api.slack.com/messaging/webhooks" target="_blank" rel="noopener noreferrer">公式ドキュメント</a>等をご参照ください。<br></p><ul><li>Slackで発行するWebhook URL</li></ul><p><br>実際に通知が行われる際は以下のような形で行われます。<br>URL部分にはデフォルトでは管理画面のURLが入りますが、設定で任意のURLに変更することも可能です。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/0302a7e46e8e45a980286b39e8332f62/slack-webhook-example.png" alt=""></p><h2 id="hc355572166">Chatwork</h2><p>ChatworkへのWebhookには以下の情報が必須で必要です。<br></p><ul><li>ChatworkのAPIトークン：<a href="https://help.chatwork.com/hc/ja/articles/115000172402-API%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%82%92%E7%99%BA%E8%A1%8C%E3%81%99%E3%82%8B" target="_blank" rel="noopener noreferrer">Chatworkドキュメント</a></li><li>部屋ID：通常URLに含まれる rid000000000 のうちの数値部分です。</li></ul><p><br>通知内容はSlackと同様となります。</p><h2 id="h9da03a681c">Netlify</h2><p>microCMSからのWebhookによってビルド処理を開始できます。<br>設定内容は下記の通りです。<br></p><ul><li>Build Hooks URL：<a href="https://docs.netlify.com/configure-builds/build-hooks/" target="_blank" rel="noopener noreferrer">Netlifyドキュメント</a></li></ul><h2 id="h48d8aea1d6">AWS Amplify</h2><p>microCMSからのWebhookによってビルド処理を開始できます。<br>設定内容は下記の通りです。<br></p><ul><li>Build Hooks URL：<a href="https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/webhooks.html" target="_blank" rel="noopener noreferrer">Amplifyドキュメント</a></li></ul><h2 id="hf0d425ae06">GitHub Actions</h2><p>microCMSからのWebhookによってビルド処理を開始できます。<br>設定内容は下記の通りです。<br></p><ul><li>GitHubトークン：<a href="https://docs.github.com/ja/github/authenticating-to-github/creating-a-personal-access-token" target="_blank" rel="noopener noreferrer">GitHubドキュメント</a></li><li>対象のユーザー名</li><li>対象のリポジトリ名</li><li>トリガーイベント名：<a href="https://docs.github.com/ja/actions/reference/events-that-trigger-workflows" target="_blank" rel="noopener noreferrer">GitHubドキュメント</a></li></ul><h2 id="h8068c49245">メール通知</h2><p>コンテンツやAPIの変更時などに指定したメールアドレスに変更内容を送信できます。<br>設定内容は下記の通りです。<br></p><ul><li>メールアドレス</li></ul><p><br>また、SlackやChatworkのWebhookと同様に、本文内にはURLが含まれますがこちらも任意のものに変更可能です。</p><h2 id="h418d64261d">カスタム通知</h2><p>任意のURLに対してPOSTリクエストを送信します。<br>設定内容は下記の通りです。<br></p><ul><li>POST先となるURL</li></ul><h1 id="hd95625726f">カスタム通知について</h1><p>カスタム通知では任意のURLに対してPOSTリクエストを送信します。<br>あらゆるURLを指定可能ですので、リクエストを受け取った側は独自の処理を自由に行ってください。</p><h2 id="h3e9a323374">リクエスト内容</h2><h3 id="h2b96fb173e">ヘッダ</h3><p>リクエストヘッダには <code>Content-Type: application/json</code> が含まれます。</p><h3 id="h9f84bd737e">ボディ</h3><p>リクエストボディには対象となったコンテンツやAPIの情報が含まれます。</p><pre><code>{
&nbsp; service: 'webhook-test',
&nbsp; api: 'news',
&nbsp; id: 'x2xkcwog9521',
&nbsp; type: 'edit',
&nbsp; contents: {
&nbsp; &nbsp; old: {
&nbsp; &nbsp; &nbsp; id: 'x2xkcwog9521',
&nbsp; &nbsp; &nbsp; status: ['DRAFT'],
&nbsp; &nbsp; &nbsp; draftKey: 'Vyf_XTclTY',
&nbsp; &nbsp; &nbsp; publishValue: null,
&nbsp; &nbsp; &nbsp; draftValue: {
&nbsp; &nbsp; &nbsp; &nbsp; id: 'x2xkcwog9521',
&nbsp; &nbsp; &nbsp; &nbsp; createdAt: '2021-06-02T05:56:24.513Z',
&nbsp; &nbsp; &nbsp; &nbsp; updatedAt: '2021-06-02T06:05:09.601Z',
&nbsp; &nbsp; &nbsp; &nbsp; publishedAt: '2021-06-02T06:05:09.601Z',
&nbsp; &nbsp; &nbsp; &nbsp; revisedAt: '2021-06-02T06:05:09.601Z',
&nbsp; &nbsp; &nbsp; &nbsp; title: 'タイトルです',
&nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; },
&nbsp; &nbsp; new: {
&nbsp; &nbsp; &nbsp; id: 'x2xkcwog9521',
&nbsp; &nbsp; &nbsp; status: ['PUBLISH'],
&nbsp; &nbsp; &nbsp; draftKey: null,
&nbsp; &nbsp; &nbsp; publishValue: {
&nbsp; &nbsp; &nbsp; &nbsp; id: 'x2xkcwog9521',
&nbsp; &nbsp; &nbsp; &nbsp; createdAt: '2021-06-02T05:56:24.513Z',
&nbsp; &nbsp; &nbsp; &nbsp; updatedAt: '2021-06-02T06:05:09.601Z',
&nbsp; &nbsp; &nbsp; &nbsp; publishedAt: '2021-06-02T06:05:09.601Z',
&nbsp; &nbsp; &nbsp; &nbsp; revisedAt: '2021-06-02T06:05:09.601Z',
&nbsp; &nbsp; &nbsp; &nbsp; title: 'タイトルです',
&nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; draftValue: null,
&nbsp; &nbsp; },
&nbsp; },
}</code></pre><ul><li><code>service</code> - 変更のあったコンテンツが属するサービスのサブドメインが入ります</li><li><code>api</code> - API作成時・更新時に指定したエンドポイントが入ります</li><li><code>id</code> - コンテンツのidが入ります。APIに関する操作の場合は<code>null</code>が入ります。</li><li><code>type</code> - 変更の種類です。新規追加時はnew、編集時はedit、削除時はdeleteが入ります</li><li><code>contents</code> - コンテンツ内容が入ります。APIに関する操作の場合は<code>null</code>が入ります。</li><li><code>contents.old</code> - コンテンツの編集前もしくは削除前の内容が含まれます。コンテンツの新規作成時には<code>null</code>が入ります。</li><li><code>contents.old.id</code> - コンテンツの編集前もしくは削除前のコンテンツの<code>id</code>が含まれます。</li><li><code>contents.old.status</code> - コンテンツの公開状態を配列で示します。公開中は<code>PUBLISH</code>、下書き中は<code>DRAFT</code>が含まれます。</li><li><code>contents.old.draftKey</code> - コンテンツが下書き状態が含まれる場合に、管理画面で取得できる下書きキー（draftKey）が入ります。公開状態のみの場合は<code>null</code>が入ります。</li><li><code>contents.old.publishValue</code> - 公開状態のコンテンツをGET APIで取得した際のjsonデータが含まれます。</li><li><code>contents.old.draftValue</code> - 下書き状態のコンテンツをGET APIで取得した際のjsonデータが含まれます。</li><li><code>contents.new</code> - コンテンツの作成後もしくは編集後の内容が含まれます。コンテンツの削除時には<code>null</code>が入ります。</li><li><code>contents.new.id</code> - コンテンツの作成後もしくは編集後のコンテンツの<code>id</code>が含まれます。</li><li><code>contents.new.status</code> - コンテンツの公開状態を配列で示します。公開中は<code>PUBLISH</code>、下書き中は<code>DRAFT</code>が含まれます。</li><li><code>contents.new.draftKey</code> - コンテンツが下書き状態が含まれる場合に、管理画面で取得できる下書きキー（draftKey）が入ります。公開状態のみの場合は<code>null</code>が入ります。</li><li><code>contents.new.publishValue</code> - 公開状態のコンテンツをGET APIで取得した際のjsonデータが含まれます。</li><li><code>contents.new.draftValue</code> - 下書き状態のコンテンツをGET APIで取得した際のjsonデータが含まれます。</li></ul><p><br></p><h2 id="hfa313b27bb">有効/無効設定</h2><p>一時的にWebhookの設定を有効/無効にしたい場合は、Webhook一覧のスイッチを切り替えることで可能です。無効にした場合はWebhookが発行されなくなります。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/6a570073cd1f4c04b77006e54a2b7648/webhook-setting-switch.png" alt=""><br><br></p><h2 id="h7761469c26">セキュリティについて</h2><p>microCMSからの通知を受け取るサーバは一般公開をしておく必要があります。<br>そのため一般的には第三者からPOSTリクエストを受ける可能性も考慮した対応を行う必要があります。<br><br>具体的にはURLの設定時に<code>?auth=XXX</code> などmicroCMSと受け取り側サーバにしか知り得ない値を設定しておき、<br>受け取り側のサーバでこの値が正しいかどうか（≒microCMSからのリクエストであるか否か）検証を行ってください。</p>

<p>メディアの変更時に他システムとの連携を行うため、microCMSではWebhook機能を用意しています。<br>設定は「メディア」→「設定」から行います。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/d09dc26e187a4ad19902cf3ac3fad33a/medium-webhook-3.png" alt=""><br></p><h1 id="hf76e1d0d3f"><span style="color:#2b2c30">Webhookのタイミング</span></h1><p>各Webhookの設定時にWebhookを発行するタイミングを設定できます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/e22a89834c7146099f12d4f6d7961139/medium-webhook-2.png" alt=""><br></p><h3 id="ha0e6a22a20">メディアの作成時</h3><p>メディアを新規作成 (新規アップロード) の際に通知を行います。</p><h3 id="he77490a7e3">メディアの再アップロード時</h3><p>メディアを再アップロードした際に通知を行います。</p><h3 id="h892260a784">メディアの削除時</h3><p>メディアを削除した際に通知を行います。<br></p><h1 id="h5495633705"><span style="color:#2b2c30">Webhook通知について</span></h1><p>メディアのWebook通知では任意のURLに対してPOSTリクエストを送信します。<br>あらゆるURLを指定可能ですので、リクエストを受け取った側は独自の処理を自由に行ってください。</p><h2 id="h3e9a323374"><span style="color:#2b2c30">リクエスト内容</span></h2><h3 id="h2b96fb173e"><span style="color:#2b2c30">ヘッダ</span></h3><p>リクエストヘッダには&nbsp;<code>Content-Type: application/json</code>&nbsp;が含まれます。</p><h3 id="h9f84bd737e"><span style="color:#2b2c30">ボディ</span></h3><p>リクエストボディには対象となったコンテンツやAPIの情報が含まれます。<br></p><pre><code>{
  service: 'test',
  type: 'new',  // new または update または delete
  old: {
    url: 'https://image.microcms-assets.io/xxxxxx',
    width: 100,
    height: 100,
  },
  new: {
    url: 'https://image.microcms-assets.io/xxxxxx',
    width: 100,
    height: 100,
  },
}</code></pre><p><br></p><ul><li><code>service</code>&nbsp;- 変更のあったコンテンツが属するサービスのサブドメインが入ります</li><li><code>type</code>&nbsp;- 変更の種類です。新規追加時はnew、編集時はedit、削除時はdeleteが入ります</li><li><code>old</code>&nbsp;- メディアの編集前もしくは削除前の内容が含まれます。メディアの新規作成時には<code>null</code>が入ります。</li><li><code>old.url</code>&nbsp;- メディアの<code>url</code>が含まれます。</li><li><code>old.width</code>&nbsp;- メディアのwidthが含まれます。ファイルの場合は<code>null</code>が入ります。</li><li><code>old.height</code>&nbsp;- メディアのheightが含まれます。ファイルの場合は<code>null</code>が入ります。</li><li><code>new</code>&nbsp;- メディアの作成後もしくは編集後の内容が含まれます。メディアの削除時には<code>null</code>が入ります。</li><li><code>new.url</code>&nbsp;- メディアの<code>url</code>が含まれます。</li><li><code>new.width</code>&nbsp;- メディアのwidthが含まれます。ファイルの場合は<code>null</code>が入ります。</li><li><code>new.height</code>&nbsp;- メディアのheightが含まれます。ファイルの場合は<code>null</code>が入ります。</li></ul><p><br></p><h2 id="h7761469c26"><span style="color:#2b2c30">セキュリティについて</span></h2><p>microCMSからの通知を受け取るサーバは<strong>一般公開</strong>をしておく必要があります。<br>そのため一般的には第三者からPOSTリクエストを受ける可能性も考慮した対応を行う必要があります。<br><br>具体的にはURLの設定時に<code>?auth=XXX</code>&nbsp;などmicroCMSと受け取り側サーバにしか知り得ない値を設定しておき、<br>受け取り側のサーバでこの値が正しいかどうか（≒microCMSからのリクエストであるか否か）検証を行ってください。<br><br></p>

メディアのWebhookを設定

コンテンツのWebhookを設定

<p>別サービスで類似のAPIを作成する場合などのため、microCMSではAPIスキーマのエクスポート / インポートに対応しています。<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>

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

<p>コンテンツの保存後、自動でいくつかの値が付与されます。<br>自動で付与された値は管理画面で確認や変更が可能なほか、コンテンツAPIでも取得が可能です。</p><h1 id="h6f21981a23">contentId：コンテンツのid</h1><p>作成したコンテンツのidです。<br>コンテンツIDの設定に沿った文字列で構成されます。（<a href="/manual/content-id-setting">コンテンツIDの設定についてはこちら</a>）<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 / PUT / PATCHといった書き込み系APIによる公開状態の更新時に値が更新されます。</p>

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

<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に関する制限事項です。プラン毎に異なる値については<a href="https://microcms.io/pricing/" target="_blank" rel="noopener noreferrer">料金表</a>をご確認ください。</p><h1 id="h8082d285e5">管理画面に関する制限事項</h1><ul><li> 1コンテンツあたりのデータ量：約200KB</li></ul>

<h1 id="h1eb9467502">APIに関する制限事項</h1><ul><li>GET APIの呼び出し回数：1秒あたり60回</li><li>WRITE API（POST / PUT / PATCH / DELETE）の呼び出し回数：1秒あたり5回</li><li>レスポンスサイズ：約5MB</li></ul>

<p><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/cbd2c45c697a4978b90c50e856b510fa/thumbnail-next.png" alt=""></p><h1 id="h4d50e8632f">Next.jsとは</h1><p><span style="color:#252525">Next.jsは、React.js製のフレームワークです。</span><br><span style="color:#252525">本番環境に必要なすべての機能を備えた最高の開発者エクスペリエンスを提供します。</span><br>詳しくはNext.jsの公式ドキュメントをご覧ください。</p>

<p>こちらのドキュメントでは、microCMSをNext.jsで利用するための最短手順を示します。<br>初めてNext.jsから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>Next.jsで開発するためにNodeとnpmが必要になります。ご自身の開発環境にインストールしてください。</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><h1 id="hcbc1202bf7">Next.jsプロジェクトの準備</h1><p>次にNext.jsのプロジェクトを作成します。Next.jsが公式で公開しているCLIを使います。下記のコマンドを実行してみましょう。</p><pre><code>npx create-next-app next-microcms</code></pre><p>プロジェクト作成が完了後、開発サーバーを立ち上げてみましょう。<code>dev</code>コマンドを使います。</p><pre><code>cd next-microcms
npm run dev</code></pre><p>そして、<code>localhost:3000</code>にアクセスします。作成に成功してる場合下記のような画面がブラウザにでます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/8190e6d225424e11b245c2506cc20caf/next-getting-started-3.png" alt=""></p><h2 id="h00f62a9315">microcms-js-sdkの初期化</h2><p>最初に公式で提供している<code>microcms-js-sdk</code>をインストールします。</p><pre><code>$ npm install microcms-js-sdk</code></pre><p>そして、libsフォルダの中に<code>client.js</code>を作成してSDKの初期化を行います。API_KEYはサービス設定 &gt; API-KEYから確認可能です。<code>service-domain </code>と<code>api-Key</code>を設定してください。</p><pre><code>import { createClient } from 'microcms-js-sdk';

export const client = createClient({
&nbsp; serviceDomain: 'service-domain',  // service-domain は XXXX.microcms.io の XXXX 部分
&nbsp; apiKey: 'api-key',
});</code></pre><h2 id="hb420d4fe43">microCMSから情報を取得して表示</h2><p>次に先ほど作成したmicroCMSのAPIから情報を取得して画面に表示を行います。<code>pages/index.js</code>を編集しましょう。</p><pre><code>import Head from "next/head";
import styles from "../styles/Home.module.css";
import { client } from '../libs/client';

export default function Home({ data }) {
&nbsp; return (
&nbsp; &nbsp; &lt;div className={styles.container}&gt;
&nbsp; &nbsp; &nbsp; &lt;Head&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;Create Next App&lt;/title&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;link rel="icon" href="/favicon.ico" /&gt;
&nbsp; &nbsp; &nbsp; &lt;/Head&gt;

&nbsp; &nbsp; &nbsp; &lt;main className={styles.main}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;h1 className={styles.title}&gt;{data.text}&lt;/h1&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;p className={styles.description}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Get started by editing &lt;code className={styles.code}&gt;pages/index.js&lt;/code&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/p&gt;
&nbsp; &nbsp; &nbsp; &lt;/main&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; );
}

export const getStaticProps = async () =&gt; {
&nbsp; const data = await client.get({
&nbsp; &nbsp; endpoint: 'hello',
&nbsp; });

&nbsp; return {
&nbsp; &nbsp; props: {
&nbsp; &nbsp; &nbsp; data,
&nbsp; &nbsp; },
&nbsp; };
};</code></pre><p>ここでは、<code>getStaticProps</code>を使ってmicroCMSのデータを取得しています。これは、ビルド時にサーバー側で呼ばれる関数です。この部分の処理は最終的にバンドルJSに含まれません。ビルド時にデータを取得し静的なHTMLを出力するために必要です。今回は、<code>data</code>としてmicroCMSで取得したデータを渡しています。<br><br>この状態で<code>localhost:3000</code>にアクセスしてみましょう。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/1053ccef5daf4fa683215a617b17f852/next-getting-started-2.png" alt=""><br>microCMSの入稿内容を変更して画面表示される内容が変わることも合わせてご確認ください。</p>

Next.jsとの連携

<p>主にJamstack構成としてNext.jsを利用するケースについて紹介しています。<br>Jamstackとは、端的に言えば動的なサービスを静的ファイルに事前に変換し、クライアントからのアクセス時にはCDNから配信するためのアーキテクチャです。<br><br>こちらはNext.jsを用いてブログを作成するチュートリアルです。</p>

<p><br>Jamstack構成におけるページネーションに関する記事です。</p>

<p><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/70defa0cd8404da384fc7b1273f5db78/thumbnail-nuxt.png" alt=""></p><h1 id="hbcdddd7e83">Nuxt.jsとは</h1><p>Vue.jsとNode.jsのベストプラクティスを利用し、パフォーマンスの高いアプリケーションを簡単に構築できるフレームワークです。フロントエンド初学者でも取っ付きやすい特徴があります。<br>詳しくはNuxt.jsの公式ドキュメントをご覧ください。</p>

<p>こちらのドキュメントでは、microCMSをNuxtで利用するための最短手順を示します。<br>初めてNuxtから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>Nuxtで開発するためにNodeとnpmが必要になります。ご自身の開発環境にインストールしてください。</li></ul>

<p><br>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="h39724f2208">Nuxtプロジェクトの準備</h1><p>次にNuxtのプロジェクトを作成します。Nuxtが公式で公開しているCLIを使います。下記のコマンドを実行してみましょう。</p><pre><code>$ npx create-nuxt-app nuxt-microcms</code></pre>

<p>コマンド実行時には対話形式のプロンプトが表示されますが、ご自身の環境に合わせてご自由に入力ください。<br>※ create-nuxt-appのバージョンによっては質問項目が変わってきます<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/5482e120604e468d9a11776acd130601/nuxt-getting-started-05.png" alt=""><br><br>プロジェクト作成が完了後、開発サーバーを立ち上げてみましょう。<code>dev</code>コマンドを使います。</p><pre><code>$ cd nuxt-microcms
$ npm run dev</code></pre><p>そして、<code>localhost:3000</code>にアクセスします。作成に成功してる場合下記のような画面がブラウザにでます。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/f4c34fe3f733410fa7286c4bad9dbee5/nuxt-getting-started-new-1.png" alt=""></p><h2 id="hb78937a099"><span style="color:#2b2c30">nuxt-microcms-moduleの初期化</span></h2><p>公式で提供している<code>nuxt-microcms-module</code>をインストールします。</p><pre><code>$ npm install nuxt-microcms-module</code></pre><p>そして、<code>nuxt.config.js</code>にて下記のように設定します。<code>serviceDomain</code>にはmicroCMSのサービスID（サブドメイン部分）、<code>apiKey</code>にはサービス固有のAPIキーを入力してください。</p><pre><code>export default {
  // 略

  buildModules: ["nuxt-microcms-module"],
  microcms: {
    options: {
      serviceDomain: "service-domain",
      apiKey: "api-key",
    },
    mode: process.env.NODE_ENV === "production" ? "server" : "all",
  },
};</code></pre><h1 id="hb420d4fe43">microCMSから情報を取得して表示</h1><p>次に先ほど作成したmicroCMSのAPIから情報を取得して画面に表示を行います。<br><code>pages/index.vue</code>を編集してみましょう。</p><pre><code>&lt;template&gt;
&nbsp; &lt;div class="container"&gt;
&nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &lt;h1 class="title"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; {{ text }}
&nbsp; &nbsp; &nbsp; &lt;/h1&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
&nbsp; async asyncData({ $microcms }) {
&nbsp; &nbsp; const data = await $microcms.get({
&nbsp; &nbsp; &nbsp; endpoint: 'hello',
&nbsp; &nbsp; });
&nbsp; &nbsp; return data;
&nbsp; }
}
&lt;/script&gt;</code></pre><p><br><code>asyncData()</code>というメソッドはサーバーサイドでもクライアントサイドでも動作可能です。<br>ここでAPI通信を行うことで、ビルド時の処理やページ遷移時の処理を共通化することができます。<br>参考：<a style="color:#331cbf" href="https://ja.nuxtjs.org/guide/async-data/" target="_blank" rel="noopener noreferrer">https://ja.nuxtjs.org/guide/async-data/</a><br><br><code>asyncData()</code> 内でmicroCMSと通信を行い、その結果をテンプレート側に渡して表示しています。<br><br>この状態で<code>localhost:3000</code>にアクセスしてみましょう。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/d74fe0888ae84ea3ba6d33f4722a63a5/nux-getting-started-new-2.png" alt=""><br>microCMSの入稿内容を変更して画面表示される内容が変わることも合わせてご確認ください。<br></p>

Nuxt.jsとの連携

<p>主にJamstack構成としてNuxt.jsを利用するケースについて紹介しています。<br>Jamstackとは、端的に言えば動的なサービスを静的ファイルに事前に変換し、クライアントからのアクセス時にはCDNから配信するためのアーキテクチャです。<br><br>こちらはNuxt.jsを用いてブログを作成するチュートリアルです。</p>

<p><br>その他、関連記事です。</p>

<p><a href="https://blog.microcms.io" target="_blank" rel="noopener noreferrer">microCMSブログ</a>をオープンソース化しました。<br>microCMSブログのコンテンツはmicroCMSで管理されています。<br>本チュートリアルでは、ご自身で作成したmicroCMSサービスと連携することでmicroCMSブログのクローンを作成します。</p>

<h1 id="h23061a5cab">技術構成</h1><p>microCMSブログは下記の技術構成となっています。</p><ul><li>Nuxt（SSG）</li><li>microCMS（コンテンツ）</li><li>Netlify（Hosting, Functions）</li><li>ESLint</li><li>Prettier</li><li>PostCSS</li><li>PWA</li></ul><p><br>※ 本ソースコードを完全に動作させるためにはNetlifyにホスティングする必要があります。<br></p><h1 id="h8d027c8ed3">はじめに</h1><p>microCMSのアカウント登録やサービス作成、API作成の仕方を理解している必要があります。<a href="https://microcms-docs.microcms.io/manual/getting-started" target="_blank" rel="noopener noreferrer">操作マニュアル</a>などをご確認ください。<br>Nuxtで開発するためにNodeとnpmが必要になります。ご自身の開発環境にインストールしてください。</p>

<h1 id="h8db47e6fc4">microCMSのセットアップ</h1><p>microCMSブログに合わせたAPIを作成していきます。</p><h3 id="h6246c5deb7"><br>カテゴリー</h3><p>endpoint: categories<br>type: リスト形式<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/68289e8014544f42a7ed2cfc38faa5f1/microcms-blog-clone-01.png" alt=""></p><h3 id="hf01389028b"><br>著者</h3><p>endpoint: authors<br>type: リスト形式<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/6a03b465ec314a509f1bcceb07b199bb/microcms-blog-clone-02.png" alt=""><br></p><h3 id="hfc6715af52">パートナー</h3><p>endpoint: partners<br>type: リスト形式<br>※ ブログ記事をパートナーに寄稿いただく用<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/8d8631bdd3d5440d998683f5f32d1d7b/microcms-blog-clone-03.png" alt=""><br></p><h3 id="h6cfaa47bdb">ブログ</h3><p>endpoint: blog<br>type: リスト形式<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/f9bf2d800e334ce3874dd7857da28685/microcms-blog-clone-04.png" alt=""></p><h3 id="hff0683e746"><br>人気の記事</h3><p>endpoint: popular-articles<br>type: オブジェクト形式<br>※ サイドカラムの人気の記事（手動）<br>※ 自動で選出したい場合はGoogle Analytics API等と組み合わせて定期的にPUTするなど<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/b32196fa8b0247cfbb9bad7bfbc2415d/microcms-blog-clone-05.png" alt=""><br></p><h3 id="h3ce4b3198b">バナー</h3><p>endpoint: banner<br>type: オブジェクト形式<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/36ae2d537b424634a54102c1576c81f7/microcms-blog-clone-10.png" alt=""><br><br>これら全てのAPIに対し、コンテンツをあらかじめいくつか入稿しておいてください。</p>

<h1 id="h922edff87b">実装</h1><p>まずはGitHubからmicroCMSブログのソースコードをcloneしましょう。</p>

<p>ソースコードを落としてきた後はパッケージのインストールを行います。</p><pre><code>$ npm install</code></pre><p><br></p><h2 id="hd2e4a75f9f">環境変数</h2><p>次に下記の項目を環境変数として定義します。<br>プロジェクトルートに<code>.env</code>ファイルを作成し、以下の項目を設定してください。</p><ul><li>API_KEY（microCMSのAPIキー）</li><li>SERVICE_ID（microCMSのサービスID）</li><li>GA_ID（Google AnalyticsのID）</li></ul><p>例:</p><pre><code>API_KEY=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
SERVICE_ID=your-service-id
GA_ID=UA-xxxxxxxxx-x</code></pre><p><br>これで準備が整いました。<br>下記コマンドを叩いて開発環境を起動し、<code>localhost:3000</code> にアクセスしてみましょう。</p><pre><code>$ npm run dev</code></pre><p><br>実際にご自身でmicroCMSに入稿したデータが表示されていれば成功です。<br></p><h2 id="h604b8042b8">検索機能</h2><p>microCMSブログでは記事検索時はクライアントサイドからNetlify Functions経由でmicroCMSの全文検索APIを呼び出しています。<br>Netlify Functionsは下記のコマンドでローカルでも起動させることができます。</p><pre><code>$ npm run functions:serve</code></pre><p><br>functionsを起動した状態であれば検索モジュールをローカルでも動作させることができます。<br></p><h2 id="hbebe7c482c">下書きプレビュー機能</h2><p>検索と同様、下書きプレビューの際もNetlify Functions経由でmicroCMSの下書きAPIを呼び出す形にしています。<br>こちらもfunctionsを起動した状態で<code>/draft/?id={CONTENT-ID}&amp;draftKey={DRAFT-KEY}</code>にアクセスすることでローカルでもプレビューが可能です。<br><br>また、Netlifyへのデプロイ後はmicroCMSの管理画面にて「API設定 &gt; プレビュー」で下記のように設定しておくことで、管理画面の画面プレビューボタンから下書きプレビューが見られるようになります。<br>※ example.comの部分はご自身のデプロイ先ドメインに置き換えてください<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/9c7332c7892e4bbba58f00cd50e8539e/microcms-blog-clone-06.png" alt=""><br><br>プレビューについてはこちらの記事もご参考ください。</p>

<h1 id="h9dcc071ccd">デプロイ</h1><p>デプロイはNetlifyに行いましょう。<br>アカウント登録し、GitHubのリポジトリを連携するだけでビルド＆デプロイしてくれる便利なサービスです。<br>Webhookも備えているので、microCMSの管理画面にてコンテンツを公開したのをフックにビルド＆デプロイをさせることも可能です。</p>

<p>連携時のビルドコマンドには次のように設定します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/f6f519619a50440788754b719f5f99f5/microcms-blog-clone-07.png" alt=""><br><br>このコマンドを設定することで、NuxtのSSGとNetlify Functionsの起動を行うことができます。<br><br>次に、「Show advanced」ボタンを押すと詳細な設定が可能となるので、こちらで環境変数の設定を行います。<br>（<code>.env</code> はGitHubにPushされないのでNetlifyは環境変数の中身を知ることができません。そのためNetlify側でも設定が必要です。）<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/76940658f57f476b9faf9cc07070f156/microcms-blog-clone-11.png" alt=""><br><br>ここまで設定ができたら「Deploy site」ボタンをクリックして実際にデプロイしてみましょう。<br>無事にデプロイできれば成功です。<br><br>上記の設定をし損ねてしまった場合でもNetlifyの「Site settings &gt; <span style="color:#0f1419">Build &amp; deploy 」にていつでも変更可能です。</span><br></p><h2 id="h7b0be2de2d">microCMSとの連携</h2><p>現状ではGitHubにPushしなくてはビルド＆デプロイが行われません。<br>そこで、記事を公開するたびに自動的にNetlify側でビルド＆デプロイを走らせるための設定を行います。<br>まず、Netlifyの「Site settings &gt; Build &amp; deploy &gt; Build hooks」にてWebhookを作成します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/f05cc0a655cc48178a32386d4bdc565b/microcms-blog-clone-08.png" alt=""><br><br>今度はmicroCMS管理画面の「ブログ &gt; API設定 &gt; Webhook」にてNetlifyを選択し、上記で生成したWebhook URLを設定します。<br><br><img src="https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/92261119b26847edbfdabd8d7e87d249/microcms-blog-clone-09.png" alt=""><br><br>以上で、microCMSにてコンテンツを公開・削除する度に自動的にNetlifyがビルド＆デプロイを行ってくれるようになります。<br></p><h1 id="h1afe451c43">さいごに</h1><p>もしバグなど発見しましたらIssue登録、Pull Request等お待ちしております。</p>