【ECCUBE2】スパム対策としてお問合せフォームにreCaptchaを導入

定期的に中国から来る迷惑なお問合せフォームを利用したスパム。

スパムの一例↓

このように、メールアドレス欄に不特定多数のメールアドレスを指定し、自動返信機能を利用してメールを送り付けている。

今までは接続元IPを特定して、apacheの設定ファイルなり.htaccessで個別にアクセスを拒否するなど、対症療法をしていましたが、業務の負担になりつつあるので、導入することにしました。

結果として効果はかなりあったようで、対策後およそ1か月、未だスパムによる被害は1回もうけていません。

reCaptchaをECCUBE2のお問合せフォームに導入する手順は以下の通りです。

サイトキーとシークレットキーの取得

  1. reCaptchaにアクセスし「Admin console」を開きます。Googleアカウントが必要になります。
  2. 必要事項を入力し、サイトキーとシークレットキーを取得します。(今回は「」を採用します。)

テンプレートを修正

ECCUBE2のお問合せフォーム(確認画面)のテンプレートファイルを修正します。

スマホページも運用している場合はそちらのテンプレート(data/Smarty/templates/sphone/contact/confirm.tpl)も同様に修正します。

PHPファイルの修正

お問い合わせの受付・自動返信メール送信処理を行うPHPファイルを修正します。

確認

確認画面の右下に、以下のようなreCAPTCHAアイコンが表示されていれば、適用完了です。

 

参考サイト)

 

ECCUBE3で商品に新しい項目を追加

EC-CUBE 3.0.16
MySQL 5.6.19
PHP 5.6.36

例として、商品名かな(name_kana)という項目を追加する場合。

1. テーブルへのカラム追加
dtb_productテーブルへ”name_kana”という名前のカラムをtextタイプ(またはvarchar)で追加。また、NULLを許可にする。

2. エンティティファイルに、セッターゲッター追加
/src/Eccube/Entity/Product.php

以下のように追記。

 

3. データベース定義ファイルへカラム追加
/src/Eccube/Resource/doctrine/Eccube.Entity.Product.dcm.yml

fields一覧にname_kanaの項目を追加。データベースとエンティティクラスを接続するのがdcm.yml(Doctrineマッピングファイル)。これにより、Productエンティティのname_kanaとdtb_productのname_kanaカラムが接続される。

ちなみに、EC-CUBE3が採用しているSymfonyの標準ORM、Doctorineで設定できるフィールドタイプは以下の通り。

 

4. フォーム定義ファイルへの項目追加
/src/Eccube/Form/Type/Admin/ProductType.php

下記のように、管理画面の商品登録フォームへ定義を追加。

上記の書き方で入力必須とならない場合(未入力で保存した際にエラーとならない)場合は、下記のようにする。

 

なお、フォームの入力形式として整数型としたい場合は、第2引数に”integer”, 浮動小数点型としたい場合は、第2引数に”number”を指定するなどして対応。

このほかにも選択型(choice型)も指定できる。詳細は公式ドキュメントを参照。

 

5. 管理画面(商品情報登録画面)へフォーム表示
/app/template/admin/Product/product.twig

フォームを表示したい場所に下記のように記述。

form_rowは、form_label、form_widget、form_errorsを同時に出力する関数。テキストの入力幅を小さくしたい場合などは、form_label、form_widget、form_errorsに分割するなどしてCSSで対応。

 

6. 商品詳細ページへの表示
/app/template/default/Product/detail.twig

フロント側で出力。好きな場所に下記のように記載。未登録であれば何も出力されない。

 

以上。

 

参考URL)

 

Chrome使用時にfocusイベント内でalertするとダイアログが延々と繰り返される場合の対策

簡単な処理やデバッグ時などでは、まだまだ重宝するalert()。

例えばよくあるこんな処理。

ところがGoogle Chromeを使用した場合、「Hello!!」のダイアログを消しても消しても、延々とダイアログが表示し続ける無限ループが発生する場合がある。

アラートを出した後に、自動的に要素に対してフォーカスが行われ、その結果処理の繰り返しになるらしい。

なので、単純な解決策としては、アラートを出した後に、フォーカスを外してやればよい。

 

なお、アラート後、また同じ要素にフォーカスさせ、かつ無限ループさせない方法はこちらを参照。

 

EC-CUBE(2系)で管理者権限の設定

動作確認はEC-CUBE2.13.2。結構古いけど。

例えば一部のメンバーは、商品管理メニューしか操作できないようにしたい時とか。

    1. まず「システム設定」→「マスターデータ設定」から「mtb_authority」を選択。
    2. 「追加のデータ」欄に、IDを指定(例えば2)し、値に権限名(例えば「商品管理者」)を入力。→「この内容で登録する」
    3. 「システム設定」→「マスターデータ設定」から「mtb_permission」を選択。
    4. 「基本情報管理」以下にアクセスできなくする場合、「追加のデータ」欄に、ID「/admin/basis/」、値「1」を設定。(この値が、ログインしたメンバーのID以下ならアクセス可能になる。ここを「2」にすれば追加した商品管理者もアクセス可能になる。)
    5. 他にもアクセス不可にしたいページがあれば、同様に「mtb_permission」に追加する。
    6. 「/data/class/SC_Session.php」を編集。
    7. 「/data/class/pages/error/LC_Page_Error_DispError.php」を編集。
    8.  「/data/Smarty/templates/admin/login_error.tpl」を編集。

以上。

  1. さらにメニューを非表示にしたい場合は、こちらなどを参照。

 

参考URL)

ブラウザで拡大表示したときの画像が右側に寄ってしまう現象の修正

比較的横幅の広い、中央寄せしている画像をサイトに掲載している場合、ホイールスクロールなどでサイトを拡大していくと、画像の幅が画面からはみだしたところで、画像が左端が画面の左端に合った状態で拡大されてしまう。

したがって、PCモニタの解像度によっては、デフォルト縮尺の状態でも、画像が中央から右にずれたような表示となってしまう。

この場合は、leftプロパティとネガティブマージンで対応する。

(imgがブロック要素であればimgの方に指定してもよろしいかと思う。)

 

動作確認ブラウザ

  • chrome 61.0.3163.100
  • Firefox 56.0.1(64bit) 他

 

参考サイト)