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
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
650
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
技術同人誌をMCP Serverにしてみた
74th
1
640
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
86
29k
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
Is Xcode slowly dying out in 2025?
uetyo
1
270
PipeCDのプラグイン化で目指すところ
warashi
1
270
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Music & Morning Musume
bryan
46
6.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
How STYLIGHT went responsive
nonsquared
100
5.6k
Agile that works and the tools we love
rasmusluckow
329
21k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Making Projects Easy
brettharned
116
6.3k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
The Pragmatic Product Professional
lauravandoore
35
6.7k
The Invisible Side of Design
smashingmag
301
51k
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