Slide 1
Slide 1 text
Eight iOSを⽀える
アーキテクチャ Vol.2
KIE IKEBATA
Slide 2
Slide 2 text
池端 貴恵（Kie Ikebata）
沖縄に⽣まれる。
⾼校までを沖縄で過ごし、⼤学は中国・上海の⼤学へ進学。
卒業後、⼀年間上海で働いた後に帰国。
なんとなく⼤阪で就職活動、家具メーカーの海外バイヤーになる。
数年働いた後、キャリアチェンジすることを決意。
プログラミングを独学で始め、
キャリアスクールやインターンを経てiOSエンジニアとなる。
2018年4⽉にSansan株式会社⼊社。現在は関⻄⽀社にて勤務。
Eight事業部 iOSエンジニア
Slide 3
Slide 3 text
Sansan Builders Box
Vol.1について
https://speakerdeck.com/sansanbuildersbox/architecture-to-support-eight-ios
Eight iOSを⽀えるアーキテクチャ
Architecture to support Eight iOS
Slide 4
Slide 4 text
Sansan Builders Box
- Eightについて
- Eight iOSを⽀えるアーキテクチャ
> アーキテクチャとは
> アーキテクチャのいいところ
> Eightのアーキテクチャ
Agenda
Slide 5
Slide 5 text
Sansan Builders Box
Eightとは
"
'
&
!
#
$ %
Slide 6
Slide 6 text
アーキテクチャとは
Slide 7
Slide 7 text
Sansan Builders Box
アーキテクチャとは!
アーキテクチャ【architecture】
1. 建築学。また、建築様式。
2. 構造。構成。組織。
3. コンピューターの特性を決定するデータの形式やハードウエア
の機能分担などを含めた、コンピューターシステムの基本構造。
引⽤: goo辞書
アーキテクチャ = アプリケーション全体の構造
Slide 8
Slide 8 text
アーキテクチャのいいところ
Slide 9
Slide 9 text
Sansan Builders Box
どちらの棚が使いやすそうですか？
Slide 10
Slide 10 text
Sansan Builders Box
最近のアプリは⾊々な事ができる
連絡先⼀覧
名刺撮影 フィード プレミアム機能
Slide 11
Slide 11 text
Sansan Builders Box
API通信
画像処理
矩形認識
データ保存
アニメーション
⼀つの機能に関しても…
Slide 12
Slide 12 text
Sansan Builders Box
API通信
画像処理
矩形認識
データ保存
アニメーション
実現するために必要なこと
複雑、そして、やること沢⼭
Slide 13
Slide 13 text
Sansan Builders Box
⼀貫性のあるコードベースに
アーキテクチャでアプリケーション全体に秩序を
Slide 14
Slide 14 text
Sansan Builders Box
どちらの資料が理解しやすそうですか？
Slide 15
Slide 15 text
Sansan Builders Box
課題を分割せよ
「複雑なアプリを動かす」ための課題を、アーキテクチャで解決する
Slide 16
Slide 16 text
Sansan Builders Box
共通理解
アーキテクチャは、チーム開発において、⼀つの指針となる
Slide 17
Slide 17 text
Sansan Builders Box
共通理解
レビューによってカオス化を防ぐ
Slide 18
Slide 18 text
Sansan Builders Box
共通理解
Eight iOSアプリ アーキテクチャの指針
Slide 19
Slide 19 text
Sansan Builders Box
「アーキテクチャのいいところ」まとめ
・アプリケーション全体に秩序をもたらす。
・ 「複雑なアプリを動かす」ための課題の解決策となる。
・チームでの開発を可能とする。
より早く、安定した価値のあるものを提供することに繋がる
Slide 20
Slide 20 text
Eightのアーキテクチャ
Slide 21
Slide 21 text
Sansan Builders Box
Eightで採⽤しているアーキテクチャ
MVVM ( Model View ViewModel )
採⽤している理由
・ViewControllerが肥⼤化してしまう課題への解決策
・RxSwiftのbinding機構を最⼤限に⽣かす
Slide 22
Slide 22 text
Sansan Builders Box
MVVMの構造
( Apple が提供する UIKit には UIViewController という View を管理するクラスが
あり、画⾯のライフサイクルと画⾯遷移を担う )
UI Events
Data Binding
Requests
View
(ViewController)
ViewModel Model
Data
Slide 23
Slide 23 text
Sansan Builders Box
Model
UI Events
Data
Binding
Requests
View
(ViewController)
ViewModel Model
Data
Entity Request UseCase
Repository
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
処理の流れと各層の役割
Slide 26
Slide 26 text
Sansan Builders Box
要件
1. カメラで名刺を撮影する
2. その結果をOCR（API）かける
3. OCRの結果が返ってきたら画⾯に遷移する
Slide 27
Slide 27 text
Sansan Builders Box
処理の流れ
UI Events
Data Binding
Requests
View
(ViewController)
ViewModel Model
Data
シャッターボタンが
押されました
画像をOCRに
かけてください
Slide 28
Slide 28 text
Sansan Builders Box
View
UI Events
Data Binding
Requests
View
(ViewController)
ViewModel Model
Data
シャッターボタンが
押されました
画像をOCRに
かけてください
Slide 29
Slide 29 text
Sansan Builders Box
View
すべきでないこと
・プレゼンテーションのロジックをかく
すべきこと
・UIの操作 例：ボタンの⾊を設定する
・ユーザーからのアクションの受付
・画⾯遷移
Slide 30
Slide 30 text
Sansan Builders Box
ViewModel
UI Events
Data Binding
Requests
View
(ViewController)
ViewModel Model
Data
シャッターボタンが
押されました
画像をOCRに
かけてください
Slide 31
Slide 31 text
Sansan Builders Box
ViewModel
すべきこと
・プレゼンテーションのロジックをかく
- ユーザーアクションを監視し、Modelに必要な処理を依頼する
- Modelから取得した情報を元にViewがするべきことを通知する
すべきでないこと
・UIの操作
・API通信やDBの操作
Slide 32
Slide 32 text
Sansan Builders Box
Model
UI Events
Data Binding
Requests
View
(ViewController)
ViewModel Model
Data
シャッターボタンが
押されました
画像をOCRに
かけてください
Slide 33
Slide 33 text
Sansan Builders Box
Model
すべきこと
・UIに関係しない処理
・ビジネスロジックをかく
すべきでないこと
・ UIの定義や、UIのロジック
Slide 34
Slide 34 text
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
Slide 35
Slide 35 text
Sansan Builders Box
Entity (Model)
struct OCRResult {
var name: String
var companyName: String
var title: String?
var department: String?
}
Slide 36
Slide 36 text
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
Slide 37
Slide 37 text
Sansan Builders Box
Request (Model)
通信処理が書かれたクラス
リクエスト情報 リクエスト情報 リクエスト情報
Slide 38
Slide 38 text
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)
}
}
Slide 39
Slide 39 text
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
Slide 40
Slide 40 text
Sansan Builders Box
Repository (Model)
func load() -> OCRResult?
func find(ID: Int)
func update(result: OCRResult)
func delete(ID: Int)
読み込み、検索、削除、更新等、データベースの操作を⾏う
Slide 41
Slide 41 text
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
Slide 42
Slide 42 text
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)
})
}
Slide 43
Slide 43 text
Sansan Builders Box
要件
1. カメラで名刺を撮影する
2. その結果をOCR（API）かける
3. OCRの結果が返ってきたら画⾯に遷移する
Slide 44
Slide 44 text
Sansan Builders Box
処理の流れ
UI Events
Data Binding
Requests
View
(ViewController)
ViewModel Model
Data
OCRの結果を表⽰する画⾯
に遷移してください
OCRの結果取得に
成功しました✌
Slide 45
Slide 45 text
Sansan Builders Box
処理の流れ
UI Events
Data Binding
Requests
View
(ViewController)
ViewModel Model
Data
エラーダイアログを
出してください
OCRの結果取得に
失敗しました
Slide 46
Slide 46 text
Sansan Builders Box
ViewModel
すべきこと
・プレゼンテーションのロジックをかく
- ユーザーアクションを監視し、Modelに必要な処理を依頼する
- Modelから取得した情報を元にViewがするべきことを通知する
すべきでないこと
・UIの操作
・API通信やDBの操作
Slide 47
Slide 47 text
Sansan Builders Box
View
すべきでないこと
・プレゼンテーションのロジックをかく
すべきこと
・UIの操作 例：ボタンの⾊を設定する
・ユーザーからのアクションの受付
・画⾯遷移
Slide 48
Slide 48 text
Sansan Builders Box
完成
1. カメラで名刺を撮影する
2. その結果をOCR（API）かける
3. OCRの結果が返ってきたら画⾯に遷移する
完成
Slide 49
Slide 49 text
Sansan Builders Box
まとめ
Slide 50
Slide 50 text
Sansan Builders Box
まとめ
アーキテクチャはアプリケーション全体の構造。
どんなものでも構造がしっかりしていれば、簡単に倒れることはない。
しっかりとした構造の基で、プロダクトを成⻑させる
Slide 51
Slide 51 text
Thank you for listening✨
★