Druapl テーマ開発入門講座 第6回 アセットライブラリ

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

Transcript

1. ୈ6ճ ΞηοτϥΠϒϥϦ Drupal ςʔϚ ։ൃೖ໳ߨ࠲
2. Drupal ςʔϚ։ൃೖ໳ߨ࠲γϦʔζ – Drupalʹ͓͚ΔʮςʔϚʯͱ͸ɺWebαΠτͷݟͨ໨Λ୲͏ػೳͰ͢ɻຊ΢ΣϏφʔγϦʔ ζͰ͸ɺDrupalͷςʔϚ։ൃʹؔ͢Δجૅ஌ࣝΛղઆ͠·͢ɻ – DrupalͷϑϩϯτΤϯυपΓʹ͍ͭͯମܥతʹֶͼ͍ͨํɺࣗ෼ͰΧελϜςʔϚΛ࡞Ε ΔΑ͏ʹͳΓ͍ͨํɺΞΫΠΞೝఆσϕϩούʔࢼݧΛ໨ࢦ͢ํʹ͓͢͢ΊͰ͢ɻ – DrupalΛҰ௨Γૢ࡞ͨ͜͠ͱ͕͋ΔํΛର৅ͱ͍ͯ͠·͢ɻ·ͩDrupalΛ৮ͬͨ͜ͱ͕ແ ͍ํ͸ɺॳ৺ऀ޲͚DrupalνϡʔτϦΞϧಈըʢ೔ຊޠʣΛઌʹݟ͓ͯ͘ͱΑΓཧղ͕ਂ ·Γ·͢ɻ
3. 1. ΞηοτϥΠϒϥϦͱ͸ 2. ΞηοτϥΠϒϥϦΛఆٛ͢Δ 3. ͞·͟·ͳఆٛํ๏ 4. ΞηοτϥΠϒϥϦΛಡΈࠐΉ 5. ϥΠϒϥϦͷΦʔόʔϥΠυͱ֦ு 6. PHPͷ஋ΛJavaScriptͰ࢖༻͢Δ 7. ࿅श໰୊ ΞδΣϯμ
4. ΞηοτϥΠϒϥϦͱ͸
5. ΞηοτϥΠϒϥϦͱ͸ – ΞηοτϥΠϒϥϦͱ͸ɺCSSϑΝΠϧ΍JavaScriptϑΝΠϧΛͻͱ·ͱΊ ʹͨ͠΋ͷͰ͢ɻ – DrupalͰ͸ςϯϓϨʔτʹCSS΍JSͷURLΛຒΊࠐΉͷͰ͸ͳ͘ɺΞηοτ ϥΠϒϥϦΛհͯ͠Drupalʹ఻͑·͢ɻ – ͜ΕʹΑΓɺγεςϜ಺෦ͰDrupal͕CSSͱJSͷѹॖ΍Ωϟογϡɺϩʔυ ͢Δॱ൪ͷࢦఆɺಛఆͷϖʔδͷΈͰಡΈࠐΉͳͲͷॲཧΛߦ͏͜ͱ͕Ͱ͖ ·͢ɻ – ΞηοτϥΠϒϥϦ͸֤ςʔϚͷ *.libraries.yml ϑΝΠϧͰఆٛͰ͖·͢ɻ
6. ΞηοτϥΠϒϥϦΛಡΈࠐΉͨΊͷखॱ 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
7. ΞηοτϥΠϒϥϦΛఆٛ͢Δ
8. γϯϓϧͳྫ global-styling: version: 1.x css: theme: css/styles.css: {} global-scripts: version: 1.x js: js/script.js: {} ςʔϚσΟϨΫτϦ௚Լʹ*.libraries.yml ϑΝΠϧΛ࡞੒͠ɺΞηοτϥΠϒϥϦΛఆٛ͠·͢ɻ͜ ͷྫͰ͸زͭͷϥΠϒϥϦ͕ఆٛ͞Ε͍ͯΔͰ͠ΐ͏ʁ
9. γϯϓϧͳྫ global-styling: version: 1.x css: theme: css/styles.css: {} global-scripts: version: 1.x js: js/script.js: {} Aɿglobal-styling ͱ global-scripts ͷ2ͭͷϥΠϒϥϦ͕ఆٛ͞Ε͍ͯΔ͜ͱ͕Θ͔Γ·͢ɻ͜ͷఆٛ͞Εͨϥ ΠϒϥϦΛ࢖༻ͯ͠ɺαΠτͷ͞·͟·ͳ৔ॴͰಡΈࠐΉ͜ͱ͕Ͱ͖·͢ɻ
10. ࢀߟ) 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ͷॱ൪ͰಡΈࠐΉΑ͏ʹͳ͍ͬͯ·͢ɻ
11. ԋश ίΞͷ *.libraries.yml Λ೷͍ͯΈΑ͏ – ͲΜͳׅΓͰϥΠϒϥϦ͕ఆٛ͞Ε͍ͯΔ͔ – ͲΜͳΦϓγϣϯ͕࢖༻͞Ε͍ͯΔ͔
12. ͞·͟·ͳఆٛํ๏
13. CSS/JSΛఆٛ͢Δࡍʹར༻ՄೳͳΦϓγϣϯʢ̍ʣ ྫɿΞηοτ͕طʹॖখ͞Ε͍ͯΔ͔ʢσϑΥϧτ͸falseʣ ྫɿΞηοτͷιʔεΛࢦఆ͢ΔʢσϑΥϧτ͸fileʣ assets/vendor/ckeditor5/alignment/alignment.js: { minified: true } http://example.com/script.js: { type: external }
14. CSS/JSΛఆٛ͢Δࡍʹར༻ՄೳͳΦϓγϣϯʢ̎ʣ ྫɿଐੑΛ௥Ճ͢Δ ྫɿଞͷΞηοτͱ૬ରతͳॱংΛௐ੔͢Δ js/editor.formattedTextEditor.js: { attributes: { defer: true } } css/components/user.css: { weight: -10 } <script src="/js/editor.formattedTextEditor.js?v=9.3.8" defer></script>
15. CSS/JSΛఆٛ͢Δࡍʹར༻ՄೳͳΦϓγϣϯʢ̏ʣ ྫɿϝσΟΞλΠϓΛࢦఆ͢ΔʢCSSͷΈࢦఆՄೳʣ ྫɿΞηοτΛू໿͢Δඞཁ͕͋Δ͔Ͳ͏͔ʢσϑΥϧτ͸trueʣ css/print.css: { media: print } css/components/messages.css: { preprocess: false }
16. CSSͱJSϑΝΠϧͷू໿ [؀ڥઃఆ]ʼ[ύϑΥʔϚϯε]ʼ[ଳҬ෯࠷దԽ] ͷνΣοΫϘοΫεʹνΣο ΫΛೖΕɺߏ੒Λอଘ 
 ஫ҙ CSSͱJSϑΝΠϧΛू໿ͷର৅ͱ͢ΔͨΊʹ͸ɺϑΝΠϧΛςʔϚ·ͨ͸Ϟ δϡʔϧͷ *.libraries.yml Ͱఆٛ͠ɺಡΈࠐ·ͤΔඞཁ͕͋Γ·͢ɻςϯϓ Ϩʔτʹ௚઀ϑΝΠϧ΁ͷϦϯΫΛهड़͢Δͷ͸όουϓϥΫςΟεͰ͢ɻ ࢀߟ) CSSͱJSͷू໿ʹ͍ͭͯ DrupalͰ͸ଟ਺ͷCSSϑΝΠϧͱJSϑΝΠϧΛऔΓѻ͍·͢ɻ 
 ͜ΕΒ͸ू໿͢Δ͜ͱͰ1ͭͷʢ·ͨ͸গ਺ͷʣϑΝΠϧͱͳΓɺϦΫΤετճ਺Λ࡟ݮͰ͖·͢ɻ ू໿લ 
 ໿100ϑΝΠϧ ू໿ޙ 
 3ϑΝΠϧ
17. ґଘؔ܎ͷએݴ ϥΠϒϥϦʹ͸ґଘؔ܎ΛએݴͰ͖·͢ɻdependenciesΩʔͰґଘ͢Δϥ ΠϒϥϦͷΩʔͷϦετΛࢦఆ͠·͢ɻ maintenance_page: version: VERSION css: theme: css/maintenance-page.css: {} dependencies: - system/maintenance - bartik/global-styling
18. DrupalίΞͰ༻ҙ͞Ε͍ͯΔΞηοτ jQuery΍normalize.cssͳͲɺίΞଆͰ༻ҙ͞Ε͍ͯΔΞηοτ͕͋Γ ·͢ɻcore/assets/vendor σΟϨΫτϦʹશͯͷҰཡ͕͋Γ·͢ɻඞཁ ʹԠͯ͡ґଘؔ܎Λએݴ͠·͢ɻ tour: version: VERSION js: js/tour.js: {} dependencies: - core/jquery
19. JavaScript͕ಡΈࠐ·ΕΔ৔ॴ σϑΥϧτͰ͸ɺ͢΂ͯͷJSΞηοτ͸ϑολͰಡΈࠐ·Ε·͢ɻheaderϓϩύςΟΛ༻͍ͯϔομͰಡΈࠐ ·ͤΔ͜ͱ͕Ͱ͖·͢ɻʢ͜ͷํ๏Ͱએݴ͞ΕͨϥΠϒϥϦͷ௚઀·ͨ͸ؒ઀తͳґଘؔ܎΋ɺࣗಈతʹϔο μ͔Βϩʔυ͞Ε·͢ɻʣ js-header: header: true js: header.js: {} js-footer: js: footer.js: {} <html> <head> <js-placeholder token="{{ placeholder_token }}"> </head> <body> {{ page_top }} {{ page }} {{ page_bottom }} <js-bottom-placeholder token="{{ placeholder_token }}"> </body> </html> html.html.twig marucha.libraries.yml
20. ֎෦ΞηοτͷಡΈࠐΈ type: external Ͱ֎෦ϥΠϒϥϦͰ͋Δ͜ͱΛએݴͰ͖·͢ɻఆٛʹ֎෦ϥΠ ϒϥϦʹؔ͢Δ৘ใΛؚΊΔ͜ͱ΋͓קΊ͠·͢ɻ angular.angularjs: remote: https://github.com/angular version: 1.4.4 license: name: MIT url: https://github.com/angular/angular.js/blob/master/LICENSE gpl-compatible: true js: https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js: { type: external, minified: true }
21. ΞηοτϥΠϒϥϦΛಡΈࠐΉ
22. ϥΠϒϥϦͷಡΈࠐΈํ৭ʑ *.libraries.ymlͰΞηοτϥΠϒϥϦΛఆ͚ٛͨͩ͠Ͱ͸ɺͦΕΒͷϥΠ ϒϥϦ͸DrupalαΠτͰಡΈࠐ·Ε·ͤΜɻDrupalͰ͸࣍ͷ3ͭͷํ๏ ͰϥΠϒϥϦΛಡΈࠐΉ͜ͱ͕Ͱ͖·͢ɻ – શͯͷϖʔδͰಡΈࠐΉ - *.info.ymlʹهड़ – ಛఆͷTwigςϯϓϨʔτͰಡΈࠐΉ - *.html.twigʹهड़ – ಛఆͷϒϩοΫɺϊʔυͰಡΈࠐΉ - *.themeʹهड़
23. શͯͷϖʔδͰಡΈࠐΉ - *.info.ymlʹهड़ name: Marucha type: theme description: '·Δ஡ͷͨΊͷΧελϜςʔϚ' core_version_requirement: ^8 || ^9 base theme: false libraries: - marucha/global-styling - marucha/global-scripts *.info.ymlͷlibrariesΩʔͰΞηοτϥΠϒϥϦΛࢦఆ͢ΔͱɺαΠτશମͰಡΈ ࠐ·Ε·͢ɻ
24. ಛఆͷTwigςϯϓϨʔτͰಡΈࠐΉ - *.html.twigʹهड़ ςϯϓϨʔτϑΝΠϧͷதͰattach_libraryؔ਺Λ࢖༻͢Δ͜ͱͰɺ ςϯϓϨʔτ͕ಡΈࠐ·ΕͨϖʔδͷΈϥΠϒϥϦΛಡΈࠐΉ͜ ͱ͕Ͱ͖·͢ɻ {{ attach_library('marucha/global-styling') }}
25. ಛఆͷϒϩοΫɺϊʔυͰಡΈࠐΉ - *.themeʹهड़ ϖʔδ಺ͷಛఆͷϒϩοΫ͕දࣔ͞Ε͍ͯΔ࣌ͳͲϖʔδͷαϒηοτ ͰϥΠϒϥϦΛಡΈࠐΈ͍ͨ৔߹΍ɺϩδοΫͰϥΠϒϥϦΛग़͠෼͚ ͍ͨ৔߹͸ɺ*.themeϑΝΠϧʹϑοΫؔ਺Λ࣮૷͢Δ͜ͱͰߦ͑·͢ɻ function umami_preprocess_html(&$variables) { if (!empty($variables['page']['sidebar'])) { $variables['#attached']['library'][] = 'umami/two-columns'; } } umami.theme
26. ϥΠϒϥϦͷΦʔόʔϥΠυͱ֦ு
27. ϥΠϒϥϦΛΦʔόʔϥΠυ͢Δ *.info.ymlͰ libraries-override ΩʔΛ ࢖༻ͯ͠ɺίΞ΍ϞδϡʔϧͰఏڙ ͞ΕΔϥΠϒϥϦΛΦʔόʔϥΠυ Ͱ͖·͢ɻ libraries-override: # ϥΠϒϥϦશମΛஔ͖׵͑Δ core/drupal.collapse: marucha/collapse # ϑΝΠϧΛผͷϑΝΠϧʹஔ͖׵͑Δ subtheme/library: css: theme: css/layout.css: css/marucha-layout.css # ϑΝΠϧΛ࡟আ͢Δ drupal/dialog: css: theme: dialog.theme.css: false # ϥΠϒϥϦશମΛ࡟আ͢Δ core/modernizr: false marucha.info.yml
28. ϥΠϒϥϦΛ֦ு͢Δ *.info.ymlͰ libraries-extend ΩʔΛ࢖༻ͯ͠ɺίΞ΍ϞδϡʔϧͰ ఏڙ͞ΕΔϥΠϒϥϦʹಠࣗͷมߋΛՃ֦͑ͯுͰ͖·͢ɻ libraries-extend: core/drupal.dialog: - bartik/classy.dialog core/drupal.dropbutton: - bartik/classy.dropbutton core/drupal.progress: - bartik/classy.progress marucha.info.yml
29. PHPͷ஋ΛJavaScriptͰ࢖༻͢Δ
30. drupalSettingsͱ͸ PHPͰॲཧ͞Εͨಈతͳ஋ΛJavaScriptͰ࢖༻͍ͨ͠৔߹ɺdrupalSettingsΛ࢖༻ ͯ͠ߦ͏͜ͱ͕Ͱ͖·͢ɻdrupalSettings͸ίΞͷΞηοτϥΠϒϥϦͷதͰఆ ٛ͞Ε͍ͯ·͢ɻ
31. drupalSettingsΛ࢖༻͢ΔྲྀΕ ᶃ PHPͷ஋Λ࢖༻͍ͨ͠JavaScriptϑΝΠϧΛΞηοτϥΠϒϥϦʹఆٛ ͢Δ cool-slider: version: 1.x js: js/cool-slider.js: {} dependencies: - core/jquery - core/drupalSettings JavaSriptϑΝΠϧͰ drupalSettingsΛར༻͢Δ ͨΊʹґଘؔ܎ͷએݴ͕ ඞཁɻ marucha.libraries.yml
32. drupalSettingsΛ࢖༻͢ΔྲྀΕ ᶄ ϑοΫؔ਺ͰϥΠϒϥϦΛಡΈࠐΉɻdrupalSettingsΦϒδΣΫτʹ JavaScriptͰ࢖༻͍ͨ͠஋Λ୅ೖ͢Δɻ function marucha_page_attachments_alter(&$page) { $page['#attached']['library'][] = 'marucha/cool-slider'; $page['#attached']['drupalSettings']['marucha']['coolSlider']['foo'] = 'bar'; } marucha.theme
33. drupalSettingsΛ࢖༻͢ΔྲྀΕ ᶅ JavaScriptϑΝΠϧͰ஋ʹΞΫηε͢Δɻ (function ($, Drupal, drupalSettings) { 'use strict'; Drupal.behaviors.mybehavior = { attach: function (context, settings) { console.log(settings.marucha.coolSlider.foo); } }; })(jQuery, Drupal, drupalSettings); cool-slider.js
34. ࿅श໰୊
35. ΧελϜςʔϚ಺ͰjQueryΛಡΈࠐΈ͍ͨ৔߹ɺͲͷΑ͏ʹߦ͏ͷ͕ྑ͍Ͱ͠ΐ ͏͔ʁ 1. html.html.twig ϑΝΠϧͷதͰɺ<script>λάΛ༻͍ͯಡΈࠐ·ͤΔɻ 2. *.libraries.yml ϑΝΠϧͷதͰɺϥΠϒϥϦͷґଘؔ܎ͱͯ͠ಡΈࠐ·ͤΔɻ 3. DrupalίΞ͔ΒCDN͕ఏڙ͞Ε͍ͯΔͷͰɺଞͷ֎෦Ξηοτͱಉ༷ʹಡΈ ࠐ·ͤΔɻ 4. DrupalͰ͸σϑΥϧτͰjQuery͕ΧελϜςʔϚͰར༻Ͱ͖ΔΑ͏ʹͳͬͯ ͍ΔͨΊɺԿ΋͠ͳͯ͘ྑ͍ɻ ࿅श໰୊1
36. ΧελϜςʔϚ಺ͰjQueryΛಡΈࠐΈ͍ͨ৔߹ɺͲͷΑ͏ʹߦ͏ͷ͕ྑ͍Ͱ͠ΐ ͏͔ʁ 1. html.html.twig ϑΝΠϧͷதͰɺ<script>λάΛ༻͍ͯಡΈࠐ·ͤΔɻ 2. *.libraries.yml ϑΝΠϧͷதͰɺϥΠϒϥϦͷґଘؔ܎ͱͯ͠ಡΈࠐ·ͤΔɻ 3. DrupalίΞ͔ΒCDN͕ఏڙ͞Ε͍ͯΔͷͰɺଞͷ֎෦Ξηοτͱಉ༷ʹಡΈ ࠐ·ͤΔɻ 4. DrupalͰ͸σϑΥϧτͰjQuery͕ΧελϜςʔϚͰར༻Ͱ͖ΔΑ͏ʹͳͬͯ ͍ΔͨΊɺԿ΋͠ͳͯ͘ྑ͍ɻ ࿅श໰୊1 ਖ਼ղɿ2
37. ͋ΔJavaScriptϑΝΠϧΛBodyͷ࠷Լ෦ͰಡΈࠐΈ͍ͨͰ͢ɻͲ͏͢Ε͹ྑ͍Ͱ͢ ͔ʁ 1. *.libraries.ymlͰର৅ͷJavaScriptϑΝΠϧʹ { head: false } Λࢦఆ͢Δɻ 2. *.libraries.ymlͰର৅ͷΞηοτϥΠϒϥϦͷheaderϓϩύςΟʹ true Λࢦఆ ͢Δɻ 3. html.html.twigͰattach_libraryؔ਺Λ࢖༻ͯ͠ಡΈࠐΉɻ 4. Drupal͸σϑΥϧτͰBodyͷด͡λά௚ޙͰಡΈࠐΉΑ͏ʹͳ͍ͬͯΔͷ Ͱɺಛʹઃఆ͸ඞཁͳ͍ɻ ࿅श໰୊2
38. ͋ΔJavaScriptϑΝΠϧΛBodyͷ࠷Լ෦ͰಡΈࠐΈ͍ͨͰ͢ɻͲ͏͢Ε͹ྑ͍Ͱ͢ ͔ʁ 1. *.libraries.ymlͰର৅ͷJavaScriptϑΝΠϧʹ { head: false } Λࢦఆ͢Δɻ 2. *.libraries.ymlͰର৅ͷΞηοτϥΠϒϥϦͷheaderϓϩύςΟʹ true Λࢦఆ ͢Δɻ 3. html.html.twigͰattach_libraryؔ਺Λ࢖༻ͯ͠ಡΈࠐΉɻ 4. Drupal͸σϑΥϧτͰBodyͷด͡λά௚ޙͰಡΈࠐΉΑ͏ʹͳ͍ͬͯΔͷ Ͱɺಛʹઃఆ͸ඞཁͳ͍ɻ ࿅श໰୊2 ਖ਼ղɿ4
39. ຊ೔ͷΞδΣϯμ͸ऴྃ
40. 1. ΞηοτϥΠϒϥϦͱ͸ 2. ΞηοτϥΠϒϥϦΛఆٛ͢Δ 3. ͞·͟·ͳఆٛํ๏ 4. ΞηοτϥΠϒϥϦΛಡΈࠐΉ 5. ϥΠϒϥϦͷΦʔόʔϥΠυͱ֦ு 6. PHPͷ஋ΛJavaScriptͰ࢖༻͢Δ 7. ࿅श໰୊ ΞδΣϯμ