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

dxel1

2df5079e89d2e51aeb9203b3410ea61b?s=47 Ryo.Nitami
July 10, 2018
2.4k

 dxel1

2df5079e89d2e51aeb9203b3410ea61b?s=128

Ryo.Nitami

July 10, 2018
Tweet

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