第69回EC-CUBE関西UGに参加したまとめ｜【開発者向け】カスタマイズをプラグイン化してみよう！ 

2021-03-18（木）18:00～開催された第69回EC-CUBE関西UGをまとめてみました。

■1部
[第64回EC-CUBE関西UGに参加したまとめ｜会員情報に趣味の項目（テキスト）と受注情報に熨斗の項目（セレクトボックス）を追加するカスタム](https://qiita.com/dev_belltzel/items/b8bf262ca8615d382736)

■2部
[第67回EC-CUBE関西UGに参加したまとめ｜【開発者向け】購入フローをカスタマイズしてみよう！](https://qiita.com/dev_belltzel/items/fff1289745c1484c6af6)

今回は3部作のラスト、1部2部でカスタマイズした内容を、プラグイン化するお話です。
なので、プラグイン化してCustomizeフォルダ内をリセットして、2部と同じ動きをすれば完成です！！

今回もおかじ（@okazy）さんが頑張ってくれました！！！

**※覚えてない部分や、聞けてない部分もあるので、憶測や説明が不十分だったりするかもですが、ご了承ください。**

#資料サイト
プラグイン化された完成品
[github:okazy](https://github.com/okazy/kansai-ug-plugin)

プラグインで推奨の命名規則
[https://doc4.ec-cube.net/plugin_naming_conventions](https://doc4.ec-cube.net/plugin_naming_conventions)

プラグインのインストール
[https://doc4.ec-cube.net/plugin_install](https://doc4.ec-cube.net/plugin_install)

コマンドラインインターフェイス
[https://doc4.ec-cube.net/quickstart_cli](https://doc4.ec-cube.net/quickstart_cli)

#環境
環境の作り方は覚えてないです。

とりあえず、まっさらなEC-CUBEの環境を作り、2部で完成したCutomizeフォルダ内をコピーすれば3部勉強用の環境は完成です！！

[2部完成品のCutomizeフォルダ内](https://github.com/okazy/ec-cube/tree/kansai202101/app/Customize)

コピーしたら[こちらのコマンドを実行](https://qiita.com/dev_belltzel/items/b8bf262ca8615d382736#%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%AE%E5%AE%9F%E8%A1%8C)して、Entityをデータベースに反映させましょう。

**※Customizeフォルダで動いている環境と、プラグインを作成する環境の2つを作成した方が良いかもです。**
@okazyは1つの環境で行ってましたが、エラーが起こった時に何が悪いのか分かり難いかもです。
EC-CUBEのカスタマイズに慣れてない場合は特に・・・。

#プラグイン化の手順

- コマンドでプラグインの雛形を作成
- プラグインのインストールと有効化
- プラグインのディレクトリへファイルを移動
- テンプレートファイルを移動
- 命名規則に従い、変数名などを修正
- パッケージング

## コマンドでプラグインの雛形を作成

プラグインの雛形を作成するコマンドを打ちます。

```
bin/console eccube:plugin:generate
```

```
name [EC-CUBE Sample Plugin]:
> プラグイン名を入力

code [Sample]:
> プラグインコードを入力（スネークケース）（例：KansaiUg）

ver [1.0.0]:
> バージョンを入力（未入力でエンターでOK）
```

成功すると、`/app/Plugin/KansaiUg`が作成されています。

**※プラグインコードは一意となるコードを付けてください。他のプラグインコードと被ってはダメです。
できるだけオリジナリティの高いプラグインコードを考えましょう。**

## プラグインのインストールと有効化

次のコマンドを打って、プラグインのインストールと有効化を行います。

```
インストール
bin/console eccube:plugin:install --code=[プラグインコード]

bin/console eccube:plugin:install --code=KansaiUg

有効化
bin/console eccube:plugin:enable --code=[プラグインコード]

in/console eccube:plugin:enable --code=KansaiUg
```

特に問題なく成功すると思います。

## プラグインのディレクトリへファイルを移動

2部で完成したCustomizeフォルダ内のファイルをプラグインフォルダの中へ移動します。
移動するファイルリストは以下になると思います。

```
app/Customize/
├── Entity
│   ├── CustomerTrait.php
│   └── OrderTrait.php
├── EventListener
│   └── NoshiEvent.php
├── Form
│   └── Extension
│       ├── AdminNoshiExtension.php
│       └── NoshiExtension.php
└── Service
    └── PurchaseFlow
        └── Processor
            └── NoshiProcessor.php
```
そのままのフォルダ構成、ファイル名で移動させます。
**※Customizeフォルダでのカスタマイズ、プラグインの作成のフォルダ構成はEC-CUBE本体と同じにするのが好ましいです。**

## 命名規則に従い、変数名などを修正
順番が前後していますが、ここで移動したファイルを修正しましょう。。

### namespaceの変更
まず、`namespace`を変更します。

```
namespace Customize\Entity;
↓
namespace Plugin\[プラグインコード]\Entity;

namespace Plugin\KansaiUg\Entity;
```

上記のようにCustomizeフォルダからプラグインへ移動したので、namespaceをプラグイン用に変更します。
必要な個所はすべて変更してください。

### 命名規則に従った修正

今回の修正箇所は、資料にあるプラグインで推奨の命名規則のドキュメント`テーブルのカラム名およびgetter/setter` `FormExtensionで追加するフィールド`が関わってきます。

修正は自力で行ってみてください。
EntityとFromフォルダ内だけになると思います。

**※getter/setterを変更すれば、それが使われている箇所すべてを変更しなければならないです。
Customizeフォルダからプラグイン化する時は規模によっては大変になるので、少しづつ移動させるのが良いかもです。**

#### なぜ命名規則に従わなければならないのか。

プラグインをインストールするのは1つじゃないですよね。
自分だけなく、他人の作ったプラグインも一緒にインストールする事も多いでしょう。

もし、同じテーブル名だったら。
もし、同じカラム名だったら。
もし、同じURLだったら。

考えるだけでも恐ろしい？

## テンプレートファイルを移動

テンプレートの移動先は`/app/Plugin/プラグインコード/Resource/template`以下になります。

テンプレートへのパスは`@[プラグインコード]/****`
****は`template`からのパスを指定してください。

### 管理画面へ介入しているテンプレート

`/app/template/admin/order_edit.twig`をプラグインに移動します。

```
/app/template/admin/order_edit.twig
↓移動
/app/Plugin/KansaiUg/Resource/template/admin/order_edit.twig
```
管理画面へのテンプレート介入はEventを使って行っています。

`/EventListener/NoshiEvent.php`のテンプレートパスを修正しましょう。

```
$event->addSnippet('@admin/order_edit.twig');
↓移動
$event->addSnippet('@KansaiUg/admin/order_edit.twig');
```

### フロント画面のテンプレート

Customizeでは`/app/template/default`に本体からコピーしてカスタマイズしていました。
**defaultはテンプレートコード。他のテンプレートを利用している場合はそちらをカスタマイズします**

しかし、プラグインではテンプレートを修正などはできません。
（やろうと思えばできるが、やってはいけない。）

管理画面のようにjavascriptで要素を埋め込む事も出来ると思いますが、テンプレートが大きくカスタマイズされてたり、デフォルト以外にテンプレートを利用していると、意図しない動作になる可能性が高いです。

ではどうするのか？
それは、プラグイン利用者がパーツを埋め込むという方法が推奨されます。

方法はこちらを参照。詳しく説明されてます。
[本体カスタマイズに画面へのパーツ埋め込み、画面への介入方法の記載を追加](https://github.com/EC-CUBE/doc4.ec-cube.net/issues/163)

#### テンプレートの移動

まずは、twigファイルを作成します。
`/app/Plugin/KansaiUg/Resource/template/shopping_confirm_noshi.twig`
`/app/Plugin/KansaiUg/Resource/template/shopping_index_noshi.twig`

Customizeした部分を作成したtwigファイルへ移動します。

```/app/template/default/Shopping/confirm.twig
{# ここから追加 #}
<div class="ec-orderPayment">
    <div class="ec-rectHeading">
        <h2>熨斗（手数料500円）</h2>
    </div>
    <div class="ec-input">
        <p>{% if Order.isNoshi %}あり{% else %}なし{% endif %}</p>
    </div>
</div>
{# ここまで追加 #}
```
上記を`/app/Plugin/KansaiUg/Resource/template/shopping_confirm_noshi.twig`へ移動

```/app/template/default/Shopping/index.twig
{# ここから追加 #}
<div class="ec-orderPayment">
    <div class="ec-rectHeading">
        <h2>熨斗（手数料500円）</h2>
    </div>
    <div class="ec-input">
        {{ form_widget(form.noshi, { 'attr': { 'data-trigger': 'change' }}) }}
        {{ form_errors(form.noshi) }}
    </div>
</div>
{# ここまで追加 #}
```
上記を`/app/Plugin/KansaiUg/Resource/template/shopping_index_noshi.twig`へ移動

移動しただけだと、カスタム部分は消えてしまうので、プラグインのテンプレートパーツのタグを埋め込みましょう。

```twig
#/app/template/default/Shopping/confirm.twigへ埋め込むタグ

{{ include('@KansaiUg/shopping_confirm_noshi.twig', ignore_missing=true) }}
```

```twig
#/app/template/default/Shopping/index.twigへ埋め込むタグ

{{ include('@KansaiUg/shopping_index_noshi.twig', ignore_missing=true) }}
```

## 移動完了

これでファイルの移動が完了したと思います。
プラグインはすでに有効化されていますので、Entityを反映させる為のコマンドを打ちましょう。

以上で移動作業は完了です。
お疲れ様でした！！

## パッケージング
無視できない電話が掛かって来て、一切内容を聞くことができませんでした。
`github パッケージ 作成`で検索したら幸せになれるかも？

この部分はまだよくわからんです。

# 最後に
3部作が完結しました。

カスタマイズ方法、プラグイン化の方法、理解できたでしょうか？
とはいえ、まだまだ入りの部分。

クライアントの要望には、まだまだ精進しなければならないので、頑張りましょう！！

最後までお付き合いいただき、有り難う御座いました。

間違っている部分があれば編集リクエストいただけえると助かります。
宜しくお願いします。