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

Transcript

1. WebσβΠφʔ޲͚ʂ EC-CUBEษڧձ2 EC-CUBEؔ੢Ϣʔβάϧʔϓ 2015-09-24
2. ࣗݾ঺հ גࣜձࣾΩϡʔϧ ࢁଜ ਗ਼࢙ ຊۀ͸γεςϜΤϯδχΞ EC-CUBE3ͷίϛολʔ(@k-yamamura) ͯ͠·͢
3. ίϛοτͯ͠·͢ɻ
4. αϚϦʔ 1.લճͷৼΓฦΓ 2.σΟϨΫτϦߏ੒ͷઆ໌ 3.ϑΝΠϧͷઆ໌ 4.Twigͷઆ໌ 5.࣮ࡍʹը໘Λ৽ن࡞੒/มߋ͢Δํ๏
5. 1.લճͷৼΓฦΓ
6. લճͷৼΓฦΓ • EC-CUBE3ͷΠϯετʔϧํ๏ • σβΠϯϑϨʔϜϫʔΫ • ରԠϒϥ΢βʹ͍ͭͯ • σόοάϞʔυͷ༗ޮԽ • ϑϩϯτը໘ͷϨΠΞ΢τ • ςϯϓϨʔτͷ൓өॱং
7. 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
8. Bootstrap3ͷ࠾༻ • ϑϩϯτ͸ΧελϚΠζ͞ΕͨBootstrap3.3.4Λ࢖༻͠ɺ؅ཧը໘ ͸EC-CUBE3.0.0ϦϦʔε࣌఺Ͱ࠷৽ͷBootstrap3.3.5Λ࢖༻ • ϑϩϯτը໘Ͱ͸BootstrapΛΧελϚΠζ͠ɺඞཁͳଐੑ͚ͩΛ ൈ͖ग़ͯ͠࢖༻͍ͯ͠ΔͨΊɺ࢖༻ग़དྷΔclass͸ݶΒΕ͍ͯΔ • ؅ཧը໘Ͱ͸Bootstrap3.3.5Ͱ༻ҙ͞Ε͍ͯΔclass͸શͯ࢖༻Մೳ • btnͷ৭ͳͲσβΠϯʹؔΘΔ෦෼͸EC-CUBE3ଆͷcssͰఆٛ͠௚ ͍ͯ͠Δclass͕͋ΔͨΊѻ͏ͨΊʹ஫ҙ͕ඞཁ
9. ରԠϒϥ΢βʹ͍ͭͯ OS ϒϥ΢β Windows (Windows7Ҏ߱) Internet Explorer10 Ҏ߱ Google Chrome ࠷৽൛ Firefox ࠷৽൛ Mac Safari ࠷৽൛ iOS(7Ҏ߱) Safari ࠷৽൛ Android(4.1Ҏ߱) ඪ४ϒϥ΢β ࠷৽൛
10. σόοάϞʔυͷ༗ޮԽ • ௨ৗ / ΍/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', );
11. ϑϩϯτը໘ͷϨΠΞ΢τ フロン → 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 ④　
12. ςϯϓϨʔτͷ൓өॱং • σβΠϯςϯϓϨʔτΛ࡞੒ޙɺϑΝΠϧΛ഑ஔ͢Δ σΟϨΫτϦʹΑͬͯ༏ઌॱҐ͕͋Γ·͢ɻҎԼͷॱ ংͰ֘౰͢ΔςϯϓϨʔτϑΝΠϧ͕ଘࡏ͢Δͱઌʹ ൓ө͞Ε·͢ɻ(ϑϩϯτͷΈͷઆ໌ ) 1. ECCUBEROOT/app/template/default 2. ECCUBEROOT/src/Eccube/Resource/template/default 3. ECCUBEROOT/app/Plugin/[plugin_code]/Resource/ template/default
13. 2.σΟϨΫτϦߏ੒ͷઆ໌
14. σΟϨΫτϦߏ੒ͷઆ໌ • લ४උͱͯ͠ຊମଆͷtwigϑΝΠϧΛ
 ECCUBEROOT/app/templateʹίϐʔ • Ұ൪खͬऔΓૣ͘ରԠՄೳ • ݱߦͷσΟϨΫτϦߏ੒ͱશ͘ͷಉҰ؀ڥ͕࡞੒Մೳ • ެ։σΟϨΫτϦ͸ECCUBEROOT/html/template/ default഑Լ
15. σΟϨΫτϦߏ੒ͷઆ໌ ECCUBEROOT/src/Eccube/Resource/template/default ҎԼͷϑΝΠϧΛίϐʔͯ͠ɺ ECCUBEROOT/app/template/default ௚Լ΁ίϐʔͯ͠मਖ਼Λߦ͏ɻ admin͸؅ཧը໘ଆͷϑΝΠϧͰɺdefault͸ϑϩϯτը ໘ଆͷϑΝΠϧ͕഑ஔ͞Ε͍ͯΔɻ
16. σΟϨΫτϦߏ੒ͷઆ໌ • /ECCUBEROOT/html
 ͕ެ։σΟϨΫτϦͱͳΓɺ ϦιʔεϑΝΠϧ(css΍ը૾ ϑΝΠϧ౳ʑ)Λ഑ஔ
 (֤σΟϨΫτϦͷઆ໌͸ޙड़)
17. σΟϨΫτϦߏ੒ͷઆ໌ σΟϨΫτϦ໊ ػೳ໊ default௚Լ ڞ௨ɺτοϓϖʔδ Block ϒϩοΫ؅ཧ Cart Χʔτ Contact ͓໰͍߹Θͤ Entry ձһొ࿥ Forgot ύεϫʔυϦϚΠϯμʔ Form ϑΥʔϜ߲໨༻ςϯϓϨʔτ Help ϔϧϓ Mail ϝʔϧૹ৴༻ςϯϓϨʔτ Mypage ϚΠϖʔδ Product ঎඼Ұཡɺৄࡉ Shopping ߪೖ
18. 3.ϑΝΠϧͷઆ໌
19. ϑΝΠϧͷઆ໌ • default௚Լʹ͸ओʹϑϩϯτը໘ڞ௨ͱͳΔ twigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ block.twig ϒϩοΫ੍ޚ༻ default_frame.twig ը໘ߏ੒༻ςϯϓϨʔτ error.twig ڞ௨Τϥʔը໘ index.twig τοϓϖʔδ pagination.twig վϖʔδ༻
20. ϑΝΠϧͷઆ໌ • BlockσΟϨΫτϦ௚Լʹ͸ը໘Λߏ੒͢Δͨ ΊͷϨΠΞ΢τ༻twigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ cart.twig ΧʔτදࣔϨΠΞ΢τ category.twig ΧςΰϦදࣔϨΠΞ΢τ footer.twig ϑολʔ༻ϨΠΞ΢τ free.twig ϑϦʔΤϦΞ༻ϨΠΞ΢τ garally.twig ΪϟϥϦʔ༻ϨΠΞ΢τ login.twig ϩάΠϯ༻ϨΠΞ΢τ logo.twig γϣοϓϩΰ༻ϨΠΞ΢τ new_product.twig ৽ண঎඼༻ϨΠΞ΢τ news.twig ৽ண৘ใ༻ϨΠΞ΢τ search_product.twig ঎඼ݕࡧ༻ϨΠΞ΢τ
21. ϑΝΠϧͷઆ໌ • CartσΟϨΫτϦ௚Լʹ͸Χʔτը໘Λදࣔ͢ ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ index.twig Χʔτը໘
22. ϑΝΠϧͷઆ໌ • ContactσΟϨΫτϦ௚Լʹ͸͓໰͍߹Θͤը ໘Λදࣔ͢ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ complete.twig ͓໰͍߹Θͤ׬ྃը໘ confirm.twig ͓໰͍߹Θͤ֬ೝը໘ index.twig ͓໰͍߹Θͤೖྗը໘
23. ϑΝΠϧͷઆ໌ • EntryσΟϨΫτϦ௚Լʹ͸ձһొ࿥Λදࣔ͢ ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ activate.twig ຊొ࿥׬ྃը໘ complete.twig ձһొ࿥ೖྗ׬ྃը໘ confirm.twig ձһొ࿥֬ೝը໘ index.twig ձһొ࿥ೖྗը໘
24. ϑΝΠϧͷઆ໌ • ForgotσΟϨΫτϦ௚Լʹ͸ύεϫʔυϦϚΠ ϯμʔը໘Λදࣔ͢ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ complete.twig ϦϚΠϯμʔϝʔϧૹ৴׬ྃը໘ index.twig ύεϫʔυ࠶ൃߦೖྗը໘ reset.twig ύεϫʔυมߋ׬ྃը໘
25. ϑΝΠϧͷઆ໌ • FormσΟϨΫτϦ௚Լʹ͸ϑΥʔϜ߲໨ΛϨϯμϦϯ ά͢ΔࡍͷσβΠϯϕʔεͱͳΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ form_layout.twig ϑΥʔϜϨϯμϦϯά༻
26. ϑΝΠϧͷઆ໌ • HelpσΟϨΫτϦ௚Լʹ͸αΠτͷجຊͱͳΔن໿΍ϓ ϥΠόγʔϙϦγʔը໘Λදࣔ͢ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ about.twig ͜ͷαΠτʹ͍ͭͯը໘ agreement.twig ձһొ࿥ن໿ը໘ guide.twig ͝ར༻ΨΠυը໘ privacy.twig ϓϥΠόγʔϙϦγʔը໘ tradelaw.twig ಛఆ঎औҾ๏ը໘
27. ϑΝΠϧͷઆ໌ • MailσΟϨΫτϦ௚Լʹ͸ϝʔϧૹ৴ςϯϓ Ϩʔτ༻twigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ contact_mail.twig ͓໰͍߹Θͤ༻ϝʔϧςϯϓϨʔτ customer_withdraw_mail .twig ձһୀձ༻ϝʔϧςϯϓϨʔτ entry_complete.twig ձһొ࿥׬ྃ༻ϝʔϧςϯϓϨʔτ entry_confirm.twig ձһԾొ࿥༻ϝʔϧςϯϓϨʔτ forgot_mail.twig ύεϫʔυϦϚΠϯμ֬ೝ༻ϝʔϧςϯϓ Ϩʔτ order.twig ߪೖ׬ྃ༻ϝʔϧςϯϓϨʔτ reset_complete_mail.twi ύεϫʔυมߋ׬ྃ༻ϝʔϧςϯϓϨʔτ
28. ϑΝΠϧͷઆ໌ • MypageσΟϨΫτϦ௚Լʹ͸ϩάΠϯޙͷձһ৘ ใ΍஫จཤྺ౳ʑΛදࣔ͢ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ chage.twig ձһ৘ใมߋೖྗը໘ change_complete.twig ձһ৘ใมߋ׬ྃը໘ delivery.twig ͓ಧ͚ઌҰཡը໘ delivery_edit.twig ͓ಧ͚ઌೖྗ/มߋը໘ favorite.twig ͓ؾʹೖΓը໘ history.twig ߪೖཤྺৄࡉը໘ index.twig ߪೖཤྺҰཡը໘ login.twig ϩάΠϯը໘ mail_view.twig ϝʔϧૹड৴ཤྺը໘ navi.twig ϚΠϖʔδઐ༻λϒ withdraw.twig ձһୀձը໘ withdraw_complete.twig ձһୀձ׬ྃը໘ withdraw_confirm.twig ձһୀձ֬ೝը໘
29. ϑΝΠϧͷઆ໌ • ProductσΟϨΫτϦ௚Լʹ͸ߪೖલͷ঎඼ը ໘Λදࣔ͢ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ detail.twig ঎඼ৄࡉը໘ list.twig ঎඼Ұཡը໘
30. ϑΝΠϧͷઆ໌ • ShoppingσΟϨΫτϦ௚Լʹ͸ߪೖϑϩʔ࣌ ʹදࣔ͢ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ complete.twig ߪೖ׬ྃը໘ index.twig ߪೖ֬ೝը໘ login.twig γϣοϐϯά༻ϩάΠϯը໘ nonmember.twig ඇձһ৘ใೖྗը໘ shipping.twig ͓ಧ͚ઌࢦఆը໘ shipping_edit.twig ͓ಧ͚ઌ৽نೖྗը໘ shipping_multiple.twig ͓ಧ͚ઌෳ਺ࢦఆը໘ shopping_error.twig ߪೖΤϥʔը໘
31. 4.Twigͷઆ໌
32. Twigͷઆ໌ • EC-CUBE3͔Β͸ը໘Λ࡞੒͢Δͷʹ2ܥͰ࢖ͬ ͍ͯͨSmartyͰ͸ͳ͘TwigΛ࠾༻
 http://twig.sensiolabs.org/doc/intro.html
 http://docs.symfony.gr.jp/symfony2/book/ templating.html • TwigΛ࠾༻͢Δ͜ͱͰ؆ܿͰՄಡੑͷߴ͍ς ϯϓϨʔτΛهड़Մೳ
33. Twigͷઆ໌ • σόοά؀ڥҎ֎Ͱར༻͢ΔͱɺTwigϑΝΠϧ͸ Ωϟογϡ͕࡞੒͞Εߴ଎ʹදࣔՄೳ • Ұ౓ΩϟογϡϑΝΠϧ͕࡞੒͞ΕΔͱɺTwig ϑΝΠϧΛฤूͯ͠΋൓ө͞Εͳ͍ͨΊɺඞͣΩϟο γϡΫϦΞ͕ඞཁ • σόοάϞʔυͰ͸ຖճΩϟογϡϑΝΠϧ͕࡞੒ ͞ΕΔͨΊɺTwigϑΝΠϧΛฤूͯ͠΋ଈ࠲ʹ൓ө
34. Twigͷઆ໌ Twigͷߏจ {{ ... }}: "ग़ྗ͢Δ": ม਺΍ࣜͷ݁ՌΛςϯϓϨʔτʹදࣔ {% ... %}: "ॲཧ͢Δ": ςϯϓϨʔτͷϩδοΫΛ੍ޚ͢ΔλάͰɺforϧʔϓͳͲͷ໋ྩͷ࣮ߦ ʹ࢖༻ {# ... #}: "ίϝϯτ": ͜ͷߏจͰ͸ɺPHP ͷ /* comment */ ͱಉ͡Α͏ʹෳ਺ߦʹ౉Δίϝ ϯτ΋هड़Մೳ {{ hoge|upper }}: "ϑΟϧλʔ": ϑΟϧλʔΛ࢖͏ͱɺϨϯμϦϯά͞ΕΔલʹίϯςϯπΛम ০͢Δ͜ͱ͕Ͱ͖·͢ɻ͜ͷྫͰ͸ɺϑΟϧλʔΛ࢖ͬͯม਺ hoge ͷ಺༰Λ͢΂ͯେจࣈʹม׵ͯ͠ ग़ྗ
35. Twigͷઆ໌ • Twig͸ςϯϓϨʔτͷܧঝՄೳ • ϔομʔ΍ϑολʔɺαΠυόʔͳͲڞ௨ཁૉΛΠϯΫ ϧʔυ͢Δํ๏ͱͯ͠ɺ
 ϕʔεςϯϓϨʔτͱͳΔ"layout"ςϯϓϨʔτʹɺαΠ τͰ࢖͏ڞ௨ཁૉͷ͢΂ͯΛͦΕͧΕ ϒϩοΫ"block"ͱ ͯ͠ఆ͓͖ٛͯ͠ɺ
 ࢠͷςϯϓϨʔτଆͰ͸layout ςϯϓϨʔτΛܧঝͯ͠ blockΛΦʔόʔϥΠυ͢Δ͜ͱͰ࣮ݱՄೳ
36. Twigͷઆ໌ ɾdefault_frame.twig <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>{% block title %}ςετΞϓϦέʔγϣϯ{% endblock %}</title> </head> <body> <div id="main_middle"> {% block main %}{% endblock %} </div> </body> </html>
37. Twigͷઆ໌ ɾindex.twig {% extends 'default_frame.twig' %} {% block title %}ϒϩάهࣄͷҰཡ{% endblock %} {% block main %} {% for entry in blog_entries %} <h2>{{ entry.title }}</h2> <p>{{ entry.body }}</p> {% endfor %} {% endblock %}
38. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ