실현하는 것

전체 이미지

자세히 보자.

speciesData.json

"detailText": [
    "コガタペンギンは保護色があり、青い背中は上から見れば海と同じに見え、白い腹は下の捕食者と獲物を迷惑させることができます。したがって、夜に波から上陸するとき、海岸に打ち寄せる白い波が突然立ち上がって、コガタペンギンの群れになったように見えます。",
    "これはまさにおとぎ話のようで、英語では「フェアリーペンギン(Fairy Penguin)」とも呼ばれています。",
    "<image>02</image>",
    "<caption>夜に帰ってくるコガタペンキンの群れ。画像：Phillipislandtourism / Wikimedia Commons</caption>",
    "コガタペンギンの平均寿命は６〜７年くらいですが、飼育下では20年を超えることもあります。",
]

상기의 코드로 생성된 것은 이쪽⬇️

이와 같이, 문자열(String)만의 데이터를 바탕으로,


콘텐츠
설명


본문(Text)
본문

이미지(Image)
이미지 번호

이미지 설명문(Text)
설명문


혼합 멀티미디어 콘텐츠를 기본 UI에서 자동으로 생성합니다.

여기는 예시이므로, 콘텐츠의 종류와 기술 방법은 간단하게 커스터마이즈 할 수 있습니다.

구현 방법

정규식으로 설명 인식

정규 표현에 자세하지 않아도 괜찮습니다.
먼저 특정 문자열이 지정한 패턴과 일치하는지 가르쳐주는 것으로 기억해 봅시다.

예를 들어, ""로 시작하고 ""로 끝나는 문자열인지 여부를 결정합니다.

패턴 정의

RegularExpression.swift

enum RegexPattern: String {
    case image = "^<image>.*</image>$"
    case caption = "^<caption>.*</caption>$"
}

"^.*$"라는 패턴은
""로 시작하고 ""로 끝나는 것을 의미합니다.
이 부분을 다시 작성하면 작성 방법을 사용자 정의할 수 있습니다.

일치 판단 및 태그 삭제

RegularExpression.swift

import Foundation

extension String {
    //正規表現の一致判断
    func match(pattern:RegexPattern) -> Bool {
        let pattern = pattern.rawValue
        let regex = try! NSRegularExpression(pattern:pattern)
        return regex.firstMatch(in:self, range:NSRange(self.startIndex..., in:self)) != nil
    }

    //両端のタグの削除
    func strip() -> String {
        let lstrip = self.replacingOccurrences(of:"^<\\w+>", with:"", options:NSString.CompareOptions.regularExpression, range:self.range(of:self))
        return lstrip.replacingOccurrences(of:"</\\w+>$", with:"", options:NSString.CompareOptions.regularExpression, range:lstrip.range(of:lstrip))
    }
}

여기에서는, 호출하기 쉽게 하기 위해서, String형의 메소드로서 구현합니다.

네이티브 UI 생성

SpeciesDetail.swift

import SwiftUI

struct SpeciesDetail: View {
    var species: Species

    var body: some View {
        ScrollView {
            VStack {
                //文字列ごと処理
                ForEach(self.species.detailText, id: \.self) { text -> AnyView in
                    //imageのパターンと一致した場合
                    if text.match(pattern: .image) {
                        return AnyView(
                            //SwiftUIのImageを利用し、画像コンテンツの表示をカスタマイズ
                            Image("\(self.species.imageName)_\(text.strip())")
                            .resizable()
                            .scaledToFit()
                        )
                    //captionのパターンと一致した場合
                    } else if text.match(pattern: .caption){
                        return AnyView(
                            //SwiftUIのTextを利用し、画像の説明文の表示をカスタマイズ
                            Text(text.strip())
                            .foregroundColor(Color.gray)
                            .font(.custom("Baskerville", size: 16))
                        )
                    //どのパターンとも一致しない場合
                    } else {
                        return AnyView(
                            //SwiftUIのTextを利用し、本文の表示をカスタマイズ
                            Text("　" + text)
                            .padding(.top, 18)
                            .font(.custom("Baskerville", size: 20))
                            .lineSpacing(12)
                            .fixedSize(horizontal: false, vertical: true)
                        )
                    }
                }
            }
            .padding()
        }
    }
}

struct SpeciesDetail_Previews: PreviewProvider {
    static var previews: some View {
        SpeciesDetail(species: speciesData[0])
    }
}

풀코드

이상은 내 앱의 일부로 구현됩니다.
자세한 내용은 여기 (GitHub로)을 참조하십시오.