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.6k
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
Xcode 15, Swift 5.9で変わる開発体験
satotakeshi
3
2.4k
Meet passkeys
satotakeshi
2
280
What's new in Vision
satotakeshi
0
1k
Swift Concurrency入門
satotakeshi
10
4.1k
複数端末のつらさを乗り越えてiOS UITestを実行
satotakeshi
1
330
Xcodegenを個人アプリに導入
satotakeshi
3
620
SwiftUIで作る開閉式メニュー
satotakeshi
2
2.7k
swift-snapshot-testingでVisual Testingを効率化
satotakeshi
0
980
SwiftUIのデータ管理
satotakeshi
6
1.7k
Other Decks in Technology
See All in Technology
一生覚えておきたい「システム開発=コミュニケーション」〜初めての実務案件振り返りLT〜
maimyyym
0
130
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
4
13k
データベース02: データベースの概念
trycycle
0
160
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
350
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
630
VS CodeでAWSを操作しよう
smt7174
7
1.6k
Além do else! Categorizando Pokemóns com Pattern Matching no JavaScript
wmsbill
0
510
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
0
240
Hands-on Gemini, the Google DeepMind LLM
meteatamel
1
110
Postman v10リリース後を振り返る / Looking back at Postman v10 after release
yokawasa
1
160
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
DevOpsDays History and my DevOps story
kawaguti
PRO
9
2.5k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
42
12k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
The Brand Is Dead. Long Live the Brand.
mthomps
49
28k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Designing the Hi-DPI Web
ddemaree
276
33k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
121
39k
Into the Great Unknown - MozCon
thekraken
10
990
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
Making Projects Easy
brettharned
108
5.5k
Optimizing for Happiness
mojombo
370
69k
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