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
590
Marzipan の正体は何だったのか そして SwiftUI の衝撃/wwdc19_marzipan_swiftui
Yusuke Hosonuma
June 17, 2019
Tweet
Share
More Decks by Yusuke Hosonuma
See All by Yusuke Hosonuma
KotlinTest で始める Property-based Testing/kotlintest-property-based-testing
yusukehosonuma
1
980
標準パッケージにおけるテストでの利用例から学ぶ testing / quick パッケージ/golang-testing-quick
yusukehosonuma
4
10k
Swift で ParameterizedTest をやってみた話/swift-parameterized-test
yusukehosonuma
4
1.2k
Property-based test beginning with SwiftCheck
yusukehosonuma
1
4.2k
XCTest(再)入門/reintroduction-to-xctest
yusukehosonuma
0
260
ソースコードから読み解く - Quick はどのように実装されているのか?/quick-code-reading
yusukehosonuma
7
10k
Swift 4.2 はどのような進化をしているのか/whats-new-swift42
yusukehosonuma
16
14k
HTTPモックライブラリ「Mockingjay」を使ってみた話/swift-mockingjay
yusukehosonuma
5
2.8k
SwiftにおけるMockライブラリの活用/swift-mock-library
yusukehosonuma
10
5k
Other Decks in Programming
See All in Programming
IE Graduation Certificate
jxck
6
4.7k
dotdotdot_in_predict_function
bk_18
1
180
Angular‘s Future without NgModules: Architectures with Standalone Components @enterJS
manfredsteyer
PRO
0
190
io22 extended What's new in app performance
veronikapj
0
340
Treasure.map(): Functional programming in JVM-based languages
paranoidmonoid
0
130
Overview of The Modern Data Stack / モダンデータスタック概論
satoshihirose
6
3.2k
ISUCON12 事前講習
rosylilly
3
4.3k
Gitlab CIでMRを自動生成する
forcia_dev_pr
0
110
Maintaining Software Correctness
dlew
PRO
3
250
Android Compose Component - mapping.
taehwandev
0
110
Running Laravel/PHP on AWS (AWS Builders Day Taiwan 2022)
dwchiang
0
140
Amazon Aurora の v1 が EOL になるので 10 クラスタアップグレードして出てきたノウハウ
dekokun
0
850
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
920
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
213
11k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
126
8.5k
Building Applications with DynamoDB
mza
83
4.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
Code Review Best Practice
trishagee
43
9.2k
YesSQL, Process and Tooling at Scale
rocio
157
12k
Art, The Web, and Tiny UX
lynnandtonic
280
17k
The Mythical Team-Month
searls
209
39k
We Have a Design System, Now What?
morganepeng
35
3k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Building Flexible Design Systems
yeseniaperezcruz
310
34k
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 ൃച༧ఆ Α͔ͬͨΒങͬͯͶʂ