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
520
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
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
Swiftの “private” を テストする / Testing Swift "private"
yutailang0119
0
210
Apple Vision Pro購入RTA 1泊3日弾丸ハワイツアー / RTA: Purchase Apple Vision Pro in Hawaii
yutailang0119
0
1.4k
個人開発のたのしみ / Enjoying personal development
yutailang0119
0
1k
バックポートして学ぶ新APIの仕組み
yutailang0119
0
2.8k
Backport AsyncImage
yutailang0119
0
720
xcrun Essentials
yutailang0119
6
1.3k
Property Wrapperで遊ぼう / Play with Property Wrapper
yutailang0119
2
320
Back of First Screen AB test of Hatena Bookmark iOS app with Firebase AB Testing
yutailang0119
0
310
Other Decks in Programming
See All in Programming
Discover Metal 4
rei315
2
140
ニーリーにおけるプロダクトエンジニア
nealle
0
840
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
260
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
効率的な開発手段として VRTを活用する
ishkawa
0
140
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
140
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
Is Xcode slowly dying out in 2025?
uetyo
1
270
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
Embracing the Ebb and Flow
colly
86
4.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Adopting Sorbet at Scale
ufuk
77
9.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Thoughts on Productivity
jonyablonski
69
4.7k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Documentation Writing (for coders)
carmenintech
72
4.9k
Visualization
eitanlees
146
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
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