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

Transcript

1. Marzipan の正体は何だったのか そして SwiftUI の衝撃 Yusuke Hosonuma @ペンギン村 Yappli Meetup

   #11 WWDC2019報告会 for yappliメンバー

2. About

3. Yusuke Hosonuma @tobi462

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

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

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

7. WWDC19 感想 • 初参加でドキドキ！ • 空気感は現地でしか味わえない！ • ⼀一度は参加してみると良い経験になる！ • 今年年はたくさんの発表があって楽しかった！

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

8. WWDC19 思い出 • 航空性中⽿耳炎でも⼊入国に成功 • ♪ Billie Eilish「bad guy」にハマる •

   サンフランシスコ観光 /

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

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

10. "HFOEB 5PEBZ

11. Agenda • Marzipan（マジパン）の正体 • SwiftUI • まとめ

12. Agenda • Marzipan（マジパン）の正体 • SwiftUI • まとめ

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

14. Marzipan • iOSアプリが macOS でも動くらしい？ • UIKit / AppKit のラッパーAPIが提供？

    • 多くの開発者は否定的な印象 • 去年年の WWDC でティム・クックが否定 ͷᷚͱڈ೥ͷ
    88%$

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

16. ① iOS アプリが Mac で動く？

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

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

19. ② UIKit / AppKit のラッパー AppKit UIKit MarzipanKit ？

20. ② UIKit / AppKit のラッパー AppKit UIKit MarzipanKit ？ ৽͍͠
    "1*
    Λ֮͑Δͷʁ
    

    ͦΕͰ΋
    6*
    ͸ҟͳΔΑʁ

21. ࠓ೥ͷ88%$ ͦͯ͠

22. 予想 • Marzipan について進捗シェア w w • ARKit 3.0（内容はわからないけど） •

    Apple Glass の発表 • Mac Pro の発表 ࢲͷ

23. 結果 • Marzipan について進捗シェア w w • ARKit 3.0 •

    Apple Glass の発表 • Mac Pro の発表

24. 結果 • Marzipan について進捗シェア w w • ARKit 3.0 •

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

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

26. Marzipan の正体 w w • 共通的な UI 定義を⾏行行い • プラットフォーム側で適切に表示する仕組み

    • SwiftUI / Project Catalyst

27. 4XJGU6*

28. SwiftUI • 完全に新しい UI フレームワーク（iOS 13 〜 • マルチプラットフォーム対応 •

    iOS / iPad OS / mac OS / AppleWatch • Pure Swift で先進的 w w w ͷͪ΄Ͳৄ͘͠

29. SwiftUI 4XJGU6* 6*Λఆٛ

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

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

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

33. 1SPKFDU
    $BUBMZTU

34. Project Catalyst • iPad アプリを Mac アプリとして動かす • 単⼀一ソースで両プラットフォームを対応 •

    iPad OS / macOS Catalina • SwiftUI じゃなくてもかんたんに w w w w w w

35. 3 steps 1. macOS のチェックボックスを ON 2. iPad 向けの⼤大画⾯面に対応するアプリを作る 3.

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

36. ͜͜·Ͱ ͷ·ͱΊ

37. ここまで • Marzipan は共通の UI 定義をもとに • プラットフォーム固有の UI 表現を実現する

    • SwiftUI / Catalyst を筆頭にした • これからの Apple のアプリ戦略略の総称 w w w w w w w w ͩͱɺ๻͸ײ͡·ͨ͠ɻ

38. Agenda • Marzipan（マジパン）の正体 • SwiftUI • まとめ

39. 8IBUT
    4XJGU6*

40. What’s SwiftUI • Less Code • Better Code • Everywhere

    1MBUGPSN
    TUBUF
    PG
    UIF
    6OJPO
    ΑΓ

41. What’s SwiftUI • Less Code • Better Code • Everywhere

    ΑΓগͳ͍ίʔυͰ

42. What’s SwiftUI • Less Code • Better Code • Everywhere

    ޮ཰తʹॻ͘͜ͱ͕Ͱ͖

43. What’s SwiftUI • Less Code • Better Code • Everywhere

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

44. 4XJGU6*
    ͷಛ௃

45. SwiftUI の特徴 • Declarative • Automatic • Compositional • Consistent

46. SwiftUI の特徴 • Declarative • Automatic • Compositional • Consistent

47. Declarative • 宣⾔言的にコードで記述できる w w w w • どのように（How）作るのかではなく •

    どうあるべき（What）か • XML などではなく Pure Swift で実現

48. SwiftUI の特徴 • Declarative • Automatic • Compositional • Consistent

49. Automatic • ⾃自動的にいろいろ対応してくれる w w w w • ⾔言語に応じた⽂文字の揃え •

    Light / Dark モード • Dynamic type

50. SwiftUI の特徴 • Declarative • Automatic • Compositional • Consistent

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

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

52. SwiftUI の特徴 • Declarative • Automatic • Compositional • Consistent

53. Consistent • ⼀一貫性のある仕組み w w w • 信頼できる⼀一元化されたデータから作る • データバインディング（Reactive）の仕組み

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

54. SwiftUI の特徴 • Declarative • Automatic • Compositional • Consistent

55. SwiftUI の特徴 • Declarative • Automatic • Compositional • Consistent

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

56. )5.-
    
    $44

57. HTML + CSS • Declarative • Automatic • Compositional •

    Consistent 宣⾔言的に書く 様々なデバイスで動いてくれる コンポーネントを組み合わせる （CSSは怪しいけど）⼀一貫性ある

58. HTML + CSS • Declarative • Automatic • Compositional •

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

59. ࣮ࡍͷίʔυ

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

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")) } } } 7JFX
    ͷఆٛ

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")) } } } /BWJHBUJPO7JFX
    ͕͋ͬͯ

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

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

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

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

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

68. %FNP

69. ·ͱΊ

70. まとめ • Marzipan の正体は UI 定義の共通化と
 プラットフォーム固有の UI 提供による
 今後の

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

71. 0OF
    NPSF
    UIJOH ͱɺ͍ͬͯ΋એ఻Ͱ͕͢ʜ

72. None

73. ｓ 
    ൃച༧ఆ Α͔ͬͨΒങͬͯͶʂ