Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
EC-CUBE3デザイナー向け勉強会 #3
Search
amidaike
March 10, 2016
Programming
1
220
EC-CUBE3デザイナー向け勉強会 #3
amidaike
March 10, 2016
Tweet
Share
More Decks by amidaike
See All by amidaike
EC-CUBE3勉強会新しいデザインを作成してみよう
amidaike
0
460
EC-CUBE 3.0勉強会
amidaike
1
930
EC-CUBE3プラグイン勉強会
amidaike
0
460
EC-CUBE3デザイナー向け勉強会 #4
amidaike
0
310
EC-CUBE3コードリーディング #5
amidaike
1
1.5k
EC-CUBE3デザイナー向け勉強会 #1
amidaike
0
290
EC-CUBE3コードリーディング #4
amidaike
0
1.3k
EC-CUBE3デザイナー向け勉強会 #2
amidaike
1
2.8k
EC-CUBE3コードリーディング #3
amidaike
1
960
Other Decks in Programming
See All in Programming
iOS開発スターターキットの作り方
akidon0000
0
180
What's new in AppKit on macOS 26
1024jp
0
170
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
320
GPUを計算資源として使おう!
primenumber
1
290
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
990
AI Ramen Fight
yusukebe
0
110
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
150
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
180
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
230
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
220
Featured
See All Featured
Faster Mobile Websites
deanohume
308
31k
Designing for Performance
lara
610
69k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Automating Front-end Workflow
addyosmani
1370
200k
BBQ
matthewcrist
89
9.7k
Agile that works and the tools we love
rasmusluckow
329
21k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
A Modern Web Designer's Workflow
chriscoyier
695
190k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Transcript
EC-CUBE3σβΠφʔ͚ษڧձ #3 EC-CUBEؔϢʔβάϧʔϓ 2016-03-09
࣍ 1. Twigͷઆ໌ύʔτ2 2. ϒϩοΫΛ׆༻ͨ͠σβΠϯ࡞ 3. ։ൃ࣌ͷখ 4. ࣭ٙԠ
1.Twigͷઆ໌ύʔτ2
ϑΥʔϜը໘ͷ࡞ • TwigͰϑΥʔϜը໘Λ࡞͢Δͱ͖ɺઐ༻ͷग़ྗؔ ͱมΛͬͯ࡞͢Δ͜ͱ͕Ͱ͖·͢ɻ • ؔϑΟʔϧυΛग़ྗ͢ΔͷʹΑ͘ΘΕ·͢ɻҰํɺ มී௨ͦΕ΄Ͳ͍·ͤΜ͕ɺϑΟʔϧυͷϥϕ ϧɾIDଐੑɾΤϥʔɺͦͷଞϑΟʔϧυʹؔ͢Δ͋ΒΏ ΔใΛར༻͢Δ͜ͱ͕Ͱ͖·͢ɻ •
ϑΥʔϜΛ͏߹ɺController͔ΒFormTypeΫϥε Λͯ͠ѻ͍·͢ɻ
Formग़ྗؔ • form(view, variables) ϑΥʔϜશମͷHTMLΛग़ྗ͠·͢ɻ {{ form(form) }} !variablesʹ͋ͨΔformController͔ Β͞Εͨkey໊ͱͳΓ·͢ɻ
Formग़ྗؔ • form_start(view, variables) ϑΥʔϜͷ։࢝λάΛग़ྗ͠·͢ɻϑΥʔϜ͕ϑΝΠϧ ΞοϓϩʔυΛؚΜͰ͍Εɺదͳenctypeग़ྗ͠ ·͢ɻ {{ form_start(form, {'method':
'GET'}) }}
Formग़ྗؔ • form_end(view, variables) ϑΥʔϜͷऴྃλάΛग़ྗ͠·͢ɻ {{ form_end(form) }}
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'}}) }}
Formग़ྗؔ • form_errors(view) ࢦఆͨ͠ϑΟʔϧυͷΤϥʔΛग़ྗ͠·͢ɻ {{ form_errors(form.name) }} {{ form_errors(form) }}
Formग़ྗؔ • form_widget(view, variables) ࢦఆͨ͠ϑΟʔϧυͷHTMLΛग़ྗ͠·͢ɻ form_widgetͷୈೋҾมͷྻͰ͢ɻΑ͘ΘΕ ΔͷattrͰɺclassΛՃ͍ͨ࣌͠ͳͲʹΘΕ·͢ɻ {{ form_widget(form.name, {'attr':
{'class': 'foo'}}) }}
Formग़ྗؔ • form_row(view, variables) ࢦఆͨ͠ϑΟʔϧυͷʮߦʯɺϥϕϧɾΤϥʔϝοηʔ δɾΟδΣοτͷΈ߹Θͬͨ͞ͷΛग़ྗ͠·͢ɻ {{ form_row(form.name) }}
Formग़ྗؔ • form_rest(view, variables) ࢦఆͨ͠ϑΥʔϜʹ͍ͭͯ·ͩग़ྗ͞Ε͍ͯͳ͍શͯͷ ϑΟʔϧυΛग़ྗ͠·͢ɻhiddenɺग़ྗ͠Εͨ ϑΟʔϧυΛग़ྗͯ͘͠Ε·͢ɻ {{ form_rest(form) }}
Formม • ࠓ·Ͱग़͖ͯͨ΄ͱΜͲશͯͷTwigؔͰɺ࠷ޙͷ ҾมͷྻͰ͢ɻ ྫ͑ɺ࣍ͷίʔυϑΟʔ ϧυͷΟδΣοτΛग़ྗ͠·͕͢ɺಛผͳΫϥεΛ ؚΊΔΑ͏ʹมߋ͞Ε͍ͯ·͢ɻ {# ΟδΣοτΛग़ྗ͠ɺ "foo"ΫϥεΛ
Ճ͠·͢ #} {{ form_widget(form.name, { 'attr': {'class': 'foo'} }) }}
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 %}
Formม • ςϯϓϨʔτʹ form มؚ͕·Ε͍ͯͯnameϑΟʔ ϧυͷมʹΞΫηε͍ͨ͠ͱ͖ɺ FormViewΦϒδΣ ΫτͷvarsϓϩύςΟΛ͏͜ͱʹΑΓΞΫηεͰ͖· ͢ɻ <label
for="{{ form.name.vars.id }}" class="{{ form.name.vars.required ? 'required' : '' }}"> {{ form.name.vars.label }} </label>
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
ϑΥʔϜϨΠΞτ • 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͕ద༻͞Ε͍ͯ·͢ɻ
TwigΤΫεςϯγϣϯ • TwigʹطʹଟͷΈࠐΈؔɾϑΟϧλɾλάɾ ςετؚ͕·Ε͍ͯ·͕͢(લճͷษڧձͰઆ໌ͨ͠ ͷ)ɺSymfony2ͰTwig ςϯϓϨʔτͰίϯϙʔωϯ τͷػೳΛ͑ΔΑ͏ʹ͢ΔͨΊʹɺ Twigͷ֦ுػೳ ΛՃ͍ͯ͠·͢ɻ •
EccubeͰಠࣗͷؔϑΟϧλΛ࡞͍ͯ͠·͢ɻ (ECCUBROOT/src/Eccube/Twig/Extension/ EccubeExtension.phpΛࢀর)
Twigؔ • render ࢦఆ͞ΕͨίϯτϩʔϥʔຢURLΛग़ྗ͠·͢ɻ {{ render(uri, options = []) }}
Twigؔ • is_granted ςϯϓϨʔτͷதͰݱࡏͷϢʔβ͕ݖݶΛ͍࣋ͬͯΔ ͔ΛௐΔͨΊʹ͍·͢ɻݱࡏͷϢʔβʔ͕ࢦఆ͞Ε ͨϩʔϧΛ͍࣋ͬͯΕtrueΛฦ͠·͢ɻ {{ is_granted(role, object =
null, field = null) }}
Twigؔ • path ࢦఆ͞ΕͨϧʔςΟϯά໊ͷύεΛฦ͠·͢ɻ {{ path(name, parameters = [], relative
= false) }}
Twigؔ • url path(...) ͱಉ͡Ͱ͕͢ɺͪ͜ΒઈରURLΛฦ͠·͢ɻ {{ url(name, parameters = [],
schemeRelative = false) }}
Twigάϩʔόϧม • appଐੑ app มςϯϓϨʔτͷͲ͜Ͱ͏͜ͱ͕Ͱ ͖ɺڞ௨Ͱ༻͢ΔΦϒδΣΫτΛࢀরͰ͖ΔΑ͏ʹ ͳ͍ͬͯ·͢ɻ GlobalVariablesͷΠϯελϯεͰ͢ɻ app.user app.request
app.session app.environment app.debug ※EC-CUBE3ͰଞʹDI͞Ε͍ͯΔɻ
2.ϒϩοΫΛ׆༻ͨ͠σβΠϯ࡞
ϒϩοΫΛ׆༻ͨ͠σβΠϯ࡞ • EC-CUBE3Ͱϑϩϯτը໘Λ࡞͢Δ߹ɺ TwigϑΝΠϧΛ࡞ ཧը໘ͷίϯςϯπཧΑΓը໘Λ࡞ σβΠϯςϯϓϨʔτͱͯ͠ඪ४ͷϑΝΠϧ͔Β࡞͠ Ξοϓϩʔυ ͱ͍͏ํ๏͕͋Γ·͢ɻ • ৽نʹը໘Λ࡞͢ΔҎ֎ʹϒϩοΫΛͬͯը໘ͷ
ϨΠΞτΛมߋ͢Δํ๏͋Γ·͢ɻ
3.։ൃ࣌ͷখ
։ൃ࣌ͷখ • ΤϥʔͷݟํͲ͏͢Δͷ? • 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 • σβΠϯͷมߋͲ͏͢Δͷ?
4.࣭ٙԠ
։ൃ࣌ͷࢀߟϖʔδ • Twigʹ͍ͭͯͬͱΓ͍ͨํͪ͜ΒͷαΠτɺυ ΩϡϝϯτΛ͝ཡ͍ͩ͘͞ɻ http://docs.symfony.gr.jp/symfony2/reference/forms/ twig_reference.html http://docs.symfony.gr.jp/symfony2/reference/ twig_reference.html
։ൃ࣌ͷࢀߟϖʔδ • GitHubWiki https://github.com/EC-CUBE/ec-cube/wiki • GitHubPages http://ec-cube.github.io • Qiitaͷهࣄ http://qiita.com/tags/EC-CUBE3