dxel1

Transcript

1. Android, iOS ྆ํΛߟྀͨ͠ΞϓϦσ βΠϯ؅ཧ 2018/07/10 DXEL.1 DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 1

2. Who? — Ryo Nitami (@bird_tummy) — Android & iOS Application

   Engineer — iOSDC 2018 Core staff — ❤ SHISHAMO DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 2

3. My History — ֶੜ࣌୅ʹΞϧόΠτͷσβΠφʔͱͯ͠όφʔྔ࢈ͯͨ͠ — όφʔΉ͔ͣ͗͢͠ΘΖͨ — ϕδΣۂઢ͋͹͹͹ — σβΠϯ͓΋͠Ζ͍͚Ͳࣗ෼ͰΞϓϦ࡞ΕΔͱ΋ͬͱྑ͞

   ͦ͏ͩͳʔ — ΤϯδχΞ΁ DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 3

4. Target — ΤϯδχΞ -> σβΠφʔ — Web σβΠϯ΍ͬͨ͜ͱ͋Δ͚ͲΞϓϦΘ͔ΒΜͬͯํ DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ

   4

5. Agenda — ΞʔτϘʔυͷ؅ཧ — ը૾ͷ؅ཧ DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 5

6. Very useful tools — Sketch — Adobe Ps / Ai

   — Zeplin — (Abstract) DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 6

7. Big artboard is tsurai... — ݩ͸ 1 ΞʔτϘʔυ 1 ػೳʹ͍ͯͨ͠

   — ػೳʹΑͬͯ͸ 10 ຕҎ্ը໘͕͋ΔͷͰಡΈࠐΈ࣌ؒ൒୺ͳ͍ ʴॏ͍ — ϒϥ΢βͰ։͘ͱ࣮֬ʹϑϦʔζ — ίϝϯτ΋ͣΕΔ — ΞʔτϘʔυ಺ͷཁૉΛͣΒͯ͠΋͍͖ͭͯͯ͘Εͳ͍ ͳΜͱ͔͍ͨ͠ɻɻ(´ɾТɾʆ) DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 7

8. Components released! ! 1 — ΞʔτϘʔυ 㱻 ίϯϙʔωϯτ ͷඥ͚͕ͮͰ͖Δ —

   ίϯϙʔωϯτΛબͿͱͲͷΞʔ τϘʔυͰ࢖ΘΕͯΔ͔͕ҰཡͰ ग़ͯ͘Δ — 7ʙ80 ݸ͘Β͍ొ࿥͢Δͱ͓ۚ ෷ͬͯͬͯݴΘΕΔʢະݕূʣ 1 https://blog.zeplin.io/introducing-zeplin-2-0- components-and-a-ton-more-goodies-7c09dacc1f48 DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 8

9. Using components function on Artboard — ϓϩδΣΫτ͸ 1 ϓϥοτϑΥʔϜʹ͖ͭ 1

   ݸ — ΞʔτϘʔυ͸ 1 ը໘ʹ͖ͭ 1 ຕ — ͦͷը໘ʹؔ࿈͢Δ΋ͷʢϘλϯͷ׆ੑʗඇ׆ੑঢ়ଶͷը ૾ͳͲʣ͸ؚΊΔ — Android / iOS ʹڞ௨͢Δίϯϙʔωϯτ͸ Components ܦ ༝Ͱ — ϑΥϯτ΍ςΩεταΠζͳͲͷҧ͍͸ Text Styles Ͱٵऩ DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 9

10. DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 10

11. DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 11

12. png or svg? — Sketch ͰεϥΠεͨ͠ͱ͜Ζ͸ Zeplin Ͱը૾ͱͯ͠ॻ͖ ग़͢͜ͱ͕Մೳ —

    Android Ͱ΋ iOS Ͱ΋ SVG දࣔ͸ՄೳͳͷͰɺ΍Γ΍͢ ͍ํΛબͿ — iOS ͸ͪΐͬͱ໘౗ DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 12

13. ը૾΋దࡐదॴ — Google ͞Μ΋ Vector ࢖͏͔Ͳ͏͔͸ͪΌΜͱߟ͑ͯͬͯݴͬ ͯΔ 2 — Android

    ͷ৔߹ɺ200x200 Ҏ্ͷը૾͸ॳճಡΈࠐΈ͕஗͍ 3 — Zeplin Ͱ PNG ΍ JPG ΋ΤΫεϙʔτͰ͖ΔͷͰదࡐదॴɺ ͳ͍͠΍Γ΍͢͞Ͱબͼ·͠ΐ͏ 3 http://nyanyoni.hateblo.jp/entry/2017/01/29/021438 2 https://medium.com/upday-devs/optimizing-the-performance-of-vector- drawables-680a4c456286 DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 13

14. ·ͱΊ — Zeplin ͱ Sketchʢ΋͘͠͸ Adobe ੡඼ʣ͸͍͍૊Έ߹Θ ͤ — Ұఆͷ࢓૊ΈΛߏஙͯ͠͠·͑͹͋ͱ͸ԶͷλʔϯʹͳΔ͸

    ͣ — ΤϯδχΞ ❤ σβΠφʔʹͳΔखॿ͚ʹͳΕ͹޾͍Ͱ͢ DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 14