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

2019-11-22（金）a-blog cms Training Camp 2019 Autumn

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