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

ୈ6ճ ΞηοτϥΠϒϥϦ Drupal ςʔϚ ։ൃೖ໳ߨ࠲

Drupal ςʔϚ։ൃೖ໳ߨ࠲γϦʔζ – Drupalʹ͓͚ΔʮςʔϚʯͱ͸ɺWebαΠτͷݟͨ໨Λ୲͏ػೳͰ͢ɻຊ΢ΣϏφʔγϦʔ ζͰ͸ɺDrupalͷςʔϚ։ൃʹؔ͢Δجૅ஌ࣝΛղઆ͠·͢ɻ – DrupalͷϑϩϯτΤϯυपΓʹ͍ͭͯମܥతʹֶͼ͍ͨํɺࣗ෼ͰΧελϜςʔϚΛ࡞Ε ΔΑ͏ʹͳΓ͍ͨํɺΞΫΠΞೝఆσϕϩούʔࢼݧΛ໨ࢦ͢ํʹ͓͢͢ΊͰ͢ɻ – DrupalΛҰ௨Γૢ࡞ͨ͜͠ͱ͕͋ΔํΛର৅ͱ͍ͯ͠·͢ɻ·ͩDrupalΛ৮ͬͨ͜ͱ͕ແ
͍ํ͸ɺॳ৺ऀ޲͚DrupalνϡʔτϦΞϧಈըʢ೔ຊޠʣΛઌʹݟ͓ͯ͘ͱΑΓཧղ͕ਂ ·Γ·͢ɻ

1. ΞηοτϥΠϒϥϦͱ͸ 2. ΞηοτϥΠϒϥϦΛఆٛ͢Δ 3. ͞·͟·ͳఆٛํ๏ 4. ΞηοτϥΠϒϥϦΛಡΈࠐΉ 5. ϥΠϒϥϦͷΦʔόʔϥΠυͱ֦ு
6. PHPͷ஋ΛJavaScriptͰ࢖༻͢Δ 7. ࿅श໰୊ ΞδΣϯμ

ΞηοτϥΠϒϥϦͱ͸

ΞηοτϥΠϒϥϦͱ͸ – ΞηοτϥΠϒϥϦͱ͸ɺCSSϑΝΠϧ΍JavaScriptϑΝΠϧΛͻͱ·ͱΊ ʹͨ͠΋ͷͰ͢ɻ – DrupalͰ͸ςϯϓϨʔτʹCSS΍JSͷURLΛຒΊࠐΉͷͰ͸ͳ͘ɺΞηοτ ϥΠϒϥϦΛհͯ͠Drupalʹ఻͑·͢ɻ – ͜ΕʹΑΓɺγεςϜ಺෦ͰDrupal͕CSSͱJSͷѹॖ΍Ωϟογϡɺϩʔυ ͢Δॱ൪ͷࢦఆɺಛఆͷϖʔδͷΈͰಡΈࠐΉͳͲͷॲཧΛߦ͏͜ͱ͕Ͱ͖
·͢ɻ – ΞηοτϥΠϒϥϦ͸֤ςʔϚͷ *.libraries.yml ϑΝΠϧͰఆٛͰ͖·͢ɻ

ΞηοτϥΠϒϥϦΛಡΈࠐΉͨΊͷखॱ 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

ΞηοτϥΠϒϥϦΛఆٛ͢Δ

γϯϓϧͳྫ global-styling: version: 1.x css: theme: css/styles.css: {} global-scripts: version:
1.x js: js/script.js: {} ςʔϚσΟϨΫτϦ௚Լʹ*.libraries.yml ϑΝΠϧΛ࡞੒͠ɺΞηοτϥΠϒϥϦΛఆٛ͠·͢ɻ͜ ͷྫͰ͸زͭͷϥΠϒϥϦ͕ఆٛ͞Ε͍ͯΔͰ͠ΐ͏ʁ

γϯϓϧͳྫ 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ͭͷϥΠϒϥϦ͕ఆٛ͞Ε͍ͯΔ͜ͱ͕Θ͔Γ·͢ɻ͜ͷఆٛ͞Εͨϥ ΠϒϥϦΛ࢖༻ͯ͠ɺαΠτͷ͞·͟·ͳ৔ॴͰಡΈࠐΉ͜ͱ͕Ͱ͖·͢ɻ

ࢀߟ) 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ͷॱ൪ͰಡΈࠐΉΑ͏ʹͳ͍ͬͯ·͢ɻ

ԋश ίΞͷ *.libraries.yml Λ೷͍ͯΈΑ͏ – ͲΜͳׅΓͰϥΠϒϥϦ͕ఆٛ͞Ε͍ͯΔ͔ – ͲΜͳΦϓγϣϯ͕࢖༻͞Ε͍ͯΔ͔

͞·͟·ͳఆٛํ๏

CSS/JSΛఆٛ͢Δࡍʹར༻ՄೳͳΦϓγϣϯʢ̍ʣ ྫɿΞηοτ͕طʹॖখ͞Ε͍ͯΔ͔ʢσϑΥϧτ͸falseʣ ྫɿΞηοτͷιʔεΛࢦఆ͢ΔʢσϑΥϧτ͸fileʣ assets/vendor/ckeditor5/alignment/alignment.js: { minified: true } http://example.com/script.js: {
type: external }

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>

CSS/JSΛఆٛ͢Δࡍʹར༻ՄೳͳΦϓγϣϯʢ̏ʣ ྫɿϝσΟΞλΠϓΛࢦఆ͢ΔʢCSSͷΈࢦఆՄೳʣ ྫɿΞηοτΛू໿͢Δඞཁ͕͋Δ͔Ͳ͏͔ʢσϑΥϧτ͸trueʣ css/print.css: { media: print } css/components/messages.css: {
preprocess: false }

CSSͱJSϑΝΠϧͷू໿ [؀ڥઃఆ]ʼ[ύϑΥʔϚϯε]ʼ[ଳҬ෯࠷దԽ] ͷνΣοΫϘοΫεʹνΣο ΫΛೖΕɺߏ੒Λอଘ   ஫ҙ CSSͱJSϑΝΠϧΛू໿ͷର৅ͱ͢ΔͨΊʹ͸ɺϑΝΠϧΛςʔϚ·ͨ͸Ϟ δϡʔϧͷ *.libraries.yml Ͱఆٛ͠ɺಡΈࠐ·ͤΔඞཁ͕͋Γ·͢ɻςϯϓ
Ϩʔτʹ௚઀ϑΝΠϧ΁ͷϦϯΫΛهड़͢Δͷ͸όουϓϥΫςΟεͰ͢ɻ ࢀߟ) CSSͱJSͷू໿ʹ͍ͭͯ DrupalͰ͸ଟ਺ͷCSSϑΝΠϧͱJSϑΝΠϧΛऔΓѻ͍·͢ɻ   ͜ΕΒ͸ू໿͢Δ͜ͱͰ1ͭͷʢ·ͨ͸গ਺ͷʣϑΝΠϧͱͳΓɺϦΫΤετճ਺Λ࡟ݮͰ͖·͢ɻ ू໿લ   ໿100ϑΝΠϧ ू໿ޙ   3ϑΝΠϧ

ґଘؔ܎ͷએݴ ϥΠϒϥϦʹ͸ґଘؔ܎ΛએݴͰ͖·͢ɻdependenciesΩʔͰґଘ͢Δϥ ΠϒϥϦͷΩʔͷϦετΛࢦఆ͠·͢ɻ maintenance_page: version: VERSION css: theme: css/maintenance-page.css: {}
dependencies: - system/maintenance - bartik/global-styling

DrupalίΞͰ༻ҙ͞Ε͍ͯΔΞηοτ jQuery΍normalize.cssͳͲɺίΞଆͰ༻ҙ͞Ε͍ͯΔΞηοτ͕͋Γ ·͢ɻcore/assets/vendor σΟϨΫτϦʹશͯͷҰཡ͕͋Γ·͢ɻඞཁ ʹԠͯ͡ґଘؔ܎Λએݴ͠·͢ɻ tour: version: VERSION js: js/tour.js:
{} dependencies: - core/jquery

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

֎෦ΞηοτͷಡΈࠐΈ 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 }

ΞηοτϥΠϒϥϦΛಡΈࠐΉ

ϥΠϒϥϦͷಡΈࠐΈํ৭ʑ *.libraries.ymlͰΞηοτϥΠϒϥϦΛఆ͚ٛͨͩ͠Ͱ͸ɺͦΕΒͷϥΠ ϒϥϦ͸DrupalαΠτͰಡΈࠐ·Ε·ͤΜɻDrupalͰ͸࣍ͷ3ͭͷํ๏ ͰϥΠϒϥϦΛಡΈࠐΉ͜ͱ͕Ͱ͖·͢ɻ – શͯͷϖʔδͰಡΈࠐΉ - *.info.ymlʹهड़ – ಛఆͷTwigςϯϓϨʔτͰಡΈࠐΉ
- *.html.twigʹهड़ – ಛఆͷϒϩοΫɺϊʔυͰಡΈࠐΉ - *.themeʹهड़

શͯͷϖʔδͰಡΈࠐΉ - *.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ΩʔͰΞηοτϥΠϒϥϦΛࢦఆ͢ΔͱɺαΠτશମͰಡΈ ࠐ·Ε·͢ɻ

ಛఆͷTwigςϯϓϨʔτͰಡΈࠐΉ - *.html.twigʹهड़ ςϯϓϨʔτϑΝΠϧͷதͰattach_libraryؔ਺Λ࢖༻͢Δ͜ͱͰɺ ςϯϓϨʔτ͕ಡΈࠐ·ΕͨϖʔδͷΈϥΠϒϥϦΛಡΈࠐΉ͜ ͱ͕Ͱ͖·͢ɻ {{ attach_library('marucha/global-styling') }}

ಛఆͷϒϩοΫɺϊʔυͰಡΈࠐΉ - *.themeʹهड़ ϖʔδ಺ͷಛఆͷϒϩοΫ͕දࣔ͞Ε͍ͯΔ࣌ͳͲϖʔδͷαϒηοτ ͰϥΠϒϥϦΛಡΈࠐΈ͍ͨ৔߹΍ɺϩδοΫͰϥΠϒϥϦΛग़͠෼͚ ͍ͨ৔߹͸ɺ*.themeϑΝΠϧʹϑοΫؔ਺Λ࣮૷͢Δ͜ͱͰߦ͑·͢ɻ function umami_preprocess_html(&$variables) { if
(!empty($variables['page']['sidebar'])) { $variables['#attached']['library'][] = 'umami/two-columns'; } } umami.theme

ϥΠϒϥϦͷΦʔόʔϥΠυͱ֦ு

ϥΠϒϥϦΛΦʔόʔϥΠυ͢Δ *.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

ϥΠϒϥϦΛ֦ு͢Δ *.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

PHPͷ஋ΛJavaScriptͰ࢖༻͢Δ

drupalSettingsͱ͸ PHPͰॲཧ͞Εͨಈతͳ஋ΛJavaScriptͰ࢖༻͍ͨ͠৔߹ɺdrupalSettingsΛ࢖༻ ͯ͠ߦ͏͜ͱ͕Ͱ͖·͢ɻdrupalSettings͸ίΞͷΞηοτϥΠϒϥϦͷதͰఆ ٛ͞Ε͍ͯ·͢ɻ

drupalSettingsΛ࢖༻͢ΔྲྀΕ ᶃ PHPͷ஋Λ࢖༻͍ͨ͠JavaScriptϑΝΠϧΛΞηοτϥΠϒϥϦʹఆٛ ͢Δ cool-slider: version: 1.x js: js/cool-slider.js: {}
dependencies: - core/jquery - core/drupalSettings JavaSriptϑΝΠϧͰ drupalSettingsΛར༻͢Δ ͨΊʹґଘؔ܎ͷએݴ͕ ඞཁɻ marucha.libraries.yml

drupalSettingsΛ࢖༻͢ΔྲྀΕ ᶄ ϑοΫؔ਺ͰϥΠϒϥϦΛಡΈࠐΉɻdrupalSettingsΦϒδΣΫτʹ JavaScriptͰ࢖༻͍ͨ͠஋Λ୅ೖ͢Δɻ function marucha_page_attachments_alter(&$page) { $page['#attached']['library'][] = 'marucha/cool-slider';
$page['#attached']['drupalSettings']['marucha']['coolSlider']['foo'] = 'bar'; } marucha.theme

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

࿅श໰୊

ΧελϜςʔϚ಺ͰjQueryΛಡΈࠐΈ͍ͨ৔߹ɺͲͷΑ͏ʹߦ͏ͷ͕ྑ͍Ͱ͠ΐ ͏͔ʁ 1. html.html.twig ϑΝΠϧͷதͰɺ<script>λάΛ༻͍ͯಡΈࠐ·ͤΔɻ 2. *.libraries.yml ϑΝΠϧͷதͰɺϥΠϒϥϦͷґଘؔ܎ͱͯ͠ಡΈࠐ·ͤΔɻ 3. DrupalίΞ͔ΒCDN͕ఏڙ͞Ε͍ͯΔͷͰɺଞͷ֎෦Ξηοτͱಉ༷ʹಡΈ
ࠐ·ͤΔɻ 4. DrupalͰ͸σϑΥϧτͰjQuery͕ΧελϜςʔϚͰར༻Ͱ͖ΔΑ͏ʹͳͬͯ ͍ΔͨΊɺԿ΋͠ͳͯ͘ྑ͍ɻ ࿅श໰୊1

ΧελϜςʔϚ಺ͰjQueryΛಡΈࠐΈ͍ͨ৔߹ɺͲͷΑ͏ʹߦ͏ͷ͕ྑ͍Ͱ͠ΐ ͏͔ʁ 1. html.html.twig ϑΝΠϧͷதͰɺ<script>λάΛ༻͍ͯಡΈࠐ·ͤΔɻ 2. *.libraries.yml ϑΝΠϧͷதͰɺϥΠϒϥϦͷґଘؔ܎ͱͯ͠ಡΈࠐ·ͤΔɻ 3. DrupalίΞ͔ΒCDN͕ఏڙ͞Ε͍ͯΔͷͰɺଞͷ֎෦Ξηοτͱಉ༷ʹಡΈ
ࠐ·ͤΔɻ 4. DrupalͰ͸σϑΥϧτͰjQuery͕ΧελϜςʔϚͰར༻Ͱ͖ΔΑ͏ʹͳͬͯ ͍ΔͨΊɺԿ΋͠ͳͯ͘ྑ͍ɻ ࿅श໰୊1 ਖ਼ղɿ2

͋ΔJavaScriptϑΝΠϧΛBodyͷ࠷Լ෦ͰಡΈࠐΈ͍ͨͰ͢ɻͲ͏͢Ε͹ྑ͍Ͱ͢ ͔ʁ 1. *.libraries.ymlͰର৅ͷJavaScriptϑΝΠϧʹ { head: false } Λࢦఆ͢Δɻ 2.
*.libraries.ymlͰର৅ͷΞηοτϥΠϒϥϦͷheaderϓϩύςΟʹ true Λࢦఆ ͢Δɻ 3. html.html.twigͰattach_libraryؔ਺Λ࢖༻ͯ͠ಡΈࠐΉɻ 4. Drupal͸σϑΥϧτͰBodyͷด͡λά௚ޙͰಡΈࠐΉΑ͏ʹͳ͍ͬͯΔͷ Ͱɺಛʹઃఆ͸ඞཁͳ͍ɻ ࿅श໰୊2

͋ΔJavaScriptϑΝΠϧΛBodyͷ࠷Լ෦ͰಡΈࠐΈ͍ͨͰ͢ɻͲ͏͢Ε͹ྑ͍Ͱ͢ ͔ʁ 1. *.libraries.ymlͰର৅ͷJavaScriptϑΝΠϧʹ { head: false } Λࢦఆ͢Δɻ 2.
*.libraries.ymlͰର৅ͷΞηοτϥΠϒϥϦͷheaderϓϩύςΟʹ true Λࢦఆ ͢Δɻ 3. html.html.twigͰattach_libraryؔ਺Λ࢖༻ͯ͠ಡΈࠐΉɻ 4. Drupal͸σϑΥϧτͰBodyͷด͡λά௚ޙͰಡΈࠐΉΑ͏ʹͳ͍ͬͯΔͷ Ͱɺಛʹઃఆ͸ඞཁͳ͍ɻ ࿅श໰୊2 ਖ਼ղɿ4

ຊ೔ͷΞδΣϯμ͸ऴྃ

1. ΞηοτϥΠϒϥϦͱ͸ 2. ΞηοτϥΠϒϥϦΛఆٛ͢Δ 3. ͞·͟·ͳఆٛํ๏ 4. ΞηοτϥΠϒϥϦΛಡΈࠐΉ 5. ϥΠϒϥϦͷΦʔόʔϥΠυͱ֦ு
6. PHPͷ஋ΛJavaScriptͰ࢖༻͢Δ 7. ࿅श໰୊ ΞδΣϯμ

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

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

More Decks by アクイアジャパン Acquia Japan

Other Decks in Programming

Featured

Transcript

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

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