Getting Started
こちらのドキュメントでは、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の入稿内容も変更すると画面表示される内容が変わることも合わせてご確認ください。