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
53
Xcode 15, Swift 5.9で変わる開発体験
satotakeshi
3
2.7k
Meet passkeys
satotakeshi
2
310
What's new in Vision
satotakeshi
0
1.2k
Swift Concurrency入門
satotakeshi
10
4.5k
複数端末のつらさを乗り越えて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
技術ブログや登壇資料を秒で作るコツ伝授します
minorun365
PRO
22
5k
MySQLユーザ会なにやってるの?とおさそいと / たいへんなのw
sakaik
1
110
中規模・ミドルTier開発組織におけるDevRelの戦略と実行と成果 - DevRel Guild Conference Mini -
leveragestech
2
280
四国クラウドお遍路 2024 in 高知 エンディング
yukataoka
0
150
【Λ(らむだ)最近のアプデ情報 / RPALT20240904
lambda
0
170
#Zenoh 完全に理解した 〜組込み純情篇〜
takasehideki
1
460
ロボットアームを遠隔制御の話 & LLMをつかったIoTの話もしたい
soracom
PRO
1
220
株式会社M2X エンジニアチーム紹介資料
m2xsoftware
0
420
Eventual Detection Engineering
ken5scal
0
950
リクルート新人研修2024 テキスト生成AI活用
recruitengineers
PRO
10
470
音声AIエージェントの世界とRetell AI入門 / Introduction to the World of Voice AI Agents and Retell AI
rkaga
4
820
Oracle Database 23ai 新機能 #3 Oracle Globally Distributed Database(GDD)
oracle4engineer
PRO
1
170
Featured
See All Featured
The Cult of Friendly URLs
andyhume
76
5.9k
YesSQL, Process and Tooling at Scale
rocio
167
14k
KATA
mclloyd
27
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
25
2k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Embracing the Ebb and Flow
colly
83
4.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Designing Experiences People Love
moore
138
23k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
StorybookのUI Testing Handbookを読んだ
zakiyama
25
5k
Six Lessons from altMBA
skipperchong
26
3.3k
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