Slide 1
Slide 1 text
৽نΞϓϦΛ࡞Γ࢝ΊΔલʹνʔϜͰܾΊͨ͜ͱ
ߴڮ ༏հ @corin8823
גࣜձࣾτϧς / iOS Developer
2017.03.01
Slide 2
Slide 2 text
ߴڮ ༏հ
yusuke takahashi
גࣜձࣾτϧς / iOS Developer
2013৽ଔೖࣾ
ࣗݾհ
corin8823
@corin8823
Slide 3
Slide 3 text
৽نΞϓϦΛ࡞Γ࢝ΊΔલʹ
νʔϜͰܾΊͨ͜ͱ
Slide 4
Slide 4 text
લఏ
ɾ֤ϙδγϣϯ͕1ਓͣͭ
ɾαʔόʔαΠυ͚ͩ࠷ۙ2ਓʹ
ิ
ɾ༷ܾఆϑϩʔͷ͠·ͤΜɻ
ɾͳͷͰϓϩμΫτΦʔφʔͱͷΓऔΓग़͖ͯ·ͤΜɻ
ɾ͝ҙݟɺΞυόΠε͋Γ·ͨ͠ΒΑΖ͓͘͠ئ͍͠·͢
Slide 5
Slide 5 text
࣍
ServerSide Engineer
Android Engineer
Designer
Slide 6
Slide 6 text
࣍
ServerSide Engineer
Android Engineer
Designer
Slide 7
Slide 7 text
API Document
Slide 8
Slide 8 text
ɾAPIͷϦΫΤετͱϨεϙϯεΛهड़
ɾਓগͳ͍ͷͰίετͳΔ͘Լ͍͛ͨ
ɾ։ൃॳظͰϞοΫαʔόͱͯ͠ୟ͖͍ͨ
ɾಈ͍ͯΔίʔυͱಉظ͍͢͠ํ͕ྑ͍
ཁ݅
Slide 9
Slide 9 text
ɾAPIͷϦΫΤετͱϨεϙϯεΛهड़
ɾਓগͳ͍ͷͰίετͳΔ͘Լ͍͛ͨ
ɾ։ൃॳظͰϞοΫαʔόͱͯ͠ୟ͖͍ͨ
ɾಈ͍ͯΔίʔυͱಉظ͍͢͠ํ͕ྑ͍
ཁ݅
Slide 10
Slide 10 text
apiary
IUUQTBQJBSZJP
Slide 11
Slide 11 text
ɾAPI BlueprintͰهड़
ɾAPI Document ˍ MockServer
ɾ࠷ۙOracleʹങऩ͞Εͨ
ɾGitHub࿈ܞͰ͖Δ
ɾPullRequestͰϨϏϡʔ͔ͯ͠Βө
apiary
IUUQUIFCSJEHFKQPSBDMFBDRVJSFTBQJEFWFMPQNFOUTUBSUVQBQJBSZ
Slide 12
Slide 12 text
࣍
ServerSide Engineer: API Document
Android Engineer
Designer
Slide 13
Slide 13 text
Android൛ͪ͜Β
IUUQTTQFBLFSEFDLDPNTIBVOLBXBOPUPSVUFOJPLFSVYJOHVJBOESPJEBQVSJLBJGBGBMTFKJTIVYVBOEJOHOJUVJUF
Slide 14
Slide 14 text
Architecture
Slide 15
Slide 15 text
ɾAndroidͱઃܭΛҰॹʹ͍ͨ͠
ɹɾϨϏϡʔ(૬ஊ)͕͍ͨ͠
ɾঢ়ଶཧ͕ଟ͘ͳͬͯਏ͘ͳ͍
ɹɾMVVMɺReduxɺFlux
ཁ݅ͱ͍͏͔ॏࢹͨ͜͠ͱ
Slide 16
Slide 16 text
Architecture
Flux
IUUQTGBDFCPPLHJUIVCJPqVYEPDTJOEFQUIPWFSWJFXIUNMDPOUFOU
Slide 17
Slide 17 text
ɾσʔλͷྲྀΕΛ੍ݶ͢Δ
ɾঢ়ଶཧΛStoreʹԡ͠ࠐΊΔ
ɾObserverύλʔϯͷׂΛ໌֬ʹ(ͩͱࢥͬͯΔ)
Flux
Slide 18
Slide 18 text
Flux(Action: ίʔυྫ)
class TopAction {
enum Item {
case load
case error
}
private let dispatcher: Dispatcher
init(dispatcher: Dispatcher = .shared) {
self.dispatcher = dispatcher
}
func loadItem() {
let request = QiitaAPI.ItemRequest()
Session.send(requeset) { result in
switch result {
case .success(let items):
self.dispatcher.dispatch(obj: items, key: Item.load)
case .failure(let error):
self.dispatcher.dispatch(obj: error, key: Item.error)
}
}
}
}
Slide 19
Slide 19 text
Flux(Store: ίʔυྫ)
class TopStore {
private(set) var items = Variable<[Item]>([])
private(set) var error = PublishSubject()
init(dispatcher: Dispatcher = .shared) {
dispatcher.register(observer: self, key: TopAction.Item.load) { [weak self] (items: [Item]) in
self?.items.value = items
}
dispatcher.register(observer: self, key: TopAction.Item.error) { [weak self] (error: Error) in
self?.error.on(.next(error))
}
}
}
Slide 20
Slide 20 text
Flux(ViewController: ίʔυྫ)
class TopViewController: UIViewController {
@IBOutlet weak var tableView: UITableView!
private let store = TopStore()
private let disposeBag = DisposeBag()
override func viewDidLoad() {
super.viewDidLoad()
self.store.error
.bindNext { error in
// error handling
}
.addDisposableTo(self.disposeBag)
self.store.items
.asObservable()
.bindNext { [weak self] _ in
self?.tableView.reloadData()
}
.addDisposableTo(self.disposeBag)
TopAction().loadItem()
}
}
Slide 21
Slide 21 text
࣍
ServerSide Engineer: API Document
Android Engineer: Architecture
Designer
Slide 22
Slide 22 text
IUUQTXXXTLFUDIBQQDPN
Sketch
Slide 23
Slide 23 text
Sketch
ɾϑΥϯτΧϥʔࢦఆͳͲΨΠυͳ͠Ͱ
ɾσβΠϯ༻ͷϨϙδτϦ
ɾSketchϑΝΠϧΛpush
ɾ։ൃ͕ਐΜͩΒgit-sketch-plugin
Slide 24
Slide 24 text
git-sketch-plugin
IUUQTHJUIVCDPNNBUIJFVEVUPVSHJUTLFUDIQMVHJO
Slide 25
Slide 25 text
Font Icon
Slide 26
Slide 26 text
ɾը૾ͱҧ͍৭αΠζແࢹ
ɾAndroidʹల։
ɾGlyphsͰͭͬͯ͘ΒͬͯΔ
ɾΞΠίϯ+จࣈ
ɾNSAttributedStringΛ༻͍ͯ࡞Γ͍͢
Font Icon
IUUQTHMZQITBQQDPN
Slide 27
Slide 27 text
iconͷ࡞࣌ͷ͢Γ߹ΘͤΔ͖
ฤू ฤू
Slide 28
Slide 28 text
iconͷ࡞࣌ͷ͢Γ߹ΘͤΔ͖
ɾline-heightͷζϨσβΠϯଆͰղܾ
ɾNSBaselineOffsetAttributeNameͩΊ
ɾ༻ͯ͠ΔϑΥϯτʹ߹Θͤͯ࡞
ฤू ฤू
Slide 29
Slide 29 text
Color
Slide 30
Slide 30 text
ɾαʔϏεͷϒϥϯυͷ߹ੑ୲อ
ɾมߋʹ͑ΒΕΔΑ͏ʹ
ɾελΠϧΨΠυΛ࡞ΓɺޮΞοϓ
ཁ݅
Slide 31
Slide 31 text
ϑϩϯτΤϯυࢹɿσβΠφʔͱڠۀͯ͠࡞ΔελΠϧΨΠυͷқΛԼ͛Δ
IUUQZHPUPDPNQPTUTNBLFTUZMFHVJEFFBTZ
ɾελΠϧΨΠυࢮʹ͍͢
ɾശ͚ͩελΠϧΨΠυΛ࡞Δ
ɾ໌ύλʔϯͱ҉ύλʔϯͷശΛ༻ҙ͢Δ
Slide 32
Slide 32 text
Colorఆٛྫ
Slide 33
Slide 33 text
Colorఆٛྫ
public static var lightAccent: UIColor {
return Color.pink.color
}
public static var lightDanger: UIColor {
return Color.red.color
}
public static var lightBase: UIColor {
return Color.grayF6.color
}
public static var lightText1: UIColor {
return Color.gray30.color
}
public static var lightText2: UIColor {
return Color.gray66.color
}
public static var lightText3: UIColor {
return Color.grayAA.color
}
}
Slide 34
Slide 34 text
·ͱΊ
Slide 35
Slide 35 text
৽نΞϓϦΛ࡞Γ࢝ΊΔલʹ
νʔϜͰܾΊͨ͜ͱ
Slide 36
Slide 36 text
·ͱΊ
ServerSide Engineer: API Document
Android Engineer: Architecture
Designer: Sketch, Font icon, Color
Slide 37
Slide 37 text
ԿΛઌʹܾΊΔ͔
Slide 38
Slide 38 text
Thank you !