EC-CUBE 3.0勉強会

Transcript

1. EC-CUBE 3.0ษڧձ EC-CUBEؔ੢Ϣʔβάϧʔϓ 2016-08-17
2. ໨࣍ 1. EC-CUBE 3.0ͷΠϯετʔϧ 2. EC-CUBE 3.0 ͷσΟϨΫτϦߏ଄ 3. ϒϩοΫͱϖʔδϨΠΞ΢τͷઆ໌ 4. σϑΥϧτςϯϓϨʔτͷϩΰΛมߋ͠ ͯΈΑ͏ 5. EC-CUBE 3.0ͷࣄྫ঺հ
3. 1.EC-CUBE 3.0ͷΠϯετʔϧ
4. EC-CUBE 3.0ͷΠϯετʔϧ • EC-CUBE 3.0Λ؆қతʹಈ࡞ͤ͞Δํ๏ͱͯ͠ɺ
 PHPͷϏϧτΠϯ΢Σϒαʔόʔͱ͍͏ػೳΛ࢖͏ࣄͰಈ࡞ՄೳͰ͢ɻ (PHP5.4Ҏ্͕ର৅) • μ΢ϯϩʔυͨ͠EC-CUBE 3.0ύοέʔδΛղౚޙɺλʔϛφϧͰEC-CUBE 3.0ͷσΟϨΫτϦ·ͰҠಈ͠ɺ
 php -S localhost:8000
 ͱ࣮ߦ͢Δͱϒϥ΢β͔Β http://localhost:8000/html ͰΞΫηεग़དྷ·͢ɻ • υΩϡϝϯτϧʔτσΟϨΫτϦΛࢦఆ͍ͨ͠৔߹ɺ
 php -S localhost:8000 -t html
 ͱ࣮ߦ͢Δͱϒϥ΢β͔Β http://localhost:8000 ͰΞΫηεग़དྷ·͢ɻ
5. EC-CUBE 3.0ͷΠϯετʔϧ • ϏϧτΠϯ΢ΣϒαʔόΛར༻ͯ͠ը໘Λ֬ೝ͢Δ࣌ʹɺ URLʹϐϦΦυ΍ΞϯμʔείΞ͕ೖΔͱਖ਼ৗʹදࣔ͞ Εͳ͍ࣄ͕͋Γ·͢ɻͦͷ৔߹ɺ
 php -S localhost:8000 -t html html/index.php
 ͱ͍Α͏ʹ࣮ߦ࣌ʹʮhtml/index.phpʯΛ͚ͭΔͱදࣔ ͞Ε·͢ɻ • ϓϥάΠϯ؅ཧը໘΍user_data͕URLʹೖΔը໘Ͱ͸ɺ ʮhtml/index.phpʯΛ͚࣮ͭͯߦ͢Δඞཁ͕͋Γ·͢ɻ
6. 2.EC-CUBE 3.0ͷσΟϨΫτϦߏ଄
7. EC-CUBE3ͷσΟϨΫτϦߏ଄ • EC-CUBE3Ͱ͸SilexϑϨʔϜϫʔΫΛ࠾༻͍ͯ͠Δͨ Ίɺ2ܥ͔Βେ෯ʹσΟϨΫτϦߏ଄͕มԽ • Symfony2ͷσΟϨΫτϦߏ଄ΛࢀߟʹɺEC-CUBE3ಠ ࣗʹߏ੒ • URLʹ.php͕ແ͘ͳΓγϯϓϧͳURLʹมߋ • ެ։σΟϨΫτϦʹ͍ͭͯ͸2ܥΛ΄΅౿ऻ
8. EC-CUBE3ͷσΟϨΫτϦߏ଄ • /ECCUBEROOT/src
 ഑Լ͕ϓϩάϥϜຊମͱͳΓɺ phpϑΝΠϧ΍twigϑΝΠϧΛ ഑ஔ
9. EC-CUBE3ͷσΟϨΫτϦߏ଄ • /ECCUBEROOT/app
 ഑Լ͸ઃఆϑΝΠϧ΍ϩάϑΝ Πϧ౳͕഑ஔ͞Ε͓ͯΓɺϓ ϥάΠϯ͸ʮPluginʯσΟϨΫ τϦ഑ԼͰ࡞੒
10. EC-CUBE3ͷσΟϨΫτϦߏ଄ • /ECCUBEROOT/html
 ͕ެ։σΟϨΫτϦͱͳΓɺ ϦιʔεϑΝΠϧ(css΍ը૾ ϑΝΠϧ౳ʑ)Λ഑ஔ
 (֤σΟϨΫτϦͷઆ໌͸ޙड़)
11. EC-CUBE3ͷσΟϨΫτϦߏ଄ • ϑϩϯτը໘ͷඪ४σΟϨΫτϦ
 /ECCUBEROOT/html/template/default • ؅ཧը໘ͷඪ४σΟϨΫτϦ
 /ECCUBEROOT/html/template/admin • Πϯετʔϧը໘ͷඪ४σΟϨΫτϦ
 /ECCUBEROOT/html/template/install
12. 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ҎԼʹ഑ஔ͞Ε͍ͯΔɻ
13. 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Λ࢖͍͍ͨ৔߹ɺ͜ͷσΟϨΫτ Ϧʹ഑ஔ͢Ε͹ྑ͍ɻ
14. EC-CUBE3ͷσΟϨΫτϦߏ଄ ϓϥάΠϯ༻ͷެ։σΟϨΫτϦͰɺϓϥάΠϯͰ࢖༻ ͢ΔϦιʔεϑΝΠϧ͕഑ஔ͞ΕΔɻ ؅ཧը໘͔Β࡞੒͞ΕͨtwigϑΝΠϧ΍ಠࣗʹ࡞੒͠ ͨը૾ϑΝΠϧ౳͕഑ஔ͞ΕΔɻ ը૾Ξοϓϩʔυ༻σΟϨΫτϦ save_image͸঎඼ը૾΍ࢧ෷ํ๏ͷը૾͕഑ஔ͞Εɺ temp_image͸ϑΝΠϧΞοϓϩʔυ࣌ͷҰ࣌తͳϑΝ Πϧஔ͖৔ͱͯ͠ར༻͞ΕΔɻ
15. EC-CUBE3ͷσΟϨΫτϦߏ଄ • TwigϑΝΠϧͷ഑ஔ৔ॴ͸ɺ
 /ECCUBEROOT/src/Eccube/Resource/template • ࣮ࡍʹը໘Λ࡞੒͢Δ৔߹ɺTwigϑΝΠϧʹରͯ͠ख ΛՃ͑Δɻ
16. 3.ϒϩοΫͱϖʔδϨΠΞ΢τͷ આ໌
17. ϒϩοΫͱϖʔδϨΠΞ΢τͷઆ໌ • EC-CUBE3Ͱ͸ϑϩϯτը໘Λ࡞੒͢Δ৔߹ɺ ✓ ௚઀TwigϑΝΠϧΛ࡞੒ ✓ ؅ཧը໘ͷίϯςϯπ؅ཧΑΓը໘Λ࡞੒ ✓ σβΠϯςϯϓϨʔτͱͯ͠ඪ४ͷϑΝΠϧ͔Β࡞੒ ͠Ξοϓϩʔυ ͱ͍͏ํ๏͕͋Γ·͢ɻ • ࠓճ͸؅ཧը໘ͷϖʔδ؅ཧͱϒϩοΫ؅ཧͷػೳΛ ࢖ͬͯը໘Λ࡞੒͢Δํ๏Λઆ໌͠·͢ɻ
18. ϒϩοΫͱϖʔδϨΠΞ΢τͷઆ໌ • Ωϟϯϖʔϯϖʔδ΍୯ҰϖʔδΛ৽نʹ࡞੒͢Δ৔߹ɺϖʔδ ؅ཧΛ࢖ͬͯ؆୯ʹ࡞੒͢Δࣄ͕ՄೳͰ͢ɻ 1. ؅ཧը໘ʹϩάΠϯޙɺʮίϯςϯπ؅ཧʯˠʮϖʔδ؅ཧ Λબ୒ʯ͠ʮ৽نೖྗʯϘλϯΛΫϦοΫ 2. ໊শཝʹ͸೚ҙͷ໊শΛೖྗ 3. URLཝʹ͸ҰҙͱͳΔURLΛೖྗ 4. ϑΝΠϧ໊ཝʹ͸ҰҙͱͳΔ໊শΛೖྗ 5. ςΩετΤϦΞʹhtml΍twigΛೖྗ • ϖʔδ؅ཧ͔Βը໘Λ࡞੒͢ΔͱURLʹ͸֦ுࢠ͕͔ͭͳ͍ͨΊ ៉ྷͳURLͱͳΓ·͢ɻ
19. ϒϩοΫͱϖʔδϨΠΞ΢τͷઆ໌ • ৽نʹը໘Λ࡞੒͢ΔͷͰ͸ͳ͘ύʔπͳͲΛ௥Ճ͍ͨ͠৔ ߹ɺϒϩοΫ؅ཧΛ࢖ͬͯ؆୯ʹ࡞੒͢Δ͜ͱ͕ՄೳͰ͢ɻ 1. ؅ཧը໘ʹϩάΠϯޙɺʮίϯςϯπ؅ཧʯˠʮϒϩο Ϋ؅ཧΛબ୒ʯ͠ʮ৽نೖྗʯϘλϯΛΫϦοΫ 2. ϒϩοΫ໊ཝʹ͸೚ҙͷ໊শΛೖྗ 3. ϑΝΠϧ໊ཝʹ͸ҰҙͱͳΔ໊শΛೖྗ 4. ϒϩοΫσʔλʹ͸html΍twigλάΛೖྗ 5. ʮϖʔδ؅ཧʯΑΓ࡞੒ͨ͠ϒϩοΫΛ௥Ճ͍ͨ͠ϖʔ δͷʮϨΠΞ΢τฤूʯΛΫϦοΫ 6. ʮະ࢖༻ϒϩοΫʯΑΓ࡞੒ͨ͠ϒϩοΫΛ഑ஔ
20. 4.σϑΥϧτςϯϓϨʔτͷϩΰΛ มߋͯ͠ΈΑ͏
21. σϑΥϧτςϯϓϨʔτͷϩΰΛมߋͯ͠ΈΑ͏ • σϑΥϧτςϯϓϨʔτͷϩΰΛมߋ͢Δ৔߹ɺ௚઀ TwigϑΝΠϧΛमਖ਼͢Δํ๏ͱɺ؅ཧը໘͔Βमਖ਼͢ Δํ๏͕͋Γ·͢ɻࠓճ͸؅ཧը໘͔Βमਖ਼͢Δํ๏Λ આ໌͠·͢ɻ
22. σϑΥϧτςϯϓϨʔτͷϩΰΛมߋͯ͠ΈΑ͏ • ϩΰϒϩοΫͷमਖ਼
 ϒϩοΫ؅ཧը໘ΑΓϩΰΛબ୒ͯ͠ฤूΛߦ͍·͢ɻ σϑΥϧτͰ͸Πϯετʔϧ࣌ʹೖྗͨ͠ళ໊͕ઃఆ͞ Ε͍ͯ·͢ɻ <div class="header_logo_area"> <p class="copy">͘Β͠Λָ͠ΉϥΠϑελΠϧάοζ</p> <h1 class="header_logo"><a href="{{ url('homepage') }}">{{ BaseInfo.shop_name }}</a></h1> </div> ! <div class="header_logo_area"> <p class="copy">͘Β͠Λָ͠ΉϥΠϑελΠϧάοζ</p> <h1 class="header_logo"><a href="{{ url('homepage') }}">EC-CUBE 3.0ษڧձ</a></h1> </div>
23. σϑΥϧτςϯϓϨʔτͷϩΰΛมߋͯ͠ΈΑ͏ • ϩΰϒϩοΫͷमਖ਼
 ϩΰΛը૾ʹ͍ͨ͠ͱ͍͏৔߹ɺ/ECCUBEROOT/html/ template/default/img σΟϨΫτϦʹը૾ϑΝΠϧΛ഑ஔ͢Δ ͔ɺϑΝΠϧ؅ཧͰը૾ΛΞοϓ͠ҎԼͷΑ͏ʹमਖ਼͠·͢ɻ ɾimgσΟϨΫτϦʹ഑ஔͨ͠৔߹ <div class="header_logo_area"> <p class="copy">͘Β͠Λָ͠ΉϥΠϑελΠϧάοζ</p> <h1 class="header_logo"><a href="{{ url('homepage') }}"><img src="{{ app.config.front_urlpath }}/img/ hoge.jpg"></a></h1> </div> ɾϑΝΠϧ؅ཧΑΓը૾Λ഑ஔͨ͠৔߹ <div class="header_logo_area"> <p class="copy">͘Β͠Λָ͠ΉϥΠϑελΠϧάοζ</p> <h1 class="header_logo"><a href="{{ url('homepage') }}"><img src="{{ app.config.user_data_urlpath }}/ hoge.jpg"></a></h1> </div>
24. σϑΥϧτςϯϓϨʔτͷϩΰΛมߋͯ͠ΈΑ͏ • ࠓճ͸ϩΰͷมߋΛߦ͍·͕ͨ͠ɺଞʹ΋facebook Page Plugin΍Google Analyticsλάͷઃఆ΋ϒϩοΫ؅ཧΛ࢖͏ࣄͰ؆୯ʹઃஔՄೳͰ͢ɻ • σϑΥϧτͷσβΠϯ͔Β৽ͨͳσβΠϯΛ࡞੒͍ͨ͠৔߹ɺҰ൪͓खܰͳ ํ๏͸৽ن࡞੒ͨ͠cssϑΝΠϧ΍ը૾ϑΝΠϧΛ
 ECCUBEROOT/html/template/default/assets
 ഑Լʹ഑ஔ͠ɺϑϩϯτଆͷdefault_frame.twigʹ৽ن࡞੒ͨ͠cssϑΝΠϧ Λద༻ͤ͞ΔΑ͏ʹมߋ͠·͢ɻ • default_frame.twigΛมߋ͢Δ৔߹ɺ
 ECCUBEROOT/app/template/default
 ഑Լʹ഑ஔ͍͖ͯ͠·͢ɻมߋ͍ͨ͠ը໘ͷσΟϨΫτϦߏ੒͸ඞͣ߹Θͤ ΔΑ͏ʹ͠ͳ͍ͱϒϩοΫ؅ཧ΍ϖʔδϨΠΞ΢τ؅ཧͷ׆༻͕Ͱ͖·ͤΜɻ
25. 5.EC-CUBE 3.0ͷࣄྫ঺հ
26. EC-CUBE 3.0ͷࣄྫ঺հ • σϑΥϧτςϯϓϨʔτΛ׆༻ͨ͠ࣄྫ - ͍ͷΓͷಓ۩԰·ͳ͔ (https://manaka-store.com)
27. EC-CUBE 3.0ͷࣄྫ঺հ • σβΠϯΛಠࣗͰ࡞੒ͨ͠ࣄྫ - γϟγϣΫϥϒ (https://shashoku-love.jp/lp/)
28. EC-CUBE 3.0ͷࣄྫ঺հ • ϓϥάΠϯΛ࢖ͬͯ࡞੒ͨ͠ࣄྫ - νϥγDo! (https://chirashi.do)
29. ։ൃ࣌ͷࢀߟϖʔδ • EC-CUBE 3 ։ൃυΩϡϝϯτ
 http://ec-cube.github.io • Qiitaͷهࣄ
 http://qiita.com/tags/EC-CUBE3