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
87
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
400
Xcodegenを個人アプリに導入
satotakeshi
3
780
SwiftUIで作る開閉式メニュー
satotakeshi
2
3k
Other Decks in Technology
See All in Technology
Vibe Coding Tools
ijin
1
290
MCP でモノが動くとおもしろい/It is interesting when things move with MCP
bitkey
3
620
Tailwind CSS の小話「コンテナークエリーって便利」
yamaday
0
150
MagicPod MCPサーバー開発の裏側とAIエージェント活用の展望
magicpod
0
290
水耕栽培に全部賭けろ
mutsumix
0
150
TanStack Start 技術選定の裏側 / Findy-Lunch-LT-TanStack-Start
iktakahiro
1
170
とあるEdTechベンチャーのシステム構成こだわりN選 / edtech-system
gotok365
5
370
問 1:以下のコンパイラを証明せよ(予告編) #kernelvm / Kernel VM Study Kansai 11th
ytaka23
3
630
Design for Failure - リージョンとAZについて
yuki_ink
0
130
kernelvm-brain-net
raspython3
0
660
MagicPodが描くAIエージェント戦略とソフトウェアテストの未来
magicpod
0
290
AIエージェントのオブザーバビリティについて
yunosukey
1
380
Featured
See All Featured
Designing for Performance
lara
608
69k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
The Cost Of JavaScript in 2023
addyosmani
49
7.9k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Adopting Sorbet at Scale
ufuk
76
9.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
620
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