新規アプリを作り始める前にチームで決めたこと

新規アプリを作り始める前にチームで決めたこと
apiary: https://apiary.io/
Flux: https://facebook.github.io/flux/docs/in-depth-overview.html#content
Sketch: https://www.sketchapp.com/
git-sketch-plugin: https://github.com/mathieudutour/git-sketch-plugin
Glyphs: https://glyphsapp.com/
フロントエンド視点：デザイナーと協業して作るスタイルガイドの難易度を下げる: http://ygoto3.com/posts/make-style-guide-easy/

Transcript

1. ৽نΞϓϦΛ࡞Γ࢝ΊΔલʹνʔϜͰܾΊͨ͜ͱ ߴڮ ༏հ @corin8823 גࣜձࣾτϧς / iOS Developer 2017.03.01
2. ߴڮ ༏հ yusuke takahashi גࣜձࣾτϧς / iOS Developer 2013೥౓৽ଔೖࣾ ࣗݾ঺հ corin8823 @corin8823
3. ৽نΞϓϦΛ࡞Γ࢝ΊΔલʹ νʔϜͰܾΊͨ͜ͱ
4. લఏ ɾ֤ϙδγϣϯ͕1ਓͣͭ ɾαʔόʔαΠυ͚ͩ࠷ۙ2ਓʹ ิ଍ ɾ࢓༷ܾఆϑϩʔͷ࿩͸͠·ͤΜɻ ɾͳͷͰϓϩμΫτΦʔφʔͱͷ΍ΓऔΓ͸ग़͖ͯ·ͤΜɻ ɾ͝ҙݟɺΞυόΠε౳͋Γ·ͨ͠ΒΑΖ͓͘͠ئ͍͠·͢
5. ໨࣍ ServerSide Engineer Android Engineer Designer
6. ໨࣍ ServerSide Engineer Android Engineer Designer
7. API Document
8. ɾAPIͷϦΫΤετͱϨεϙϯεΛهड़ ɾਓ਺΋গͳ͍ͷͰίετ͸ͳΔ΂͘Լ͍͛ͨ ɾ։ൃॳظͰϞοΫαʔόͱͯ͠ୟ͖͍ͨ ɾಈ͍ͯΔίʔυͱಉظ͠΍͍͢ํ͕ྑ͍ ཁ݅
9. ɾAPIͷϦΫΤετͱϨεϙϯεΛهड़ ɾਓ਺΋গͳ͍ͷͰίετ͸ͳΔ΂͘Լ͍͛ͨ ɾ։ൃॳظͰϞοΫαʔόͱͯ͠ୟ͖͍ͨ ɾಈ͍ͯΔίʔυͱಉظ͠΍͍͢ํ͕ྑ͍ ཁ݅
10. apiary IUUQTBQJBSZJP
11. ɾAPI BlueprintͰهड़ ɾAPI Document ˍ MockServer ɾ࠷ۙOracleʹങऩ͞Εͨ ɾGitHub࿈ܞͰ͖Δ ɾPullRequestͰϨϏϡʔ͔ͯ͠Β൓ө apiary IUUQUIFCSJEHFKQPSBDMFBDRVJSFTBQJEFWFMPQNFOUTUBSUVQBQJBSZ
12. ໨࣍ ServerSide Engineer: API Document Android Engineer Designer
13. Android൛͸ͪ͜Β IUUQTTQFBLFSEFDLDPNTIBVOLBXBOPUPSVUFOJPLFSVYJOHVJBOESPJEBQVSJLBJGBGBMTFKJTIVYVBOEJOHOJUVJUF
14. Architecture
15. ɾAndroidͱઃܭΛҰॹʹ͍ͨ͠ ɹɾϨϏϡʔ(૬ஊ)͕͍ͨ͠
 ɾঢ়ଶ؅ཧ͕ଟ͘ͳͬͯ΋ਏ͘ͳ͍ ɹɾMVVMɺReduxɺFlux ཁ݅ͱ͍͏͔ॏࢹͨ͜͠ͱ
16. Architecture Flux IUUQTGBDFCPPLHJUIVCJPqVYEPDTJOEFQUIPWFSWJFXIUNMDPOUFOU
17. ɾσʔλͷྲྀΕΛ੍ݶ͢Δ ɾঢ়ଶ؅ཧΛStoreʹԡ͠ࠐΊΔ ɾObserverύλʔϯͷ໾ׂΛ໌֬ʹ(ͩͱࢥͬͯΔ) Flux
18. 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) } } } }
19. Flux(Store: ίʔυྫ) class TopStore { private(set) var items = Variable<[Item]>([]) private(set) var error = PublishSubject<Error>() 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)) } } }
20. 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() } }
21. ໨࣍ ServerSide Engineer: API Document Android Engineer: Architecture Designer
22. IUUQTXXXTLFUDIBQQDPN Sketch
23. Sketch ɾϑΥϯτ΍ΧϥʔࢦఆͳͲΨΠυͳ͠Ͱ
 ɾσβΠϯ༻ͷϨϙδτϦ ɾSketchϑΝΠϧΛpush ɾ։ൃ͕ਐΜͩΒgit-sketch-plugin౳
24. git-sketch-plugin IUUQTHJUIVCDPNNBUIJFVEVUPVSHJUTLFUDIQMVHJO
25. Font Icon
26. ɾը૾ͱҧ͍৭΋αΠζ΋ແࢹ ɾAndroidʹ΋ల։ ɾGlyphsͰͭͬͯ͘΋ΒͬͯΔ ɾΞΠίϯ+จࣈ΋ ɾNSAttributedStringΛ༻͍ͯ࡞Γ΍͍͢ Font Icon IUUQTHMZQITBQQDPN
27. iconͷ࡞੒࣌ͷ͢Γ߹ΘͤΔ΂͖఺
    ฤू ฤू
    
28. iconͷ࡞੒࣌ͷ͢Γ߹ΘͤΔ΂͖఺ ɾline-heightͷζϨ͸σβΠϯଆͰղܾ ɾNSBaselineOffsetAttributeNameͩΊ ɾ࢖༻ͯ͠ΔϑΥϯτʹ߹Θͤͯ࡞੒
    ฤू ฤू
    
29. Color
30. ɾαʔϏεͷϒϥϯυͷ੔߹ੑ୲อ ɾมߋʹ଱͑ΒΕΔΑ͏ʹ ɾελΠϧΨΠυΛ࡞Γɺޮ཰Ξοϓ ཁ݅
31. ϑϩϯτΤϯυࢹ఺ɿσβΠφʔͱڠۀͯ͠࡞ΔελΠϧΨΠυͷ೉қ౓ΛԼ͛Δ IUUQZHPUPDPNQPTUTNBLFTUZMFHVJEFFBTZ ɾελΠϧΨΠυ͸ࢮʹ΍͍͢ ɾശ͚ͩελΠϧΨΠυΛ࡞Δ ɾ໌ύλʔϯͱ҉ύλʔϯͷശΛ༻ҙ͢Δ
32. Colorఆٛྫ
33. 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 } }
34. ·ͱΊ
35. ৽نΞϓϦΛ࡞Γ࢝ΊΔલʹ νʔϜͰܾΊͨ͜ͱ
36. ·ͱΊ ServerSide Engineer: API Document Android Engineer: Architecture Designer: Sketch, Font icon, Color
37. ԿΛઌʹܾΊΔ͔
38. Thank you !