2015年8月15日土曜日

Google Play services 7.8のバーコードリーダを試してみる

SYSTEM_KDです。

顔検出の記事の続きです。

前回の記事の最後に、バーコードも読めるらしいので、後で試そうと思うと書いたのですが、静止画像から読み取りだけであれば、おもいのほか簡単にできたので、書いておきます。

barcode

方法は、顔検出と同じで、

1.画像の読込

2.バーコード読込

3.結果表示

になります。

public class BarcodeActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_barcode);

// バーコード画像読込
InputStream stream = getResources().openRawResource(R.raw.qrcode);
Bitmap bitmap = BitmapFactory.decodeStream(stream);

ImageView ivBarcode = (ImageView)findViewById(R.id.iv_barcode);
ivBarcode.setImageBitmap(bitmap);

BarcodeDetector detector = new BarcodeDetector.Builder(getApplicationContext())
.setBarcodeFormats(Barcode.DATA_MATRIX | Barcode.QR_CODE)
.build();

Frame frame = new Frame.Builder().setBitmap(bitmap).build();
SparseArray<Barcode> barcodes = detector.detect(frame);

Barcode barcode = barcodes.valueAt(0);
String strBarcode = barcode.rawValue;

TextView tv = (TextView)findViewById(R.id.tv_barcode);
tv.setText(strBarcode);

}
}

顔検出では、「FaceDetector」を利用しましたが、バーコードの場合は「BarcodeDetector」を利用します。


あとは、検出したバーコードの結果を取得して、画面に表示しているだけです。
(QRコードは生成サービスを利用しました)


以上、簡単に読み取れました。
(次はカメラを通しての読み取りを試したいな)

Google Play services 7.8 が出たので進化した、顔検出を試してみる

SYSTEM_KDです。

Google Play services 7.8 がリリースされ、新しいAPIが追加されたので、試してみたいと思います。

 

新しく追加されたAPIは、次の2つになります。

・Mobile Vision API

・Nearby Messages API

 

両方試してみたい所ですが、今回は「Mobile Vision API」の方を試してみたいと思います。

 

Mobile Vision APIを試す

そもそも、このAPIで何ができるかですが、画像や映像からリアルタイムに「顔」を認識できるようです。

画像から顔認識できるAPIは以前からありましたが、これはより多くの情報を認識できるようになっているようです。

具体的には、「目」「鼻」「口」「顔の向き」「目の開き」「笑顔」の情報を取得できるようです。
(おー!凄いですね!)

ということで、さっそくサンプルを取得して見てみたいと思います。
(サンプルはこちらにあるみたいです)

サンプルをそのまま動かして試しても良いのですが、ソースを見るのも兼ねて、別でプロジェクトを作成して、作っていきます。
(といっても、結局コピーするようなものですが^^;

 

では、さっそくサンプルからー。と言いたいとこですが、まずは準備を整えたいと思います。

Android SDK Manager で最新を取得。

SDK_Manager

Update 分をインストールします。

 

インストールできたら、次は「Google Play Services 7.8」が利用できるように、「build.gradle」へ1行追加

dependencies {
    ・・・
    compile 'com.google.android.gms:play-services:7.8.0'}

 

本題のコード部分に入ります。

とりあえず、簡単そうな画像から顔を認識するのを試したいと思います。

サンプルを見てみると、下記の流れになっているようです。

1.画像を読込。

2.顔検出

3.画像と検出結果を表示

静止画の顔検出を行うだけなら、かなり簡単そうです。

 

顔検出の準備

とりあえず、1の画像読込は割愛して、2の顔検出部分部分ですが、

    FaceDetector detector = new FaceDetector.Builder(getApplicationContext())
            .setTrackingEnabled(false)
            .setLandmarkType(FaceDetector.ALL_LANDMARKS)
            .build();

こんな感じらしいです。

 

静止画なので、trackingはOFFで、「目」や「鼻」「口」などを検出するために、「.setLandmarkType(FaceDetector.ALL_LANDMARKS)」と設定しているようです。

 

顔を検出する

検出の準備ができたら、実際の検出を行います。

    Frame frame = new Frame.Builder().setBitmap(bitmap).build();
    SparseArray<Face> faces = detector.detect(frame);

 

えーと、「1.」で読み込んだ画像から、Frameを作ってやって、それを先ほど準備した顔検出に渡してやると、検出した顔パーツの位置が返ってくるといったところかな。

 

サンプルでは、顔検出が利用可能化(端末のGoogle Play services対応したバージョンに更新されているか)をチェックする処理をはさんでいるようですので、ちょっと変更して追加。

    if (!detector.isOperational()) {
        Toast.makeText(getApplicationContext(), "残念ながらライブラリが更新されていないため、まだ未対応です", Toast.LENGTH_SHORT).show();

        finish();
    }

 

ちなみに、「Face」「FaceDetector」「Frame」は、Google Play servicesのものを利用する必要があります。

com.google.android.gms.vision.Frame;
com.google.android.gms.vision.face.Face;
com.google.android.gms.vision.face.FaceDetector;

 

結果表示

最後に検出結果の表示を行います。

サンプルでは、独自Viewを作って表示するようにしています。
(※R.id.faceViewは後述)

    FaceView overlay = (FaceView) findViewById(R.id.faceView);
    overlay.setContent(bitmap, faces);

    detector.release();

 

Viewの中身はこの様になっておりました。

public class FaceView extends View {
    private Bitmap mBitmap;
    private SparseArray<Face> mFaces;

    public FaceView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    /**
     * 表示を行う情報の設定
     */
    void setContent(Bitmap bitmap, SparseArray<Face> faces) {
        mBitmap = bitmap;
        mFaces = faces;
        invalidate();
    }

    /**
     * 描画部分
     * 画像の表示と検出結果の表示を行う
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if ((mBitmap != null) && (mFaces != null)) {
            double scale = drawBitmap(canvas);
            drawFaceAnnotations(canvas, scale);
        }
    }

    /**
     * ベースの画像表示(デバイスのサイズにスケーリングを行う)
     */
    private double drawBitmap(Canvas canvas) {
        double viewWidth = canvas.getWidth();
        double viewHeight = canvas.getHeight();
        double imageWidth = mBitmap.getWidth();
        double imageHeight = mBitmap.getHeight();
        double scale = Math.min(viewWidth / imageWidth, viewHeight / imageHeight);

        Rect destBounds = new Rect(0, 0, (int)(imageWidth * scale), (int)(imageHeight * scale));
        canvas.drawBitmap(mBitmap, null, destBounds, null);
        return scale;
    }

    /**
     * 検出結果の表示
     */
    private void drawFaceAnnotations(Canvas canvas, double scale) {
        Paint paint = new Paint();
        paint.setColor(Color.GREEN);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(5);

        for (int i = 0; i < mFaces.size(); ++i) {
            Face face = mFaces.valueAt(i);
            for (Landmark landmark : face.getLandmarks()) {
                int cx = (int) (landmark.getPosition().x * scale);
                int cy = (int) (landmark.getPosition().y * scale);
                canvas.drawCircle(cx, cy, 10, paint);
            }
        }
    }
}

読み込んだ画像と、顔検出した結果が重ねて表示されるようになっています。

 

レイアウトで「R.id.faceView」にあたるものを用意しておけば、完成です。

<com.xxxx.xxxx.FaceView
    android:id="@+id/faceView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

※FaceViewは、上記で用意した表示用のViewになります

 

実行結果

実行すると、検出した顔部分に緑の丸が描かれるようになっています。

実行する際の注意点ですが、エミュレータで実行される際は、通常の「System Image」ではなく、「Google APIs」のSystem Imageの方で実行する必要があります。

result1

 

フリー素材の「ぱくたそ」から、モデルさんの顔写真を持ってきて試してみましたが、正面を向いている写真はちゃんと検出されました。

 

result2

しかし、横向きや、斜めについては検出されませんでした。
(一度、正面で検出してトラッキングすれば、横とかが認識できるのかな??)

あと、複数人いる場合は、複数人検出されました。

result3

 

まとめ

静止画像から、顔を認識するだけなら、かなり簡単にできるようです。

動画をトラッキングしながら、行うサンプルも見てみたい所ですが、難しそうなので、別の機会にみてみたいと思います^^;

あと、バーコードも認識できるようになったようなので、そのうち試してみたいと思います。
(そういえば、標準のバーコード認識機能っていままでなかったような・・)

2015年8月12日水曜日

Nexus7(2013)の定期アップデート(セキュリティパッチ)がきた

SYSTEM_KDです。

最近色々と脆弱性が報告されているAndroidですが、その対策として、Nexusデバイス向けに、月1回程度のセキュリティアップデートが実施される(デバイスの一般公開から3年という期限付きではありますが)ということが発表されておりました。

 

手持ちの端末にもそのうちくるかなと、思っていたところアップデートの通知が来ました。

system_update

セキュリティアップデートですので、更新サイズは「10.3MB」と小さめです。

適用の時間もさほどかかりませんでした。
(アプリの最適化には時間がかかりますが)

 

セキュリティアップデートですので、アップデート後のバージョンは「5.1.1」のままで、ビルド番号は「LMY48G」から「LMY48I」に変更となっておりました。

version

 

上記のパッチ公開後にもいくつかセキュリティホール(脆弱性)が発見されているようですので、どのくらいの頻度でパッチが提供されるのか気になるところです。

2015年8月9日日曜日

EC-CUBEにアンケート機能を追加する方法(その4)プラグインを拡張

SYSTEM_KDです。

前回、プラグイン機能を利用し、アンケート機能を実装しましたが最低限の機能しか有してないので、拡張していきたいと思います。

拡張を行う部分は、下記を想定しています。

1.設定画面を追加し、アンケートを埋め込むためのURLを簡単に設定できるようにする。

2.会員のみアンケートを表示する機能を追加

 

設定画面を追加する

では早速、プラグインに設定画面を追加していきたいと思います。

ちなみに設定画面とは、EC-CUBEのプラグインへ一覧でいうところの「プラグイン設定」。下記画像の赤枠部分を押した際に表示される画面を指します。

plugin_config

 

追加するには、次のファイルが必要となります。

config.php

設定画面のクラスファイル
 (今回は、PC_Page_Plugin_GFCooperation_Config.phpとします)

設定画面のテンプレートファイル
 (今回は、config.tplとします)

 

config.phpを作成

まず、「config.php」を用意します。

作成場所は、「data/downloads/plugin/GFCooperation/」直下になります。

<?php
// {{{ requires
require_once PLUGIN_UPLOAD_REALDIR . 'GFCooperation/LC_Page_Plugin_GFCooperation_Config.php';

// }}}
// {{{ generate page
$objPage = new LC_Page_Plugin_GFCooperation_Config();
$objPage->init();
$objPage->process();
?>

config.phpはこれだけです。
設定画面のクラスファイルを指定してあげるだけになります。


設定画面のクラスファイルを用意


次に設定画面のクラスファイルを用意したいと思います。

作成場所は、「data/downloads/plugin/GFCooperation/」直下になります。

<?php

// {{{ requires
require_once CLASS_EX_REALDIR . 'page_extends/admin/LC_Page_Admin_Ex.php';

/**
* 設定画面のクラス
*
* @package LC_Page_Plugin_GFCooperation_Config
* @version $Id: $
*/
class LC_Page_Plugin_GFCooperation_Config extends LC_Page_Admin_Ex {

var $arrForm = array();

/**
* 初期化する.
*
* @return void
*/
function init() {
parent::init();
$this->tpl_mainpage = PLUGIN_UPLOAD_REALDIR ."GFCooperation/templates/config.tpl";
$this->tpl_subtitle = "プラグインの設定";
}

/**
* プロセス.
*
* @return void
*/
function process() {
$this->action();
$this->sendResponse();
}

/**
* Page のアクション.
*
* @return void
*/
function action() {
$this->setTemplate($this->tpl_mainpage);
}

/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}
}
?>

上記は、ひとまずテンプレートを指定して、表示する部分までになります。


テンプレートファイルを作成


最後に設定画面用のテンプレートファイルを用意します。

作成場所は、「data/downloads/plugin/GFCooperation/templates」直下になります。

設定項目としては、アンケートを埋め込むためのURLになりますので、URLが設定できるような画面を用意してやります。

<!--{include file="`$smarty.const.TEMPLATE_ADMIN_REALDIR`admin_popup_header.tpl"}-->
<script type="text/javascript">
</script>

<h2><!--{$tpl_subtitle}--></h2>
<form name="form1" id="form1" method="post" action="<!--{$smarty.server.REQUEST_URI|h}-->">
<input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
<input type="hidden" name="mode" value="edit">

<table border="0" cellspacing="1" cellpadding="8" summary=" ">
<tr>
<td colspan="2" width="90" bgcolor="#f3f3f3">▼Googleフォームの埋め込みURLを設定します</td>
</tr>
<tr >
<td bgcolor="#f3f3f3">URL</td>
<td>
<span class="red"><!--{$arrErr[$key]}--></span>
<input type="text" class="box60" size="60" style="" maxlength="1000" value="<!--{$arrForm.gfurl|h}-->" name="gfurl">
<br><span class="attention"> (上限1000文字)</span>
</td>
</tr>
</table>

<div class="btn-area">
<ul>
<li>
<a class="btn-action" href="javascript:;" onclick="document.form1.submit();return false;"><span class="btn-next">この内容で登録する</span></a>
</li>
</ul>
</div>

</form>

管理画面側ですので、とりあえず必要最低限のものを用意しました。

ここまでできたら、管理画面のプラグイン一覧より、このプラグインの「プラグイン設定」ボタンを押してみましょう。

上手くできていれば、この画面が表示されるかと思います。

plugin_config_view

 


機能部分の実装


では、実装へ移ります。

設定ファイルの実装の要点は以下になります。



  1. 設定画面表示時に設定内容を取得
    設定画面を開いた時に、登録情報を表示してやるための処理になります。

  2. 登録機能の実装
    画面に入力された埋め込みURLを保持してやる処理になります。
    データの保存先は、プラグイン情報の格納用として用意されているフリーフィールドの「free_field1」に保持するようにしたいと思います。

上記の通り、普通にデータを取得と登録(更新)だけになりますので、ソースコードは割愛します。

 

次に、プラグイン本体の実装ですが、こちらは次の様な流れとなります。



  1. テンプレートのトランスフォーム実装
    テンプレートへアンケート表示を埋め込むためのカスタマイズを行います。

  2. 埋め込みURLの取得と、設定
    設定画面で登録された埋め込みURLを取得し、テンプレートへ表示が行える処理を作成します。

 

では、さっそく、テンプレートのトランスフォームを実装していきたいと思います。

function prefilterTransform(&$source, LC_Page_Ex $objPage, $filename) {
$objTransform = new SC_Helper_Transform($source);
$template_dir = PLUGIN_UPLOAD_REALDIR . 'GFCooperation/templates/';
switch($objPage->arrPageLayout['device_type_id']){
case DEVICE_TYPE_MOBILE:
break;
case DEVICE_TYPE_SMARTPHONE:
break;
case DEVICE_TYPE_PC:

if (strpos($filename, 'shopping/complete.tpl') !== false) {
$objTransform->select('div.shop_information')->insertBefore(
'<!--{if $gfurl}--><p class="message" style="margin-top: 15px;">宜しければ、アンケートにご協力ください</p><!--{$gfurl}--><!--{/if}-->'
);
}

break;
case DEVICE_TYPE_ADMIN:
default:
break;
}
$source = $objTransform->getHTML();
}

プラグイン本体の、テンプレートフック部分を上記の様にすることによって、アンケート用の埋め込みURLを設定できるようにします。

 

次に、埋め込み用URLを取得する処理を追加するために、フックポイントを増やしてやります。

今回は購入完了画面のフックとなりますので、「LC_Page_Shopping_Complete」の処理後をフックしてやるように、以下のコードを追加します。

function register(SC_Helper_Plugin $objHelperPlugin) {

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

// 購入完了画面 後処理
$objHelperPlugin->addAction("LC_Page_Shopping_Complete_action_after", array(&$this, 'shipping_complete_action_after'));
}

 

フックポイントを増やしましたので、次は実際にフック時の処理を追加してやります。

/**
* 購入完了画面 後処理
* @param unknown $objPage
*/
function shipping_complete_action_after($objPage) {

// プラグイン情報を取得.
$plugin = SC_Plugin_Util_Ex::getPluginByPluginCode("GFCooperation");
$objPage->gfurl = $plugin['free_field1'];

}

処理の中身としては、登録した埋め込みURLを取得して、表示用に設定してやるだけなので、シンプルです。

これで、プラグイン設定画面に、埋め込みURLを指定してやれば、アンケートが表示され、埋め込みURLを削除すれば、通常の購入完了画面が表示される処理ができました。

 


会員のみにアンケートを表示する


今回の目標に会員のみにアンケートを表示する機能を追加するということを上げましたので、最後にその部分の実装を行いたいと思います。

とはいえ、その処理には大したコードの追加は必要なく、条件式を追加してやるだけです。

/**
* 購入完了画面 後処理
* @param unknown $objPage
*/
function shipping_complete_action_after($objPage) {

// プラグイン情報を取得.
$plugin = SC_Plugin_Util_Ex::getPluginByPluginCode("GFCooperation");
$objPage->gfurl = $plugin['free_field1'];

$objCustomer = new SC_Customer_Ex();

if(!$objCustomer->isLoginSuccess()) {
$objPage->gfurl = "";
}

}

 


まとめ


以上、4回にわたってEC-CUBEにアンケート機能を追加する方法について、まとめてみました。

上記のプラグインをもとに、さらに「表示期間」を追加してやったり、「複数アンケートを登録」できるようにしたり、「ユーザによってアンケートを分ける」といった機能追加をしてやると、よりちゃっと使えるアンケートプラグインになるのではないかと思います。

気が向いたら、作ってオーナーズストアで公開するかもしれないですw
(1000円位だったら買ってくれる人とかいるかなー)

 

以上、色々わかりにくい説明で申し訳ないです、EC-CUBEにアンケート機能を追加する方法でした。

[参考]
EC-CUBEにアンケート機能を追加する方法(その1)
EC-CUBEにアンケート機能を追加する方法(その2)
EC-CUBEにアンケート機能を追加する方法(その3)プラグインで実装

2015年8月6日木曜日

EC-CUBEにアンケート機能を追加する方法(その3)プラグインで実装

SYSTEM_KDです。

前回に引き続き、EC-CUBEにアンケート機能を追加する方法についてです。

前回は、Googleフォームの作成、EC-CUBEのテンプレートへの埋め込みを行いましたが、今回はそれをプラグイン化していきたいと思います。

 

プラグインでの実装手順

では、さっそく実装してきたいと思います。

手順としては、以下になります。

1.プラグインのベースとなるファイルを用意

2.Googleフォームの埋め込み用URLをセットできるようにテンプレートの書き換え機能を実装する。

3.完成

ひとまず、最低限の部分だけ実装しようと思いますので、手順はこれだけです。

 

プラグインベースファイルの準備

まず、プラグインを作成するために最低限必要なファイルを用意したいと思いますが、その前に今回のプラグインの名前を決めたいと思います。

プラグイン名:
Googleフォーム連携プラグイン

プラグインコード:
GFCooperation

プラグイン名だけ見ると、なんかすごそうですねw
とりあえず、上記で進めていきたいと思います。

 

では、プラグインを作成するにあたって必要なファイルを用意したいと思います。

必要なファイルは以下になります。

・GFCooperation.php
(プラグインのメインとなるファイルです)

・plugin_info.php
(プラグインの設定ファイルです)

・plugin_update.php
(アップデート用のファイルです。未使用)

・logo.png
(プラグインのロゴ画像です、好きな画像を用意下さい)

(詳細につきましては、過去のブログにありますので、参照頂ければと思います)

 

プラグインの実装方法

少し余談になりますが、プラグインを実装する際に、先に実現したい機能のコーディングを行ってしまって、最後にインストールして確認するというのは、かなり大変です。

ですので、作成の順としては、処理を実装していない状態のプラグインファイルをEC-CUBEへインストールし、インストール後のファイルを変更して実装していくのが良いと思います。

 

上記を踏まえて、まずは空(機能を実装していない)状態のものにしたいと思います。

そんなに量が多くないので、全文のせます。

GFCooperation.php

<?php

/**
* プラグインのメインクラス
*
* @package GFCooperation
* @version $Id: $
*/
class GFCooperation extends SC_Plugin_Base {

/**
* コンストラクタ
*/
public function __construct(array $arrSelfInfo) {
parent::__construct($arrSelfInfo);
}

/**
* インストール
* installはプラグインのインストール時に実行されます.
* 引数にはdtb_pluginのプラグイン情報が渡されます.
*
* @param array $arrPlugin plugin_infoを元にDBに登録されたプラグイン情報(dtb_plugin)
* @return void
*/
function install($arrPlugin) {
// ロゴのコピー
if(copy(PLUGIN_UPLOAD_REALDIR . "GFCooperation/logo.png", PLUGIN_HTML_REALDIR . "GFCooperation/logo.png") === false) print_r("失敗");

}

/**
* アンインストール
* uninstallはアンインストール時に実行されます.
* 引数にはdtb_pluginのプラグイン情報が渡されます.
*
* @param array $arrPlugin プラグイン情報の連想配列(dtb_plugin)
* @return void
*/
function uninstall($arrPlugin) {
// ロゴ削除
GFCooperation::lfDeleteFile(PLUGIN_HTML_REALDIR . "GFCooperation/logo.png");

}

static function lfDeleteFile($targetPath){
if(SC_Helper_FileManager_Ex::deleteFile($targetPath) === false) {
GFCooperation::lfTriggerError('[' . $targetPath . ']の削除に失敗しました');
}
}

static function lfTriggerError($errMsg){
GC_Utils_Ex::gfPrintLog($errMsg, ERROR_LOG_REALFILE, true);
}

/**
* アップデート
* updateはアップデート時に実行されます.
* 引数にはdtb_pluginのプラグイン情報が渡されます.
*
* @param array $arrPlugin プラグイン情報の連想配列(dtb_plugin)
* @return void
*/
function update($arrPlugin) {
// nop
}

/**
* 稼働
* enableはプラグインを有効にした際に実行されます.
* 引数にはdtb_pluginのプラグイン情報が渡されます.
*
* @param array $arrPlugin プラグイン情報の連想配列(dtb_plugin)
* @return void
*/
function enable($arrPlugin) {
// nop
}

/**
* 停止
* disableはプラグインを無効にした際に実行されます.
* 引数にはdtb_pluginのプラグイン情報が渡されます.
*
* @param array $arrPlugin プラグイン情報の連想配列(dtb_plugin)
* @return void
*/
function disable($arrPlugin) {
// nop
}

/**
* 処理の介入箇所とコールバック関数を設定
* registerはプラグインインスタンス生成時に実行されます
*
* @param SC_Helper_Plugin $objHelperPlugin
*/
function register(SC_Helper_Plugin $objHelperPlugin) {

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

/**
* グローバルフック
*
*/
function preProcess(LC_Page $objPage) {

}

/**
* プレフィルタコールバック関数
*
* @param string &$source テンプレートのHTMLソース
* @param LC_Page_Ex $objPage ページオブジェクト
* @param string $filename テンプレートのファイル名
* @return void
*/
function prefilterTransform(&$source, LC_Page_Ex $objPage, $filename) {
$objTransform = new SC_Helper_Transform($source);
$template_dir = PLUGIN_UPLOAD_REALDIR . 'GFCooperation/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:
break;
}
$source = $objTransform->getHTML();
}

}
?>

plugin_info.php

<?php
/**
* プラグイン の情報クラス.
*
* @package GFCooperation
* @version $Id: $
*/
class plugin_info{
/** プラグインコード(必須):プラグインを識別する為キーで、他のプラグインと重複しない一意な値である必要がありま. */
static $PLUGIN_CODE = "GFCooperation";
/** プラグイン名(必須):EC-CUBE上で表示されるプラグイン名. */
static $PLUGIN_NAME = "Googleフォーム連携プラグイン";
/** クラス名(必須):プラグインのクラス(拡張子は含まない) */
static $CLASS_NAME = "GFCooperation";
/** プラグインバージョン(必須):プラグインのバージョン. */
static $PLUGIN_VERSION = "1.0";
/** 対応バージョン(必須):対応するEC-CUBEバージョン. */
static $COMPLIANT_VERSION = "2.13.3";
/** 作者(必須):プラグイン作者. */
static $AUTHOR = "作成者の名前";
/** 説明(必須):プラグインの説明. */
static $DESCRIPTION = "Googleフォームによるアンケート機能を利用可能にします。";
/** プラグインURL:プラグイン毎に設定出来るURL(説明ページなど) */
static $PLUGIN_SITE_URL = "";
/** フックポイント:フックポイントとコールバック関数を定義します */
static $HOOK_POINTS = array(
array("prefilterTransform", 'prefilterTransform'),
);
}
?>

plugin_update.php

<?php

/**
* プラグイン のアップデート用クラス.
*
* @package GFCooperation
* @version $Id: $
*/
class plugin_update{
/**
* アップデート
* updateはアップデート時に実行されます.
* 引数にはdtb_pluginのプラグイン情報が渡されます.
*
* @param array $arrPlugin プラグイン情報の連想配列(dtb_plugin)
* @return void
*/
function update($arrPlugin) {
// nop
}
}
?>

こんな感じです。


用意できたら、tar.gzで固めて、EC-CUBEにインストールします。


 


アンケート連携のためテンプレートをトランスフォームする


ようやく本題の部分です。


アンケート埋め込み用のリンクを設定できるようにテンプレートを変更したいと思います。


変更するファイルは「GFCooperation.php」になり、変更箇所は、「prefilterTransform」の部分になります。


この部分で、テンプレートの内容を操作することができますので、購入完了画面のテンプレートに対して、アンケート埋め込み用のリンクを挿入するよにします。

function prefilterTransform(&$source, LC_Page_Ex $objPage, $filename) {
$objTransform = new SC_Helper_Transform($source);
$template_dir = PLUGIN_UPLOAD_REALDIR . 'GFCooperation/templates/';
switch($objPage->arrPageLayout['device_type_id']){
case DEVICE_TYPE_MOBILE:
break;
case DEVICE_TYPE_SMARTPHONE:
break;
case DEVICE_TYPE_PC:

if (strpos($filename, 'shopping/complete.tpl') !== false) {
$objTransform->select('div.shop_information')->insertBefore(
'<p class="message" style="margin-top: 15px;">宜しければ、アンケートにご協力ください</p>
<iframe src="https://docs.google.com/forms/d/xx略xx/viewform?embedded=true" width="760" height="510" frameborder="0" marginheight="0" marginwidth="0">読み込み中...</iframe>'
);
}

break;
case DEVICE_TYPE_ADMIN:
default:
break;
}
$source = $objTransform->getHTML();
}

対象部分だけを抜粋すると上記のようになります。
(テンプレートが書き換わらない場合は、data/cache/mtb_constants.php内の「SMARTY_FORCE_COMPILE_MODE」というパラメータをtrueにすると改善されるかもしれません。


これで、テンプレートをフックして、埋め込み用のリンク情報をセットできます。
(埋め込みURLは読み替えて下さい)


完了画面を確認すると、以下のようになっていると思います。


完了画面_プラグイン


完成です!


 


まとめ


プラグインのベースとなるファイル群を用意するのが若干面倒ではありますが、実際の処理自体は簡単だったのではないかと思います。


プラグインで実装したことで、プラグインの有効・無効を切り替えることにより、アンケートを表示したり、非表示にしたりということが、管理画面からできるようになったかと思いますが、まだ埋め込み用のURLを直接埋め込んでいたりしますので、次回はこの部分を改良したいと思います。

2015年8月4日火曜日

EC-CUBEにアンケート機能を追加する方法(その2)

SYSTEM_KDです。

EC-CUBEにアンケート機能を追加する方法(その1)の続きです。

その1では、EC-CUBEへアンケート機能を簡単に追加するには、Googleフォームを利用すると良いということを書きましたが、実際の組み込み方は書いておりませんでしたので、今回はその部分を詳しく書いてみたいと思います。

 

1.Googleフォームを用意する

まず、前回のおさらになりますが、Googleフォームを用意します。

Googleアカウントを取得していることを前提になりますが、用意の仕方としましたは、以下になります。

1.Webブラウザにて、Googleドライブへアクセスする。

2.新規ボタンを押し、表示されるメニューにて「その他」>「Googleフォーム」を選択します。

3.アンケート作成画面が表示されます。

 

これだけですので、簡単に用意できるかと思います。

後は、アンケートの項目を作成していきます。
アンケートの詳細な作成方法につきましては、Web上に色々と情報があると思いますが、そもそも直感的に作成することができるかと思います。

 

2.埋め込み用のリンク取得

アンケートの作成ができたら、次はEC-CUBEへ埋め込むためのリンクを取得します。

リンクの取得方法は、画面右上に表示されている「フォームを送信」をクリックし、表示されるダイアログにて、「埋め込む」ボタンを押します。

すると、フォームを埋め込むためのリンクが表示されますので、コピーしておきます。

 

3.EC-CUBEをカスタマイズして埋め込む

これで、アンケート部分の準備はできましたので、EC-CUBE側をカスタマイズして、アンケートを埋め込めるようにしたいと思います。

今回は、購入完了画面(PCページ)にアンケートを組み込んでみたいと思います。

では早速。

購入完了画面のテンプレートは、以下になりますので、このファイルを変更します。

data/Smarty/templates/defaul/shopping/complete.tpl

 

ちなみに、変更としましたは、以下の状態を想定しております。

完了画面

 

ソース変更は、1行挿入するだけです。
(※以下の例では、アンケートの上部にタイトルを表示するため、もう1行追加してます)

    <div id="complete_area">
<p class="message"><!--{$arrInfo.shop_name|h}-->の商品をご購入いただき、ありがとうございました。</p>
<p>ただいま、ご注文の確認メールをお送りさせていただきました。<br />
万一、ご確認メールが届かない場合は、トラブルの可能性もありますので大変お手数ではございますがもう一度お問い合わせいただくか、お電話にてお問い合わせくださいませ。<br />
今後ともご愛顧賜りますようよろしくお願い申し上げます。</p>

<!-- アンケートを挿入 -->
<p class="message" style="margin-top: 15px;">宜しければ、アンケートにご協力ください</p>
<iframe src="xx略xxxxx" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">読み込み中...</iframe>

<div class="shop_information">
<p class="name"><!--{$arrInfo.shop_name|h}--></p>
<p>TEL:<!--{$arrInfo.tel01}-->-<!--{$arrInfo.tel02}-->-<!--{$arrInfo.tel03}--> <!--{if $arrInfo.business_hour != ""}-->(受付時間/<!--{$arrInfo.business_hour}-->)<!--{/if}--><br />
E-mail:<a href="mailto:<!--{$arrInfo.email02|escape:'hex'}-->"><!--{$arrInfo.email02|escape:'hexentity'}--></a>
</p>
</div>
</div>

「アンケートを挿入」と記述している下の行へ「2.埋め込み用のリンク取得」で取得したリンク先をはりつけます。
※<iframe ・・・の部分です。


そうすると、購入完了画面へアンケートが挿入され、次の様に表示されるかと思います。


完了画面_アンケート追加後


 


4.まとめ


必要最低限の部分だけになりますが、たったこれだけの手順でEC-CUBEへアンケートを追加することができました。


ちなみに、Googleフォームで回答を確認すると、


回答


こんな感じで、グラフまでついた回答を確認することができます。


次回は、EC-CUBEの変更部分(埋め込み部分)をプラグインで実装して、実際に使えれるレベルのものに仕上げていきたいと思います。

2015年8月3日月曜日

EC-CUBEにアンケート機能を追加する方法(その1)

SYSTEM_KDです。

EC-CUBEとAndroidを扱っているといいつつ、最近はAndroidばっかりだったので、EC-CUBEネタを増やしていきたいと思います。

ということで、EC-CUBEにアンケート機能を追加するという内容を書いてみたいと思います。(※ちなみに、2系(EC-CUBE2.13.x)向けになります)

 

アンケートに必要な機能

ネットショップを運営していく中で、お客さんの声を聞きたいということがあるかと思います。

そんな時、購入完了ページ等にアンケート機能があると便利ですが、EC-CUBEにはデフォルトでアンケート機能といったものは用意されておりません。

簡単なカスタマイズで追加することが出来ればよいのですが、アンケートは設問によって、回答が複数選択できたり、1つしか選択できなかったり、直接入力出来る必要があったりと様々です。

それに、アンケート機能の受付部分を実装するだけでなく、それを集計する部分も必要となってきます。

プラグインも出ていますが、上記の機能が必要ですので、結構お値段がはります。(まぁそれだけの価値があるということですが)

 

簡単に実装するには?

上記の通り、アンケート機能を追加するためには、実装しないといけないことが山積みです。

ところが、少し妥協点は必要ですが、これを簡単に実現する方法があります。

それは、Googleフォームです!

Googleフォームを利用すれば、簡単に高度なアンケートフォームを作成できます。

さらに、集計機能も備わっています。

さらに、Googleアカウント(無料)があれば、すぐに利用することができます。

実際の画面はこんな感じです。

アンケート

かなり便利ですね。

 

どうやってEC-CUBEへ組み込みを行うか?

Googleフォームを利用すれば、アンケートが簡単に作成できることはわかったのですが、ではこれをEC-CUBEに組み込むには、どうすれば良いのか?

となるかと思いますが、Googleフォームの機能に、WEBサイトへ組み込むためのURLを生成してくれる機能があります。

これを利用することにより、簡単に組み込めるようになります。

アンケート_Share

こんな感じです。

これを、商品購入完了画面のテンプレートに組み込めば、アンケート機能を実装することができます。

とは、言ってもこれだけでは実際に使うには不便すぎますので、色々と手を加えてちゃっと使えるものに仕上げていきたいと思います。

その2に続く。

1年ほど前に書いた、EC-CUBEプラグインの基本的な機能について以来の長編になりそうな予感!!

2015年8月2日日曜日

EC-CUBE3.0.2のリリースと主な変更点について

SYSTEM_KDです。

若干、今更感がありますが、7月29日にEC-CUBE3.0.2がリリースされたので、インストールしました。

あと、3.0.2での主な機能追加部分についてみてみました。

 

EC-CUBE3.0.2をインストール

と、言ってもインストール方法は特に変更ありません。

画面の流れにそってインストールするだけです。

install

 

EC-CUBE3.0.2の主な変更点について

今回のバージョンアップの主な変更点は、CSV関連の機能追加になりますので、その部分について見てみたいと思います。

具体的に追加された部分は、

・商品CSVダウンロード
・カテゴリCSVダウンロード
・会員CSVダウンロード
・受注CSVダウンロード
・商品CSVアップロード
・カテゴリCSVアップロード
・CSV出力項目設定


になります。

 

せっかくなので、各CSVダウンロード、アップロード機能を簡単にですが、みてみたいと思います。

 

<商品CSVダウンロード>
EC-CUBE2系にもあった商品のCSVダウンロード機能です。

products

 

<カテゴリCSVダウンロード>
EC-CUBE2系にもあったカテゴリのCSVダウンロード機能です。

category

 

<会員CSVダウンロード>
EC-CUBE2系にもあった会員CSVダウンロード機能です。customer

 

<受注CSVダウンロード>
EC-CUBE2系にあった受注CSVダウンロードに加え、「配送CSVダウンロード」が追加されているようです。

order

order2

受注CSVダウンロードは、今までと同じく受注レコードをCSV出力する機能ですが、配送CSVダウンロードは、配送先情報+受注詳細情報が出力される、受注明細CSVダウンロードのような内容になっているようです。

 

<商品CSVアップロード>
EC-CUBE2系にもあった商品CSVのアップロード機能です。

products_up

EC-CUBE3で、商品詳細ページに表示する商品画像を任意の枚数(複数枚)設定できるようになりましたが、CSVでアップロードする際には、「”」で囲んで、カンマ区切りで設定するようです。

 

<カテゴリCSVアップロード>
EC-CUBE2系にもあったカテゴリCSVのアップロード機能です。

category_up

 

<CSV出力項目設定>
CSV出力項目の設定画面になります。

csv_setting

 

対象のCSVを選択が、コンボボックスで行えるようになっているので、簡単に対象のCSVを切り替えることができるようになっているようです。

setting2

 

ちなみに、CSV出力項目設定画面の場所は、以前(2系)の「コンテンツ管理>CSV出力項目設定」から、「設定>基本情報設定>CSV出力項目設定」になっております。

 

まとめ

段階的に機能が追加されてきているEC-CUBE3ですが、CSVアップロード機能がついたことにより、できることが2系のバージョンに追いつき、2系から3系への移行がしやすくなってきたのではないかと思います。

次回のバージョンアップ(3.0.3)は、2015/08/19が想定されておりますが、このバージョンアップとともに、オーナーズストアのリニューアルや、プラグイン通信インストールなど、いよいよ実運用で利用できるようになりそうですので、楽しみに待ちたいと思います。