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
Webデザイナー向け!EC-CUBE3勉強会2
Search
amidaike
September 27, 2015
Programming
0
3.2k
Webデザイナー向け!EC-CUBE3勉強会2
amidaike
September 27, 2015
Tweet
Share
More Decks by amidaike
See All by amidaike
EC-CUBE3勉強会新しいデザインを作成してみよう
amidaike
0
430
EC-CUBE 3.0勉強会
amidaike
1
890
EC-CUBE3プラグイン勉強会
amidaike
0
450
EC-CUBE3デザイナー向け勉強会 #4
amidaike
0
290
EC-CUBE3コードリーディング #5
amidaike
1
1.4k
EC-CUBE3デザイナー向け勉強会 #1
amidaike
0
260
EC-CUBE3デザイナー向け勉強会 #3
amidaike
1
200
EC-CUBE3コードリーディング #4
amidaike
0
1.2k
EC-CUBE3デザイナー向け勉強会 #2
amidaike
1
2.7k
Other Decks in Programming
See All in Programming
Creating Retro-Style Photos Using Swift
ski
1
370
incrementalモデルの理解を深める
ikkimiyazaki
2
640
どうしてこうなった命名集 ~🔥編~ / OOC 2024 LT
pictiny
4
2.9k
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
myzkyy
9
6.5k
9年開発を牽引して見えてきた、共通化すべきものと個別でつくるもの ~プログラム言語~
shinout
1
310
DocC Tutorial と TCA におけるテスト機能の紹介
kalupas226
1
330
PHPerKaigi 2024〜10年以上動いているレガシーなバッチシステムを Kubernetes(Amazon EKS) に移行する取り組み〜
tshinowpub
1
220
Compiling Python to WebAssembly with py2wasm
syrusakbary
0
140
Deep Dive 大規模システムアーキテクチャ/開発組織エンジニアリング / Deep Dive Large-Scale System Architecture, Development Organization Engineering
nrslib
15
2.9k
OpenAPI を守るのは難しい
ohmori_yusuke
2
150
object-oriented-conference-2024
fuwasegu
6
2k
導入から5年が経って見えた Datadog APM 運用の課題
bgpat
2
540
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
48
9.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
How to train your dragon (web standard)
notwaldorf
71
5.1k
Building Flexible Design Systems
yeseniaperezcruz
317
37k
Teambox: Starting and Learning
jrom
126
8.4k
A designer walks into a library…
pauljervisheath
199
23k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
A Tale of Four Properties
chriscoyier
150
22k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Designing the Hi-DPI Web
ddemaree
275
33k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Transcript
WebσβΠφʔ͚ʂ EC-CUBEษڧձ2 EC-CUBEؔϢʔβάϧʔϓ 2015-09-24
ࣗݾհ גࣜձࣾΩϡʔϧ ࢁଜ ਗ਼࢙ ຊۀγεςϜΤϯδχΞ EC-CUBE3ͷίϛολʔ(@k-yamamura) ͯ͠·͢
ίϛοτͯ͠·͢ɻ
αϚϦʔ 1.લճͷৼΓฦΓ 2.σΟϨΫτϦߏͷઆ໌ 3.ϑΝΠϧͷઆ໌ 4.Twigͷઆ໌ 5.࣮ࡍʹը໘Λ৽ن࡞/มߋ͢Δํ๏
1.લճͷৼΓฦΓ
લճͷৼΓฦΓ • EC-CUBE3ͷΠϯετʔϧํ๏ • σβΠϯϑϨʔϜϫʔΫ • ରԠϒϥβʹ͍ͭͯ • σόοάϞʔυͷ༗ޮԽ •
ϑϩϯτը໘ͷϨΠΞτ • ςϯϓϨʔτͷөॱং
EC-CUBEͷΠϯετʔϧํ๏ • http://www.ec-cube.net/download/ ࠷৽ͷEC-CUBE3Λμϯϩʔυ • Macͷํͪ͜Β http://amidaike.hatenablog.com/entry/ 2015/07/02/015914 • Windowsͷํͪ͜Β
http://qiita.com/chihiro-adachi/items/ 5fb2175454d3bfa047ac
Bootstrap3ͷ࠾༻ • ϑϩϯτΧελϚΠζ͞ΕͨBootstrap3.3.4Λ༻͠ɺཧը໘ EC-CUBE3.0.0ϦϦʔε࣌Ͱ࠷৽ͷBootstrap3.3.5Λ༻ • ϑϩϯτը໘ͰBootstrapΛΧελϚΠζ͠ɺඞཁͳଐੑ͚ͩΛ ൈ͖ग़ͯ͠༻͍ͯ͠ΔͨΊɺ༻ग़དྷΔclassݶΒΕ͍ͯΔ • ཧը໘ͰBootstrap3.3.5Ͱ༻ҙ͞Ε͍ͯΔclassશͯ༻Մೳ •
btnͷ৭ͳͲσβΠϯʹؔΘΔ෦EC-CUBE3ଆͷcssͰఆٛ͠ ͍ͯ͠Δclass͕͋ΔͨΊѻ͏ͨΊʹҙ͕ඞཁ
ରԠϒϥβʹ͍ͭͯ OS ϒϥβ Windows (Windows7Ҏ߱) Internet Explorer10 Ҏ߱ Google Chrome
࠷৽൛ Firefox ࠷৽൛ Mac Safari ࠷৽൛ iOS(7Ҏ߱) Safari ࠷৽൛ Android(4.1Ҏ߱) ඪ४ϒϥβ ࠷৽൛
σόοάϞʔυͷ༗ޮԽ • ௨ৗ / /index.phpͰΞΫηε͍ͯ͠Δͱ͜ΖΛ /index_dev.php ͱॻ͖͑ͯΞΫηε͢Δ͜ͱʹΑΓɺtwigϑΝΠϧ͕Ωϟο γϡ͞ΕͣʹσόοάϞʔυ͕༗ޮʹͳΓ·͢ɻ http://localhost/index_dev.php
• You are not allowed to access this file. Check index_dev.php for more information.ͱΤϥʔ͕දࣔ͞ΕΔ߹ɺindex_dev.phpΛ ։͖ɺΞΫηεݩͷIPΛҎԼͷྻʹՃ͍ͯͩ͘͠͞ɻ $allow = array( '127.0.0.1', 'fe80::1', '::1', );
ϑϩϯτը໘ͷϨΠΞτ フロン → c div#main → m div#main_top ※C E
div#main_middle ドロ div#main_bottom レイアウト管理画面とフロントの対比イメージ header#header div#contents_top ↑ このエリアが div#contentsで 囲われている ↓ div#side_left.side div#side_right.side ※レ レイ ① ② div#contents_bottom ③ footer#footer ④
ςϯϓϨʔτͷөॱং • σβΠϯςϯϓϨʔτΛ࡞ޙɺϑΝΠϧΛஔ͢Δ σΟϨΫτϦʹΑͬͯ༏ઌॱҐ͕͋Γ·͢ɻҎԼͷॱ ংͰ֘͢ΔςϯϓϨʔτϑΝΠϧ͕ଘࡏ͢Δͱઌʹ ө͞Ε·͢ɻ(ϑϩϯτͷΈͷઆ໌ ) 1. ECCUBEROOT/app/template/default 2.
ECCUBEROOT/src/Eccube/Resource/template/default 3. ECCUBEROOT/app/Plugin/[plugin_code]/Resource/ template/default
2.σΟϨΫτϦߏͷઆ໌
σΟϨΫτϦߏͷઆ໌ • લ४උͱͯ͠ຊମଆͷtwigϑΝΠϧΛ ECCUBEROOT/app/templateʹίϐʔ • Ұ൪खͬऔΓૣ͘ରԠՄೳ • ݱߦͷσΟϨΫτϦߏͱશ͘ͷಉҰڥ͕࡞Մೳ • ެ։σΟϨΫτϦECCUBEROOT/html/template/
defaultԼ
σΟϨΫτϦߏͷઆ໌ ECCUBEROOT/src/Eccube/Resource/template/default ҎԼͷϑΝΠϧΛίϐʔͯ͠ɺ ECCUBEROOT/app/template/default Լίϐʔͯ͠मਖ਼Λߦ͏ɻ adminཧը໘ଆͷϑΝΠϧͰɺdefaultϑϩϯτը ໘ଆͷϑΝΠϧ͕ஔ͞Ε͍ͯΔɻ
σΟϨΫτϦߏͷઆ໌ • /ECCUBEROOT/html ͕ެ։σΟϨΫτϦͱͳΓɺ ϦιʔεϑΝΠϧ(cssը૾ ϑΝΠϧʑ)Λஔ (֤σΟϨΫτϦͷઆ໌ޙड़)
σΟϨΫτϦߏͷઆ໌ σΟϨΫτϦ໊ ػೳ໊ defaultԼ ڞ௨ɺτοϓϖʔδ Block ϒϩοΫཧ Cart Χʔτ Contact
͓͍߹Θͤ Entry ձһొ Forgot ύεϫʔυϦϚΠϯμʔ Form ϑΥʔϜ߲༻ςϯϓϨʔτ Help ϔϧϓ Mail ϝʔϧૹ৴༻ςϯϓϨʔτ Mypage ϚΠϖʔδ Product Ұཡɺৄࡉ Shopping ߪೖ
3.ϑΝΠϧͷઆ໌
ϑΝΠϧͷઆ໌ • defaultԼʹओʹϑϩϯτը໘ڞ௨ͱͳΔ twigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ block.twig ϒϩοΫ੍ޚ༻ default_frame.twig ը໘ߏ༻ςϯϓϨʔτ
error.twig ڞ௨Τϥʔը໘ index.twig τοϓϖʔδ pagination.twig վϖʔδ༻
ϑΝΠϧͷઆ໌ • BlockσΟϨΫτϦԼʹը໘Λߏ͢Δͨ ΊͷϨΠΞτ༻twigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ cart.twig ΧʔτදࣔϨΠΞτ category.twig ΧςΰϦදࣔϨΠΞτ
footer.twig ϑολʔ༻ϨΠΞτ free.twig ϑϦʔΤϦΞ༻ϨΠΞτ garally.twig ΪϟϥϦʔ༻ϨΠΞτ login.twig ϩάΠϯ༻ϨΠΞτ logo.twig γϣοϓϩΰ༻ϨΠΞτ new_product.twig ৽ண༻ϨΠΞτ news.twig ৽ணใ༻ϨΠΞτ search_product.twig ݕࡧ༻ϨΠΞτ
ϑΝΠϧͷઆ໌ • CartσΟϨΫτϦԼʹΧʔτը໘Λදࣔ͢ ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ index.twig Χʔτը໘
ϑΝΠϧͷઆ໌ • ContactσΟϨΫτϦԼʹ͓͍߹Θͤը ໘Λදࣔ͢ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ complete.twig ͓͍߹Θͤྃը໘ confirm.twig ͓͍߹Θͤ֬ೝը໘
index.twig ͓͍߹Θͤೖྗը໘
ϑΝΠϧͷઆ໌ • EntryσΟϨΫτϦԼʹձһొΛදࣔ͢ ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ activate.twig ຊొྃը໘ complete.twig ձһొೖྗྃը໘
confirm.twig ձһొ֬ೝը໘ index.twig ձһొೖྗը໘
ϑΝΠϧͷઆ໌ • ForgotσΟϨΫτϦԼʹύεϫʔυϦϚΠ ϯμʔը໘Λදࣔ͢ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ complete.twig ϦϚΠϯμʔϝʔϧૹ৴ྃը໘ index.twig ύεϫʔυ࠶ൃߦೖྗը໘
reset.twig ύεϫʔυมߋྃը໘
ϑΝΠϧͷઆ໌ • FormσΟϨΫτϦԼʹϑΥʔϜ߲ΛϨϯμϦϯ ά͢ΔࡍͷσβΠϯϕʔεͱͳΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ form_layout.twig ϑΥʔϜϨϯμϦϯά༻
ϑΝΠϧͷઆ໌ • HelpσΟϨΫτϦԼʹαΠτͷجຊͱͳΔنϓ ϥΠόγʔϙϦγʔը໘Λදࣔ͢ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ about.twig ͜ͷαΠτʹ͍ͭͯը໘ agreement.twig ձһొنը໘
guide.twig ͝ར༻ΨΠυը໘ privacy.twig ϓϥΠόγʔϙϦγʔը໘ tradelaw.twig ಛఆऔҾ๏ը໘
ϑΝΠϧͷઆ໌ • MailσΟϨΫτϦԼʹϝʔϧૹ৴ςϯϓ Ϩʔτ༻twigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ contact_mail.twig ͓͍߹Θͤ༻ϝʔϧςϯϓϨʔτ customer_withdraw_mail .twig
ձһୀձ༻ϝʔϧςϯϓϨʔτ entry_complete.twig ձһొྃ༻ϝʔϧςϯϓϨʔτ entry_confirm.twig ձһԾొ༻ϝʔϧςϯϓϨʔτ forgot_mail.twig ύεϫʔυϦϚΠϯμ֬ೝ༻ϝʔϧςϯϓ Ϩʔτ order.twig ߪೖྃ༻ϝʔϧςϯϓϨʔτ reset_complete_mail.twi ύεϫʔυมߋྃ༻ϝʔϧςϯϓϨʔτ
ϑΝΠϧͷઆ໌ • MypageσΟϨΫτϦԼʹϩάΠϯޙͷձһ ใจཤྺʑΛදࣔ͢ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ chage.twig ձһใมߋೖྗը໘ change_complete.twig ձһใมߋྃը໘
delivery.twig ͓ಧ͚ઌҰཡը໘ delivery_edit.twig ͓ಧ͚ઌೖྗ/มߋը໘ favorite.twig ͓ؾʹೖΓը໘ history.twig ߪೖཤྺৄࡉը໘ index.twig ߪೖཤྺҰཡը໘ login.twig ϩάΠϯը໘ mail_view.twig ϝʔϧૹड৴ཤྺը໘ navi.twig ϚΠϖʔδઐ༻λϒ withdraw.twig ձһୀձը໘ withdraw_complete.twig ձһୀձྃը໘ withdraw_confirm.twig ձһୀձ֬ೝը໘
ϑΝΠϧͷઆ໌ • ProductσΟϨΫτϦԼʹߪೖલͷը ໘Λදࣔ͢ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ detail.twig ৄࡉը໘ list.twig Ұཡը໘
ϑΝΠϧͷઆ໌ • ShoppingσΟϨΫτϦԼʹߪೖϑϩʔ࣌ ʹදࣔ͢ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ complete.twig ߪೖྃը໘ index.twig ߪೖ֬ೝը໘
login.twig γϣοϐϯά༻ϩάΠϯը໘ nonmember.twig ඇձһใೖྗը໘ shipping.twig ͓ಧ͚ઌࢦఆը໘ shipping_edit.twig ͓ಧ͚ઌ৽نೖྗը໘ shipping_multiple.twig ͓ಧ͚ઌෳࢦఆը໘ shopping_error.twig ߪೖΤϥʔը໘
4.Twigͷઆ໌
Twigͷઆ໌ • EC-CUBE3͔Βը໘Λ࡞͢Δͷʹ2ܥͰͬ ͍ͯͨSmartyͰͳ͘TwigΛ࠾༻ http://twig.sensiolabs.org/doc/intro.html http://docs.symfony.gr.jp/symfony2/book/ templating.html • TwigΛ࠾༻͢Δ͜ͱͰ؆ܿͰՄಡੑͷߴ͍ς ϯϓϨʔτΛهड़Մೳ
Twigͷઆ໌ • σόοάڥҎ֎Ͱར༻͢ΔͱɺTwigϑΝΠϧ Ωϟογϡ͕࡞͞ΕߴʹදࣔՄೳ • ҰΩϟογϡϑΝΠϧ͕࡞͞ΕΔͱɺTwig ϑΝΠϧΛฤूͯ͠ө͞Εͳ͍ͨΊɺඞͣΩϟο γϡΫϦΞ͕ඞཁ • σόοάϞʔυͰຖճΩϟογϡϑΝΠϧ͕࡞
͞ΕΔͨΊɺTwigϑΝΠϧΛฤूͯ͠ଈ࠲ʹө
Twigͷઆ໌ Twigͷߏจ {{ ... }}: "ग़ྗ͢Δ": มࣜͷ݁ՌΛςϯϓϨʔτʹදࣔ {% ... %}:
"ॲཧ͢Δ": ςϯϓϨʔτͷϩδοΫΛ੍ޚ͢ΔλάͰɺforϧʔϓͳͲͷ໋ྩͷ࣮ߦ ʹ༻ {# ... #}: "ίϝϯτ": ͜ͷߏจͰɺPHP ͷ /* comment */ ͱಉ͡Α͏ʹෳߦʹΔίϝ ϯτهड़Մೳ {{ hoge|upper }}: "ϑΟϧλʔ": ϑΟϧλʔΛ͏ͱɺϨϯμϦϯά͞ΕΔલʹίϯςϯπΛम ০͢Δ͜ͱ͕Ͱ͖·͢ɻ͜ͷྫͰɺϑΟϧλʔΛͬͯม hoge ͷ༰Λͯ͢େจࣈʹมͯ͠ ग़ྗ
Twigͷઆ໌ • TwigςϯϓϨʔτͷܧঝՄೳ • ϔομʔϑολʔɺαΠυόʔͳͲڞ௨ཁૉΛΠϯΫ ϧʔυ͢Δํ๏ͱͯ͠ɺ ϕʔεςϯϓϨʔτͱͳΔ"layout"ςϯϓϨʔτʹɺαΠ τͰ͏ڞ௨ཁૉͷͯ͢ΛͦΕͧΕ ϒϩοΫ"block"ͱ ͯ͠ఆ͓͖ٛͯ͠ɺ
ࢠͷςϯϓϨʔτଆͰlayout ςϯϓϨʔτΛܧঝͯ͠ blockΛΦʔόʔϥΠυ͢Δ͜ͱͰ࣮ݱՄೳ
Twigͷઆ໌ ɾdefault_frame.twig <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/> <title>{% block title %}ςετΞϓϦέʔγϣϯ{% endblock %}</title> </head> <body> <div id="main_middle"> {% block main %}{% endblock %} </div> </body> </html>
Twigͷઆ໌ ɾindex.twig {% extends 'default_frame.twig' %} {% block title %}ϒϩάهࣄͷҰཡ{%
endblock %} {% block main %} {% for entry in blog_entries %} <h2>{{ entry.title }}</h2> <p>{{ entry.body }}</p> {% endfor %} {% endblock %}
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ