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勉強会新しいデザインを作成してみよう
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
amidaike
February 02, 2017
Programming
0
470
EC-CUBE3勉強会新しいデザインを作成してみよう
amidaike
February 02, 2017
Tweet
Share
More Decks by amidaike
See All by amidaike
EC-CUBE 3.0勉強会
amidaike
1
960
EC-CUBE3プラグイン勉強会
amidaike
0
470
EC-CUBE3デザイナー向け勉強会 #4
amidaike
0
320
EC-CUBE3コードリーディング #5
amidaike
1
1.5k
EC-CUBE3デザイナー向け勉強会 #1
amidaike
0
300
EC-CUBE3デザイナー向け勉強会 #3
amidaike
1
220
EC-CUBE3コードリーディング #4
amidaike
0
1.3k
EC-CUBE3デザイナー向け勉強会 #2
amidaike
1
2.8k
EC-CUBE3コードリーディング #3
amidaike
1
960
Other Decks in Programming
See All in Programming
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios @OOP 2026, Munic
manfredsteyer
PRO
0
120
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる!
tosuri13
1
190
AIによる高速開発をどう制御するか? ガードレール設置で開発速度と品質を両立させたチームの事例
tonkotsuboy_com
7
2.5k
Oxlint JS plugins
kazupon
1
1k
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
manfredsteyer
PRO
0
150
IFSによる形状設計/デモシーンの魅力 @ 慶應大学SFC
gam0022
1
320
CSC307 Lecture 03
javiergs
PRO
1
500
atmaCup #23でAIコーディングを活用した話
ml_bear
3
400
Metaprogramming isn't real, it can't hurt you
okuramasafumi
0
110
AIエージェント、”どう作るか”で差は出るか? / AI Agents: Does the "How" Make a Difference?
rkaga
4
2.1k
CSC307 Lecture 09
javiergs
PRO
1
840
JPUG勉強会 OSSデータベースの内部構造を理解しよう
oga5
1
150
Featured
See All Featured
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
91
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
59
Heart Work Chapter 1 - Part 1
lfama
PRO
5
35k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
2.7k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
110
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
Mobile First: as difficult as doing things right
swwweet
225
10k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
240
30 Presentation Tips
portentint
PRO
1
230
Product Roadmaps are Hard
iamctodd
PRO
55
12k
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
120
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
150
Transcript
EC-CUBE3ษڧձ ৽͍͠σβΠϯΛ࡞ͯ͠ΈΑ͏ EC-CUBEؔϢʔβάϧʔϓ 2017-02-02
࣍ 1. σβΠϯςϯϓϨʔτͷμϯϩʔυ 2. EC-CUBE3ͷσΟϨΫτϦߏ 3. ৽نσβΠϯͷ࡞खॱ
1.σβΠϯςϯϓϨʔτͷ μϯϩʔυ
σβΠϯςϯϓϨʔτͷμϯϩʔυ • ࠓճ৽͍͠σβΠϯςϯϓϨʔτΛ࡞͢Δʹ͋ͨΓɺҰ͔Β࡞͠ ͍ͯͨΒ͕࣌ؒΓͳ͍ͨΊɺΫϦΤΠςΟϒɾίϞϯζ3Ͱఏڙ͞ Ε͍ͯΔςϯϓϨʔτΛEC-CUBE3ʹద༻͠ɺ৽͍͠σβΠϯΛ࡞ ͢Δํ๏Λઆ໌͠·͢ɻ https://freehtml5.co/preview/?item=shop-free-website-template- using-bootstrap-for-ecommerce-websites • ࠓճղઆ͢ΔσβΠϯςϯϓϨʔτΛEC-CUBE3ʹରԠͨ͠ͷΛҎ
ԼͷGitHubURLʹެ։͍ͯ͠·͢ͷͰͦͪΒࢀߟʹ͍ͯͩ͘͠͞ɻ https://github.com/k-yamamura/design-template
2.EC-CUBE3ͷσΟϨΫτϦߏ
EC-CUBE3ͷσΟϨΫτϦߏ • EC-CUBE3ͰSilexϑϨʔϜϫʔΫΛ࠾༻͍ͯ͠Δͨ Ίɺ2ܥ͔Βେ෯ʹσΟϨΫτϦߏ͕มԽ • Symfony2ͷσΟϨΫτϦߏΛࢀߟʹɺEC-CUBE3ಠ ࣗʹߏ • URLʹ.php͕ແ͘ͳΓγϯϓϧͳURLʹมߋ •
ެ։σΟϨΫτϦʹ͍ͭͯ2ܥΛ΄΅౿ऻ
EC-CUBE3ͷσΟϨΫτϦߏ • /ECCUBEROOT/src Լ͕ϓϩάϥϜຊମͱͳΓɺ phpϑΝΠϧtwigϑΝΠϧΛ ஔ
EC-CUBE3ͷσΟϨΫτϦߏ • /ECCUBEROOT/app ԼઃఆϑΝΠϧϩάϑΝ Πϧ͕ஔ͞Ε͓ͯΓɺϓ ϥάΠϯʮPluginʯσΟϨΫ τϦԼͰ࡞
EC-CUBE3ͷσΟϨΫτϦߏ • /ECCUBEROOT/html ͕ެ։σΟϨΫτϦͱͳΓɺ ϦιʔεϑΝΠϧ(cssը૾ ϑΝΠϧʑ)Λஔ (֤σΟϨΫτϦͷઆ໌ޙड़)
EC-CUBE3ͷσΟϨΫτϦߏ • ϑϩϯτը໘ͷඪ४σΟϨΫτϦ /ECCUBEROOT/html/template/default • ཧը໘ͷඪ४σΟϨΫτϦ /ECCUBEROOT/html/template/admin • Πϯετʔϧը໘ͷඪ४σΟϨΫτϦ /ECCUBEROOT/html/template/install
EC-CUBE3ͷσΟϨΫτϦߏ default.cssɺslick.cssɺstyle.cssͷॱͰݺͼग़͞Εɺ bootstrap.custome.min.cssstyle.css͔Βimport͞ Ε͍ͯΔɻ svgΞΠίϯͰ͋Δsvg.htmlͱσϞαΠτ༻ͱͯ͠༻ҙ ͞Ε͍ͯΔը૾͕ஔ͞Ε͍ͯΔɻ →ొ࣌ͷը૾ϑΝΠϧผσΟϨΫτϦʹอଘ ͞ΕΔ eccubeಠࣗͷJavaScriptfunction.jsٴͼeccube.jsʹ ఆٛ͞Ε͓ͯΓɺͦΕҎ֎ͷjqueryϥΠϒϥϦjs/
vendorҎԼʹஔ͞Ε͍ͯΔɻ
EC-CUBE3ͷσΟϨΫτϦߏ bootstrap-min.cssɺdashboard.cssͷॱͰݺͼग़͞Εͯ ͓ΓɺͦΕҎ֎ͷcssඞཁͳը໘ͰͷΈར༻͞Ε͍ͯ Δɻ svgΞΠίϯͰ͋Δsvg.htmlͱϩΰը૾͕ஔ͞Ε͍ͯ Δɻ eccubeಠࣗͷJavaScriptfunction.jsʹఆٛ͞Ε͓ͯ Γɺfile_manager.jsɺlayout_design.jsඞཁͳը໘Ͱ ͷΈར༻͞Ε͍ͯΔɻͦΕҎ֎ͷjqueryϥΠϒϥϦ js/vendorҎԼʹஔ͞Ε͍ͯΔɻ
bootstrap༻ͷΞΠίϯͰ͋Δglyphicon͕ஔ͞Εͯ ͍ΔɻfontawesomeΛ͍͍ͨ߹ɺ͜ͷσΟϨΫτ Ϧʹஔ͢Εྑ͍ɻ
EC-CUBE3ͷσΟϨΫτϦߏ ϓϥάΠϯ༻ͷެ։σΟϨΫτϦͰɺϓϥάΠϯͰ༻ ͢ΔϦιʔεϑΝΠϧ͕ஔ͞ΕΔɻ ཧը໘͔Β࡞͞ΕͨtwigϑΝΠϧಠࣗʹ࡞͠ ͨը૾ϑΝΠϧ͕ஔ͞ΕΔɻ ը૾Ξοϓϩʔυ༻σΟϨΫτϦ save_imageը૾ࢧํ๏ͷը૾͕ஔ͞Εɺ temp_imageϑΝΠϧΞοϓϩʔυ࣌ͷҰ࣌తͳϑΝ Πϧஔ͖ͱͯ͠ར༻͞ΕΔɻ
EC-CUBE3ͷσΟϨΫτϦߏ • TwigϑΝΠϧͷஔॴɺ /ECCUBEROOT/src/Eccube/Resource/template • ࣮ࡍʹը໘Λ࡞͢Δ߹ɺTwigϑΝΠϧʹରͯ͠ख ΛՃ͑Δɻ
3.৽نσβΠϯͷ࡞खॱ
৽نσβΠϯͷ࡞खॱ • EC-CUBE3Ͱϑϩϯτը໘Λ࡞͢Δ߹ɺҎԼͷํ ๏͕͋Γ·͢ɻ ✓ TwigϑΝΠϧΛ࡞ ✓ ཧը໘ͷίϯςϯπཧΑΓը໘Λ࡞ ✓ σβΠϯςϯϓϨʔτͱͯ͠ඪ४ͷϑΝΠϧ͔Β࡞
͠Ξοϓϩʔυ • ࠓճTwigϑΝΠϧΛ࡞͢Δํ๏Λઆ໌͍ͯ͠ ͖·͢ɻ
৽نσβΠϯͷ࡞खॱ 1. ʮsrc/Eccube/Resource/template/defaultʯԼʹ͋ ΔϑΝΠϧɺσΟϨΫτϦΛશͯʮapp/template/ defaultʯԼίϐʔ͠·͢ɻ 2. ʮhtml/template/defaultʯԼʹʮassetsʯσΟϨΫ τϦΛ࡞͠ɺμϯϩʔυͨ͠σβΠϯςϯϓϨʔ τͷʮcssʯʮfontsʯʮimagesʯʮjsʯσΟϨΫτϦ Λʮhtml/template/default/assetsʯԼίϐʔ͠·
͢ɻ
৽نσβΠϯͷ࡞खॱ 3. ʮapp/template/default/default_frame.twigʯϑΝΠ ϧΛमਖ਼͠·͢ɻ͜ͷϑΝΠϧͰαΠτڞ௨ͷϨΠΞ τܾΊΛߦ͍·͢ɻ 4. ʮapp/template/default/Block/logo.twigʯʮapp/ template/default/Block/search_product.twigʯʮapp/ template/default/Block/cart.twigʯϑΝΠϧΛฤू͠ ·͢ɻͪ͜ΒαΠτશମͷϔομʔ෦(navi෦)ʹ
ͳΓ·͢ɻ
৽نσβΠϯͷ࡞खॱ 5. ʮapp/template/default/index.twigʯϑΝΠϧΛमਖ਼ ͠·͢ɻ͜ͷϑΝΠϧͰτοϓϖʔδͷσβΠϯΛߦ ͍·͢ɻ 6. ʮapp/template/default/Product/list.twigʯʮapp/ template/default/Block/search_product.twigʯʮapp/ template/default/Product/detail.twigʯϑΝΠϧΛฤ ू͠·͢ɻͪ͜ΒҰཡɺৄࡉը໘ͷσβΠ
ϯΛߦ͍·͢ɻ
৽نσβΠϯͷ࡞खॱ 7. ཧը໘ʹϩάΠ ϯ͠ɺʮίϯςϯ πཧʯˠʮϖʔ δཧʯΑΓTOP ϖʔδͷʮϨΠΞ τฤूʯΛબ ͠ɺӈਤͷΑ͏ʹ ϒϩοΫΛஔ͠
·͢ɻ
։ൃ࣌ͷࢀߟϖʔδ • EC-CUBE 3 ։ൃυΩϡϝϯτ http://ec-cube.github.io • Qiitaͷهࣄ http://qiita.com/tags/EC-CUBE3