EC-CUBE3勉強会新しいデザインを作成してみよう

Transcript

1. EC-CUBE3ษڧձ ৽͍͠σβΠϯΛ࡞੒ͯ͠ΈΑ͏ EC-CUBEؔ੢Ϣʔβάϧʔϓ 2017-02-02
2. ໨࣍ 1. σβΠϯςϯϓϨʔτͷμ΢ϯϩʔυ 2. EC-CUBE3ͷσΟϨΫτϦߏ଄ 3. ৽نσβΠϯͷ࡞੒खॱ
3. 1.σβΠϯςϯϓϨʔτͷ μ΢ϯϩʔυ
4. σβΠϯςϯϓϨʔτͷμ΢ϯϩʔυ • ࠓճ৽͍͠σβΠϯςϯϓϨʔτΛ࡞੒͢Δʹ͋ͨΓɺҰ͔Β࡞੒͠ ͍ͯͨΒ͕࣌ؒ଍Γͳ͍ͨΊɺΫϦΤΠςΟϒɾίϞϯζ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
5. 2.EC-CUBE3ͷσΟϨΫτϦߏ଄
6. EC-CUBE3ͷσΟϨΫτϦߏ଄ • EC-CUBE3Ͱ͸SilexϑϨʔϜϫʔΫΛ࠾༻͍ͯ͠Δͨ Ίɺ2ܥ͔Βେ෯ʹσΟϨΫτϦߏ଄͕มԽ • Symfony2ͷσΟϨΫτϦߏ଄ΛࢀߟʹɺEC-CUBE3ಠ ࣗʹߏ੒ • URLʹ.php͕ແ͘ͳΓγϯϓϧͳURLʹมߋ • ެ։σΟϨΫτϦʹ͍ͭͯ͸2ܥΛ΄΅౿ऻ
7. EC-CUBE3ͷσΟϨΫτϦߏ଄ • /ECCUBEROOT/src
 ഑Լ͕ϓϩάϥϜຊମͱͳΓɺ phpϑΝΠϧ΍twigϑΝΠϧΛ ഑ஔ
8. EC-CUBE3ͷσΟϨΫτϦߏ଄ • /ECCUBEROOT/app
 ഑Լ͸ઃఆϑΝΠϧ΍ϩάϑΝ Πϧ౳͕഑ஔ͞Ε͓ͯΓɺϓ ϥάΠϯ͸ʮPluginʯσΟϨΫ τϦ഑ԼͰ࡞੒
9. EC-CUBE3ͷσΟϨΫτϦߏ଄ • /ECCUBEROOT/html
 ͕ެ։σΟϨΫτϦͱͳΓɺ ϦιʔεϑΝΠϧ(css΍ը૾ ϑΝΠϧ౳ʑ)Λ഑ஔ
 (֤σΟϨΫτϦͷઆ໌͸ޙड़)
10. EC-CUBE3ͷσΟϨΫτϦߏ଄ • ϑϩϯτը໘ͷඪ४σΟϨΫτϦ
 /ECCUBEROOT/html/template/default • ؅ཧը໘ͷඪ४σΟϨΫτϦ
 /ECCUBEROOT/html/template/admin • Πϯετʔϧը໘ͷඪ४σΟϨΫτϦ
 /ECCUBEROOT/html/template/install
11. EC-CUBE3ͷσΟϨΫτϦߏ଄ default.cssɺslick.cssɺstyle.cssͷॱͰݺͼग़͞Εɺ bootstrap.custome.min.css͸style.css಺͔Βimport͞ Ε͍ͯΔɻ svgΞΠίϯͰ͋Δsvg.htmlͱσϞαΠτ༻ͱͯ͠༻ҙ ͞Ε͍ͯΔը૾͕഑ஔ͞Ε͍ͯΔɻ →঎඼ొ࿥࣌ͷը૾ϑΝΠϧ͸ผσΟϨΫτϦʹอଘ ͞ΕΔ eccubeಠࣗͷJavaScript͸function.jsٴͼeccube.jsʹ ఆٛ͞Ε͓ͯΓɺͦΕҎ֎ͷjqueryϥΠϒϥϦ͸js/ vendorҎԼʹ഑ஔ͞Ε͍ͯΔɻ
12. EC-CUBE3ͷσΟϨΫτϦߏ଄ bootstrap-min.cssɺdashboard.cssͷॱͰݺͼग़͞Εͯ ͓ΓɺͦΕҎ֎ͷcss͸ඞཁͳը໘ͰͷΈར༻͞Ε͍ͯ Δɻ svgΞΠίϯͰ͋Δsvg.htmlͱϩΰը૾͕഑ஔ͞Ε͍ͯ Δɻ eccubeಠࣗͷJavaScript͸function.jsʹఆٛ͞Ε͓ͯ Γɺfile_manager.jsɺlayout_design.js͸ඞཁͳը໘Ͱ ͷΈར༻͞Ε͍ͯΔɻͦΕҎ֎ͷjqueryϥΠϒϥϦ͸ js/vendorҎԼʹ഑ஔ͞Ε͍ͯΔɻ bootstrap༻ͷΞΠίϯͰ͋Δglyphicon͕഑ஔ͞Εͯ ͍ΔɻfontawesomeΛ࢖͍͍ͨ৔߹ɺ͜ͷσΟϨΫτ Ϧʹ഑ஔ͢Ε͹ྑ͍ɻ
13. EC-CUBE3ͷσΟϨΫτϦߏ଄ ϓϥάΠϯ༻ͷެ։σΟϨΫτϦͰɺϓϥάΠϯͰ࢖༻ ͢ΔϦιʔεϑΝΠϧ͕഑ஔ͞ΕΔɻ ؅ཧը໘͔Β࡞੒͞ΕͨtwigϑΝΠϧ΍ಠࣗʹ࡞੒͠ ͨը૾ϑΝΠϧ౳͕഑ஔ͞ΕΔɻ ը૾Ξοϓϩʔυ༻σΟϨΫτϦ save_image͸঎඼ը૾΍ࢧ෷ํ๏ͷը૾͕഑ஔ͞Εɺ temp_image͸ϑΝΠϧΞοϓϩʔυ࣌ͷҰ࣌తͳϑΝ Πϧஔ͖৔ͱͯ͠ར༻͞ΕΔɻ
14. EC-CUBE3ͷσΟϨΫτϦߏ଄ • TwigϑΝΠϧͷ഑ஔ৔ॴ͸ɺ
 /ECCUBEROOT/src/Eccube/Resource/template • ࣮ࡍʹը໘Λ࡞੒͢Δ৔߹ɺTwigϑΝΠϧʹରͯ͠ख ΛՃ͑Δɻ
15. 3.৽نσβΠϯͷ࡞੒खॱ
16. ৽نσβΠϯͷ࡞੒खॱ • EC-CUBE3Ͱ͸ϑϩϯτը໘Λ࡞੒͢Δ৔߹ɺҎԼͷํ ๏͕͋Γ·͢ɻ ✓ ௚઀TwigϑΝΠϧΛ࡞੒ ✓ ؅ཧը໘ͷίϯςϯπ؅ཧΑΓը໘Λ࡞੒ ✓ σβΠϯςϯϓϨʔτͱͯ͠ඪ४ͷϑΝΠϧ͔Β࡞੒ ͠Ξοϓϩʔυ • ࠓճ͸௚઀TwigϑΝΠϧΛ࡞੒͢Δํ๏Λઆ໌͍ͯ͠ ͖·͢ɻ
17. ৽نσβΠϯͷ࡞੒खॱ 1. ʮsrc/Eccube/Resource/template/defaultʯ഑Լʹ͋ ΔϑΝΠϧɺσΟϨΫτϦΛશͯʮapp/template/ defaultʯ഑Լ΁ίϐʔ͠·͢ɻ 2. ʮhtml/template/defaultʯ഑ԼʹʮassetsʯσΟϨΫ τϦΛ࡞੒͠ɺμ΢ϯϩʔυͨ͠σβΠϯςϯϓϨʔ τͷʮcssʯʮfontsʯʮimagesʯʮjsʯσΟϨΫτϦ Λʮhtml/template/default/assetsʯ഑Լ΁ίϐʔ͠· ͢ɻ
18. ৽نσβΠϯͷ࡞੒खॱ 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෦෼)ʹ ͳΓ·͢ɻ
19. ৽نσβΠϯͷ࡞੒खॱ 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ʯϑΝΠϧΛฤ ू͠·͢ɻͪ͜Β͸঎඼Ұཡɺ঎඼ৄࡉը໘ͷσβΠ ϯΛߦ͍·͢ɻ
20. ৽نσβΠϯͷ࡞੒खॱ 7. ؅ཧը໘ʹϩάΠ ϯ͠ɺʮίϯςϯ π؅ཧʯˠʮϖʔ δ؅ཧʯΑΓTOP ϖʔδͷʮϨΠΞ ΢τฤूʯΛબ୒ ͠ɺӈਤͷΑ͏ʹ ϒϩοΫΛ഑ஔ͠ ·͢ɻ
21. ։ൃ࣌ͷࢀߟϖʔδ • EC-CUBE 3 ։ൃυΩϡϝϯτ
 http://ec-cube.github.io • Qiitaͷهࣄ
 http://qiita.com/tags/EC-CUBE3