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
2.8k
1
Share
EC-CUBE3デザイナー向け勉強会 #2
amidaike
February 24, 2016
More Decks by amidaike
See All by amidaike
EC-CUBE3勉強会新しいデザインを作成してみよう
amidaike
0
480
EC-CUBE 3.0勉強会
amidaike
1
970
EC-CUBE3プラグイン勉強会
amidaike
0
480
EC-CUBE3デザイナー向け勉強会 #4
amidaike
0
320
EC-CUBE3コードリーディング #5
amidaike
1
1.5k
EC-CUBE3デザイナー向け勉強会 #1
amidaike
0
300
EC-CUBE3デザイナー向け勉強会 #3
amidaike
1
230
EC-CUBE3コードリーディング #4
amidaike
0
1.3k
EC-CUBE3コードリーディング #3
amidaike
1
970
Other Decks in Programming
See All in Programming
Are We Really Coding 10× Faster with AI?
kohzas
0
130
Explore CoroutineScope
tomoeng11
0
170
Back to the roots of date
jinroq
0
730
Firefoxにコントリビューションして得られた学び
ken7253
2
160
PHPer、Cloudflare に引っ越す
suguruooki
1
140
mruby on C#: From VM Implementation to Game Scripting (RubyKaigi 2026)
hadashia
2
1.6k
Road to RubyKaigi: Play Hard(ware)
makicamel
1
550
Lightning-Fast Method Calls with Ruby 4.1 ZJIT / RubyKaigi 2026
k0kubun
3
2.6k
継続的な負荷検証を目指して
pyama86
1
560
Building on Bluesky's AT Protocol with Ruby
mackuba
0
110
ソースコード→AST→オペコード、の旅を覗いてみる
o0h
PRO
1
130
20年以上続くプロダクトでも使い続けられる静的解析ツールを求めて
matsuo_atsushi
0
140
Featured
See All Featured
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
61
43k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
Visualization
eitanlees
150
17k
Principles of Awesome APIs and How to Build Them.
keavy
128
17k
Testing 201, or: Great Expectations
jmmastey
46
8.1k
Java REST API Framework Comparison - PWX 2021
mraible
34
9.3k
Bash Introduction
62gerente
615
210k
Building Flexible Design Systems
yeseniaperezcruz
330
40k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.3k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
0
1.3k
Test your architecture with Archunit
thirion
1
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