$30 off During Our Annual Pro Sale. View Details »

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

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

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

Yoshihide Jimbo

June 20, 2015
Tweet

More Decks by Yoshihide Jimbo

Other Decks in Programming

Transcript

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

    View Slide

  2. @jmblog
    Frontend engineer
    Remote worker
    Yoshihide Jimbo

    View Slide

  3. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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 ``,
    `` 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

    View Slide

  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 ``,
    `` 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

    View Slide

  14. View Slide

  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 ``,
    `` 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

    View Slide

  16. YAML

    View Slide

  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 ``,
    `` 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

    View Slide

  18. Markdown

    View Slide

  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 ``,
    `` 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

    View Slide

  20. Preview &

    Markup Example

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  33. σϓϩΠϑϩʔ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  38. όʔδϣχϯά

    View Slide

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

    View Slide

  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

    View Slide

  41. όʔδϣχϯά
    https://cdn.kaizenplatform.net/releases/v0.1.1/styles/kaizen.css
    ͞Βʹɺgit ͷλάͰ΋σϓϩΠઌ͕มΘΔΑ͏ʹͳ͍ͬͯΔͨΊɺ

    GitHub ͷϦϦʔεػೳΛ࢖ͬͯɺόʔδϣϯ͝ͱͷΤϯυϙΠϯτΛ

    ੜ੒͍ͯ͠Δɻ

    View Slide

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

    View Slide

  43. ࠷ޙʹ

    View Slide

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

    View Slide

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

    View Slide

  46. Thanks!

    View Slide