Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Marzipan の正体は何だったのか そして SwiftUI の衝撃/wwdc19_marzipan_swiftui
Yusuke Hosonuma
June 17, 2019
Programming
2
440
Marzipan の正体は何だったのか そして SwiftUI の衝撃/wwdc19_marzipan_swiftui
Yusuke Hosonuma
June 17, 2019
Tweet
Share
More Decks by Yusuke Hosonuma
See All by Yusuke Hosonuma
yusukehosonuma
1
750
yusukehosonuma
4
9.7k
yusukehosonuma
4
880
yusukehosonuma
1
3.5k
yusukehosonuma
0
220
yusukehosonuma
7
9.8k
yusukehosonuma
16
13k
yusukehosonuma
2
2.2k
yusukehosonuma
9
4.2k
Other Decks in Programming
See All in Programming
line_developers_tw2
0
720
standfm
0
120
bkuhlmann
4
620
itosho525
0
140
pdone
0
210
supikiti
3
1.3k
fkubota
1
400
loleg
0
210
standfm
0
240
malvinstn
1
650
line_developers_tw
0
530
decoc
1
340
Featured
See All Featured
jacobian
255
20k
pedronauck
652
110k
shlominoach
176
7.4k
bkeepers
52
4.1k
paulrobertlloyd
71
1.4k
hannesfritz
27
930
erikaheidi
13
4.2k
marcelosomers
220
15k
jensimmons
207
10k
sugarenia
233
830k
malarkey
393
60k
skipperchong
7
670
Transcript
Marzipan の正体は何だったのか そして SwiftUI の衝撃 Yusuke Hosonuma @ペンギン村 Yappli Meetup
#11 WWDC2019報告会 for yappliメンバー
About
Yusuke Hosonuma @tobi462
ペンギン村 ࣮σβΠϯͨ͠ͷͰ͢
88%$ͷײ ϘδϣϨʔɾψʔϰΥʔͷධՁ෩ʹ
4XJGU͕ൃද͞Εͨ`ͱಉ ·ͨͦΕΛ্ճΔ࠷ߴͷ88%$
WWDC19 感想 • 初参加でドキドキ! • 空気感は現地でしか味わえない! • ⼀一度は参加してみると良い経験になる! • 今年年はたくさんの発表があって楽しかった!
• (でもキャッチアップが本当に⼤大変)
WWDC19 思い出 • 航空性中⽿耳炎でも⼊入国に成功 • ♪ Billie Eilish「bad guy」にハマる •
サンフランシスコ観光 /
おことわり • 本⽇日の資料料には個⼈人的な⾒見見解を含みます w w w w w w •
キャッチアップ不不⾜足で間違ってる箇所も w w w w w あるかも
"HFOEB 5PEBZ
Agenda • Marzipan(マジパン)の正体 • SwiftUI • まとめ
Agenda • Marzipan(マジパン)の正体 • SwiftUI • まとめ
.BS[JQBO ʢϚδύϯʣ ڈͷ88%$લʹϦʔΫͯ͠ʹͳͬͨ
Marzipan • iOSアプリが macOS でも動くらしい? • UIKit / AppKit のラッパーAPIが提供?
• 多くの開発者は否定的な印象 • 去年年の WWDC でティム・クックが否定 ͷᷚͱڈͷ88%$
։ൃऀͷ༧ ͨͿΜଟ͘ͷ
① iOS アプリが Mac で動く?
① iOS アプリが Mac で動く? J04.BDΞϓϦ͡Όͳ͍ʂʢౖ
② UIKit / AppKit のラッパー AppKit UIKit
② UIKit / AppKit のラッパー AppKit UIKit MarzipanKit ?
② UIKit / AppKit のラッパー AppKit UIKit MarzipanKit ? ৽͍͠"1*Λ֮͑Δͷʁ
ͦΕͰ6*ҟͳΔΑʁ
ࠓͷ88%$ ͦͯ͠
予想 • Marzipan について進捗シェア w w • ARKit 3.0(内容はわからないけど) •
Apple Glass の発表 • Mac Pro の発表 ࢲͷ
結果 • Marzipan について進捗シェア w w • ARKit 3.0 •
Apple Glass の発表 • Mac Pro の発表
結果 • Marzipan について進捗シェア w w • ARKit 3.0 •
Apple Glass の発表 • Mac Pro の発表 "QQMFͷຊؾͷൃදʂ
ൃද͋ͬͨͷʁ ͑ͬɺ.BS[JQBOͬͯ
Marzipan の正体 w w • 共通的な UI 定義を⾏行行い • プラットフォーム側で適切に表示する仕組み
• SwiftUI / Project Catalyst
4XJGU6*
SwiftUI • 完全に新しい UI フレームワーク(iOS 13 〜 • マルチプラットフォーム対応 •
iOS / iPad OS / mac OS / AppleWatch • Pure Swift で先進的 w w w ͷͪ΄Ͳৄ͘͠
SwiftUI 4XJGU6* 6*Λఆٛ
SwiftUI 4XJGU6* 6*Λఆٛ ϓϥοτϑΥʔϜຖʹదͨ͠6*
SwiftUI 4XJGU6* 6*Λఆٛ ϓϥοτϑΥʔϜຖʹదͨ͠6* ϓϧμϯ .BTUFS%FUBJM
https://developer.apple.com/videos/play/wwdc2019/103/
1SPKFDU$BUBMZTU
Project Catalyst • iPad アプリを Mac アプリとして動かす • 単⼀一ソースで両プラットフォームを対応 •
iPad OS / macOS Catalina • SwiftUI じゃなくてもかんたんに w w w w w w
3 steps 1. macOS のチェックボックスを ON 2. iPad 向けの⼤大画⾯面に対応するアプリを作る 3.
macOS 向けの機能を追加する w w w w w ϑϧϝχϡʔɺλονόʔɺଞ
͜͜·Ͱ ͷ·ͱΊ
ここまで • Marzipan は共通の UI 定義をもとに • プラットフォーム固有の UI 表現を実現する
• SwiftUI / Catalyst を筆頭にした • これからの Apple のアプリ戦略略の総称 w w w w w w w w ͩͱɺײ͡·ͨ͠ɻ
Agenda • Marzipan(マジパン)の正体 • SwiftUI • まとめ
8IBUT4XJGU6*
What’s SwiftUI • Less Code • Better Code • Everywhere
1MBUGPSNTUBUFPGUIF6OJPOΑΓ
What’s SwiftUI • Less Code • Better Code • Everywhere
ΑΓগͳ͍ίʔυͰ
What’s SwiftUI • Less Code • Better Code • Everywhere
ޮతʹॻ͘͜ͱ͕Ͱ͖
What’s SwiftUI • Less Code • Better Code • Everywhere
ͯ͢ͷϓϥοτϑΥʔϜͰಈ͘
4XJGU6*ͷಛ
SwiftUI の特徴 • Declarative • Automatic • Compositional • Consistent
SwiftUI の特徴 • Declarative • Automatic • Compositional • Consistent
Declarative • 宣⾔言的にコードで記述できる w w w w • どのように(How)作るのかではなく •
どうあるべき(What)か • XML などではなく Pure Swift で実現
SwiftUI の特徴 • Declarative • Automatic • Compositional • Consistent
Automatic • ⾃自動的にいろいろ対応してくれる w w w w • ⾔言語に応じた⽂文字の揃え •
Light / Dark モード • Dynamic type
SwiftUI の特徴 • Declarative • Automatic • Compositional • Consistent
Compositional • コンポーネントを組み合わせやすい w w w w w • HStack
/ VStack • ForEach で繰り返し • 階層をまたがったテキストの揃え 'MVUUFSʹΘΓͱࣅͯΔ
SwiftUI の特徴 • Declarative • Automatic • Compositional • Consistent
Consistent • ⼀一貫性のある仕組み w w w • 信頼できる⼀一元化されたデータから作る • データバインディング(Reactive)の仕組み
• Combine フレームワーク 3Y 'MVY 3FEVY తͳߟ͑
SwiftUI の特徴 • Declarative • Automatic • Compositional • Consistent
SwiftUI の特徴 • Declarative • Automatic • Compositional • Consistent
͜ΕͬͯԿ͔ʹࣅͯ·ͤΜ͔ʁ ͱ͜ΖͰ
)5.- $44
HTML + CSS • Declarative • Automatic • Compositional •
Consistent 宣⾔言的に書く 様々なデバイスで動いてくれる コンポーネントを組み合わせる (CSSは怪しいけど)⼀一貫性ある
HTML + CSS • Declarative • Automatic • Compositional •
Consistent 宣⾔言的に書く 様々なデバイスで動いてくれる コンポーネントを組み合わせる (CSSは怪しいけど)⼀一貫性ある 4XJGU6*"QQMFʹ͓͚Δ )5.- $44ͳҐஔ͚ͮͰʁ ݸਓతͳղऍͰ͕͢
࣮ࡍͷίʔυ
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")) } } }
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ͷఆٛ
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͕͋ͬͯ
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")) } } } τʔΫҰཡͷϦετ͕͋ͬͯ λΠτϧ͜Ε
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")) } } } બͰ͖ΔηϧͰ ભҠઌʹ͜ΕΛදࣔ
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")) } } } ηϧͷதʮը૾ʯͱ
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")) } } } λΠτϧʴ࡞ऀΛදࣔ
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")) } } }
%FNP
·ͱΊ
まとめ • Marzipan の正体は UI 定義の共通化と プラットフォーム固有の UI 提供による 今後の
Apple のアプリ戦略略(だったかも) • SwiftUI は先進的な UI フレームワーク • Apple 製品における HTML + CSS のような?
0OFNPSFUIJOH ͱɺ͍ͬͯએͰ͕͢ʜ
None
s ൃച༧ఆ Α͔ͬͨΒങͬͯͶʂ