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
460
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
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.6k
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
150
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
800
PEPCは何を変えようとしていたのか
ken7253
2
220
color-scheme: light dark; を完全に理解する
uhyo
7
490
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.5k
sappoRo.R #12 初心者セッション
kosugitti
0
280
自力でTTSモデルを作った話
zgock999
0
100
技術を改善し続ける
gumioji
0
120
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
140
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
SwiftUI Viewの責務分離
elmetal
PRO
2
270
Featured
See All Featured
Building an army of robots
kneath
303
45k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Documentation Writing (for coders)
carmenintech
67
4.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Docker and Python
trallard
44
3.3k
Navigating Team Friction
lara
183
15k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
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