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
SwiftUIでカメラから画像を取得する
Search
Sato Takeshi
January 21, 2020
Technology
2
3.8k
SwiftUIでカメラから画像を取得する
try! Swift Tokyo 2020 Meetup!!
https://tryswifttokyo.connpass.com/event/160481/
の登壇資料です
Sato Takeshi
January 21, 2020
Tweet
Share
More Decks by Sato Takeshi
See All by Sato Takeshi
Swift愛好会 の 思い出
satotakeshi
0
55
Xcode 15, Swift 5.9で変わる開発体験
satotakeshi
3
2.7k
Meet passkeys
satotakeshi
2
310
What's new in Vision
satotakeshi
0
1.3k
Swift Concurrency入門
satotakeshi
10
4.6k
複数端末のつらさを乗り越えてiOS UITestを実行
satotakeshi
1
350
Xcodegenを個人アプリに導入
satotakeshi
3
670
SwiftUIで作る開閉式メニュー
satotakeshi
2
2.8k
swift-snapshot-testingでVisual Testingを効率化
satotakeshi
0
1.1k
Other Decks in Technology
See All in Technology
ロリポップ! for Gamersを支えるインフラ/lolipop for gamers infrastructure
takumakume
0
130
ついに出た!OpenAIの最新モデル「o1」って何がすごいの?
minorun365
PRO
3
1.2k
React Aria で実現する次世代のアクセシビリティ
ryo_manba
4
1.2k
AIを活用した柔軟かつ効率的な社内リソース検索への取り組み
cygames
0
180
リアルお遍路+SORACOM IoT
ozk009
1
140
ネットワークだけ隔離されたコンテナ作成デモ / Kichijoji.pm36
tenforward
1
230
持続可能なソフトウェア開発を支える『GitHub CI/CD実践ガイド』
tmknom
8
1.4k
eBPFのこれまでとこれから
yutarohayakawa
10
3.2k
Mocking in Rust Applications
taiki45
2
410
GC24 Recap: Interface Internals
task4233
0
150
Developer Experienceを向上させる基盤づくりの取り組み事例集
coconala_engineer
0
150
不動産売買取引におけるAIの可能性とプロダクトでのAI活用
zabio3
0
270
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
Adopting Sorbet at Scale
ufuk
73
8.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
Navigating Team Friction
lara
183
13k
What's new in Ruby 2.0
geeforr
340
31k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Transcript
SwiftUIで カメラから画像を取得する try! Swift Tokyo 2020 Meetup!! 佐藤剛士
2020 年 1 月 21日
Who am I • Name • 佐藤剛士(さとうたけし) • Company •
Merpay, Inc.(2019/01 ~) • Role • Software Engineer (iOS) • Account • Twitter: @hatakenokakashi • Facebook: 佐藤剛士 • GitHub: SatoTakeshiX
SwiftUIでImagePickerを使う方法
デモアプリ
デモアプリの仕様 • 画像がない場合は「画像がありません」のラ ベルを表示 • 「画像登録」ボタンタップでアクションシートを 表示 • 端末がカメラ利用可能なら「 写真を撮る」ボタ
ン、フォトライブラリー利用可能なら「アルバム から選択」ボタンを表示 • ImagePickerViewController で画像を取得す る • 取得した画像を真ん中に表示する
レイアウト
デモアプリのUIコンポーネント CameraButton CustomToolBar EmptyImageView Image
CameraButton
Tips:Buttonのタップ領域を広げたいとき Button 自体の Frame を操作するのではなくて ,Button の View の Frame
を操作する
CustomToolBar
EmptyImageView
UIコンポーネントの配置
ZStackで配置する ZStack は子 View をオーバーレイで重ねる View コンポーネントの配置に便利
CustomToolBarの配置 ※ edgesIgnoringSafeArea で画面下まで表示する Spacer CustomToolBar
レイアウト全体
ロジック
デモアプリの仕様 • 画像がない場合は「画像がありません」のラ ベルを表示 • 「画像登録」ボタンタップでアクションシートを 表示 • 端末がカメラ利用可能なら「 写真を撮る」ボタ
ン、フォトライブラリー利用可能なら「アルバム から選択」ボタンを表示 • ImagePickerViewController で画像を取得す る • 取得した画像を真ん中に表示する
MVVMでSwiftUI
ボタンタップのシーケンス図
アクションシートのシーケンス図
HomeViewModelソース
HomeViewModelソース
PassthroughSubject • Combine フレームワークの概念 ◦ Publisher ▪ 時間経過によって一連の値を配信するプロトコル ◦ Subject
▪ Publisher の一つ ▪ send メソッドで外部から値を配信するプロトコル • PassthroughSubject は Subject の一種 • subscriber に値を配信する • subscribe する前に配信された値は捨てられる • RxSwift でいう PublishSubject
@Published • @Published 属性をつけてプロパティを公開すると Publisher が作られる • プロパティの値が変更されるたびにイベントが発行されるようになる • Publisher
にアクセスするには $ 演算子が必要 • プロパティ更新すれば自動で ( 今回は View 側 ) に通知される
HomeView actionSheet/sheetイベント発火
SwiftUIとImagePicekrの連携
SwiftUIとImagePicekrの連携
UIViewControllerRepresentable • View Controller を SwiftUI と連携するためのプロトコル • func makeUIViewController(context:)
◦ View Controllerを作成するメソッド • func updateUIViewController(_ :, context) ◦ ステートが変更されたら呼ばれるメソッド(今回は @Bindingプロパティが更新されたら呼ばれる) • func makeCoordinator() ◦ このメソッド実装して任意のインスタンスを返すと、 makeUIViewController、 updateUIViewControllerのcontextからこのインスタンスが取得できる ◦ Delegate先のインスタンスを返すことで DelegateのあるUIKitクラスでもSwiftUIと連携できる
Coodinator
まとめ • SwiftUI で UIImagePickerController との連携方法を解説 • コンポーネントを組み合わせて配置するときは ZStack が便利
• PassthroughSubjectでイベントの発火とステータスの更新をバインド • UIViewControllerRepresentableのmakeCoordinatorはDelegateがあるUIKitクラ スとSwiftUIをつなげる存在
サンプルコード https://github.com/SatoTakeshiX/Swif tUICatalog/tree/master/CameraSampl e
参考文献 • PassthroughSubject ◦ https://developer.apple.com/documentation/combine/passthroughsubject • Learn & Master ⚔
the Basics of Combine in 5 Minutes ◦ https://medium.com/ios-os-x-development/learn-master-%EF%B8%8F-th e-basics-of-combine-in-5-minutes-639421268219