Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Let's Coding SwiftUI on iPad!
Search
Yutaro Muta
January 25, 2020
Programming
1
430
Let's Coding SwiftUI on iPad!
第11回 HAKATA.swift x Swift愛好会~福岡と東京のSwift勉強会コラボ~
https://hakata-swift.connpass.com/event/149988/
Yutaro Muta
January 25, 2020
Tweet
Share
More Decks by Yutaro Muta
See All by Yutaro Muta
Apple Vision Pro購入RTA 1泊3日弾丸ハワイツアー / RTA: Purchase Apple Vision Pro in Hawaii
yutailang0119
0
840
個人開発のたのしみ / Enjoying personal development
yutailang0119
0
680
バックポートして学ぶ新APIの仕組み
yutailang0119
0
2.1k
Backport AsyncImage
yutailang0119
0
550
xcrun Essentials
yutailang0119
6
1.1k
Property Wrapperで遊ぼう / Play with Property Wrapper
yutailang0119
2
250
Back of First Screen AB test of Hatena Bookmark iOS app with Firebase AB Testing
yutailang0119
0
250
Lab of WWDC19
yutailang0119
1
440
First getting started of SwiftSyntax
yutailang0119
2
530
Other Decks in Programming
See All in Programming
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
iOSアプリでクリップボードにコピーしたことをユーザーに伝えるちょうど良いフィードバックを探す
ski
0
100
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
Faster Mobile Websites
deanohume
303
30k
The Pragmatic Product Professional
lauravandoore
29
6.1k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Designing Experiences People Love
moore
136
23k
Designing for humans not robots
tammielis
247
25k
Git: the NoSQL Database
bkeepers
PRO
423
64k
Become a Pro
speakerdeck
PRO
15
4.8k
Web Components: a chance to create the future
zenorocha
307
41k
Code Reviewing Like a Champion
maltzj
517
39k
Happy Clients
brianwarren
94
6.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Transcript
Let's Coding SwiftUI on iPad! 2020/01/21 @HAKATA.swift vol.11 Yutaro Muta
@yutailang0119
• Yutaro Muta @yutailang0119 • Hatena Co., Ltd. @Kyoto •
Conference Staff • builderscon 2020 • try! Swift Tokyo 2020 • and more Who am I ?
Goal • iPadͰίʔσΟϯά͢ΔΑ͏ʹͳΔ • ͍࣋ͬͯͳ͍ਓiPadΛങͬͯؼΔ • SwiftUIͷViewʹ͍ͭͯɺͪΐͬͱΔ
What's Swift Playgrounds?
What's Swift Playgrounds? • iPadΞϓϦ Swift Playground • Document: https://developer.apple.com/documentation/swift_playgrounds
• ϝΠϯϢʔεɺϓϩάϥϛϯάڭҭΒ͍͠
What's Swift Playgrounds? • iOSΞϓϦ։ൃͱ͍ۙ͠ػೳ͕ଟ͑͘Δ • UIKit (Xcode Playground) •
Camera • Bluetooth • AR (SceneKit) • SwiftUI ͑Δʂʂʂʂʂ • Swift Playgrounds 3.1: Build with the SwiftUI framework in new playgrounds you create
Run SwiftUI on Swift Playgrounds
Run SwiftUI on Swift Playgrounds import SwiftUI import PlaygroundSupport struct
ContentView: View { var body: some View { VStack { Text("Hello") .font(.largeTitle) .foregroundColor(.primary) Text("world") .font(.title) .foregroundColor(.secondary) } } } let host = UIHostingController(rootView: ContentView()) PlaygroundPage.current.liveView = host
Run SwiftUI on Swift Playgrounds
Run Swift Playgrounds file on Xcode
Run Swift Playgrounds file on Xcode • PlaygroundsͷStarting Pointʹ Xcode
PlaygroundΛબ͢Δ • ֦ுࢠ͕ .playgroundͱͯ͠࡞͞ΕΔ (্هҎ֎ͩͱ .playgroundbook) -> XcodeͷPlaygroundͰ࣮ߦ͕Ͱ͖Δ • ٯʹɺXcodeͰ࡞ͨ͠ .playground Swift PlaygroundsͰ࣮ߦՄೳ
Run Swift Playgrounds file on Xcode
Pros/Cons of Swift Playgrounds
Pros of Swift Playgrounds • iPadͰखܰʹίʔυ͕ॻ͚Δ • FoundationSwiftUIͦΕҎ֎ͷFrameworkѻ͑Δ • ΦϑϥΠϯͰ࣮ߦՄೳ
Cons of Swift Playgrounds • XcodeʹൺΔͱɺΤσΟλΓͳ͍ • ίϯύΠϧ • ૣ͘ͳ͍
• XcodeͷSwiftUI Canvasͳ͍ • ຖճ࣮ߦ͕ඞཁ • UIHostingControllerʹೖΕͨ1ͭViewΛࢹ͢Δ͜ͱʹͳΔ
͓͠·͍
⚡͔͜͜Βຊฤ⚡
Cons of Swift Playgrounds • XcodeʹൺΔͱɺΤσΟλΓͳ͍ • ίϯύΠϧ • ૣ͘ͳ͍
• XcodeͷSwiftUI Canvasͳ͍ • ຖճ࣮ߦ͕ඞཁ • UIHostingControllerʹೖΕͨ1ͭViewΛࢹ͢Δ͜ͱʹͳΔ
Cons of Swift Playgrounds • XcodeʹൺΔͱɺΤσΟλΓͳ͍ • ίϯύΠϧ • ૣ͘ͳ͍
• XcodeͷSwiftUI Canvasͳ͍ • ຖճ࣮ߦ͕ඞཁ • UIHostingControllerʹೖΕͨ1ͭViewΛࢹ͢Δ͜ͱʹͳΔ <- AppleཔΉ
Cons of Swift Playgrounds • XcodeʹൺΔͱɺΤσΟλΓͳ͍ • ίϯύΠϧ • ૣ͘ͳ͍
• XcodeͷSwiftUI Canvasͳ͍ • ຖճ࣮ߦ͕ඞཁ • UIHostingControllerʹೖΕͨ1ͭViewΛࢹ͢Δ͜ͱʹͳΔ <- AppleཔΉ
Cons of Swift Playgrounds • XcodeʹൺΔͱɺΤσΟλΓͳ͍ • ίϯύΠϧ • ૣ͘ͳ͍
• XcodeͷSwiftUI Canvasͳ͍ • ຖճ࣮ߦ͕ඞཁ • UIHostingControllerʹೖΕͨ1ͭViewΛࢹ͢Δ͜ͱʹͳΔ <- AppleཔΉ
Cons of Swift Playgrounds • XcodeʹൺΔͱɺΤσΟλΓͳ͍ • ίϯύΠϧ • ૣ͘ͳ͍
• XcodeͷSwiftUI Canvasͳ͍ • ຖճ࣮ߦ͕ඞཁ • UIHostingControllerʹೖΕͨ1ͭViewΛࢹ͢Δ͜ͱʹͳΔ ^ | Ͳ͏ʹ͔Ͱ͖ͦ͏
yutailang0119/LayoutInspector ໊લ͚͍ͯΔ͚Ͳɺ·ͩͰ͖ͯͳ͍
LayoutInspector
LayoutInspector import SwiftUI struct LayoutInspector<Body: View>: View { private let
_body: Body private let color: Color init(body: Body, color: Color? = nil) { self._body = body self.color = color ?? Color.random } var body: some View { ZStack(alignment: .topLeading) { self._body .layoutPriority(1.0) self._label } .border(color) } private var _label: some View { Text(String(describing: type(of: _body))) .lineLimit(1) .font(.footnote) .foregroundColor(.primary) .background(color.opacity(0.7)) } } import SwiftUI extension SwiftUI.View { func layoutInspector(color: Color? = nil) -> some View { LayoutInspector(body: self, color: color) } }
LayoutInspector
ᘳ
< ViewModifier protocolʹ ४ڌ͢ΔͱΑͦ͞͏ͩΑ
ViewModifier • https://developer.apple.com/documentation/swiftui/viewmodifier > A modifier that you apply to
a view or another view modifier, producing a different version of the original value. • ModifiedContent View.modifier(_:) ͱΈ߹Θͤͯ͏
Custom ViewModifier import SwiftUI struct PrimaryLabel: ViewModifier { func body(content:
Content) -> some View { content .padding() .background(Color.red) .foregroundColor(Color.white) .font(.largeTitle) } } HACKING WITH Swift: How to create custom modifiers https://www.hackingwithswift.com/quick-start/swiftui/how-to-create-custom-modifiers
Extension SwiftUI.View import SwiftUI extension SwiftUI.View { func labelPrimary() ->
some View { self .modifier(PrimaryLabel()) } }
Custom ViewModifier
ͳΔ΄ͲɺΑͦ͞͏ͩ
͔݁Βݴ͏ͱɺେมͩͬͨ
ModifierΛ࡞ͬͯɺ ෦ͰLayoutInspectorΛͬͯΈΔ
LayoutInspectModifier (α) struct LayoutInspectModifier: ViewModifier { private let color: Color?
init(color: Color? = nil) { self.color = color } public func body(content: Content) -> some View { LayoutInspector(body: content, color: color) } }
LayoutInspectModifier (α)
_ViewModifier_Content<LayoutInspectorModifier> LayoutInspectModifier (α)
ViewModifierͷ࣮ • func body(content: Self.Content) -> Self.Body • Gets the
current body of the caller. • Discussion • content is a proxy for the view that will have the modifier represented by Self applied to it. • typealias ViewModifier.Content • The content view type.
ViewModifierͷ࣮ • ViewModifier.Content ɺݩͷViewͦͷͷͰͳ͘ɺProxy • contentʹ type(of:) Λ͔͚ͯɺݩͷViewͷTypeΘ͔Βͳ͍
OMG
࡞ઓมߋ • ModifierΛ͚Δ • ֎ͱҙͷϥϕϧΛ͚Δ LayoutInspectModifier • ֎Λ͚ͭͭɺType໊Λදࣔ͢Δ TypeNameLayoutInspectModifier
LayoutInspecterΛมߋ
LayoutInspecter import SwiftUI struct LayoutInspector<Body: View>: View { private let
_body: Body private let label: String private let color: Color init(body: Body, label: String, color: Color? = nil) { self._body = body self.label = label self.color = color ?? Color.random } var body: some View { ZStack(alignment: .topLeading) { self._body .layoutPriority(1.0) self._label } .border(color) } private var _label: some View { Text(label) .lineLimit(1) .font(.footnote) .foregroundColor(.primary) .background(color.opacity(0.7)) } }
LayoutInspectModifier
LayoutInspectModifier import SwiftUI struct LayoutInspectModifier: ViewModifier { private let color:
Color? private let label: String init(color: Color? = nil, label: String = "") { self.color = color self.label = label } func body(content: Content) -> some View { LayoutInspector(body: content, label: label, color: color) } }
TypeNameLayoutInspectModifier
TypeNameLayoutInspectModifier import SwiftUI struct TypeNameLayoutInspectModifier<V: View>: ViewModifier { private let
color: Color? private let _body: V init(color: Color? = nil, body: V) { self.color = color self._body = body } func body(content: Content) -> some View { LayoutInspector(body: content, label: String(describing: type(of: _body)), color: color) } }
ModifierΛద༻͢Δextension import SwiftUI extension SwiftUI.View { func layoutInspector(color: Color? =
nil, label: String = "") -> some View { self .modifier(LayoutInspectModifier(color: color, label: label)) } func typeNameLayoutInspector(color: Color? = nil) -> some View { self .modifier(TypeNameLayoutInspectModifier(color: color, body: self)) } }
࣮ߦʂ
࣮ߦʂ
Αͦ͞͏
࣮·ͩམͱ͕݀͠...
contentView.frame()
ViewModifierΛܦ༝͢ΔViewʹ TypeNameLayoutInspectModifier ͬͺΓյΕΔ
ࠓ͜͜·Ͱ
·ͱΊ
·ͱΊ • iPad͚ͩͰɺSwiftɺSwiftUIΛॻ͘͜ͱͰ͖Δ • yutailang0119/LayoutInspector ɺ͏ͪΐͬͱ࿅͖ͬͯ·͢ • LayoutInspectModifier୯ମͷΞϓϩʔνѱ͘ͳͦ͞͏ • Swift
Playgroundsͷ༻్͚ͩͰͳ͘ɺΞϓϦέʔγϣϯ։ൃͷσόοΨ ͱͯ͠ൃల͍ͤͨ͞ • ྫ͑ɺShake GestureΛरͬͯɺදࣔ/ඇදࣔΛΓସ͑Δ
Reference • https://yutailang0119.hatenablog.com/entry/swiftui-with-swift-playgrounds • https://www.apple.com/swift/playgrounds/ • https://developer.apple.com/documentation/swift_playgrounds • https://developer.apple.com/xcode/swiftui/ •
https://tech.d-itlab.co.jp/programming/1052/ • https://developer.apple.com/documentation/swiftui/viewmodifier • https://www.hackingwithswift.com/quick-start/swiftui/how-to-create-custom-modifiers
&OKPZ4XJGU1MBZHSPVOET 5IBOLT w NVUBZVUBSP!HNBJMDPN w IUUQTUXJUUFSDPNZVUBJMBOH w IUUQTHJUIVCDPNZVUBJMBOH