microCMS

Getting Started

最終更新日:2023年06月14日

こちらのドキュメントでは、microCMSをAndroidアプリケーションから利用するための最短手順を示します。
初めてAndroidアプリケーションからmicroCMSをご利用される場合にはまずはこちらの手順をお試しください。

事前に確認が必要なこと

  • microCMSのアカウント登録やサービス作成、API作成の仕方を理解している必要があります。操作マニュアルなどをご確認ください。
  • Androidの開発環境が必要です。Android Studio公式サイトを参考に、準備を行ってください。
  • microcms-android-sdk の利用要件を満たしている必要があります。対応プラットフォームやライセンスなどご理解いただいたうえでご利用ください。
はじめに
https://document.microcms.io/manual/getting-started
Android Studio をインストールする  |  Android Developers
https://developer.android.com/studio/install?hl=ja
GitHub - microcmsio/microcms-android-sdk
https://github.com/microcmsio/microcms-android-sdk

microCMSのセットアップ

まずはmicroCMSで非常に単純なAPIを作成します。

  • オブジェクト形式
  • テキストフィールド1つ


設定例を以下に示していきます。APIの作成の詳細手順についてはAPIの作成もご参照ください。

APIの作成
https://document.microcms.io/manual/create-api

APIの作成画面で適当なAPI名とエンドポイントを入力します。



次にオブジェクト形式を選択します。



最後にフィールドを設定します。今回はテキストフィールドを一つのみ設定します。



上記設定でAPIを作成すると非常にシンプルな入稿画面ができあがるため値を入稿して公開します。



以下のようなcurlコマンドでJSONを取得できることも確認しておきましょう。(ターミナル等を開かなくても、上記画面内の「APIプレビュー」で即座に確認可能です)

curl "https://YOUR_SERVICE.microcms.io/api/v1/YOUR_ENDPOINT" -H "X-API-KEY: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"


Androidアプリの開発

次にAndroidアプリ側の開発を行います。
まずは通常通り、Androidプロジェクトを作成します。(Android Studio 4.1.3にて確認済み)
テンプレートとして「Empty Actity」します。



SDKの読み込み

microcms-android-sdk は Maven Central にて配布しています。
デフォルトでは参照先には含まれていないため、まずはルートのbuild.gradleに追記します。

buildscript {
    //...

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

    //...
}


次に依存関係を追加します。

dependencies {
    implementation 'io.microcms:android-sdk:2.1.0'  //この行を追加

    //...
}


SDKの読み込みは以上です。

microCMSから情報を取得して表示

次に先ほど作成したmicroCMSのAPIから情報を取得して画面に表示を行います。
まずはデフォルトで表示されているテキストにidを設定しておきましょう。



次にAndroidManifest.xmlを編集します。microCMSからの情報取得には通信が必須となるため、INTERNETパーミッションを付与しておきます。

<uses-permission android:name="android.permission.INTERNET"/>


最後にMainActivity.ktです。SDKを使った情報取得と画面表示を行います。

import io.microcms.android.MicrocmsClient

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

        //ここから追加
        val textView = findViewById<TextView>(R.id.text)
        val client = MicrocmsClient("YOUR_SERVICE", "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX")
        client.get("YOUR_ENDPOINT") { result ->
            result.onSuccess { json ->
                textView.text = json.getString("text")
            }
        }
        //ここまで
    }
}


この状態で実行するとmicroCMSに入稿した内容を取得し、画面表示が行われます。



microCMSの入稿内容も変更すると画面表示される内容が変わることも合わせてご確認ください。