microCMS

Getting Started

最終更新日:2023年07月12日

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

microCMSテンプレートでの事例

microCMSテンプレートではiOS用のテンプレートの事例もございます。

microCMSテンプレート
https://templates.microcms.io/

1クリックですぐに構築済みの環境をお試しいただけますので、ぜひこちらもご参考にしてください。
お知らせ一覧 for iOS | microCMSテンプレート


以下、ご自身でセットアップする場合の方法となります。

事前に確認が必要なこと

  • microCMSのアカウント登録やサービス作成、API作成の仕方を理解している必要があります。操作マニュアルなどをご確認ください。
  • iOSの開発環境が必要です。Xcodeなどの必要な開発環境を事前にご準備ください。
  • microcms-ios-sdk の利用要件を満たしている必要があります。対応プラットフォームやライセンスなどご理解いただいたうえでご利用ください。


microCMS | APIベースの日本製ヘッドレスCMS
https://microcms-docs.microcms.io/manual/getting-started
‎Xcode
https://apps.apple.com/jp/app/xcode/id497799835?mt=12
GitHub - microcmsio/microcms-ios-sdk
https://github.com/microcmsio/microcms-ios-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"


iOSアプリの開発

iOSアプリ側の開発を行います。
まずはiOSプロジェクトの作成です。「App」を選択して「Next」を選択します。



アプリ名は「HelloMicroCms」とします。
今回はStoryboardを使った方法を紹介しますが、SwiftUIでもほぼ同じコードで動作します。


SDKの読み込み

microcms-ios-sdk は Swift Package Manager で配布しています。
Xcode のメニューから「File > Swift Packager > Add Package Dependency...」を選択します。


URLを入力する画面が表示されるので microcms-ios-sdk のGitHubのURLを入力します。

  • https://github.com/microcmsio/microcms-ios-sdk



次に利用するSDKのバージョンを指定します。ここでは 2.2.0 を指定します。
利用可能なバージョンについてはGitHubページでご確認ください。


最後に追加先のTargetの確認が表示されるので、このままFinishします。


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

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

先ほど作成したmicroCMSのAPIから情報を取得して画面に表示を行います。
Main.storyboard を開き、Label を画面の中央に追加しましょう。


このLabelのOutletを繋ぎ、labelという変数名で定義します。

class ViewController: UIViewController {
    @IBOutlet weak var label: UILabel!
}


次に、SDKを使った情報取得の処理をViewController.swiftに追加します。
今回は画面表示のタイミングで情報を表示するので、viewDidLoad() 内で処理を行います。

import UIKit

// 1. import文を追加
import MicrocmsSDK

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

    override func viewDidLoad() {
        super.viewDidLoad()

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

        // 3. SDKで情報を取得して画面に表示
        client.get(endpoint: "YOUR_ENDPOINT") { [weak self] result in
            switch result {
            case .success(let object):
                if let object = object as? [String: Any],
                   let title = object["title"] as? String {
                    self?.label.text = title
                }
            case .failure(let error):
                print("[Error] \(error)")
            }
        }
    }
}


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



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