Drupal テーマ開発入門講座 第2回 シンプルなカスタムテーマを作ってみよう

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

Transcript

1. Drupal ςʔϚ ։ൃೖ໳ߨ࠲ ୈ2ճ γϯϓϧͳΧελϜςʔϚ 
 Λ࡞ͬͯΈΑ͏
2. Drupal ςʔϚ։ൃೖ໳ߨ࠲γϦʔζ – Drupalʹ͓͚ΔʮςʔϚʯͱ͸ɺWebαΠτͷݟͨ໨Λ୲͏ػೳͰ͢ɻຊ΢ΣϏφʔγϦʔ ζͰ͸ɺDrupalͷςʔϚ։ൃʹؔ͢Δجૅ஌ࣝΛղઆ͠·͢ɻ – DrupalͷϑϩϯτΤϯυपΓʹ͍ͭͯମܥతʹֶͼ͍ͨํɺࣗ෼ͰΧελϜςʔϚΛ࡞ΕΔ Α͏ʹͳΓ͍ͨํɺΞΫΠΞೝఆσϕϩούʔࢼݧΛ໨ࢦ͢ํʹ͓͢͢ΊͰ͢ɻ – DrupalΛҰ௨Γૢ࡞ͨ͜͠ͱ͕͋ΔํΛର৅ͱ͍ͯ͠·͢ɻ·ͩDrupalΛ৮ͬͨ͜ͱ͕ແ͍ ํ͸ɺॳ৺ऀ޲͚DrupalνϡʔτϦΞϧಈըʢ೔ຊޠʣΛઌʹݟ͓ͯ͘ͱΑΓཧղ͕ਂ·Γ ·͢ɻ
3. ΞδΣϯμ 1. ΧελϜςʔϚΛ࡞Ζ͏ 2. *.info.ymlϑΝΠϧͷ࡞੒ 3. CSS/JSϑΝΠϧΛ௥Ճ͠Α͏ 4. ςϯϓϨʔτϑΝΠϧΛ࡞੒͠Α͏ 5. ςʔϚʹϦʔδϣϯΛఆٛ͠Α͏ 6. ࿅श໰୊
4. ΧελϜςʔϚΛ࡞Ζ͏
5. खॱ 1. *.info.ymlͷ࡞੒ 2. CSSɺJSͷ௥Ճ 3. ςϯϓϨʔτϑΝΠϧͷ௥Ճ 4. Ϧʔδϣϯͷఆٛ ΧελϜςʔϚͷ࡞੒εςοϓ Drupal͕ςʔϚΛͲͷΑ͏ʹѻ͏͔Λֶश͢ΔͨΊʹɺΧελϜςʔϚΛ࡞੒͢ΔͨΊͷ େ·͔ͳྲྀΕΛ঺հ͠·͢ɻ υΩϡϝϯτϧʔτ௚Լʹɺthemes/custom/marucha/ ͱ͍͏σΟϨΫτϦΛ࡞੒͠ɺ͜͜ ͰςʔϚͷ࡞੒Λߦ͍ͬͯ͘͜ͱͱ͠·͢ɻ ιʔείʔυ͸ͪ͜Β→ https://github.com/hmaruyama/my-drupal9-theming/tree/vol2
6. *.info.ymlϑΝΠϧͷ࡞੒
7. – ςʔϚͷ໊લ΍આ໌ͳͲɺςʔϚʹؔ͢Δϝλ৘ใΛهड़͢ΔͨΊͷϑΝΠϧͰ͢ɻ – ඞਢ(ςʔϚͰ།ҰͷඞਢϑΝΠϧͰ͢)ɻ – ͜ͷϑΝΠϧ͑͋͞Ε͹ɺDrupal͸ΧελϜςʔϚΛద੾ͳςʔϚͱͯ͠ೝࣝͰ͖·͢ɻ – YMLܗࣜͷϑΝΠϧͳͷͰɺΠϯσϯτ͸λϒͰͳ͘εϖʔε2ͭͰߦ͏ඞཁ͕͋Γ· ͢ɻ *.info.ymlϑΝΠϧͱ͸ your Drupal project roo t └── web (document root ) └── theme s └── custo m └── maruch a └── marucha.info.yml
8. marucha.info.ymlΛ࡞੒͠Α͏ name: Marucha type: theme description: '·Δ஡ͷͨΊͷΧελϜςʔϚ' core_version_requirement: ^8 || ^9 base theme: false ඞਢ ςʔϚͷϥϕϧ໊ ඞਢ ֦ுػೳͷछผΛࣔ͢ ςʔϚͷઆ໌Λࣔ͢ ରԠ͢ΔίΞόʔδϣϯ ඞਢ ϕʔεςʔϚͷࢦఆ
9. ࢀߟ) *.info.ymlϑΝΠϧͰఆٛՄೳͳKey-ValueϖΞ https://www.drupal.org/docs/theming- drupal/defining-a-theme-with-an-infoyml- file
10. ΧελϜςʔϚΛσϑΥϧτʹઃఆ – *.info.ymlϑΝΠϧΛద੾ʹ༻ҙ͢Δ͚ͩͰɺ Drupal͸ςʔϚΛೝࣝͯ͘͠Ε·͢ɻ – Drupal؅ཧϝχϡʔ > ςʔϚ > ΞϯΠϯε τʔϧࡁΈςʔϚ ʹɺΧελϜςʔϚ͕ද ࣔ͞Ε͍ͯΔ͔֬ೝ͠·͢ɻ – දࣔ͞Ε͍ͯͨΒɺαΠτͷσϑΥϧτςʔ Ϛʹઃఆ͓͖ͯ͠·͢ɻ
11. ΧελϜςʔϚ͕ਖ਼͘͠ద༻͞Ε͍ͯΔ͔֬ೝ – αΠτͷτοϓϖʔδʹҠಈͯ͠ɺ 
 ←ͷΑ͏ͳݟͨ໨ͷϖʔδ͕ݱΕ͍ͯͨΒOKͰ͢ɻ 
 – CSS΍JavaScriptϑΝΠϧ͸Ұ੾ద༻͞Ε͍ͯͳ͍ ͷͰɺ͜ͷ࣌఺Ͱ͸ऐ͍͠ϨΠΞ΢τʹͳ͍ͬͯ ·͢ɻ – ͔͜͜ΒCSS΍JSΛ௥Ճ͍͖ͯ͠·͢ʂ
12. CSS/JSϑΝΠϧΛ௥Ճ͠Α͏
13. ΞηοτϥΠϒϥϦͷ؅ཧํ๏ – DrupalͰ͸ςϯϓϨʔτʹCSS΍JSͷURLΛຒΊࠐΉͷͰ͸ͳ͘ɺΞηο τϥΠϒϥϦͱݺ͹ΕΔ಺෦ͷγεςϜʹొ࿥͢ΔܗͰߦΘΕ·͢ɻ – ͜ΕʹΑΓɺγεςϜ಺෦ͰDrupal͕CSSͱJSͷѹॖ΍Ωϟογϡɺϩʔ υ͢Δॱ൪ΛೖΕସ͑ΔॲཧΛߦ͏͜ͱ͕Ͱ͖·͢ɻ
14. ΞηοτϥΠϒϥϦͷ௥Ճํ๏ 1. ಡΈࠐΈ͍ͨCSS/JSϑΝΠϧΛ४උ͠·͢ɻ 2. *.libraries.yml ͰΞηοτϥΠϒϥϦΛఆٛ͠·͢ɻ 3. ΞηοτϥΠϒϥϦΛಡΈࠐΈ·͢ɻ a. શͯͷϖʔδͰݺͼग़͢ - *.info.ymlʹఆٛ b. ಛఆͷTwigςϯϓϨʔτ - *.html.twigʹఆٛ c. ಛఆͷϒϩοΫɺϊʔυ - *.themeʹఆٛ https://www.drupal.org/docs/theming-drupal/adding- stylesheets-css-and-javascript-js-to-a-drupal-theme
15. CSSɾJSϑΝΠϧͷ४උ maruch a ɹ ᵓ── cs s ɹ │ └── styles.cs s ɹ ᵓ── j s ɹ │ └── script.j s ɹ └── marucha.info.yml – ςʔϚσΟϨΫτϦ௚Լʹ 
 cssɺjsσΟϨΫτϦΛ࡞੒͠·͢ɻ – ֤σΟϨΫτϦʹϑΝΠϧΛ഑ஔ͠ ͓͖ͯ·͢ɻ a { color: red; } h1 { color: blue; } console.log('JS͕ಡΈࠐ·Ε·ͨ͠ɻ'); marucha/css/styles.css marucha/js/script.js
16. marucha.libraries.ymlΛ࡞੒͠Α͏ global-styling: version: 1.x css: theme: css/styles.css: {} global-scripts: version: 1.x js: js/script.js: {}
17. ఆٛͨ͠ΞηοτϥΠϒϥϦΛςʔϚʹ௥Ճ͢Δ name: Marucha type: theme description: '·Δ஡ͷͨΊͷΧελϜςʔϚ' core_version_requirement: ^8 || ^9 base theme: false libraries: - marucha/global-styling - marucha/global-scripts – ࣍ʹɺ*.libraries.ymlͰఆٛͨ͠ΞηοτϥΠϒϥϦΛͲ͜Ͱݺͼग़͔͢Λࢦఆ͠·͢ɻ – *.info.ymlͷlibrariesΩʔͰΞηοτϥΠϒϥϦΛࢦఆ͢ΔͱɺαΠτશମͰಡΈࠐ·Ε Δ͜ͱʹͳΓ·͢ɻ
18. ΞηοτϥΠϒϥϦ͕ద༻͞Ε͍ͯΔ͔֬ೝ – αΠτͷτοϓϖʔδʹҠಈͯ͠ɺ 
 ←ͷΑ͏ͳݟͨ໨ͷϖʔδ͕ݱΕ͍ͯͨΒOKͰ ͢ɻ – ϨΠΞ΢τ͕มߋ͞Ε͍ͯͳ͔ͬͨΒɺΩϟο γϡΫϦΞ΍ఆٛϑΝΠϧʹλΠϙ͕ͳ͍͔֬ೝ ͍ͯͩ͘͠͞ɻ ϦϯΫ͕੺৭ʹͳ͍ͬͯΔ H1λάͷจࣈ͕੨৭ʹͳͬͯ ͍Δ ϒϥ΢βͷ։ൃऀπʔϧΛ։͍ͯɺ ʮJS͕ಡΈࠐ·Ε·ͨ͠ʯͱ͍͏ ϩά͕දࣔ͞Ε͍ͯΔ
19. ࢀߟ) SMACSSͱ͸ – Scalable and Modular Architecture for CSS – CSSઃܭख๏ͷҰͭɻCSSΛ5ͭͷΧςΰϦʹ෼ྨͯ͠هड़͍ͯ͘͜͠ͱͰɺίʔυͷϝϯςφϯεੑΛ޲্ͤ͞·͢ɻ CSSઃܭख๏͸ଞʹ΋BEM΍OOCSS͕༗໊Ͱ͢ɻ 
 – 5ͭͷ෼ྨ – Base — HTMLཁૉͷελΠϦϯά – Layout — άϦουγεςϜΛؚΉϖʔδϨΠΞ΢τͷελΠϦϯά – Component — ࠶ར༻ՄೳͳUIཁૉͷελΠϦϯά ※ SMACSSͰ͸Moduleͱݺ͹ΕΔ – State — Ϛ΢εΦʔόʔͳͲͷΫϥΠΞϯτଆͷίϯϙʔωϯτมߋͷελΠϦϯά – Theme — ίϯϙʔωϯτͷࢹ֮తͳελΠϦϯά 
 – DrupalͰ͸SMACSSΛ༻͍ͯCSSΛ෼ྨ͠·͢ɻ – Base, Layout, Component, State, Themeͷॱ൪ͰಡΈࠐΉΑ͏ʹͳ͍ͬͯ·͢ɻ
20. ςϯϓϨʔτϑΝΠϧΛ࡞੒͠Α͏
21. ςϯϓϨʔτϑΝΠϧͱ͸ – Drupal 8Ҏ߱ɺDrupal͸TwigΛςϯϓϨʔτΤ ϯδϯʹ࠾༻͍ͯ͠·͢ɻ – ໋໊نଇ௨ΓͷϑΝΠϧ໊Λ෇༩͠ɺطଘͷί ϯϙʔωϯτΛ্ॻ͖͢ΔܗͰ࡞੒͠·͢ɻ – ೖΕࢠঢ়ʹςϯϓϨʔτϑΝΠϧ͕ଘࡏ͠· ͢ɻ – ൚༻తͳςϯϓϨʔτ͸ΑΓ۩ମతͳςϯϓ ϨʔτͰ্ॻ͖Ͱ͖·͢ɻ https://www.drupal.org/docs/theming-drupal/ twig-in-drupal
22. ࢀߟ) ςϯϓϨʔτΤϯδϯͱ͸ – ςϯϓϨʔτͱݺ͹ΕΔ਽ܗͱɺ͋ΔσʔλϞσϧͰදݱ͞ΕΔೖྗσʔλΛ߹੒͠ɺ੒ՌυΩϡϝϯτΛग़ྗ͢Διϑτ ΢ΣΞ - wikipedia 
 – PHPք۾ͰΑ͘ར༻͞ΕΔςϯϓϨʔτΤϯδϯ – Twig (Symfonyඪ४) – Blade (Laravelඪ४) – Smarty 
 – ͳͥςϯϓϨʔτΤϯδϯΛ࢖༻͢Δͷʁ – ViewͱϩδοΫͷ෼཭ – XSS߈ܸͷճආʢࣗಈΤεέʔϓॲཧʣ - શͯͷHTMLΛTwigςϯϓϨʔτͰग़ྗ͢Δ͜ͱ͕๬·͍͠Ͱ͢ɻWriting secure code for Drupal ࢀর 
 – Drupal 8Ҏલ(ver 4.7 ~ 7.x)Ͱ͸ʮPHPTemplateʯ͕ςϯϓϨʔτΤϯδϯͱͯ͠࠾༻͞Ε͍ͯ·ͨ͠ɻ
23. ςϯϓϨʔτΛ৮Δલʹɾɾɾ – ςϯϓϨʔτ։ൃΛߦ͏લʹɺTwigͷσόοάΛ༗ޮԽ͢Δ͜ͱΛ͓קΊ͠·͢ɻ※ຊ൪؀ڥ Ͱ͸ແޮʹ͍ͯͩ͘͠͞ – web/sites/default/services.yml ϑΝΠϧͰdebugม਺Λtrueʹมߋ͢Δ͜ͱͰ༗ޮԽ͞Ε·͢ɻ 
 – services.yml͕ଘࡏ͠ͳ͍৔߹͸ɺ 
 default.services.ymlΛίϐʔͯ͠ 
 ϑΝΠϧΛ࡞੒͍ͯͩ͘͠͞ɻ ..(লུ).. twig.config: debug: true ..(লུ).. web/sites/default/services.yml
24. Twigͷσόοά ςϯϓϨʔτϑΝΠϧ໊ީิ * Ͱ͸ͳ͘ x ͕࢖༻தͷςϯϓ ϨʔτϑΝΠϧ ࢖༻தͷςϯϓϨʔτϑΝΠ ϧͷ৔ॴ ΩϟογϡΫϦΞΛߦͬͨΒɺDrupalα ΠτͰϒϥ΢βͷ։ൃऀίϯιʔϧΛ։ ͍ͯݟ·͢ɻ
25. $ cp web/core/modules/block/templates/block.html.twig web/themes/custom/marucha/ templates/block--marucha-page-title.html.twig ..(লུ).. <div{{ attributes }}> <div{{ attributes.addClass('my-class') }}> # my-classΫϥεΛ௥Ճ {{ title_prefix }} {% if label %} ..(লུ).. ςϯϓϨʔτΛ্ॻ͖͠Α͏ web/themes/custom/marucha/templates/block--marucha-page-title.html.twig
26. ௥Ճͨ͠ςϯϓϨʔτϑΝΠϧ͕࢖༻͞Ε͍ͯΔ͔֬ೝ ࢖༻͢ΔςϯϓϨʔτ͕ block.html.twig͔Βblock- marucha-page-title.html.twigʹม ߋ͞Εͨ my-classΫϥε͕௥Ճ͞Εͨ
27. ςʔϚʹϦʔδϣϯΛఆٛ͠Α͏
28. – ϒϩοΫ͸ςʔϚͷϦʔδϣϯ಺ʹ഑ஔ͞Ε· ͢ɻ – Ϧʔδϣϯ͸ςʔϚ͝ͱʹఆٛ͞Ε·͢ɻ – ςʔϚ͝ͱʹಠࣗͷϦʔδϣϯΛఆٛͰ͖·͢ɻ – ςʔϚͰϦʔδϣϯΛఆٛ͠ͳͯ͘΋ɺDrupalͷ σϑΥϧτϦʔδϣϯΛ࢖༻͢Δ͜ͱ΋Ͱ͖· ͢ɻ Ϧʔδϣϯͱ͸ BartikςʔϚͷϦʔδϣϯ https://www.drupal.org/docs/user_guide/en/block-regions.html
29. Ϧʔδϣϯͷఆٛํ๏ 1. *.info.ymlͰϦʔδϣϯΛఆٛ͠·͢ɻ 2. page.html.twigΛฤूͯ͠ɺఆٛͨ͠ϦʔδϣϯΛ഑ஔ͠·͢ɻ https://www.drupal.org/docs/theming- drupal/adding-regions-to-a-theme
30. ࠓͷϦʔδϣϯΛݟͯΈΑ͏ – ࠓͷ࣌఺ͰɺʮMaruchaʯΧελϜςʔϚ Ͱ࢖༻ՄೳͳϦʔδϣϯ͸࣍ͷ௨ΓͰ͢ɻ – *.info.ymlͰϦʔδϣϯΛఆ͍ٛͯ͠ͳ͍ͷ ͰɺDrupalͷσϑΥϧτϦʔδϣϯ͕࢖༻ ͞Ε͍ͯ·͢ɻ
31. – ςʔϚͷ*.info.ymlͰϦʔδϣϯ͕એݴ͞Ε͍ͯͳ͍৔߹ɺDrupal͸࣍ͷϦʔδϣϯΛσ ϑΥϧτͰηοτ͠·͢ɻ – Left sidebar (sidebar_first) – Right sidebar (sidebar_second) – Content (content) – Header (header) – Primary menu (primary_menu) – Secondary menu (secondary_menu) – Footer (footer) – Highlighted (highlighted) – Help (help) – Breadcrumb (breadcrumb) – Page top (page_top) – Page bottom (page_bottom) σϑΥϧτϦʔδϣϯ https://www.drupal.org/docs/theming-drupal/adding- regions-to-a-theme#default_regions
32. – ςʔϚͷ*.info.ymlͰϦʔδϣϯ͕એݴ͞Ε͍ͯͳ͍৔߹ɺDrupal͸࣍ͷϦʔδϣϯΛσ ϑΥϧτͰηοτ͠·͢ɻ – Left sidebar (sidebar_first) – Right sidebar (sidebar_second) – Content (content) – Header (header) – Primary menu (primary_menu) – Secondary menu (secondary_menu) – Footer (footer) – Highlighted (highlighted) – Help (help) – Breadcrumb (breadcrumb) – Page top (page_top) – Page bottom (page_bottom) σϑΥϧτϦʔδϣϯ https://www.drupal.org/docs/theming-drupal/adding- regions-to-a-theme#default_regions ςʔϚଆͰҰͭͰ΋ϦʔδϣϯΛ ఆٛͨ͠ΒɺσϑΥϧτϦʔδϣ ϯ͸ແޮʹͳΔʂ 
 ʢ˞ඇදࣔϦʔδϣϯΛআ͘ʣ
33. ඇදࣔϦʔδϣϯ(Hidden regions)ͱ͸ – ࣍ͷೋͭͷϦʔδϣϯ͸ʮHidden regionsʯͱݺ͹ΕɺϒϩοΫϨΠΞ΢τϖʔ δͰදࣔ͞Ε·ͤΜɻ – Page top (page_top) – Page bottom (page_bottom) 
 – ඇදࣔϦʔδϣϯ͸ page.html.twig Ͱ͸ͳ͘ html.html.twig Ͱݺͼͩ͞Ε·͢ɻ – *.info.ymlͰఆٛ΋Ͱ͖·͕͢ɺఆٛ͠ͳͯ͘΋DrupalଆͰ༻ҙ͞Ε·͢ɻ – Ϟδϡʔϧ͕ඇදࣔϦʔδϣϯʹґଘ͍ͯ͠Δ৔߹͕͋ΔͷͰɺhtml.html.twig ΛΧελϚΠζ͢ΔࡍʹɺඇදࣔϦʔδϣϯΛ࡟আ͠ͳ͍Α͏ʹ͍ͯͩ͘͠͞ɻ
34. ςʔϚʹϦʔδϣϯΛఆٛͯ͠ΈΑ͏ – *.info.yml ʹ regions ΩʔͰ3ͭͷϦʔ δϣϯΛఆٛ͠·͢ɻ – My Header (my_header) – My Content (my_content) – My Footer (my_footer) 
 – ϦʔδϣϯͷϚγϯ໊͸ӳ਺ࣈͰ͋ Δඞཁ͕͋Γ·͢ɻΞϯμʔείΞΛ ؚΊΒΕ·͢ɻ name: Marucha type: theme description: '·Δ஡ͷͨΊͷΧελϜςʔϚ' core_version_requirement: ^8 || ^9 base theme: false libraries: - marucha/global-styling - marucha/global-scripts regions: my_header: 'My Header' my_content: 'My Content' my_footer: 'My Footer'
35. ఆٛͨ͠ϦʔδϣϯΛςϯϓϨʔτʹ௥Ճ͠Α͏ $ cp web/core/modules/system/templates/page.html.twig web/themes/custom/marucha/ templates/ <header> {{ page.my_header }} </header> <main> {{ page.my_content }} </main> <footer> {{ page.my_footer }} </footer> web/themes/custom/marucha/templates/page.html.twig
36. ϒϩοΫϨΠΞ΢τը໘Ͱɺ*.info.ymlͰఆ ٛͨ͠Ϧʔδϣϯ͕දࣔ͞Ε͍ͯΔ͔֬ ೝ͠·͢ɻ ϦʔδϣϯΛ৽ͨʹఆٛ͢Δ͜ͱʹΑͬ ͯɺϒϩοΫͷ഑ஔ͕Ϧηοτ͞Ε·͢ɻ ϒϩοΫϨΠΞ΢τը໘Ͱɺదٓඞཁͳ ϒϩοΫΛϦʔδϣϯʹઃஔ͠·͢ɻ ఆٛͨ͠Ϧʔδϣϯ͕൓ө͞Ε͍ͯΔ͔֬ೝ
37. ࿅श໰୊
38. ࿅श໰୊1 *.info.ymlͰඞͣࢦఆ͢Δඞཁͷ͋Δ஋Λ͔࣍Β2ͭબ୒͍ͯͩ͘͠͞ɻ 1. name 2. description 3. regions 4. type 5. logo
39. ࿅श໰୊1 *.info.ymlͰඞͣࢦఆ͢Δඞཁͷ͋Δ஋Λ͔࣍Β2ͭબ୒͍ͯͩ͘͠͞ɻ 1. name 2. description 3. regions 4. type 5. logo 1, 4
40. *.libraries.ymlͰఆٛͨ͠ΞηοτϥΠϒϥϦΛαΠτશମͰಡΈࠐΉʹ͸Ͳ͏͢Ε͹ྑ͍Ͱ͔͢ʁ 1. *.libraries.ymlͰΞηοτϥΠϒϥϦΛద੾ʹఆٛ͢Δ͚ͩͰɺσϑΥϧτͰαΠτશମͰಡΈ ࠐ·ΕΔΑ͏ʹͳΔͨΊɺԿ΋͠ͳͯ͘ྑ͍ɻ 2. *.info.ymlʹɺlibrariesΩʔͰΞηοτϥΠϒϥϦΛࢦఆͯ͠ಡΈࠐΉɻ 3. html.html.twig ϑΝΠϧ಺ʹɺattach_libraryؔ਺Λ࢖༻ͯ͠ಡΈࠐΉɻ 4. *.themeͰϓϦϓϩηεؔ਺Λ࢖༻ͯ͠ಡΈࠐΉɻ ࿅श໰୊2
41. *.libraries.ymlͰఆٛͨ͠ΞηοτϥΠϒϥϦΛαΠτશମͰಡΈࠐΉʹ͸Ͳ͏͢Ε͹ྑ͍Ͱ͔͢ʁ 1. *.libraries.ymlͰΞηοτϥΠϒϥϦΛద੾ʹఆٛ͢Δ͚ͩͰɺσϑΥϧτͰαΠτશମͰಡΈ ࠐ·ΕΔΑ͏ʹͳΔͨΊɺԿ΋͠ͳͯ͘ྑ͍ɻ 2. *.info.ymlʹɺlibrariesΩʔͰΞηοτϥΠϒϥϦΛࢦఆͯ͠ಡΈࠐΉɻ 3. html.html.twig ϑΝΠϧ಺ʹɺattach_libraryؔ਺Λ࢖༻ͯ͠ಡΈࠐΉɻ 4. *.themeͰϓϦϓϩηεؔ਺Λ࢖༻ͯ͠ಡΈࠐΉɻ ࿅श໰୊2 2
42. ʮarticleʯίϯςϯπλΠϓͷΈʹ൓өͤ͞Δʹ͸ɺͲͷςϯϓϨʔτϑΝΠϧΛΦʔ όʔϥΠυ͢Δ΂͖Ͱ͔͢ʁ 1. node.html.twig 2. html.html.twig 3. node--article.html.twig 4. node--2.html.twig 5. node--article--teaser.html.twig ࿅श໰୊3
43. ʮarticleʯίϯςϯπλΠϓͷΈʹ൓өͤ͞Δʹ͸ɺͲͷςϯϓϨʔτϑΝΠϧΛΦʔ όʔϥΠυ͢Δ΂͖Ͱ͔͢ʁ 1. node.html.twig 2. html.html.twig 3. node--article.html.twig 4. node--2.html.twig 5. node--article--teaser.html.twig ࿅श໰୊3 3
44. ΧελϜςʔϚͰDrupal͕༻ҙ͢ΔσϑΥϧτϦʔδϣϯ͕࢖༻͞ΕΔͷ͸ͲΜͳ৔໘Ͱ͔͢ɻ 1. *.info.ymlʹϦʔδϣϯ͕ఆٛ͞Ε͍ͯͳ͍৔߹ɻ 2. *.info.ymlͷbase themeΩʔͷ஋͕falseͷ৔߹ɻ 3. *.info.ymlͷbase themeΩʔʹ೚ҙͷϕʔεςʔϚ͕ࢦఆ͞Ε͍ͯΔ৔߹ɻ 4. *.info.ymlͷregionsΩʔʹtrueΛࢦఆͨ͠৔߹ɻ 5. ৗʹσϑΥϧτϦʔδϣϯ͕࢖༻͞ΕΔɻ 6. Drupal؅ཧը໘ͷςʔϚݻ༗ͷઃఆϖʔδͷઃఆ߲໨ͰɺʮσϑΥϧτϦʔδϣϯΛ࢖༻ ͢ΔʯʹνΣοΫ͕ೖ͍ͬͯΔ৔߹ɻ ࿅श໰୊4
45. ΧελϜςʔϚͰDrupal͕༻ҙ͢ΔσϑΥϧτϦʔδϣϯ͕࢖༻͞ΕΔͷ͸ͲΜͳ৔໘Ͱ͔͢ɻ 1. *.info.ymlʹϦʔδϣϯ͕ఆٛ͞Ε͍ͯͳ͍৔߹ɻ 2. *.info.ymlͷbase themeΩʔͷ஋͕falseͷ৔߹ɻ 3. *.info.ymlͷbase themeΩʔʹ೚ҙͷϕʔεςʔϚ͕ࢦఆ͞Ε͍ͯΔ৔߹ɻ 4. *.info.ymlͷregionsΩʔʹtrueΛࢦఆͨ͠৔߹ɻ 5. ৗʹσϑΥϧτϦʔδϣϯ͕࢖༻͞ΕΔɻ 6. Drupal؅ཧը໘ͷςʔϚݻ༗ͷઃఆϖʔδͷઃఆ߲໨ͰɺʮσϑΥϧτϦʔδϣϯΛ࢖༻ ͢ΔʯʹνΣοΫ͕ೖ͍ͬͯΔ৔߹ɻ ࿅श໰୊4 1
46. ຊ೔ͷΞδΣϯμ͸ऴྃ
47. ΞδΣϯμ 1. ΧελϜςʔϚΛ࡞Ζ͏ 2. *.info.ymlϑΝΠϧͷ࡞੒ 3. CSS/JSϑΝΠϧΛ௥Ճ͠Α͏ 4. ςϯϓϨʔτϑΝΠϧΛ࡞੒͠Α͏ 5. ςʔϚʹϦʔδϣϯΛఆٛ͠Α͏ 6. ࿅श໰୊