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デザイナー向け勉強会 #2
Search
amidaike
February 24, 2016
Programming
1
2.7k
EC-CUBE3デザイナー向け勉強会 #2
amidaike
February 24, 2016
Tweet
Share
More Decks by amidaike
See All by amidaike
EC-CUBE3勉強会新しいデザインを作成してみよう
amidaike
0
450
EC-CUBE 3.0勉強会
amidaike
1
900
EC-CUBE3プラグイン勉強会
amidaike
0
460
EC-CUBE3デザイナー向け勉強会 #4
amidaike
0
300
EC-CUBE3コードリーディング #5
amidaike
1
1.5k
EC-CUBE3デザイナー向け勉強会 #1
amidaike
0
280
EC-CUBE3デザイナー向け勉強会 #3
amidaike
1
210
EC-CUBE3コードリーディング #4
amidaike
0
1.3k
EC-CUBE3コードリーディング #3
amidaike
1
960
Other Decks in Programming
See All in Programming
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
190
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
480
受け取る人から提供する人になるということ
little_rubyist
0
250
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
250
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
110
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.2k
CSC509 Lecture 13
javiergs
PRO
0
110
Jakarta EE meets AI
ivargrimstad
0
220
Quine, Polyglot, 良いコード
qnighy
4
650
Realtime API 入門
riofujimon
0
150
距離関数を極める! / SESSIONS 2024
gam0022
0
290
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
420
Designing for humans not robots
tammielis
250
25k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
Agile that works and the tools we love
rasmusluckow
327
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Building an army of robots
kneath
302
43k
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
Transcript
EC-CUBE3σβΠφʔ͚ษڧձ #2 EC-CUBEؔϢʔβάϧʔϓ 2016-02-24
ઌि EC-CUBE3.0.9 ͕ϦϦʔε ओͳಛͱͯ͠ ɾϓϥάΠϯػೳͷվળ ɾෆ۩߹ͷվम
࣍ 1. EC-CUBE3.0.9ͷόʔδϣϯΞοϓํ๏ 2. Twigͷઆ໌ 3. ࣭ٙԠ
1.EC-CUBE3.0.9ͷ όʔδϣϯΞοϓํ๏
EC-CUBE3.0.9ͷόʔδϣϯΞοϓํ๏ • ͢ͰʹEC-CUBE3.0.9Λಋೖ͍ͯ͠Δํඞཁ͋Γ·ͤΜɻ • EC-CUBE3.0.x͔Β3.0.9ͷΞοϓϩʔυҎԼͷ௨Γ (http://ec-cube.github.io/update.htmlΛࢀߟ) 1.σΟϨΫτϦΛ্ॻ͖ srcɺhtmlɺvendorσΟϨΫτϦΛ্ॻ͖ 2.ϑΝΠϧͷ্ॻ͖ app/consoleɺcli-config.phpɺcomposer.jsonɺcomposer.lockɺ
eccube_install.shɺ autload.php(3.0.8Ҏ֎͔ΒόʔδϣϯΞοϓ͞ΕΔํͷΈ) 3.ϚΠάϨʔγϣϯͷ࣮ߦ http://υϝΠϯ/install.php/migration ʹΞΫηε͠ϚΠάϨʔγϣϯΛ࣮ߦ
2.Twigͷઆ໌
Twigͱ • TwigͱPHPͷͨΊͷςϯϓϨʔτΤϯδϯͰ͢ɻ • Symfony2Ͱඪ४ͷςϯϓϨʔτΤϯδϯͰ͋Γɺ EC-CUBE3ͰSmartyͰͳ͘TwigΛ͍ͬͯ·͢ɻ • TwigʹҎԼͷಛ͕͋Γ·͢ɻ 1.ߴ :
PHPίʔυ·ͰίϯύΠϧ͞Ε࣮ͯߦ 2.֦ு͕༰қ : ಠࣗͷΧελϜλάϑΟϧλΛఆٛ 3.ηΩϡΞ : αϯυϘοΫεϞʔυΛඋ͍͑ͯΔ
֓ཁ • ςϯϓϨʔτɺ୯ͳΔςΩετϑΝΠϧ • ςϯϓϨʔτɺͲΜͳςΩετϕʔεͷܗࣜ (HTMLɺ XMLɺetc)Ͱੜ͢Δ͜ͱ͕Մೳ • ಛʹܾ·֦ͬͨுࢠ͕ͳ͍ͷͰ.twigͰͳͯ͘.html
.xmlͰՄೳ • ςϯϓϨʔτʹม͕ࣜهड़Ͱ͖ɺ ςϯϓϨʔτ ͕ධՁ͞ΕΔͱ͖ʹʹஔ͖͑ΒΕΔ
Twigͷઆ໌ • ࠷খߏͷςϯϓϨʔτྫ <!DOCTYPE html> <html> <head> <title>My Webpage</title> </head>
<body> <ul id="navigation"> {% for item in navigation %} <li><a href="{{ item.href }}">{{ item.caption }}</a></li> {% endfor %} </ul> <h1>My Webpage</h1> {{ a_variable }} </body> </html>
Twigͷߏ • Twigʹ3छྨͷهड़ํ๏͕͋ΓɺͦΕͧΕ {{ }}ɺ{% %}ɺ{# #} ͕ଘࡏ͠·͢ɻ {{ }}
: มΛग़ྗ͢Δ࣌ʹ͏ {% %} : ࣜΛѻ͏࣌ʹ͏ {# #} : ίϝϯτ࣌ʹ͏
ม • ΞϓϦέʔγϣϯ͔ΒTwigʹมΛ͢͜ͱͰɺςϯ ϓϨʔτͷதͰͦͷมΛऔΓѻ͏͜ͱ͕Ͱ͖·͢ɻ • มͷଐੑ(ΦϒδΣΫτྻ)ʹΞΫηε͢Δʹɺ ʮ.ʯ͔ʮ[]ʯΛ͍·͢ɻ(->͍·ͤΜ) {{ Product.name }}
{{ Product['name'] }}
มͷೖ • TwigͰมΛѻ͏͜ͱՄೳͰ͢ɻมʹରͯ͠ Λೖ͢ΔʹʮsetʯΛ͍·͢ɻ {% set foo = 'foo' %}
{% set foo = [1, 2] %} {% set foo = {'foo': 'bar'} %}
ϑΟϧλ • มϑΟϧλͰΛ০͢Δ͜ͱ͕Ͱ͖·͢ɻ ϑΟ ϧλύΠϓه߸ʮ|ʯͰ มʹରͯ͠༻͠ɺϑΟϧ λͷछྨʹΑͬͯҾΛࢦఆͰ͖·͢ɻ·ͨɺϑΟϧ λଓ͚ͯهड़͢Δ͜ͱՄೳͰ͢ɻ {{ name|striptags|title
}} {{ list|join(', ') }} {% filter upper %} This text becomes uppercase {% endfilter %}
ϑΟϧλͷछྨ • ϑΟϧλʹҎԼ͕ඪ४Ͱ༻ҙ͞Ε͓ͯΓɺಠࣗͰϑΟ ϧλΛ࡞͢Δ͜ͱՄೳͰ͢ɻEC-CUBE3Ͱಠࣗ ϑΟϧλΛ࡞͍ͯ͠·͢ɻ(ECCUBROOT/src/ Eccube/Twig/Extension/EccubeExtension.phpΛࢀর) absɺbatchɺcapitalizeɺconvert_encodingɺdateɺ date_modifyɺdefaultɺescapeɺfirstɺformatɺjoinɺ json_encodeɺkeysɺlastɺlengthɺlowerɺmergeɺnl2brɺ number_formatɺrawɺreplaceɺreverseɺroundɺsliceɺ
sortɺsplitɺstriptagsɺtitleɺtrimɺupperɺurl_encode
ؔ • ؔϑΟϧλͱҟͳΓ୯ಠͰݺͼग़ͤͨΓɺ੍ޚߏ จͷதͰར༻ՄೳͰ͢ɻׅؔހ͖()Ͱݺͼग़͞Ε ·͢ɻ {{ date('-2days') }} {{ dump(user)
}} {{ max(1, 3, 2) }} {% for i in range(0, 3) %} {{ i }}, {% endfor %}
ؔͷछྨ • ؔʹҎԼ͕ඪ४Ͱ༻ҙ͞Ε͓ͯΓɺಠࣗͰؔΛ ࡞͢Δ͜ͱՄೳͰ͢ɻEC-CUBE3ͰಠࣗؔΛ࡞ ͍ͯ͠·͢ɻ(ECCUBROOT/src/Eccube/Twig/ Extension/EccubeExtension.phpΛࢀর) attributeɺblockɺconstantɺcycleɺ dateɺdumpɺincludeɺmaxɺminɺparentɺ randomɺrangeɺsourceɺ template_from_string
੍ޚߏจ • ੍ޚߏจɺϓϩάϥϜΛ੍ޚ͢Δ݅(i.e. if/elseif/ else)ɺforɺblockͷΑ͏ͳͷؚ͕·Ε·͢ɻ ੍ޚߏ จɺ{% ... %} ͷதʹ
هड़͞Ε·͢ɻ <h1>Members</h1> <ul> {% for user in users %} <li>{{ user.username|e }}</li> {% endfor %} </ul>
੍ޚߏจͷछྨ • ੍ޚߏจʹҎԼ͕ඪ४Ͱ༻ҙ͞Ε͍ͯ·͢ɻ autoescapeɺblockɺdoɺembedɺ extendsɺfilterɺflushɺforɺfromɺifɺ importɺincludeɺmacroɺsandboxɺsetɺ spacelessɺuseɺverbatim
ίϝϯτ • ίϝϯτΞτ͢Δʹίϝϯτߏจ {# ... #} Λ͍· ͢ɻίϝϯτͰғ·Ε͍ͯΔ෦ϒϥβʹग़ྗ͞ Ε·ͤΜɻ {#
note: disabled template because we no longer use this {% for user in users %} ... {% endfor %} #}
ςϯϓϨʔτͷΠϯΫϧʔυ • ΠϯΫϧʔυΛ͑ଞͷTwigϑΝΠϧΛಡΈࠐΉ͜ ͱ͕Ͱ͖ɺͦͷ༰Λදࣔ͢Δ͜ͱ͕ՄೳͰ͢ɻԼσΟ ϨΫτϦʹTwigϑΝΠϧ͕͋Δ߹ɺ/Ͱ֊Λݩʹݺ ͼग़ͤ·͢ɻ {% include 'sidebar.html' %}
{% for box in boxes %} {% include "render_box.html" %} {% endfor %} {% include "sections/articles/sidebar.html" %}
ςϯϓϨʔτͷܧঝ • Twigͷಛͱͯ͠ςϯϓϨʔτܧঝ͕ߦ͑·͢ɻςϯϓ ϨʔτܧঝΛ͑ɺجຊͱͳΔͱͳΔςϯϓϨʔτ͕ ߏஙͰ͖ɺ͜ͷςϯϓϨʔτΛ֤Twig͔Βܧঝ͠ɺ͞Βʹ ࢠςϯϓϨʔτͰΦʔόʔϥΠυͰ͖ΔϒϩοΫΛఆٛͯ͠ ͓͘͜ͱͰαΠτڞ௨ͱͳΔσβΠϯ͕࡞Ͱ͖·͢ɻ • ࣍ϖʔδͰجຊʹͳΔςϯϓϨʔτdefault_frame.twigΛ ఆٛ͠ɺ͜ͷςϯϓϨʔτͰ2ΧϥϜߏͷϖʔδͱͯ͠
͑ΔͷͰɺ ؆୯ͳHTMLͷࠎΈͷυΩϡϝϯτ͕ఆ ٛ͞Ε͍ͯ·͢ɻ
ςϯϓϨʔτͷܧঝ <!DOCTYPE html> <html> <head> {% block head %} <link
rel="stylesheet" href="style.css" /> <title>{% block title %}{% endblock %} - My Webpage</ title> {% endblock %} </head> <body> <div id="content">{% block content %}{% endblock %}</div> <div id="footer"> {% block footer %} © Copyright 2011 by <a href="http:// domain.invalid/">you</a>. {% endblock %} </div> </body> </html>
ςϯϓϨʔτͷܧঝ • લϖʔδͷྫͰɺblockλάͰɺ4ͭͷϒϩοΫ͕ఆٛ͞Ε͍ͯ·͢ɻ͜ͷ ϒϩοΫɺࢠςϯϓϨʔτ͔ΒλάΛઃఆ͢Δ͜ͱ͕ՄೳͰ͢ɻblockλά ͕ߦ͏͜ͱɺࢠςϯϓϨʔτ͔Β֤ϒϩοΫͷ෦ΛΦʔόʔϥΠυՄೳ ͩͱ͍ࣔͯ͠·͢ɻ • ࣍ϖʔδͰجຊͱͳΔࢠϖʔδΛఆٛ͠ɺextendsλάΛར༻ͯ͠جຊͱ ͳΔςϯϓϨʔτΛݺͼग़͢Α͏ʹ͠·͢ɻextendsλάɺςϯϓϨʔτΤ ϯδϯʹɺ
͜ͷςϯϓϨʔτɺผͷςϯϓϨʔτΛ"extends (ܧঝ/֦ு)" ͍ͯ͠Δͷͩͱ͑ΔͷͰ͢ɻextendsλάςϯϓϨʔτͷ࠷ॳʹهड़͢ Δඞཁ͕͋Γ·͢ɻ • ࠓճͷࢠςϯϓϨʔτͰɺfooterϒϩοΫΛఆ͍ٛͯ͠ͳ͍ͷͰɺ ςϯϓ Ϩʔτͷ͕ͦͷ··ར༻͞Ε·͢ɻ
ςϯϓϨʔτͷܧঝ {% extends "default_frame.html" %} {% block title %}Index{% endblock
%} {% block head %} {{ parent() }} <style type="text/css"> .important { color: #336699; } </style> {% endblock %} {% block content %} <h1>Index</h1> <p class="important"> Welcome to my awesome homepage. </p> {% endblock %}
ςϯϓϨʔτͷܧঝ • parentؔΛ͑ɺϒϩοΫͷ༰ΛϨϯμϦϯά ͢Δ͜ͱͰ͖·͢ɻ {% block footer %} <h3>Table Of
Contents</h3> ... {{ parent() }} {% endblock %}
HTMLΤεέʔϓ • HTMLΛੜ͢ΔࡍʹΤεέʔϓͯ͠ग़ྗ͢Δඞཁ͕ ͋Γ·͕͢ɺखಈͰΤεέʔϓ͢Δํ๏ͱσϑΥϧτͰ ࣗಈͰશͯΤεέʔϓ͢Δํ๏͕͋Γ·͢ɻTwigͰσ ϑΥϧτͰࣗಈΤεέʔϓ͞Ε·͢ɻ ɾ{{ }} Λ͏ͱࣗಈͰΤεέʔϓॲཧ͞ΕΔ {{
user.username }} ɾeϑΟϧλΛͬͯखಈͰΤεέʔϓॲཧ {{ user.username|e }}
HTMLΤεέʔϓ • ΤεέʔϓʹࣗಈͰhtmlΤεέʔϓॲཧ͕ߦΘΕ· ͢ɻมΛίϯςΩετͰग़ྗ͍ͨ࣌͠ɺ໌ࣔతʹΤ εέʔϓ͢Δඞཁ͕͋Γ·͢ɻ {{ user.username|e('js') }} {{ user.username|e('css')
}} {{ user.username|e('url') }} {{ user.username|e('html_attr') }}
HTMLΤεέʔϓ • ߹ʹΑΓࣗಈͰΤεέʔϓΛͤͨ͘͞ͳ͍(HTMLλά Λͦͷ··͍͍ͨ)͕࣌͋Γ·͢ɻͦͷ߹ɺઐ༻ͷ ϑΟϧλΛ͍·͢ɻͨͩ͠ɺηΩϡϦςΟʹҙ͢Δ ඞཁ͕͋Γ·͢ɻ ɾΤεέʔϓͨ͘͠ͳ͍࣌ɺrawΛ͏ {{ Product.description_list|raw }}
ԋࢉࢠ • TwigͰphpͱಉ࢛͘͡ଇԋࢉࢠൺֱͳͲͷԋࢉࢠ͕ར༻ ՄೳͰ͢ɻ b-and, b-xor, b-or, or, and, ==,
!=, <, >, >=, <=, in, matches, starts with, ends with, .., +, -, ~, *, /, //, %, is, **, |, [], and .: ͕͋Γ·͢ɻ • ҎԼͷԋࢉࢠTwigͰΑ͘ར༻͞Ε·͢ɻ | : ϑΟϧλͷద༻ ~ : Λͯ͢จࣈྻʹมͯ݁͠߹ .(υοτ) : ΦϒδΣΫτͷϓϩύςΟΛऔಘ
3.࣭ٙԠ
։ൃ࣌ͷࢀߟϖʔδ • Twigʹ͍ͭͯͬͱΓ͍ͨํͪ͜ΒͷαΠτɺυ ΩϡϝϯτΛ͝ཡ͍ͩ͘͞ɻ http://twig.sensiolabs.org http://twig.sensiolabs.org/pdf/Twig.pdf
։ൃ࣌ͷࢀߟϖʔδ • GitHubWiki https://github.com/EC-CUBE/ec-cube/wiki • GitHubPages http://ec-cube.github.io • Qiitaͷهࣄ http://qiita.com/tags/EC-CUBE3