最新EC-CUBE3.0活用虎の巻~プラグイン徹底解剖

第4回EC-CUBE3.0のプラグインをつくってみよう!

前回は、EC-CUBE3.0のプラグイン仕様について簡単にご紹介しました。

今回は、公式に提供されているプラグインをソースコードレベルで追いかけ、実際の作り方を解説していきます。

第2回EC-CUBE 3.0のプラグインを試してみようで紹介した、関連商品プラグインを参考に、具体的に中身を見ていきます。⁠関連商品プラグイン」のソースコードはGitHub上に公開されていますので、あわせて参照してください

プラグインの構造

まずは、プラグインのディレクトリ、ファイル構造を確認してみましょう。以下のような構成になっています。

プラグインのディレクトリ構造
プラグインのディレクトリ構造

EC-CUBE本体とほぼ同じ構成になっていることがわかります。多くのファイルが有りますが、この中でプラグインを作る上で必須となるファイルは以下の2ファイルです。

  • config.yml
  • PluginManager.php

この2ファイルが、プラグインとして必要な最低限のファイルです。その他のファイルはプラグインごとの何らかの処理をするためのファイルであったり、テンプレートファイルや画像ファイル等となりますので、それぞれのプラグインにより追加されるファイルということになります。

それでは次項より各ファイルの詳しい内容を見ていきます。

プラグインの設定ファイル:config.yml

「config.yml」はプラグインの設定ファイルです。プラグイン名やバージョンなど、プラグインに関する情報を記載するほか、データベースの定義ファイルのパスや、ServiceProviderのクラス名, フックポイントを実装するクラス名を指定します。

リスト config.yml
name: 関連商品プラグイン
code: RelatedProduct
version: 0.0.1
service:
    - RelatedProductServiceProvider
orm.path:
    - /Resource/doctrine
event: Event

上記で必須の項目は、name/code/versionの3点です。以下に各項目の設定内容を記載します。

 各項目の設定内容
項目名必須・任意概要
name必須プラグイン名を記載します
code必須プラグインの識別コード。他のプラグインと重複することも考慮して、開発者のハンドルネームなどをプレフィクスとしてつけておくのが望ましいでしょう
version必須プラグインのバージョン。EC-CUBE本体のバージョン表記の形式(xx.yy.zz)で記載することが推奨されます
service任意プラグインのServiceProviderのクラス名を記載します。app/Plugin/[code]/ServiceProvider/[service].phpが読み込まれます
orm.path任意プラグインでデータベースのテーブルを追加する場合に必要です。app/Plugin/[code]/[orm.path]が、doctrineの定義ファイルの探索パスとして追加されます
event任意プラグインでフックポイントを利用する場合、必要になります。Eventのクラス名を記載します。app/Plugin/[code]/[event].phpが読み込まれます

プラグインのインストーラ:PluginManager.php

「PluginManager.php」は、プラグインのインストーラです。このクラスには、プラグインのインストール処理やアンインストール処理を記述することができます。プラグインでデータベースのテーブルを追加したり、リソースファイル(画像やCSS、JSファイルなど)を設置する場合、PluginMagnager.phpで実装する必要があります。

実装できるメソッドは以下のとおりです。

  • install:プラグインのインストール時に実行される
  • uninstall:プラグインの削除時に実行される
  • enable:プラグイン有効時に実行される
  • disable:プラグインの無効時に実行される
  • update:プラグインの更新時に実行される

実行タイミングはメソッド名の通りなので特に迷うところはないかと思いますが、プラグインの管理画面と照らしあわせて、どのタイミングで実行されるかみてみましょう。

管理画面
管理画面
プラグインの設定
プラグインの設定

フックポイントとテンプレートの差し込み:event.yml/Event.php

ここまで、プラグインの設定ファイルの作成とインストーラの作成方法について解説しました。ここからは、EC-CUBE本体に処理を追加する方法について説明していきます。

第3回EC-CUBE3.0のプラグイン仕様を徹底解説!でお伝えしたとおり、EC-CUBE本体に処理を追加するにはフックポイントを利用します。フックポイントの利用には、⁠event.yml」を作成する必要があります。

リスト event.yml
eccube.event.render.admin_product_product_new.before:
    - [addContentOnProductEdit, NORMAL]
    - [registerRelatedProduct, NORMAL]
eccube.event.render.admin_product_product_edit.before:
    - [addContentOnProductEdit, NORMAL]
    - [registerRelatedProduct, NORMAL]
eccube.event.render.product_detail.before:
    - [showRelatedProduct, NORMAL]

「eccube.event.render.admin_product_product_new.before」のように記載されている部分が、利用するフックポイント、⁠addContentOnProductEdit」「registerRelatedProduct」のように記載されている部分が、実行されるEventクラスのメソッド名になります。

フックポイントの種類には、アプリケーション全体のフックポイント、コントローライベントでのフックポイント、レンダーイベントのフックポイント、の3種類があります。

 フックポイントの種類
適用範囲フックポイント名
アプリケーション全体eccube.event.app.{ before | after }
コントローライベントeccube.event.controller.{ルーティング名}.{ before | after }
レンダーイベントeccube.render.{ルーティング名}.before

コントローラおよびレンダーイベントでのフックポイントを利用するには、ルーティング名を指定し、どの画面で呼び出すかを決める必要があります。ルーティングの一覧は、以下のコマンドで取得可能です。

> cd [EC-CUBEのルートディレクトリ]
> app/console router:debug

それでは、実際の呼び出し処理について、⁠eccube.event.render.product_detail.before」を参考に、実行される内容を見ていきたいと思います。

「eccube.event.render.product_detail.before」では、⁠showRelatedProduct」が記載されています。これによって、何が実行されるのでしょうか。

これは、⁠商品一覧画面の表示時」に、Eventクラスに定義されている「showRelatedProductメソッドが実行される」という意味になります。

少し長いですが、実際のコードを記載します。

実際のコード(抜粋)
// フロント:商品詳細画面に関連商品を表示
public function showRelatedProduct(FilterResponseEvent $event)
{
    $app = $this->app;

    // URLのクエリパラメータから、商品IDを取得.
    $id = $app['request']->attributes->get('id');
    // 商品に紐づく関連商品を取得.
    $Product = $app['eccube.repository.product']->find($id);
    $RelatedProducts = $app['eccube.plugin.repository.related_product']->findBy(array('Product' => $Product));

    if (count($RelatedProducts) > 0) {
        // 関連商品のテンプレートをレンダリング
        $twig = $app->renderView(
            'RelatedProduct/Resource/template/Front/related_product.twig',
            array(
                'RelatedProducts' => $RelatedProducts,
            )
        );

        // 本体側でレンダリングされたテンプレートに関連商品のテンプレートを差し込み.
        $response = $event->getResponse();
        $html = $response->getContent();
        
        $crawler = new Crawler($html);

// id=”main”の要素を取得
        $oldElement = $crawler
            ->filter('#main');
        // id=”main”部分に関連商品のhtmlを付与
$oldHtml = $oldElement->html();
        $newHtml = $oldHtml.$twig;

        $html = $crawler->html();
        $html = str_replace($oldHtml, $newHtml, $html);

        // 元々の出力内容を置き換える
        $response->setContent($html);
        $event->setResponse($response);
    }
}

ソースコードのコメントにも記載していますが、このメソッドで行っている処理の流れを説明すると、

  • URLのクエリパラメータから、商品IDを取得
  • 商品IDに紐づく関連商品を取得
  • 関連商品を表示させるテンプレートをレンダリング
  • 本体側でレンダリングされたテンプレートに、関連商品部分を差し込む

となります。

これにより、関連商品を商品詳細画面に表示させることができるようになりました。

商品詳細画面
商品詳細画面

まとめ

いかがでしたでしょうか。

概要ではありますが、プラグインの設定から、インストーラの作成、フックポイントの利用方法と、一通りの流れをおさえることができました。

今回ご紹介したのは、基本中の基本で、非常に簡単な処理ではありますが、このソースコードを応用することにより、本当にありとあらゆる処理がプラグインを利用してEC-CUBE上で行えるようになります。

最後に

4回にわたってお送りした連載「最新EC-CUBE3.0活用虎の巻~プラグイン徹底解剖」もこれで終了です。

本連載では、EC-CUBE 3.0の新しくなったコンセプトや進化したポイント、プラグインの仕様と作成方法について、出来るかぎりわかりやすく解説してきたつもりです。そのため、EC-CUBE3.0のプラグインについて、そのすべてを網羅しきれたわけではありません。

より詳しく知りたい方には、株式会社ロックオンから提供されている仕様書や開発コミッターによる資料もありますので、ぜひプラグインの作成にチャレンジしてみてください。

プラグイン仕様書
http://downloads.ec-cube.net/src/manual/v3/plugin.pdf
EC-CUBE3のプラグインを作ってみよう!
https://speakerdeck.com/amidaike/ec-cube3falsepuraguinwozuo-tutemiyou
EC-CUBEオーナーズストアで公開されているプラグイン
http://www.ec-cube.net/products/list.php?ecversion=3.0

本連載をきっかけとして、この進化したプラットフォームの上で、新しいサービスやビジネスを展開していただく一助になれば幸いです。

おすすめ記事

記事・ニュース一覧