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
430
EC-CUBE3勉強会新しいデザインを作成してみよう
amidaike
February 02, 2017
Tweet
Share
More Decks by amidaike
See All by amidaike
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
EC-CUBE3コードリーディング #3
amidaike
1
950
Other Decks in Programming
See All in Programming
ISUCONってなんだか難しそう……!!でも、初めてのISUCONにPHPで挑戦してきました!
kotomin_m
1
300
object-oriented-conference-2024
fuwasegu
6
1.9k
WinUI 3デモ - "CommunityToolkit.Mvvm"NuGetパッケージ編
andrewkeepcoding
0
130
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
2
470
SwiftUI, Jetpack Composeの導入で変化した「家族アルバム みてね」のアプリ開発体験
hicka04
6
400
IntelliJ IDEA を知らなかった 自分に教えたい小ネタ集 / IntelliJ IDEA Hints for My Past Self
mackey0225
3
170
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
4
890
Enhancing Applications with Accessibility API
kishikawakatsumi
3
920
品質が高いコードって何?Rev2.1
ickx
1
490
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
7
1.9k
Deno に Web 標準 API を実装する / Implementing Web Standard API to Deno
petamoriken
0
350
Honoとhtmx
yusukebe
6
1.2k
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
14
1.3k
Gamification - CAS2011
davidbonilla
76
4.5k
Six Lessons from altMBA
skipperchong
19
2.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
19
1.6k
KATA
mclloyd
14
11k
Adopting Sorbet at Scale
ufuk
66
8.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
For a Future-Friendly Web
brad_frost
170
8.9k
The Art of Programming - Codeland 2020
erikaheidi
40
12k
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