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
ｓ ൃച༧ఆ
Α͔ͬͨΒങͬͯͶʂ