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
amidaike
February 02, 2017
Programming
0
450
EC-CUBE3勉強会新しいデザインを作成してみよう
amidaike
February 02, 2017
Tweet
Share
More Decks by amidaike
See All by amidaike
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デザイナー向け勉強会 #2
amidaike
1
2.7k
EC-CUBE3コードリーディング #3
amidaike
1
960
Other Decks in Programming
See All in Programming
CI改善もDatadogとともに
taumu
0
180
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
140
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
260
Unity Android XR入門
sakutama_11
0
170
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
250
CloudNativePGを布教したい
nnaka2992
0
100
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.5k
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
490
Rails アプリ地図考 Flush Cut
makicamel
1
130
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.1k
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
650
Jakarta EE meets AI
ivargrimstad
0
180
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Bash Introduction
62gerente
611
210k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
980
Speed Design
sergeychernyshev
27
800
Optimizing for Happiness
mojombo
376
70k
Site-Speed That Sticks
csswizardry
4
400
Documentation Writing (for coders)
carmenintech
67
4.6k
Building Your Own Lightsaber
phodgson
104
6.2k
BBQ
matthewcrist
87
9.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Visualization
eitanlees
146
15k
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