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

Who? — Ryo Nitami (@bird_tummy) — Android & iOS Application Engineer — iOSDC 2018 Core staff — ❤ SHISHAMO DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 2

My History — ֶੜ࣌୅ʹΞϧόΠτͷσβΠφʔͱͯ͠όφʔྔ࢈ͯͨ͠ — όφʔΉ͔ͣ͗͢͠ΘΖͨ — ϕδΣۂઢ͋͹͹͹ — σβΠϯ͓΋͠Ζ͍͚Ͳࣗ෼ͰΞϓϦ࡞ΕΔͱ΋ͬͱྑ͞ ͦ͏ͩͳʔ — ΤϯδχΞ΁ DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 3

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

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

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

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

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

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

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

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

png or svg? — Sketch ͰεϥΠεͨ͠ͱ͜Ζ͸ Zeplin Ͱը૾ͱͯ͠ॻ͖ ग़͢͜ͱ͕Մೳ — Android Ͱ΋ iOS Ͱ΋ SVG දࣔ͸ՄೳͳͷͰɺ΍Γ΍͢ ͍ํΛબͿ — iOS ͸ͪΐͬͱ໘౗ DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 12

ը૾΋దࡐదॴ — 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

·ͱΊ — Zeplin ͱ Sketchʢ΋͘͠͸ Adobe ੡඼ʣ͸͍͍૊Έ߹Θ ͤ — Ұఆͷ࢓૊ΈΛߏஙͯ͠͠·͑͹͋ͱ͸ԶͷλʔϯʹͳΔ͸ ͣ — ΤϯδχΞ ❤ σβΠφʔʹͳΔखॿ͚ʹͳΕ͹޾͍Ͱ͢ DXEL.1 ΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹ 14