Upgrade to Pro — share decks privately, control downloads, hide ads and more …

私の1年間とa-blog cmsだからできる簡単UI対応

sugar
May 18, 2019

私の1年間とa-blog cmsだからできる簡単UI対応

a-blog cms Training Camp 2019 Spring で発表
アップルップルに入社してからの1年間の成果について

sugar

May 18, 2019
Tweet

More Decks by sugar

Other Decks in Technology

Transcript

  1. ༗ݶձࣾΞοϓϧοϓϧ
    ੁݪ࠼
    ྩ࿨ݩ೥݄೔
    ࢲͷ೥ؒͱ
    BCMPHDNT͔ͩΒͰ͖Δ؆୯6*ରԠ

    View full-size slide

  2. ໨࣍
    ࣗݾ঺հ
    ೥લ
    ͜ͷ೥ͰͰ͖ΔΑ͏ʹͳͬͨओͳͭͷ͜ͱ
    BCMPHDNT͔ͩΒͰ͖Δ؆୯6*ରԠ
    ·ͱΊ

    View full-size slide

  3. ࣗݾ঺հ
    w ੁݪ࠼
    w ༗ݶձࣾΞοϓϧοϓϧ
    ɹࡢ೥݄ೖࣾ
    w ϑϩϯτΤϯυΤϯδχΞ
    w ޷͖ͳϞδϡʔϧ͸
    &OUSZ@4VNNBSZ
    w ޷͖ͳػೳ͸

    !JODMVEF

    View full-size slide

  4. ೥લ
    ೥લ΋τϨʔχϯάΩϟϯϓͰ-5

    View full-size slide

  5. BCMPHDNTʹ͍ͭͯશ͘஌Βͳ͔ͬͨ
    ೥લ

    View full-size slide

  6. ͭ·͖ͣͳ͕Β΋ϋϯζΦϯΛ΍Γ·͘Δ͜ͱͰ
    ೥લ

    View full-size slide

  7. $.4ͷΧελϚΠζ͕Ͱ͖ΔΑ͏ʹ
    ೥લ

    View full-size slide

  8. BCMPHDNTͱ͓༑ୡʹͳͬͨ
    ೥લ

    View full-size slide

  9. ਖ਼௚ʜ
    ϋϯζΦϯͰԿ౓΋͍᪴ͨ
    ͠ΜͲ͔ͬͨ
    ؓ࿩ٳ୊

    View full-size slide

  10. IUUQTEFWFMPQFSBCMPHDNTKQ
    IUUQTEFWFMPQFSBCMPHDNTKQ
    ؓ࿩ٳ୊

    View full-size slide

  11. ͜ͷ೥ͰͰ͖ΔΑ͏ʹͳͬͨओͳͭͷ͜ͱ
    σβΠϯΛݟΕ͹େମͲ͜ʹͲͷϞδϡʔϧ
    ΛೖΕΔ΂͖͔Θ͔ΔΑ͏ʹ
    جຊతͳίʔϙϨʔταΠτͰ͋Ε͹࣮૷Ͱ
    ͖Δ
    )5.-$44$.4Λಉ࣌ʹ࣮૷Ͱ͖Δ
    ઌഐͷݴ͍ͬͯΔ͜ͱ͕ཧղͰ͖Δ

    View full-size slide

  12. ˣ
    εϐʔυ61
    6*ʹ͍ͭͯߟ͑Δ༨༟͕Ͱ͖͖ͯͨ
    σβΠϯݟΕ͹େମͲ͜ʹͲͷϞδϡʔϧΛ
    ೖΕΔ΂͖͔Θ͔ΔΑ͏ʹ
    جຊతͳίʔϙϨʔταΠτͰ͋Ε͹࣮૷Ͱ
    ͖Δ
    )5.-$44$.4Λಉ࣌ʹ࣮૷Ͱ͖Δ
    ઌഐͷݴ͍ͬͯΔ͜ͱ͕ཧղͰ͖Δ
    ͜ͷ೥ͰͰ͖ΔΑ͏ʹͳͬͨओͳͭͷ͜ͱ

    View full-size slide

  13. 6TFS*OUFSGBDFͷུ
    ϢʔβʔͱαʔϏεͷ઀৮໘ͷ͜ͱ
    ˣ
    ը໘ʹө͍ͬͯΔίϯςϯπͦͷ΋ͷ
    Ϣʔβʔ͕ࢹೝ͢Δ΋ͷ
    6*ͱ͸
    ʜαΠτߋ৽ऀͷ͜ͱ

    View full-size slide

  14. ˣ
    εϐʔυ61
    αΠτߋ৽ऀͷ࢖͍΍͢͞Λߟ࣮͑ͨ૷
    σβΠϯݟΕ͹େମͲ͜ʹͲͷϞδϡʔϧΛ
    ೖΕΔ΂͖͔Θ͔ΔΑ͏ʹ
    جຊతͳίʔϙϨʔταΠτͰ͋Ε͹࣮૷Ͱ
    ͖Δ
    )5.-$44$.4Λಉ࣌ʹ࣮૷Ͱ͖Δ
    ઌഐͷݴ͍ͬͯΔ͜ͱ͕ཧղͰ͖Δ
    ͜ͷ೥ͰͰ͖ΔΑ͏ʹͳͬͨओͳͭͷ͜ͱ

    View full-size slide

  15. ຊ୊
    BCMPHDNT͔ͩΒͰ͖Δ؆୯6*ରԠ

    View full-size slide

  16. BCMPHDNT͔ͩΒͰ͖Δ؆୯6*ରԠ
    ฤूϦϯΫ͸ඞ͚ͣͭΔ
    ฤूϦϯΫͷελΠϧ͸ίϯςϯπʹ߹Θͤͨ΋ͷʹ
    ΤϯτϦʔ࡞੒Ϙλϯͷଞʹʮ͓஌Βͤ࡞੒ʯϘλϯͳͲΛઃஔ
    ೖྗ#09͸ద੾ͳαΠζʹ
    ؅ཧը໘ͷϝχϡʔ͸ඞཁͳ΋ͷ͚ͩ
    ཪଆͷೖྗཝ഑ஔ͸දଆͷίϯςϯπ഑ஔͱͳΔ΂͘Ұக͢ΔΑ͏ʹ
    ϥΠτΤσΟλ΋ΧελϚΠζ
    ΍ͨΒΊͬͨΒϞδϡʔϧ*%Λ࡞Γ·͘Βͳ͍DUYͷར༻
    ΧελϜϑΟʔϧυ͕௕͘ͳΓ͗ͨ͢Β໨࣍Λ࡞ͬͯΈΔ
    શ෦ϒϩάΧςΰϦʔͷΧελϜϑΟʔϧυʹͤͣϞδϡʔϧͷ

    ΧελϜϑΟʔϧυ΋࢖͏
    දϖʔδଆ
    ؅ཧϖʔδଆ

    View full-size slide

  17. BCMPHDNT͔ͩΒͰ͖Δ؆୯6*ରԠ
    ฤूϦϯΫ͸ඞ͚ͣͭΔ
    ฤूϦϯΫͷελΠϧ͸ίϯςϯπʹ߹Θͤͨ΋ͷʹ
    ΤϯτϦʔ࡞੒Ϙλϯͷଞʹʮ͓஌Βͤ࡞੒ʯϘλϯͳͲΛઃஔ
    ೖྗ#09͸ద੾ͳαΠζʹ
    ؅ཧը໘ͷϝχϡʔ͸ඞཁͳ΋ͷ͚ͩ
    ཪଆͷೖྗཝ഑ஔ͸දଆͷίϯςϯπ഑ஔͱͳΔ΂͘Ұக͢ΔΑ͏ʹ
    ϥΠτΤσΟλ΋ΧελϚΠζ
    ΍ͨΒΊͬͨΒϞδϡʔϧ*%Λ࡞Γ·͘Βͳ͍DUYͷར༻
    ΧελϜϑΟʔϧυ͕௕͘ͳΓ͗ͨ͢Β໨࣍Λ࡞ͬͯΈΔ
    શ෦ϒϩάΧςΰϦʔͷΧελϜϑΟʔϧυʹͤͣϞδϡʔϧͷ

    ΧελϜϑΟʔϧυΛ࢖͏ͳͲΛ͢Δɻ
    දϖʔδଆ
    ؅ཧϖʔδଆ

    View full-size slide

  18. 6*ରԠʢ؅ཧϖʔδଆʣ
    ೖྗ#09͸ద੾ͳαΠζʹ
    #FGPSFʢΧελϜϑΟʔϧυϝʔΧʔͦͷ··ʣ
    "GUFS

    View full-size slide

  19. "GUFS
    6*ରԠʢ؅ཧϖʔδଆʣ
    JOQVUUZQFUFYUOBNFlUFTUWBMVF\ςετ^DMBTTBDNTBENJOGPSNXJEUIGVMM
    JOQVUUZQFUFYUOBNFςετWBMVF\ςετ^DMBTTlBDNTBENJOGPSNXJEUIMBSHF
    ೖྗ#09͸ద੾ͳαΠζʹ
    #FGPSFʢΧελϜϑΟʔϧυϝʔΧʔͦͷ··ʣ

    View full-size slide

  20. 6*ରԠʢ؅ཧϖʔδଆʣ
    IUUQTEFWFMPQFSBCMPHDNTKQEPDVNFOUSFGFSFODFTUZMFHVJEF
    ೖྗ#09͸ద੾ͳαΠζʹ
    BCMPHDNTελΠϧΨΠυ
    $44

    View full-size slide

  21. 6*ରԠʢ؅ཧϖʔδଆʣ
    #FGPSF "GUFS
    ؅ཧը໘ͷϝχϡʔ͸ඞཁͳ΋ͷ͚ͩ

    View full-size slide

  22. 6*ରԠʢ؅ཧϖʔδଆʣ
    7FSҎલ
    ؅ཧը໘ͷϝχϡʔ͸ඞཁͳ΋ͷ͚ͩ

    View full-size slide

  23. 6*ରԠʢ؅ཧϖʔδଆʣ
    7FSҎ߱
    ؅ཧը໘ͷϝχϡʔ͸ඞཁͳ΋ͷ͚ͩ

    View full-size slide

  24. BCMPHDNT͔ͩΒͰ͖Δ؆୯6*ରԠ
    ฤूϦϯΫ͸ඞ͚ͣͭΔ
    ฤूϦϯΫͷελΠϧ͸ίϯςϯπʹ߹Θͤͨ΋ͷʹ
    ΤϯτϦʔ࡞੒Ϙλϯͷଞʹʮ͓஌Βͤ࡞੒ʯϘλϯͳͲΛઃஔ
    ೖྗ#09͸ద੾ͳαΠζʹ
    ؅ཧը໘ͷϝχϡʔ͸ඞཁͳ΋ͷ͚ͩ
    ཪଆͷೖྗཝ഑ஔ͸දଆͷίϯςϯπ഑ஔͱͳΔ΂͘Ұக͢ΔΑ͏ʹ
    ϥΠτΤσΟλ΋ΧελϚΠζ
    ΍ͨΒΊͬͨΒϞδϡʔϧ*%Λ࡞Γ·͘Βͳ͍DUYͷར༻
    ΧελϜϑΟʔϧυ͕௕͘ͳΓ͗ͨ͢Β໨࣍Λ࡞ͬͯΈΔ
    શ෦ϒϩάΧςΰϦʔͷΧελϜϑΟʔϧυʹͤͣϞδϡʔϧͷΧελ
    ϜϑΟʔϧυΛ࢖͏ͳͲΛ͢Δɻ
    දϖʔδଆ
    ؅ཧϖʔδଆ

    View full-size slide

  25. 6*ରԠʢදϖʔδଆʣ
    ฤूϦϯΫ͸ඞ͚ͣͭΔ

    View full-size slide

  26. ฤूϦϯΫ͸ඞ͚ͣͭΔ
    ฤूϦϯΫΛઃఆ͢Δͷ͕खؒ
    6*ରԠʢදϖʔδଆʣ

    View full-size slide

  27. IUUQTHJUIVCDPNBQQMFQMFBTUBSUFSLJU
    BQQMFQMFޚ༻ୡ
    डୗҊ݅༻TUBSUFSLJU
    6*ରԠʢදϖʔδଆʣ
    ฤूϦϯΫ͸ඞ͚ͣͭΔ

    View full-size slide

  28. @include(“/include/edit/module_custom.html”)
    BTUBSUFSLJUͷFEJUϑΥϧμΛ
    ࢖༻ςʔϚJODMVEFʹઃஔ
    ˣ
    ͋ͱ͸͜Ε͚ͩ
    6*ରԠʢදϖʔδଆʣ
    ฤूϦϯΫ͸ඞ͚ͣͭΔ

    View full-size slide

  29. 6*ରԠʢදϖʔδଆʣ
    ฤूϦϯΫ͸ඞ͚ͣͭΔ

    View full-size slide

  30. @include(“/include/edit/module_custom.html”, {
    “hash”: “#acms_box2”
    })
    6*ରԠʢදϖʔδଆʣ
    ฤूϦϯΫ͸ඞ͚ͣͭΔ

    View full-size slide

  31. ฤूϦϯΫͷελΠϧ͸ίϯςϯπʹ߹ΘͤΔ
    6*ରԠʢදϖʔδଆʣ

    View full-size slide

  32. ΤϯτϦʔ࡞੒ස౓ͷߴ͍ϖʔδʹ͸
    ɹઐ༻ϘλϯΛ༻ҙ
    #FGPSF
    "GUFS
    6*ରԠʢදϖʔδଆʣ

    View full-size slide

  33. ΤϯτϦʔ࡞੒ස౓ͷߴ͍ϖʔδʹ͸
    ɹઐ༻ϘλϯΛ༻ҙ
    IUUQTEFWFMPQFSBCMPHDNTKQEPDVNFOUQSBDUJDFTQFDJBMJ[FE@CVUUPOIUNM
    IUUQTEFWFMPQFSBCMPHDNTKQIBOETPODBNQTQSJOHFYUFOETIUNM
    ৄ͍͠ղઆ͸BCMPHDNTEFWFMPQFSαΠτ΁
    ɾTZTUFNBENJOBDUJPOIUNMΛίϐʔ
    ɾ࢖༻ςʔϚBENJOʹઃஔ
    ɾ!TFDUJPOͳͲͷதʹϘλϯΛೖΕΔ͚ͩ
    6*ରԠʢදϖʔδଆʣ

    View full-size slide

  34. BCMPHDNT͔ͩΒͰ͖Δ؆୯6*ରԠ
    ฤूϦϯΫ͸ඞ͚ͣͭΔ
    ฤूϦϯΫͷελΠϧ͸ίϯςϯπʹ߹Θͤͨ΋ͷʹ
    ΤϯτϦʔ࡞੒Ϙλϯͷଞʹʮ͓஌Βͤ࡞੒ʯϘλϯͳͲΛઃஔ
    ೖྗ#09͸ద੾ͳαΠζʹ
    ؅ཧը໘ͷϝχϡʔ͸ඞཁͳ΋ͷ͚ͩ
    ཪଆͷೖྗཝ഑ஔ͸දଆͷίϯςϯπ഑ஔͱͳΔ΂͘Ұக͢ΔΑ͏ʹ
    ϥΠτΤσΟλ΋ΧελϚΠζ
    ΍ͨΒΊͬͨΒϞδϡʔϧ*%Λ࡞Γ·͘Βͳ͍DUYͷར༻
    ΧελϜϑΟʔϧυ͕௕͘ͳΓ͗ͨ͢Β໨࣍Λ࡞ͬͯΈΔ
    શ෦ϒϩάΧςΰϦʔͷΧελϜϑΟʔϧυʹͤͣϞδϡʔϧͷ

    ΧελϜϑΟʔϧυΛ࢖͏ͳͲΛ͢Δɻ
    දϖʔδଆ
    ؅ཧϖʔδଆ

    View full-size slide

  35. ·ͱΊ
    ϑϩϯτΤϯυΤϯδχΞ
    ɹʹσβΠϯ௨Γ࡞Δ͚ͩ
    ɹʹ6*ʹ͍ͭͯ΋ߟ͑ͳ͕Β࣮૷͢Δ
    BCMPHDNTͳΒ͙͢ʹαΠτ੍࡞Ͱ͖ΔΑ͏ʹ
    ͳΔɻ

    View full-size slide

  36. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ
    ࢲͷ೥ؒͱ
    BCMPHDNT͔ͩΒͰ͖Δ؆୯6*ରԠ
    GBDFCPPLDPNSBJDIJNPNP
    !SBDIJDPN@TVHBS
    IUUQTSBDIJDPNOFU

    View full-size slide