デザイナー向け！EC-CUBE3勉強会

Transcript

1. σβΠφʔ޲͚ʂ EC-CUBEษڧձ EC-CUBEؔ੢Ϣʔβάϧʔϓ 2015-09-03
2. ࣗݾ঺հ גࣜձࣾΩϡʔϧ ࢁଜ ਗ਼࢙ ຊۀ͸γεςϜΤϯδχΞ EC-CUBE3ͷίϛολʔ(@k-yamamura) ͯ͠·͢
3. https://www.ec-cube.net/product/info_3.php ਚྗ͠·ͨ͠
4. αϚϦʔ 1.EC-CUBE3ͷΠϯετʔϧ 2.EC-CUBE3Ͱ࢖༻͍ͯ͠ΔσβΠϯϑϨʔϜϫʔΫ 3.σΟϨΫτϦߏ଄ͷઆ໌ 4.࣮ࡍʹը໘Λ৽ن࡞੒/มߋ͢Δํ๏ 5.σβΠϯΛ͢Δ্Ͱͷ஫ҙ఺
5. EC-CUBEͱ͸ • ࠃ಺No.1ͷECΦʔϓϯιʔε • ݱࡏ100ສμ΢ϯϩʔυΛಥഁ͠ɺਪఆ20,000 ళฮҎ্ͰՔಇத http://www.ec-cube.net
6. EC-CUBE3ͷ஀ੜ • 2015೥7݄1೔ʹ7೥ͿΓͷϝδϟʔόʔδϣϯΞοϓ • γεςϜ಺෦ͷେ෯ͳݟ௚͠
 Symfony2ίϯϙʔωϯτͷ࠾༻
 Bootstrap3ͷ࠾༻
 Smarty͔Βtwig΁ςϯϓϨʔτมߋ • ϨεϙϯγϒσβΠϯͷରԠɺϓϥάΠϯػߏͷ࡮ ৽
7. 1.EC-CUBE3ͷΠϯετʔϧ
8. EC-CUBEͷΠϯετʔϧํ๏ • http://www.ec-cube.net/download/
 ࠷৽ͷEC-CUBE3Λμ΢ϯϩʔυ • Macͷํ͸ͪ͜Β
 http://amidaike.hatenablog.com/entry/ 2015/07/02/015914 • Windowsͷํ͸ͪ͜Β
 http://qiita.com/chihiro-adachi/items/ 5fb2175454d3bfa047ac
9. 2.EC-CUBE3Ͱ࢖༻͍ͯ͠Δ σβΠϯϑϨʔϜϫʔΫ
10. Bootstrap3ͷ࠾༻
11. Bootstrap3ͷ࠾༻ • ϑϩϯτ͸ΧελϚΠζ͞ΕͨBootstrap3.3.4Λ࢖༻͠ɺ؅ཧը໘ ͸EC-CUBE3.0.0ϦϦʔε࣌఺Ͱ࠷৽ͷBootstrap3.3.5Λ࢖༻ • ϑϩϯτը໘Ͱ͸BootstrapΛΧελϚΠζ͠ɺඞཁͳଐੑ͚ͩΛ ൈ͖ग़ͯ͠࢖༻͍ͯ͠ΔͨΊɺ࢖༻ग़དྷΔclass͸ݶΒΕ͍ͯΔ • ؅ཧը໘Ͱ͸Bootstrap3.3.5Ͱ༻ҙ͞Ε͍ͯΔclass͸શͯ࢖༻Մೳ • btnͷ৭ͳͲσβΠϯʹؔΘΔ෦෼͸EC-CUBE3ଆͷcssͰఆٛ͠௚ ͍ͯ͠Δclass͕͋ΔͨΊѻ͏ͨΊʹ஫ҙ͕ඞཁ
12. ϑϩϯτը໘Ͱͷൺֱྫ Bootstrap3ඪ४ͷϘλϯ EC-CUBE3Ͱఆٛ͞Ε͍ͯΔϘλϯ
13. ؅ཧը໘Ͱͷൺֱྫ Bootstrap3ඪ४ͷϘλϯ EC-CUBE3Ͱఆٛ͞Ε͍ͯΔϘλϯ
14. ϨεϙϯγϒσβΠϯ Grid systemΛ࢖͏͜ͱͰϨεϙϯγϒσβΠϯΛ࣮ݱ - ྫ - <div class="container"> <!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> </div>
15. Bootstrap3Ͱͷॴײ • ؅ཧը໘ΛΧελϚΠζ͢Δඞཁ͕͋Δ৔߹ɺ Bootstrap3Λ͢Ͱʹ஌͍ͬͯΕ͹एׯͷσβΠϯ૬ҧ ͕͋Δ͚Ͳ͢ΜͳΓͱࣅͨΑ͏ͳը໘Λ࡞੒͢Δ͜ͱ ͸Մೳ • ϑϩϯτը໘ΛΧελϚΠζ͢Δ৔߹ɺBootstrap3Ͱ ࢖͑Δ΋ͷ͸ݶΒΕ͍ͯΔͨΊɺطʹ༻ҙ͞Ε͍ͯΔ ΋ͷΛ࢖͏ΑΓ͸ಠࣗͰఆٛͨ͠cssΛ࡞ͬͨํ͕ྑ ͍͔΋
16. 3.σΟϨΫτϦߏ଄ͷઆ໌
17. ެ։σΟϨΫτϦͷߏ଄ • /ECCUBEROOT/html
 ͕ެ։σΟϨΫτϦͱͳΓɺ ϦιʔεϑΝΠϧ(css΍ը૾ ϑΝΠϧ౳ʑ)Λ഑ஔ
 (֤σΟϨΫτϦͷઆ໌͸ޙड़)
18. ඪ४σΟϨΫτϦͷҐஔ • ϑϩϯτը໘ͷඪ४σΟϨΫτϦ
 /ECCUBEROOT/html/template/default • ؅ཧը໘ͷඪ४σΟϨΫτϦ
 /ECCUBEROOT/html/template/admin • Πϯετʔϧը໘ͷඪ४σΟϨΫτϦ
 /ECCUBEROOT/html/template/install
19. ϑϩϯτը໘ͷσΟϨτϦߏ଄ 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Ҏ Լʹ഑ஔ͞Ε͍ͯΔɻ
20. ؅ཧը໘ͷσΟϨτϦߏ଄ 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Λ࢖͍͍ͨ৔߹ɺ͜ͷσΟϨΫτϦʹ ഑ஔ͢Ε͹ྑ͍ɻ
21. ͦͷଞͷσΟϨτϦߏ଄ ϓϥάΠϯ༻ͷެ։σΟϨΫτϦͰɺϓϥάΠϯͰ࢖༻ ͢ΔϦιʔεϑΝΠϧ͕഑ஔ͞ΕΔɻ ؅ཧը໘͔Β࡞੒͞ΕͨtwigϑΝΠϧ΍ಠࣗʹ࡞੒ͨ͠ ը૾ϑΝΠϧ౳͕഑ஔ͞ΕΔɻ ը૾Ξοϓϩʔυ༻σΟϨΫτϦ save_image͸঎඼ը૾΍ࢧ෷ํ๏ͷը૾͕഑ஔ͞Εɺ temp_image͸ϑΝΠϧΞοϓϩʔυ࣌ͷҰ࣌తͳϑΝ Πϧஔ͖৔ͱͯ͠ར༻͞ΕΔɻ
22. ެ։σΟϨΫτϦҎ֎ʹ͍ͭͯ • /ECCUBEROOT/htmlҎ֎ͷσΟϨΫτϦʹ͍ͭ ͯ͸phpϑΝΠϧ΍ઃఆϑΝΠϧ౳͕഑ஔ͞Ε ͍ͯΔͨΊɺσβΠϯʹؔΘΔҎ֎ͷσΟϨ ΫτϦʹ͍ͭͯ͸આ໌ΛׂѪ͠·͢ɻ • twigϑΝΠϧͱݺ͹ΕΔςϯϓϨʔτϑΝΠϧ ͷ഑ஔ৔ॴͷઆ໌ʹ͍ͭͯ͸ޙड़͠·͢ɻ
23. 4.࣮ࡍʹը໘Λ৽ن࡞੒/มߋ ͢Δํ๏
24. ը໘ͷ৽ن࡞੒ํ๏
25. ը໘ͷ৽ن࡞੒ • EC-CUBE3ͷը໘Λ৽ن࡞੒͢Δओͳํ๏͸ҎԼͷ௨Γ 1. ؅ཧը໘͔ΒtwigϑΝΠϧΛ৽ن࡞੒ 2. ؅ཧը໘͔ΒϑΝΠϧΛΞοϓϩʔυͯ͠৽ن࡞੒ 3. σβΠϯςϯϓϨʔτͱͯ͠ඪ४ͷϑΝΠϧ͔Β࡞੒͠Ξο ϓϩʔυ • ը໘Λ৽ن࡞੒͢Δ৔߹ɺECCUBE3͔Β͸twigλάΛѻ͏͜ͱʹ ͳΓ·͕͢ɺSmartyλάΛཧղͰ͖͍ͯΔਓ͸twigʹͳͬͯ΋
 ৽ͨʹ֮͑Δ͜ͱ͕গͳ͍ͨΊށ࿭Θͣʹ࡞੒͢Δ͜ͱ͕Մೳʂ
26. ؅ཧը໘͔Βͷ৽ن࡞੒ • Ωϟϯϖʔϯϖʔδ΍୯ҰϖʔδΛ৽ن࡞੒͢ Δ৔߹ɺ؅ཧը໘͔Β؆୯ʹ࡞੒Մೳ • ؅ཧը໘ʹϩάΠϯޙɺࠨϝχϡʔͷ
 ʮίϯςϯπ؅ཧʯˠʮϖʔδ؅ཧʯ
 ΑΓొ࿥ • URLʹ͸֦ுࢠ͕͔ͭͳ͍ͨΊ៉ྷ
27. ؅ཧը໘͔Βͷ৽ن࡞੒
28. ؅ཧը໘͔Βͷ৽ن࡞੒
29. ؅ཧը໘͔Βͷ৽ن࡞੒
30. ؅ཧը໘͔Βͷ৽ن࡞੒
31. ΞοϓϩʔυͰͷ৽ن࡞੒ • ؅ཧը໘Ҏ֎͔Βొ࿥Λߦ͏ํ๏ͱͯ͠ɺ؅ཧը ໘ͷϑΝΠϧ؅ཧΛ࢖ͬͯ࡞੒ͨ͠htmlϑΝΠϧ ΛΞοϓϩʔυՄೳ • ؅ཧը໘ʹϩάΠϯޙɺࠨϝχϡʔͷ
 ʮίϯςϯπ؅ཧʯˠʮϑΝΠϧ؅ཧʯ
 ΑΓϑΝΠϧΛΞοϓϩʔυ • urlʹ͸.htmlͱ͍͏Α͏ʹ֦ுࢠ͕ͭ͘
32. ΞοϓϩʔυͰͷ৽ن࡞੒
33. ΞοϓϩʔυͰͷ৽ن࡞੒
34. ΞοϓϩʔυͰͷ৽ن࡞੒
35. σβΠϯςϯϓϨʔτ৽ن࡞੒ • طଘͷςϯϓϨʔτߏ଄Λμ΢ϯϩʔυ͠ɺͦΕΛ׆༻͢Δ͜ͱ ͰϑΝΠϧ࡞੒ • ؅ཧը໘ʹϩάΠϯޙɺࠨϝχϡʔͷ
 ʮΦʔφʔζετΞʯˠʮςϯϓϨʔτʯˠʮςϯϓϨʔτҰཡʯ 
 ΑΓطଘͷϑΝΠϧΛμ΢ϯϩʔυޙɺͦΕΒΛݩʹ৽ͨʹσβ ΠϯΛ࡞੒ޙΞοϓϩʔυ • ݱߦͷσΟϨΫτϦߏ੒ٴͼϑΝΠϧ໊Λ஌Δඞཁ͕͋Γ(υΩϡ ϝϯτະ੔උͰ͢)
36. σβΠϯςϯϓϨʔτ৽ن࡞੒ मਖ਼Ͱ͖Δํ ϓϧϦΫΤετ͓ئ͍ ͠·͢ʂ
37. σβΠϯςϯϓϨʔτ৽ن࡞੒
38. σβΠϯςϯϓϨʔτ৽ن࡞੒
39. σβΠϯςϯϓϨʔτ৽ن࡞੒ Ξοϓϩʔυ࣌ʹࢦఆͨ͠ςϯϓϨʔτίʔυ(new)ͱ ͏͍͏σΟϨΫτϦ͕࡞੒͞ΕΔɻ͜ͷ഑Լʹຊମͱ ಉҰߏ଄ͱϑΝΠϧ໊Ͱ࡞੒͢ΔͱͦͪΒ͕༏ઌ͞Ε Δɻ ྫͱͯ͠index.twigͱ͍͏ϑΝΠϧ͕࡞੒͍ͯ͠Δ͕ɺ ͜Ε͸TOPϖʔδΛ৽ͨʹఆٛͨ͠ϑΝΠϧͰ͋Γɺ TOPϖʔδ΁ΞΫηε͢Δͱͪ͜Βͷindex.twigʹهड़ ͨ͠಺༰͕൓ө͞ΕΔɻ ϦιʔεϑΝΠϧ͸ެ։σΟϨΫτϦଆʹ഑ஔ͞ΕΔɻ ͪ͜Β΋ಉ༷ʹςϯϓϨʔτίʔυ(new)ͱ͍͏σΟϨ ΫτϦ͕࡞੒͞ΕɺΞοϓϩʔυ͞Εͨ಺༰͕഑ஔ͞ ΕΔɻ
40. ը໘ͷมߋํ๏
41. ը໘ͷมߋ • EC-CUBE3ͷը໘Λมߋ͢Δओͳํ๏͸ҎԼͷ௨Γ 1. ຊମඪ४ͷtwigϑΝΠϧΛίϐʔͯ͠मਖ਼ 2. ؅ཧը໘͔ΒtwigϑΝΠϧΛमਖ਼ • ECCUBEROOT/srcҎԼͷϑΝΠϧ͸όʔδϣϯΞο ϓͰ্ॻ͖͞ΕΔͨΊɺ௚઀ຊମͷtwigϑΝΠϧ Λ৮Δͷ͸ඇਪ঑
42. twigϑΝΠϧΛίϐʔͯ͠मਖ਼ • ຊମଆͷtwigϑΝΠϧΛ
 ECCUBEROOT/app/templateʹίϐʔͯ͠मਖ਼ • Ұ൪खͬऔΓૣ͘ରԠՄೳ • ݱߦͷσΟϨΫτϦߏ੒ٴͼϑΝΠϧ໊Λ஌ Δඞཁ͋Γ(υΩϡϝϯτະ੔උͰ͢)
43. twigϑΝΠϧΛίϐʔͯ͠मਖ਼ ECCUBEROOT/src/Eccube/Resource/template/default ҎԼͷϑΝΠϧΛίϐʔͯ͠ɺ ECCUBEROOT/app/template/default ௚Լ΁ίϐʔͯ͠मਖ਼Λߦ͏ɻ admin͸؅ཧը໘ଆͷϑΝΠϧͰɺdefault͸ϑϩϯτը ໘ଆͷϑΝΠϧ͕഑ஔ͞Ε͍ͯΔɻ
44. ؅ཧը໘͔Βͷมߋ • ඪ४ͰඋΘ͍ͬͯΔը໘ʹରͯ͠͸؅ཧը໘͔Β มߋՄೳͰ͋Γɺมߋͨ͠ϑΝΠϧ͸
 ECCUBEROOT/app/template
 σΟϨΫτϦʹอଘ͞ΕΔͨΊɺΦϦδφϧϑΝ Πϧ΁໭͢͜ͱ͸Մೳ • ؅ཧը໘ʹϩάΠϯޙɺࠨϝχϡʔͷ
 ʮίϯςϯπ؅ཧʯˠʮϖʔδ؅ཧʯ
 ΑΓϖʔδฤूΛ͢Δ͜ͱͰมߋ
45. ؅ཧը໘͔Βͷมߋ
46. ؅ཧը໘͔Βͷมߋ
47. ؅ཧը໘͔Βͷมߋ मਖ਼ͨ͠TOPϖʔδͷϑΝΠϧ͕ app/template/default/index.twig ΁อଘ͞Εɺͪ͜ΒͷϑΝΠϧ͕൓ө͞ΕΔɻ
48. 5.σβΠϯΛ͢Δ্Ͱͷ஫ҙ఺
49. ରԠϒϥ΢βʹ͍ͭͯ OS ϒϥ΢β Windows (Windows7Ҏ߱) Internet Explorer10 Ҏ߱ Google Chrome ࠷৽൛ Firefox ࠷৽൛ Mac Safari ࠷৽൛ iOS(7Ҏ߱) Safari ࠷৽൛ Android(4.1Ҏ߱) ඪ४ϒϥ΢β ࠷৽൛
50. σόοάϞʔυͷ༗ޮԽ • ௨ৗ / ΍/index.phpͰΞΫηε͍ͯ͠Δͱ͜ΖΛ /index_dev.php ͱॻ͖׵͑ͯΞΫηε͢Δ͜ͱʹΑΓɺtwigϑΝΠϧ͕Ωϟο γϡ͞ΕͣʹσόοάϞʔυ͕༗ޮʹͳΓ·͢ɻ
 
 http://localhost/index_dev.php • You are not allowed to access this file. Check index_dev.php for more information.ͱΤϥʔ͕දࣔ͞ΕΔ৔߹ɺindex_dev.phpΛ ։͖ɺΞΫηεݩͷIPΛҎԼͷ഑ྻʹ௥Ճ͍ͯͩ͘͠͞ɻ 
 $allow = array( '127.0.0.1', 'fe80::1', '::1', );
51. ϑϩϯτը໘ͷϨΠΞ΢τ フロン → c div#main → m div#main_top ※C 　E div#main_middle ドロ div#main_bottom レイアウト管理画面とフロントの対比イメージ header#header div#contents_top ↑ このエリアが div#contentsで 囲われている ↓ div#side_left.side div#side_right.side ※レ レイ ①　 ②　 div#contents_bottom ③　 footer#footer ④　
52. ςϯϓϨʔτͷ൓өॱং • σβΠϯςϯϓϨʔτΛ࡞੒ޙɺϑΝΠϧΛ഑ஔ͢Δ σΟϨΫτϦʹΑͬͯ༏ઌॱҐ͕͋Γ·͢ɻҎԼͷॱ ংͰ֘౰͢ΔςϯϓϨʔτϑΝΠϧ͕ଘࡏ͢Δͱઌʹ ൓ө͞Ε·͢ɻ(ϑϩϯτͷΈͷઆ໌ ) 1. ECCUBEROOT/app/template/default 2. ECCUBEROOT/src/Eccube/Resource/template/default 3. ECCUBEROOT/app/Plugin/[plugin_code]/Resource/ template/default
53. ࠓ೔͓࿩͠ग़དྷͳ͔ͬͨ͜ͱ • ͲͷϑΝΠϧ͕Ͳͷը໘ʹରԠ͞Ε͍ͯΔ͔ • ϨεϙϯγϒσβΠϯͰ͸ͳ͘ɺPCɾεϚϗͱ໌ࣔతʹը ໘Λมߋ͢Δํ๏ • ΧςΰϦ͝ͱʹผςʔϚΛ࡞੒͢Δํ๏ • twigϑΝΠϧͷઆ໌ • ଞʹ΋͋Γ·͕͢·ͨػձ͕͋Ε͹͓࿩͠͠·͢ɻΑ͘෼ ͔Βͳ͍Αɺͱ͍͏ํ͸ޙͰ௚઀ฉ͍͍ͯͩ͘͞ɻ
54. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ