SlideShare a Scribd company logo
1 of 22
EC-CUBEデザインカスタマイズの
ベストプラクティス!
EC-CUBE名古屋ユーザーグループ Vol.58
大河内健太郎
自己紹介
名前: 大河内健太郎(@nanasess) 年齢: 41才
出身: 愛知県西尾市一色町
在住: 宝塚市
前職:寿司屋の板前
資格: 調理師・ふぐ処理師
EC-CUBE コミッター・公式エバンジェリスト
最近のマイブーム: 輪廻転生
Agenda
作業効率向上の考え方
効率のよいフォルダ構成
プラグインを使う場合の注意点
作業効率向上の考え方
いつでも過去に戻れるようにする。
過去と現在を簡単に比較できる。
把握しやすい。他の担当者に引継ぎしやすい。
–Hadley Wickham
Gitを使わないソフトウェア開発は
"Coding without commits is like free-climbing”
フリークライミングのようなものだ
いつでも過去に戻れるように
(できることなら) Git を使う
どんな間違った変更をしても、すぐ戻れる
過って削除しても、すぐ戻れる
どんな編集をしたか比較できる
でも Git は難しいよね
Git をちゃんと使えなくても、
これだけはやっておきたい
1. git init .
2. .gitignore を作成(後述)
3. git add .
4. git commit -m ‘init commit’
最低限、これだけやっておけば、git diff と叩くだけで、過去に何を編
集したか比較できるようになる。
.gitignore
このファイルを EC-CUBE をインストールしたフォルダに入れ
る
EC-CUBE 3系
https://github.com/EC-CUBE/ec-cube/blob/master/.gitignore
EC-CUBE 2系
https://github.com/EC-CUBE/eccube-
2_13/blob/master/.gitignore
デザイン管理画面の罠
EC-CUBE の管理画面から、デザイン変更できて便利だよ
ね
反面、デメリットも
保存したら過去に戻れない。もちろん比較もできない
編集機能が貧弱。検索もできない
構文ミスってるとシステムエラー
レイアウト編集機能の使いどころ
一度設定したら、レイアウト自体を変更することは少ない
はず
レイアウトは変えない前提。レイアウト編集の柔軟性を考
慮したデザインは樕の道
バナーの入れ替え等に特化した使い方をしよう
デザイン管理画面は使わない!
CMS 的な機能が欲しければ、
WordPress などを使おう!
餅は餅屋。連携のためのヒント
https://qiita.com/nanasess/items/63717ff0d6e9518a124f
じゃあ、どうやってサーバー上
のファイルを変更するの?
ファイルアクセスの方法
scp または sftp でファイル転送(おすすめ)
FTP または FTPS でファイル転送
vim でサーバー上のファイルを編集(初心者はおすすめしない
)
Git で取得(初心者はおすすめしない)
その他デプロイツール(初心者はおすすめしない)
デザイン管理を使わないメリット
使い慣れたエディタを使える
エディタのアン・ドゥー機能で戻れる
文字列検索できる
どのファイルを編集するの?
基本は default テンプレート(重要)
新たに独自のテンプレートは作らない(テンプレートを購入した場合は例外)
新たに作ると、 Git を使った過去との比較がしにくくなる
脆弱性対応で更新されるのは default テンプレート
特に3系は、デザイン管理で編集すると app/template 以下に編集後のファイ
ルができるので要注意。更新されたファイルがどこにあるのか行方不明にな
りやすく、引継ぎや作業効率の低下につながる
で、どのファイル編集したらいい
の?
3系
src/Eccube/Resource/template/default
2系
data/Smarty/templates/default
「コアファイル触るな」なんて人の話は聞かなくていい。
Git 使っていれば躊躇なく触ってOK
(余談)PHPプログラムのカスタマイズ
する場合も
3系はプラグインでカスタマイズしようって話がよくあがる
けど、そんな話は聞かなくていい。メンテや引継ぎが辛く
なるだけ。プラグインカスタマイズで睡眠時間は増えない
。
バージョンアップなら Git でしよう
https://qiita.com/nanasess/items/fe2a93ff64833d87eb19
同じ理由で2系の extends も使わなくていい。
プラグインの注意点
プラグインの入れすぎ注意(競合して動かなくなる)
必要最小限。必ずテストしてから本番投入。
HTML の構造や CSS の id は極力変更しない(動かなくなる
)
デザインはもちろん合わなくなる場合が多いので、プラグ
イン自体の修正が必要
頑張ってプラグインでカスタマイズしても、
結局プラグインをカスタマイズしないと動かないんで
す。
「プラグインを使えばバージョンアップが楽になる」
ことは少ないです。
Git を使えば楽になります。
まとめ
できることなら Git を使おう。使いこなす必要はありません
。バージョン管理は安心と睡眠時間を提供します。
デザイン管理画面は無理して使わなくていい
カスタマイズするのは default テンプレート
ご静聴ありがとうございました
!

More Related Content

More from Kentaro Ohkouchi

開発者視点で選ぶ「2系」と「3系」。
そして3系の次期バージョン
開発者視点で選ぶ「2系」と「3系」。
そして3系の次期バージョン開発者視点で選ぶ「2系」と「3系」。
そして3系の次期バージョン
開発者視点で選ぶ「2系」と「3系」。
そして3系の次期バージョンKentaro Ohkouchi
 
EC-CUBE次期バージョンから、しっかり学ぶ Symfony
EC-CUBE次期バージョンから、しっかり学ぶ SymfonyEC-CUBE次期バージョンから、しっかり学ぶ Symfony
EC-CUBE次期バージョンから、しっかり学ぶ SymfonyKentaro Ohkouchi
 
EC-CUBE と PayPal は仲良しか?
EC-CUBE と PayPal は仲良しか?EC-CUBE と PayPal は仲良しか?
EC-CUBE と PayPal は仲良しか?Kentaro Ohkouchi
 
フロントエンドだけで完結! checkout.js でペイパろう
フロントエンドだけで完結! checkout.js でペイパろうフロントエンドだけで完結! checkout.js でペイパろう
フロントエンドだけで完結! checkout.js でペイパろうKentaro Ohkouchi
 
EC-CUBE API プラグイン勉強会
EC-CUBE API プラグイン勉強会EC-CUBE API プラグイン勉強会
EC-CUBE API プラグイン勉強会Kentaro Ohkouchi
 
EC-CUBE3系より新しい EC-CUBE2系の開発事例紹介
EC-CUBE3系より新しい EC-CUBE2系の開発事例紹介EC-CUBE3系より新しい EC-CUBE2系の開発事例紹介
EC-CUBE3系より新しい EC-CUBE2系の開発事例紹介Kentaro Ohkouchi
 
EC-CUBE最新情報!3.1開発進捗説明会の報告します!
EC-CUBE最新情報!3.1開発進捗説明会の報告します!EC-CUBE最新情報!3.1開発進捗説明会の報告します!
EC-CUBE最新情報!3.1開発進捗説明会の報告します!Kentaro Ohkouchi
 
俺、エバンジェリストだけど、 EC-CUBEについて何か聞きたいことある?
俺、エバンジェリストだけど、 EC-CUBEについて何か聞きたいことある?俺、エバンジェリストだけど、 EC-CUBEについて何か聞きたいことある?
俺、エバンジェリストだけど、 EC-CUBEについて何か聞きたいことある?Kentaro Ohkouchi
 
EC-CUBE をアップロードしよう!
EC-CUBE をアップロードしよう!EC-CUBE をアップロードしよう!
EC-CUBE をアップロードしよう!Kentaro Ohkouchi
 
超簡単になった EC-CUBE3 のインストール
超簡単になった EC-CUBE3 のインストール超簡単になった EC-CUBE3 のインストール
超簡単になった EC-CUBE3 のインストールKentaro Ohkouchi
 
PHPのキャッシュを使いこなせ!
PHPのキャッシュを使いこなせ!PHPのキャッシュを使いこなせ!
PHPのキャッシュを使いこなせ!Kentaro Ohkouchi
 
EC-CUBE on SQL データベース勉強会
EC-CUBE on SQL データベース勉強会EC-CUBE on SQL データベース勉強会
EC-CUBE on SQL データベース勉強会Kentaro Ohkouchi
 
よりよい UI/UX を創るためのアクセス解析
よりよい UI/UX を創るためのアクセス解析よりよい UI/UX を創るためのアクセス解析
よりよい UI/UX を創るためのアクセス解析Kentaro Ohkouchi
 
UI/UXデザインでサイトを改善しよう
UI/UXデザインでサイトを改善しようUI/UXデザインでサイトを改善しよう
UI/UXデザインでサイトを改善しようKentaro Ohkouchi
 
Github と仲良くなろう!
Github と仲良くなろう!Github と仲良くなろう!
Github と仲良くなろう!Kentaro Ohkouchi
 
Microsoft Azure x EC-CUBE @西浦温泉
Microsoft Azure x EC-CUBE @西浦温泉Microsoft Azure x EC-CUBE @西浦温泉
Microsoft Azure x EC-CUBE @西浦温泉Kentaro Ohkouchi
 
明日は我が身。他人事ではないECサイトのセキュリティのお話
明日は我が身。他人事ではないECサイトのセキュリティのお話明日は我が身。他人事ではないECサイトのセキュリティのお話
明日は我が身。他人事ではないECサイトのセキュリティのお話Kentaro Ohkouchi
 
EC-CUBE とクラウドは仲良しか?
EC-CUBE とクラウドは仲良しか?EC-CUBE とクラウドは仲良しか?
EC-CUBE とクラウドは仲良しか?Kentaro Ohkouchi
 
名古屋 EC-CUBE 勉強会 Vol5
名古屋 EC-CUBE 勉強会 Vol5名古屋 EC-CUBE 勉強会 Vol5
名古屋 EC-CUBE 勉強会 Vol5Kentaro Ohkouchi
 

More from Kentaro Ohkouchi (20)

開発者視点で選ぶ「2系」と「3系」。
そして3系の次期バージョン
開発者視点で選ぶ「2系」と「3系」。
そして3系の次期バージョン開発者視点で選ぶ「2系」と「3系」。
そして3系の次期バージョン
開発者視点で選ぶ「2系」と「3系」。
そして3系の次期バージョン
 
EC-CUBE次期バージョンから、しっかり学ぶ Symfony
EC-CUBE次期バージョンから、しっかり学ぶ SymfonyEC-CUBE次期バージョンから、しっかり学ぶ Symfony
EC-CUBE次期バージョンから、しっかり学ぶ Symfony
 
EC-CUBE と PayPal は仲良しか?
EC-CUBE と PayPal は仲良しか?EC-CUBE と PayPal は仲良しか?
EC-CUBE と PayPal は仲良しか?
 
フロントエンドだけで完結! checkout.js でペイパろう
フロントエンドだけで完結! checkout.js でペイパろうフロントエンドだけで完結! checkout.js でペイパろう
フロントエンドだけで完結! checkout.js でペイパろう
 
EC-CUBE API プラグイン勉強会
EC-CUBE API プラグイン勉強会EC-CUBE API プラグイン勉強会
EC-CUBE API プラグイン勉強会
 
EC-CUBE3系より新しい EC-CUBE2系の開発事例紹介
EC-CUBE3系より新しい EC-CUBE2系の開発事例紹介EC-CUBE3系より新しい EC-CUBE2系の開発事例紹介
EC-CUBE3系より新しい EC-CUBE2系の開発事例紹介
 
EC-CUBE最新情報!3.1開発進捗説明会の報告します!
EC-CUBE最新情報!3.1開発進捗説明会の報告します!EC-CUBE最新情報!3.1開発進捗説明会の報告します!
EC-CUBE最新情報!3.1開発進捗説明会の報告します!
 
EC-CUBE はいいぞ
EC-CUBE はいいぞEC-CUBE はいいぞ
EC-CUBE はいいぞ
 
俺、エバンジェリストだけど、 EC-CUBEについて何か聞きたいことある?
俺、エバンジェリストだけど、 EC-CUBEについて何か聞きたいことある?俺、エバンジェリストだけど、 EC-CUBEについて何か聞きたいことある?
俺、エバンジェリストだけど、 EC-CUBEについて何か聞きたいことある?
 
EC-CUBE をアップロードしよう!
EC-CUBE をアップロードしよう!EC-CUBE をアップロードしよう!
EC-CUBE をアップロードしよう!
 
超簡単になった EC-CUBE3 のインストール
超簡単になった EC-CUBE3 のインストール超簡単になった EC-CUBE3 のインストール
超簡単になった EC-CUBE3 のインストール
 
PHPのキャッシュを使いこなせ!
PHPのキャッシュを使いこなせ!PHPのキャッシュを使いこなせ!
PHPのキャッシュを使いこなせ!
 
EC-CUBE on SQL データベース勉強会
EC-CUBE on SQL データベース勉強会EC-CUBE on SQL データベース勉強会
EC-CUBE on SQL データベース勉強会
 
よりよい UI/UX を創るためのアクセス解析
よりよい UI/UX を創るためのアクセス解析よりよい UI/UX を創るためのアクセス解析
よりよい UI/UX を創るためのアクセス解析
 
UI/UXデザインでサイトを改善しよう
UI/UXデザインでサイトを改善しようUI/UXデザインでサイトを改善しよう
UI/UXデザインでサイトを改善しよう
 
Github と仲良くなろう!
Github と仲良くなろう!Github と仲良くなろう!
Github と仲良くなろう!
 
Microsoft Azure x EC-CUBE @西浦温泉
Microsoft Azure x EC-CUBE @西浦温泉Microsoft Azure x EC-CUBE @西浦温泉
Microsoft Azure x EC-CUBE @西浦温泉
 
明日は我が身。他人事ではないECサイトのセキュリティのお話
明日は我が身。他人事ではないECサイトのセキュリティのお話明日は我が身。他人事ではないECサイトのセキュリティのお話
明日は我が身。他人事ではないECサイトのセキュリティのお話
 
EC-CUBE とクラウドは仲良しか?
EC-CUBE とクラウドは仲良しか?EC-CUBE とクラウドは仲良しか?
EC-CUBE とクラウドは仲良しか?
 
名古屋 EC-CUBE 勉強会 Vol5
名古屋 EC-CUBE 勉強会 Vol5名古屋 EC-CUBE 勉強会 Vol5
名古屋 EC-CUBE 勉強会 Vol5
 

Recently uploaded

論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...Toru Tamaki
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Yuma Ohgami
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものですiPride Co., Ltd.
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A surveyToru Tamaki
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Danieldanielhu54
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNetToru Tamaki
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdftaisei2219
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムsugiuralab
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略Ryo Sasaki
 

Recently uploaded (9)

論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
 

EC-CUBEデザインカスタマイズの ベストプラクティス!