Upgrade to Pro — share decks privately, control downloads, hide ads and more …

カンファレンスアプリをSwiftUIで作った

 カンファレンスアプリをSwiftUIで作った

Flutter製のMTC2018アプリをSwiftUIで作り直した話です。

Masamichi Ueta

December 17, 2019
Tweet

More Decks by Masamichi Ueta

Other Decks in Programming

Transcript

  1. ΧϯϑΝϨϯεΞϓϦ
    ΛSwiftUIͰ࡞ͬͨ
    Masamchi Ueta

    potatotips #67

    View full-size slide

  2. ࣗݾ঺հ
    • ্ాխಓ(Masamichi Ueta)

    • GitHub(@masamichiueta), Twitter(@masamichiueta)

    • ϝϧϖΠ iOS

    View full-size slide

  3. Mercari Tech Conf 2018 ΞϓϦ

    View full-size slide

  4. OSS
    ✓ MVVM

    ✓ μʔΫϞʔυ

    ✓ ϩʔΧϥΠζ

    ✓ AppleͰαΠϯΠϯ
    https://github.com/mercari/mtc2018-app-SwiftUI

    View full-size slide

  5. Widget → View
    Container(
    padding: EdgeInsets.fromLTRB(8.0, 4.0, 12.0, 8.0),
    decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(100.0),
    border: const Border(
    top:
    const BorderSide(width: 1.0, color: kMtcSecondaryRed),
    left:
    const BorderSide(width: 1.0, color: kMtcSecondaryRed),
    bottom:
    const BorderSide(width: 1.0, color: kMtcSecondaryRed),
    right:
    const BorderSide(width: 1.0, color: kMtcSecondaryRed),
    )),
    child: Text(" # $tag",
    style: TextStyle(color: kMtcSecondaryRed)
    )

    View full-size slide

  6. Widget → View
    struct TagView: View {
    let tag: String
    let color: Color
    var body: some View {
    Text("# \(tag)")
    .foregroundColor(color)
    .font(.system(size: 14))
    .padding(EdgeInsets(top: 4, leading: 8, bottom:
    6, trailing: 8))
    .background(Color.clear)
    .overlay(RoundedRectangle(cornerRadius:
    100).stroke(lineWidth: 1).foregroundColor(color))
    }
    }

    View full-size slide

  7. ಉ͡Row͔Βෳ਺ͷը໘ʹભҠ
    ͢Δʹ͸ʁ

    View full-size slide

  8. List + NavigationLink
    NavigationView {
    List(0..<10) { _ in
    VStack {
    NavigationLink(destination: Text("NavigationLink1")) {
    Text("NavigationLink1")
    }
    NavigationLink(destination: Text("NavigationLink2")) {
    Text("NavigationLink2")
    }
    }
    }
    }

    View full-size slide

  9. ScrollView+NavigationLink
    NavigationView {
    ScrollView {
    ForEach(0..<10) { _ in
    VStack {
    NavigationLink(destination: Text("NavigationLink1")) {
    Text("NavigationLink1")
    }
    NavigationLink(destination: Text("NavigationLink2")) {
    Text("NavigationLink2")
    }
    Divider()
    }
    }
    }
    }

    View full-size slide

  10. PageView
    PageView([
    ScrollView(.vertical, showsIndicators: true) {
    ForEach(viewModel.trackASessions, id: \.id) { session in
    VStack {
    TimeTableRow(session: session)
    Divider()
    }
    }
    },
    ScrollView(.vertical, showsIndicators: true) {
    ForEach(viewModel.trackBSessions, id: \.id) { session in
    VStack {
    TimeTableRow(session: session)
    Divider()
    }
    }
    }
    ], currentPage: $page)

    View full-size slide

  11. PageView+pop…
    • ެࣜνϡʔτϦΞϧͷPageView

    • Interfacing with UIKit

    • https://developer.apple.com/tutorials/swiftui/interfacing-
    with-uikit

    • NavigationLinkΛஔ͍ͯPop͢ΔͱXcode11.2.1ͰΫϥογϡ


    • ͱࢥͬͨΒXcode11.3ͰΫϥογϡ͠ͳ͘ͳ͍ͬͯͨ(Trying
    to pop to a missing destinationͱ͍͏ϝοηʔδ͸ग़Δ)

    View full-size slide

  12. ͦͷଞ
    • ϦϞʔτը૾ͷऔಘɺΩϟογϡ

    • MVVMʢࢀߟ: https://github.com/kitasuke/SwiftUI-MVVM

    • WebViewʢWKWebViewʣ

    • ActivityIndicator

    View full-size slide

  13. ײ૝
    • SwiftUI͸࡞Γ΍͔ͬͨ͢(Declarative, Component)

    • ίϯϙʔωϯτ଍Γͳ͍ɺࢥΘ͵ಈ࡞Λ͢Δ৔߹͕͋Δ

    • Flutterͷํ͕νϡʔτϦΞϧ΍ίϯϙʔωϯτ͕ॆ࣮ͯ͠
    ͍ͨͷͰɺ࡞Γ΍͔ͬͨ͢ؾ͕͢Δ

    • SwiftUI΋΋ͬͱαϯϓϧ΍Tips͕ग़͖ͯͯཉ͍͠

    View full-size slide

  14. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    • Flutter੡MTC2018ΞϓϦΛSwiftUIͰϦϥΠτͨ͠࿩ʢϝ
    ϧΧϦ ΞυϕϯτΧϨϯμʔ7೔໨ʣby @jollyjoaster

    • https://tech.mercari.com/entry/2019/12/07/090000

    • mercari/mtc2018-app-SwiftUI

    • https://github.com/mercari/mtc2018-app-SwiftUI

    View full-size slide