React Nativeのレイアウトエンジン YogaでFlexible box layoutレイアウトを作る / yoga-with-sketch

[訂正] Flexbox => Flexible box layout

[Yoga Layout | Playground](https://yogalayout.com/playground/)

最高に役に立たないJSONからSketchファイルを作るリポジトリです。
[mottox2/json-sketchapp: Sketch Plugin: Convert JSON file to Sketch file](https://github.com/mottox2/json-sketchapp)

Transcript

1. React NativeͷϨΠΞ΢τΤϯδϯ
   YogaͰFlexboxϨΠΞ΢τΛ࡞Δ
   2018.06.26 Roppongi.js #4 - @mottox2
   

   View Slide

2. @mottox2
   • React, Ruby on RailsΛத৺ʹWebαʔϏε։ൃ͍ͯ͠·͢
   • ReactNative΋৭ʑݴΘΕ͍ͯΔ͚Ͳ޷͖Ͱ͢
   • UI EngineeringʹڵຯΞϦ
   • ϒϩά΍ͬͯ·͢(esa.io + note.mu + GatsbyJS) => mottox2.com
   Freelance web engineer
   Yuki Takemoto
   

   View Slide

3. ࠓ೔ͷ࿩
   • Yogaͷ࿩
   • YogaͷNodeͱLayoutʹ͍ͭͯ
   • ࣮ફ: JSON to Sketch.app
   

   View Slide

4. Yoga ͱ͸ʁ
   Yoga is a cross platform layout engine implementing Flexbox
   • https://yogalayout.com/͋
   • Facebook੡
   • FlexboxϥΠΫͳAPIΛ࣋ͬͨϨΠΞ΢τΤϯδϯ
   • React NativeɺComponent Kit (iOS)ɺLitho (Android)ͳͲͷϥΠϒϥϦͷ಺෦Ͱ࢖
   ΘΕ͍ͯΔɻa͋
   • ୯ମͰ΋࢖͏͜ͱ͕Ͱ͖Δɻࠓճ͸JS୯ମͰѻ͍͖ͬͯ·͢ɻ
   Yoga͸Flexbox࣮૷ͷΫϩεϓϥοτϑΥʔϜϨΠΞ΢τΤϯδϯ
   

   View Slide

5. Yoga Playground
   Playground - https://yogalayout.com/playground
   

   View Slide

6. Usage
   Docs Standalone example - https://yogalayout.com/getting-started/standalone
   

   View Slide

7. Yogaͷ֓೦ ~Node~
   • ෯΍ߴ͞ɺFlexboxͷଐੑΛ࣋ͬͨΦϒδΣΫτ
   • `insertChild(childNode)`Ͱ਌ࢠؔ܎Λ࣋ͯΔɻ`getChild(index)` ͰࢠΛऔಘग़དྷ
   Δɻ
   • ਌Nodeʹରͯ͠ `calculateLayout()` Λ࣮ߦ͢ΔͱࢠϊʔυΛؚΊͨϨΠΞ΢τΛܭ
   ࢉͯ͘͠ΕΔɻ
   

   View Slide

8. Yogaͷ֓೦ ~Layout~
   • left, right, top, bottom, width, heightΛ࣋ͭΦϒδΣΫτ
   • Node.getComputedLayout΍Node.getComputedXXX(ex. Left, Width)ؔ਺Ͱऔಘ
   Ͱ͖Δɻ
   • calculateLayoutΛ࣮ߦ͢Δ·ͰLayout͸औಘͰ͖ͳ͍ɻ(JSͷ৔߹NaN͕ฦΔ)
   

   View Slide

9. ࣮ફ: JSON to Sketch.app
   

   View Slide

10. YogaͰܭࢉͨ͠ϨΠΞ΢τΛݩʹSketchϑΝΠϧΛ࡞ͬͯΈΔɻ

    JSX to Sketchͷ࣮૷ͱͯ͠͸طʹReact Sketch.app͕͋ΔͷͰɺࠓճ͸JSON to
    Sketchͷ࣮૷ΛਐΊ͍ͯ͘ɻͭ·Γ׬શྼԽ൛ͷ࠶ൃ໌Ͱ͢ɻ
    ࣮ફ: JSON to Sketch.app
    JSON file
    Yoga Node Tree
    Sketch file
    1
    2
    3
    

    View Slide

11. airbnb/React Sketch.app
    ࢀߟ
    • JSX͔ΒSketchϑΝΠϧΛੜ੒Ͱ͖ΔϥΠϒϥϦɻ಺෦ͰYogaΛ࢖͍ͬͯΔɻ
    • http://airbnb.io/react-sketchapp/
    

    View Slide

12. STEP1: JSONܗࣜΛఆٛ

    STEP2: JSON͔ΒNode TreeΛ࡞ΔॲཧΛॻ͘
    STEP3: Node TreeͱJSONΛ΋ͱʹSketchϑΝΠϧΛ࡞ΔॲཧΛॻ͘
    ࣮ફ: JSON to Sketch.app
    

    View Slide

13. ·ͣ͸ɺ࣍ͷΑ͏ͳJSONΛSketchϑΝΠϧʹஔ͖׵͑Δ͜ͱΛߟ͍͑ͯ͘ɻ
    දݱྗ͕௿͍ܗࣜͰ͋Δ͜ͱʹ͸໨ΛͭͿ͍ͬͯͩ͘͞
    JSONΛఆٛ
    

    View Slide

14. JSONΛNode Treeʹͯ͠ɺ
    ϨΠΞ΢τܭࢉΛߦ͏ɻ
    Node TreeΛ࡞Δ
    

    View Slide

15. SketchAPIͰ૊Έཱͯ
    SketchAPIΛ࢖ͬͯɺ
    ϨΠϠʔΛ࡞͍ͬͯ͘ɻ
    

    View Slide

16. DEMO https://github.com/mottox2/json-sketchapp
    

    View Slide

17. • ϨΠΞ΢τܭࢉ͕ͳ͍ͷͰɺඇৗʹγϯϓϧʹίʔυ͕͔͚Δɻa
    • SketchAPIͷ࢖༻ײΛ೺Ѳ͢Δͷ͕Ұ൪͔͔࣌ؒͬͨɻ
    • JSXͷදݱྗͷߴ͞Λࢥ͍ͬͨ͠ɻjsonnetͷΑ͏ͳJSON֦ுه๏Λ࢖͏΂͖
    ͩͬͨɻ
    • ࠓճͷίʔυ: https://github.com/mottox2/json-sketchapp
    • ࠓճͷσϞͰ࡞ͬͨJSON to Sketch.app͸࢖͍Έ͕ͪશ͘ͳ͍ɻࠔͬͨɻ
    σϞͷ·ͱΊ
    

    View Slide

18. • JSX΍YAML΍JSONΛಥͬࠐΜͰYogaͰLayoutΛܭࢉ
    • YogaͰܭࢉͨ͠΋ͷΛSketch΍PowerPointʹग़ྗ͢Δ
    • ༻్ʹϋϚΕ͹௒ศརϥΠϒϥϦͱͯ͠࢖͑Δa
    • ͨͩ͠׆͔ͤΔػձ͸͋·Γͳ͍ɻa
    Yoga͸Կʹ࢖͑Δͷ͔ʁ
    

    View Slide

19. • ࣗલͰϨΠΞ΢τܭࢉ͸࣮૷ͨ͘͠ͳ͍ͷͰɺFacebookͷ͍͢͝ਓ͕ͨͪ࡞ͬͨ
    ࢓૊Έʹ৐͔ͬΔͱ͍͍ͱࢥ͏ɻa
    • JSXͷํ͕දݱྗ͕ߴ͍ϑΥʔϚοτͳͷͰɺJSX to XXXΈ͍ͨͳ΋ͷΛ࡞Δ࣌
    ʹYogaΛ࢖͑͹ʢͦΕͳΓʹʣ؆୯ʹͰ͖Δ͔΋͠Εͳ͍ɻa
    • ͱΓ͋͑ͣYoga Playground͞ΘͬͯΈͯཉ͍͠ɻΑ͘ग़དྷͯΔɻ
    • https://yogalayout.com/playground ͋
    • cross-platform UIͱ͍͏จ຺Ͱairbnb/Lona͕ؾʹͳ͍ͬͯΔɻ
    ؾ͖ͮ
    

    View Slide

20. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide