Drupal テーマ開発入門講座 第3回 ベーステーマとサブテーマ

https://www.acquia.com/jp/events/webinars/drupal-theming-development-vol3

Transcript

1. ୈ3ճ ϕʔεςʔϚͱαϒςʔϚ Drupal ςʔϚ ։ൃೖ໳ߨ࠲
2. Drupal ςʔϚ։ൃೖ໳ߨ࠲γϦʔζ – Drupalʹ͓͚ΔʮςʔϚʯͱ͸ɺWebαΠτͷݟͨ໨Λ୲͏ػೳͰ͢ɻຊ΢ΣϏφʔγϦʔ ζͰ͸ɺDrupalͷςʔϚ։ൃʹؔ͢Δجૅ஌ࣝΛղઆ͠·͢ɻ – DrupalͷϑϩϯτΤϯυपΓʹ͍ͭͯମܥతʹֶͼ͍ͨํɺࣗ෼ͰΧελϜςʔϚΛ࡞ΕΔ Α͏ʹͳΓ͍ͨํɺΞΫΠΞೝఆσϕϩούʔࢼݧΛ໨ࢦ͢ํʹ͓͢͢ΊͰ͢ɻ – DrupalΛҰ௨Γૢ࡞ͨ͜͠ͱ͕͋ΔํΛର৅ͱ͍ͯ͠·͢ɻ·ͩDrupalΛ৮ͬͨ͜ͱ͕ແ͍ ํ͸ɺॳ৺ऀ޲͚DrupalνϡʔτϦΞϧಈըʢ೔ຊޠʣΛઌʹݟ͓ͯ͘ͱΑΓཧղ͕ਂ·Γ ·͢ɻ
3. ΞδΣϯμ 1. ςʔϚͷܧঝʹ͍ͭͯ 2. ϕʔεςʔϚΛ࢖༻͢Δ 3. ࿅श໰୊
4. ςʔϚͷܧঝʹ͍ͭͯ
5. ςʔϚΛܧঝͯ͠ޮ཰తʹςʔϚ։ൃΛߦ͏ – ίϯτϦϏϡʔτςʔϚΛΧελϚΠζ͍ͨ͠৔߹ɾɾ – ௚઀ॻ͖׵͑ͯ͠·͏ͱɺΞοϓσʔτͷࡍʹมߋ͕ࣦΘΕͯ͠· ͍·͢ʂ – ϕʔεςʔϚͱαϒςʔϚͷ࢓૊ΈΛ࢖͑͹ɺϑΝΠϧΛ௚઀ॻ͖ ׵͑Δ͜ͱͳ͘ΧελϚΠζ͕ՄೳʹͳΓ·͢ɻ 
 – Bootstrap౳ͷσβΠϯϑϨʔϜϫʔΫΛ࢖༻͢Δ৔߹ɾɾ – ඞཁͳߏ੒͕૊Έࠐ·Εɺ͙͢ʹΧελϚΠζʹऔΓ૊Ή͜ͱ͕Ͱ ͖ΔελʔλʔςʔϚ͕ଟ਺ެ։͞Ε͍ͯ·͢ɻ
6. ϕʔεςʔϚͱαϒςʔϚ – ϕʔεςʔϚ – αϒςʔϚͷ਌ͱͳΔςʔϚͰ͢ɻ – ελʔλʔςʔϚͱ΋ݺ͹Ε·͢ɻ 
 – αϒςʔϚ – ͋ΔϕʔεςʔϚΛݩʹ࡞ΒΕͨςʔϚΛαϒςʔϚͱݺͼ·͢ɻ – *.info.yml ͷ base theme ΩʔͰϕʔεςʔϚΛࢦఆ͠·͢ɻ – ྫʣbase theme: stable – ϕʔεςʔϚ͕࣋ͭελΠϧ΍ςϯϓϨʔτͳͲͷҰ෦ͷߏ੒Λܧঝ͠ ͳ͕ΒΧελϚΠζͰ͖·͢ɻ – αϒςʔϚ͸ผͷαϒςʔϚͷࢠʹ͢Δ͜ͱ͕ՄೳͰ͢ɻ
7. ςʔϚͷ༏ઌॱҐ αϒςʔϚ > ϕʔεςʔϚ > ίΞ ςʔϚϑΝΠϧͷ࢖༻͸࣍ͷΑ͏ʹ༏ઌ͞Ε·͢ɻ ※શͯͷϦιʔε͕ܧঝ͞ΕΔΘ͚Ͱ͸͋Γ·ͤΜɻ
8. αϒςʔϚ͕ܧঝ͢ΔϦιʔε – *.theme – *.breakpoints.yml – ςϯϓϨʔτϑΝΠϧ(*.html.twig) – εΫϦʔϯγϣοτ – ը૾ – CSS – JavaScript ϕʔεςʔϚʹ*.libraries.yml ͕ଘࡏ͢Δ৔߹ɺܧঝ͞Ε·͢ɻ
9. αϒςʔϚ͕ܧঝ͠ͳ͍Ϧιʔε – *.info.yml – ϕʔεςʔϚ͕࢖༻͞Ε͍ͯΔ͔Ͳ͏͔ʹݶΒͣɺશͯͷςʔϚʹ͸ *.info.yml͕ඞ ཁͰ͢ɻ – Ϧʔδϣϯ – ϕʔεςʔϚͷϦʔδϣϯΛར༻͍ͨ͠৔߹͸ɺ*.info.ymlʹϦʔδϣϯઃఆΛί ϐʔ͢Δ͜ͱͰߦ͍·͢ɻ – ColorϞδϡʔϧ – logo.svg – favicon.ico
10. ࢀߟ) ColorϞδϡʔϧͱ͸ ରԠ͢ΔςʔϚͷΧϥʔε ΩʔϚΛมߋͰ͖ΔΑ͏ʹ ͳΓ·͢ɻ
11. ϕʔεςʔϚͷࢦఆํ๏ name: Marucha type: theme description: '·Δ஡ͷͨΊͷΧελϜςʔϚ' core_version_requirement: ^8 || ^9 base theme: classy *.info.yml ͷbase themeΩʔʹ਌ʹ͍ͨ͠ςʔϚͷϚγϯ໊Λࢦఆ͢Δ͜ͱͰϕʔ εςʔϚΛࢦఆ͠·͢ɻ ྫʣϕʔεςʔϚʹίΞͷClassyςʔϚΛ࢖༻͢Δ৔߹
12. αϒςʔϚͷαϒςʔϚ – αϒςʔϚ͸ผͷαϒςʔϚͷࢠʹ͢Δ͜ͱ͕ՄೳͰ͢ɻ – ͜ͷܧঝͷνΣʔϯʹ੍ݶ͸͋Γ·ͤΜɻ ThemeA ThemeB ThemeC ThemeF ࢠ ਌ ࢠ ਌ ࢠ ThemeD ThemeE ਌ ࢠ ࢠ
13. BartikΛϕʔεςʔϚʹࢦఆͯ͠ΈΑ͏ – *.info.ymlͰBartikΛϕʔεςʔϚʹࢦఆ͠Α͏ – Bartikͱಉ͡ϦʔδϣϯΛ࢖༻͢Δʹ͸Ͳ͏͢Ε͹ྑ͍͔ – ͲΜͳϦιʔε͕Bartik͔Βܧঝ͞Ε͍ͯΔ͔֬ೝ͠Α͏ – ϨΠΞ΢τΛ͍ͬͯ͡ΈΑ͏ ԋश ※Bartik͸ϕʔεςʔϚʹద͞ͳ͍ͷͰɺຊ൪αΠτͰBartikΛϕʔεςʔϚʹ ར༻͢Δͷ͸߇͑·͠ΐ͏ɻ
14. ϕʔεςʔϚΛ࢖༻͢Δ
15. ίΞςʔϚΛϕʔεςʔϚʹར༻͢Δ – Classy – Stable͕ϕʔεςʔϚͱͯ͠ࢦఆ͞Ε͓ͯΓɺStableΛ֦ுͯ͠ɺϞμϯͳϨΠΞ΢τΛ࣮ݱ͢ ΔͨΊʹ໾ཱͭଟ͘ͷΫϥε͕༻ҙ͞Ε͍·͢ɻ – ΧελϜςʔϚΛ࡞੒͢ΔࡍͷϕʔεςʔϚͱͯ͠ར༻Ͱ͖·͢ɻ 
 – Stable – Classyಉ༷ɺΧελϜςʔϚΛ࡞੒͢ΔࡍͷϕʔεςʔϚͱͯ͠ར༻Ͱ͖·͢ɻ࠷খݶͷCSSΫ ϥεͰΑΓΫϦʔϯͳΞϓϩʔνΛऔΓ͍ͨ৔߹ʹબ୒͞Ε·͢ɻ – Stableͱ͸ผʹɺDrupal 9͔ΒStable 9(stable9)ͱ͍͏ίΞςʔϚ͕༻ҙ͞Ε·ͨ͠ɻStable͔Β ͍͔ͭ͘ͷมߋ͕Ճ͑ΒΕ͍ͯ·͢ɻStable͸Drupal 10Ͱ࡟আ͞ΕΔ༧ఆͰ͢ɻ 
 – Stark – ओʹಈ࡞֬ೝɺτϥϒϧγϡʔςΟϯάΛ໨తͱͯ͠ఏڙ͞Ε·͢ɻCSS͸ઃఆ͞Ε͍ͯ·ͤ Μɻ
16. ίϛϡχςΟͰఏڙ͞ΕΔϕʔεςʔϚͷྫ https://www.drupal.org/project/project_theme ͔Β୳͢͜ͱ͕Ͱ͖·͢ɻ – Barrio – Bootstrapόʔδϣϯ4/5ʹରԠͨ͠ϕʔεςʔϚɻ 
 – Radix – Bootstrapόʔδϣϯ4/5ɺSassɺES6, BrowserSync͕૊Έࠐ·ΕͨϕʔεςʔϚɻ 
 – W3CSS Theme – W3.CSSϑϨʔϜϫʔΫΛར༻ͨ͠ϕʔεςʔϚɻ
17. ࢀߟ) Drupal 10ͰͷςʔϚ։ൃ • Classyͷஔ͖׵͑Λ໨తͱͯ͠ɺ৽͍͠ΧελϜςʔϚͷ࡞੒ϓϩηεͱϕʔεςʔϚΛܭը • ελʔλʔΩοτςʔϚ͸αϒςʔϚͷϕʔεςʔϚͱͯ͠ػೳ͢ΔͷͰ͸ͳ͘ɺςʔϚΛ৽͘͠࡞੒ ͢Δࡍʹίϐʔ͞ΕΔςʔϚͱͯ͠ػೳ͢Δ • ςʔϚΛίϐʔ͢ΔͨΊͷίϚϯυΛDrupalίΞͰఏڙ ◦ $ php core/scripts/drupal generate-theme mytheme ςʔϚ։ൃͷͨΊͷελʔλʔΩοτ͕ొ৔ https://www.drupal.org/about/core/blog/new-starterkit-will-change-how-you-create-themes-in-drupal-10 https://www.drupal.org/project/drupal/issues/3050384
18. ࿅श໰୊
19. ࿅श໰୊1 ʮελʔλʔςʔϚʯͷઆ໌ͱͯ͠ਖ਼͍͠΋ͷΛ2ͭબΜͰ͍ͩ͘͞ɻ 1. αϒςʔϚ͕ґଘ͢ΔςʔϚɻ 2. ClassyΛجʹͨ͠ΧελϚΠζՄೳͳςʔϚɻ 3. ΧελϜςʔϚΛ࡞੒͢Δࡍʹඞͣ࢖༻͢ΔςʔϚɻ 4. ϕʔεςʔϚͷผ໊ɻ
20. ࿅श໰୊1 ʮελʔλʔςʔϚʯͷઆ໌ͱͯ͠ਖ਼͍͠΋ͷΛ2ͭબΜͰ͍ͩ͘͞ɻ 1. αϒςʔϚ͕ґଘ͢ΔςʔϚɻ 2. ClassyΛجʹͨ͠ΧελϚΠζՄೳͳςʔϚɻ 3. ΧελϜςʔϚΛ࡞੒͢Δࡍʹඞͣ࢖༻͢ΔςʔϚɻ 4. ϕʔεςʔϚͷผ໊ɻ 1, 4
21. ࿅श໰୊2 αϒςʔϚ͕ܧঝ͠ͳ͍΋ͷ͸ԿͰ͔͢ʁ2ͭબ୒͍ͯͩ͘͠͞ɻ 1. ελΠϧγʔτ 2. JavaScript 3. *.info.yml 4. logo.svg 5. ςϯϓϨʔτϑΝΠϧ
22. ࿅श໰୊2 αϒςʔϚ͕ܧঝ͠ͳ͍΋ͷ͸ԿͰ͔͢ʁ2ͭબ୒͍ͯͩ͘͠͞ɻ 1. ελΠϧγʔτ 2. JavaScript 3. *.info.yml 4. logo.svg 5. ςϯϓϨʔτϑΝΠϧ 3, 4
23. ࿅श໰୊3 αϒςʔϚͰϕʔεςʔϚͷϦʔδϣϯΛ࢖༻͢Δʹ͸Ͳ͏͢Ε͹ྑ͍Ͱ͔͢ʁ 1. Ϧʔδϣϯ͸αϒςʔϚʹܧঝ͞ΕΔͨΊɺԿ΋͠ͳͯ͘ྑ͍ɻ 2. αϒςʔϚଆͷ*.info.ymlͰɺϕʔεςʔϚͱಉ͡ϦʔδϣϯΛఆٛ͢Δඞཁ ͕͋Δɻ 3. αϒςʔϚଆͷ*.info.ymlͰɺregionΩʔʹϕʔεςʔϚͷϚγϯ໊Λࢦఆ͢ Δඞཁ͕͋Δɻ
24. ࿅श໰୊3 αϒςʔϚͰϕʔεςʔϚͷϦʔδϣϯΛ࢖༻͢Δʹ͸Ͳ͏͢Ε͹ྑ͍Ͱ͔͢ʁ 1. Ϧʔδϣϯ͸αϒςʔϚʹܧঝ͞ΕΔͨΊɺԿ΋͠ͳͯ͘ྑ͍ɻ 2. αϒςʔϚଆͷ*.info.ymlͰɺϕʔεςʔϚͱಉ͡ϦʔδϣϯΛఆٛ͢Δඞཁ ͕͋Δɻ 3. αϒςʔϚଆͷ*.info.ymlͰɺregionΩʔʹϕʔεςʔϚͷϚγϯ໊Λࢦఆ͢ Δඞཁ͕͋Δɻ 2
25. ࿅श໰୊4 αϒςʔϚͰϕʔεςʔϚΛೝࣝͤ͞Δํ๏͸࣍ͷ͏ͪͲΕͰ͔͢ʁ 1. αϒςʔϚͷϚγϯ໊Λɺ{ϕʔεςʔϚͷϚγϯ໊}-subtheme ͱ໋໊͢Δ͜ͱͰ ೝࣝͤ͞Δɻ 2. ϕʔεςʔϚͷσΟϨΫτϦ಺ʹαϒςʔϚ༻ͷσΟϨΫτϦΛ࡞੒͠ɺͦ͜Ͱ ςʔϚΛ࡞੒͢Δɻ 3. ϕʔεςʔϚͷ*.info.ymlϑΝΠϧͰαϒςʔϚΛࢦఆ͢Δɻ 4. αϒςʔϚͷ*.info.ymlϑΝΠϧͰϕʔεςʔϚΛࢦఆ͢Δɻ
26. ࿅श໰୊4 αϒςʔϚͰϕʔεςʔϚΛೝࣝͤ͞Δํ๏͸࣍ͷ͏ͪͲΕͰ͔͢ʁ 1. αϒςʔϚͷϚγϯ໊Λɺ{ϕʔεςʔϚͷϚγϯ໊}-subtheme ͱ໋໊͢Δ͜ͱͰ ೝࣝͤ͞Δɻ 2. ϕʔεςʔϚͷσΟϨΫτϦ಺ʹαϒςʔϚ༻ͷσΟϨΫτϦΛ࡞੒͠ɺͦ͜Ͱ ςʔϚΛ࡞੒͢Δɻ 3. ϕʔεςʔϚͷ*.info.ymlϑΝΠϧͰαϒςʔϚΛࢦఆ͢Δɻ 4. αϒςʔϚͷ*.info.ymlϑΝΠϧͰϕʔεςʔϚΛࢦఆ͢Δɻ 4
27. ຊ೔ͷΞδΣϯμ͸ऴྃ
28. ΞδΣϯμ 1. ςʔϚͷܧঝʹ͍ͭͯ 2. ϕʔεςʔϚΛ࢖༻͢Δ 3. ࿅श໰୊