Kaizen Platform における UI ライブラリのワークフロー

関西フロントエンドUG 主催の「フロントエンドで考えるWebデザイン/UI勉強会 (http://kfug.connpass.com/event/15244/ )」で発表した内容です。

Transcript

1. Kaizen Platform ʹ͓͚Δ UI ϥΠϒϥϦͷϫʔΫϑϩʔ Yoshihide Jimbo @ Kaizen Platform, Inc. ϑϩϯτΤϯυͰߟ͑ΔWebσβΠϯ/UIษڧձ 2015/06/20
2. @jmblog Frontend engineer Remote worker Yoshihide Jimbo
4. ΞδΣϯμ 1. Kaizen UI ϥΠϒϥϦʹ͍ͭͯ 2. ελΠϧΨΠυͷ࣮૷ 3. ΞΠίϯϑΥϯτͷ؅ཧ 4. CSS ͷίʔσΟϯά 5. σϓϩΠͱόʔδϣχϯά
5. 1. Kaizen UI ϥΠϒϥϦʹ͍ͭͯ
6. Kaizen UI ϥΠϒϥϦͱ͸ • ࣗࣾϓϩμΫτͷڞ௨ UI Λ·ͱΊͨ UI ϑϨʔϜϫʔΫ • Bootstrap ͷΑ͏ʹ CSS ΛಡΈࠐΉ͚ͩͰར༻Ͱ͖ΔΑ͏ʹͳ͍ͬͯΔ
7. Kaizen UI ϥΠϒϥϦʹؚ·ΕΔ΋ͷ ! ελΠϧΨΠυ ΞΠίϯηοτ " # $ % & CSSϑΝΠϧ CSS
8. 2. ελΠϧΨΠυͷ࣮૷ !
9. Kaizen UI ελΠϧΨΠυ http:/ /goo.gl/1NYMcb
10. Hologram ελΠϧΨΠυδΣωϨʔλʔ
11. Hologram • .cssɺ.scssɺ.sassɺ.lessɺ.mdɺ.js ͳͲͷϑΝΠϧʹॻ͔ Εͨίϝϯτ͔ΒࣗಈͰελΠϧΨΠυΛੜ੒ͯ͘͠ΕΔɻ • ϝϯςφϯεͷखؒΛ͔͚ͣʹɺελΠϧΨΠυΛৗʹ࠷৽ ঢ়ଶʹอͭ͜ͱ͕Ͱ͖Δɻ & Sass & CSS & less & JS & HTML & HTML & HTML & HTML
12. .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 `<a>`, `<button>` or `<input>` 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
13. .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 `<a>`, `<button>` or `<input>` 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
15. .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 `<a>`, `<button>` or `<input>` 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
16. YAML
17. .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 `<a>`, `<button>` or `<input>` 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
18. Markdown
19. .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 `<a>`, `<button>` or `<input>` 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
20. Preview &
 Markup Example
21. ৄ͘͠͸ CodeGrid ͷهࣄͰʢ༗ྉͰ͕͢ʣ https:/ /app.codegrid.net/entry/hologram-1
22. 3. ΞΠίϯϑΥϯτͷ؅ཧ " # $ %
23. '()*+,-./0123 456789:;<=>+? @AB"CDEFGHIJK $LMNOP%QRSTU# V!&WXYZ[\ Kaizen Icons <i class="kzicon kzicon-arrow-down">
24. ΞΠίϯϑΝΠϧͷࣗಈੜ੒ Font files & SVG & WOFF SVG & Sass Sass Template & Sass Sass + + & TTF & EOT gulp-iconfont + gulp-consolidate Ͱ SVG ϑΝΠϧ͔Βࣗಈੜ੒
25. 4. CSS ͷίʔσΟϯάϑϩʔ & CSS
26. ϓϦϓϩηε ͱ ϙετϓϩηε
27. ϓϦϓϩηε ͱ ϙετϓϩηε CSS & SCSS & CSS SCSS-lint libsass SCSS PREPROCESS
28. ϓϦϓϩηε ͱ ϙετϓϩηε CSS & SCSS & CSS & CSS SCSS-lint libsass Autoprefixer CSScomb clean-css Better CSS SCSS PREPROCESS POSTPROCESS
29. ϓϦϓϩηε ͱ ϙετϓϩηε CSS & SCSS & CSS & CSS - SCSS-lint libsass Autoprefixer CSScomb clean-css StyleStats Better CSS Report SCSS PREPROCESS POSTPROCESS ANALYZE
30. StyleStats CSS Λ෼ੳɾධՁͯ͘͠ΕΔπʔϧ
31. StyleStats ղੳ݁ՌΛελΠϧΨΠυʹදࣔ
32. 5. σϓϩΠͱόʔδϣχϯά I
33. σϓϩΠϑϩʔ
34. Deployment Workflow Slack Local GitHub CircleCI Amazon S3 1. GitHub ʹ git push ʢख࡞ۀ͸͚ͩ͜͜ʣ 2. ϓογϡ͞Εͨ͜ͱΛ CircleCI ͕ݕ஌ͯ͠ϏϧυΛ࣮ߦ 3. Ϗϧυ͕੒ޭͨ͠ΒɺS3 ʹσϓϩΠ 4. Slack ʹϏϧυ݁ՌΛ௨஌
35. Deployment Workflow GitHub ΁ϓογϡ͢Δͱ Webhook ܦ༝Ͱ CircleCI ͕ݕ஌
36. Deployment Workflow CircleCI ͰϏϧυॲཧ͕࣮ߦ
37. Deployment Workflow Ϗϧυ͕੒ޭ͢ΔͱɺσϓϩΠઌͷURLͱ StyleStats ͷ݁ՌΛSlack ʹ௨஌
38. όʔδϣχϯά
39. όʔδϣχϯά kaizen-ui ͸༷ʑͳαΠτͰ࢖͏૝ఆͳͷͰɺΤϯυϙΠϯτʢࢀরઌʣ͕ ͻͱͭͩͱɺมߋͨ͠ࡍͷӨڹൣғ͕ඇৗʹେ͖͘ͳͬͯ͠·͍ɺؾܰʹ։ ൃͰ͖ͳ͘ͳͬͯ͠·͏ɻ Corporate Site Web App Blog & CSS
40. όʔδϣχϯά 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
41. όʔδϣχϯά https://cdn.kaizenplatform.net/releases/v0.1.1/styles/kaizen.css ͞Βʹɺgit ͷλάͰ΋σϓϩΠઌ͕มΘΔΑ͏ʹͳ͍ͬͯΔͨΊɺ
 GitHub ͷϦϦʔεػೳΛ࢖ͬͯɺόʔδϣϯ͝ͱͷΤϯυϙΠϯτΛ
 ੜ੒͍ͯ͠Δɻ
42. όʔδϣχϯά αΠτ͝ͱʹࢀর͢ΔόʔδϣϯΛ෼͚Δ͜ͱͰɺkaizen-ui Λߋ৽ͨ͠ࡍ ͷӨڹൣғΛ࠷খݶʹ͢Δ͜ͱ͕Ͱ͖Δɻ Corporate Site Web App Blog & CSS & CSS & CSS v0.0.8 v0.1.2 (latest) v0.0.5
43. ࠷ޙʹ
44. Kaizen Platform Ͱ͸৽͍͠஥ؒΛืू͍ͯ͠·͢ ৄ͘͠͸ https:/ /kaizenplatform.com/ja/aboutus.html ·ͨ͸ Wantedly ·Ͱ • ϑϩϯτΤϯυΤϯδχΞ • ΞϓϦέʔγϣϯΤϯδχΞ • σʔλ΢ΣΞϋ΢εΤϯδχΞ • σʔλΞφϦετ • Webίϯαϧλϯτ • ϓϩμΫτϚωʔδϟʔ • ηʔϧε • etc.
45. άϩʔεϋοΧʔͱͯ͠ࢀՃͯ͠Έ·ͤΜ͔ʁ • اۀ͔ΒͷΦϑΝʔʹରͯ͠σβΠϯҊΛఏҊ • ΦϦδφϧΑΓ΋ޮՌ͕ߴ͚Ε͹ใुΛ֫ಘʂ • ࢀՃྉ͓Αͼར༻ྉ͸Ұ੾͔͔Γ·ͤΜʂ ৄ͘͠͸ https:/ /kaizenplatform.com/ja/about_growth_hacker.html
46. Thanks!