Tweet
Tweet

Slide 1

Slide 1 text

Kaizen Platform ʹ͓͚Δ UI ϥΠϒϥϦͷϫʔΫϑϩʔ Yoshihide Jimbo @ Kaizen Platform, Inc. ϑϩϯτΤϯυͰߟ͑ΔWebσβΠϯ/UIษڧձ 2015/06/20

Slide 2

Slide 2 text

@jmblog Frontend engineer Remote worker Yoshihide Jimbo

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

ΞδΣϯμ 1. Kaizen UI ϥΠϒϥϦʹ͍ͭͯ 2. ελΠϧΨΠυͷ࣮૷ 3. ΞΠίϯϑΥϯτͷ؅ཧ 4. CSS ͷίʔσΟϯά 5. σϓϩΠͱόʔδϣχϯά

Slide 5

Slide 5 text

1. Kaizen UI ϥΠϒϥϦʹ͍ͭͯ

Slide 6

Slide 6 text

Kaizen UI ϥΠϒϥϦͱ͸ • ࣗࣾϓϩμΫτͷڞ௨ UI Λ·ͱΊͨ UI ϑϨʔϜϫʔΫ • Bootstrap ͷΑ͏ʹ CSS ΛಡΈࠐΉ͚ͩͰར༻Ͱ͖ΔΑ͏ʹͳ͍ͬͯΔ

Slide 7

Slide 7 text

Kaizen UI ϥΠϒϥϦʹؚ·ΕΔ΋ͷ ! ελΠϧΨΠυ ΞΠίϯηοτ " # $ % & CSSϑΝΠϧ CSS

Slide 8

Slide 8 text

2. ελΠϧΨΠυͷ࣮૷ !

Slide 9

Slide 9 text

Kaizen UI ελΠϧΨΠυ http:/ /goo.gl/1NYMcb

Slide 10

Slide 10 text

Hologram ελΠϧΨΠυδΣωϨʔλʔ

Slide 11

Slide 11 text

Hologram • .cssɺ.scssɺ.sassɺ.lessɺ.mdɺ.js ͳͲͷϑΝΠϧʹॻ͔ Εͨίϝϯτ͔ΒࣗಈͰελΠϧΨΠυΛੜ੒ͯ͘͠ΕΔɻ • ϝϯςφϯεͷखؒΛ͔͚ͣʹɺελΠϧΨΠυΛৗʹ࠷৽ ঢ়ଶʹอͭ͜ͱ͕Ͱ͖Δɻ & Sass & CSS & less & JS & HTML & HTML & HTML & HTML

Slide 12

Slide 12 text

.c-btn { position: relative; display: inline-block; ... } /*doc --- title: Standard buttons name: 01-standard-buttons category: 06.Buttons-01.Buttons --- To create a standard button, add the `.c-btn` class to any ``, `` or `` element. ```slim_example p a.c-btn href="#" Link button button.c-btn Button input.c-btn type="button" value="Input" input.c-btn type="submit" value="Submit" ``` */ _buttons.scss

Slide 13

Slide 13 text

.c-btn { position: relative; display: inline-block; ... } /*doc --- title: Standard buttons name: 01-standard-buttons category: 06.Buttons-01.Buttons --- To create a standard button, add the `.c-btn` class to any ``, `` or `` element. ```slim_example p a.c-btn href="#" Link button button.c-btn Button input.c-btn type="button" value="Input" input.c-btn type="submit" value="Submit" ``` */ _buttons.scss

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

.c-btn { position: relative; display: inline-block; ... } /*doc --- title: Standard buttons name: 01-standard-buttons category: 06.Buttons-01.Buttons --- To create a standard button, add the `.c-btn` class to any ``, `` or `` element. ```slim_example p a.c-btn href="#" Link button button.c-btn Button input.c-btn type="button" value="Input" input.c-btn type="submit" value="Submit" ``` */ _buttons.scss YAML

Slide 16

Slide 16 text

YAML

Slide 17

Slide 17 text

.c-btn { position: relative; display: inline-block; ... } /*doc --- title: Standard buttons name: 01-standard-buttons category: 06.Buttons-01.Buttons --- To create a standard button, add the `.c-btn` class to any ``, `` or `` element. ```slim_example p a.c-btn href="#" Link button button.c-btn Button input.c-btn type="button" value="Input" input.c-btn type="submit" value="Submit" ``` */ _buttons.scss Markdown

Slide 18

Slide 18 text

Markdown

Slide 19

Slide 19 text

.c-btn { position: relative; display: inline-block; ... } /*doc --- title: Standard buttons name: 01-standard-buttons category: 06.Buttons-01.Buttons --- To create a standard button, add the `.c-btn` class to any ``, `` or `` element. ```slim_example p a.c-btn href="#" Link button button.c-btn Button input.c-btn type="button" value="Input" input.c-btn type="submit" value="Submit" ``` */ _buttons.scss Preview & 
 Markup Example

Slide 20

Slide 20 text

Preview &
 Markup Example

Slide 21

Slide 21 text

ৄ͘͠͸ CodeGrid ͷهࣄͰʢ༗ྉͰ͕͢ʣ https:/ /app.codegrid.net/entry/hologram-1

Slide 22

Slide 22 text

3. ΞΠίϯϑΥϯτͷ؅ཧ " # $ %

Slide 23

Slide 23 text

'()*+,-./0123 456789:;<=>+? @AB"CDEFGHIJK $LMNOP%QRSTU# V!&WXYZ[\ Kaizen Icons

Slide 24

Slide 24 text

ΞΠίϯϑΝΠϧͷࣗಈੜ੒ Font files & SVG & WOFF SVG & Sass Sass Template & Sass Sass + + & TTF & EOT gulp-iconfont + gulp-consolidate Ͱ SVG ϑΝΠϧ͔Βࣗಈੜ੒

Slide 25

Slide 25 text

4. CSS ͷίʔσΟϯάϑϩʔ & CSS

Slide 26

Slide 26 text

ϓϦϓϩηε ͱ ϙετϓϩηε

Slide 27

Slide 27 text

ϓϦϓϩηε ͱ ϙετϓϩηε CSS & SCSS & CSS SCSS-lint libsass SCSS PREPROCESS

Slide 28

Slide 28 text

ϓϦϓϩηε ͱ ϙετϓϩηε CSS & SCSS & CSS & CSS SCSS-lint libsass Autoprefixer CSScomb clean-css Better CSS SCSS PREPROCESS POSTPROCESS

Slide 29

Slide 29 text

ϓϦϓϩηε ͱ ϙετϓϩηε CSS & SCSS & CSS & CSS - SCSS-lint libsass Autoprefixer CSScomb clean-css StyleStats Better CSS Report SCSS PREPROCESS POSTPROCESS ANALYZE

Slide 30

Slide 30 text

StyleStats CSS Λ෼ੳɾධՁͯ͘͠ΕΔπʔϧ

Slide 31

Slide 31 text

StyleStats ղੳ݁ՌΛελΠϧΨΠυʹදࣔ

Slide 32

Slide 32 text

5. σϓϩΠͱόʔδϣχϯά I

Slide 33

Slide 33 text

σϓϩΠϑϩʔ

Slide 34

Slide 34 text

Deployment Workflow Slack Local GitHub CircleCI Amazon S3 1. GitHub ʹ git push ʢख࡞ۀ͸͚ͩ͜͜ʣ 2. ϓογϡ͞Εͨ͜ͱΛ CircleCI ͕ݕ஌ͯ͠ϏϧυΛ࣮ߦ 3. Ϗϧυ͕੒ޭͨ͠ΒɺS3 ʹσϓϩΠ 4. Slack ʹϏϧυ݁ՌΛ௨஌

Slide 35

Slide 35 text

Deployment Workflow GitHub ΁ϓογϡ͢Δͱ Webhook ܦ༝Ͱ CircleCI ͕ݕ஌

Slide 36

Slide 36 text

Deployment Workflow CircleCI ͰϏϧυॲཧ͕࣮ߦ

Slide 37

Slide 37 text

Deployment Workflow Ϗϧυ͕੒ޭ͢ΔͱɺσϓϩΠઌͷURLͱ StyleStats ͷ݁ՌΛSlack ʹ௨஌

Slide 38

Slide 38 text

όʔδϣχϯά

Slide 39

Slide 39 text

όʔδϣχϯά kaizen-ui ͸༷ʑͳαΠτͰ࢖͏૝ఆͳͷͰɺΤϯυϙΠϯτʢࢀরઌʣ͕ ͻͱͭͩͱɺมߋͨ͠ࡍͷӨڹൣғ͕ඇৗʹେ͖͘ͳͬͯ͠·͍ɺؾܰʹ։ ൃͰ͖ͳ͘ͳͬͯ͠·͏ɻ Corporate Site Web App Blog & CSS

Slide 40

Slide 40 text

όʔδϣχϯά https://cdn.kaizenplatform.net/heads/master/styles/kaizen.css https://cdn.kaizenplatform.net/heads/add-new-icons/styles/kaizen.css https://cdn.kaizenplatform.net/heads/update-buttons/styles/kaizen.css ͦ͜Ͱɺϒϥϯν͝ͱʹσϓϩΠઌͷURL͕มΘΔΑ͏ʹ͍ͯ͠Δɻ
 ͜ΕͰ։ൃத΋ؾܰʹ git push (=σϓϩΠʣ͕Ͱ͖Δɻ & CSS & CSS & CSS master add-new-icons update-buttons

Slide 41

Slide 41 text

όʔδϣχϯά https://cdn.kaizenplatform.net/releases/v0.1.1/styles/kaizen.css ͞Βʹɺgit ͷλάͰ΋σϓϩΠઌ͕มΘΔΑ͏ʹͳ͍ͬͯΔͨΊɺ
 GitHub ͷϦϦʔεػೳΛ࢖ͬͯɺόʔδϣϯ͝ͱͷΤϯυϙΠϯτΛ
 ੜ੒͍ͯ͠Δɻ

Slide 42

Slide 42 text

όʔδϣχϯά αΠτ͝ͱʹࢀর͢ΔόʔδϣϯΛ෼͚Δ͜ͱͰɺkaizen-ui Λߋ৽ͨ͠ࡍ ͷӨڹൣғΛ࠷খݶʹ͢Δ͜ͱ͕Ͱ͖Δɻ Corporate Site Web App Blog & CSS & CSS & CSS v0.0.8 v0.1.2 (latest) v0.0.5

Slide 43

Slide 43 text

࠷ޙʹ

Slide 44

Slide 44 text

Kaizen Platform Ͱ͸৽͍͠஥ؒΛืू͍ͯ͠·͢ ৄ͘͠͸ https:/ /kaizenplatform.com/ja/aboutus.html ·ͨ͸ Wantedly ·Ͱ • ϑϩϯτΤϯυΤϯδχΞ • ΞϓϦέʔγϣϯΤϯδχΞ • σʔλ΢ΣΞϋ΢εΤϯδχΞ • σʔλΞφϦετ • Webίϯαϧλϯτ • ϓϩμΫτϚωʔδϟʔ • ηʔϧε • etc.

Slide 45

Slide 45 text

άϩʔεϋοΧʔͱͯ͠ࢀՃͯ͠Έ·ͤΜ͔ʁ • اۀ͔ΒͷΦϑΝʔʹରͯ͠σβΠϯҊΛఏҊ • ΦϦδφϧΑΓ΋ޮՌ͕ߴ͚Ε͹ใुΛ֫ಘʂ • ࢀՃྉ͓Αͼར༻ྉ͸Ұ੾͔͔Γ·ͤΜʂ ৄ͘͠͸ https:/ /kaizenplatform.com/ja/about_growth_hacker.html

Slide 46

Slide 46 text

Thanks!