Sketch Pluginを作ってみた

Transcript

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

2. ࣗݾ঺հ ɾKohei Tabata(@nerd0geek1) ɾSaib Studio LLC ɾiOS/MacOS/tvOS Developer ɾWAmazingɹɹ ͱ͍͏ελʔτΞοϓͰ

   ɹiOSΞϓϦ։ൃͷ͓ख఻͍ Said Studio LLC Kohei Tabata Next! Remote quick-zip plus

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

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

5. Sketch Pluginͱ͸ ɾSketchͱ࿈ܞ͢Δ͜ͱ͕Ͱ͖ΔαʔυύʔςΟ੡ͷϓϥάΠϯ ɾCocoaScript((Javascript + ObjC) / 2తͳݴޠ) or JavascriptͰهड़Ͱ͖Δ

   ɾσβΠφʔͱiOSΤϯδχΞͷ࿈ܞΛָʹͯ͘͠ΕΔ΋ͷ΋ଟ਺ ɾSketch Toolboxɹɹɹ ͱ͍͏Plugin؅ཧΞϓϦΛ࢖ͬͯ؅ཧͰ͖Δɻ

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

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

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

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

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

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

12. ࣮ࡍͷ࣮૷

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

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

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

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

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

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

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)