【初心者】EC-CUBEのカスタマイズの際に必要となるディレクトリとファイルをご紹介します【必見】 | もやしほーむ 【初心者】EC-CUBEのカスタマイズの際に必要となるディレクトリとファイルをご紹介します【必見】 | もやしほーむ

もやしほーむ

作成したプログラムの紹介や、日々の徒然について更新

【初心者】EC-CUBEのカスタマイズの際に必要となるディレクトリとファイルをご紹介します【必見】

time 2022/06/02

【初心者】EC-CUBEのカスタマイズの際に必要となるディレクトリとファイルをご紹介します【必見】
前回の振り返り
EC-CUBEの管理画面のどの画面がどのような機能を持っち役割を担っているのかを確認しました。
また、画面を本格的にカスタマイズするためには管理画面からの作業では限界があって、「TWIG(ツイグ)」というファイルを書き換える必要があることを知りました。

今回の内容
EC-CUBEがどんなプログラムで動いているのか、ディレクトリとファイルの構成から確認していきます。

sponsored link

ディレクトリ説明(src、html、app)

  • srcディレクトリが一番重要な部分(基本的なEC-CUBEのソースが入っています(PHPやTwigファイル))
  • htmlディレクトリに画面表示に関わるリソースファイルが入っています(jsやcss、画像ファイルなど)
  • appディレクトリに実際にカスタマイズをしようとしている人がここへファイルを置いていくところになります(設定ファイルやプラグイン、EC-CUBEをカスタマイズするPHPコードなど、アプリケーションごとに変更されるファイルを設置します)。

カスタマイズで必要なディレクトリは、主にこのsrchtmlappの3つです。初心者の私達はとりあえずこの3つのディレクトリについて覚えておけば良いです。

app

appディレクトリの中は、まだ編集作業などを行っていないので、大してファイルが入っていません。

src

  • srcディレクトリの中の、「Eccube」ディレクトリの中にいろんなディレクトリーやファイルが入っているのですが、この中で重要なのが次になります
    • Controller ・・・ 画面の中のシステムをつなぐ役割をしているファイルを格納している
    • Repository ・・・ Controllerとデータベースをつなぐファイルを格納している
    • Entity ・・・ データベースと同様のデータファイルをプログラムとして格納している

これらの流れを図で説明すると、サーバーにデータベースがあって、そのデータをEntityを通して、Repositoryでいろいろと処理を行って、それを画面に伝えるためにControllerを通して、Viewで表示させるといった流れになります。

ちょっと複雑ですね。

せっかくなので、しっかりと内容を覚えておきたいところです。

このように分けるという方法が、EC-CUBEで取られている手法で、いわゆるMVCModel View Control)と呼ばれています。

画面を構成するResourceディレクトリ

更に、Resouceの中のディレクトリが以下です。

  • locate  ・・・ 多言語翻訳をしてくれるファイルを格納している(日本語のみでの利用であれば特に気にする必要なし)
  • template ・・・ 画面表示に直接関わってくるファイルを格納している。表示に関する修正をする際には、最もいじる頻度が高いディレクトリといえます。

更に、templateディレクトリの中を見ていきます。

  • admin ・・・ 管理画面を表示するファイルを格納している。その中に、Twigファイルが格納されています。
  • Twigファイル ・・・ 画面に表示をしてくれるファイルです。この中にはHTMLCSSJavaScriptなどがまとめて書かれており、Twig形式の文も出てきます。

Twigってどんなファイルか?

{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends '@admin/default_frame.twig' %}

{% block title %}{{ 'admin.home'|trans }}{% endblock %}
{% block sub_title %}{% endblock %}

{% block javascript %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    <script>
        $(function() {
            var options = {
                legend: {
                    display: false
                },
(中略)
        });

    </script>
{% endblock javascript %}

{% block main %}
    {% if is_danger_admin_url %}
    <div class="alert alert-warning alert-dismissible fade show m-3" role="alert">
        <i class="fa fa-warning fa-lg mr-2"></i>
        <span class="font-weight-bold">{{ 'admin.common.admin_url_warning'|trans({ '%url%': url('admin_setting_system_security') })|raw }}</span>
        <button class="close" type="button" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
    </div>
    {% endif %}
(中略)
                            <div class="card-footer" style="height:43px;box-sizing: border-box;"></div>
                        </div><!-- /#ec-cube-news -->
                    </div>
                </div><!-- /.row -->
            </div><!-- /.c-primaryCol -->
        </div><!-- /.c-contentsArea__primaryCol -->
    </div><!-- /.c-contentsArea__cols -->

{% endblock %}

一例として、「src\Eccube\Resource\template\admin」の中の、index.twigファイルを見てみました。

簡単に言うと、Twigファイルの中に、HTMLCSSJavaScriptが書けてしまいます。それに加えて、Twigの書き方というものが加わるだけですので、耳新しいTwig(ツイグ)という書き方を覚えるだけでいいので、そんなに恐れることはないでしょう。

以上、最後までお読みいただき誠に有り難うございました。

\楽天ポイント5倍セール!/
楽天市場
\ポイント5%還元!/
Yahooショッピング

sponsored link

down

コメントする

コメントは日本語で入力してください。(スパム対策)




もやしほーむ

白川秋

白川秋

こんにちは。各種プラットフォームでのWordpress、EC-CUBEの使い方や、PHPプログラミングについて書いています。よろしくお願いいたします。



sponsored link

カテゴリー

表示できるコメントはありません。
2022年6月
 1234
567891011
12131415161718
19202122232425
2627282930