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

Snow Monkey における私の技術的偏愛

Snow Monkey における私の技術的偏愛

Takashi Kitajima

February 09, 2019
Tweet

More Decks by Takashi Kitajima

Other Decks in Technology

Transcript

  1. View Slide

  2. ϑϦʔϥϯε ϞϯΩʔϨϯν௕࡚

    4OPX.POLFZͷ։ൃൢച
    .881'PSNΞυΦϯͷൢച
    ΩλδϚλΧγ
    !JOD

    View Slide

  3. View Slide

  4. View Slide

  5. ৴भ8PSE1SFTT.FFUVQJOদຊ
    ϞϯΩʔϨϯν

    ΩλδϚλΧγ!JOD
    4OPX.POLFZʹ͓͚Δ

    ࢲͷٕज़తภѪ

    View Slide

  6. w ϨΠΞ΢τϏϡʔίϯτϩʔϥʔ
    w ςϯϓϨʔτಡΈࠐΈػೳͷ֦ு
    w ΧελϚΠβʔϑϨʔϜϫʔΫ
    w ςʔϚΞοϓσʔτ"1*
    ΞδΣϯμ

    View Slide

  7. ϨΠΞ΢τϏϡʔίϯτϩʔϥʔ

    View Slide

  8. IUUQTHJUIVCDPN8PSE1SFTTUXFOUZTFWFOUFFOCMPCNBTUFSTJOHMFQIQ

    View Slide

  9. IUUQTHJUIVCDPN8PSE1SFTTUXFOUZTFWFOUFFOCMPCNBTUFSQBHFQIQ

    View Slide

  10. IUUQTHJUIVCDPN8PSE1SFTTUXFOUZTFWFOUFFOCMPCNBTUFSTJOHMFQIQ

    View Slide

  11. IUUQTHJUIVCDPN8PSE1SFTTUXFOUZTFWFOUFFOCMPCNBTUFSQBHFQIQ

    View Slide

  12. IUUQTHJUIVCDPN8PSE1SFTTUXFOUZTFWFOUFFOCMPCNBTUFSQBHFQIQ

    View Slide


  13. $POUSPMMFSMBZPVU

    ϨΠΞ΢τϑΝΠϧͷࢦఆ ΧϥϜӈαΠυόʔFUD

    $POUSPMMFSSFOEFS

    ϏϡʔϑΝΠϧͷࢦఆ DPOUFOUQPTUDPOUFOUQBHF

    View Slide

  14. ςϯϓϨʔτಡΈࠐΈػೳͷ֦ு

    View Slide

  15. HFU@UFNQMBUF@QBSU TMVH OBNF

    View Slide

  16. VTF'SBNFXPSLa)FMQFS
    )FMQFSHFU@UFNQMBUF@QBSU TMVH OBNF WBST

    View Slide

  17. VTF'SBNFXPSLa)FMQFS
    )FMQFSHFU@UFNQMBUF@QBSU TMVH OBNF WBST

    σʔλΛ౉ͤΔ

    View Slide

  18. BEE@pMUFS 

    TOPX@NPOLFZ@HFU@UFNQMBUF@QBSU@BSHT 

    GVODUJPO BSHT
    \


    <

    TMVHTMVH 

    OBNFOBNF 

    WBSTWBST 

    >


    SFUVSOBSHT

    ^



    View Slide

  19. BEE@pMUFS 

    bTOPX@NPOLFZ@HFU@UFNQMBUF@QBSU@TMVH` 

    GVODUJPO OBNF WBST
    \


    EJWDMBTTlGPPz

    ͍͋͏͓͑

    EJW

    QIQ

    ^ 





    View Slide

  20. ΧελϚΠβʔϑϨʔϜϫʔΫ

    View Slide

  21. GVODUJPONZUIFNF@DVTUPNJ[F@SFHJTUFS XQ@DVTUPNJ[F
    \
    XQ@DVTUPNJ[FBEE@TFUUJOH
    IFBEFS@UFYUDPMPS
    <
    bEFGBVMU`b`
    >


    XQ@DVTUPNJ[FBEE@TFDUJPO
    bNZUIFNF@OFX@TFDUJPO@OBNF`
    <
    bUJUMF`@@ b7JTJCMF4FDUJPO/BNF bNZUIFNF`

    >


    XQ@DVTUPNJ[FBEE@DPOUSPM
    OFX81@$VTUPNJ[F@$PMPS@$POUSPM
    XQ@DVTUPNJ[F
    bIFBEFS@UFYUDPMPS`
    <
    bMBCFM`@@ b)FBEFS$PMPS` bNZUIFNF

    bTFDUJPO`bNZUIFNF@OFX@TFDUJPO@OBNF`
    bTFUUJOHT`bIFBEFS@UFYUDPMPS`
    >




    ^
    BEE@BDUJPO bDVTUPNJ[F@SFHJTUFS` bNZUIFNF@DVTUPNJ[F@SFHJTUFS`

    View Slide

  22. VTF*ODa81@$VTUPNJ[FS@'SBNFXPSLa'SBNFXPSL
    DPOUSPM'SBNFXPSLDPOUSPM
    bDPMPS`
    bIFBEFS@UFYUDPMPS`
    <
    bMBCFM`@@ b)FBEFS$PMPS` bNZUIFNF`

    >


    JG JT@DVTUPNJ[F@QSFWJFX

    \
    TFDUJPO'SBNFXPSLTFDUJPO
    bNZUIFNF@OFX@TFDUJPO@OBNF`
    <
    bUJUMF`@@ b7JTJCMF4FDUJPO/BNF` bNZUIFNF`

    >


    DPOUSPMKPJO TFDUJPO

    ^

    View Slide

  23. GVODUJPONZUIFNF@DVTUPNJ[F@DTT
    \
    IFBEFS@DPMPSHFU@UIFNF@NPE bIFBEFS@UFYUDPMPS` b`


    TUZMF
    I\
    DPMPS QIQFDIPIFBEFS@DPMPS
    ^
    TUZMF
    QIQ
    ^
    BEE@BDUJPO bXQ@IFBE` bNZUIFNF@DVTUPNJ[F@DTT`

    View Slide

  24. VTF*ODa81@$VTUPNJ[FS@'SBNFXPSLa4UZMF
    4UZMFSFHJTUFS
    bI`
    bDPMPSbHFU@UIFNF@NPE bIFBEFS@UFYUDPMPS`



    View Slide

  25. MJHIUFO\
    DPMPSMJHIUFO

    ^
    EBSLFO\
    DPMPSEBSLFO

    ^
    SHCB\
    DPMPSSHCB

    ^

    View Slide

  26. VTF*ODa81@$VTUPNJ[FS@'SBNFXPSLa4UZMF
    VTF*ODa81@$VTUPNJ[FS@'SBNFXPSLa$PMPS
    4UZMFSFHJTUFS
    bMJHIUFO`
    bDPMPSb$PMPSMJHIUFO b`



    4UZMFSFHJTUFS
    bEBSLFO`
    bDPMPSb$PMPSEBSLFO b`



    4UZMFSFHJTUFS
    bSHCB`
    bDPMPSb$PMPSSHCB b`



    View Slide

  27. CUO\
    CPSEFSDPMPS
    ^
    QSJNBSZCUO\
    !FYUFOECUO
    ^

    View Slide

  28. VTF*ODa81@$VTUPNJ[FS@'SBNFXPSLa4UZMF
    BEE@BDUJPO
    bJOD@XQ@DVTUPNJ[FS@GSBNFXPSL@BGUFS@MPBE@TUZMFT`
    GVODUJPO
    \
    4UZMFQMBDFIPMEFS
    bCUO`
    GVODUJPO TFMFDUPST
    \
    4UZMFSFHJTUFS TFMFDUPST bCPSEFSDPMPS`

    ^


    ^


    4UZMFFYUFOE bCUO` <bQSJNBSZCUO`>

    View Slide

  29. ςʔϚΞοϓσʔτ"1*

    View Slide

  30. 8PSE1SFTTςʔϚ
    XPSEQSFTTPSH
    ߋ৽͕͋Γ·͢Α
    ߋ৽͠·͢
    Ͱ͸࠷৽൛ͷ[JQΛͲ͏ͧ
    ࠷৽൛ͷ[JQΛ

    Ξοϓϩʔυ

    View Slide

  31. 8PSE1SFTTςʔϚ
    ߋ৽͕͋Γ·͢Α
    ߋ৽͠·͢
    Ͱ͸࠷৽൛ͷ[JQΛͲ͏ͧ
    λά෇ίϛοτ
    ίϛοτ͕͔͋ͬͨΒ

    ςετϏϧυΛཔΉ
    ໰୊ͳ͍͔Β

    [JQΛϦϦʔε
    (JU)VC
    5SBWJT$*

    View Slide

  32. View Slide

  33. View Slide

  34. 8PSE1SFTTςʔϚ
    ߋ৽͕͋Γ·͢Α
    ߋ৽͠·͢
    Ͱ͸࠷৽൛ͷ[JQΛͲ͏ͧ
    λά෇ίϛοτ
    ίϛοτ͕͔͋ͬͨΒ

    ςετϏϧυΛཔΉ
    ໰୊ͳ͍͔Β

    [JQΛϦϦʔε
    (JU)VC
    5SBWJT$*
    ࣗαʔόʔ
    "1*ͷϨεϙϯεͱ

    [JQΛอଘ
    (JU)VCͷ[JQ͸ফ͢

    View Slide

  35. ͓·͚

    View Slide

  36. MJOFIFJHIU

    View Slide

  37. MJOFIFJHIU GPOUTJ[F IBMGMFBEJOH
    IBMGMFBEJOH

    View Slide

  38. View Slide

  39. @function _vertical-rhythm($font-size, $coefficient: 1) {
    $between-lines : _strip-unit(_rem2px($_between-lines));
    $base-line-height: _strip-unit(_rem2px($_base-line-height));
    $base-font-size : _strip-unit(_rem2px($_base-font-size));
    $font-size : _strip-unit($font-size);
    $line-height: $font-size + ($between-lines * $coefficient);
    @if ($line-height < $font-size + ($between-lines * 2)) {
    @return _vertical-rhythm($font-size, ($coefficient + 1));
    } @else {
    @if ($font-size % $base-font-size == 0 and $font-size > $base-font-size) {
    @return $line-height - ($between-lines / 2);
    }
    @return $line-height;
    }
    }

    View Slide

  40. /* จࣈαΠζͱͦΕʹԠͨ͡࠷దͳline-height */
    @include _font-size-line-height(16px);
    /* margin */
    @include _margin-bottom(1);
    /* padding */
    @include _padding(.5);

    View Slide

  41. View Slide