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
4k
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
まさかのバグ!SwiftUIプレビューでハマった国際化対応の落とし穴
satotakeshi
0
280
Swift愛好会 の 思い出
satotakeshi
0
84
Xcode 15, Swift 5.9で変わる開発体験
satotakeshi
3
2.9k
Meet passkeys
satotakeshi
2
340
What's new in Vision
satotakeshi
0
1.6k
Swift Concurrency入門
satotakeshi
11
5.1k
複数端末のつらさを乗り越えてiOS UITestを実行
satotakeshi
1
390
Xcodegenを個人アプリに導入
satotakeshi
3
770
SwiftUIで作る開閉式メニュー
satotakeshi
2
3k
Other Decks in Technology
See All in Technology
OpenLane-V2ベンチマークと代表的な手法
kzykmyzw
0
110
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
130
今日からはじめるプラットフォームエンジニアリング
jacopen
6
1.3k
SDカードフォレンジック
su3158
1
630
Web Intelligence and Visual Media Analytics
weblyzard
PRO
1
5.8k
サーバレス、コンテナ、データベース特化型機能をご紹介。CloudWatch をもっと使いこなそう!
o11yfes2023
0
180
バックオフィス向け toB SaaS バクラクにおけるレコメンド技術活用 / recommender-systems-in-layerx-bakuraku
yuya4
6
560
DETR手法の変遷と最新動向(CVPR2025)
tenten0727
2
1.4k
アセスメントで紐解く、10Xのデータマネジメントの軌跡
10xinc
1
440
エンジニアリングで組織のアウトカムを最速で最大化する!
ham0215
1
140
PagerDuty×ポストモーテムで築く障害対応文化/Building a culture of incident response with PagerDuty and postmortems
aeonpeople
2
350
Goの組織でバックエンドTypeScriptを採用してどうだったか / How was adopting backend TypeScript in a Golang company
kaminashi
7
7.1k
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
104
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.4k
Automating Front-end Workflow
addyosmani
1369
200k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Practical Orchestrator
shlominoach
186
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
13
1.4k
Agile that works and the tools we love
rasmusluckow
328
21k
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