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
480
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
Swiftの “private” を テストする / Testing Swift "private"
yutailang0119
0
58
Apple Vision Pro購入RTA 1泊3日弾丸ハワイツアー / RTA: Purchase Apple Vision Pro in Hawaii
yutailang0119
0
1.4k
個人開発のたのしみ / Enjoying personal development
yutailang0119
0
900
バックポートして学ぶ新APIの仕組み
yutailang0119
0
2.5k
Backport AsyncImage
yutailang0119
0
660
xcrun Essentials
yutailang0119
6
1.2k
Property Wrapperで遊ぼう / Play with Property Wrapper
yutailang0119
2
300
Back of First Screen AB test of Hatena Bookmark iOS app with Firebase AB Testing
yutailang0119
0
290
Lab of WWDC19
yutailang0119
1
490
Other Decks in Programming
See All in Programming
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
Formの複雑さに立ち向かう
bmthd
1
720
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
Writing documentation can be fun with plugin system
okuramasafumi
0
120
GAEログのコスト削減
mot_techtalk
0
110
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
Spring gRPC について / About Spring gRPC
mackey0225
0
220
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
360
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Navigating Team Friction
lara
183
15k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Code Reviewing Like a Champion
maltzj
521
39k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Why Our Code Smells
bkeepers
PRO
335
57k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
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