熊本のWeb制作会社のエンジニアのググる生活

地方のWEB制作会社(元:佐賀・今:熊本)で働く、エンジニア。
HTML、CSS、JavaScript、PHP、Smary、Twig、EC-CUBE、WordPress、Movable Type 等でお仕事してます。
ググって解決した話や、自分で考えて分かったことなどを、自分用にメモとして残すブログです。

※URLがあったら元記事を参照推奨です!
※ほとんどの事は検証はしていますが、あくまでも参考程度にお願い致します!
※記載が不正確であったことにより生じたいかなる損害に関しても、当ブログは責任を負いかねます。自己責任でよろしくおねがいいたします。

試したバージョン 4.0.3 になります。

EC-CUBE3 の 商品・カテゴリー・規格を初期化の SQL に、
4系では dtb_tag が増えたようです。
ついでにお知らせも初期のは不要なので、追加してみました。

下記の SQL を phpMyAdmin の SQL ウィンドウから実行すると、
商品・カテゴリー・規格・ニュースの初期入力が削除出来て、
ID1 から気持ちよく始めることができます。

うまくいかない場合は、「外部キーのチェックを有効にする」のチェックを外す必要があります。

SET FOREIGN_KEY_CHECKS=0;

TRUNCATE TABLE `dtb_category`;
ALTER TABLE `dtb_category` AUTO_INCREMENT = 1;

TRUNCATE TABLE `dtb_class_category`;
ALTER TABLE `dtb_class_category` AUTO_INCREMENT = 1;

TRUNCATE TABLE `dtb_class_name`;
ALTER TABLE `dtb_class_name` AUTO_INCREMENT = 1;

TRUNCATE TABLE `dtb_news`;
ALTER TABLE `dtb_news` AUTO_INCREMENT = 1;

TRUNCATE TABLE `dtb_product_category`;
ALTER TABLE `dtb_product_category` AUTO_INCREMENT = 1;

TRUNCATE TABLE `dtb_product_class`;
ALTER TABLE `dtb_product_class` AUTO_INCREMENT = 1;

TRUNCATE TABLE `dtb_product_image`;
ALTER TABLE `dtb_product_image` AUTO_INCREMENT = 1;

TRUNCATE TABLE `dtb_product_stock`;
ALTER TABLE `dtb_product_stock` AUTO_INCREMENT = 1;

TRUNCATE TABLE `dtb_product_tag`;
ALTER TABLE `dtb_product_tag` AUTO_INCREMENT = 1;

TRUNCATE TABLE `dtb_product`;
ALTER TABLE `dtb_product` AUTO_INCREMENT = 1;

TRUNCATE TABLE `dtb_tag`;
ALTER TABLE `dtb_tag` AUTO_INCREMENT = 1;

SET FOREIGN_KEY_CHECKS=1;

SQL が問題なく処理された後、管理画面にて商品などが消えていることが確認できます。
ただし、商品管理>カテゴリ管理についてはキャッシュが残っているので、一覧が表示されてしまいます。
これは、コンテンツ管理>キャッシュ管理からキャッシュ削除を実行すると、消すことができます。


※実行の前にバックアップをとってください。
※ご利用については自己責任でお願いいたします。

4系で開発中にキャッシュ削除を試みると、
PHP の Fatal error が出てしまうことが頻発しました。

結論から言うと、
composer.lock を削除していたのが原因でした。

EC-CUBE の圧縮フォルダを解凍したときに、
無駄だと思うファイルは消すようにしているのですが、
それが仇となりました。

Xampp などのローカル環境やエックスサーバーなどのレンタルサーバーでは、
app/
bin/
html/
src/
var/
vendor/
.htaccess
composer.json
composer.lock
index.php
maintenance.php
robots.txt
以外は削除しても今のところ動いています。
(これで大丈夫なのかは検証中...)

ルートにファイルがたくさんあるとわからなくなるので、
なるべくすっきりさせたいところです。

ちなみに composer.json を削除すると、
キャッシュ削除しなくても Fatal error で閲覧することができなくなります。

ここ1~2年くらいは3系を使ってましたが、
4系もリリースされて1年が経過しました。
その間に様々なプラグインも出てきて、動作も安定しているということから、
ついに4系を使ったお仕事も始めました。
管理画面が格段に見やすくなっていて、とてもいいと思います!!
さらに URL から html が標準でなくなっており、素晴らしく進化しているのでうれしい限りです!

不満点をあげるなら、
・情報がまだ少ない(エラー解消に時間がかかる)
・私の環境(Windows10 × Xampp)ではキャッシュ削除後からの最初のページ表示が非常に遅いこと(30秒くらいかかる...)
などなどと言ったところでしょうか。

そして記事タイトルの twig 関数なども結構探す羽目になりました...。

3系はこうでしたが
{{ url(app.config.user_data_route, {'route': 'hoge'}) }}
↓↓↓

4系はこう!
{{ url(eccube_config.eccube_user_data_route, {'route': 'hoge'}) }}
地味に記述が長くなりましたが、
これで無事に新規追加ページ(user_data)にも twig 関数を使ってリンクを貼ることができました!

4系の公式ドキュメントにも書いていないので、ちょっと辛いですね。
下記のフォーラムの投稿に救われました!

will-change や transform なども試してみてもダメな場合、
position: fixed; が足を引っ張っている可能性があります。

position: fixed; の使用の頻度を減らすか、
必要ない場合は display: none; で隠すかなどの処理をすることで、
負荷が軽減して改善することがあります。

または、アニメーションさせている要素の親要素を
overflow: hidden; すると解決することも。

本記事は EC-CUBE 3.0.17 でお送りいたします。

まずは株式会社U-Mebiusさんのこちらの記事を真似してみると、カスタマイズの仕組みがわかりやすかったです!
EC-CUBE3カスタマイズ - 管理画面に新規ページとメニューを追加する方法
https://umebius.com/eccube/insert_new_page_and_menu_in_admin_panel/

以下は追加・編集したファイルのただのメモ書きです。

設定>基本情報設定>ショップマスターを模倣して、
設定>基本情報設定>〇〇設定を作ります。

〇〇設定の英字は hoge で想定します。

■新規で追加したファイル
/app/template/admin/Setting/Shop/hoge.twig
/src/Eccube/Controller/Admin/Setting/Shop/HogeController.php
/src/Eccube/Entity/Hoge.php
/src/Eccube/Form/Type/Admin/HogeType.php
/src/Eccube/Repository/HogeRepository.php
/src/Eccube/Resource/doctrine/Eccube.Entity.Hoge.dcm.yml

■既存で編集したファイル
/src/Eccube/ControllerProvider/AdminControllerProvider.php
/src/Eccube/Event/EccubeEvents.php
/src/Eccube/Resource/config/nav.yml.dist
/src/Eccube/Resource/locale/message.ja.yml
/src/Eccube/ServiceProvider/EccubeServiceProvider.php

■データベース
dtb_hoge を追加


ファイル数が多くて、よくわかっていないとごちゃごちゃして難しいです... (><)

今回はショップマスターを模倣したので、それに使われている、
BaseInfo, base_info, shop_master あたりを grep 検索しては、
真似して真似して・・・という感じで、
/app/log/admin_site_日付.log に書き出されるエラーログを見ながら、
カスタマイズしていく流れです。

無事にできると、非常に嬉しい、楽しい!

本番環境にある EC-CUBE3 の環境を、
新しく作る開発環境へコピーしてくる、私的メモです。

@本番環境
・データベースをエクスポート
・商品画像 upload/ をダウンロード
・(本体カスタマイズをしているなら) src/Eccube/ をダウンロード
・プラグイン app/Plugin/ をダウンロード
・テンプレート app/template/ をダウンロード
・設定ファイル app/config/eccube/config.yml の auth_magic をメモっておく

@新しい開発環境
・まずは普通に EC-CUBE3 をインストール
・ダウンロードしたモノを各所に上書き
・設定ファイル app/config/eccube/config.yml の auth_magic をメモったモノにする
・データベースのテーブルを一度すべて削除して、エクスポートしたデータをインポート
・オーナーズストア>テンプレートから使用するテンプレートに選択し、コンテンツ管理のキャッシュを削除を実行
↑↑ ここまででとりあえずは見れるようになると思います。

(プラグイン)
・有効化になっているものの、認識がされていない状態です。
・上でダウンロードしたモノが入っている状態で、何か一つのプラグインを無効化→有効化すると、一括で認識されて使える状態になります。
・クレジットカードのプラグインは削除しておいたがいいかなと思います。
↑↑ これでプラグインも対応できます。


これで問題なく動作いたしました。
あとは、設定のメールアドレスを変えたりなどをお忘れなく。

開発環境→本番環境でも基本は同じだと思うので積極的に楽していければと思います!


↓↓ 今度はこれを試してみたい!

ビルトインウェブサーバーで簡単環境構築

WordPress にはいくつかキャッシュプラグインがありますが、
その中でも使いやすい WP Super Cache を好んで使用しています。

通常画面の投稿やアーカイブなどは特に気にせずキャッシュを生成してくれていたのですが、
部分的にインクルードしているファイルがどうしてもうまくいかず試行錯誤するはめに・・・。

結論から言うと、 </html> タグがないと、キャッシュを生成してくれませんでした。
このタグをトリガーにしているのでしょう。

その後も </body> や <head> タグなども付与してみましたが、
キャッシュ生成を行うだけなら </html> の閉じタグだけでOKでした。

プラグインの設定のデバッグで、コメントアウトを残すようにしているならば、
</html> の閉じタグだけではなく、 <html> の開始タグも必要でした。

ピンポイントに単体だけ抜き出して、テストする・・・。
出来上がっているものだったり、作りかけで一部だけうまくいかない・・・ってときは、
単体テストをやる・・・。

当たり前だと思いますが、ズボラな性格のため、
切り分けてテストをやらずに、プログラム全体の中で、
試行錯誤をやってしまい、解決の糸口を見つけるまですごく時間がかかったので、
自分へのメモとして m( _ _ )m

PHP でも JavaScript でも CSS でも HTML でも、
困ったり怪しいときは単体テスト。

以前から自分用のテンプレートを持っていましたが、 だいぶ古くなった感じもあったので、それを気により汎用的に改善して、 ついでに思い切って公開してみました!

内部では、 Qdmail, Qdsmtp を使用しています。

ドキュメントは準備中ですが、設定ファイルである config.php にコメントを盛っているので、
設定は可能かと思っています…。
https://github.com/mhkkr/Functions-Form
いろいろ改善予定です。どんどん使いやすくしたいです!

EC-CUBE 4系 が発表されましたね!
マスターアップは 10月とのことで、私もさっそくデモを試してみました。

3系からかなり進化していて、すごく乗り換えたいです...。
なかでも管理画面は見やすく、使いやすくなっており、
4系を操作したあと、3系を操作するとすごくイライラします(笑)

ということで、少しでも 3系を快適に使いたく、
管理画面をカスタマイズしてみたので紹介します。


確認は 3.0.16 で行っています。


サイドナビのCSSを改善

3系のデフォルト、見辛いですよね。
4系だとそれを反省して(?)、綺麗になっています。

なので、3系でも真似をして綺麗にしてみました。

eccube3admin_css

変更点は、
・子ナビのボーダーを取り、
・どの親の配下であるかわかりやすくするために背景色を白へ、
・開いてる親の文字色とウェイトを変更しわかりやすく、
・さらに現在アクティブであるナビを強調しました。

CSSはこんな感じに。

<style>
    #side > .nav li {
        transition: background-color .3s;
    }
    #side > .nav li a {
        transition: color .3s, font-weight .3s;
    }
    #side > .nav li a .cb {
        transition: color .3s;
    }
    #side > .nav li.active > a {
        color: #3F5467;
        font-weight: 700;
    }
    #side > .nav li.active > a .cb {
        color: inherit;
    }

    #side > .nav > li:not(:nth-child(6)):not(:nth-child(7)).active {
        background-color: #fff;
    }
    #side > .nav > li:not(:nth-child(6)):not(:nth-child(7)) > ul > li.active > a,
    #side > .nav > li:not(:nth-child(6)):not(:nth-child(7)) > ul > li.active > a:hover  {
        background-color: #3F5467 !important;
        color: #fff;
    }
    #side > .nav > li:not(:nth-child(6)):not(:nth-child(7)) > ul > li {
        border: none;
    }

    #side > .nav > li.active li.active {
        background-color: #fff;
    }
    #side > .nav > li > ul > li.active li.active > a,
    #side > .nav > li > ul > li.active li.active > a:hover  {
        background-color: #3F5467 !important;
        color: #fff;
    }
    #side > .nav > li > ul > li > ul {
        background-color: transparent !important;
    }
    #side > .nav > li > ul > li > ul > li {
        border: none;
    }
    #side > .nav > li > ul > li > ul > li > a:not(:hover) {
        background-color: transparent !important;
        opacity: 1;
    }
</style>

:not(:nth-child(6)) と :not(:nth-child(7)) は、
ナビゲーションの増減によって値が変わるのが注意です。
デフォルトの内容だとそのままで大丈夫です

上のCSSを dashboard.css の一番下に追記するか、
管理画面の default_frame.twig の <//head> 直前に書くとよいかと思います。


商品登録画面のアコーディオンをすべて開かせておく

個人的にどうして表示・非表示のアコーディオンになっているのかわからないのですが、
商品カテゴリやタグ、詳細な設定、フリーエリアなどなどがアコーディオンになっていて開閉できます。
基本的にページを表示したときはそれが閉じており、編集する場合はワンクリックが必要です。
商品が数個程度なら問題ないですが、数が増えてくるとドンドン煩わしくなってきます;;

そこで、編集ページを表示したときに全部開いている状態にしてみました。

<script>
  $(function() {
      // 最初から開ける
      $('#detail_wrap .toggle').click();
  });
</script>

この jQuery を管理画面の product.twig の {% endblock javascript %} 直前に追記します。


商品マスター、受注マスター、会員マスターの初期表示

2系でも同じ悩みがありましたが、商品・受注・会員のマスターの初期表示は、
最小限のフォーム欄と検索ボタンのみです。
一覧を表示させるには検索ボタンを押さなければなりません。
これも最初の数回は良くても、だんだんと面倒になってくる作業の一つです...。

4系では、これを不便に思っていたのか改善されておりましたが、
3系でも依然としてこの問題が残っていました。

3系でも検索ボタンを押さずに一覧を表示させたい!ということで、
PHP にちょっと追記してあげると解決できました。
当初は4系を参考にカスタマイズしようと試みましたが、ググってしてみると、
フォーラムに解決案がありました! → https://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=18643&forum=10

追記するコードはたったこれだけ、
if (!$page_no) {
    $page_no = 1;
}

ファイルと場所は、
・CustomerController.php
・OrderController.php
・ProductController.php
の if (is_null($page_no) && $request->get('resume') != Constant::ENABLED) { の直前になります。

これでマスターのページを開いたときに一覧が表示されます!
ただ修正後、F5更新だとうまく行かなかったので、
一度だけ検索ボタンを押す必要があるみたいで、そこだけ注意が必要です。

このページのトップヘ