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
関数型まつりレポート for JuliaTokai #22
antimon2
0
150
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
VS Code Update for GitHub Copilot
74th
1
390
5つのアンチパターンから学ぶLT設計
narihara
1
110
GraphRAGの仕組みまるわかり
tosuri13
8
480
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
860
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
270
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
510
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
380
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Optimizing for Happiness
mojombo
379
70k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
GitHub's CSS Performance
jonrohan
1031
460k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Embracing the Ebb and Flow
colly
86
4.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Being A Developer After 40
akosma
90
590k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Adopting Sorbet at Scale
ufuk
77
9.4k
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