Drupal テーマ開発入門講座 第4回 テンプレートのカスタマイズ

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

Transcript

1. ୈ4ճ ςϯϓϨʔτͷΧελϚΠζ Drupal ςʔϚ ։ൃೖ໳ߨ࠲
2. Drupal ςʔϚ։ൃೖ໳ߨ࠲γϦʔζ – Drupalʹ͓͚ΔʮςʔϚʯͱ͸ɺWebαΠτͷݟͨ໨Λ୲͏ػೳͰ͢ɻຊ΢ΣϏφʔγ ϦʔζͰ͸ɺDrupalͷςʔϚ։ൃʹؔ͢Δجૅ஌ࣝΛղઆ͠·͢ɻ – DrupalͷϑϩϯτΤϯυपΓʹ͍ͭͯମܥతʹֶͼ͍ͨํɺࣗ෼ͰΧελϜςʔϚΛ࡞ ΕΔΑ͏ʹͳΓ͍ͨํɺΞΫΠΞೝఆσϕϩούʔࢼݧΛ໨ࢦ͢ํʹ͓͢͢ΊͰ͢ɻ – DrupalΛҰ௨Γૢ࡞ͨ͜͠ͱ͕͋ΔํΛର৅ͱ͍ͯ͠·͢ɻ·ͩDrupalΛ৮ͬͨ͜ͱ͕ ແ͍ํ͸ɺॳ৺ऀ޲͚DrupalνϡʔτϦΞϧಈըʢ೔ຊޠʣΛઌʹݟ͓ͯ͘ͱΑΓཧղ ͕ਂ·Γ·͢ɻ
3. 1. Twigͷ֓ཁ 2. جຊతͳTwigߏจ 3. ؔ਺ 4. ϑΟϧλ 5. ςϯϓϨʔτͷσόοά 6. ϓϦϓϩηεؔ਺Λ࢖༻ͨ͠ม਺ͷ௥Ճ 7. ςϯϓϨʔτͷܧঝ 8. ࿅श໰୊ ΞδΣϯμ
4. Twigͷ֓ཁ
5. – Φʔϓϯιʔε੡ɾPHP༻ͷςϯϓϨʔτΤϯδϯͰ͢ɻ – ެࣜαΠτɿhttps://twig.symfony.com – SymfonyϑϨʔϜϫʔΫͷσϑΥϧτͷςϯϓϨʔτΤϯδ ϯͰ͢ɻ – DrupalͰ͸ɺόʔδϣϯ8ͰσϑΥϧτͷςϯϓϨʔτΤϯ δϯʹTwig͕࠾༻͞Ε·ͨ͠ɻ – Twigͷݱࡏͷ࠷৽όʔδϣϯ͸ 3.4.1 Ͱ͢ɻ – Drupal 9Ͱ͸ Twig 2.x ͕࠾༻͞Ε͍ͯ·͢ɻ Twigͱ͸
6. ࢀߟ) ςϯϓϨʔτΤϯδϯͱ͸ – ςϯϓϨʔτͱݺ͹ΕΔ਽ܗͱɺ͋ΔσʔλϞσϧͰදݱ͞ΕΔೖྗσʔλΛ߹੒͠ɺ੒ՌυΩϡϝϯτΛ ग़ྗ͢Διϑτ΢ΣΞ - wikipedia
 – PHPք۾ͰΑ͘ར༻͞ΕΔςϯϓϨʔτΤϯδϯ – Twig (Symfonyඪ४ ) – Blade (Laravelඪ४ ) – Smarty
 – ͳͥςϯϓϨʔτΤϯδϯΛ࢖༻͢Δͷʁ – ViewͱϩδοΫͷ෼཭ – XSS߈ܸͷճආʢࣗಈΤεέʔϓॲཧʣ - શͯͷHTMLΛTwigςϯϓϨʔτͰग़ྗ͢Δ͜ͱ͕๬·͍͠ Ͱ͢ɻWriting secure code for Drupal ࢀর
 – Drupal 8Ҏલ(ver 4.7 ~ 7.x)Ͱ͸ʮPHPTemplateʯ͕ςϯϓϨʔτΤϯδϯͱͯ͠࠾༻͞Ε͍ͯ·ͨ͠ɻ
7. جຊతͳTwigߏจ
8. Twigͷ2ͭͷߏจ {{ ɹ}} …ʮԿ͔Λݴ͏ʯߏจ {% %} …ʮԿ͔Λ͢Δʯߏจ Say Something Do Something https://symfonycasts.com/screencast/twig/basics#the-2-syntaxes-of-twig- code-code-and-code-code
9. ม਺ͷग़ྗ ྫɿϔομʔྖҬͷग़ྗ ྫɿλΠτϧม਺ͷग़ྗ {{ page.header }} <h2>{{ title }}</h2>
10. ྫɿϥΠϒϥϦͷΞλον ྫɿΫϥεͷ௥Ճ ؔ਺ͷ࣮ߦ {{ attach_library('mytheme/global-styling') }} <div{{ create_attribute({'class': ['apple', 'orange']}) }}>
11. ྫɿfooม਺Λఆٛ͢Δ ྫɿ഑ྻΛఆٛ͢Δ ม਺ͷఆٛ {% set foo = 'foo' %} {% set classes = [ 'js-form-managed-file', 'form-managed-file', ] %}
12. ੍ޚߏ଄ ྫɿifจ ྫɿforจ {% if page.footer %} <footer role="contentinfo"> {{ page.footer }} </footer> {% endif %} <span{{ attributes }}> {%- for item in items -%} {{ item.content }} {%- endfor -%} </span>
13. ίϝϯτΞ΢τ ྫɿ1ߦͷίϝϯτΞ΢τ ྫɿෳ਺ߦͷίϝϯτΞ΢τ {# ͜Ε͸ίϝϯτͰ͢ #} {# /** * ෳ਺ߦͷ * ίϝϯτจ * Ͱ͢ɻ */ #}
14. ؔ਺
15. Twigͷ૊ΈࠐΈؔ਺ͷྫ Twigຊମʹศརͳؔ਺͕༻ҙ͞Ε͍ͯ·͢ɻ ྫɿrandomؔ਺ ྫɿdumpؔ਺ {{ random('ABC') }} {# AɺBɺCͷ͍ͣΕ͔͕ग़ྗ #} {{ dump(user) }} {# userม਺ʹؔ͢Δ৘ใΛμϯϓ #} https://twig.symfony.com/doc/2.x/functions/index.html
16. Drupalݻ༗ͷؔ਺ͷྫ DrupalίΞͰ༻ҙ͞Ε͍ͯΔศརͳؔ਺ͷҰྫͰ͢ɻ ྫɿattach_library($library ) ྫɿcreate_attribute($attributes ) ྫɿpath($name, $parameters, $options) {{ attach_library('classy/node') }} <div{{ create_attribute({'class': ['apple', 'orange']}) }}>Fruit</div> {# <div class="apple orange">Fruit</div> ͱग़ྗ͞ΕΔ #} <a href="{{ path('user.register') }}">Register</a> {# <a href="/user/register">Register</a> ͱग़ྗ͞ΕΔ #} https://www.drupal.org/docs/theming-drupal/twig-in-drupal/functions-in-twig-templates
17. ϑΟϧλ
18. – ϑΟϧλػೳΛ࢖͏͜ͱͰɺ஋ΛςϯϓϨʔτ্Ͱల։ʢදࣔʣ͢Δ ࡍʹදࣔํ๏ΛมߋͰ͖·͢ɻ – ϑΟϧλΛ͔͚͍ͨ஋ͷޙΖʹύΠϓจࣈ | Ͱ۠੾ͬͯϑΟϧλ໊Λ ࢦఆ͠·͢ɻ
 {{ title|capitalize }} – ෳ਺ͷϑΟϧλΛ࿈࠯Ͱ͖·͢ɻ
 {{ user.name|lower|escape }} TwigͷϑΟϧλͱ͸
19. TwigຊମʹศརͳϑΟϧλ͕༻ҙ͞Ε͍ͯ·͢ɻ ྫɿupperϑΟϧλ ྫɿlastϑΟϧλ ྫɿdefaultϑΟϧλ Twigͷ૊ΈࠐΈϑΟϧλͷྫ {{ 'welcome'|upper }} {# WELCOME ͱେจࣈͰग़ྗ͞Ε·͢ #} {{ [1, 2, 3, 4]|last }} {# 4 ͱग़ྗ͞Ε·͢ #} {{ var|default('var͸ະఆٛͰ͢') }} {# var͕ະఆٛ·ͨ͸ۭനͷ৔߹ɺׅހ಺ͷจࣈྻ͕ग़ྗ #} https://twig.symfony.com/doc/2.x/filters/index.html
20. Drupalݻ༗ͷϑΟϧλͷྫ DrupalίΞͰ༻ҙ͞Ε͍ͯΔศརͳϑΟϧλͷҰྫͰ͢ɻ ྫɿtransϑΟϧλʢtϑΟϧλͱ΋ݺ͹ΕΔʣ tϑΟϧλ͕࢖༻͞Εͨจࣈྻ͸
 ؅ཧը໘ͷʮϢʔβʔΠϯλʔ
 ϑΣʔεͷ຋༁ʯϖʔδ͔Β
 ຋༁͕ՄೳʹͳΓ·͢ɻ <a href="{{ url('<front>') }}" title="{{ 'Home'|t }}"></a>
21. Drupalݻ༗ͷϑΟϧλͷྫ ྫɿsafe_joinϑΟϧλ ྫɿformat_dateϑΟϧλ <p>{{ items|safe_join(", ") }}</p> {# ෳ਺ͷจࣈྻΛ҆શʹ݁߹ #} {{ created|format_date('short') }}{# DrupalͷϑΥʔϚοτܗࣜͰग़ྗ #}
22. ςϯϓϨʔτͷσόοά
23. TwigͷσόοάΦϓγϣϯΛ༗ޮʹ͢Δ services.ymlϑΝΠϧͰ࣍ͷΦϓγϣϯ͕ར༻ՄೳͰ͢ɻ
 ※ຊ൪؀ڥͰ͸࢖༻͠ͳ͍Ͱ͍ͩ͘͞ɻ
 – debugɿtrueʹઃఆ͢ΔͱɺTwigΤϯδϯͰ༷ʑͳσόοάػೳ͕༗ޮԽ͞ΕΔ – auto_reloadɿtrueʹઃఆ͢Δͱɺιʔείʔυ͕มߋ͞ΕͨࡍʹશͯͷςϯϓϨʔτ͕ࣗಈతʹ࠶ίϯ ύΠϧ͞ΕΔ – cacheɿfalseʹઃఆ͢ΔͱɺςϯϓϨʔτ͕࢖༻͞ΕΔ౓ʹιʔε͔ΒςϯϓϨʔτ͕࠶ίϯύΠϧ͞Ε Δ parameters: twig.config: debug: true # σϑΥϧτ஋͸false auto_reload: true # σϑΥϧτ஋͸null cache: false # σϑΥϧτ஋͸true
24. ςϯϓϨʔτͰ࢖༻Մೳͳม਺ͷදࣔ ᶃdumpؔ਺Λ࢖༻͢Δ 
 
 
 {{ dump(url) }} {# in node.html.twig #} dumpؔ਺Ͱࢦఆ͠ ͨม਺ͷ஋͕ग़ྗ͞ ΕΔ
25. ςϯϓϨʔτͰ࢖༻Մೳͳม਺ͷදࣔ ᶄPHPͷσόοάπʔϧʮKintʯΛ࢖༻͢Δ ಋೖํ๏ – composerͰDevelϞδϡʔϧͱ kint(kint-php/kint)ΛΠϯετʔϧ – ༗ޮԽͨ͠DevelϞδϡʔϧͷઃఆ ը໘Ͱ
 ʮVariables DumperʯʹKintΛࢦఆ – ର৅ͷςϯϓϨʔτϑΝΠϧʹ {{ kint() }} ͱೖྗͯ͠࢖༻͢Δ
26. ςϯϓϨʔτͰ࢖༻Մೳͳม਺ͷදࣔ ᶅXdebug౳ͷPHPσόοΨΛ࢖༻͢Δ ಋೖํ๏ɿDocker+LandoͰ؆୯ɺDrupalϩʔΧϧ؀ڥͷߏஙํ๏ʢΞΫΠΞϒϩάʣ
27. ϓϦϓϩηεؔ਺Λ࢖༻ͨ͠ ม਺ͷ௥Ճ
28. – ϓϦϓϩηεؔ਺(Preprocess functions)ͱ͸ɺςʔϚͱϞδϡʔϧ͕ TwigςϯϓϨʔτϑΝΠϧʹ౉͞ΕΔม਺ΛมߋͰ͖ΔΑ͏ʹ͢ΔPHP ؔ਺Ͱ͢ɻ – *.themeϑΝΠϧʹ࣍ͷؔ਺Λهड़͍͖ͯ͠·͢ɻ – THEME_preprocess(&$variables, $hook) 
 ςϯϓϨʔτͱ࣮ͯ͠૷͞ΕͨશͯͷςʔϚϑοΫͰݺͼग़͞ΕΔ – THEME_preprocess_HOOK(&$variables) 
 HOOKͰࢦఆͨ͠ςʔϚϑοΫͰݺͼग़͞ΕΔ ϓϦϓϩηεؔ਺ͱ͸
29. ϑοΫ໊ͷ໋໊نଇ – HOOKʹ෇͚Δ໊લ͸TwigςϯϓϨʔτͷsuggestionsʹै͍·͢ɻϋΠϑϯ -- ΛΞϯμʔείΞ __ ʹஔ͖׵͑·͢ɻ
 
 
 
 
 
 
 – ྫɿnode--article.html.twig ͷม਺Λॲཧ͢Δ৔߹ – THEME_preprocess_node__42() 
 ࠷΋۩ମతͳόʔδϣϯɻϊʔυID͕42ͷϊʔυʹରͯ͠ͷΈݺͼग़͞ΕΔɻ – THEME_preprocess_node__article() 
 શͯͷهࣄίϯςϯπλΠϓʹରͯ͠ݺͼग़͞ΕΔɻ – THEME_preprocess_node() 
 શͯͷϊʔυʹରͯ͠ݺͼग़͞ΕΔɻ
30. ϓϦϓϩηεؔ਺Λ࢖༻ͯ͠ςϯϓϨʔτʹม਺Λ௥Ճ͠Α͏ – *.themeϑΝΠϧͷ࡞੒ – ϑοΫ໊ͷܾఆ – *.themeϑΝΠϧʹؔ਺Λ௥Ճ – ϓϦϓϩηεؔ਺Ͱఆٛͨ͠ม਺ΛɺςϯϓϨʔτ಺Ͱ࢖༻͢Δ ԋश ԋशͰ࢖༻͢Διʔείʔυ͸Githubʹ͋Γ·͢ɻ https://github.com/hmaruyama/my-drupal9-theming/tree/vol4
31. Twig Tewak Ϟδϡʔϧ – ศརͳTwigؔ਺΍ϑΟϧλΛఏڙ͢ΔίϯτϦϏϡʔ τϞδϡʔϧ – https://www.drupal.org/project/twig_tweak ࢀߟ) TwigपΓͰΑ͘ར༻͞ΕΔϞδϡʔϧ
32. ςϯϓϨʔτͷܧঝ
33. ςϯϓϨʔτΛ֦ு͢Δ – TwigͷextendsλάΛ࢖༻ͯ͠ɺςϯϓϨʔτؒʹ਌ࢠؔ܎Λ࣋ͨͤͯɺςϯϓϨʔτͷίʔυͷ ॏෳΛݮΒ͢͜ͱ͕Ͱ͖·͢ɻ – ਌ςϯϓϨʔτͰ͸ block λάΛ࢖༻ͯ͠ࢠςϯϓϨʔτͰ্ॻ͖Ͱ͖ΔྖҬΛఆٛ͠·͢ɻ – ࢠςϯϓϨʔτͰ͸ extends λάͰ਌ςϯϓϨʔτΛࢦఆ͠ɺ਌ςϯϓϨʔτͰ༻ҙ͞Εͨϒϩο ΫྖҬΛ࢖༻্ͯ͠ॻ͖͠·͢ɻ {# node.html.twig #} {# ਌ςϯϓϨʔτ #} <div{{ attributes }}> {% block content %} <p>Hello</p> {% endblock %} </div> {# node--article.html.twig #} {# ࢠςϯϓϨʔτ #} {% extends "node.html.twig" %} {% block content %} <p>Overide!</p> {% endblock %} blockλάͰ ্ॻ͖Ͱ͖Δ ྖҬΛఆٛ extendsλάͰ਌ͱͳΔ ςϯϓϨʔτΛࢦఆ ਌ςϯϓϨʔτͰ༻ҙ ͞ΕͨྖҬΛblockλά Ͱࢦఆ্ͯ͠ॻ͖͢Δ https://twig.symfony.com/doc/2.x/tags/extends.html https://www.drupal.org/docs/theming-drupal/twig-in-drupal/extending-templates
34. ଞͷςϯϓϨʔτΛؚΊΔ – TwigͷincludeλάΛ࢖༻ͯ͠ɺςϯϓϨʔτʹଞͷςϯϓϨʔτΛؚΊ Δ͜ͱ͕Ͱ͖·͢ɻ {# field-ui-table.html.twig #} <div id="field-display-overview-wrapper"> {% include 'table.html.twig' %} </div> includeλάͰૠೖ͍ͨ͠ςϯ ϓϨʔτϑΝΠϧ໊Λࢦఆ https://twig.symfony.com/doc/2.x/tags/include.html https://www.drupal.org/docs/8/theming-drupal-8/including-part-template
35. ࿅श໰୊
36. Twigʹ͍ͭͯͷਖ਼͍͠هड़Λબ୒͍ͯͩ͘͠͞ɻ 1. LaravelϑϨʔϜϫʔΫͷඪ४ςϯϓϨʔτΤϯδϯɻ 2. Drupal 9Ͱ͸Twig 2ܥόʔδϣϯʹґଘ͍ͯ͠Δɻ 3. Drupal 7͔ΒDrupalͷඪ४ςϯϓϨʔτΤϯδϯͱͯ͠࠾༻͞Ε͍ͯΔɻ ࿅श໰୊1
37. Twigʹ͍ͭͯͷਖ਼͍͠هड़Λબ୒͍ͯͩ͘͠͞ɻ 1. LaravelϑϨʔϜϫʔΫͷඪ४ςϯϓϨʔτΤϯδϯɻ 2. Drupal 9Ͱ͸Twig 2ܥόʔδϣϯʹґଘ͍ͯ͠Δɻ 3. Drupal 7͔ΒDrupalͷඪ४ςϯϓϨʔτΤϯδϯͱͯ͠࠾༻͞Ε͍ͯΔɻ ࿅श໰୊1 2
38. ࿅श໰୊2 શͯͷهࣄ(article)ίϯςϯπλΠϓͷϊʔυʹରͯ͠ɺςϯϓϨʔτͰ࢖ ༻Ͱ͖Δม਺Λ௥Ճ͍ͨ͠Ͱ͢ɻͲͷؔ਺Ͱ࣮૷͢Δͷ͕ྑ͍Ͱ͠ΐ͏͔ɻ 1. THEME_preprocess_node() Λ࣮૷͢Δɻ 2. THEME_preprocess_page__node() Λ࣮૷͢Δɻ 3. THEME_preprocess_article() Λ࣮૷͢Δɻ 4. THEME_preprocess_node__article() Λ࣮૷͢Δɻ
39. ࿅श໰୊2 શͯͷهࣄ(article)ίϯςϯπλΠϓͷϊʔυʹରͯ͠ɺςϯϓϨʔτͰ࢖ ༻Ͱ͖Δม਺Λ௥Ճ͍ͨ͠Ͱ͢ɻͲͷؔ਺Ͱ࣮૷͢Δͷ͕ྑ͍Ͱ͠ΐ͏͔ɻ 1. THEME_preprocess_node() Λ࣮૷͢Δɻ 2. THEME_preprocess_page__node() Λ࣮૷͢Δɻ 3. THEME_preprocess_article() Λ࣮૷͢Δɻ 4. THEME_preprocess_node__article() Λ࣮૷͢Δɻ 4
40. ຊ೔ͷΞδΣϯμ͸ऴྃ
41. 1. Twigͷ֓ཁ 2. جຊతͳTwigߏจ 3. ؔ਺ 4. ϑΟϧλ 5. ςϯϓϨʔτͷσόοά 6. ϓϦϓϩηεؔ਺Λ࢖༻ͨ͠ม਺ͷ௥Ճ 7. ςϯϓϨʔτͷܧঝ 8. ࿅श໰୊ ΞδΣϯμ