SwiftUIでカメラから画像を取得する

try! Swift Tokyo 2020 Meetup!!
https://tryswifttokyo.connpass.com/event/160481/

の登壇資料です

Transcript

1. SwiftUIで

   カメラから画像を取得する

   try! Swift Tokyo 2020 Meetup!! 

   

   佐藤剛士 2020 年 1 月 21日

   

   

   View Slide

2. Who am I

   ● Name

   ● 佐藤剛士(さとうたけし)

   ● Company

   ● Merpay, Inc.(2019/01 ~)

   ● Role

   ● Software Engineer (iOS)

   ● Account

   ● Twitter: @hatakenokakashi

   ● Facebook: 佐藤剛士

   ● GitHub: SatoTakeshiX

   

   View Slide

3. SwiftUIでImagePickerを使う方法
   

   View Slide

4. デモアプリ
   

   View Slide

5. デモアプリの仕様
   ● 画像がない場合は「画像がありません」のラ
   ベルを表示
   ● 「画像登録」ボタンタップでアクションシートを
   表示
   ● 端末がカメラ利用可能なら「 写真を撮る」ボタ
   ン、フォトライブラリー利用可能なら「アルバム
   から選択」ボタンを表示
   ●
   ImagePickerViewController
   で画像を取得す
   る
   ● 取得した画像を真ん中に表示する
   

   View Slide

6. レイアウト
   

   View Slide

7. デモアプリのUIコンポーネント
   CameraButton CustomToolBar
   EmptyImageView
   Image
   

   View Slide

8. CameraButton
   

   View Slide

9. Tips:Buttonのタップ領域を広げたいとき
   Button
   自体の
   Frame
   を操作するのではなくて
   ,Button
   の
   View
   の
   Frame
   を操作する
   

   View Slide

10. CustomToolBar
    

    View Slide

11. EmptyImageView
    

    View Slide

12. UIコンポーネントの配置
    

    View Slide

13. ZStackで配置する
    ZStack
    は子
    View
    をオーバーレイで重ねる
    View
    コンポーネントの配置に便利
    

    View Slide

14. CustomToolBarの配置
    ※
    edgesIgnoringSafeArea
    で画面下まで表示する
    Spacer
    CustomToolBar
    

    View Slide

15. レイアウト全体
    

    View Slide

16. ロジック
    

    View Slide

17. デモアプリの仕様
    ● 画像がない場合は「画像がありません」のラ
    ベルを表示
    ● 「画像登録」ボタンタップでアクションシートを
    表示
    ● 端末がカメラ利用可能なら「 写真を撮る」ボタ
    ン、フォトライブラリー利用可能なら「アルバム
    から選択」ボタンを表示
    ●
    ImagePickerViewController
    で画像を取得す
    る
    ● 取得した画像を真ん中に表示する
    

    View Slide

18. MVVMでSwiftUI
    

    View Slide

19. ボタンタップのシーケンス図
    

    View Slide

20. アクションシートのシーケンス図
    

    View Slide

21. HomeViewModelソース
    

    View Slide

22. HomeViewModelソース
    

    View Slide

23. PassthroughSubject
    ●
    Combine
    フレームワークの概念
    ○
    Publisher
    ■ 時間経過によって一連の値を配信するプロトコル
    ○
    Subject
    ■
    Publisher
    の一つ
    ■
    send
    メソッドで外部から値を配信するプロトコル
    ●
    PassthroughSubject
    は
    Subject
    の一種
    ●
    subscriber
    に値を配信する
    ●
    subscribe
    する前に配信された値は捨てられる
    ●
    RxSwift
    でいう
    PublishSubject
    

    View Slide

24. @Published
    ●
    @Published
    属性をつけてプロパティを公開すると
    Publisher
    が作られる
    ● プロパティの値が変更されるたびにイベントが発行されるようになる
    ●
    Publisher
    にアクセスするには
    $
    演算子が必要
    ● プロパティ更新すれば自動で
    (
    今回は
    View
    側
    )
    に通知される
    

    View Slide

25. HomeView actionSheet/sheetイベント発火
    

    View Slide

26. SwiftUIとImagePicekrの連携
    

    View Slide

27. SwiftUIとImagePicekrの連携
    

    View Slide

28. UIViewControllerRepresentable
    ●
    View Controller
    を
    SwiftUI
    と連携するためのプロトコル
    ● func makeUIViewController(context:)
    ○ View Controllerを作成するメソッド
    ● func updateUIViewController(_ :, context)
    ○ ステートが変更されたら呼ばれるメソッド（今回は @Bindingプロパティが更新されたら呼ばれる）
    ● func makeCoordinator()
    ○ このメソッド実装して任意のインスタンスを返すと、 makeUIViewController、
    updateUIViewControllerのcontextからこのインスタンスが取得できる
    ○ Delegate先のインスタンスを返すことで DelegateのあるUIKitクラスでもSwiftUIと連携できる
    

    View Slide

29. Coodinator
    

    View Slide

30. まとめ
    ●
    SwiftUI
    で
    UIImagePickerController
    との連携方法を解説
    ● コンポーネントを組み合わせて配置するときは
    ZStack
    が便利
    ● PassthroughSubjectでイベントの発火とステータスの更新をバインド
    ● UIViewControllerRepresentableのmakeCoordinatorはDelegateがあるUIKitクラ
    スとSwiftUIをつなげる存在
    

    View Slide

31. サンプルコード
    https://github.com/SatoTakeshiX/Swif
    tUICatalog/tree/master/CameraSampl
    e
    

    View Slide

32. 参考文献
    ●
    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
    

    View Slide