Eight iOSを支えるアーキテクチャVol.2 / architecture to support Eight iOS 2

■イベント
Sansan Builders Box 2019
https://jp.corp-sansan.com/sbb2019/

■登壇概要
タイトル：Eight iOSを支えるアーキテクチャVol.2

登壇者：
Eight事業部 池端貴恵

▼Sansan Builders Box
https://buildersbox.corp-sansan.com/

Transcript

1. Eight iOSを⽀える
   アーキテクチャ Vol.2
   KIE IKEBATA
   

   View Slide

2. 池端 貴恵（Kie Ikebata）
   沖縄に⽣まれる。
   ⾼校までを沖縄で過ごし、⼤学は中国・上海の⼤学へ進学。
   卒業後、⼀年間上海で働いた後に帰国。
   なんとなく⼤阪で就職活動、家具メーカーの海外バイヤーになる。
   数年働いた後、キャリアチェンジすることを決意。
   プログラミングを独学で始め、
   キャリアスクールやインターンを経てiOSエンジニアとなる。
   2018年4⽉にSansan株式会社⼊社。現在は関⻄⽀社にて勤務。
   Eight事業部 iOSエンジニア
   

   View Slide

3. Sansan Builders Box
   Vol.1について
   https://speakerdeck.com/sansanbuildersbox/architecture-to-support-eight-ios
   Eight iOSを⽀えるアーキテクチャ
   Architecture to support Eight iOS
   

   View Slide

4. Sansan Builders Box
   - Eightについて
   - Eight iOSを⽀えるアーキテクチャ
   > アーキテクチャとは
   > アーキテクチャのいいところ
   > Eightのアーキテクチャ
   Agenda
   

   View Slide

5. Sansan Builders Box
   Eightとは
   "
   
   '
   &
   !
   
   #
   $ %
   
   
   
   

   View Slide

6. アーキテクチャとは
   

   View Slide

7. Sansan Builders Box
   アーキテクチャとは!
   アーキテクチャ【architecture】
   1. 建築学。また、建築様式。
   2. 構造。構成。組織。
   3. コンピューターの特性を決定するデータの形式やハードウエア
   の機能分担などを含めた、コンピューターシステムの基本構造。
   引⽤: goo辞書
   アーキテクチャ = アプリケーション全体の構造
   

   View Slide

8. アーキテクチャのいいところ
   

   View Slide

9. Sansan Builders Box
   どちらの棚が使いやすそうですか？
   

   View Slide

10. Sansan Builders Box
    最近のアプリは⾊々な事ができる
    連絡先⼀覧
    名刺撮影 フィード プレミアム機能
    

    View Slide

11. Sansan Builders Box
    API通信
    画像処理
    矩形認識
    データ保存
    アニメーション
    ⼀つの機能に関しても…
    

    View Slide

12. Sansan Builders Box
    API通信
    画像処理
    矩形認識
    データ保存
    アニメーション
    実現するために必要なこと
    複雑、そして、やること沢⼭
    

    View Slide

13. Sansan Builders Box
    ⼀貫性のあるコードベースに
    アーキテクチャでアプリケーション全体に秩序を
    

    View Slide

14. Sansan Builders Box
    どちらの資料が理解しやすそうですか？
    

    View Slide

15. Sansan Builders Box
    課題を分割せよ
    「複雑なアプリを動かす」ための課題を、アーキテクチャで解決する
    

    View Slide

16. Sansan Builders Box
    共通理解
    アーキテクチャは、チーム開発において、⼀つの指針となる
    

    View Slide

17. Sansan Builders Box
    共通理解
    レビューによってカオス化を防ぐ
    

    View Slide

18. Sansan Builders Box
    共通理解
    Eight iOSアプリ アーキテクチャの指針
    

    View Slide

19. Sansan Builders Box
    「アーキテクチャのいいところ」まとめ
    ・アプリケーション全体に秩序をもたらす。
    ・ 「複雑なアプリを動かす」ための課題の解決策となる。
    ・チームでの開発を可能とする。
    より早く、安定した価値のあるものを提供することに繋がる
    

    View Slide

20. Eightのアーキテクチャ
    

    View Slide

21. Sansan Builders Box
    Eightで採⽤しているアーキテクチャ
    MVVM ( Model View ViewModel )
    採⽤している理由
    ・ViewControllerが肥⼤化してしまう課題への解決策
    ・RxSwiftのbinding機構を最⼤限に⽣かす
    

    View Slide

22. Sansan Builders Box
    MVVMの構造
    ( Apple が提供する UIKit には UIViewController という View を管理するクラスが
    あり、画⾯のライフサイクルと画⾯遷移を担う )
    UI Events
    Data Binding
    Requests
    View
    (ViewController)
    ViewModel Model
    Data
    

    View Slide

23. Sansan Builders Box
    Model
    UI Events
    Data
    Binding
    Requests
    View
    (ViewController)
    ViewModel Model
    Data
    Entity Request UseCase
    Repository
    

    View Slide

24. Sansan Builders Box
    全体
    UI Events
    Data
    Binding
    Requests
    Data
    Request
    Knows about
    Knows about
    Data, Result
    CRUD
    View
    (ViewController)
    ViewModel UseCase
    Request
    Entity
    Repository
    Response
    Model
    

    View Slide

25. 処理の流れと各層の役割
    

    View Slide

26. Sansan Builders Box
    要件
    1. カメラで名刺を撮影する
    2. その結果をOCR（API）かける
    3. OCRの結果が返ってきたら画⾯に遷移する
    

    View Slide

27. Sansan Builders Box
    処理の流れ
    UI Events
    Data Binding
    Requests
    View
    (ViewController)
    ViewModel Model
    Data
    シャッターボタンが
    押されました
    画像をOCRに
    かけてください
    

    View Slide

28. Sansan Builders Box
    View
    UI Events
    Data Binding
    Requests
    View
    (ViewController)
    ViewModel Model
    Data
    シャッターボタンが
    押されました
    画像をOCRに
    かけてください
    

    View Slide

29. Sansan Builders Box
    View
    すべきでないこと
    ・プレゼンテーションのロジックをかく
    すべきこと
    ・UIの操作 例：ボタンの⾊を設定する
    ・ユーザーからのアクションの受付
    ・画⾯遷移
    

    View Slide

30. Sansan Builders Box
    ViewModel
    UI Events
    Data Binding
    Requests
    View
    (ViewController)
    ViewModel Model
    Data
    シャッターボタンが
    押されました
    画像をOCRに
    かけてください
    

    View Slide

31. Sansan Builders Box
    ViewModel
    すべきこと
    ・プレゼンテーションのロジックをかく
    - ユーザーアクションを監視し、Modelに必要な処理を依頼する
    - Modelから取得した情報を元にViewがするべきことを通知する
    すべきでないこと
    ・UIの操作
    ・API通信やDBの操作
    

    View Slide

32. Sansan Builders Box
    Model
    UI Events
    Data Binding
    Requests
    View
    (ViewController)
    ViewModel Model
    Data
    シャッターボタンが
    押されました
    画像をOCRに
    かけてください
    

    View Slide

33. Sansan Builders Box
    Model
    すべきこと
    ・UIに関係しない処理
    ・ビジネスロジックをかく
    すべきでないこと
    ・ UIの定義や、UIのロジック
    

    View Slide

34. Sansan Builders Box
    Entity (Model)
    UI Events
    Data
    Binding
    Requests
    Data
    Request
    Knows about
    Knows about
    Data, Result
    CRUD
    ViewModel UseCase
    Request
    Entity
    Repository
    Response
    View
    (ViewController)
    Model
    

    View Slide

35. Sansan Builders Box
    Entity (Model)
    struct OCRResult {
    var name: String
    var companyName: String
    var title: String?
    var department: String?
    }
    

    View Slide

36. Sansan Builders Box
    Request (Model)
    UI Events
    Data
    Binding
    Requests
    Data
    Request
    Knows about
    Knows about
    Data, Result
    CRUD
    Response
    ViewModel UseCase
    Request
    Entity
    Repository
    View
    (ViewController)
    Model
    

    View Slide

37. Sansan Builders Box
    Request (Model)
    通信処理が書かれたクラス
    リクエスト情報 リクエスト情報 リクエスト情報
    

    View Slide

38. Sansan Builders Box
    Request (Model)
    struct PostOCRResultRequest: RequestType {
    typealias Response = OCRResult
    let image: UIImage
    var method: HTTPMethod {
    return .PUT
    }
    var parameters: [String: AnyObject]? {
    return ["image": image as AnyObject]
    }
    var path: String {
    return // Path
    }
    func responseFromObject(_ object: OCRResult) -> OCRResult? {
    return OCRResult(from: object)
    }
    }
    

    View Slide

39. Sansan Builders Box
    Repository (Model)
    UI Events
    Data
    Binding
    Requests
    Data
    Request
    Knows about
    Knows about
    Data, Result
    CRUD
    ViewModel UseCase
    Request
    Entity
    Repository
    Response
    View
    (ViewController)
    Model
    

    View Slide

40. Sansan Builders Box
    Repository (Model)
    func load() -> OCRResult?
    func find(ID: Int)
    func update(result: OCRResult)
    func delete(ID: Int)
    読み込み、検索、削除、更新等、データベースの操作を⾏う
    

    View Slide

41. Sansan Builders Box
    UseCase (Model)
    UI Events
    Data
    Binding
    Requests
    Data
    Request
    Knows about
    Knows about
    Data, Result
    CRUD
    ViewModel UseCase
    Request
    Entity
    Repository
    Response
    View
    (ViewController)
    Model
    

    View Slide

42. Sansan Builders Box
    UseCase (Model)
    Entity, Repository, Request を利⽤(依存)して、
    必要とされる⼿続きを実⾏する。
    private let repository: OCRResultRepository
    func check(of image: UIImage) -> Completable {
    let request = PostOCRResultRequest(image: image)
    return client
    .rx_request(request)
    .flatMapCompletable({ [unowned self] result in
    return self.repository.save(result: result)
    })
    }
    

    View Slide

43. Sansan Builders Box
    要件
    1. カメラで名刺を撮影する
    2. その結果をOCR（API）かける
    3. OCRの結果が返ってきたら画⾯に遷移する
    

    View Slide

44. Sansan Builders Box
    処理の流れ
    UI Events
    Data Binding
    Requests
    View
    (ViewController)
    ViewModel Model
    Data
    OCRの結果を表⽰する画⾯
    に遷移してください
    OCRの結果取得に
    成功しました✌
    

    View Slide

45. Sansan Builders Box
    処理の流れ
    UI Events
    Data Binding
    Requests
    View
    (ViewController)
    ViewModel Model
    Data
    エラーダイアログを
    出してください
    OCRの結果取得に
    失敗しました
    

    View Slide

46. Sansan Builders Box
    ViewModel
    すべきこと
    ・プレゼンテーションのロジックをかく
    - ユーザーアクションを監視し、Modelに必要な処理を依頼する
    - Modelから取得した情報を元にViewがするべきことを通知する
    すべきでないこと
    ・UIの操作
    ・API通信やDBの操作
    

    View Slide

47. Sansan Builders Box
    View
    すべきでないこと
    ・プレゼンテーションのロジックをかく
    すべきこと
    ・UIの操作 例：ボタンの⾊を設定する
    ・ユーザーからのアクションの受付
    ・画⾯遷移
    

    View Slide

48. Sansan Builders Box
    完成
    1. カメラで名刺を撮影する
    2. その結果をOCR（API）かける
    3. OCRの結果が返ってきたら画⾯に遷移する
    完成
    

    View Slide

49. Sansan Builders Box
    まとめ
    

    View Slide

50. Sansan Builders Box
    まとめ
    アーキテクチャはアプリケーション全体の構造。
    どんなものでも構造がしっかりしていれば、簡単に倒れることはない。
    しっかりとした構造の基で、プロダクトを成⻑させる
    

    View Slide

51. Thank you for listening✨
    ★
    

    View Slide