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 ͱɺ͍ͬͯ΋એ఻Ͱ͕͢ʜ
73. ｓ 
    ൃച༧ఆ Α͔ͬͨΒങͬͯͶʂ