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
170
Swiftの “private” を テストする / Testing Swift "private"
yutailang0119
0
220
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
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
7.3k
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
230
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
760
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
220
CDK引数設計道場100本ノック
badmintoncryer
2
480
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
15k
Deep Dive into ~/.claude/projects
hiragram
14
14k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7k
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
350
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
470
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
220
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
We Have a Design System, Now What?
morganepeng
53
7.7k
Agile that works and the tools we love
rasmusluckow
329
21k
BBQ
matthewcrist
89
9.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
GitHub's CSS Performance
jonrohan
1031
460k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Statistics for Hackers
jakevdp
799
220k
Automating Front-end Workflow
addyosmani
1370
200k
Visualization
eitanlees
146
16k
Practical Orchestrator
shlominoach
189
11k
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