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

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

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

790f55ccde7a62df8f25747586657090?s=128

Yoshihide Jimbo

June 20, 2015
Tweet

Transcript

  1. Kaizen Platform ʹ͓͚Δ UI ϥΠϒϥϦͷϫʔΫϑϩʔ Yoshihide Jimbo @ Kaizen Platform,

    Inc. ϑϩϯτΤϯυͰߟ͑ΔWebσβΠϯ/UIษڧձ 2015/06/20
  2. @jmblog Frontend engineer Remote worker Yoshihide Jimbo

  3. None
  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
  14. None
  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!