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
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.1k
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
110
ML.NETで始める機械学習
ymd65536
0
220
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
260
Unity Android XR入門
sakutama_11
0
170
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
200
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.5k
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
120
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
150
Conform を推す - Advocating for Conform
mizoguchicoji
3
710
Honoとフロントエンドの 型安全性について
yodaka
7
1.4k
AIプログラミング雑キャッチアップ
yuheinakasaka
13
2.6k
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
328
21k
Unsuck your backbone
ammeep
669
57k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How to train your dragon (web standard)
notwaldorf
91
5.9k
The Invisible Side of Design
smashingmag
299
50k
How to Ace a Technical Interview
jacobian
276
23k
Producing Creativity
orderedlist
PRO
344
40k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Why Our Code Smells
bkeepers
PRO
336
57k
Automating Front-end Workflow
addyosmani
1368
200k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
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