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
910
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
PicoRubyと暮らす、シェアハウスハック
ryosk7
0
250
ファインディの テックブログ爆誕までの軌跡
starfish719
1
670
月刊 競技プログラミングをお仕事に役立てるには
terryu16
1
1.2k
DevFest - Serverless 101 with Google Cloud Functions
tunmise
0
140
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
220
AWS re:Invent 2024個人的まとめ
satoshi256kbyte
0
140
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
3.4k
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
9
1.1k
ESLintプラグインを使用してCDKのセオリーを適用する
yamanashi_ren01
2
310
Azure AI Foundryのご紹介
qt_luigi
1
250
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
310
functionalなアプローチで動的要素を排除する
ryopeko
1
770
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
How GitHub (no longer) Works
holman
312
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
30
2.1k
Making the Leap to Tech Lead
cromwellryan
133
9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
11
890
Writing Fast Ruby
sferik
628
61k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
It's Worth the Effort
3n
184
28k
Why Our Code Smells
bkeepers
PRO
335
57k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
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