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

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

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

Yusuke Hosonuma

June 17, 2019
Tweet

More Decks by Yusuke Hosonuma

Other Decks in Programming

Transcript

  1. Marzipan の正体は何だったのか
    そして SwiftUI の衝撃
    Yusuke Hosonuma @ペンギン村
    Yappli Meetup #11 WWDC2019報告会 for yappliメンバー

    View full-size slide

  2. Yusuke Hosonuma
    @tobi462

    View full-size slide

  3. ペンギン村
    ࣮͸σβΠϯͨ͠ͷ๻Ͱ͢

    View full-size slide

  4. 88%$ͷײ૝
    ϘδϣϨʔɾψʔϰΥʔͷධՁ෩ʹ

    View full-size slide

  5. 4XJGU͕ൃද͞Εͨ`ͱಉ౳
    ·ͨ͸ͦΕΛ্ճΔ࠷ߴͷ88%$

    View full-size slide

  6. WWDC19 感想
    • 初参加でドキドキ!

    • 空気感は現地でしか味わえない!

    • ⼀一度は参加してみると良い経験になる!

    • 今年年はたくさんの発表があって楽しかった!

    • (でもキャッチアップが本当に⼤大変)

    View full-size slide

  7. WWDC19 思い出
    • 航空性中⽿耳炎でも⼊入国に成功

    • ♪ Billie Eilish「bad guy」にハマる

    • サンフランシスコ観光 /

    View full-size slide

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

    w w w w w w
    • キャッチアップ不不⾜足で間違ってる箇所も

    w w w w w
    あるかも

    View full-size slide

  9. Agenda
    • Marzipan(マジパン)の正体

    • SwiftUI

    • まとめ

    View full-size slide

  10. Agenda
    • Marzipan(マジパン)の正体

    • SwiftUI

    • まとめ

    View full-size slide

  11. .BS[JQBO
    ʢϚδύϯʣ
    ڈ೥ͷ88%$લʹϦʔΫͯ͠࿩୊ʹͳͬͨ

    View full-size slide

  12. Marzipan
    • iOSアプリが macOS でも動くらしい?

    • UIKit / AppKit のラッパーAPIが提供?

    • 多くの開発者は否定的な印象

    • 去年年の WWDC でティム・クックが否定
    ͷᷚͱڈ೥ͷ88%$

    View full-size slide

  13. ։ൃऀͷ༧૝
    ͨͿΜଟ͘ͷ

    View full-size slide

  14. ① iOS アプリが Mac で動く?

    View full-size slide

  15. ① iOS アプリが Mac で動く?
    J04͸.BDΞϓϦ͡Όͳ͍ʂʢౖ

    View full-size slide

  16. ② UIKit / AppKit のラッパー
    AppKit
    UIKit

    View full-size slide

  17. ② UIKit / AppKit のラッパー
    AppKit
    UIKit
    MarzipanKit ?

    View full-size slide

  18. ② UIKit / AppKit のラッパー
    AppKit
    UIKit
    MarzipanKit ?
    ৽͍͠"1*Λ֮͑Δͷʁ
    ͦΕͰ΋6*͸ҟͳΔΑʁ

    View full-size slide

  19. ࠓ೥ͷ88%$
    ͦͯ͠

    View full-size slide

  20. 予想
    • Marzipan について進捗シェア

    w w
    • ARKit 3.0(内容はわからないけど)

    • Apple Glass の発表

    • Mac Pro の発表
    ࢲͷ

    View full-size slide

  21. 結果
    • Marzipan について進捗シェア

    w w
    • ARKit 3.0

    • Apple Glass の発表

    • Mac Pro の発表

    View full-size slide

  22. 結果
    • Marzipan について進捗シェア

    w w
    • ARKit 3.0

    • Apple Glass の発表

    • Mac Pro の発表
    "QQMFͷຊؾͷൃදʂ

    View full-size slide

  23. ൃද͋ͬͨͷʁ
    ͑ͬɺ.BS[JQBOͬͯ

    View full-size slide

  24. Marzipan の正体
    w w
    • 共通的な UI 定義を⾏行行い

    • プラットフォーム側で適切に表示する仕組み

    • SwiftUI / Project Catalyst

    View full-size slide

  25. SwiftUI
    • 完全に新しい UI フレームワーク(iOS 13 〜

    • マルチプラットフォーム対応

    • iOS / iPad OS / mac OS / AppleWatch

    • Pure Swift で先進的
    w w w
    ͷͪ΄Ͳৄ͘͠

    View full-size slide

  26. SwiftUI
    4XJGU6*
    6*Λఆٛ

    View full-size slide

  27. SwiftUI
    4XJGU6*
    6*Λఆٛ
    ϓϥοτϑΥʔϜຖʹదͨ͠6*

    View full-size slide

  28. SwiftUI
    4XJGU6*
    6*Λఆٛ
    ϓϥοτϑΥʔϜຖʹదͨ͠6*
    ϓϧμ΢ϯ
    .BTUFS%FUBJM

    View full-size slide

  29. https://developer.apple.com/videos/play/wwdc2019/103/

    View full-size slide

  30. 1SPKFDU$BUBMZTU

    View full-size slide

  31. Project Catalyst
    • iPad アプリを Mac アプリとして動かす

    • 単⼀一ソースで両プラットフォームを対応

    • iPad OS / macOS Catalina

    • SwiftUI じゃなくてもかんたんに
    w w w w w w

    View full-size slide

  32. 3 steps
    1. macOS のチェックボックスを ON

    2. iPad 向けの⼤大画⾯面に対応するアプリを作る

    3. macOS 向けの機能を追加する
    w w w w w
    ϑϧϝχϡʔɺλονόʔɺଞ

    View full-size slide

  33. ͜͜·Ͱ
    ͷ·ͱΊ

    View full-size slide

  34. ここまで
    • Marzipan は共通の UI 定義をもとに

    • プラットフォーム固有の UI 表現を実現する

    • SwiftUI / Catalyst を筆頭にした

    • これからの Apple のアプリ戦略略の総称
    w w w w w w w w
    ͩͱɺ๻͸ײ͡·ͨ͠ɻ

    View full-size slide

  35. Agenda
    • Marzipan(マジパン)の正体

    • SwiftUI

    • まとめ

    View full-size slide

  36. 8IBUT4XJGU6*

    View full-size slide

  37. What’s SwiftUI
    • Less Code

    • Better Code

    • Everywhere
    1MBUGPSNTUBUFPGUIF6OJPOΑΓ

    View full-size slide

  38. What’s SwiftUI
    • Less Code

    • Better Code

    • Everywhere
    ΑΓগͳ͍ίʔυͰ

    View full-size slide

  39. What’s SwiftUI
    • Less Code

    • Better Code

    • Everywhere
    ޮ཰తʹॻ͘͜ͱ͕Ͱ͖

    View full-size slide

  40. What’s SwiftUI
    • Less Code

    • Better Code

    • Everywhere ͢΂ͯͷϓϥοτϑΥʔϜͰಈ͘

    View full-size slide

  41. 4XJGU6*ͷಛ௃

    View full-size slide

  42. SwiftUI の特徴
    • Declarative

    • Automatic

    • Compositional

    • Consistent

    View full-size slide

  43. SwiftUI の特徴
    • Declarative

    • Automatic

    • Compositional

    • Consistent

    View full-size slide

  44. Declarative
    • 宣⾔言的にコードで記述できる

    w w w w
    • どのように(How)作るのかではなく

    • どうあるべき(What)か

    • XML などではなく Pure Swift で実現

    View full-size slide

  45. SwiftUI の特徴
    • Declarative

    • Automatic

    • Compositional

    • Consistent

    View full-size slide

  46. Automatic
    • ⾃自動的にいろいろ対応してくれる

    w w w w
    • ⾔言語に応じた⽂文字の揃え

    • Light / Dark モード

    • Dynamic type

    View full-size slide

  47. SwiftUI の特徴
    • Declarative

    • Automatic

    • Compositional

    • Consistent

    View full-size slide

  48. Compositional
    • コンポーネントを組み合わせやすい

    w w w w w
    • HStack / VStack

    • ForEach で繰り返し

    • 階層をまたがったテキストの揃え
    'MVUUFSʹΘΓͱࣅͯΔ

    View full-size slide

  49. SwiftUI の特徴
    • Declarative

    • Automatic

    • Compositional

    • Consistent

    View full-size slide

  50. Consistent
    • ⼀一貫性のある仕組み

    w w w
    • 信頼できる⼀一元化されたデータから作る

    • データバインディング(Reactive)の仕組み

    • Combine フレームワーク
    3Y'MVY 3FEVY
    తͳߟ͑

    View full-size slide

  51. SwiftUI の特徴
    • Declarative

    • Automatic

    • Compositional

    • Consistent

    View full-size slide

  52. SwiftUI の特徴
    • Declarative

    • Automatic

    • Compositional

    • Consistent
    ͜ΕͬͯԿ͔ʹࣅͯ·ͤΜ͔ʁ
    ͱ͜ΖͰ

    View full-size slide

  53. HTML + CSS
    • Declarative

    • Automatic

    • Compositional

    • Consistent
    宣⾔言的に書く

    様々なデバイスで動いてくれる

    コンポーネントを組み合わせる

    (CSSは怪しいけど)⼀一貫性ある

    View full-size slide

  54. HTML + CSS
    • Declarative

    • Automatic

    • Compositional

    • Consistent
    宣⾔言的に書く

    様々なデバイスで動いてくれる

    コンポーネントを組み合わせる

    (CSSは怪しいけど)⼀一貫性ある
    4XJGU6*͸"QQMF੡඼ʹ͓͚Δ
    )5.-$44ͳҐஔ͚ͮͰ͸ʁ
    ݸਓతͳղऍͰ͕͢

    View full-size slide

  55. ࣮ࡍͷίʔυ

    View full-size slide

  56. 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"))
    }
    }
    }

    View full-size slide

  57. 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ͷఆٛ

    View full-size slide

  58. 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͕͋ͬͯ

    View full-size slide

  59. 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"))
    }
    }
    }
    τʔΫҰཡͷϦετ͕͋ͬͯ
    λΠτϧ͸͜Ε

    View full-size slide

  60. 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"))
    }
    }
    }
    બ୒Ͱ͖ΔηϧͰ ભҠઌʹ͸͜ΕΛදࣔ

    View full-size slide

  61. 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"))
    }
    }
    }
    ηϧͷத਎͸ʮը૾ʯͱ

    View full-size slide

  62. 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"))
    }
    }
    }
    λΠτϧʴ࡞ऀΛදࣔ

    View full-size slide

  63. 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"))
    }
    }
    }

    View full-size slide

  64. まとめ
    • Marzipan の正体は UI 定義の共通化と

    プラットフォーム固有の UI 提供による

    今後の Apple のアプリ戦略略(だったかも)

    • SwiftUI は先進的な UI フレームワーク

    • Apple 製品における HTML + CSS のような?

    View full-size slide

  65. 0OFNPSFUIJOH
    ͱɺ͍ͬͯ΋એ఻Ͱ͕͢ʜ

    View full-size slide

  66. s ൃച༧ఆ
    Α͔ͬͨΒങͬͯͶʂ

    View full-size slide