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

Transcript

1. EC-CUBE3σβΠφʔ޲͚ษڧձ #1 EC-CUBEؔ੢Ϣʔβάϧʔϓ 2016-02-10
2. ࣗݾ঺հ גࣜձࣾΩϡʔϧ ࢁଜ ਗ਼࢙ EC-CUBE3ͷίϛολʔͯ͠·͢ @k-yamamura
3. ໨࣍ 1. EC-CUBE3ͷ঺հ 2. EC-CUBE3Ͱ࢖༻͍ͯ͠ΔσβΠϯϑϨʔ ϜϫʔΫ 3. EC-CUBE3ͷσΟϨΫτϦߏ଄ 4. ը໘ϨΠΞ΢τͷઆ໌ 5. ը໘Λ࡞੒͢Δํ๏
4. 1.EC-CUBE3ͷ঺հ
5. EC-CUBE3ͷ঺հ • 2015೥7݄1೔ʹ7೥ͿΓͷϝδϟʔόʔδϣϯΞοϓ • γεςϜ಺෦ͷେ෯ͳݟ௚͠
 Symfony2ίϯϙʔωϯτͰ͋ΔSilexͷ࠾༻
 ؅ཧը໘ɺϑϩϯτը໘ʹBootstrap3ͷ࠾༻
 Smarty͔ΒTwig΁ͷPHPςϯϓϨʔτมߋ
 Doctrineͱ͍͏ORϚούʔͷ࠾༻ • ϨεϙϯγϒσβΠϯରԠ • ϓϥάΠϯػߏͷ࡮৽
6. EC-CUBE3ͷ঺հ • GitHubΛ࢖ͬͨࠓ࣌ͷ։ൃ
 https://github.com/EC-CUBE/ec-cube • TravisCIɺAppVeyorɺScrutinizerͷ֎෦αʔϏεΛ࢖͍ίʔ υ඼࣭Λ୲อ
 ˠPullRequest͞ΕΔͱͦΕͧΕࣗಈతʹ࣮ߦ͞Ε·͢ɻ·ͩ ·ͩςετέʔε͸଍Γ͍ͯ·ͤΜ͕ɾɾɾ • PSRʹ΄΅४ڌͨ͠ίʔυ։ൃ ͍ͭͰ΋Pull Request͓଴͓ͪͯ͠Γ·͢ʂ
7. 2.EC-CUBE3Ͱ࢖༻͍ͯ͠Δ σβΠϯϑϨʔϜϫʔΫ
8. EC-CUBE3Ͱ࢖༻͍ͯ͠ΔσβΠϯϑϨʔϜϫʔΫ • ϑϩϯτ͸ΧελϚΠζ͞ΕͨBootstrap3.3.4Λ࢖༻͠ɺ؅ཧ ը໘͸EC-CUBE3.0.0ϦϦʔε࣌఺Ͱ࠷৽ͷBootstrap3.3.5Λ࢖༻ • ϑϩϯτը໘Ͱ͸BootstrapΛΧελϚΠζ͠ɺඞཁͳଐੑͩ ͚Λൈ͖ग़ͯ͠࢖༻͍ͯ͠ΔͨΊɺ࢖༻ग़དྷΔclass͸ݶΒΕͯ ͍Δ(JavaScript΋ಉ༷) • ؅ཧը໘Ͱ͸Bootstrap3.3.5Ͱ༻ҙ͞Ε͍ͯΔclass͸શͯ࢖༻ Մೳ • btnͷ৭ͳͲσβΠϯʹؔΘΔ෦෼͸EC-CUBE3ଆͷcssͰఆٛ͠ ௚͍ͯ͠Δclass͕͋ΔͨΊѻ͏ͨΊʹ஫ҙ͕ඞཁ
9. EC-CUBE3Ͱ࢖༻͍ͯ͠ΔσβΠϯϑϨʔϜϫʔΫ ϑϩϯτը໘Ͱͷൺֱ Bootstrap3ඪ४ͷϘλϯ EC-CUBE3Ͱఆٛ͞Ε͍ͯΔϘλϯ
10. EC-CUBE3Ͱ࢖༻͍ͯ͠ΔσβΠϯϑϨʔϜϫʔΫ ؅ཧը໘Ͱͷൺֱ Bootstrap3ඪ४ͷϘλϯ EC-CUBE3Ͱఆٛ͞Ε͍ͯΔϘλϯ
11. EC-CUBE3Ͱ࢖༻͍ͯ͠ΔσβΠϯϑϨʔϜϫʔΫ • ؅ཧը໘ΛΧελϚΠζ͢Δඞཁ͕͋Δ৔߹ɺ Bootstrap3Λ͢Ͱʹ஌͍ͬͯΕ͹एׯͷσβΠϯ૬ҧ ͕͋Δ͚Ͳ͢ΜͳΓͱࣅͨΑ͏ͳը໘Λ࡞੒͢Δ͜ͱ ͸Մೳ • ϑϩϯτը໘ΛΧελϚΠζ͢Δ৔߹ɺBootstrap3Ͱ ࢖͑Δ΋ͷ͸ݶΒΕ͍ͯΔͨΊɺطʹ༻ҙ͞Ε͍ͯΔ ΋ͷΛ࢖͏ΑΓ͸ಠࣗͰఆٛͨ͠cssΛ࡞ͬͨํ͕ྑ ͍͔΋
 →ୠ͠ɺϑΥʔϜ౳Λѻ͏৔߹ɺ৭ʑͱ͓࡞๏͕ඞཁ
12. EC-CUBE3Ͱ࢖༻͍ͯ͠ΔσβΠϯϑϨʔϜϫʔΫ • ࠓޙͷษڧձͷςʔϚͱͯ͠ɺಠࣗʹը໘Λ࡞੒ ͢Δํ๏΍ɺgulpΛ࢖ͬͨ։ൃํ๏ͳͲΛ͓఻͑ ͍͖ͯ͠·͢ɻ
13. 3.EC-CUBE3ͷσΟϨΫτϦߏ଄
14. EC-CUBE3ͷσΟϨΫτϦߏ଄ • EC-CUBE3Ͱ͸SilexϑϨʔϜϫʔΫΛ࠾༻͍ͯ͠Δͨ Ίɺ2ܥ͔Βେ෯ʹσΟϨΫτϦߏ଄͕มԽ • Symfony2ͷσΟϨΫτϦߏ଄ΛࢀߟʹɺEC-CUBE3ಠ ࣗʹߏ੒ • URLʹ.php͕ແ͘ͳΓγϯϓϧͳURLʹมߋ • ެ։σΟϨΫτϦʹ͍ͭͯ͸2ܥΛ΄΅౿ऻ
15. EC-CUBE3ͷσΟϨΫτϦߏ଄ • /ECCUBEROOT/src
 ഑Լ͕ϓϩάϥϜຊମͱͳΓɺ phpϑΝΠϧ΍twigϑΝΠϧΛ ഑ஔ
16. EC-CUBE3ͷσΟϨΫτϦߏ଄ • /ECCUBEROOT/app
 ഑Լ͸ઃఆϑΝΠϧ΍ϩάϑΝ Πϧ౳͕഑ஔ͞Ε͓ͯΓɺϓ ϥάΠϯ͸ʮPluginʯσΟϨΫ τϦ഑ԼͰ࡞੒
17. EC-CUBE3ͷσΟϨΫτϦߏ଄ • /ECCUBEROOT/html
 ͕ެ։σΟϨΫτϦͱͳΓɺ ϦιʔεϑΝΠϧ(css΍ը૾ ϑΝΠϧ౳ʑ)Λ഑ஔ
 (֤σΟϨΫτϦͷઆ໌͸ޙड़)
18. EC-CUBE3ͷσΟϨΫτϦߏ଄ • ϑϩϯτը໘ͷඪ४σΟϨΫτϦ
 /ECCUBEROOT/html/template/default • ؅ཧը໘ͷඪ४σΟϨΫτϦ
 /ECCUBEROOT/html/template/admin • Πϯετʔϧը໘ͷඪ४σΟϨΫτϦ
 /ECCUBEROOT/html/template/install
19. 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ҎԼʹ഑ஔ͞Ε͍ͯΔɻ
20. 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Λ࢖͍͍ͨ৔߹ɺ͜ͷσΟϨΫτ Ϧʹ഑ஔ͢Ε͹ྑ͍ɻ
21. EC-CUBE3ͷσΟϨΫτϦߏ଄ ϓϥάΠϯ༻ͷެ։σΟϨΫτϦͰɺϓϥάΠϯͰ࢖༻ ͢ΔϦιʔεϑΝΠϧ͕഑ஔ͞ΕΔɻ ؅ཧը໘͔Β࡞੒͞ΕͨtwigϑΝΠϧ΍ಠࣗʹ࡞੒͠ ͨը૾ϑΝΠϧ౳͕഑ஔ͞ΕΔɻ ը૾Ξοϓϩʔυ༻σΟϨΫτϦ save_image͸঎඼ը૾΍ࢧ෷ํ๏ͷը૾͕഑ஔ͞Εɺ temp_image͸ϑΝΠϧΞοϓϩʔυ࣌ͷҰ࣌తͳϑΝ Πϧஔ͖৔ͱͯ͠ར༻͞ΕΔɻ
22. EC-CUBE3ͷσΟϨΫτϦߏ଄ • TwigϑΝΠϧͷ഑ஔ৔ॴ͸ɺ
 /ECCUBEROOT/src/Eccube/Resource/template • ࣮ࡍʹը໘Λ࡞੒͢Δ৔߹ɺTwigϑΝΠϧʹରͯ͠ख ΛՃ͑Δɻ
23. 4.ը໘ϨΠΞ΢τͷઆ໌
24. 5.ը໘Λ࡞੒͢Δํ๏
25. EC-CUBE3ͷσΟϨΫτϦߏ଄ • EC-CUBE3ͷը໘Λ৽ن࡞੒͢Δओͳํ๏͸ҎԼͷ௨Γ 1. ؅ཧը໘͔ΒtwigϑΝΠϧΛ৽ن࡞੒ 2. ؅ཧը໘͔ΒϑΝΠϧΛΞοϓϩʔυͯ͠৽ن࡞੒ 3. σβΠϯςϯϓϨʔτͱͯ͠ඪ४ͷϑΝΠϧ͔Β࡞੒͠Ξο ϓϩʔυ • ը໘Λ৽ن࡞੒͢Δ৔߹ɺECCUBE3͔Β͸twigλάΛѻ͏͜ͱ ʹͳΓ·͕͢ɺSmartyλάΛཧղͰ͖͍ͯΔਓ͸twigʹͳͬͯ ΋
 ৽ͨʹ֮͑Δ͜ͱ͕গͳ͍ͨΊށ࿭Θͣʹ࡞੒͢Δ͜ͱ͕Մೳʂ
26. EC-CUBE3ͷσΟϨΫτϦߏ଄ • EC-CUBE3ͷը໘Λมߋ͢Δओͳํ๏͸ҎԼͷ௨Γ 1. ຊମඪ४ͷtwigϑΝΠϧΛίϐʔͯ͠मਖ਼ 2. ؅ཧը໘͔ΒtwigϑΝΠϧΛमਖ਼ • ECCUBEROOT/srcҎԼͷϑΝΠϧ͸όʔδϣϯΞο ϓͰ্ॻ͖͞ΕΔͨΊɺ௚઀ຊମͷtwigϑΝΠϧ Λ৮Δͷ͸ඇਪ঑
27. EC-CUBE3ͷσΟϨΫτϦߏ଄ • ຊମଆͷtwigϑΝΠϧΛ
 ECCUBEROOT/app/templateʹίϐʔͯ͠मਖ਼ • Ұ൪खͬऔΓૣ͘ରԠՄೳ • ݱߦͷσΟϨΫτϦߏ੒ٴͼϑΝΠϧ໊Λ஌Δඞ ཁ͋Γ(υΩϡϝϯτະ੔උͰ͢)
28. EC-CUBE3ͷσΟϨΫτϦߏ଄ ECCUBEROOT/src/Eccube/Resource/template/default ҎԼͷϑΝΠϧΛίϐʔͯ͠ɺ ECCUBEROOT/app/template/default ௚Լ΁ίϐʔͯ͠मਖ਼Λߦ͏ɻ admin͸؅ཧը໘ଆͷϑΝΠϧͰɺdefault͸ϑϩϯτ ը໘ଆͷϑΝΠϧ͕഑ஔ͞Ε͍ͯΔɻ
29. EC-CUBE3ͷσΟϨΫτϦߏ଄ • ඪ४ͰඋΘ͍ͬͯΔը໘ʹରͯ͠͸؅ཧը໘͔Β มߋՄೳͰ͋Γɺมߋͨ͠ϑΝΠϧ͸
 ECCUBEROOT/app/template
 σΟϨΫτϦʹอଘ͞ΕΔͨΊɺΦϦδφϧϑΝ Πϧ΁໭͢͜ͱ͸Մೳ • ؅ཧը໘ʹϩάΠϯޙɺࠨϝχϡʔͷ
 ʮίϯςϯπ؅ཧʯˠʮϖʔδ؅ཧʯ
 ΑΓϖʔδฤूΛ͢Δ͜ͱͰมߋ
30. ։ൃ࣌ͷࢀߟϖʔδ • GitHubWiki
 https://github.com/EC-CUBE/ec-cube/wiki • GitHubPages
 http://ec-cube.github.io • Qiitaͷهࣄ
 http://qiita.com/tags/EC-CUBE3