読者です 読者をやめる 読者になる 読者になる

EC-CUBE3でログイン成功時に直前まで見ていた画面へ戻る方法

EC-CUBE3ではログインする場合、EC-CUBE2とは違いログイン画面を経由させる必要があります。

また、ログイン成功後は必ずサイトのトップページへ戻ってしまいます。

サイトの作りにもよりますが、例えばログイン後は前に見ていた画面を表示して欲しいという要望があった場合、 以下のカスタマイズを行うことで実現可能となります。

EC-CUBE3.0.14を対象に説明します。

まず、MypageControllerにあるlogin関数を修正します。

  • src/Eccube/Controller/Mypage/MypageController.php
/**
 * ログイン画面.
 *
 * @param Application $app
 * @param Request $request
 * @return \Symfony\Component\HttpFoundation\RedirectResponse|\Symfony\Component\HttpFoundation\Response
 */
public function login(Application $app, Request $request)
{
    if ($app->isGranted('IS_AUTHENTICATED_FULLY')) {
        log_info('認証済のためログイン処理をスキップ');

        return $app->redirect($app->url('mypage'));
    }

    /* @var $form \Symfony\Component\Form\FormInterface */
    $builder = $app['form.factory']
        ->createNamedBuilder('', 'customer_login');

    if ($app->isGranted('IS_AUTHENTICATED_REMEMBERED')) {
        $Customer = $app->user();
        if ($Customer) {
            $builder->get('login_email')->setData($Customer->getEmail());
        }
    }

    $event = new EventArgs(
        array(
            'builder' => $builder,
        ),
        $request
    );
    $app['eccube.event.dispatcher']->dispatch(EccubeEvents::FRONT_MYPAGE_MYPAGE_LOGIN_INITIALIZE, $event);

    $form = $builder->getForm();

    // ログイン前の画面へ戻す
    $error = $app['security.last_error']($request);
    if (!$error) {
        // ログインエラーがなければ戻り先をセット
        $referer = $request->headers->get('referer');

        if ($referer) {
            // refererチェック
            $referers = parse_url($referer);
            if ($referers['host'] == $request->getHost()) {
                // ホストが同一であればrefererをセット
                $requestStackUri = $app['request_stack']->getMasterRequest()->getUri();

                if ($request->getUri() == $requestStackUri) {
                    // ログイン画面遷移直前のuriをセット
                    $app->setLoginTargetPath($referer);
                } else {
                    // ログイン必須画面のuriをセット
                    $app->setLoginTargetPath($requestStackUri);
                }
            }
        }
    }

    return $app->render('Mypage/login.twig', array(
        'error' => $error,
        'form' => $form->createView(),
    ));
}

修正箇所は、

// ログイン前の画面へ戻す
$error = $app['security.last_error']($request);
if (!$error) {
    // ログインエラーがなければ戻り先をセット
    $referer = $request->headers->get('referer');

    if ($referer) {
        // refererチェック
        $referers = parse_url($referer);
        if ($referers['host'] == $request->getHost()) {
            // ホストが同一であればrefererをセット
            $requestStackUri = $app['request_stack']->getMasterRequest()->getUri();

            if ($request->getUri() == $requestStackUri) {
                // ログイン画面遷移直前のuriをセット
                $app->setLoginTargetPath($referer);
            } else {
                // ログイン必須画面のuriをセット
                $app->setLoginTargetPath($requestStackUri);
            }
        }
    }
}

return $app->render('Mypage/login.twig', array(
    'error' => $error,
    'form' => $form->createView(),
));

になります。ログイン前のrefererを取得し、ログイン成功時に直前まで見ていた画面へ戻すようにしています。ただし、ログインが必要な画面を直接指定された場合、refererを取得するとログインに成功してもrefererで指定した画面に遷移してしまうため、

$app['request_stack']->getMasterRequest()->getUri()

と本来指定されているURLを取得し、比較する事でログイン成功後の遷移先を変更するようにセットしています。

refererが取得できない環境は諦めてください。

あと、login.twigも変更する必要があります。以下抜粋です。

  • src/Eccube/Resource/template/default/Mypage/login.twig
{% if app.session.flashBag.has('eccube.login.target.path') %}
    {% for targetPath in app.session.flashBag.peek('eccube.login.target.path') %}
        <input type="hidden" name="_target_path" value="{{ targetPath }}" />
    {% endfor %}
{% endif %}

こちらの変更箇所ですが、

{% for targetPath in app.session.flashBag.peek('eccube.login.target.path') %}

の部分となり、getからpeekへと変更しています。なぜpeekに変更しているかというと、ログインエラー時にセットされていたtargepathの値が削除されてしまいますので、peekに変更しています。

以上の対応でログイン成功後は、直前まて見ていた画面へ遷移するようになります。

必要な方には必要なカスタマイズだと思います。特にスマホだとログイン後にトップページへ遷移してしまうと離脱されてしまう可能性が高くなりますのでこちら是非活用してください。

EC-CUBE3でPC、スマホ、タブレットの判定方法

EC-CUBE3.0.14からPCとスマホを判別するMobile Detectというライブラリが導入されています。

mobiledetect.net

使い方は、PHP側からはShoppingService.php

// device type
if ($this->app['mobile_detect']->isMobile()) {
    $DeviceType = $this->app['eccube.repository.master.device_type']->find(DeviceType::DEVICE_TYPE_SP);
} else {
    $DeviceType = $this->app['eccube.repository.master.device_type']->find(DeviceType::DEVICE_TYPE_PC);
}

とありますので参考になりますが、Twigから使う場合、以下の通りとなります。

{% if app['mobile_detect'].isMobile %}
    Mobile、Tablet
{% else %}
    PC
{% endif %}
{% if app['mobile_detect'].isTablet %}
    Tablet
{% else %}
    PC、スマホ
{% endif %}
{% if app['mobile_detect'].isMobile and app['mobile_detect'].isTablet == false %}
    スマホ
{% else %}
    PC、Tablet
{% endif %}

レスポンシブデザインだと余り使いどころは無いかもしれませんがTwigでPCとスマホを判断したいという時に参考にしてください。

EC-CUBE3.0.13以下の方は独自でMoible Detectライブラリを導入する必要があります。
導入方法は以下のプルリクエストを参考にしてください。

モバイル種別判断用ライブラリの導入 · EC-CUBE/ec-cube@f0f5c70 · GitHub

composer.jsonApplication.phpにそれぞれ定義を追加し、EC-CUBEのルートディレクトリよりcomposer installを実行すればインストールされます。

EC-CUBE3.0.14がリリース、さくらのレンタルサーバでEC-CUBE3.0.14をインストールした時にhtmlをURLに付けさせない方法

3月14日にEC-CUBE3.0.14がリリースされました。

www.ec-cube.net

EC-CUBE3.0.14で特徴的なものとしては、

  • PHP7.1 対応

があります。

さくらのレンタルサーバはphp7.1がサポートされているため、 EC-CUBE3.0.14から安心して利用できるようになります。

そこで、XSERVERに引き続きさくらのレンタルサーバでhtmlをURLにつけさせない方法を説明します。

基本はXSERVERの時と全く同じです。

EC-CUBE3.0.11をXSERVERにインストールした時にhtmlを付けさせない方法 - AmidaikeBlog

※すでにDBが作成されている前提です。

レンタルサーバでは公開ディレクトリは固定されている事が多く変更する事は出来ないのですが、さくらのレンタルサーバの公開ディレクトリは、

/home/hoge/www

wwwが公開ディレクトリになっています。
hogeの部分は適宜ご自身の環境と読み替えてください。

過去に説明した記事であれば、.htaccessを色々とごにょごにょする事で対応してきましたが今回も、

インストール時にURLからhtmlを無くす | EC-CUBE 開発ドキュメント

こちらを参考にhtmlを外す方法を説明していきます。

EC-CUBE3.0.14のアップロード

EC-CUBE3.0.14を

EC-CUBEダウンロード | ECサイト構築・リニューアルは「ECオープンプラットフォームEC-CUBE」

こちらからダウンロードし、 FTP等で/home/hoge直下にアップロードします。

EC-CUBE3.0.14の解凍

さくらのレンタルサーバSSHでログイン後、アップロードされたディレクトリからEC-CUBEを解凍します。

unzip eccube-3.0.14.zip

解凍したEC-CUBEをwww配下にコピーします。

cd eccube-3.0.14
cp -pr . ../www/

これで公開ディレクトリにEC-CUBEが解凍されました。

ファイル配置場所の変更

公開ディレクトリまでカレントディレクトリを移動し、htmlディレクトリに存在する必要なファイルを公開ディレクトリ直下に移動させます。

cd
cd /home/hoge/www
mv html/in* .
mv html/.htaccess .
mv html/robots.txt .

→今回はweb.configは不要なため移動させていません。

.htaccessの削除、.htaccess.sampleのリネーム

移動した.htaccessを削除し、public_html直下に存在している.htaccess.sampleに置き換えます。

rm .htaccess
mv .htaccess.sample .htaccess

index.php、install.phpの書き換え

  • index.phpの書き換え
vi index.php

を実行し、27行目のコメントアウトされている箇所を変更し、26行目をコメントアウトます。

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
require __DIR__.'/../autoload.php';
//require __DIR__.'/autoload.php';

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
//require __DIR__.'/../autoload.php';
require __DIR__.'/autoload.php';
  • install.phpの書き換え
vi install.php

を実行し、31行目のコメントアウトされている箇所を変更し、30行目をコメントアウトします。

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
require __DIR__ . '/../autoload.php';
//require __DIR__ . '/autoload.php';

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
//require __DIR__ . '/../autoload.php';
require __DIR__ . '/autoload.php';

autoload.phpの変更

  • autoload.phpの書き換え
vi autoload.php

を実行し、36行目のコメントアウトされている箇所を変更し、35行目をコメントアウトします。

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
define("RELATIVE_PUBLIC_DIR_PATH", '');
//define("RELATIVE_PUBLIC_DIR_PATH", '/html');

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
//define("RELATIVE_PUBLIC_DIR_PATH", '');
define("RELATIVE_PUBLIC_DIR_PATH", '/html');

.htaccessの追加

公開ディレクトリをEC-CUBEルート直下にしたため、このままだと見せる必要のないディレクトリまで見えてしまいます。
そのため、以下の.htaccessファイルを各ディレクトリ直下に配置してください。

order allow,deny
deny from all

この内容を srctestsvendorティレクトリ直下に配置します。(appディレクトリ直下には既に存在)

EC-CUBEのインストール

http://hoge.sakura.ne.jp とアクセスし、インストール作業が出来れば対応完了です。

以上がhtmlをURLから付けさせない方法となります。

インストール後もhtmlディレクトリを削除する事は可能ですが、非常にめんどくさいためインストール前に設定するのがオススメです。

この方法で上手く動かないという方はコメントください。

EC-CUBE3の入力チェック時のエラーメッセージで項目名を表示させる方法

EC-CUBE3では入力チェック時のエラーメッセージ表示が標準のままだと項目名が表示されておらず、表示させるためには少々手を加える必要があります。

そこで今回は項目名を表示させたいけど分からないという方のために項目名を表示する方法を説明します。

現在のエラーメッセージの表示は標準ではこのようになっています。

f:id:amidaike:20170118102207p:plain

キャプチャを確認してもらうと分かる通り項目名が表示されておらず、何が入力されていないのか分かりづらいです。このエラーメッセージ表示を、

f:id:amidaike:20170118102228p:plain

このように項目名を表示させるにはどうするかというと、 ECCUBEROOT/src/Eccube/Resource/template/default/Form/form_layout.twigの59行目にある

<p class="errormsg text-danger">{{ error.message |trans }}</p>

<p class="errormsg text-danger">{{ form.vars.name|trans }} : {{ error.message |trans }}</p

に修正します。

※ECCUBEROOT : EC-CUBE3がインストールされているディレクト

この修正だけだとまだ不完全で、

f:id:amidaike:20170118105002p:plain

とinput属性のnameがそのまま表示されてしまいます。この部分を日本語に表示させるには、

ECCUBEROOT/src/Eccube/Resource/locale/message.ja.ymlファイルに以下の設定を追加します。(追加する場所はどこでも可能)

name01:name02:kana01: セイ
kana02: メイ
・
・
・

この内容を追加することで項目名が日本語表示されます。

入力チェックエラー発生時に英語表記されたら他の項目に対してもmessage.ja.yml

画面上に表示された値: 日本語名

と追加していくことで日本語に対応可能です。

エラーメッセージに項目名を表示させたいという方は是非お試しください。

既に本番環境を運用されている方でこの方法を適用しても項目名が表示されないという方は、ECCUBEROOT/app/cache/translatorディレクトリを削除後に再度お試しください。

EC-CUBE3の標準デザインについて

EC-CUBE Advent Calendar 2016 22日目の記事です。

公開がかなり遅くなりましたが、22日目はEC-CUBE3の標準デザインについて説明します。

EC-CUBE3で採用されているcssについて

EC-CUBE3からはフロント画面、管理画面ともに標準でレスポンシブ対応となっています。

このレスポンシブ対応を実現するにあたり、EC-CUBE3ではbootstrap3を採用してます。

Bootstrap · The world's most popular mobile-first and responsive front-end framework.

EC-CUBE3で利用されているbootstrap3のcssファイルですが、フロント画面のみカスタマイズが行われており利用するには注意が必要です。

  • フロント画面で参照されるcssファイル
[ECCUBEROOT]/html/template/default/css
  • 管理画面で参照されるcssファイル
[ECCUBEROOT]/html/template/admin/assets/css

上記のディレクトリにcssファイルが格納されているのですが、フロント画面のbootstrap.custom.min.cssファイルにはbootstrap3のクラス定義は入っておりません。

また、フロント画面のhtmlタグを確認すると、

<link rel="stylesheet" href="/template/default/css/style.css?v=3.0.xx">
<link rel="stylesheet" href="/template/default/css/slick.css?v=3.0.xx">
<link rel="stylesheet" href="/template/default/css/default.css?v=3.0.xx">

というようにbootstrap3という文字が見当たりませんが、実際はstyle.css内で

@import url("bootstrap.custom.min.css"); /* only Grid system CSS */

というようにimportされています。

EC-CUBE3ではbootstrap3のデザインをそのまま適用するのではなく、下記のcssファイルでbootstrap3の定義を上書きしています。

  • フロント画面
[ECCUBEROOT]/html/template/default/css/default.css
  • 管理画面
[ECCUBEROOT]/html/template/admin/assets/css/dashboard

もしbootstrap3をそのまま適用したいという場合、面倒ですが定義を削除する必要があります。
フロント画面ではbootstrap3を新たにダウンロードして上書きする必要があります。

EC-CUBE3のデザイン変更時の方法・注意点

EC-CUBE3のデザインを変更する場合、

  • 既存のcssファイル(default.css)に対して変更する方法
  • 全く新しくcssファイルを適用する方法

があります。

それぞれ一長一短がありますが、標準デザインから全く別のデザインに変更するなら新たにcssファイルを定義しなおす方が楽です。

また、デザインを変更する点で気をつけなければいけない点ですが、

  • JavaScriptでidやclass名を指定している画面もあるため、先にJavaScript内で指定している定義を確認
  • プラグインを利用する場合、プラグインの種類によってidやclass名を指定して画面項目の表示を行っているものがあるため、利用するプラグインによって定義を確認

があります。それぞれよく忘れがちとなるためご注意ください。

今回はCSSファイルの扱い方について記述しましたが、次回は実際に画面を変更する方法を例を出して説明します。

EC-CUBE2系からEC-CUBE3へのバージョンアップについて

EC-CUBE Advent Calendar 2016 4日目の記事です。

4日目はEC-CUBE2系からEC-CUBE3へバージョンアップした時の内容を書きます。

EC-CUBE2系といっても2系には

  • 2.4
  • 2.11
  • 2.12
  • 2.13

というバージョンがあります。今回は2.4からバージョンアップした際に行った内容を書きます。

2.4から3系へバージョンアップする際に主な作業として、

  • DBの移行
  • プログラム移行
  • デザイン移行

等があります。

DBの移行

3系のDBは2系を基本にしていますが、3系に合わせて色々と修正されており、3系から存在しなくった機能については該当するテーブル自体が存在していません。2系と3系のテーブル比較はこちら記事を参考にしてください。

EC-CUBE2とEC-CUBE3のテーブル比較 - AmidaikeBlog

2.4から3系にデーブルを移行するためには、

  • マスタ類に関してはそのままデータ移行
  • マスタ系以外は商品、受注、会員データについては大きく異なるため、移行用プログラムなどを作成して対応
  • ポイントや商品レビュー機能など3系では標準で存在しない機能を利用していた場合、プラグインのテーブルに合わせて移行

を行います。また、当時PostgreSQLを採用していた場合、MySQLへ移行しても特に問題はありません。

移行ブログラムについては後日公開します。

デザイン移行

3系ではテンプレートがSmartyからTwigに変更されています。そのため、全ての画面をTwigに変更する作業が発生します。
DBのように移行プログラムなどを作成できれば作業の軽減ができますが、残念ながらそれができないため全て対応する必要があります。

デザインの移行にあたり、

  • 全ファイルをTwigに変更
  • 画像ファイルなどのリソースファイル移行
  • 標準機能にない場合、プラグインをインストール後に適切なレイアウトに修正

が必要になります。

プログラム移行

デフォルトのまま2.4を利用していた場合、問題なくそのまま3系の機能を使えますが独自にカスタマイズをしていたら変更が必要です。

EC-CUBE3ではフレームワークにSilexを採用しているため、それに則って本体をカスタマイズする必要があります。プラグインで対応出来るのであればプラグインでも対応しても問題ありません。

その他

2系採用当時に最新のミドルウェアを採用していても、その後バージョンアップをしていなければ合わせて最新バージョンの採用を行います。

例として3系はバージョンアップ時に採用したのは、

  • OS : CentOS7
  • DB : MySQL5.7
  • Webサーバ : Apache2.4
  • php7

と構築当時で一番最新のバージョンを採用しています。

以上簡単にではありますが、2系(2.4)から3系にバージョンアップするための主な作業を書きました。

もしバージョンアップをお考えの方や悩んでいる方は個別にご相談にのりますのでご連絡ください。

EC-CUBE3.0.11をXSERVERにインストールした時にhtmlを付けさせない方法

これまでhtmlをURLに記事を付けさせない方法を書いてきました。

EC-CUBE3をさくらのレンタルサーバにインストールした時にhtmlを付けさせない方法 - AmidaikeBlog

前回 (EC-CUBE3.0.11がリリース、サーバ選定について - AmidaikeBlog) の記事でも書いた通り、EC-CUBE3.0.11からはhtmlをURLにつけさせない方法が提供されましたので、今回はXSERVERに対してhtmlを外す方法を説明します。
※すでにDBが作成されている前提です。

レンタルサーバでは公開ディレクトリは固定されている事が多く変更する事は出来ないのですが、XSERVERの公開ディレクトリは、

/home/hoge/hoge.xsrv.jp/public_html

public_htmlが公開ディレクトリになっています。
hogeの部分は適宜ご自身の環境と読み替えてください。

過去に説明した記事であれば、.htaccessを色々とごにょごにょする事で対応してきましたが、 今回は、

インストール時にURLからhtmlを無くす | EC-CUBE 開発ドキュメント

こちらを参考にhtmlを外す方法を説明していきます。

EC-CUBE3.0.11のアップロード

EC-CUBE3.0.11を

EC-CUBEダウンロード / ECサイト構築・リニューアルは「ECオープンプラットフォームEC-CUBE」

こちらからダウンロードし、 FTP/home/hoge/hoge.xsrv.jp直下にアップロードします。

EC-CUBE3.0.11の解凍

ここからはsshを使った説明となりますが、XSERVERでsshを使う時は以下のサイトを参考にしてください。

https://www.xserver.ne.jp/manual/man_server_ssh.php

SSHでログイン後、解凍されたディレクトリまで移動しEC-CUBEを解凍します。

cd hoge.xsrv.jp
unzip eccube-3.0.11.zip

解凍したEC-CUBEをpublic_html配下にコピーします。

cd eccube-3.0.11
cp -pr . ../public_html/

これで公開ディレクトリにEC-CUBEが解凍されました。

ファイル配置場所の変更

公開ディレクトリまでカレントディレクトリを移動し、htmlディレクトリに存在する必要なファイルを公開ディレクトリ直下に移動させます。

cd
cd hoge.xsrv.jp/public_html
mv html/in* .
mv html/.htaccess .
mv html/robots.txt .

→今回はweb.configは不要なため移動させていません。

.htaccessの削除、.htaccess.sampleのリネーム

移動した.htaccessを削除し、public_html直下に存在している.htaccess.sampleに置き換えます。

rm .htaccess
mv .htaccess.sample .htaccess

index.php、install.phpの書き換え

  • index.phpの書き換え
vi index.php

を実行し、27行目のコメントアウトされている箇所を変更し、26行目をコメントアウトます。

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
require __DIR__.'/../autoload.php';
//require __DIR__.'/autoload.php';

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
//require __DIR__.'/../autoload.php';
require __DIR__.'/autoload.php';
  • install.phpの書き換え
vi install.php

を実行し、31行目のコメントアウトされている箇所を変更し、30行目をコメントアウトします。

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
require __DIR__ . '/../autoload.php';
//require __DIR__ . '/autoload.php';

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
//require __DIR__ . '/../autoload.php';
require __DIR__ . '/autoload.php';

autoload.phpの変更

  • autoload.phpの書き換え
vi autoload.php

を実行し、36行目のコメントアウトされている箇所を変更し、35行目をコメントアウトします。

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
define("RELATIVE_PUBLIC_DIR_PATH", '');
//define("RELATIVE_PUBLIC_DIR_PATH", '/html');

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
//define("RELATIVE_PUBLIC_DIR_PATH", '');
define("RELATIVE_PUBLIC_DIR_PATH", '/html');

.htaccessの追加

公開ディレクトリをEC-CUBEルート直下にしたため、このままだと見せる必要のないディレクトリまで見えてしまいます。
そのため、以下の.htaccessファイルを各ディレクトリ直下に配置してくだsだい。

order allow,deny
deny from all

この内容を srctestsvendorティレクトリ直下に配置します。(appディレクトリ直下には既に存在)

EC-CUBEのインストール

http://hoge.xsrv.jp とアクセスし、インストール作業が出来れば対応完了です。

以上がhtmlをURLから付けさせない方法となります。

他のレンタルサーバでもドキュメントルート部分(public_html)を読み替えて行えば同じ方法でURLからhtmlを付けなくする事は可能ですので是非お試しください。

インストール後もhtmlディレクトリを削除する事は可能ですが、非常にめんどくさいためインストール前に設定するのがオススメです。

この方法で上手く動かないという方はコメントください。