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.8k
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
940
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デザイナー向け勉強会 #3
amidaike
1
220
EC-CUBE3コードリーディング #4
amidaike
0
1.3k
EC-CUBE3コードリーディング #3
amidaike
1
960
Other Decks in Programming
See All in Programming
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
20
11k
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
220
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
23
12k
Kiroで始めるAI-DLC
kaonash
2
580
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.2k
AI時代のUIはどこへ行く?
yusukebe
18
8.8k
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.7k
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
310
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
130
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Featured
See All Featured
Side Projects
sachag
455
43k
Site-Speed That Sticks
csswizardry
10
810
GraphQLとの向き合い方2022年版
quramy
49
14k
Code Review Best Practice
trishagee
70
19k
Docker and Python
trallard
45
3.6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
A better future with KSS
kneath
239
17k
We Have a Design System, Now What?
morganepeng
53
7.8k
Music & Morning Musume
bryan
46
6.8k
Raft: Consensus for Rubyists
vanstee
140
7.1k
How STYLIGHT went responsive
nonsquared
100
5.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
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