EC-CUBE3デザイナー向け勉強会 #2

Transcript

1. EC-CUBE3σβΠφʔ޲͚ษڧձ #2 EC-CUBEؔ੢Ϣʔβάϧʔϓ 2016-02-24
2. ઌि EC-CUBE3.0.9 ͕ϦϦʔε ओͳಛ௃ͱͯ͠ ɾϓϥάΠϯػೳͷվળ ɾෆ۩߹ͷվम
3. ໨࣍ 1. EC-CUBE3.0.9΁ͷόʔδϣϯΞοϓํ๏ 2. Twigͷઆ໌ 3. ࣭ٙԠ౴౳
4. 1.EC-CUBE3.0.9ͷ όʔδϣϯΞοϓํ๏
5. EC-CUBE3.0.9ͷόʔδϣϯΞοϓํ๏ • ͢ͰʹEC-CUBE3.0.9Λಋೖ͍ͯ͠Δํ͸ඞཁ͋Γ·ͤΜɻ • EC-CUBE3.0.x͔Β3.0.9΁ͷΞοϓϩʔυ͸ҎԼͷ௨Γ
 (http://ec-cube.github.io/update.htmlΛࢀߟ) 1.σΟϨΫτϦΛ্ॻ͖
 srcɺhtmlɺvendorσΟϨΫτϦΛ্ॻ͖ 2.ϑΝΠϧͷ্ॻ͖
 app/consoleɺcli-config.phpɺcomposer.jsonɺcomposer.lockɺ eccube_install.shɺ
 autload.php(3.0.8Ҏ֎͔ΒόʔδϣϯΞοϓ͞ΕΔํͷΈ) 3.ϚΠάϨʔγϣϯͷ࣮ߦ
 http://υϝΠϯ/install.php/migration ʹΞΫηε͠ϚΠάϨʔγϣϯΛ࣮ߦ
6. 2.Twigͷઆ໌
7. Twigͱ͸ • Twigͱ͸PHPͷͨΊͷςϯϓϨʔτΤϯδϯͰ͢ɻ • Symfony2Ͱ͸ඪ४ͷςϯϓϨʔτΤϯδϯͰ͋Γɺ EC-CUBE3Ͱ͸SmartyͰ͸ͳ͘TwigΛ࢖͍ͬͯ·͢ɻ • Twigʹ͸ҎԼͷಛ௃͕͋Γ·͢ɻ 1.ߴ଎ : PHPίʔυ·ͰίϯύΠϧ͞Ε࣮ͯߦ 2.֦ு͕༰қ : ಠࣗͷΧελϜλά΍ϑΟϧλΛఆٛ 3.ηΩϡΞ : αϯυϘοΫεϞʔυΛඋ͍͑ͯΔ
8. ֓ཁ • ςϯϓϨʔτ͸ɺ୯ͳΔςΩετϑΝΠϧ • ςϯϓϨʔτ͸ɺͲΜͳςΩετϕʔεͷܗࣜ (HTMLɺ XMLɺetc)Ͱ΋ੜ੒͢Δ͜ͱ͕Մೳ • ಛʹܾ·֦ͬͨுࢠ͕ͳ͍ͷͰ.twigͰ͸ͳͯ͘.html ΍ .xmlͰ΋Մೳ • ςϯϓϨʔτʹ͸ม਺΍͕ࣜهड़Ͱ͖ɺ ςϯϓϨʔτ ͕ධՁ͞ΕΔͱ͖ʹ஋ʹஔ͖׵͑ΒΕΔ
9. Twigͷઆ໌ • ࠷খߏ੒ͷςϯϓϨʔτྫ
 <!DOCTYPE html> <html> <head> <title>My Webpage</title> </head> <body> <ul id="navigation"> {% for item in navigation %} <li><a href="{{ item.href }}">{{ item.caption }}</a></li> {% endfor %} </ul> <h1>My Webpage</h1> {{ a_variable }} </body> </html>
10. Twigͷߏ଄ • Twigʹ͸3छྨͷهड़ํ๏͕͋ΓɺͦΕͧΕ
 {{ }}ɺ{% %}ɺ{# #}
 ͕ଘࡏ͠·͢ɻ {{ }} : ม਺Λग़ྗ͢Δ࣌ʹ࢖͏ {% %} : ࣜΛѻ͏࣌ʹ࢖͏ {# #} : ίϝϯτ࣌ʹ࢖͏
11. ม਺ • ΞϓϦέʔγϣϯ͔ΒTwigʹม਺Λ౉͢͜ͱͰɺςϯ ϓϨʔτͷதͰͦͷม਺ΛऔΓѻ͏͜ͱ͕Ͱ͖·͢ɻ • ม਺ͷଐੑ(ΦϒδΣΫτ΍഑ྻ)ʹΞΫηε͢Δʹ͸ɺ ʮ.ʯ͔ʮ[]ʯΛ࢖͍·͢ɻ(->͸࢖͍·ͤΜ) {{ Product.name }} {{ Product['name'] }}
12. ม਺΁ͷ୅ೖ • TwigͰ͸ม਺Λѻ͏͜ͱ΋ՄೳͰ͢ɻม਺ʹରͯ͠஋ Λ୅ೖ͢Δʹ͸ʮsetʯΛ࢖͍·͢ɻ {% set foo = 'foo' %} {% set foo = [1, 2] %} {% set foo = {'foo': 'bar'} %}
13. ϑΟϧλ • ม਺͸ϑΟϧλͰ஋Λ૷০͢Δ͜ͱ͕Ͱ͖·͢ɻ ϑΟ ϧλ͸ύΠϓه߸ʮ|ʯͰ ม਺ʹରͯ͠࢖༻͠ɺϑΟϧ λͷछྨʹΑͬͯ͸Ҿ਺ΛࢦఆͰ͖·͢ɻ·ͨɺϑΟϧ λ͸ଓ͚ͯهड़͢Δ͜ͱ΋ՄೳͰ͢ɻ {{ name|striptags|title }} {{ list|join(', ') }} {% filter upper %} This text becomes uppercase {% endfilter %}
14. ϑΟϧλͷछྨ • ϑΟϧλʹ͸ҎԼ͕ඪ४Ͱ༻ҙ͞Ε͓ͯΓɺಠࣗͰϑΟ ϧλΛ࡞੒͢Δ͜ͱ΋ՄೳͰ͢ɻEC-CUBE3Ͱ΋ಠࣗ ϑΟϧλΛ࡞੒͍ͯ͠·͢ɻ(ECCUBROOT/src/ Eccube/Twig/Extension/EccubeExtension.phpΛࢀর) absɺbatchɺcapitalizeɺconvert_encodingɺdateɺ date_modifyɺdefaultɺescapeɺfirstɺformatɺjoinɺ json_encodeɺkeysɺlastɺlengthɺlowerɺmergeɺnl2brɺ number_formatɺrawɺreplaceɺreverseɺroundɺsliceɺ sortɺsplitɺstriptagsɺtitleɺtrimɺupperɺurl_encode
15. ؔ਺ • ؔ਺͸ϑΟϧλͱ͸ҟͳΓ୯ಠͰݺͼग़ͤͨΓɺ੍ޚߏ จͷதͰར༻ՄೳͰ͢ɻؔ਺͸ׅހ෇͖()Ͱݺͼग़͞Ε ·͢ɻ {{ date('-2days') }} {{ dump(user) }} {{ max(1, 3, 2) }} {% for i in range(0, 3) %} {{ i }}, {% endfor %}
16. ؔ਺ͷछྨ • ؔ਺ʹ͸ҎԼ͕ඪ४Ͱ༻ҙ͞Ε͓ͯΓɺಠࣗͰؔ਺Λ ࡞੒͢Δ͜ͱ΋ՄೳͰ͢ɻEC-CUBE3Ͱ΋ಠࣗؔ਺Λ࡞ ੒͍ͯ͠·͢ɻ(ECCUBROOT/src/Eccube/Twig/ Extension/EccubeExtension.phpΛࢀর) attributeɺblockɺconstantɺcycleɺ dateɺdumpɺincludeɺmaxɺminɺparentɺ randomɺrangeɺsourceɺ template_from_string
17. ੍ޚߏจ • ੍ޚߏจ͸ɺϓϩάϥϜΛ੍ޚ͢Δ৚݅(i.e. if/elseif/ else)ɺforɺblockͷΑ͏ͳ΋ͷؚ͕·Ε·͢ɻ ੍ޚߏ จ͸ɺ{% ... %} ͷதʹ هड़͞Ε·͢ɻ <h1>Members</h1> <ul> {% for user in users %} <li>{{ user.username|e }}</li> {% endfor %} </ul>
18. ੍ޚߏจͷछྨ • ੍ޚߏจʹ͸ҎԼ͕ඪ४Ͱ༻ҙ͞Ε͍ͯ·͢ɻ autoescapeɺblockɺdoɺembedɺ extendsɺfilterɺflushɺforɺfromɺifɺ importɺincludeɺmacroɺsandboxɺsetɺ spacelessɺuseɺverbatim
19. ίϝϯτ • ίϝϯτΞ΢τ͢Δʹ͸ίϝϯτߏจ {# ... #} Λ࢖͍· ͢ɻίϝϯτͰғ·Ε͍ͯΔ෦෼͸ϒϥ΢βʹ͸ग़ྗ͞ Ε·ͤΜɻ {# note: disabled template because we no longer use this {% for user in users %} ... {% endfor %} #}
20. ςϯϓϨʔτͷΠϯΫϧʔυ • ΠϯΫϧʔυΛ࢖͑͹ଞͷTwigϑΝΠϧΛಡΈࠐΉ͜ ͱ͕Ͱ͖ɺͦͷ಺༰Λදࣔ͢Δ͜ͱ͕ՄೳͰ͢ɻԼ૚σΟ ϨΫτϦʹTwigϑΝΠϧ͕͋Δ৔߹ɺ/Ͱ֊૚Λݩʹݺ ͼग़ͤ·͢ɻ {% include 'sidebar.html' %} {% for box in boxes %} {% include "render_box.html" %} {% endfor %} {% include "sections/articles/sidebar.html" %}
21. ςϯϓϨʔτͷܧঝ • Twigͷಛ௃ͱͯ͠ςϯϓϨʔτܧঝ͕ߦ͑·͢ɻςϯϓ ϨʔτܧঝΛ࢖͑͹ɺجຊͱͳΔ࿮ͱͳΔςϯϓϨʔτ͕ ߏஙͰ͖ɺ͜ͷςϯϓϨʔτΛ֤Twig͔Βܧঝ͠ɺ͞Βʹ ࢠςϯϓϨʔτͰΦʔόʔϥΠυͰ͖ΔϒϩοΫΛఆٛͯ͠ ͓͘͜ͱͰαΠτڞ௨ͱͳΔσβΠϯ͕࡞੒Ͱ͖·͢ɻ • ࣍ϖʔδͰ͸جຊʹͳΔςϯϓϨʔτdefault_frame.twigΛ ఆٛ͠ɺ͜ͷςϯϓϨʔτͰ͸2ΧϥϜߏ੒ͷϖʔδͱͯ͠ ࢖͑Δ΋ͷͰɺ ؆୯ͳHTMLͷࠎ૊ΈͷυΩϡϝϯτ͕ఆ ٛ͞Ε͍ͯ·͢ɻ
22. ςϯϓϨʔτͷܧঝ <!DOCTYPE html> <html> <head> {% block head %} <link rel="stylesheet" href="style.css" /> <title>{% block title %}{% endblock %} - My Webpage</ title> {% endblock %} </head> <body> <div id="content">{% block content %}{% endblock %}</div> <div id="footer"> {% block footer %} &copy; Copyright 2011 by <a href="http:// domain.invalid/">you</a>. {% endblock %} </div> </body> </html>
23. ςϯϓϨʔτͷܧঝ • લϖʔδͷྫͰ͸ɺblockλάͰɺ4ͭͷϒϩοΫ͕ఆٛ͞Ε͍ͯ·͢ɻ͜ͷ ϒϩοΫ͸ɺࢠςϯϓϨʔτ͔ΒλάΛઃఆ͢Δ͜ͱ͕ՄೳͰ͢ɻblockλά ͕ߦ͏͜ͱ͸ɺࢠςϯϓϨʔτ͔Β֤ϒϩοΫͷ෦෼ΛΦʔόʔϥΠυՄೳ ͩͱ͍ࣔͯ͠·͢ɻ • ࣍ϖʔδͰ͸جຊͱͳΔࢠϖʔδΛఆٛ͠ɺextendsλάΛར༻ͯ͠جຊͱ ͳΔςϯϓϨʔτΛݺͼग़͢Α͏ʹ͠·͢ɻextendsλά͸ɺςϯϓϨʔτΤ ϯδϯʹɺ ͜ͷςϯϓϨʔτ͸ɺผͷςϯϓϨʔτΛ"extends (ܧঝ/֦ு)" ͍ͯ͠Δͷͩͱ఻͑Δ΋ͷͰ͢ɻextendsλά͸ςϯϓϨʔτͷ࠷ॳʹهड़͢ Δඞཁ͕͋Γ·͢ɻ • ࠓճͷࢠςϯϓϨʔτͰɺfooterϒϩοΫΛఆ͍ٛͯ͠ͳ͍ͷͰɺ ਌ςϯϓ Ϩʔτͷ஋͕ͦͷ··ར༻͞Ε·͢ɻ
24. ςϯϓϨʔτͷܧঝ {% extends "default_frame.html" %} {% block title %}Index{% endblock %} {% block head %} {{ parent() }} <style type="text/css"> .important { color: #336699; } </style> {% endblock %} {% block content %} <h1>Index</h1> <p class="important"> Welcome to my awesome homepage. </p> {% endblock %}
25. ςϯϓϨʔτͷܧঝ • parentؔ਺Λ࢖͑͹ɺ਌ϒϩοΫͷ಺༰ΛϨϯμϦϯά ͢Δ͜ͱ΋Ͱ͖·͢ɻ {% block footer %} <h3>Table Of Contents</h3> ... {{ parent() }} {% endblock %}
26. HTMLΤεέʔϓ • HTMLΛੜ੒͢Δࡍʹ͸Τεέʔϓͯ͠ग़ྗ͢Δඞཁ͕ ͋Γ·͕͢ɺखಈͰΤεέʔϓ͢Δํ๏ͱσϑΥϧτͰ ࣗಈͰશͯΤεέʔϓ͢Δํ๏͕͋Γ·͢ɻTwigͰ͸σ ϑΥϧτͰࣗಈΤεέʔϓ͞Ε·͢ɻ ɾ{{ }} Λ࢖͏ͱࣗಈͰΤεέʔϓॲཧ͞ΕΔ {{ user.username }} ɾeϑΟϧλΛ࢖ͬͯखಈͰΤεέʔϓॲཧ {{ user.username|e }}
27. HTMLΤεέʔϓ • Τεέʔϓʹ͸ࣗಈͰhtmlΤεέʔϓॲཧ͕ߦΘΕ· ͢ɻม਺ΛίϯςΩετͰग़ྗ͍ͨ࣌͠͸ɺ໌ࣔతʹΤ εέʔϓ͢Δඞཁ͕͋Γ·͢ɻ {{ user.username|e('js') }} {{ user.username|e('css') }} {{ user.username|e('url') }} {{ user.username|e('html_attr') }}
28. HTMLΤεέʔϓ • ৔߹ʹΑΓࣗಈͰΤεέʔϓΛͤͨ͘͞ͳ͍(HTMLλά Λͦͷ··࢖͍͍ͨ)͕࣌͋Γ·͢ɻͦͷ৔߹ɺઐ༻ͷ ϑΟϧλΛ࢖͍·͢ɻͨͩ͠ɺηΩϡϦςΟʹ஫ҙ͢Δ ඞཁ͕͋Γ·͢ɻ ɾΤεέʔϓͨ͘͠ͳ͍࣌ɺrawΛ࢖͏ {{ Product.description_list|raw }}
29. ԋࢉࢠ • TwigͰ͸phpͱಉ࢛͘͡ଇԋࢉࢠ΍ൺֱͳͲͷԋࢉࢠ͕ར༻ ՄೳͰ͢ɻ
 b-and, b-xor, b-or, or, and, ==, !=, <, >, >=, <=, in, matches, starts with, ends with, .., +, -, ~, *, /, //, %, is, **, |, [], and .:
 ͕͋Γ·͢ɻ • ҎԼͷԋࢉࢠ͸TwigͰΑ͘ར༻͞Ε·͢ɻ
 | : ϑΟϧλͷద༻
 ~ : ஋Λ͢΂ͯจࣈྻʹม׵ͯ݁͠߹
 .(υοτ) : ΦϒδΣΫτͷϓϩύςΟΛऔಘ
30. 3.࣭ٙԠ౴౳
31. ։ൃ࣌ͷࢀߟϖʔδ • Twigʹ͍ͭͯ΋ͬͱ஌Γ͍ͨํ͸ͪ͜ΒͷαΠτɺυ ΩϡϝϯτΛ͝ཡ͍ͩ͘͞ɻ
 http://twig.sensiolabs.org
 http://twig.sensiolabs.org/pdf/Twig.pdf
32. ։ൃ࣌ͷࢀߟϖʔδ • GitHubWiki
 https://github.com/EC-CUBE/ec-cube/wiki • GitHubPages
 http://ec-cube.github.io • Qiitaͷهࣄ
 http://qiita.com/tags/EC-CUBE3