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

a-blog cms を使ったサイト制作ガイドラインを作ってみた

sugar
November 22, 2019

a-blog cms を使ったサイト制作ガイドラインを作ってみた

2019-11-22(金)a-blog cms Training Camp 2019 Autumn

sugar

November 22, 2019
Tweet

More Decks by sugar

Other Decks in Programming

Transcript

  1. BCMPHDNTΛ࢖ͬͨ
    αΠτ੍࡞ΨΠυϥΠϯΛ
    ࡞ͬͯΈͨ
    2019೥11݄22೔
    a-blog cms Training Camp 2019 Autumn
    ੁݪ࠼

    View Slide

  2. ࣗݾ঺հ
    ΨΠυϥΠϯΛ࡞ͬͨ໨త
    ΨΠυϥΠϯஔ͖৔ͷڞ༗
    ಛʹ஫ҙ͍ͨ͠ͷ͜ͱ
    ·ͱΊ
    ໨࣍

    View Slide

  3. ໊લɿੁݪ࠼
    ॴଐɿ༗ݶձࣾΞοϓϧοϓϧ
    ʢ೥݄ೖࣾʣ
    ৬छɿϚʔΫΞοϓΤϯδχΞ
    ࣗݾ঺հ

    View Slide

  4. ࣾ಺Ͱͷ$.4࣮૷ํ๏ڞ௨Խ
    ͳΜͱͳ͘΍͍࣮ͬͯͨ૷ཧ༝
    Λ࠶֬ೝ
    ৽ਓ΁ͷڭҭίετ࡟ݮ
    ֎஫࣌ͷϚχϡΞϧͱͯ͠࢖͍
    ͍ͨ
    ΨΠυϥΠϯΛ࡞ͬͨ໨త

    View Slide

  5. ෳ਺ਓ਺Ͱͷ࣮૷͕΍Γ΍͍͢
    ϝϯςφϯε͠΍͘͢ͳΔ
    ࠷௿ݶͷ඼࣭อূ
    ΨΠυϥΠϯΛ࡞ͬͨઌʹ͋Δ΋ͷ
    ΨΠυϥΠϯΛ࡞ͬͨ໨త

    View Slide

  6. IUUQTHJUIVCDPNBQQMFQMFHVJEFMJOF
    ΨΠυϥΠϯஔ͖৔ͷڞ༗

    View Slide

  7. !JODMVEF lQBUIUPpMFz
    ͸ɺ
    ςʔϚϑΥϧμΑΓԼ͔Β
    ઈରύεͰ͔͘

    ಛʹ஫ҙ͍ͨ͠10ͷ͜ͱ

    View Slide

  8. )5.-ϑΝΠϧͷΠϯΫϧʔυ
    ❶@include(“/path/to/file”)͸ɺςʔϚϑΥϧμҎ͔߱ΒઈରύεͰ͔͘
    !JODMVEF lQBUIUPpMFz

    ը૾ϑΝΠϧͷಡΈࠐΈ
    JNHTSDlQBUIUPpMFzʜ

    IUUQTEFWFMPQFSBCMPHDNTKQEPDVNFOUUFNQMBUFFOUSZIUNM

    View Slide

  9. !JODMVEF lJODMVEFDBUFHPSZMJTUIUNMz

    ❶@include(“/path/to/file”)͸ɺςʔϚϑΥϧμҎ͔߱ΒઈରύεͰ͔͘

    View Slide

  10. ௚઀දࣔͨ͘͠ͳ͍ςϯϓϨʔτ͸
    ϑΝΠϧ໊ͷ࠷ॳʹ
    ΞϯμʔείΞΛ͚ͭΔ

    ಛʹ஫ҙ͍ͨ͠10ͷ͜ͱ

    View Slide

  11. ❷௚઀දࣔͨ͘͠ͳ͍ςϯϓϨʔτ͸ϑΝΠϧ໊ͷ࠷ॳʹΞϯμʔείΞΛ͚ͭΔ

    View Slide

  12. ❷௚઀දࣔͨ͘͠ͳ͍ςϯϓϨʔτ͸ϑΝΠϧ໊ͷ࠷ॳʹΞϯμʔείΞΛ͚ͭΔ

    View Slide

  13. IUUQTEFWFMPQFSBCMPHDNTKQEPDVNFOUQSBDUJDFFOUSZIUNM
    ❷௚઀දࣔͨ͘͠ͳ͍ςϯϓϨʔτ͸ϑΝΠϧ໊ͷ࠷ॳʹΞϯμʔείΞΛ͚ͭΔ

    View Slide

  14. ؅ཧςϯϓϨʔτ΍ΠϯΫϧʔυϑΝΠϧ͸
    ཧ༝͕ͳ͍ݶΓܧঝݩςʔϚʹ࡞੒͢Δ

    ಛʹ஫ҙ͍ͨ͠10ͷ͜ͱ

    View Slide

  15. ❸؅ཧςϯϓϨʔτ΍ΠϯΫϧʔυϑΝΠϧ͸ཧ༝͕ͳ͍ݶΓܧঝݩςʔϚʹ࡞੒͢Δ
    ྫʣ
    site … ܧঝݩςʔϚ
    member@site … ࢠϒϩάͷςʔϚʢsiteςʔϚΛܧঝʣ
    memberϒϩάʢࢠϒϩάʣ
    ɹɾmemberϒϩάͷΧελϜϑΟʔϧυ
    ɹɾmemberϒϩάઐ༻ͷΧςΰϦʔϦετϞδϡʔϧ

    View Slide

  16. ྫʣ
    site … ܧঝݩςʔϚ
    event@site … ࢠϒϩάͷςʔϚ
    eventϒϩά
    ɹɾeventϒϩάͷΧελϜϑΟʔϧυ
    ɹɾeventϒϩάઐ༻ͷΧςΰϦʔϦετϞδϡʔϧ
    ❸؅ཧςϯϓϨʔτ΍ΠϯΫϧʔυϑΝΠϧ͸ཧ༝͕ͳ͍ݶΓܧঝݩςʔϚʹ࡞੒͢Δ

    View Slide

  17. ❸؅ཧςϯϓϨʔτ΍ΠϯΫϧʔυϑΝΠϧ͸ཧ༝͕ͳ͍ݶΓܧঝݩςʔϚʹ࡞੒͢Δ

    View Slide

  18. ίϯςϯπ͝ͱͷΧελϜϑΟʔϧυΛ
    ΠϯΫϧʔυ͢Δͱ͖͸
    ίʔυ໊ΛؚΊͯϑΝΠϧ෼ذ͢Δ

    ಛʹ஫ҙ͍ͨ͠10ͷ͜ͱ

    View Slide

  19. ❹ίϯςϯπ͝ͱͷΧελϜϑΟʔϧυΛΠϯΫϧʔυ͢Δͱ͖͸ίʔυ໊ΛؚΊͯϑΝ
    Πϧ෼ذ͢Δ
    V
    V

    View Slide

  20. ςϯϓϨʔτΛ෼ذ͢Δ࣌͸
    άϩʔόϧม਺Λ࢖͏

    ಛʹ஫ҙ͍ͨ͠10ͷ͜ͱ

    View Slide

  21. ❹-2ςϯϓϨʔτΛ෼ذ͢Δͱ͖͸άϩʔόϧม਺Λ࢖͏
    Š#&(*/@*'<\#$%^FRNFNCFS>Š
    !JODMVEF lQBUIUPpMFNz

    Š&-4&Š
    !JODMVEF lQBUIUPpMFz

    Š&/%@*'Š

    View Slide

  22. άϩʔόϧม਺Λղܾ
    ΠϯΫϧʔυॲཧΛղܾ
    TFU5FNQMBUFΛղܾ
    HFU5FNQMBUFΛղܾ
    λονϞδϡʔϧΛղܾ
    ϞδϡʔϧྨΛ಺ଆ͔Βղܾ
    *'ϒϩοΫΛղܾ
    ʜҎԼলུ
    ❹-2ςϯϓϨʔτΛ෼ذ͢Δͱ͖͸άϩʔόϧม਺Λ࢖͏

    View Slide

  23. ❹-2ςϯϓϨʔτΛ෼ذ͢Δͱ͖͸άϩʔόϧม਺Λ࢖͏
    Š#&(*/@*'<\#$%^FRNFNCFS>Š
    !JODMVEF lQBUIUPpMFNz

    Š&-4&Š
    !JODMVEF lQBUIUPpMFz

    Š&/%@*'Š
    !JODMVEF lQBUIUP\#$%^IUNMz

    View Slide

  24. https://developer.a-blogcms.jp/document/template/entry-1442.html
    ❹-2ςϯϓϨʔτΛ෼ذ͢Δͱ͖͸άϩʔόϧม਺Λ࢖͏

    View Slide

  25. ʢίϯςϯπͰ෼ྨͰ͖ͳ͍ʣ
    ڞ௨ͷΧελϜϑΟʔϧυͳͲͷ
    ϑΝΠϧ໊͸pFMEʓʓIUNMɹʹ͢Δ

    ಛʹ஫ҙ͍ͨ͠10ͷ͜ͱ

    View Slide

  26. field- ͳ͠ field- ͋Γ
    ⁢ʢίϯςϯπͰ෼ྨͰ͖ͳ͍ʣڞ௨ͷΧελϜϑΟʔϧυͳͲͷϑΝΠϧ໊͸pFMEͳ
    Μͱ͔IUNMʹ͢Δ

    View Slide

  27. ܧঝݩςʔϚʹ
    ϧʔτϒϩάઐ༻ͷ
    ςϯϓϨʔτΛஔ͔ͳ͍

    ಛʹ஫ҙ͍ͨ͠10ͷ͜ͱ

    View Slide

  28. ❻ܧঝݩςʔϚʹϧʔτϒϩάઐ༻ͷςϯϓϨʔτΛஔ͔ͳ͍

    View Slide

  29. IUUQυϝΠϯ໊DPOUBDU
    ❻ܧঝݩςʔϚʹϧʔτϒϩάઐ༻ͷςϯϓϨʔτΛஔ͔ͳ͍

    View Slide

  30. IUUQυϝΠϯ໊NFNCFSDPOUBDU
    ❻ܧঝݩςʔϚʹϧʔτϒϩάઐ༻ͷςϯϓϨʔτΛஔ͔ͳ͍

    View Slide

  31. ❻ܧঝݩςʔϚʹϧʔτϒϩάઐ༻ͷςϯϓϨʔτΛஔ͔ͳ͍
    NG
    OK

    View Slide

  32. ΤϯτϦʔ಺Ͱ͸
    )5.-λάࣗମʹελΠϧΛద༻͢Δ

    ಛʹ஫ҙ͍ͨ͠10ͷ͜ͱ

    View Slide

  33. ؅ཧը໘ίϯϑΟάฤूઃఆ
    ❼ΤϯτϦʔ಺Ͱ͸HTMLλάࣗମʹελΠϧద༻͢Δ

    View Slide

  34. Ϣχοτ಺ͷཁૉʹ͸ΨλʔΛ֬อ͢Δ

    ಛʹ஫ҙ͍ͨ͠10ͷ͜ͱ

    View Slide

  35. ❽Ϣχοτ಺ͷཁૉʹ͸ΨλʔΛ֬อ͢Δ

    View Slide

  36. ❽Ϣχοτ಺ͷཁૉʹ͸ΨλʔΛ֬อ͢Δ

    View Slide

  37. BDNTBENJONJODTT͸ඞͣಡΈࠐΉɻ
    ΧελϚΠζ࣌ʹ͸ɺ
    BDNTTDTTΛ࢖༻ςʔϚ಺ʹ͖࣋ͬͯͯ
    ϢχοτελΠϧ΋ಡΈࠐΉɻ

    ಛʹ஫ҙ͍ͨ͠10ͷ͜ͱ

    View Slide

  38. ❾acms-admin-min.css͸ඞͣಡΈࠐΉɻΧελϚΠζ࣌ʹ͸ɺacms.cssΛ࢖༻ςʔϚ಺ʹ
    ͖࣋ͬͯͯϢχοτελΠϧ΋ಡΈࠐΉɻ
    @import "functions";
    @import "variable";
    @import "mixins";
    @import "grid";
    @import "unit";
    BDNTTDTTͰΠϯϙʔτ͢Δ΋ͷ
    ઃఆϑΝΠϧ
    Ϣχοτ

    View Slide

  39. Ϣχοτͷը૾αΠζΛ
    ʮͦͷ··ʯʹ͠ͳ͍

    ಛʹ஫ҙ͍ͨ͠10ͷ͜ͱ

    View Slide

  40. ➓Ϣχοτͷը૾αΠζΛͦͷ··ʹ͠ͳ͍

    View Slide

  41. ࠓճ঺հͨ͠಺༰͸
    BQQMFQMF಺ͰͷΨΠυϥΠϯ
    ·ͱΊ

    View Slide

  42. ͝ҙݟड෇ઌɿ
    BQQMFQMFΨΠυϥΠϯ࡞੒൝
    ʢ৿ాɾງɾྛాɾੁݪɾҏ౻ʣ
    ͝ҙݟɺ͝ײ૝౳
    ͓଴͍ͪͯ͠·͢
    ·ͱΊ

    View Slide

  43. ͝ਗ਼ௌ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠
    ͝ҙݟड෇ઌɿ
    BQQMFQMFΨΠυϥΠϯ࡞੒൝
    ʢ৿ాɾງɾྛాɾੁݪɾҏ౻ʣ
    IUUQTHJUIVCDPNBQQMFQMFHVJEFMJOF

    View Slide