Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Sato Takeshi
January 21, 2020

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

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

の登壇資料です

Sato Takeshi

January 21, 2020
Tweet

More Decks by Sato Takeshi

Other Decks in Technology

Transcript

  1. SwiftUIで

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

    try! Swift Tokyo 2020 Meetup!! 


    佐藤剛士 2020 年 1 月 21日


    View full-size slide

  2. Who am I

    ● Name

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

    ● Company

    ● Merpay, Inc.(2019/01 ~)

    ● Role

    ● Software Engineer (iOS)

    ● Account

    ● Twitter: @hatakenokakashi

    ● Facebook: 佐藤剛士

    ● GitHub: SatoTakeshiX


    View full-size slide

  3. SwiftUIでImagePickerを使う方法

    View full-size slide

  4. デモアプリ

    View full-size slide

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

    ImagePickerViewController
    で画像を取得す

    ● 取得した画像を真ん中に表示する

    View full-size slide

  6. レイアウト

    View full-size slide

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

    View full-size slide

  8. CameraButton

    View full-size slide

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

    View

    Frame
    を操作する

    View full-size slide

  10. CustomToolBar

    View full-size slide

  11. EmptyImageView

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. CustomToolBarの配置

    edgesIgnoringSafeArea
    で画面下まで表示する
    Spacer
    CustomToolBar

    View full-size slide

  15. レイアウト全体

    View full-size slide

  16. ロジック

    View full-size slide

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

    ImagePickerViewController
    で画像を取得す

    ● 取得した画像を真ん中に表示する

    View full-size slide

  18. MVVMでSwiftUI

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. HomeViewModelソース

    View full-size slide

  22. HomeViewModelソース

    View full-size slide

  23. PassthroughSubject

    Combine
    フレームワークの概念

    Publisher
    ■ 時間経過によって一連の値を配信するプロトコル

    Subject

    Publisher
    の一つ

    send
    メソッドで外部から値を配信するプロトコル

    PassthroughSubject

    Subject
    の一種

    subscriber
    に値を配信する

    subscribe
    する前に配信された値は捨てられる

    RxSwift
    でいう
    PublishSubject

    View full-size slide

  24. @Published

    @Published
    属性をつけてプロパティを公開すると
    Publisher
    が作られる
    ● プロパティの値が変更されるたびにイベントが発行されるようになる

    Publisher
    にアクセスするには
    $
    演算子が必要
    ● プロパティ更新すれば自動で
    (
    今回は
    View

    )
    に通知される

    View full-size slide

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

    View full-size slide

  26. SwiftUIとImagePicekrの連携

    View full-size slide

  27. SwiftUIとImagePicekrの連携

    View full-size 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 full-size slide

  29. まとめ

    SwiftUI

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

    View full-size slide

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

    View full-size slide

  31. 参考文献

    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 full-size slide