基礎から実践まで！スタジオ・ウミと学ぶDrupalテーマ開発 / Theming Drupal

https://www.acquia.com/jp/resources/webinars/acquia-devchannel-vol17

Transcript

1. جૅ͔Β࣮ફ·Ͱʂ ελδΦɾ΢ϛͱֶͿ DrupalςʔϚ։ൃ DrupalͷςʔϚʹ͍ͭͯ ςʔϚ։ൃͷجຊ஌ࣝ ελδΦɾ΢ϛͰͷςʔϚ։ൃͷํ๏ Q&A
2. ʰͰͿͪΌΜͶΔʱͱ͸ʁ ΞΫΠΞδϟύϯ͕͓ಧ͚͢ΔʰͰͿͪΌΜͶΔʱͰ ͸ɺΤϯδχΞͷΈͳ͞·͕ٳܜ͠ͳ͕Βฉ͚ΔΑ͏ ͳɺΧδϡΞϧͳܗࣜͰςΫχΧϧ৘ใΛൃ৴͢Δ։ ൃऀ޲͚΢ΣϏφʔͰ͢ɻִिਫ༵೔͸ίʔώʔยख ʹ͝ΏΔΓͱ͝ࢹௌ͍ͩ͘͞ɻ ϋογϡλά #AcquiaJP Ͱײ૝ͳͲᄁ͍͍͚ͯͨͩΔ ͱخ͍͠Ͱ͢ʂ
3. ຊ೔ͷεϐʔΧʔ ΞΫΠΞδϟύϯ
 ؛ढ़ฌ ιϦϡʔγϣϯΤϯδχΞ ΞΫΠΞδϟύϯ
 ؙࢁͻ͔Δ ςΫχΧϧτϥϯεϨʔλʔ ͰͿͪΌΜͶΔ ελδΦɾ΢ϛ
 ٱอాޫل DrupalΤϯδχΞ
4. ήετͷ͝঺հɿٱอాޫلʢ͘΅ͨ ͜͏͖ʣ • 1990೥ੜ·Ε 30ࡀ • ελδΦɾ΢ϛʢ2017೥ೖࣾʣ • Drupalྺ 3೥ • ϝΠϯ͸ϑϩϯτΤϯυ • झຯ͸ϚϥιϯɺѪݘͱͷࢄา
5. ελδΦɾ΢ϛ DrupalҰے 15೥ Drupalઐ໳ͷ։ൃձࣾͰ͢ https://www.studio-umi.jp/
6. DrupalͷςʔϚػೳ ʹ͍ͭͯ
7. Drupalͷςʔϛϯά ςʔϚͱ͸ɿ αΠτͷݟͨ໨Λఆٛ͢Δ ϑΝΠϧͷू߹ମ https://www.drupal.org/docs/theming-drupal
8. DrupalͷςʔϚͷछྨ͍Ζ͍Ζ ίϯτϦϏϡʔτςʔϚ l DrupalίϛϡχςΟʹد༩͞ΕͨແྉͷςʔϚ
 ex) https://www.drupal.org/project/business_responsive_theme
 ΧελϜςʔϚ l θϩ͔Βɺ͋Δ͍͸αϒςʔϚͳͲΛϕʔεʹ࡞Δ
 αϒςʔϚ l ࣗ෼ͰΧελϚΠζ֦ͯ͠ுͰ͖ΔΑ͏ʹઃܭ͞Ε͍ͯΔ
 ex) https://www.drupal.org/project/bootstrap
 ίΞςʔϚ l DrupalͷίΞʹؚ·Ε͍ͯΔςʔϚ
 ex) ClassyɺBartikɺSevenɺStableɺStark
9. ςʔϚ։ൃͷ͖΄Μ
10. ςʔϚͷσΟϨΫτϦߏ੒ themes !"" contrib # !"" bfd # $"" business_responsive_theme $"" custom !"" marucha_bootstrap $"" marucha_custom themes಺ͷσΟϨΫτϦߏ੒ ίϯτϦϏϡʔτςʔϚ ΧελϜςʔϚ
11. ΧελϜςʔϚΛ։ൃ͢Δεςοϓ - ઃఆϑΝΠϧʢ.info.ymlʣͷ௥Ճ - CSS/JSϑΝΠϧͷ௥Ճ - ςϯϓϨʔτϑΝΠϧͷ௥Ճ
12. ςʔϚͷઃఆϑΝΠϧͱ͸ʁ name: Marucha Custom type: theme description: '·Δ஡ͷͨΊͷΧελϜςʔϚ' core_version_requirement: ^8 || ^9 base theme: classy marucha_custom.info.yml .info.ymlɿ ςʔϚͷجຊ৘ใΛDrupalଆʹ఻͑ΔͨΊͷઃఆϑΝΠϧ ؅ཧը໘Ͱ͜Μͳײ͡ʹදࣔ͞Ε·͢ marucha_custom $"" marucha_custom.info.yml σΟϨΫτϦߏ੒
13. ϕʔεςʔϚͱ͸ base themeͰࢦఆ͞Εͨ
 ςʔϚͷϦιʔεΛܧঝ͢Δ ʢDrupal 9ͰඞਢɺDrupal 8Ͱ͸Φϓγϣϯʣ name: Marucha Custom type: theme description: '·Δ஡ͷͨΊͷΧελϜςʔϚ' core_version_requirement: ^8 || ^9 base theme: classy marucha_custom.info.yml
14. CSS/JSϑΝΠϧͷ௥Ճํ๏ marucha_custom !"" css # $"" styles.css !"" js # $"" script.js !"" marucha_custom.info.yml $""marucha_custom.libraries.yml σΟϨΫτϦߏ੒ global-styling: version: 1.x css: theme: css/styles.css: {} global-scripts: version: 1.x js: js/script.js: {} marucha_custom.libraries.yml .libraries.ymlɿ ςʔϚ͕Πϯετʔϧ͞ΕͨࡍʹΞηοτϑΝΠϧ܈Λ
 Drupal͕ಡΈࠐΊΔΑ͏ʹ͢ΔͨΊͷઃఆϑΝΠϧ
15. CSS/JSϑΝΠϧͷ௥Ճํ๏ ᶄ ఆٛͨ͠ϥΠϒϥϦΛςʔϚʹ௥Ճ͢ΔͨΊʹ
 .info.ymlʹ௥ه name: Marucha Custom type: theme description: '·Δ஡ͷͨΊͷΧελϜςʔϚ' core_version_requirement: ^8 || ^9 base theme: classy libraries: - marucha_custom/global-styling - marucha_custom/global-scripts marucha_custom.info.yml ͜ΕͰCSS/JSϑΝΠϧ͕ ϨΠΞ΢τʹ൓ө͞ΕΔʂ
16. ςϯϓϨʔτϑΝΠϧͱ͸ TwigςϯϓϨʔτϑΝΠϧɿ ςʔϚͷHTMLϚʔΫΞοϓ Λੜ੒ https://knowledge.sakura.ad.jp/5885/
17. ςϯϓϨʔτϑΝΠϧͷ௥Ճ marucha_custom !"" css # $"" styles.css !"" js # $"" script.js !"" marucha_custom.info.yml !"" marucha_custom.libraries.yml $"" templates $"" node--3.html.twig σΟϨΫτϦߏ੒ ϕʔεςʔϚ͔ΒϑΝΠϧΛίϐʔͯ͠ΧελϚΠζ͢Δɻ ΧελϜςʔϚσΟϨΫτϦʹ഑ஔ TwigͷσόοάΛ༗ޮԽ͢Δͱɺੜ੒͞ΕͨHTMLʹ ςϯϓϨʔτϑΝΠϧ৘ใ͕ίϝϯτͰදࣔ͞Ε·͢
18. ͦͷ΄͔ͷઃఆϑΝΠϧ .breakpoint.yml l Ϗϡʔϙʔτͷߴ͞΍෯Λεςοϓʹ෼ׂ͠ɺ͞·͟·ͳσόΠεͰਖ਼͘͠දࣔ
 ϨεϙϯγϒσβΠϯΛௐ੔͢ΔͨΊʹ࢖༻
 .theme l ςʔϚݻ༗ͷPHPؔ਺ɺલॲཧؔ਺ɺϑοΫΛ֨ೲ͢ΔͨΊʹ࢖༻