Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
EC-CUBE3勉強会新しいデザインを作成してみよう
Search
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
950
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デザイナー向け勉強会 #2
amidaike
1
2.8k
EC-CUBE3コードリーディング #3
amidaike
1
960
Other Decks in Programming
See All in Programming
Cell-Based Architecture
larchanjo
0
120
【CA.ai #3】ワークフローから見直すAIエージェント — 必要な場面と“選ばない”判断
satoaoaka
0
240
実はマルチモーダルだった。ブラウザの組み込みAI🧠でWebの未来を感じてみよう #jsfes #gemini
n0bisuke2
2
1k
Rediscover the Console - SymfonyCon Amsterdam 2025
chalasr
2
160
SwiftUIで本格音ゲー実装してみた
hypebeans
0
370
Navigation 3: 적응형 UI를 위한 앱 탐색
fornewid
1
330
手が足りない!兼業データエンジニアに必要だったアーキテクチャと立ち回り
zinkosuke
0
690
【CA.ai #3】Google ADKを活用したAI Agent開発と運用知見
harappa80
0
310
從冷知識到漏洞,你不懂的 Web,駭客懂 - Huli @ WebConf Taiwan 2025
aszx87410
2
2.6k
Why Kotlin? 電子カルテを Kotlin で開発する理由 / Why Kotlin? at Henry
agatan
2
7.2k
Giselleで作るAI QAアシスタント 〜 Pull Requestレビューに継続的QAを
codenote
0
190
ViewファーストなRailsアプリ開発のたのしさ
sugiwe
0
460
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.3k
Speed Design
sergeychernyshev
33
1.4k
Unsuck your backbone
ammeep
671
58k
Building an army of robots
kneath
306
46k
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
Building Flexible Design Systems
yeseniaperezcruz
330
39k
BBQ
matthewcrist
89
9.9k
Scaling GitHub
holman
464
140k
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