FRESH!配信アプリで採用した事・しなかった事

CA.swift #5
25 JAN. 2018
VueFlux https://github.com/ra1028/VueFlux

Transcript

1. FRESH!഑৴ΞϓϦͰ

   ࠾༻ͨ͠ࣄɾ͠ͳ͔ͬͨࣄ
   2018/01/25 CA.swift #5
   Ryo Aoyama

   CyberAgent, Inc
   GitHub: @ra1028

   Twitter: @ra1028fe5
   

   View Slide

2. Profile
   ੨ࢁ ྒྷ
   גࣜձࣾαΠόʔΤʔδΣϯτ

   FRESH!
   2016೥ 4݄ ೖࣾ
   FRESH!ΞϓϦ(ࢹௌ)ɾFRESH! CASTΞϓϦ(഑৴)Λ։ൃத
   GitHub: @ra1028
   Twitter: @ra1028fe5
   

   View Slide

3. View Slide

4. ϩάΠϯෆཁɾߴը࣭ɾ௿஗ԆͰݟ์୊
   όϥΤςΟʹ෋Μͩੜ์ૹಈըͷ഑৴ϓϥοτϑΥʔϜ
   

   View Slide

5. Home Broadcast
   ੜ์ૹ഑৴ɾΞοϓϩʔυ഑৴ɾ༧໿؅ཧɾetc…
   

   View Slide

6. ಈըࢹௌΞϓϦͷ։ൃΛܦͯ

   ԿΛ࠾༻ͯ͠ԿΛม͑ͨʁ
   

   View Slide

7. Contents
   • SVGΞΠίϯϦιʔε
   • XcodeGen
   • Danger
   • VueFlux ΞʔΩςΫνϟ
   • ϥΠϒϥϦ
   

   View Slide

8. VueFlux
   https://github.com/ra1028/VueFlux
   Unidirectional State Management Architecture for Swift
   - Inspired by Vuex and Flux
   VueFlux makes a unidirectional and predictable flow by
   explicitly dividing the roles making up the ViewController.
   

   View Slide

9. View Slide

10. View Slide

11. Actions
    

    View Slide

12. Actions
    ঢ়ଶભҠͤ͞ΔActionΛఆٛ
    enumͰ΋structͰ΋ܕ͸ͳΜͰ΋OK
    

    View Slide

13. Actions
    APIϦΫΤετͷϨεϙϯεʹԠͯ͡ActionΛDispatch
    

    View Slide

14. Actions
    ActionsͰ͸֎෦΁ͷґଘͳ͘ɺσʔλͷऔಘͳͲΛߦ͍ɺ
    ͦͷ݁ՌΛenumͳͲͷActionʹPayloadͯ͠ఴ෇ͯ͠
    Dispatch͢Δ
    

    View Slide

15. View Slide

16. Mutations
    

    View Slide

17. Mutations
    Stateͷঢ়ଶมߋ͸MutationsΛհͯ͠ͷΈʹݶఆ͞ΕΔ
    

    View Slide

18. Mutations
    iOSʹ͸React΍ElmͰ͍͏Virtual DOMͷΑ͏ͳࠩ෼ߋ৽
    γεςϜ͕ͳ͘ɺImmutableͳStateͰ͸ෳࡶͳঢ়ଶΛදݱ
    ͮ͠Β͍
    VueFluxͰ͸ClassͷMutableͳStateͷ಺෦ঢ়ଶΛActionͷ
    ࣝผʹΑͬͯݸผʹߋ৽͢Δ
    

    View Slide

19. View Slide

20. State
    

    View Slide

21. State
    ActionͱMutationsΛassociatedtypeʹ΋ͭ
    class(mutable)ͳܕ
    

    View Slide

22. State
    ActionͱMutationsΛassociatedtypeʹ΋ͭ
    class(mutable)ͳܕ
    ComputedʹΑͬͯɺViewͷͨΊͷ஋ʹม׵
    ·ͨImmutableͳ஋ʹͯ͠ެ։͢Δ
    

    View Slide

23. State
    ಺෦ঢ়ଶͱͯ͠ը໘ͷৄࡉঢ়ଶભҠʹผ్State
    MachineΛ࢖ͬͨભҠΛݕ౼ͯ͠΋ྑͦ͞͏
    

    View Slide

24. State
    ޓ͍ʹ૬ؔੑͷͳ͍಺෦ঢ়ଶΛෳ਺࣋ͭ
    a.k.a ViewModel
    ಺෦ঢ়ଶϓϩύςΟ͸fileprivateʹͯ͠Mutationsͱ
    ComputedΛಉҰϑΝΠϧʹ͢Δ͜ͱͰΞΫηεϨ
    ϕϧΛ੍ݶ͢Δ
    

    View Slide

25. View Slide

26. ViewController
    

    View Slide

27. ViewController
    isIndicatorHiddenΛindicatorͷisHiddenͱbind
    viewWillAppear͕ݺ͹Εͨ࣌Ұճ͚ͩrefresh()
    Actionsʹఆٛͨ͠refreshΛݺͿ
    ͜ͷ࣌ɺStore.actions͔ΒݺͿͱɺ
    ಉ͡ܕͷstateશମʹBroadcast͞ΕΔ
    StoreͷΠϯελϯεΛ࡞Δͱ͖ʹstate, mutations΋࡞ͬͯ౉͢
    

    View Slide

28. ViewController
    MVVMͷΑ͏ʹɺViewController - StoreؒͷόΠϯσΟϯά
    ํ๏͸࢖༻ऀʹҕͶΔ
    جຊతʹReactive૝ఆͳͷͰɺVueFluxͱ͸frameworkΛ෼
    ͚ͯVueFluxReactiveͱ͍͏؆қతͳReactiveϥΠϒϥϦΛ
    ࢖͑ΔΑ͏ʹͨ͠
    

    View Slide

29. VueFlux
    Flux(Redux)Λ࠾༻͢Δ্Ͱؾʹͳ͍ͬͯͨStateͷதԝ
    ूதʹΑΔͭΒΈ΍ɺܕ৘ใ͕εϙΠϧ͞ΕͨΓOptional
    ͳ৘ใ΋ଟ͘cast, unwrapͷཛྷ…ͳ໰୊͸ղܾͰ͖ͨ
    ը໘ͱStore͕1:1ͷMulti-Storeߏ੒ͰState͕Mutable
    ͱɺϢʔβʔͷଟ͍ReduxͱٯΛߦͬͨ΋ͷͷiOSͰͷ
    FluxͱMVVMͷਏ͞Λ͏·ؙ͘ΊΔײ֮Ͱ࢖͑ͯྑ͍
    

    View Slide

30. Contents
    • SVG ΞΠίϯϦιʔε
    • XcodeGen
    • Danger
    • VueFlux ΞʔΩςΫνϟ
    • ϥΠϒϥϦ
    

    View Slide

31. ϥΠϒϥϦ
    • ૉ௚ʹރΕͨ΋ͷΛબͿ
    ௨৴ܥͳͲͷಈ࡞΍ى͜Γ͏Δόάͷશ༰͕௫Ίͳ͍΋ͷ͸ɺ୯७
    ʹϢʔβʔ͕ଟ͍΄͏͕χονͳόάमਖ਼͕ೖ͍ͬͯͯॿ͔Δ
    • طଘͷ΋ͷͰྑ͍΋ͷ͕ͳ͚Ε͹ࣗ࡞͢Δ
    ༧Ίগ࣌ؒ͠ΛऔͬͯϕʔεΛ࡞ΓɺΞϓϦͱಉ࣌ਐߦͰ࡞੒
    

    View Slide

32. ϥΠϒϥϦ
    πʔϧ
    SwiftGen
    SwiftLint
    UI
    SpringIndicator
    ςετ
    Nimble
    Quick
    Ϩϙʔτ
    Crashlytics
    Fabric
    ΞʔΩςΫνϟ
    VueFlux
    ReactiveSwift
    ReactiveCocoa
    ௨৴
    Alamofire
    AWSCore
    AWSS3
    ιέοτ௨৴
    Socket.IO-Client-Swift
    Starscream
    ը૾
    Kingfisher
    ϩά
    SwiftyBeaver
    ϢʔςΟϦςΟ
    Alembic
    Magnolia(β)
    KeychainAccess
    ReachabilitySwift
    Result
    

    View Slide

33. ϥΠϒϥϦ
    • େ͖͍΋ͷ͸΄ͱΜͲಉ͡
    • ΞʔΩςΫνϟઃܭʹVueFluxɺࢹௌΞϓϦͷUIมߋͷଟ͞
    ͱϦετ؅ཧͷਏ͔͞ΒMagnolia(β)Λ࡞੒ɺಋೖ
    • ͍ͭͰʹࣗ࡞ͯͨ͠JSONύʔαʔͷAlembicΛಋೖ
    

    View Slide

34. Contents
    • SVG ΞΠίϯϦιʔε
    • XcodeGen
    • Danger
    • VueFlux ΞʔΩςΫνϟ
    • ϥΠϒϥϦ
    

    View Slide

35. ΞΠίϯϦιʔε
    PNG?
    JPEG?
    PDF?
    

    View Slide

36. ΞΠίϯϦιʔε
    ϕΫλʔΛ࢖͍͍ͨʂ
    PDF͸ίϯύΠϧ࣌ʹͦΕͧΕͷαΠζ
    ͷը૾ʹల։͞ΕΔ…
    

    View Slide

37. Icon Fonts
    • ϕΫλʔͳͷͰαΠζมߋͰ࠶࡞੒͢Δඞཁ͕ͳ͍
    • ୺຤αΠζ͝ͱ(1x, 2x, 3x)ͷ༻ҙ͕͍Βͳ͍
    • UILabel, UIButton౳ͱͷ૬ੑ͕͍͍
    • ༰ྔ͕খ͍͞
    

    View Slide

38. SVG͕͑͑ͳ
    ͔͠͠…
    

    View Slide

39. Font Custom
    https://github.com/FontCustom/fontcustom
    Icon fonts from the command line.
    
    Generate cross-browser icon fonts and supporting files
    (@font-face CSS, etc.) from a collection of SVGs
    

    View Slide

40. Font Custom
    https://github.com/FontCustom/fontcustom
    SVGϑΝΠϧ܈͔ΒTTF(ϑΥϯτ)ϑΝΠϧʹ
    Ϛοϐϯά͢Δπʔϧ
    

    View Slide

41. fontcustom compile
    Font Custom
    https://github.com/FontCustom/fontcustom
    

    View Slide

42. ShellScript
    Font Custom
    https://github.com/FontCustom/fontcustom
    

    View Slide

43. SVGΞΠίϯϦιʔε
    iOSͰखܰʹѻ͑ΔϕΫλʔͰ͋ΔΞΠίϯϑΥϯτΛ࢖
    ͍ͭͭɺiOS, Android޲͚ʹผʑͰϦιʔε؅ཧ͢Δඞཁ
    ͕ͳ͘ͳͬͨ
    

    View Slide

44. Contents
    • SVGΞΠίϯϦιʔε
    • XcodeGen
    • Danger
    • VueFlux ΞʔΩςΫνϟ
    • Ϧετ؅ཧ
    

    View Slide

45. XcodeGen
    https://github.com/yonaskolb/XcodeGen
    XcodeGen is a command line tool that generates your
    Xcode project using your folder structure and a simple
    project spec
    

    View Slide

46. XcodeGen
    https://github.com/yonaskolb/XcodeGen
    ཁ͸YAMLϑΝΠϧʹهड़ͨ͠ઃఆ͔Β
    xcodeprojΛੜ੒͢Δ
    xcodeproj(pbxproj)ΛgitignoreͰ͖Δ
    

    View Slide

47. name: App
    configs:
    Debug: debug
    Release: release
    targets:
    App:
    type: application
    platform: iOS
    sources:
    - AppSources
    settings:
    base:
    IPHONEOS_DEPLOYMENT_TARGET: $(inherited)
    ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES: $(inherited)
    TARGETED_DEVICE_FAMILY: $(inherited)
    dependencies:
    - target: Shared
    configFiles:
    Debug: configs/app.debug.xcconfig
    Release: configs/app.release.xcconfig
    prebuildScripts:
    - script: $PODS_ROOT/SwiftLint/swiftlint
    name: SwiftLint
    Shared:
    type: framework
    platform: iOS
    sources: SharedSources
    settings:
    base:
    IPHONEOS_DEPLOYMENT_TARGET: $(inherited)
    ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES: $(inherited)
    configFiles:
    Debug: configs/shared.debug.xcconfig
    Release: configs/shared.release.xcconfig
    project.yml
    

    View Slide

48. • Xcodeͷઃఆʹ(ଟগ)Մಡੑ͕ʂ
    • pbxprojͷίϯϑϦΫτΛࠜຊతʹͳͤ͘Δ
    • ϨϏϡʔ࣌ͷࠩ෼͕ݮΔ
    • ϓϩδΣΫτؒͰ࢖͍ճ͠Ͱ͖Δ
    Pros
    

    View Slide

49. • Derived Data(Ωϟογϡ)ෆ੔߹ͰϏϧυΤϥʔ
    • Checkoutͷ౓ $xcodegen গ͠ਏ͍
    • ຖճ $pod install ׂΓͱ͔͔࣌ؒΔ… (Carthage೿ͳΒ)
    Cons
    

    View Slide

50. • Derived Data(Ωϟογϡ)ෆ੔߹ͰϏϧυΤϥʔ
    • Checkoutͷ౓ $xcodegen গ͠ਏ͍
    • ຖճ $pod install ׂΓͱ͔͔࣌ؒΔ… (Carthage೿ͳΒ)
    Cons
    

    View Slide

51. XcodeGen
    CocoaPodsͱͷ૬ੑ͔ɺDerived Dataؔ܎ͰΫϦʔϯϏϧυ
    ͕සൃ͠ɺࢼͨ͠౰࣌͏·͘ղܾͮ͠Β͔ͬͨઃఆ΋͋ΓҰ
    ࣌ಋೖݟૹΓʹ…
    XcodeGenࣗମ͸ૉ੖Β͔ͬͨ͠ͷͰɺ։ൃ͕΋͏গ͠؇΍
    ͔ʹͳ͔ͬͯΒ࠶ಋೖ༧ఆ
    

    View Slide

52. Contents
    • SVGΞΠίϯϦιʔε
    • XcodeGen
    • Danger
    • VueFlux ΞʔΩςΫνϟ
    • ϥΠϒϥϦ
    

    View Slide

53. Danger
    https://github.com/danger/danger
    Formalize your Pull Request etiquette.
    Danger runs after your CI, automating your team's conventions
    surrounding code review.
    
    This provides another logical step in your process, through this
    Danger can help lint your rote tasks in daily code review.
    
    You can use Danger to codify your teams norms, leaving humans
    to think about harder problems.
    

    View Slide

54. Danger?
    PullRequestͷϧʔϧΛܗࣜԽͯ͠CI͔ΒGitHubͷMachine
    ΞΧ΢ϯτΛ௨ͯࣗ͡ಈతʹϨϏϡʔͤ͞Δπʔϧ ⚡
    ઃఆϑΝΠϧ(Dangerfile)ʹ͸Ruby, JavaScript, SwiftͳͲ
    ͕࢖͑Δ
    

    View Slide

55. Dangerfile
    swiftlint.config_file = '.swiftlint.yml'
    swiftlint.binary_path = 'Pods/SwiftLint/swiftlint'
    swiftlint.lint_files inline_mode: true
    message("Good Job! @#{github.pr_author}")
    warn("PR is classed as Work in Progress") if github.pr_title.include? "WIP"
    warn("Big PR") if git.lines_of_code > 500
    • SwiftLintͷ࣮ߦ݁ՌΛίϝϯτ
    • ࿑͍ͷݴ༿
    • PRλΠτϧʹWIP͕෇͍͍ͯͨΒίϝϯτͯ͠statusΛwarningʹ͢Δ
    • มߋ͕500ߦҎ্ͩͬͨΒίϝϯτͯ͠statusΛwarningʹ͢Δ
    

    View Slide

56. Danger
    ࢖͍ํ࣍ୈͰ͸ϨϏϡʔλεΫΛܰݮͰ͖ͦ͏
    ͔͠͠ฐࣾͰ͸GitHub Enterprise + IP੍ݶʹΑΓEnterprise
    Ͱͳ͍CI͕࢖͍ʹ͘͘ɺϩʔΧϧJenkinsͷͨΊPullRequest
    ΛϑοΫͰ͖ͳ͔ͬͨͷͰಋೖͳΒͣ…
    APIΛ࢖͑͹Ͱ͖ͳ͘͸ͳͦ͞͏ʁ
    

    View Slide

57. ࠷ޙʹ
    ഑৴ΞϓϦͰ͸৭ʑͱ΍Γ͔ͨͬͨ͜ͱΛࢼͨ݁͠Ռɺࠓޙ
    ͷ։ൃʹ࢖͍͖͍ٕͬͯͨज़Λ࠾༻Ͱ͖ͨɻ
    ಛʹ৽͘͠ߟҊͨ͠VueFluxΞʔΩςΫνϟ͸FRESH! CAST
    ͷ҆શੑͱ։ൃ଎౓ʹҰ໾ങͬͯ͘ΕͨɻΦεεϝ
    

    View Slide

58. Thanks !
    

    View Slide