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
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
生成AI時代のコンポーネントライブラリの作り方
touyou
1
210
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
120
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.7k
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
VS Code Update for GitHub Copilot
74th
2
640
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
Is Xcode slowly dying out in 2025?
uetyo
1
270
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
210
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
How to Ace a Technical Interview
jacobian
278
23k
Rails Girls Zürich Keynote
gr2m
95
14k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Building Applications with DynamoDB
mza
95
6.5k
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