Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

About

Slide 3

Slide 3 text

Yusuke Hosonuma @tobi462

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

WWDC19 感想 • 初参加でドキドキ！ • 空気感は現地でしか味わえない！ • ⼀一度は参加してみると良い経験になる！ • 今年年はたくさんの発表があって楽しかった！ • （でもキャッチアップが本当に⼤大変）

Slide 8

Slide 8 text

WWDC19 思い出 • 航空性中⽿耳炎でも⼊入国に成功 • ♪ Billie Eilish「bad guy」にハマる • サンフランシスコ観光 /

Slide 9

Slide 9 text

おことわり • 本⽇日の資料料には個⼈人的な⾒見見解を含みます w w w w w w • キャッチアップ不不⾜足で間違ってる箇所も
 w w w w w あるかも

Slide 10

Slide 10 text

"HFOEB 5PEBZ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Marzipan • iOSアプリが macOS でも動くらしい？ • UIKit / AppKit のラッパーAPIが提供？ • 多くの開発者は否定的な印象 • 去年年の WWDC でティム・クックが否定 ͷᷚͱڈ೥ͷ88%$

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

① iOS アプリが Mac で動く？

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

② UIKit / AppKit のラッパー AppKit UIKit

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

ࠓ೥ͷ88%$ ͦͯ͠

Slide 22

Slide 22 text

予想 • Marzipan について進捗シェア w w • ARKit 3.0（内容はわからないけど） • Apple Glass の発表 • Mac Pro の発表 ࢲͷ

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

結果 • Marzipan について進捗シェア w w • ARKit 3.0 • Apple Glass の発表 • Mac Pro の発表 "QQMFͷຊؾͷൃදʂ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

4XJGU6*

Slide 28

Slide 28 text

SwiftUI • 完全に新しい UI フレームワーク（iOS 13 〜 • マルチプラットフォーム対応 • iOS / iPad OS / mac OS / AppleWatch • Pure Swift で先進的 w w w ͷͪ΄Ͳৄ͘͠

Slide 29

Slide 29 text

SwiftUI 4XJGU6* 6*Λఆٛ

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

1SPKFDU$BUBMZTU

Slide 34

Slide 34 text

Project Catalyst • iPad アプリを Mac アプリとして動かす • 単⼀一ソースで両プラットフォームを対応 • iPad OS / macOS Catalina • SwiftUI じゃなくてもかんたんに w w w w w w

Slide 35

Slide 35 text

3 steps 1. macOS のチェックボックスを ON 2. iPad 向けの⼤大画⾯面に対応するアプリを作る 3. macOS 向けの機能を追加する w w w w w ϑϧϝχϡʔɺλονόʔɺଞ

Slide 36

Slide 36 text

͜͜·Ͱ ͷ·ͱΊ

Slide 37

Slide 37 text

ここまで • Marzipan は共通の UI 定義をもとに • プラットフォーム固有の UI 表現を実現する • SwiftUI / Catalyst を筆頭にした • これからの Apple のアプリ戦略略の総称 w w w w w w w w ͩͱɺ๻͸ײ͡·ͨ͠ɻ

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

8IBUT4XJGU6*

Slide 40

Slide 40 text

What’s SwiftUI • Less Code • Better Code • Everywhere 1MBUGPSNTUBUFPGUIF6OJPOΑΓ

Slide 41

Slide 41 text

What’s SwiftUI • Less Code • Better Code • Everywhere ΑΓগͳ͍ίʔυͰ

Slide 42

Slide 42 text

What’s SwiftUI • Less Code • Better Code • Everywhere ޮ཰తʹॻ͘͜ͱ͕Ͱ͖

Slide 43

Slide 43 text

What’s SwiftUI • Less Code • Better Code • Everywhere ͢΂ͯͷϓϥοτϑΥʔϜͰಈ͘

Slide 44

Slide 44 text

4XJGU6*ͷಛ௃

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Declarative • 宣⾔言的にコードで記述できる w w w w • どのように（How）作るのかではなく • どうあるべき（What）か • XML などではなく Pure Swift で実現

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Automatic • ⾃自動的にいろいろ対応してくれる w w w w • ⾔言語に応じた⽂文字の揃え • Light / Dark モード • Dynamic type

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Compositional • コンポーネントを組み合わせやすい w w w w w • HStack / VStack • ForEach で繰り返し • 階層をまたがったテキストの揃え 'MVUUFSʹΘΓͱࣅͯΔ

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Consistent • ⼀一貫性のある仕組み w w w • 信頼できる⼀一元化されたデータから作る • データバインディング（Reactive）の仕組み • Combine フレームワーク 3Y'MVY 3FEVY తͳߟ͑

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

SwiftUI の特徴 • Declarative • Automatic • Compositional • Consistent ͜ΕͬͯԿ͔ʹࣅͯ·ͤΜ͔ʁ ͱ͜ΖͰ

Slide 56

Slide 56 text

)5.-$44

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

࣮ࡍͷίʔυ

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

%FNP

Slide 69

Slide 69 text

·ͱΊ

Slide 70

Slide 70 text

まとめ • Marzipan の正体は UI 定義の共通化と
 プラットフォーム固有の UI 提供による
 今後の Apple のアプリ戦略略（だったかも） • SwiftUI は先進的な UI フレームワーク • Apple 製品における HTML + CSS のような？

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

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