Tweet
Tweet

Slide 1

Slide 1 text

EC-CUBE3ษڧձ ৽͍͠σβΠϯΛ࡞੒ͯ͠ΈΑ͏ EC-CUBEؔ੢Ϣʔβάϧʔϓ 2017-02-02

Slide 2

Slide 2 text

໨࣍ 1. σβΠϯςϯϓϨʔτͷμ΢ϯϩʔυ 2. EC-CUBE3ͷσΟϨΫτϦߏ଄ 3. ৽نσβΠϯͷ࡞੒खॱ

Slide 3

Slide 3 text

1.σβΠϯςϯϓϨʔτͷ μ΢ϯϩʔυ

Slide 4

Slide 4 text

σβΠϯςϯϓϨʔτͷμ΢ϯϩʔυ • ࠓճ৽͍͠σβΠϯςϯϓϨʔτΛ࡞੒͢Δʹ͋ͨΓɺҰ͔Β࡞੒͠ ͍ͯͨΒ͕࣌ؒ଍Γͳ͍ͨΊɺΫϦΤΠςΟϒɾίϞϯζ3Ͱఏڙ͞ Ε͍ͯΔςϯϓϨʔτΛEC-CUBE3ʹద༻͠ɺ৽͍͠σβΠϯΛ࡞੒ ͢Δํ๏Λઆ໌͠·͢ɻ
 https://freehtml5.co/preview/?item=shop-free-website-template- using-bootstrap-for-ecommerce-websites • ࠓճղઆ͢ΔσβΠϯςϯϓϨʔτΛEC-CUBE3ʹରԠͨ͠΋ͷΛҎ ԼͷGitHubURLʹެ։͍ͯ͠·͢ͷͰͦͪΒ΋ࢀߟʹ͍ͯͩ͘͠͞ɻ
 https://github.com/k-yamamura/design-template

Slide 5

Slide 5 text

2.EC-CUBE3ͷσΟϨΫτϦߏ଄

Slide 6

Slide 6 text

EC-CUBE3ͷσΟϨΫτϦߏ଄ • EC-CUBE3Ͱ͸SilexϑϨʔϜϫʔΫΛ࠾༻͍ͯ͠Δͨ Ίɺ2ܥ͔Βେ෯ʹσΟϨΫτϦߏ଄͕มԽ • Symfony2ͷσΟϨΫτϦߏ଄ΛࢀߟʹɺEC-CUBE3ಠ ࣗʹߏ੒ • URLʹ.php͕ແ͘ͳΓγϯϓϧͳURLʹมߋ • ެ։σΟϨΫτϦʹ͍ͭͯ͸2ܥΛ΄΅౿ऻ

Slide 7

Slide 7 text

EC-CUBE3ͷσΟϨΫτϦߏ଄ • /ECCUBEROOT/src
 ഑Լ͕ϓϩάϥϜຊମͱͳΓɺ phpϑΝΠϧ΍twigϑΝΠϧΛ ഑ஔ

Slide 8

Slide 8 text

EC-CUBE3ͷσΟϨΫτϦߏ଄ • /ECCUBEROOT/app
 ഑Լ͸ઃఆϑΝΠϧ΍ϩάϑΝ Πϧ౳͕഑ஔ͞Ε͓ͯΓɺϓ ϥάΠϯ͸ʮPluginʯσΟϨΫ τϦ഑ԼͰ࡞੒

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

EC-CUBE3ͷσΟϨΫτϦߏ଄ • ϑϩϯτը໘ͷඪ४σΟϨΫτϦ
 /ECCUBEROOT/html/template/default • ؅ཧը໘ͷඪ४σΟϨΫτϦ
 /ECCUBEROOT/html/template/admin • Πϯετʔϧը໘ͷඪ४σΟϨΫτϦ
 /ECCUBEROOT/html/template/install

Slide 11

Slide 11 text

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ҎԼʹ഑ஔ͞Ε͍ͯΔɻ

Slide 12

Slide 12 text

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Λ࢖͍͍ͨ৔߹ɺ͜ͷσΟϨΫτ Ϧʹ഑ஔ͢Ε͹ྑ͍ɻ

Slide 13

Slide 13 text

EC-CUBE3ͷσΟϨΫτϦߏ଄ ϓϥάΠϯ༻ͷެ։σΟϨΫτϦͰɺϓϥάΠϯͰ࢖༻ ͢ΔϦιʔεϑΝΠϧ͕഑ஔ͞ΕΔɻ ؅ཧը໘͔Β࡞੒͞ΕͨtwigϑΝΠϧ΍ಠࣗʹ࡞੒͠ ͨը૾ϑΝΠϧ౳͕഑ஔ͞ΕΔɻ ը૾Ξοϓϩʔυ༻σΟϨΫτϦ save_image͸঎඼ը૾΍ࢧ෷ํ๏ͷը૾͕഑ஔ͞Εɺ temp_image͸ϑΝΠϧΞοϓϩʔυ࣌ͷҰ࣌తͳϑΝ Πϧஔ͖৔ͱͯ͠ར༻͞ΕΔɻ

Slide 14

Slide 14 text

EC-CUBE3ͷσΟϨΫτϦߏ଄ • TwigϑΝΠϧͷ഑ஔ৔ॴ͸ɺ
 /ECCUBEROOT/src/Eccube/Resource/template • ࣮ࡍʹը໘Λ࡞੒͢Δ৔߹ɺTwigϑΝΠϧʹରͯ͠ख ΛՃ͑Δɻ

Slide 15

Slide 15 text

3.৽نσβΠϯͷ࡞੒खॱ

Slide 16

Slide 16 text

৽نσβΠϯͷ࡞੒खॱ • EC-CUBE3Ͱ͸ϑϩϯτը໘Λ࡞੒͢Δ৔߹ɺҎԼͷํ ๏͕͋Γ·͢ɻ ✓ ௚઀TwigϑΝΠϧΛ࡞੒ ✓ ؅ཧը໘ͷίϯςϯπ؅ཧΑΓը໘Λ࡞੒ ✓ σβΠϯςϯϓϨʔτͱͯ͠ඪ४ͷϑΝΠϧ͔Β࡞੒ ͠Ξοϓϩʔυ • ࠓճ͸௚઀TwigϑΝΠϧΛ࡞੒͢Δํ๏Λઆ໌͍ͯ͠ ͖·͢ɻ

Slide 17

Slide 17 text

৽نσβΠϯͷ࡞੒खॱ 1. ʮsrc/Eccube/Resource/template/defaultʯ഑Լʹ͋ ΔϑΝΠϧɺσΟϨΫτϦΛશͯʮapp/template/ defaultʯ഑Լ΁ίϐʔ͠·͢ɻ 2. ʮhtml/template/defaultʯ഑ԼʹʮassetsʯσΟϨΫ τϦΛ࡞੒͠ɺμ΢ϯϩʔυͨ͠σβΠϯςϯϓϨʔ τͷʮcssʯʮfontsʯʮimagesʯʮjsʯσΟϨΫτϦ Λʮhtml/template/default/assetsʯ഑Լ΁ίϐʔ͠· ͢ɻ

Slide 18

Slide 18 text

৽نσβΠϯͷ࡞੒खॱ 3. ʮapp/template/default/default_frame.twigʯϑΝΠ ϧΛमਖ਼͠·͢ɻ͜ͷϑΝΠϧͰαΠτڞ௨ͷϨΠΞ ΢τܾΊΛߦ͍·͢ɻ 4. ʮapp/template/default/Block/logo.twigʯʮapp/ template/default/Block/search_product.twigʯʮapp/ template/default/Block/cart.twigʯϑΝΠϧΛฤू͠ ·͢ɻͪ͜Β͸αΠτશମͷϔομʔ෦෼(navi෦෼)ʹ ͳΓ·͢ɻ

Slide 19

Slide 19 text

৽نσβΠϯͷ࡞੒खॱ 5. ʮapp/template/default/index.twigʯϑΝΠϧΛमਖ਼ ͠·͢ɻ͜ͷϑΝΠϧͰτοϓϖʔδͷσβΠϯΛߦ ͍·͢ɻ 6. ʮapp/template/default/Product/list.twigʯʮapp/ template/default/Block/search_product.twigʯʮapp/ template/default/Product/detail.twigʯϑΝΠϧΛฤ ू͠·͢ɻͪ͜Β͸঎඼Ұཡɺ঎඼ৄࡉը໘ͷσβΠ ϯΛߦ͍·͢ɻ

Slide 20

Slide 20 text

৽نσβΠϯͷ࡞੒खॱ 7. ؅ཧը໘ʹϩάΠ ϯ͠ɺʮίϯςϯ π؅ཧʯˠʮϖʔ δ؅ཧʯΑΓTOP ϖʔδͷʮϨΠΞ ΢τฤूʯΛબ୒ ͠ɺӈਤͷΑ͏ʹ ϒϩοΫΛ഑ஔ͠ ·͢ɻ

Slide 21

Slide 21 text

։ൃ࣌ͷࢀߟϖʔδ • EC-CUBE 3 ։ൃυΩϡϝϯτ
 http://ec-cube.github.io • Qiitaͷهࣄ
 http://qiita.com/tags/EC-CUBE3