Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Marzipan の正体は何だったのか そして SwiftUI の衝撃/wwdc19_mar...

Marzipan の正体は何だったのか そして SwiftUI の衝撃/wwdc19_marzipan_swiftui

Yusuke Hosonuma

June 17, 2019
Tweet

More Decks by Yusuke Hosonuma

Other Decks in Programming

Transcript

  1. おことわり • 本⽇日の資料料には個⼈人的な⾒見見解を含みます w w w w w w •

    キャッチアップ不不⾜足で間違ってる箇所も
 w w w w w あるかも
  2. Marzipan • iOSアプリが macOS でも動くらしい? • UIKit / AppKit のラッパーAPIが提供?

    • 多くの開発者は否定的な印象 • 去年年の WWDC でティム・クックが否定 ͷᷚͱڈ೥ͷ88%$
  3. 結果 • Marzipan について進捗シェア w w • ARKit 3.0 •

    Apple Glass の発表 • Mac Pro の発表
  4. 結果 • Marzipan について進捗シェア w w • ARKit 3.0 •

    Apple Glass の発表 • Mac Pro の発表 "QQMFͷຊؾͷൃදʂ
  5. SwiftUI • 完全に新しい UI フレームワーク(iOS 13 〜 • マルチプラットフォーム対応 •

    iOS / iPad OS / mac OS / AppleWatch • Pure Swift で先進的 w w w ͷͪ΄Ͳৄ͘͠
  6. ここまで • Marzipan は共通の UI 定義をもとに • プラットフォーム固有の UI 表現を実現する

    • SwiftUI / Catalyst を筆頭にした • これからの Apple のアプリ戦略略の総称 w w w w w w w w ͩͱɺ๻͸ײ͡·ͨ͠ɻ
  7. Declarative • 宣⾔言的にコードで記述できる w w w w • どのように(How)作るのかではなく •

    どうあるべき(What)か • XML などではなく Pure Swift で実現
  8. Compositional • コンポーネントを組み合わせやすい w w w w w • HStack

    / VStack • ForEach で繰り返し • 階層をまたがったテキストの揃え 'MVUUFSʹΘΓͱࣅͯΔ
  9. HTML + CSS • Declarative • Automatic • Compositional •

    Consistent 宣⾔言的に書く 様々なデバイスで動いてくれる コンポーネントを組み合わせる (CSSは怪しいけど)⼀一貫性ある
  10. HTML + CSS • Declarative • Automatic • Compositional •

    Consistent 宣⾔言的に書く 様々なデバイスで動いてくれる コンポーネントを組み合わせる (CSSは怪しいけど)⼀一貫性ある 4XJGU6*͸"QQMF੡඼ʹ͓͚Δ )5.- $44ͳҐஔ͚ͮͰ͸ʁ ݸਓతͳղऍͰ͕͢
  11. struct ContentView : View { var talks: [Talk] = []

    var body: some View { NavigationView { List(talks) { talk in NavigationButton(destination: Text(talk.title)) { Image(talk.imageName) .cornerRadius(8) VStack(alignment: .leading) { Text(talk.title) Text(talk.author) .font(.subheadline) .foregroundColor(.secondary) } } }.navigationBarTitle(Text("Yappli Meetup #11")) } } }
  12. struct ContentView : View { var talks: [Talk] = []

    var body: some View { NavigationView { List(talks) { talk in NavigationButton(destination: Text(talk.title)) { Image(talk.imageName) .cornerRadius(8) VStack(alignment: .leading) { Text(talk.title) Text(talk.author) .font(.subheadline) .foregroundColor(.secondary) } } }.navigationBarTitle(Text("Yappli Meetup #11")) } } } 7JFXͷఆٛ
  13. struct ContentView : View { var talks: [Talk] = []

    var body: some View { NavigationView { List(talks) { talk in NavigationButton(destination: Text(talk.title)) { Image(talk.imageName) .cornerRadius(8) VStack(alignment: .leading) { Text(talk.title) Text(talk.author) .font(.subheadline) .foregroundColor(.secondary) } } }.navigationBarTitle(Text("Yappli Meetup #11")) } } } /BWJHBUJPO7JFX͕͋ͬͯ
  14. struct ContentView : View { var talks: [Talk] = []

    var body: some View { NavigationView { List(talks) { talk in NavigationButton(destination: Text(talk.title)) { Image(talk.imageName) .cornerRadius(8) VStack(alignment: .leading) { Text(talk.title) Text(talk.author) .font(.subheadline) .foregroundColor(.secondary) } } }.navigationBarTitle(Text("Yappli Meetup #11")) } } } τʔΫҰཡͷϦετ͕͋ͬͯ λΠτϧ͸͜Ε
  15. struct ContentView : View { var talks: [Talk] = []

    var body: some View { NavigationView { List(talks) { talk in NavigationButton(destination: Text(talk.title)) { Image(talk.imageName) .cornerRadius(8) VStack(alignment: .leading) { Text(talk.title) Text(talk.author) .font(.subheadline) .foregroundColor(.secondary) } } }.navigationBarTitle(Text("Yappli Meetup #11")) } } } બ୒Ͱ͖ΔηϧͰ ભҠઌʹ͸͜ΕΛදࣔ
  16. struct ContentView : View { var talks: [Talk] = []

    var body: some View { NavigationView { List(talks) { talk in NavigationButton(destination: Text(talk.title)) { Image(talk.imageName) .cornerRadius(8) VStack(alignment: .leading) { Text(talk.title) Text(talk.author) .font(.subheadline) .foregroundColor(.secondary) } } }.navigationBarTitle(Text("Yappli Meetup #11")) } } } ηϧͷத਎͸ʮը૾ʯͱ
  17. struct ContentView : View { var talks: [Talk] = []

    var body: some View { NavigationView { List(talks) { talk in NavigationButton(destination: Text(talk.title)) { Image(talk.imageName) .cornerRadius(8) VStack(alignment: .leading) { Text(talk.title) Text(talk.author) .font(.subheadline) .foregroundColor(.secondary) } } }.navigationBarTitle(Text("Yappli Meetup #11")) } } } λΠτϧʴ࡞ऀΛදࣔ
  18. struct ContentView : View { var talks: [Talk] = []

    var body: some View { NavigationView { List(talks) { talk in NavigationButton(destination: Text(talk.title)) { Image(talk.imageName) .cornerRadius(8) VStack(alignment: .leading) { Text(talk.title) Text(talk.author) .font(.subheadline) .foregroundColor(.secondary) } } }.navigationBarTitle(Text("Yappli Meetup #11")) } } }
  19. まとめ • Marzipan の正体は UI 定義の共通化と
 プラットフォーム固有の UI 提供による
 今後の

    Apple のアプリ戦略略(だったかも) • SwiftUI は先進的な UI フレームワーク • Apple 製品における HTML + CSS のような?