Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
EC-CUBE3デザイナー向け勉強会 #1
Search
amidaike
March 10, 2016
Programming
0
260
EC-CUBE3デザイナー向け勉強会 #1
amidaike
March 10, 2016
Tweet
Share
More Decks by amidaike
See All by amidaike
EC-CUBE3勉強会新しいデザインを作成してみよう
amidaike
0
440
EC-CUBE 3.0勉強会
amidaike
1
890
EC-CUBE3プラグイン勉強会
amidaike
0
450
EC-CUBE3デザイナー向け勉強会 #4
amidaike
0
290
EC-CUBE3コードリーディング #5
amidaike
1
1.4k
EC-CUBE3デザイナー向け勉強会 #3
amidaike
1
200
EC-CUBE3コードリーディング #4
amidaike
0
1.2k
EC-CUBE3デザイナー向け勉強会 #2
amidaike
1
2.7k
EC-CUBE3コードリーディング #3
amidaike
1
950
Other Decks in Programming
See All in Programming
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
230
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
1
150
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
530
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.4k
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
750
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
270
Git Rebase
bkuhlmann
11
1.6k
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
410
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
260
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
270
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
920
Featured
See All Featured
Fireside Chat
paigeccino
21
2.6k
The Cost Of JavaScript in 2023
addyosmani
16
3.9k
Happy Clients
brianwarren
92
6.4k
The Mythical Team-Month
searls
216
42k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
The Language of Interfaces
destraynor
151
23k
KATA
mclloyd
15
12k
RailsConf 2023
tenderlove
4
540
The Art of Programming - Codeland 2020
erikaheidi
42
12k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Infographics Made Easy
chrislema
238
18k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
Transcript
EC-CUBE3σβΠφʔ͚ษڧձ #1 EC-CUBEؔϢʔβάϧʔϓ 2016-02-10
ࣗݾհ גࣜձࣾΩϡʔϧ ࢁଜ ਗ਼࢙ EC-CUBE3ͷίϛολʔͯ͠·͢ @k-yamamura
࣍ 1. EC-CUBE3ͷհ 2. EC-CUBE3Ͱ༻͍ͯ͠ΔσβΠϯϑϨʔ ϜϫʔΫ 3. EC-CUBE3ͷσΟϨΫτϦߏ 4. ը໘ϨΠΞτͷઆ໌
5. ը໘Λ࡞͢Δํ๏
1.EC-CUBE3ͷհ
EC-CUBE3ͷհ • 20157݄1ʹ7ͿΓͷϝδϟʔόʔδϣϯΞοϓ • γεςϜ෦ͷେ෯ͳݟ͠ Symfony2ίϯϙʔωϯτͰ͋ΔSilexͷ࠾༻ ཧը໘ɺϑϩϯτը໘ʹBootstrap3ͷ࠾༻ Smarty͔ΒTwigͷPHPςϯϓϨʔτมߋ Doctrineͱ͍͏ORϚούʔͷ࠾༻ •
ϨεϙϯγϒσβΠϯରԠ • ϓϥάΠϯػߏͷ৽
EC-CUBE3ͷհ • GitHubΛͬͨࠓ࣌ͷ։ൃ https://github.com/EC-CUBE/ec-cube • TravisCIɺAppVeyorɺScrutinizerͷ֎෦αʔϏεΛ͍ίʔ υ࣭Λ୲อ ˠPullRequest͞ΕΔͱͦΕͧΕࣗಈతʹ࣮ߦ͞Ε·͢ɻ·ͩ ·ͩςετέʔεΓ͍ͯ·ͤΜ͕ɾɾɾ •
PSRʹ΄΅४ڌͨ͠ίʔυ։ൃ ͍ͭͰPull Request͓͓ͪͯ͠Γ·͢ʂ
2.EC-CUBE3Ͱ༻͍ͯ͠Δ σβΠϯϑϨʔϜϫʔΫ
EC-CUBE3Ͱ༻͍ͯ͠ΔσβΠϯϑϨʔϜϫʔΫ • ϑϩϯτΧελϚΠζ͞ΕͨBootstrap3.3.4Λ༻͠ɺཧ ը໘EC-CUBE3.0.0ϦϦʔε࣌Ͱ࠷৽ͷBootstrap3.3.5Λ༻ • ϑϩϯτը໘ͰBootstrapΛΧελϚΠζ͠ɺඞཁͳଐੑͩ ͚Λൈ͖ग़ͯ͠༻͍ͯ͠ΔͨΊɺ༻ग़དྷΔclassݶΒΕͯ ͍Δ(JavaScriptಉ༷) • ཧը໘ͰBootstrap3.3.5Ͱ༻ҙ͞Ε͍ͯΔclassશͯ༻
Մೳ • btnͷ৭ͳͲσβΠϯʹؔΘΔ෦EC-CUBE3ଆͷcssͰఆٛ͠ ͍ͯ͠Δclass͕͋ΔͨΊѻ͏ͨΊʹҙ͕ඞཁ
EC-CUBE3Ͱ༻͍ͯ͠ΔσβΠϯϑϨʔϜϫʔΫ ϑϩϯτը໘Ͱͷൺֱ Bootstrap3ඪ४ͷϘλϯ EC-CUBE3Ͱఆٛ͞Ε͍ͯΔϘλϯ
EC-CUBE3Ͱ༻͍ͯ͠ΔσβΠϯϑϨʔϜϫʔΫ ཧը໘Ͱͷൺֱ Bootstrap3ඪ४ͷϘλϯ EC-CUBE3Ͱఆٛ͞Ε͍ͯΔϘλϯ
EC-CUBE3Ͱ༻͍ͯ͠ΔσβΠϯϑϨʔϜϫʔΫ • ཧը໘ΛΧελϚΠζ͢Δඞཁ͕͋Δ߹ɺ Bootstrap3Λ͢Ͱʹ͍ͬͯΕएׯͷσβΠϯ૬ҧ ͕͋Δ͚Ͳ͢ΜͳΓͱࣅͨΑ͏ͳը໘Λ࡞͢Δ͜ͱ Մೳ • ϑϩϯτը໘ΛΧελϚΠζ͢Δ߹ɺBootstrap3Ͱ ͑ΔͷݶΒΕ͍ͯΔͨΊɺطʹ༻ҙ͞Ε͍ͯΔ ͷΛ͏ΑΓಠࣗͰఆٛͨ͠cssΛ࡞ͬͨํ͕ྑ
͍͔ →ୠ͠ɺϑΥʔϜΛѻ͏߹ɺ৭ʑͱ͓࡞๏͕ඞཁ
EC-CUBE3Ͱ༻͍ͯ͠ΔσβΠϯϑϨʔϜϫʔΫ • ࠓޙͷษڧձͷςʔϚͱͯ͠ɺಠࣗʹը໘Λ࡞ ͢Δํ๏ɺgulpΛͬͨ։ൃํ๏ͳͲΛ͓͑ ͍͖ͯ͠·͢ɻ
3.EC-CUBE3ͷσΟϨΫτϦߏ
EC-CUBE3ͷσΟϨΫτϦߏ • EC-CUBE3ͰSilexϑϨʔϜϫʔΫΛ࠾༻͍ͯ͠Δͨ Ίɺ2ܥ͔Βେ෯ʹσΟϨΫτϦߏ͕มԽ • Symfony2ͷσΟϨΫτϦߏΛࢀߟʹɺEC-CUBE3ಠ ࣗʹߏ • URLʹ.php͕ແ͘ͳΓγϯϓϧͳURLʹมߋ •
ެ։σΟϨΫτϦʹ͍ͭͯ2ܥΛ΄΅౿ऻ
EC-CUBE3ͷσΟϨΫτϦߏ • /ECCUBEROOT/src Լ͕ϓϩάϥϜຊମͱͳΓɺ phpϑΝΠϧtwigϑΝΠϧΛ ஔ
EC-CUBE3ͷσΟϨΫτϦߏ • /ECCUBEROOT/app ԼઃఆϑΝΠϧϩάϑΝ Πϧ͕ஔ͞Ε͓ͯΓɺϓ ϥάΠϯʮPluginʯσΟϨΫ τϦԼͰ࡞
EC-CUBE3ͷσΟϨΫτϦߏ • /ECCUBEROOT/html ͕ެ։σΟϨΫτϦͱͳΓɺ ϦιʔεϑΝΠϧ(cssը૾ ϑΝΠϧʑ)Λஔ (֤σΟϨΫτϦͷઆ໌ޙड़)
EC-CUBE3ͷσΟϨΫτϦߏ • ϑϩϯτը໘ͷඪ४σΟϨΫτϦ /ECCUBEROOT/html/template/default • ཧը໘ͷඪ४σΟϨΫτϦ /ECCUBEROOT/html/template/admin • Πϯετʔϧը໘ͷඪ४σΟϨΫτϦ /ECCUBEROOT/html/template/install
EC-CUBE3ͷσΟϨΫτϦߏ default.cssɺslick.cssɺstyle.cssͷॱͰݺͼग़͞Εɺ bootstrap.custome.min.cssstyle.css͔Βimport͞ Ε͍ͯΔɻ svgΞΠίϯͰ͋Δsvg.htmlͱσϞαΠτ༻ͱͯ͠༻ҙ ͞Ε͍ͯΔը૾͕ஔ͞Ε͍ͯΔɻ →ొ࣌ͷը૾ϑΝΠϧผσΟϨΫτϦʹอଘ ͞ΕΔ eccubeಠࣗͷJavaScriptfunction.jsٴͼeccube.jsʹ ఆٛ͞Ε͓ͯΓɺͦΕҎ֎ͷjqueryϥΠϒϥϦjs/
vendorҎԼʹஔ͞Ε͍ͯΔɻ
EC-CUBE3ͷσΟϨΫτϦߏ bootstrap-min.cssɺdashboard.cssͷॱͰݺͼग़͞Εͯ ͓ΓɺͦΕҎ֎ͷcssඞཁͳը໘ͰͷΈར༻͞Ε͍ͯ Δɻ svgΞΠίϯͰ͋Δsvg.htmlͱϩΰը૾͕ஔ͞Ε͍ͯ Δɻ eccubeಠࣗͷJavaScriptfunction.jsʹఆٛ͞Ε͓ͯ Γɺfile_manager.jsɺlayout_design.jsඞཁͳը໘Ͱ ͷΈར༻͞Ε͍ͯΔɻͦΕҎ֎ͷjqueryϥΠϒϥϦ js/vendorҎԼʹஔ͞Ε͍ͯΔɻ
bootstrap༻ͷΞΠίϯͰ͋Δglyphicon͕ஔ͞Εͯ ͍ΔɻfontawesomeΛ͍͍ͨ߹ɺ͜ͷσΟϨΫτ Ϧʹஔ͢Εྑ͍ɻ
EC-CUBE3ͷσΟϨΫτϦߏ ϓϥάΠϯ༻ͷެ։σΟϨΫτϦͰɺϓϥάΠϯͰ༻ ͢ΔϦιʔεϑΝΠϧ͕ஔ͞ΕΔɻ ཧը໘͔Β࡞͞ΕͨtwigϑΝΠϧಠࣗʹ࡞͠ ͨը૾ϑΝΠϧ͕ஔ͞ΕΔɻ ը૾Ξοϓϩʔυ༻σΟϨΫτϦ save_imageը૾ࢧํ๏ͷը૾͕ஔ͞Εɺ temp_imageϑΝΠϧΞοϓϩʔυ࣌ͷҰ࣌తͳϑΝ Πϧஔ͖ͱͯ͠ར༻͞ΕΔɻ
EC-CUBE3ͷσΟϨΫτϦߏ • TwigϑΝΠϧͷஔॴɺ /ECCUBEROOT/src/Eccube/Resource/template • ࣮ࡍʹը໘Λ࡞͢Δ߹ɺTwigϑΝΠϧʹରͯ͠ख ΛՃ͑Δɻ
4.ը໘ϨΠΞτͷઆ໌
5.ը໘Λ࡞͢Δํ๏
EC-CUBE3ͷσΟϨΫτϦߏ • EC-CUBE3ͷը໘Λ৽ن࡞͢Δओͳํ๏ҎԼͷ௨Γ 1. ཧը໘͔ΒtwigϑΝΠϧΛ৽ن࡞ 2. ཧը໘͔ΒϑΝΠϧΛΞοϓϩʔυͯ͠৽ن࡞ 3. σβΠϯςϯϓϨʔτͱͯ͠ඪ४ͷϑΝΠϧ͔Β࡞͠Ξο ϓϩʔυ
• ը໘Λ৽ن࡞͢Δ߹ɺECCUBE3͔ΒtwigλάΛѻ͏͜ͱ ʹͳΓ·͕͢ɺSmartyλάΛཧղͰ͖͍ͯΔਓtwigʹͳͬͯ ৽ͨʹ֮͑Δ͜ͱ͕গͳ͍ͨΊށΘͣʹ࡞͢Δ͜ͱ͕Մೳʂ
EC-CUBE3ͷσΟϨΫτϦߏ • EC-CUBE3ͷը໘Λมߋ͢Δओͳํ๏ҎԼͷ௨Γ 1. ຊମඪ४ͷtwigϑΝΠϧΛίϐʔͯ͠मਖ਼ 2. ཧը໘͔ΒtwigϑΝΠϧΛमਖ਼ • ECCUBEROOT/srcҎԼͷϑΝΠϧόʔδϣϯΞο ϓͰ্ॻ͖͞ΕΔͨΊɺຊମͷtwigϑΝΠϧ
Λ৮Δͷඇਪ
EC-CUBE3ͷσΟϨΫτϦߏ • ຊମଆͷtwigϑΝΠϧΛ ECCUBEROOT/app/templateʹίϐʔͯ͠मਖ਼ • Ұ൪खͬऔΓૣ͘ରԠՄೳ • ݱߦͷσΟϨΫτϦߏٴͼϑΝΠϧ໊ΛΔඞ ཁ͋Γ(υΩϡϝϯτະඋͰ͢)
EC-CUBE3ͷσΟϨΫτϦߏ ECCUBEROOT/src/Eccube/Resource/template/default ҎԼͷϑΝΠϧΛίϐʔͯ͠ɺ ECCUBEROOT/app/template/default Լίϐʔͯ͠मਖ਼Λߦ͏ɻ adminཧը໘ଆͷϑΝΠϧͰɺdefaultϑϩϯτ ը໘ଆͷϑΝΠϧ͕ஔ͞Ε͍ͯΔɻ
EC-CUBE3ͷσΟϨΫτϦߏ • ඪ४ͰඋΘ͍ͬͯΔը໘ʹରͯ͠ཧը໘͔Β มߋՄೳͰ͋Γɺมߋͨ͠ϑΝΠϧ ECCUBEROOT/app/template σΟϨΫτϦʹอଘ͞ΕΔͨΊɺΦϦδφϧϑΝ Πϧ͢͜ͱՄೳ • ཧը໘ʹϩάΠϯޙɺࠨϝχϡʔͷ ʮίϯςϯπཧʯˠʮϖʔδཧʯ
ΑΓϖʔδฤूΛ͢Δ͜ͱͰมߋ
։ൃ࣌ͷࢀߟϖʔδ • GitHubWiki https://github.com/EC-CUBE/ec-cube/wiki • GitHubPages http://ec-cube.github.io • Qiitaͷهࣄ http://qiita.com/tags/EC-CUBE3