2013/11/23 OpenSourceConference in Oita にて45分間の講演内容。

1. EC-CUBEにプラグインを導入しよう！
EC-CUBE2.1x 系対応

2. 自己紹介
高見 和也（Takami
Kazuya）
株式会社アラタナ
サービス開発部：フロントエンドエンジニア
Twitter@miiitaka
Facebook@miiitaka

3. EC-CUBEって何？
株式会社ロックオン社が開発したオープンソース
EC向けCMS（コンテンツマネージメントシステム）

4. EC-CUBE 2.4系⇒2.1x系へ
2011年、Ver.2.4系から2.1x系で大きく機能が変わりました。
・スマートフォンが標準対応しています。
・複数配送設定が標準搭載。
・プラグイン機能が実装されました。

5. EC-CUBE 2.4系⇒2.1x系へ
2011年、Ver.2.4系から2.1x系で大きく機能が変わりました。
・スマートフォンが標準対応しています。
・複数配送設定が標準搭載。
・プラグイン機能が実装されました。（オープンソースの醍醐味）

6. EC-CUBE プラグインの仕掛け
❏ EC-CUBE本体処理へ介入して処理・結果を書き換える。
・フックポイント機能を使って実現
・すべてのPageクラス／SCクラスで介入可能
❏ EC-CUBE本体テンプレートを変更する。
・SmartyのFilter機能をフックする事で実現
・SC_Helper_Transformというインターフェイスで簡単に変更可能

7. EC-CUBE テンプレートの変更
❏ EC-CUBE本体テンプレートを変更する。（介入ポイントあれこれ）
テンプレートファイル
prefilter
解析
postfilter
【prefilter】
コンパイルのタイミングで呼ばれます。
コールバッ
ク関数
（template_c以下にコンパイルファイルが無い場合）
コンパイルファイル
変数割当
outputfilter
出力
【outputfilter】
テンプレート出力時に必ず呼ばれます。
コールバッ
ク関数

8. EC-CUBE トランスフォーム
<div id=‘test’>
<p>EC-CUBEのプラグインはすてき</p>
</div>
jQueryの指定方式で
変換箇所を指定
$objTransform = new SC_Helper_Transform($source);
$objTransform->select(‘#test’)->appendFirst(‘<p>オープンソースはすてき</p>’);
<div id=‘test’>
<p>オープンソースはすてき</p>
<p>EC-CUBEのプラグインはすてき</p>
</div>
insertBefore
要素の前にHTMLを挿入
insertAfter
要素の後にHTMLを挿入
appendFirst
要素の先頭にHTMLを挿入
appendChild
要素の末尾にHTMLを挿入
replaceElement
要素を指定したHTMLに置換
removeElement
要素を削除する

9. EC-CUBE プラグイン導入
①tar.gzファイルを選択
tar.gz 形式で圧縮した
プラグインファイル
②インストール
「有効」にチェックして完了！
プラグインの「有効」「無効」もワンタッチでとても便利 ＾＾

10. EC-CUBE プラグイン制作事例（１）詳細ページにフック
プルダウンを表で選択
できるように展開！
プラグインの設定画面で
表示文字やレイアウトが
設定できる。

11. EC-CUBE プラグイン制作事例（2）他APIとの連携
管理画面のTOPにアクセ
ス情報を表示させたい。
Google Analytics API
PHPでAPI接続してア
クセス情報取得
プラグイン
insertAfterで挿入！
Google Chart API
JSでAPIを利用して
データをグラフ化

12. ARATANA × EC-CUBE
ご清聴ありがとうございました。