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

Transcript

1. EC-CUBE3σβΠφʔ޲͚ษڧձ #3 EC-CUBEؔ੢Ϣʔβάϧʔϓ 2016-03-09
2. ໨࣍ 1. Twigͷઆ໌ύʔτ2 2. ϒϩοΫΛ׆༻ͨ͠σβΠϯ࡞੒ 3. ։ൃ࣌ͷখ࿩ 4. ࣭ٙԠ౴౳
3. 1.Twigͷઆ໌ύʔτ2
4. ϑΥʔϜը໘ͷ࡞੒ • TwigͰ͸ϑΥʔϜը໘Λ࡞੒͢Δͱ͖ɺઐ༻ͷग़ྗؔ ਺ͱม਺Λ࢖ͬͯ࡞੒͢Δ͜ͱ͕Ͱ͖·͢ɻ • ؔ਺͸ϑΟʔϧυΛग़ྗ͢ΔͷʹΑ͘࢖ΘΕ·͢ɻҰํɺ ม਺͸ී௨͸ͦΕ΄Ͳ࢖͍·ͤΜ͕ɺϑΟʔϧυͷϥϕ ϧɾIDଐੑɾΤϥʔɺͦͷଞϑΟʔϧυʹؔ͢Δ͋ΒΏ Δ৘ใΛར༻͢Δ͜ͱ͕Ͱ͖·͢ɻ • ϑΥʔϜΛ࢖͏৔߹ɺController͔ΒFormTypeΫϥε Λ౉ͯ͠ѻ͍·͢ɻ
5. Formग़ྗؔ਺ • form(view, variables)
 ϑΥʔϜશମͷHTMLΛग़ྗ͠·͢ɻ
 {{ form(form) }} !variablesʹ͋ͨΔform͸Controller͔ Β౉͞Εͨkey໊ͱͳΓ·͢ɻ
6. Formग़ྗؔ਺ • form_start(view, variables)
 ϑΥʔϜͷ։࢝λάΛग़ྗ͠·͢ɻϑΥʔϜ͕ϑΝΠϧ ΞοϓϩʔυΛؚΜͰ͍Ε͹ɺద੾ͳenctype΋ग़ྗ͠ ·͢ɻ
 {{ form_start(form, {'method': 'GET'}) }}
7. Formग़ྗؔ਺ • form_end(view, variables)
 ϑΥʔϜͷऴྃλάΛग़ྗ͠·͢ɻ {{ form_end(form) }}
8. Formग़ྗؔ਺ • form_label(view, label, variables)
 ࢦఆͨ͠ϑΟʔϧυͷϥϕϧΛग़ྗ͠·͢ɻୈೋҾ਺ͱ ͯ͠ɺ͜ͷϑΟʔϧυʹग़ྗ͍ͨ͠ϥϕϧΛ౉͢͜ͱ΋ Ͱ͖·͢ɻ {{ form_label(form.name) }} {# Լهͷೋͭͷॻ͖ํ͸ಉ͡ҙຯʹͳΓ·͢ #} {{ form_label(form.name, '໊͓લ', {'label_attr': {'class': 'foo'}}) }} {{ form_label(form.name, null, {'label': '໊͓લ', 'label_attr': {'class': 'foo'}}) }}
9. Formग़ྗؔ਺ • form_errors(view)
 ࢦఆͨ͠ϑΟʔϧυͷΤϥʔΛग़ྗ͠·͢ɻ {{ form_errors(form.name) }} {{ form_errors(form) }}
10. Formग़ྗؔ਺ • form_widget(view, variables)
 ࢦఆͨ͠ϑΟʔϧυͷHTMLΛग़ྗ͠·͢ɻ form_widgetͷୈೋҾ਺͸ม਺ͷ഑ྻͰ͢ɻΑ͘࢖ΘΕ Δͷ͸attrͰɺclassΛ௥Ճ͍ͨ࣌͠ͳͲʹ࢖ΘΕ·͢ɻ {{ form_widget(form.name, {'attr': {'class': 'foo'}}) }}
11. Formग़ྗؔ਺ • form_row(view, variables)
 ࢦఆͨ͠ϑΟʔϧυͷʮߦʯɺϥϕϧɾΤϥʔϝοηʔ δɾ΢ΟδΣοτͷ૊Έ߹Θͬͨ͞΋ͷΛग़ྗ͠·͢ɻ {{ form_row(form.name) }}
12. Formग़ྗؔ਺ • form_rest(view, variables)
 ࢦఆͨ͠ϑΥʔϜʹ͍ͭͯ·ͩग़ྗ͞Ε͍ͯͳ͍શͯͷ ϑΟʔϧυΛग़ྗ͠·͢ɻhidden΍ɺग़ྗ͠๨Εͨ ϑΟʔϧυΛग़ྗͯ͘͠Ε·͢ɻ {{ form_rest(form) }}
13. Formม਺ • ࠓ·Ͱग़͖ͯͨ΄ͱΜͲશͯͷTwigؔ਺Ͱ͸ɺ࠷ޙͷ Ҿ਺͸ม਺ͷ഑ྻͰ͢ɻ ྫ͑͹ɺ࣍ͷίʔυ͸ϑΟʔ ϧυͷ΢ΟδΣοτΛग़ྗ͠·͕͢ɺಛผͳΫϥεΛ ؚΊΔΑ͏ʹมߋ͞Ε͍ͯ·͢ɻ {# ΢ΟδΣοτΛग़ྗ͠ɺ "foo"ΫϥεΛ ௥Ճ͠·͢ #} {{ form_widget(form.name, { 'attr': {'class': 'foo'} }) }}
14. Formม਺ • ϑΥʔϜͷͲͷ෦෼Λग़ྗ͢Δͱ͖Ͱ΋ɺͦͷ෦෼Λ ग़ྗ͢ΔϒϩοΫ͸ͨ͘͞Μͷม਺Λ࢖͍·͢ɻ σ ϑΥϧτͰ͸ɺϒϩοΫ͸form_div_layout.html.twig ͷதʹॻ͔Ε͍ͯ·͢ɻ {% block form_label %} {% if not compound %} {% set label_attr = label_attr|merge({'for': id}) %} {% endif %} {% if required %} {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' required')|trim}) %} {% endif %} {% if label is empty %} {% set label = name|humanize %} {% endif %}
15. Formม਺ • ςϯϓϨʔτʹ form ม਺ؚ͕·Ε͍ͯͯnameϑΟʔ ϧυͷม਺ʹΞΫηε͍ͨ͠ͱ͖ɺ FormViewΦϒδΣ ΫτͷvarsϓϩύςΟΛ࢖͏͜ͱʹΑΓΞΫηεͰ͖· ͢ɻ <label for="{{ form.name.vars.id }}" class="{{ form.name.vars.required ? 'required' : '' }}"> {{ form.name.vars.label }} </label>
16. Formม਺ • Formม਺ʹ͸ҎԼ͕ඪ४Ͱ༻ҙ͞Ε͍ͯ·͢ɻԼͷม ਺͸શͯͷϑΟʔϧυλΠϓʹڞ௨Ͱ͢ɻϑΟʔϧυλ Πϓͷதʹ͸΋ͬͱଟ͘ͷม਺͕͋Δ΋ͷ΋͋Γɺಛ ఆͷϑΟʔϧυͷΈʹ༗ޮͳม਺΋͋Γ·͢ɻ formɺidɺnameɺfull_nameɺerrorsɺsubmittedɺ validɺvalueɺread_onlyɺdisabledɺrequiredɺ max_lengthɺpatternɺlabelɺmultipartɺattrɺ compoundɺblock_prefixesɺtranslation_domainɺ cache_keyɺdataɺmethodɺaction
17. ϑΥʔϜϨΠΞ΢τ • EC-CUBE3Ͱ͸ϑΥʔϜը໘Λར༻͢Δ৔߹ɺ
 ECCUBEROOT/src/Eccube/Resource/template/default/Form/form_layout.twig
 ECCUBEROOT/src/Eccube/Resource/template/admin/Form/ bootstrap_3_horizontal_layout.html.twig
 Λݩʹͯ͠ग़ྗ͞Ε͍ͯ·͢ɻ
 • ͜ͷϑΥʔϜΛར༻͢Δ৔߹ɺݺͼग़͠ݩͷTwigଆͰ͸
 {% form_theme form 'Form/form_layout.twig' %}
 {% form_theme form 'Form/bootstrap_3_horizontal_layout.html.twig' %}
 ͱهड़͢Δ͜ͱͰڞ௨ͱͳΔϑΥʔϜը໘͕࡞੒͞Ε·͢ɻ
 ※ݱঢ়Ͱ͸ϑϩϯτଆͰ͸form_layout.twig͸ར༻͞Ε͓ͯΒͣɺTwigඪ४ͷ form_div_layout.html.twig͕ద༻͞Ε͍ͯ·͢ɻ
18. TwigΤΫεςϯγϣϯ • Twigʹ͸طʹଟ਺ͷ૊ΈࠐΈؔ਺ɾϑΟϧλɾλάɾ ςετؚ͕·Ε͍ͯ·͕͢(લճͷษڧձͰઆ໌ͨ͠΋ ͷ)ɺSymfony2Ͱ͸Twig ςϯϓϨʔτͰίϯϙʔωϯ τͷػೳΛ࢖͑ΔΑ͏ʹ͢ΔͨΊʹɺ Twigͷ֦ுػೳ Λ௥Ճ͍ͯ͠·͢ɻ • EccubeͰ΋ಠࣗͷؔ਺΍ϑΟϧλΛ࡞੒͍ͯ͠·͢ɻ (ECCUBROOT/src/Eccube/Twig/Extension/ EccubeExtension.phpΛࢀর)
19. Twigؔ਺ • render
 ࢦఆ͞Εͨίϯτϩʔϥʔຢ͸URLΛग़ྗ͠·͢ɻ {{ render(uri, options = []) }}
20. Twigؔ਺ • is_granted
 ςϯϓϨʔτͷதͰݱࡏͷϢʔβ͕ݖݶΛ͍࣋ͬͯΔ ͔Λௐ΂ΔͨΊʹ࢖͍·͢ɻݱࡏͷϢʔβʔ͕ࢦఆ͞Ε ͨϩʔϧΛ͍࣋ͬͯΕ͹trueΛฦ͠·͢ɻ {{ is_granted(role, object = null, field = null) }}
21. Twigؔ਺ • path
 ࢦఆ͞ΕͨϧʔςΟϯά໊ͷύεΛฦ͠·͢ɻ {{ path(name, parameters = [], relative = false) }}
22. Twigؔ਺ • url
 path(...) ͱಉ͡Ͱ͕͢ɺͪ͜Β͸ઈରURLΛฦ͠·͢ɻ {{ url(name, parameters = [], schemeRelative = false) }}
23. Twigάϩʔόϧม਺ • appଐੑ
 app ม਺͸ςϯϓϨʔτ಺ͷͲ͜Ͱ΋࢖͏͜ͱ͕Ͱ ͖ɺڞ௨Ͱ࢖༻͢ΔΦϒδΣΫτΛࢀরͰ͖ΔΑ͏ʹ ͳ͍ͬͯ·͢ɻ GlobalVariablesͷΠϯελϯεͰ͢ɻ app.user app.request app.session app.environment app.debug ※EC-CUBE3Ͱ͸ଞʹ΋DI͞Ε͍ͯΔɻ
24. 2.ϒϩοΫΛ׆༻ͨ͠σβΠϯ࡞੒
25. ϒϩοΫΛ׆༻ͨ͠σβΠϯ࡞੒ • EC-CUBE3Ͱ͸ϑϩϯτը໘Λ࡞੒͢Δ৔߹ɺ
 ௚઀TwigϑΝΠϧΛ࡞੒
 ؅ཧը໘ͷίϯςϯπ؅ཧΑΓը໘Λ࡞੒
 σβΠϯςϯϓϨʔτͱͯ͠ඪ४ͷϑΝΠϧ͔Β࡞੒͠ Ξοϓϩʔυ
 ͱ͍͏ํ๏͕͋Γ·͢ɻ • ৽نʹը໘Λ࡞੒͢ΔҎ֎ʹϒϩοΫΛ࢖ͬͯը໘ͷ ϨΠΞ΢τΛมߋ͢Δํ๏΋͋Γ·͢ɻ
26. 3.։ൃ࣌ͷখ࿩
27. ։ൃ࣌ͷখ࿩ • Τϥʔͷݟํ͸Ͳ͏͢Δͷ? • TwigͰphp͸࢖͑ͳ͍ͷ?
 ࢀߟURL) https://github.com/EC-CUBE/ec-cube/issues/1320 • URLͷ֬ೝͷ࢓ํ͸Ͳ͏͢Δͷ?
 ࢀߟURL) http://ec-cube.github.io/tips.html • URLΛมߋ͍ͨ͠৔߹ɺͲ͏͢Δͷ? • ը໘ભҠਤΈ͍ͨͳͷ͸ͳ͍ͷ? • URLʹhtmlΛ͚ͭͳ͍ํ๏͸Ͳ͏͢Δͷ?
 ࢀߟURL) http://amidaike.hatenablog.com/entry/2016/02/11/054219 • σβΠϯͷมߋ͸Ͳ͏͢Δͷ?
28. 4.࣭ٙԠ౴౳
29. ։ൃ࣌ͷࢀߟϖʔδ • Twigʹ͍ͭͯ΋ͬͱ஌Γ͍ͨํ͸ͪ͜ΒͷαΠτɺυ ΩϡϝϯτΛ͝ཡ͍ͩ͘͞ɻ
 http://docs.symfony.gr.jp/symfony2/reference/forms/ twig_reference.html
 http://docs.symfony.gr.jp/symfony2/reference/ twig_reference.html
30. ։ൃ࣌ͷࢀߟϖʔδ • GitHubWiki
 https://github.com/EC-CUBE/ec-cube/wiki • GitHubPages
 http://ec-cube.github.io • Qiitaͷهࣄ
 http://qiita.com/tags/EC-CUBE3