2014年10月7日火曜日

導入側からみたEC-CUBE決済(モジュール)

SYSTEM_KDです。

今回は決済(モジュール)についての話。
EC-CUBEで使える決済はかなりの数がありますが、選択肢が多いと逆に選ぶのが大変になってしまいますね。

どの決済が良いかは、店舗や現行のサービスとの兼ね合いによって違ってくると思いますが、そういう視点ではなく、導入のしやすさに絞って考えてみると、ずばり!

EC-CUBE公式のEC-CUBEペイメントもしくは、GMOペイメントが一押しです!
(ちなみに、EC-CUBEペイメントとGMOペイメントのモジュールの中身は同じだったり・・・)

やはり、公式だけあって、決済モジュールとしての機能も導入のしやすさも抜群ですね。

基本的に、クレジット決済等を導入するには、色々な手順が必要です。

  1. クレジット決済を導入したい
  2. 決済代行会社の選定と決定
  3. 決済代行会社へ問い合わせて、テスト環境を提供してもらう
  4. EC-CUBEへ決済モジュールを導入しテスト環境でテスト
  5. 本番の決済環境へ接続変更し導入完了

本番環境しかない場合はどうするの?とか、色々とはしょってる部分もありますが、大雑把な流れとしては、この様な形かと思います。

基本的に「4.」の決済モジュールのダウンロードは、オーナーズストアより簡単に行えるかと思います。

ですが、「3.」の部分では、決済代行会社のテスト環境を利用するために、決済代行会社へ申し込みを行い、接続情報をもらう必要が有るため、すぐにはテストを開始できません。

(導入する側からしてみると、ちょっと試そうにもハードルが高くなりますね)

ですが、EC-CUBE公式決済モジュールを提供しているGMOさんは、24時間いつでも、ネットから登録するだけで、テスト環境をすぐに利用することができます!!

こんな感じですね。

gmo

導入目線で考えるとこれは、気軽にテストができて、かなりうれしいですね。

という、訳で導入目線で考えた場合に一番オススメできる決済は、EC-CUBE公式の決済になるかと思います。

完全に個人的な意見ですが、決済モジュールの導入を検討されている方の参考になればと思います。
(ちなみに、テスト環境の申し込みは、こちらから行うことができます)

ということで、せっかくなので次回辺り、実際にどうやってGMOモジュールを導入するのか?という話をやりたいと思います。

2014年10月5日日曜日

EC-CUBEプラグインでテンプレートを変更するサンプル

SYSTEM_KDです。

今回は、久々にプラグインを作成したいと思います。
作成するプラグインは、テンプレート変更プラグインになります。

これまで、テンプレートフックについて簡単に説明させて頂きましたが、やはり実際に動作するものがあった方がわかりやすいと思いますので、簡単なプラグインにはなりますが、作成したいと思います。

まず、プラグインの作成のため、(久々に)以前作成したプラグインのベースを利用したいと思います。
(ソースはこちらのになります)
(上記を作成した際の記事はこちらです)

ちなみに今回のプラグインは「おすすめ商品情報」ブロックのタイトル部分へおすすめ商品情報の最終更新日付を表示してやるといったものになります。

今回は以下の手順で進めたいと思います。

1.ファイル名および設定の整備

2.処理の追加

3.テンプレートの書き換え処理実装

ではさっそく、ダウンロードしてきたプラグインのベース(PluginBase.tar.gz)をどこかへ解凍し、ファイル名の変更と設定の整備を行いたいと思います。

おすすめ商品へ日付を追加するプラグインですので、「RecommendDate」プラグインという名前にしたいと思います。

ということで、「plugin_info.php」と「PluginBase.php」を開いてファイル名を「PluginBase」を「RecommendDate」へ置換します。

続いて、「plugin_info.php」の内容を今回のプラグインにそったものへ書き換えます。

class plugin_info{
/** プラグインコード(必須):プラグインを識別する為キーで、他のプラグインと重複しない一意な値である必要がありま. */
static $PLUGIN_CODE = "RecommendDate";
/** プラグイン名(必須):EC-CUBE上で表示されるプラグイン名. */
static $PLUGIN_NAME = "テンプレートと変更サンプル";
/** クラス名(必須):プラグインのクラス(拡張子は含まない) */
static $CLASS_NAME = "RecommendDate";
/** プラグインバージョン(必須):プラグインのバージョン. */
static $PLUGIN_VERSION = "0.1";
/** 対応バージョン(必須):対応するEC-CUBEバージョン. */
static $COMPLIANT_VERSION = "2.12.0";
/** 作者(必須):プラグイン作者. */
static $AUTHOR = "SYSTEM_KD";
/** 説明(必須):プラグインの説明. */
static $DESCRIPTION = "おすすめ商品情報ブロックのタイトルへ最終更新日時を設定";
/** プラグインURL:プラグイン毎に設定出来るURL(説明ページなど) */
static $PLUGIN_SITE_URL = "http://systemkd.blogspot.jp/";
/** ライセンス */
static $LICENSE = "LGPL";
}

これで、「1.ファイル名および設定の整備」は完了です。

次は処理を追加していきたいと思いますが、その前にEC-CUBEへインストールしておきましょう。

インストールすうるには、次のファイルを「tar.gz」で圧縮してプラグイン用のファイルにします。


  • logo.png
  • plugin_info.php
  • plugin_update.php
  • RecommendDate.php

後は、EC-CUBEの管理画面からインストールするだけです。

rd_02

ちなみに、上の画像で表示される情報は、「plugin_info.php」で設定したものですが、表示する際のデータは「plugin_info.php」から取得しているのではなく、データベースから取得しています。
(インストール時にDBへ格納されている)
どのテーブルに入っているかと言いますと、「dtb_plugin」テーブルになります。

インストールできたら、次へ進みたいと思います。


2.処理の追加

少し脱線しましたが、気を取り直して処理の追加へ進みたいと思います。

処理を追加するソースは、
data/downloads/plugin/RecommendDate/RecommendDate.php
になります。

今回はテンプレートの表示をフックしたプラグインになりますので、処理の介入点(フックポイント)としてテンプレートの表示をフックするように「register」へ処理を追加します。

function register(SC_Helper_Plugin $objHelperPlugin) {
// テンプレートトランスフォーム
$objHelperPlugin->addAction('prefilterTransform', array(&$this, 'prefilterTransform'));
}

ここで1点、定数の設定を変更しておきたいと思います。

変更するファイルは、
data/cache/mtb_constants.php
になります。

この定数の「SMARTY_FORCE_COMPILE_MODE」を「true」に設定します。

/** SMARTYコンパイルモード */
define('SMARTY_FORCE_COMPILE_MODE', true);

詳細な説明は別途行いたいと思いますが、この設定は、プラグインにてテンプレート変更を行う場合は、trueに設定しておいた方が何かと便利なものになります。

(定数の設定場所とかも、phpとcacheとDBがありちょっとややこしいので、そのうちまとめれたらと思います)

次に、実際の処理(おすすめ商品の最終更新日の取得)部分を実装したいと思います。

といっても、たいした処理ではないですが。。

取得処理は、グローバルフックへ実装したいと思いますので、下記のコードを「RecommendDate.php」へ追加します。

function preProcess(LC_Page $objPage) {
// 新着情報の最終更新日時取得
$objQuery =& SC_Query_Ex::getSingletonInstance();
$result = $objQuery->getRow("MAX(update_date) as max_update_date", "dtb_best_products");

// yyyy/mm/dd形式で設定
$this->bp_last_update = date("Y/m/d", strtotime($result['max_update_date']));
}

おすすめ商品が格納されているテーブル「dtb_best_products」から「update_date」の最大値を取得しているだけです。

処理は実装しましたので、今回のキモのテンプレートの変更部分に移ります。


3.テンプレートの書き換え処理実装

さきに、ソースをのせます。

function prefilterTransform(&$source, LC_Page_Ex $objPage, $filename) {
$objTransform = new SC_Helper_Transform($source);
$template_dir = PLUGIN_UPLOAD_REALDIR . 'PluginBase/templates/';
switch($objPage->arrPageLayout['device_type_id']){
case DEVICE_TYPE_MOBILE:
break;
case DEVICE_TYPE_SMARTPHONE:
break;
case DEVICE_TYPE_PC:
break;
case DEVICE_TYPE_ADMIN:
default:
if (strpos($filename, 'bloc/recommend.tpl') !== false) {
$html = "

";
$html .= "(最終更新日:" . $this->bp_last_update . ")

";
$objTransform->select('div#recommend_area h2')->appendChild($html);
}
break;
}
$source = $objTransform->getHTML();
}

実際、変更を行っている部分は「13行目~17行目」の以下の部分になります。
(今回はブロックの表示を変更するので、モバイルでもスマホでもPCでもない、部分に処理を記述しています)

if (strpos($filename, 'bloc/recommend.tpl') !== false) {
$html = "

";
$html .= "(最終更新日:" . $this->bp_last_update . ")

";
$objTransform->select('div#recommend_area h2')->appendChild($html);
}

では、この抽出部分について、順に説明していきます。

1行目ですが、今回はおすすめ商品ブロックのタイトルを変更しようとしていますので、変更を行うテンプレートファイルは「おすすめ商品ブロック」のテンプレートである、「data/Smarty/templates/default/frontparts/bloc/recommend.tpl」になります。
ですので、「bloc/recommend.tpl」の場合にテンプレートの変更処理を行う様な条件を設定しています。

2行目と3行目は、変更する内容(追加する表示内容)を設定しております。
ここで「preProcess」にて取得した、おすすめ商品の最終更新日を設定しています。

4行目ですが、ここがテンプレートの変更部分になります。
selectにて、「おすすめ商品ブロックのタイトル」を指定し、その要素の子として「2行目・3行目」のHTMLを追加しています。

これを実装してやり、ページを表示すると

rd_03

この様な感じで、おすすめ商品情報の右側へ最終更新日時が表示されます。
(とりあえず表示する形なので、ブロックの位置を変えた場合等は綺麗に表示されなくなります)

プラグインで実装しておりますので、試しにEC-CUBEの管理画面よりプラグインを無効化するとこの表示変更は反映されなくなります。

どうでしょうか?表示内容や表示方法によって難易度は変わってきますが、以外に簡単に表示を追加できたのではないでしょうか?

ということで、テンプレートを変更するプラグインのサンプル作成は終了です。
本日の成果物はこちらになります。

EC-CUBEプラグインの基本的な機能について その4

SYSTEM_KDです。
テンプレートをフックして中身を書き換える処理の続きです。

実際にどうやってテンプレートの内容を書き換えるかというと、下記の手順で行うことになります。

1.変更したテンプレートのデバイスを判別

2.変更するテンプレートを特定

3.テンプレート内の変更(追加)箇所を特定

4.テンプレートの書き換え内容を設定

上記をソースで書くと、下記になります。

function prefilterTransform(&$source, LC_Page_Ex $objPage, $filename) {
$objTransform = new SC_Helper_Transform($source);
$template_dir = PLUGIN_UPLOAD_REALDIR . 'PluginBase/templates/';
switch($objPage->arrPageLayout['device_type_id']){
case DEVICE_TYPE_MOBILE:
break;
case DEVICE_TYPE_SMARTPHONE:
break;
case DEVICE_TYPE_PC:
break;
case DEVICE_TYPE_ADMIN:
default:
if (strpos($filename, 'bloc/recommend.tpl') !== false) {
$html = "

";
$html .= "(最終更新日:" . $this->bp_last_update . ")

";
$objTransform->select('div#recommend_area h2')->appendChild($html);
}
break;
}
$source = $objTransform->getHTML();
}

まず、

1.変更したテンプレートのデバイスを判別

ですが、4行目のswitch文になります。
(ここは前回説明した部分になります。)

次に、


2.変更するテンプレートを特定

ですが、これは13行目のif文の部分になります。

この例ですと、「bloc/recommend.tpl」テンプレートを変更するということになります。

表示用のテンプレートが生成されるタイミングで、prefilterTransformが呼ばれますので、その際のファイル名(テンプレート名)が設定されている「$filename」を確認し、変更を行うテンプレートの場合に処理を行うといった形になります。


3.テンプレート内の変更(追加)箇所を特定

これは、16行目の前半部分になります。

「2.」で変更対象のテンプレートを見つけましたが、実際そのテンプレートのどの部分の変更を行うかは、この部分で指定を行います。

この例ですと、$objTransform->select('div#recommend_area h2')の部分にあたります。

対象の場所はJQueryでタグを特定する場合と同じ様に行います。


4.テンプレートの書き換え内容を設定

最後に、テンプレートの書き換え内容を設定する部分ですが、これは16行目の後半部分になります。

この例では、「->appendChild($html)」の部分になります。

上記の内容ですと、「3.」で指定したタグ内の最後へ、「$html」の内容を追加するといった具合になります。

この書き換えの指定方法はいくつかあります。

  • insertBefore
  • insertAfter
  • appendChild
  • replaceElement
  • removeElement

上から、順に

insertBefore = 選択要素の前に追加

insertAfter = 選択要素の後に追加

appendFirst = 選択要素の選択に追加

appendChild = 選択要素の末尾へ追加

replaceElement = 選択要素を置換

removeElement = 選択要素を削除

といったものになっております。


ここらへんは、覚えてしまうのが、手っ取り早いかと思います。

次回は実際にテンプレートを書きける処理を追加した、プラグインを作成してみたいと思います!!

EC-CUBEプラグインの基本的な機能について その3

SYSTEM_KDです。
EC-CUBEプラグインの基本的な機能についてということで、今回は前回の宣言どおり、テンプレートのフックについて、説明できればと思います。
テンプレートのフックをテンプレートの表示をフックして書き換える処理になります。
(呼び方的にはフックというよりもTransformかな?)
フックポイントを設定するので、基本的にはページのフックと同じ様な登録方法になります。
function register(SC_Helper_Plugin $objHelperPlugin) {
    $objHelperPlugin->addAction('LC_Page_Abouts_action_after', array($this, 'abouts_after'));
    $objHelperPlugin->addAction('prefilterTransform', array(&$this, 'prefilterTransform'));
}

ページのフックと、テンプレートのフックを並べるとこんな感じです。
基本的には「SC_Helper_Plugin」の「addAction」で登録してやるかたちで、同じです。

ただ、「クラス名+_action+処理タイミング」の形で指定していた「引数1」の部分が、固定値で、「prefilterTransform」になります。

また、コールバック処理の名称も同様に「prefilterTransform」になります。

そして、コールバックの処理の引数も、ページ処理のフックの際とは異なります。
テンプレートのフックの場合は、
function prefilterTransform(&$source, LC_Page_Ex $objPage, $filename) {
}

この様な形式になります。

上記は、一部抜粋した状態ですが、使う際はこのような形を基本形として利用することになるかと思います。
function prefilterTransform(&$source, LC_Page_Ex $objPage, $filename) {
    $objTransform = new SC_Helper_Transform($source);
    
    switch($objPage->arrPageLayout['device_type_id']){
        case DEVICE_TYPE_MOBILE:
            break;
        case DEVICE_TYPE_SMARTPHONE:
            break;
        case DEVICE_TYPE_PC:
            break;
        case DEVICE_TYPE_ADMIN:
        default:
            break;
    }
    $source = $objTransform->getHTML();
}

順に説明すると、まず2行目はテンプレートのソースを取得しております。

次に、switch文の部分ですが、これはデバイスを判定しており、このデバイスの判定により、どのデバイスのテンプレートを、書き換えるかを分けれるようになっております。

テンプレートの書き換えを行う場合、デバイスの種類に関係なく、どのデバイスに対しても表示を変更する必要があるので、「分岐させる必要はないのでは?」と思われるかもしれませんが、デバイスごとにテンプレートを持っており、表示の仕方も三者三様ですので、デバイスを判定し書き換える上記の形が扱いやすいかと思います。

どの様に分かれているかは、見ればわかるかもしれませんが下記のようになっております。

DEVICE_TYPE_MOBILE = モバイル端末でアクセスされた際

DEVICE_TYPE_SMARTPHONE = スマートフォンでアクセスされた際

DEVICE_TYPE_PC = PCでアクセスされた際

最後の部分は、「DEVICE_TYPE_ADMIN」と「default」にしておりますが、ここは管理画面へのアクセスとブロック系の表示となります。

実際どの様にしてテンプレートの書き換えを行うかは、さらに次回「EC-CUBEプラグインの基本的な機能 その4」でまとめたいと思います。

2014年10月2日木曜日

レビューと言うほどではないですが「Windows10」をさわってみた

SYSTEM_KDです。

次期WindowsOS の「Windows10」のテクニカルプレビュー版が公開されたと話題になっておりますが、私も流れにのってWindows10のテクニカルプレビュー版をさわってみました。

と言うもの、特に特殊な登録を追加でしなくても、Microsoft アカウントを持っていれば、このページから誰でもダウンロードすることができます。

誰でもダウンロードできるので、入れない手はない!というノリではあるのですが、実は自宅のPCはWindows7だったり・・・。(一応、8のアップグレード版は購入しているのですが、アップするタイミングを逃してたりします)

まぁ、それは置いておき早速インストールへ進みたいと思います。

(お手軽にインストールするため、VirtualBox へインストールしております)

インストールは、上記サイトより、ダウンロードしてきたISOファイルから行います。
プレビュー版ですので、言語はEnglishしか選択できませんが、キーボードの設定等は、日本語キーボード設定が可能でしたので、日本語キーボードで設定しました。
(キャプチャ撮り忘れる。。)

あとは、しばらく待機。。

w10_01

w10_02

w10_03

w10_04

途中、Microsoft アカウントを入力。
プレビュー版だからか、Microsoft アカウントを入力もしくは、新規作成するしか、先へ進む方法がないようです。
(ISOをダウンロードするには、Microsoft アカウントでログインするからアカウントを持ってないことは無いですが、必須なのは。。製品版では変わるのかな?)

w10_05

そろそろインストール完了

w10_06

そして、インストール完了です!!

w10_08

パッと見は、Windows8.1 ですね。

スタートボタンを押してみる。

w10_09

おぉー。Windows7っぽいけど、タイルがスタートメニューに入ってます。

Windows8.1のスタート画面に「ピン留めする」と同様の操作で、スタートメニュー内にピン留めできるようです。
(どんどんピン留めしていくと横スクロールされる状態になりました)

w10_15

また、このスタートメニューは、高さをある程度変えれるようで、マウスでドラックしてやると、伸ばしたり

w10_17

逆に、縮めたり

w10_16

できるようです。

また、タスクバーのプロパティを表示し

w10_12_2

チェックを切り替える(チェックを外す)と

w10_13_2

じゃじゃん!!

w10_14

Windows8.1状態のスタート画面にできます!
※一度サインアウトが必要な、大掛かりな設定変更ではありますが。
(って一般てきにこの画面が気に入られてなかったんでしたっけ。。)

 

あと、Windows10で追加された機能「仮想デスクトップ」もちょっとさわってみました。
仮想デスクトップは物凄くざっくり説明すると「デスクトップを複数持てる!」といったところでしょうか。
(ざっくりすぎるか。。勘違いされそう)

仮想デスクトップを表示するには、「WIndowsキー + Tab」を押すか、Windowsボタンの横にある四角のボタンを押せば、表示されます。

W10_19
(仮想デスクトップをわかりやすくするため、タスクバーを左へ持って行ってます)

仮想デスクトップを切り替えたかどうかは、パッと見わかりづらいですが、アクティブなデスクトップのタスクと、アクティブでないデスクトップの差は、タスクバーを見れば分かります。

アクティブなデスクトップ上のタスクは、四角で囲まれていますが、アクティブでないデスクトップのタスクは、囲みが最小化されたような状態で、端に表示されます。

task
(青枠がアクティブなデスクトップのタスク)
(赤枠がアクティブでないデスクトップのタスク)

また、ウインドウやアプリ等を別の仮想デスクトップへ移動させるのも可能な様です。

方法は、仮想デスクトップの一覧を表示し(Windowsキー + Tab)、対象のウインドウを右クリック。
すると、移動させるメニューが表示されますので、移動させたい仮想デスクトップを選択します。

W10_21_2

どうも仮想デスクトップが1つの場合は、移動のメニューが表示されないようです。
(ってことで、新規で仮想デスクトップを追加し、そこへ移動ってのができないみたいです。製品版では改善されているといいなー)

表面的なところだけですが、さわってみた感想としましては、特に「えぇー」と思うところはなく、けっこう良いような気がします。(まぁ、現段階では8.1からそんなに大きな変更もないようですが。。)

 

余談

Windowsメニューですが、スタートメニューへピン留めができるのだから、もちろんピン留めを外すこともできます。
ということで、ピン留めを外しまくって、Windows7っぽくしてみました。

W10_22

いや、それだけです。。
なんか、すみません m(_ _)m

以上です!!