a-blog cms用テーマ『generica』のステキなあれこれ

2020年8月11日にオンラインで開催された「a-blog cms zoom up 2020/08」の発表スライドです。プレミアムテーマ「generica（ジェネリカ）」のご紹介と、その開発にあたって、技術面で実装したことを発表しています。

Transcript

1. HFOFSJDBͷ
   εςΩͳ͋Ε͜Ε BCMPH
   DNT༻ςʔϚ ΢ΣϏϯάελδΦɹޱాɹ੟ࢠ
   ʢ5VFʣɹ๛ڮࢢͷࣗ୐ BCMPH
   DNT
   [PPN
   VQ
   
2. ޱాɹ੟ࢠ ͪͩ͘ ʢ͏͐ͼΜʣ ͍ͤ͜ XFCCJOHTUVEJP ϑϩϯτΤϯυΤϯδχΞ
   BCMPH
   DNTΤόϯδΣϦετ XFCCJOHTUVEJPDPN Ѫ஌ݝ
   ๛ڮࢢ
3. ͋ͭ·ΕͲ͏Ϳͭͷ৿ָ͕͍͠ ͻ·͔ౡ΁Α͏ͦ͜ˑ
4. աڈͷήʔϜͰ΋
   ͋ͨΓ·͑ͩͬͨ͜ͱ͕ஸೡ ✤ ւͷಁ໌ײɺ஬΍ڕͷಈ͖
   ✤ ணͨ͘ͳΔ෰ɺ০Γͨ͘ͳΔՈ۩
5. ͋ͨΓ·͑ͩͬͨ͜ͱ͕ஸೡ ᑓఱؙ΋͔͋͘Γ͍ͨ
   
   
   
6. BCMPH
   DNT༻ςʔϚ WFSTJPO
    δΣωϦΧ
7. 0/J8"גࣜձࣾ
   ʷ
   ΢ΣϏϯάελδΦ اը ੍࡞ JOBCB LVDIJEB
8. HFOFSJDBͷ֓ཁ ‣ ༗ྉͷϓϨϛΞϜςʔϚ
   ‣ -1ϖʔδ༻ςʔϚʮ[FSPJDIJ@MQʯΛվྑ
   ‣ ଟ࠼ͳઐ༻ϢχοτͰɺߴ଎αΠτ্ཱͪ͛ ͪΐͬͱڧؾͳൢചՁ֨ ͓٬͞Μʹଛ͸ͤ͞ͳ͍΋ʂ
9. ɹࣗ෼Ͱ࢖ͬͯ΋ָ͍͠ɻ
10. HFOFSJDBͷ
    ٕज़໘Ͱ࣮૷ͨ͠ɺ͋Ε͜Ε
11. ςϯϓϨʔτͷܧঝ
    ΠϯΫϧʔυͷม਺౉͠
    $44ʹΑΔݟग़͠ͷมߋ
    ϞδϡʔϧͷΤεέʔϓ
    +BWB4DSJQUΛϢχοτผʹ࣮ߦ͢Δ ⁞  
    ⁠
    ⁡
    ⁢
12. ςϯϓϨʔτͷܧঝ
    ΠϯΫϧʔυͷม਺౉͠
    $44ʹΑΔݟग़͠ͷมߋ
    ϞδϡʔϧͷΤεέʔϓ
    +BWB4DSJQUΛϢχοτผʹ࣮ߦ͢Δ ⁞
     
    ⁠
    ⁡
    ⁢
13. ΈΜͳݴͬͯ·͕͢
    ͜Ε͸ઈର΍Δ΂͖
14. ςϯϓϨʔτͷܧঝ ςʔϚ಺ʹ
    ϨΠΞ΢τ༻ͷςϯϓϨʔτΛ
    ࡞੒͢Δ
    
    ˣˣˣ
    
    มߋՄೳͳൣғΛࢦఆ͢Δ IUUQTEFWFMPQFSBCMPHDNTKQEPDVNFOUUFNQMBUFFOUSZIUNM
15. ςϯϓϨʔτͷܧঝ ࣮ࡍʹ࢖༻͢Δ
    ֤ςϯϓϨʔτͰ͸
    มߋ͢ΔՕॴͷίʔυ͚ͩॻ͘ IUUQTEFWFMPQFSBCMPHDNTKQEPDVNFOUUFNQMBUFFOUSZIUNM
16. @extends("/_layouts/default.html") @section(main) このテンプレートだけ 本文の内容が違うときは ここにコードを書く @endsection
17. HFOFSJDBͷ!FYUFOETରԠ ‣ [FSPJDIJ@MQΛϦϦʔεͨ͠ࠒ͸
    ςϯϓϨʔτͷܧঝ͸࣮૷͞Ε͍ͯͳ͔ͬͨ
    ‣ શମͷϨΠΞ΢τΛ
    @MBZPVUTEFGBVMUIUNM
    ΁Ҡಈ
    ‣ ֤ςϯϓϨʔτ͸ࠩ෼ͷΈهड़ έΞϨεϛεʹΑΔෆ۩߹͕ݮͬͨʂ
18. BCMPH
    DNTຊମͷ
    ؅ཧը໘ςϯϓϨʔτ΋ܧঝͰ͖Δ
19. TZTUFNςʔϚ BCMPH
    DNTຊମͷ
    ςʔϚʹ΋
    @MBZPVUTσΟϨΫτϦ͕͋Δ
20. ϒϩάઃఆը໘ʹ
    ΧϥʔϐοΧʔΛ࣮૷͍ͨ͠
21. @extends("/_layouts/admin.html") @section("admin-css") @parent カラーピッカーのCSSを読み込む カスタムフィールドをわかりやすくするCSSを読み込む @endsection @section("admin-js") @parent カラーピッカーのJSを読み込む 画面を表示したらカラーピッカーを起動する @endsection /admin.html
22. ެࣜςʔϚͷςΫχοΫͰ͢ MQ!TJUFςʔϚͰ
    ͍ͭͰ΋νΣοΫͰ͖·͢
23. ςϯϓϨʔτͷܧঝ
    ΠϯΫϧʔυͷม਺౉͠
    $44ʹΑΔݟग़͠ͷมߋ
    ϞδϡʔϧͷΤεέʔϓ
    +BWB4DSJQUΛϢχοτผʹ࣮ߦ͢Δ ⁞
      ⁠
    ⁡
    ⁢
24. ܧঝ΄Ͳ͡Όͳ͍͚Ͳ
    ஌͍ͬͯΔͱϋοϐʔ
25. ΠϯΫϧʔυͷม਺౉͠ τοϓϖʔδ͚ͩ
    ผϑΝΠϧͰಡΈࠐΜͰ͍Δϔομͷ
    ϩΰΛ
    Iཁૉ
    ʹ͍ͨ͠ IUUQTEFWFMPQFSBCMPHDNTKQEPDVNFOUUFNQMBUFJODMVEFIUNM
26. @include("/include/parts/logo.html", {"tag": "h1"}) /_top.html /include/parts/logo.html <{{tag | default("div")}} class=“header-brand"> ロゴ画像 </{{tag | default("div")}}>
27. എܠ৭΍ݟग़͠ͷઃఆ͸
    ΄ͱΜͲಉ͡ΧελϜϑΟʔϧυ
28. εϥΠυγϣʔϢχοτͷදࣔ෦෼Ͱ
    ҧ͏ͷ͸௨͠൪߸͚ͩ
29. HFOFSJDBͷ!JODMVEFରԠ ‣ [FSPJDIJ@MQΛϦϦʔεͨ͠ࠒ͸
    ΠϯΫϧʔυͷม਺౉͠͸࣮૷͞Ε͍ͯͳ͔ͬͨ
    ‣ Ҏલ
    ڞ௨Խ͖͠Εͳ͔ͬͨίʔυΛ
    ม਺౉͠ͰܰྔԽ ςʔϚฤूͷ޻਺͕େ෯ʹݮͬͨʂ
30. ςϯϓϨʔτͷܧঝ
    ΠϯΫϧʔυͷม਺౉͠
    $44ʹΑΔݟग़͠ͷมߋ
    ϞδϡʔϧͷΤεέʔϓ
    +BWB4DSJQUΛϢχοτผʹ࣮ߦ͢Δ ⁞
      ⁠
    ⁡
    ⁢
31. ݟग़͠ͷελΠϧ͸
    Ϣχοτ͝ͱʹมߋͰ͖Δ
32. ౰ॳ͸
    αΠζɾϑΥϯτɾ૷০͸
    ηοτͩͬͨ ݟग़͠Ͱ͢ ݟग़͠Ͱ͢ จࣈαΠζେ
    ݟग़͠ϑΥϯτ
    தԝدͤ
    Լઢ จࣈαΠζத
    ݟग़͠ϑΥϯτ
    தԝدͤ ݟग़͠Ͱ͢ จࣈαΠζখ
    ຊจϑΥϯτ
    ࠨدͤ
    നϚʔΧʔ UJUMF UJUMF UJUMF
33. ઈର͜͏ͳΔ Լઢ͚ͩফ͍͚ͨ͠Ͳ
    Ͳ͏͍͍͔ͯ͠Θ͔Βͳ͍ʜ จࣈ਺ΛݮΒͤͳ͍͔Β
    վߦ͞Εͳ͍Α͏ʹ
    จࣈΛখ͍ͨ͘͞͠Θ
34. ͍͑͑͜͏ͯ͠΍Δ
35. ݟग़͠Ͱ͢ ݟग़͠Ͱ͢ ݟग़͠Ͱ͢ UJUMFB UJUMFC UJUMFD ૷০ ݟग़͠Ͱ͢ UJUMF UJUMF UJUMF αΠζ ݟग़͠Ͱ͢ ݟग़͠Ͱ͢ GPOUGBNJMZUJUMF ϑΥϯτ ݟग़͠Ͱ͢
36. <h2 class="title title-02 title-a font-family-title"> 見出しです </h2> ڞ௨ Ϣχοτͷݟग़͠ઃఆΛ൓ө
37. $44Λ੔ཧͨ͠ͷͰɺ؅ཧը໘͔Β
    ϑΥϯτઃఆ͕Ͱ͖ΔΑ͏ʹͳͬͨʂ
38. 8PSE1SFTTͷ
    (VUFOCFSHͷʮελΠϧʯ΋
    ϚϧνΫϥεઃܭͰ͢ ͋Ε͸ΠϯϥΠϯελΠϧͱ͔ࠞͬͯͨ͟Γ͠·͕͢ʜ
39. ςϯϓϨʔτͷܧঝ
    ΠϯΫϧʔυͷม਺౉͠
    $44ʹΑΔݟग़͠ͷมߋ
    ϞδϡʔϧͷΤεέʔϓ
    +BWB4DSJQUΛϢχοτผʹ࣮ߦ͢Δ ⁞
      ⁠
    ⁡
    ⁢
40. ॏཁͳ͓஌ΒͤϢχοτ ֎؍͸มߋͰ͖·͢ʂ
41. ॏཁͳ͓஌Βͤͷ࢓༷ ‣ ϒϩά಺Ͱʮॏཁͳ͓஌ΒͤʯϑΟʔϧυͷ஋͕
    USVF
    ʹͳ͍ͬͯΔΤϯτϦʔΛදࣔ
    ‣ ຊจதͷϢχοτͱͯ͠഑ஔͨ͠Օॴʹදࣔ͢Δ
    ‣ αϚϦʔϞδϡʔϧʢ&OUSZ@4VNNBSZʣΛ࢖༻͢Δ
42. ͜͏ॻ͚͹
    Α͍Α͏ʹࢥ͑Δ͕
43. ͜ͷ··Ͱ͸ಈ࡞͠·ͤΜ
44. ͳͥʁ ‣ ͢΂ͯͷϞδϡʔϧɺม਺ʹ͸࣮ߦॱ͕͋Δ
    ‣ ௨ৗɺϞδϡʔϧ͕ೖΕࢠʹͳ͍ͬͯΔͱ
    ಺ଆ͔Β࣮ߦ͞ΕΔ
    ‣ ͔͠͠ࠓճͷ৔߹ɺઌʹ֎ଆͷຊจϞδϡʔϧ͕
    ࣮ߦ͞Εͳ͚Ε͹ͳΒͳ͍ ਖ਼௚ɺϘΫ΋Α͘Θ͔Βͳ͍Μͩ΋
45. ΤεέʔϓΛ࢖͏ IUUQTEFWFMPQFSBCMPHDNTKQEPDVNFOUUFNQMBUFFOUSZIUNM <!-- BEGIN_MODULE Entry_Summary id="summary_blog_topic" --> <!-- BEGIN_MODULE\ Entry_Summary id="summary_blog_topic" --> ˣɹˣɹˣ {title} \{title\} ˠ ຊจϞδϡʔϧΛઌʹ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δ
46. ΤεέʔϓϝʔΧʔ IUUQTEFWFMPQFSBCMPHDNTKQUPPMTFTDBQFIUNM
47. ඞཁͳ৔໘ Ϟδϡʔϧ͕ೖΕࢠʹͳ͍ͬͯͯ
    ֎ଆ͕औಘ͢Δ৘ใΛ࢖ͬͯ
    ಺ଆΛ࣮ߦ͍ͨ͠ͱ͖ ࢠϒϩάผͷ৽ணΤϯτϦʔҰཡ
    ΧελϜϢχοτ಺ͰΤϯτϦʔΛݺͼग़͢ ྫ
48. ςϯϓϨʔτͷܧঝ
    ΠϯΫϧʔυͷม਺౉͠
    $44ʹΑΔݟग़͠ͷมߋ
    ϞδϡʔϧͷΤεέʔϓ
    +BWB4DSJQUΛϢχοτผʹ࣮ߦ͢Δ ⁞
      ⁠
    ⁡ ⁢
49. +4ͷϥΠϒϥϦΛ
    ݸผʹىಈ͠ͳͯ͘͸ͳΒͳ͍
    Ϣχοτ͕͋Δ
50. εϥΠυγϣʔ
51. εϥΠυγϣʔʢ4MJDLKTʣ ϖʔδ͕දࣔ͞Εͨ௚ޙʹ
    ͢΂ͯͷεϥΠυγϣʔϢχοτʹରͯ͠
    ݸผʹ4MJDLΛىಈ͢Δ
    Ϣχοτ͝ͱʹεϥΠυҠಈϘλϯͷ༗ແ΍
    ϑΣʔυ͔εϥΠυ͔ͳͲͷઃఆͷҧ͍͕͋Δ ϢχοτʹɺҰҙͷΫϥε͔
    *%͕෇͍͍ͯͳͯ͘͸ͳΒͳ͍
52. ม਺
    \VUJE^ IUUQTEFWFMPQFSBCMPHDNTKQGPSVNIUNM QMBDFUPQJD'BCMPH DNT'BV@'1[L'EJTDVTTJPO <div class="slider" id=“slider-{utid}"> スライド画像とか </div> ・・・ <script> $('.slider#slider-{utid}').slick({ このユニットのスライドショー設定 }); </script>
53. ม਺
    \VUJE^ IUUQTEFWFMPQFSBCMPHDNTKQGPSVNIUNM QMBDFUPQJD'BCMPH DNT'BV@'1[L'EJTDVTTJPO <div class="slider" id=“slider-412"> スライド画像とか </div> ・・・ <script> $(‘.slider#slider-412').slick({ このユニットのスライドショー設定 }); </script>
54. ΋ͬͱߴ౓ͳ
    Ϣχοτ༻+4ͷॲཧ ࡢ೔஌ͬͨͷͰ·ͩ΍ͬͯͳ͍ΜͰ͕͢ʜ
55. IUUQTUXJUUFSDPNJODTUBUVT
56. IUUQTUXJUUFSDPNLB[VNJDITUBUVT
57. 4FU3FOEFSFE
    ͱ
    (&5@3FOEFSFE
    Λ׆༻ͨ͠
    ʮԁάϥϑͷΧελϜϢχοτʯΛ࡞ͬͯΈΑ͏ IUUQTEFWFMPQFSBCMPHDNTKQIBOETPODBNQTQSJOHDIBSUKT@DVTUPN@VOJUIUNM
58. ͱ͍͏Θ͚Ͱ
    ͍Ζ͍Ζͳٕज़Λ٧ΊࠐΜͰ͍Δ
    HFOFSJDBͳͷͰ͢
59. BCMPH
    DNT༻ςʔϚ WFSTJPO
     δΣωϦΧ
60. 8PSE1SFTTͷ
    (VUFOCFSHΛ͔ͳΓࢀߟʹͨ͠ ‣ )5.-΍ϦονςΩετͰ͸ͳ͘
    σβΠϯੑͷߴ͍ϢχοτʢϒϩοΫʣͰϖʔδ࡞੒
    ‣ ϒϩοΫ͝ͱͷಠཱઃܭ
    ‣ $44ͷΫϥε෇͚ସ͑ͰσβΠϯมߋ
    ‣ Χϥʔνοϓ΍ϓϨϏϡʔʹΑΔɺΘ͔Γ΍͍͢6*
61. Ξϯλ͕
    ΑΖ͜Ϳͱɺ
    ίίϩͱϑτίϩ͕
    ͋ͨͨ·Δ
    Ξλγ
62. ͋Γ͕ͱ͏͍͟͝·ͨ͠ ίϯςϯπʹ৘೤ΛɺϚωʔδϝϯτʹ୳ٻΛ XFCCJOHTUVEJPDPN