iOSアプリ作成

詳細画面を作る

まずは、先ほど作ったArticle のモデルを拡張していきます。

詳細画面の繰り返しコンテンツでは、「見出し」「本文」「画像」の要素が繰り返し登場します。
そこで、ArticleContent というprotocolを用意し、それに準拠する形で要素を定義します。

import Foundation

protocol ArticleContent {}

struct HeadingContent: ArticleContent {
    let content: String
}
struct TextContent: ArticleContent {
    let content: String
}
struct ImageContent: ArticleContent {
    let imageUrl: URL
}

Articleに contents というプロパティを追加します。この配列にはHeadingContent TextContentImageContentの要素が入ります。
fieldId の情報をもとに情報をパースします。

struct Article {
    let id: String
    let title: String
    let imageUrl: URL
    let publishedAt: Date
    let contents: [ArticleContent]

    init(object: [String: Any]) {
        self.id = object["id"] as! String
        self.title = object["title"] as! String

        let imageObject = object["image"] as! [String: Any]
        self.imageUrl = URL(string: imageObject["url"] as! String)!

        let formatter = ISO8601DateFormatter()
        formatter.formatOptions.insert(.withFractionalSeconds)
        let publishedAt = formatter.date(from: object["publishedAt"] as! String)
        self.publishedAt = publishedAt!

        // 繰り返しコンテンツをパース
        let rawContents = object["body"] as! [Dictionary<String, Any>]
        let contents = rawContents.map { content -> ArticleContent in
            let fieldId = content["fieldId"] as! String
            switch fieldId {
            case "text":
                return TextContent(content: content["content"] as! String)
            case "heading":
                return HeadingContent(content: content["content"] as! String)
            case "image":
                let imageObject = content["image"] as! [String: Any]
                let imageUrlString = imageObject["url"] as! String
                return ImageContent(imageUrl: URL(string: imageUrlString)!)
            default:
                return TextContent(content: "")
            }
        }
        self.contents = contents
    }
}

ここまででモデルの拡張ができました。

次は詳細画面への遷移の部分を作っていきましょう。
まずは詳細画面の作成です。ArticleDetailという名前で以下を記述します。

import SwiftUI

struct ArticleDetail: View {
    let article: Article

    var body: some View {
        ScrollView(.vertical) {
            VStack(alignment: .leading) {
                ForEach(0..<article.contents.count, id: \.self) { num in
                    let content = article.contents[num]
                    if let heading = content as? HeadingContent {
                        Text(heading.content)
                            .font(.title3)
                            .bold()
                    } else if let text = content as? TextContent {
                        Text(text.content)
                            .font(.body)
                    } else if let image = content as? ImageContent {
                        NetworkImage(url: image.imageUrl)
                            .frame(height: 200)
                            .cornerRadius(8)
                            .padding(.bottom, 20)
                    }
                }
                .padding(8)
            }
            .padding(12)
            .navigationBarTitle(article.title, displayMode: .inline)
        }
    }
}

先ほどパースした contents の中身を見ながら要素を配置しています。

それでは、リスト画面から詳細画面への遷移を実装しましょう。NavigationLink を用いて簡単に実装できます。

struct ContentView: View {
    @ObservedObject var service = MicrocsmService()    

    var body: some View {
        NavigationView {
            List {
                ForEach(0..<service.articles.count, id: \.self) { index in
                    // ここを追加
                    NavigationLink(destination: ArticleDetail(article:  service.articles[index])) {
                        ArticleListRow(article: service.articles[index])
                    }
                }
            }.navigationTitle("すべての記事")
        }
        .onAppear {
            service.request()
        }
    }
}

以上で詳細画面を作成できました。実際にアプリを実行して確認しましょう。

このような画面が表示されていれば成功です。見出し、本文、画像が繰り返し表示されていますね。
microCMSで入稿したデータを変更し、アプリに反映されることを確認しましょう。

SDK