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

Slide 1

Slide 1 text

WebσβΠφʔ޲͚ʂ EC-CUBEษڧձ2 EC-CUBEؔ੢Ϣʔβάϧʔϓ 2015-09-24

Slide 2

Slide 2 text

ࣗݾ঺հ גࣜձࣾΩϡʔϧ ࢁଜ ਗ਼࢙ ຊۀ͸γεςϜΤϯδχΞ EC-CUBE3ͷίϛολʔ(@k-yamamura) ͯ͠·͢

Slide 3

Slide 3 text

ίϛοτͯ͠·͢ɻ

Slide 4

Slide 4 text

αϚϦʔ 1.લճͷৼΓฦΓ 2.σΟϨΫτϦߏ੒ͷઆ໌ 3.ϑΝΠϧͷઆ໌ 4.Twigͷઆ໌ 5.࣮ࡍʹը໘Λ৽ن࡞੒/มߋ͢Δํ๏

Slide 5

Slide 5 text

1.લճͷৼΓฦΓ

Slide 6

Slide 6 text

લճͷৼΓฦΓ • EC-CUBE3ͷΠϯετʔϧํ๏ • σβΠϯϑϨʔϜϫʔΫ • ରԠϒϥ΢βʹ͍ͭͯ • σόοάϞʔυͷ༗ޮԽ • ϑϩϯτը໘ͷϨΠΞ΢τ • ςϯϓϨʔτͷ൓өॱং

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Bootstrap3ͷ࠾༻ • ϑϩϯτ͸ΧελϚΠζ͞ΕͨBootstrap3.3.4Λ࢖༻͠ɺ؅ཧը໘ ͸EC-CUBE3.0.0ϦϦʔε࣌఺Ͱ࠷৽ͷBootstrap3.3.5Λ࢖༻ • ϑϩϯτը໘Ͱ͸BootstrapΛΧελϚΠζ͠ɺඞཁͳଐੑ͚ͩΛ ൈ͖ग़ͯ͠࢖༻͍ͯ͠ΔͨΊɺ࢖༻ग़དྷΔclass͸ݶΒΕ͍ͯΔ • ؅ཧը໘Ͱ͸Bootstrap3.3.5Ͱ༻ҙ͞Ε͍ͯΔclass͸શͯ࢖༻Մೳ • btnͷ৭ͳͲσβΠϯʹؔΘΔ෦෼͸EC-CUBE3ଆͷcssͰఆٛ͠௚ ͍ͯ͠Δclass͕͋ΔͨΊѻ͏ͨΊʹ஫ҙ͕ඞཁ

Slide 9

Slide 9 text

ରԠϒϥ΢βʹ͍ͭͯ OS ϒϥ΢β Windows (Windows7Ҏ߱) Internet Explorer10 Ҏ߱ Google Chrome ࠷৽൛ Firefox ࠷৽൛ Mac Safari ࠷৽൛ iOS(7Ҏ߱) Safari ࠷৽൛ Android(4.1Ҏ߱) ඪ४ϒϥ΢β ࠷৽൛

Slide 10

Slide 10 text

σόοάϞʔυͷ༗ޮԽ • ௨ৗ / ΍/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', );

Slide 11

Slide 11 text

ϑϩϯτը໘ͷϨΠΞ΢τ フロン → 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 ④　

Slide 12

Slide 12 text

ςϯϓϨʔτͷ൓өॱং • σβΠϯςϯϓϨʔτΛ࡞੒ޙɺϑΝΠϧΛ഑ஔ͢Δ σΟϨΫτϦʹΑͬͯ༏ઌॱҐ͕͋Γ·͢ɻҎԼͷॱ ংͰ֘౰͢ΔςϯϓϨʔτϑΝΠϧ͕ଘࡏ͢Δͱઌʹ ൓ө͞Ε·͢ɻ(ϑϩϯτͷΈͷઆ໌ ) 1. ECCUBEROOT/app/template/default 2. ECCUBEROOT/src/Eccube/Resource/template/default 3. ECCUBEROOT/app/Plugin/[plugin_code]/Resource/ template/default

Slide 13

Slide 13 text

2.σΟϨΫτϦߏ੒ͷઆ໌

Slide 14

Slide 14 text

σΟϨΫτϦߏ੒ͷઆ໌ • લ४උͱͯ͠ຊମଆͷtwigϑΝΠϧΛ  ECCUBEROOT/app/templateʹίϐʔ • Ұ൪खͬऔΓૣ͘ରԠՄೳ • ݱߦͷσΟϨΫτϦߏ੒ͱશ͘ͷಉҰ؀ڥ͕࡞੒Մೳ • ެ։σΟϨΫτϦ͸ECCUBEROOT/html/template/ default഑Լ

Slide 15

Slide 15 text

σΟϨΫτϦߏ੒ͷઆ໌ ECCUBEROOT/src/Eccube/Resource/template/default ҎԼͷϑΝΠϧΛίϐʔͯ͠ɺ ECCUBEROOT/app/template/default ௚Լ΁ίϐʔͯ͠मਖ਼Λߦ͏ɻ admin͸؅ཧը໘ଆͷϑΝΠϧͰɺdefault͸ϑϩϯτը ໘ଆͷϑΝΠϧ͕഑ஔ͞Ε͍ͯΔɻ

Slide 16

Slide 16 text

σΟϨΫτϦߏ੒ͷઆ໌ • /ECCUBEROOT/html  ͕ެ։σΟϨΫτϦͱͳΓɺ ϦιʔεϑΝΠϧ(css΍ը૾ ϑΝΠϧ౳ʑ)Λ഑ஔ  (֤σΟϨΫτϦͷઆ໌͸ޙड़)

Slide 17

Slide 17 text

σΟϨΫτϦߏ੒ͷઆ໌ σΟϨΫτϦ໊ ػೳ໊ default௚Լ ڞ௨ɺτοϓϖʔδ Block ϒϩοΫ؅ཧ Cart Χʔτ Contact ͓໰͍߹Θͤ Entry ձһొ࿥ Forgot ύεϫʔυϦϚΠϯμʔ Form ϑΥʔϜ߲໨༻ςϯϓϨʔτ Help ϔϧϓ Mail ϝʔϧૹ৴༻ςϯϓϨʔτ Mypage ϚΠϖʔδ Product ঎඼Ұཡɺৄࡉ Shopping ߪೖ

Slide 18

Slide 18 text

3.ϑΝΠϧͷઆ໌

Slide 19

Slide 19 text

ϑΝΠϧͷઆ໌ • default௚Լʹ͸ओʹϑϩϯτը໘ڞ௨ͱͳΔ twigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ block.twig ϒϩοΫ੍ޚ༻ default_frame.twig ը໘ߏ੒༻ςϯϓϨʔτ error.twig ڞ௨Τϥʔը໘ index.twig τοϓϖʔδ pagination.twig վϖʔδ༻

Slide 20

Slide 20 text

ϑΝΠϧͷઆ໌ • BlockσΟϨΫτϦ௚Լʹ͸ը໘Λߏ੒͢Δͨ ΊͷϨΠΞ΢τ༻twigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ cart.twig ΧʔτදࣔϨΠΞ΢τ category.twig ΧςΰϦදࣔϨΠΞ΢τ footer.twig ϑολʔ༻ϨΠΞ΢τ free.twig ϑϦʔΤϦΞ༻ϨΠΞ΢τ garally.twig ΪϟϥϦʔ༻ϨΠΞ΢τ login.twig ϩάΠϯ༻ϨΠΞ΢τ logo.twig γϣοϓϩΰ༻ϨΠΞ΢τ new_product.twig ৽ண঎඼༻ϨΠΞ΢τ news.twig ৽ண৘ใ༻ϨΠΞ΢τ search_product.twig ঎඼ݕࡧ༻ϨΠΞ΢τ

Slide 21

Slide 21 text

ϑΝΠϧͷઆ໌ • CartσΟϨΫτϦ௚Լʹ͸Χʔτը໘Λදࣔ͢ ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ index.twig Χʔτը໘

Slide 22

Slide 22 text

ϑΝΠϧͷઆ໌ • ContactσΟϨΫτϦ௚Լʹ͸͓໰͍߹Θͤը ໘Λදࣔ͢ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ complete.twig ͓໰͍߹Θͤ׬ྃը໘ conﬁrm.twig ͓໰͍߹Θͤ֬ೝը໘ index.twig ͓໰͍߹Θͤೖྗը໘

Slide 23

Slide 23 text

ϑΝΠϧͷઆ໌ • EntryσΟϨΫτϦ௚Լʹ͸ձһొ࿥Λදࣔ͢ ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ activate.twig ຊొ࿥׬ྃը໘ complete.twig ձһొ࿥ೖྗ׬ྃը໘ conﬁrm.twig ձһొ࿥֬ೝը໘ index.twig ձһొ࿥ೖྗը໘

Slide 24

Slide 24 text

ϑΝΠϧͷઆ໌ • ForgotσΟϨΫτϦ௚Լʹ͸ύεϫʔυϦϚΠ ϯμʔը໘Λදࣔ͢ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ complete.twig ϦϚΠϯμʔϝʔϧૹ৴׬ྃը໘ index.twig ύεϫʔυ࠶ൃߦೖྗը໘ reset.twig ύεϫʔυมߋ׬ྃը໘

Slide 25

Slide 25 text

ϑΝΠϧͷઆ໌ • FormσΟϨΫτϦ௚Լʹ͸ϑΥʔϜ߲໨ΛϨϯμϦϯ ά͢ΔࡍͷσβΠϯϕʔεͱͳΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ form_layout.twig ϑΥʔϜϨϯμϦϯά༻

Slide 26

Slide 26 text

ϑΝΠϧͷઆ໌ • HelpσΟϨΫτϦ௚Լʹ͸αΠτͷجຊͱͳΔن໿΍ϓ ϥΠόγʔϙϦγʔը໘Λදࣔ͢ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ about.twig ͜ͷαΠτʹ͍ͭͯը໘ agreement.twig ձһొ࿥ن໿ը໘ guide.twig ͝ར༻ΨΠυը໘ privacy.twig ϓϥΠόγʔϙϦγʔը໘ tradelaw.twig ಛఆ঎औҾ๏ը໘

Slide 27

Slide 27 text

ϑΝΠϧͷઆ໌ • MailσΟϨΫτϦ௚Լʹ͸ϝʔϧૹ৴ςϯϓ Ϩʔτ༻twigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ contact_mail.twig ͓໰͍߹Θͤ༻ϝʔϧςϯϓϨʔτ customer_withdraw_mail .twig ձһୀձ༻ϝʔϧςϯϓϨʔτ entry_complete.twig ձһొ࿥׬ྃ༻ϝʔϧςϯϓϨʔτ entry_conﬁrm.twig ձһԾొ࿥༻ϝʔϧςϯϓϨʔτ forgot_mail.twig ύεϫʔυϦϚΠϯμ֬ೝ༻ϝʔϧςϯϓ Ϩʔτ order.twig ߪೖ׬ྃ༻ϝʔϧςϯϓϨʔτ reset_complete_mail.twi ύεϫʔυมߋ׬ྃ༻ϝʔϧςϯϓϨʔτ

Slide 28

Slide 28 text

ϑΝΠϧͷઆ໌ • 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_conﬁrm.twig ձһୀձ֬ೝը໘

Slide 29

Slide 29 text

ϑΝΠϧͷઆ໌ • ProductσΟϨΫτϦ௚Լʹ͸ߪೖલͷ঎඼ը ໘Λදࣔ͢ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ detail.twig ঎඼ৄࡉը໘ list.twig ঎඼Ұཡը໘

Slide 30

Slide 30 text

ϑΝΠϧͷઆ໌ • ShoppingσΟϨΫτϦ௚Լʹ͸ߪೖϑϩʔ࣌ ʹදࣔ͢ΔtwigϑΝΠϧ͕ଘࡏ ϑΝΠϧ໊ ػೳ໊ complete.twig ߪೖ׬ྃը໘ index.twig ߪೖ֬ೝը໘ login.twig γϣοϐϯά༻ϩάΠϯը໘ nonmember.twig ඇձһ৘ใೖྗը໘ shipping.twig ͓ಧ͚ઌࢦఆը໘ shipping_edit.twig ͓ಧ͚ઌ৽نೖྗը໘ shipping_multiple.twig ͓ಧ͚ઌෳ਺ࢦఆը໘ shopping_error.twig ߪೖΤϥʔը໘

Slide 31

Slide 31 text

4.Twigͷઆ໌

Slide 32

Slide 32 text

Twigͷઆ໌ • EC-CUBE3͔Β͸ը໘Λ࡞੒͢Δͷʹ2ܥͰ࢖ͬ ͍ͯͨSmartyͰ͸ͳ͘TwigΛ࠾༻  http://twig.sensiolabs.org/doc/intro.html  http://docs.symfony.gr.jp/symfony2/book/ templating.html • TwigΛ࠾༻͢Δ͜ͱͰ؆ܿͰՄಡੑͷߴ͍ς ϯϓϨʔτΛهड़Մೳ

Slide 33

Slide 33 text

Twigͷઆ໌ • σόοά؀ڥҎ֎Ͱར༻͢ΔͱɺTwigϑΝΠϧ͸ Ωϟογϡ͕࡞੒͞Εߴ଎ʹදࣔՄೳ • Ұ౓ΩϟογϡϑΝΠϧ͕࡞੒͞ΕΔͱɺTwig ϑΝΠϧΛฤूͯ͠΋൓ө͞Εͳ͍ͨΊɺඞͣΩϟο γϡΫϦΞ͕ඞཁ • σόοάϞʔυͰ͸ຖճΩϟογϡϑΝΠϧ͕࡞੒ ͞ΕΔͨΊɺTwigϑΝΠϧΛฤूͯ͠΋ଈ࠲ʹ൓ө

Slide 34

Slide 34 text

Twigͷઆ໌ Twigͷߏจ {{ ... }}: "ग़ྗ͢Δ": ม਺΍ࣜͷ݁ՌΛςϯϓϨʔτʹදࣔ {% ... %}: "ॲཧ͢Δ": ςϯϓϨʔτͷϩδοΫΛ੍ޚ͢ΔλάͰɺforϧʔϓͳͲͷ໋ྩͷ࣮ߦ ʹ࢖༻ {# ... #}: "ίϝϯτ": ͜ͷߏจͰ͸ɺPHP ͷ /* comment */ ͱಉ͡Α͏ʹෳ਺ߦʹ౉Δίϝ ϯτ΋هड़Մೳ {{ hoge|upper }}: "ϑΟϧλʔ": ϑΟϧλʔΛ࢖͏ͱɺϨϯμϦϯά͞ΕΔલʹίϯςϯπΛम ০͢Δ͜ͱ͕Ͱ͖·͢ɻ͜ͷྫͰ͸ɺϑΟϧλʔΛ࢖ͬͯม਺ hoge ͷ಺༰Λ͢΂ͯେจࣈʹม׵ͯ͠ ग़ྗ

Slide 35

Slide 35 text

Twigͷઆ໌ • Twig͸ςϯϓϨʔτͷܧঝՄೳ • ϔομʔ΍ϑολʔɺαΠυόʔͳͲڞ௨ཁૉΛΠϯΫ ϧʔυ͢Δํ๏ͱͯ͠ɺ  ϕʔεςϯϓϨʔτͱͳΔ"layout"ςϯϓϨʔτʹɺαΠ τͰ࢖͏ڞ௨ཁૉͷ͢΂ͯΛͦΕͧΕ ϒϩοΫ"block"ͱ ͯ͠ఆ͓͖ٛͯ͠ɺ  ࢠͷςϯϓϨʔτଆͰ͸layout ςϯϓϨʔτΛܧঝͯ͠ blockΛΦʔόʔϥΠυ͢Δ͜ͱͰ࣮ݱՄೳ

Slide 36

Slide 36 text

Twigͷઆ໌ ɾdefault_frame.twig {% block title %}ςετΞϓϦέʔγϣϯ{% endblock %}

{% block main %}{% endblock %}

Slide 37

Slide 37 text

Twigͷઆ໌ ɾindex.twig {% extends 'default_frame.twig' %} {% block title %}ϒϩάهࣄͷҰཡ{% endblock %} {% block main %} {% for entry in blog_entries %}

{% endfor %} {% endblock %}

Slide 38

Slide 38 text

͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ