Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sketch Pluginを作ってみた

Kohei Tabata
January 31, 2017

Sketch Pluginを作ってみた

Kohei Tabata

January 31, 2017
Tweet

More Decks by Kohei Tabata

Other Decks in Programming

Transcript

  1. Sketch PluginΛ
    ࡞ͬͯΈͨ
    2017/01/31
    AKIBA.swift@Ϋϥεϝιου

    View full-size slide

  2. ࣗݾ঺հ
    ɾKohei Tabata(@nerd0geek1)
    ɾSaib Studio LLC
    ɾiOS/MacOS/tvOS Developer
    ɾWAmazingɹɹ ͱ͍͏ελʔτΞοϓͰ
    ɹiOSΞϓϦ։ൃͷ͓ख఻͍
    Said Studio LLC Kohei Tabata
    Next! Remote quick-zip plus

    View full-size slide

  3. Agenda
    ɾSketchͱ͸
    ɾSketch Pluginͱ͸
    ɾͳͥ௅ઓ͔ͨ͠
    ɾ࣮ࡍʹ΍ͬͨ͜ͱ
    ɾ·ͱΊ

    View full-size slide

  4. Sketchͱ͸
    ɾBohemian codingࣾʹΑΔσβΠϯπʔϧ(MacΞϓϦ)
    ɾweb/MobileΞϓϦͷσβΠϯʹಛԽ
    ɾϕΫλʔͷऔΓѻ͍͕ಘҙɺϏοτϚοϓͷऔΓѻ͍͕ۤख
    ɾAdobeͷσβΠϯπʔϧΑΓܰͯ͘ɺ҆Ձ

    View full-size slide

  5. Sketch Pluginͱ͸
    ɾSketchͱ࿈ܞ͢Δ͜ͱ͕Ͱ͖ΔαʔυύʔςΟ੡ͷϓϥάΠϯ
    ɾCocoaScript((Javascript + ObjC) / 2తͳݴޠ) or JavascriptͰهड़Ͱ͖Δ
    ɾσβΠφʔͱiOSΤϯδχΞͷ࿈ܞΛָʹͯ͘͠ΕΔ΋ͷ΋ଟ਺
    ɾSketch Toolboxɹɹɹ ͱ͍͏Plugin؅ཧΞϓϦΛ࢖ͬͯ؅ཧͰ͖Δɻ

    View full-size slide

  6. Sketch Pluginͷྫ
    ɾAEIconizer(iconॻ͖ग़͠ͷ؆қԽ)

    View full-size slide

  7. Sketch Pluginͷྫ
    ɾsketchplugin-swift-color(Sketch্ͷsymbol͔ΒUIColor/NSColorΛॻ͖ग़͠)

    View full-size slide

  8. Sketch Pluginͷྫ
    ɾAuto-Layout(Sketch্ͰAutoLayoutͷڍಈ֬ೝ)

    View full-size slide

  9. Sketch Pluginͷྫ
    ࠓ঺հͨ͠΋ͷ΋ଞʹ΋
    ɾXport(ૉࡐΛͦͷ··xcassetsͱͯ͠exportՄೳʹ͢Δ)
    ɾiosViews(symbolΛϕδΤۂઢͷ૊Έ߹ΘͤͰωΠςΟϒඳըՄೳʹ͢Δ)
    ɾAnimateMate(Sketch্ͷsymbolʹΞχϝʔγϣϯΛద༻)
    ͳͲศརͦ͏ͳϓϥάΠϯ͕ଟ਺ɻ

    View full-size slide

  10. ͳͥ௅ઓ͔ͨ͠
    ɾtry! Swift 2016ͷ1ͭͷηογϣϯΛ຋༁ͨ͠ࡍʹɺSwiftͰϓϥάΠϯ͕։ൃͰ͖Δͱ
    ɹ͍͏࿩͕͋ͬͨ(ެࣜͰ֬ೝͰ͖ͳ͔͕ͬͨɺSketch4(࣍όʔδϣϯ)͔ΒՄೳΒ͍͠)
    ɾݴޠ࢓༷΍ઃܭʹֶ͍ͭͯͿ͜ͱͰiOS։ൃͷߴ଎ԽΛ࣮ݱ͢Δ͜ͱ͸Ͱ͖Δ͕ɺ
    ɹσβΠϯ㲗iOSͷϫʔΫϑϩʔΛվળ͢Δ͜ͱͰɺΑΓେ͖ͳϓϩμΫτ։ൃͷߴ଎ԽΛ
    ɹ࣮ݱͰ͖ͦ͏ͩͬͨͨΊɻ

    View full-size slide

  11. ࣮ࡍʹ΍ͬͨ͜ͱ
    Sketch Color Palette
    (બ୒͞Εͨlayerͷ໊લͱഎܠ৭͔Β.clrϑΝΠϧΛੜ੒͢Δ)

    View full-size slide

  12. ࣮ࡍͷ࣮૷

    View full-size slide

  13. ྑ͔ͬͨ఺
    ɾσβΠφʔͱڠۀ͢ΔࡍͷϫʔΫϑϩʔ͕վળͰ͖ΔΑ͏ʹͳͬͨɻ
    ɾSketchʹର͢Δཧղ͕ਂ·ͬͨɻ
    ɾϫʔΫϑϩʔͷվળʹର͢Δ΍Δؾ

    View full-size slide

  14. ਏ͔ͬͨͱ͜Ζ
    ɾCocoaScript͕७ਮͳJavaScriptͰ΋CocoaScriptͰ΋ͳ͍ͨΊɺsyntax error͕ଟൃ
    ɾ͍͍ײ͡ͷ։ൃ؀ڥ͕ͳ͘ɺσόοά͕ਏ͍ɻɻɻ
    ɾυΩϡϝϯτ͕੔උ͞Ε͓ͯΒͣɺਏ͍ɻɻɻ

    View full-size slide

  15. ·ͱΊ
    ɾSketch Pluginͷ։ൃɺ։ൃ؀ڥ΍υΩϡϝϯτ͕੔උ͞Ε͍ͯͳͯ͘
    ɹ։ൃ͢Δͷʹπϥϛ͕͋Δɻɻɻ
    ɾͨͩɺͦͷπϥϛΛ্ճΔϝϦοτΛڗडͰ͖ΔՄೳੑ΋ൿΊ͍ͯΔ
    ɾ͜Ε͔Β΋Sketch Plugin࡞Γʹ͸௅ઓ͍ͯ͘͠༧ఆɻ
    ɾօ͞Μ΋ੋඇʂ

    View full-size slide

  16. ࠷ޙʹએ఻
    2/21ʹOrigami͞ΜͰfastlaneษڧձ΍Γ·͢ʂ

    View full-size slide

  17. WAmazingͰ͸iOSΤϯδχΞΛืू͍ͯ͠·͢ʂ
    We are hiring!!
    They

    View full-size slide

  18. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ

    View full-size slide

  19. ࢀߟ
    ɾSketch Plugins
    ɹ(https://www.sketchapp.com/extensions/plugins/)
    ɾSketch Plugin Basics
    ɹ(http://developer.sketchapp.com/introduction/)
    ɾtadija/AEIconizer
    ɹ(https://github.com/tadija/AEIconizer)
    ɾnaoty/clr
    ɹ(https://github.com/naoty/clr)
    ɾnerd0geek1/SketchColorPalette
    ɹ(https://github.com/nerd0geek1/SketchColorPalette)

    View full-size slide