Blog

ブログ

【ECCUBE】会員登録時のカナを自動入力にしたい

最近これ便利だなっていうjavascriptプラグインを見つけたので紹介したいと思います。
開発者が嬉しいというより使っていただくユーザさんに便利なプラグインです。
名前を入力する場合は大抵フリガナも入力する欄が設置されていると思いますが同じことを2回入力するのって地味にめんどくさいと思うんです。
そんな手間を少しでも楽にしたい時はぜひ使ってみてください。
ECCUBEのバージョンには依存しないので、2系〜4系どこでも使用できるかと思います。
※今回は4系に実装します

autokana

https://github.com/harisenbon/autokana

こちら日本語入力に対するフリガナを自動的に別フィールドに記入するJQueryプラグインになります。
注意点も少しあります。
・keydownで発火するためコピペなどでは使えません
・入力されている文字を読み取ってカナに変換しているわけではないのでタイポした場合はカナに文字が残ってしまう

ここからは設置方法を説明します。とっても簡単です。

まず↑のリンクから.jsをダウンロードしhtml/user_data/jsに設置

Twigファイルを修正

app/template/default/Entry/index.twig

<script src="{{ asset('assets/js/autokana-master/jquery.autoKana.js', 'user_data') }}"></script>

<script>
    $(function() {
        $.fn.autoKana('input[name="entry[name][name01]"] ', 'input[name="entry[kana][kana01]"]', {katakana:true});
        $.fn.autoKana('input[name="entry[name][name02]"] ', 'input[name="entry[kana][kana02]"]', {katakana:true});
    });
</script>

これだけです!

とってもかんたんですね♪

では実際に名前を入力してみましょう。

 

ちゃんとカナに入力されているのがわかりますね!

すぐできますのでぜひお試しください

【EC-CUBE4系】環境変数を設定する際にハマった話

EC-CUBE4 の Docker環境で環境変数を設定する際に、思わぬ壁にぶち当たりました。

services.yaml に記述されている設定内容を、環境ごとに分けるため、環境変数から取得するようにしたかったのです。
クレジット決済の3Dセキュアに関する設定なので、3D_SECURE_SETTING といった感じの名前で環境変数を登録し、設定として取得するようにしました。

docker-compose を使用する環境で環境変数を登録するには、docker-compose.dev.yml の environment に記述します。

services:
  ec-cube:
    environment:
      3D_SECURE_SETTING: "my_value"

環境変数を設定ファイル services.yaml で取得するには、’%env(環境変数名)%’ とします。

parameters:
  my_setting: '%env(3D_SECURE_SETTING)%'

以上で、コントローラー等で

$this->eccubeConfig['my_setting']

とすれば、”my_value”が読み取れるはず、が、以下のエラーが発生しました。

Environment variable not found: “3D_SECURE_SETTING”

何度も設定方法を確認し、コンテナの再起動とキャッシュクリアを繰り返すも虚しく時間がすぎるだけでしたが、ふと、「この変数名…?」と気づきました。
数字で始まる変数名は、多くのプログラミング言語で許可されていません。
また環境変数の命名規則も同様なようです。
PHPのコーディングをしている時はほぼ無意識的に避けて命名していたのですが、設定ファイル内でのこととあってか、頭から抜けていました。

英字から始まる環境変数名にすることで、無事取得できました!
イージーなミスですが、油断してるとハマりますね。

【ECCUBE4】eccubeでenumを使いたい!

eccubeでenumを使いたい!

ECcubeでは固定値などはMasterにレコードを追加して、
使いたい場合は都度DBからレコードを検索して使用しているかと思います。

ですがいちいちDBに接続&検索をして使うのは…という場合にこんなやり方もあります。
enumの追加&使用方法を簡単ですがご紹介したいと思います。

まず、Customize配下にEnumディレクトリを追加

下記のようなファイルを作成

<?php
namespace Customize\Enum;
/**
* 会員ランク
*/
enum CustomerRankType: string
{
  case ROOKIE = ‘1’;
  case BRONZE = ‘2’;
  case SILVER = ‘3’;
  case GOLD = ‘4’;
  case PLATINUM = ‘5’;
  case DIAMOND = ‘6’;
  case MASTER = ‘7’;
  public function getLabel(): string
  {
   return match ($this) {
     self::ROOKIE => ‘ルーキー’,
     self::BRONZE => ‘ブロンズ’,
     self::SILVER => ‘シルバー’,
     self::GOLD => ‘ゴールド’,
     self::PLATINUM => ‘プラチナム’,
     self::DIAMOND => ‘ダイアモンド’,
     self::MASTER => ‘マスター’,
    };
  }
  public static function getTypeList()
  {
   $allList = [];
   foreach (self::cases() as $item) {
     $allList[$item->getLabel()] = $item->value;
   }
   return $allList;
  }
}

使用方法ですが、例えばFormTypeで使用する場合は下記のようにすれば使用できます。

->add(‘customer_rank’, ChoiceType::class, [
‘required’ => false,
expanded’ => false,
‘multiple’ => false,
‘placeholder’ => ‘選択してください’,
‘choices’ => CustomerRankType::typeList(),
])

Twigにはこんな感じです

<div class=”row mb-2″>
  <div class=”col-3″>
    <span>{{ ‘会員スペシャルランク’|trans }}</span>
    <span class=”badge bg-primary ms-1″>{{ ‘admin.common.required’|trans }}</span>
  </div>
  <div class=”col”>
    <div class=”row”>
      <div class=”col”>
        {{ form_widget(form.customer_rank) }}
      </div>
    </div>
  </div>
</div>

こんな感じで表示することができました。

ぜひ機会があればですが、検討してみてください。

【Eccube3系】キャッシュクリアコマンドでプラグインのキャッシュが消えないお話

EccubeではtwigやDoctrieで使用されているキャッシュをクリアする方法が、大きく2つあります。

  1. 管理画面でキャッシュクリア
    • コンテンツ管理のキャッシュ管理 で削除対象をチェックしてクリア
  2. キャッシュクリアコマンドでクリア
    • 3系だと下記コマンドですね
      • php app/console cache:clear
      • ※このコマンドを実行する際は、適切なユーザーで行う必要があります

私の参画していた案件ではコードがデプロイされると自動的にキャッシュクリアコマンドが実行されたので、(2)の方法でキャッシュクリアをしていたことになるのですが、それだとPluginのキャッシュがクリアされませんでした。

ということでキャッシュクリアコマンドでPluginのキャッシュもクリアさせる方法です。

  • 参考
    • https://github.com/EC-CUBE/ec-cube3/blob/3.0/src/Eccube/Util/Cache.php
/src/Eccube/Util/Cache.php



public static function clear($app, $isAll, $isTwig = false)
{
    $cacheDir = $app['config']['root_dir'].'/app/cache';

    $filesystem = new Filesystem();
    if ($isAll) {
        $finder = Finder::create()->in($cacheDir)->notName('.gitkeep');
        $filesystem->remove($finder);
    } elseif ($isTwig) {
        if (is_dir($cacheDir.'/twig')) {
            $finder = Finder::create()->in($cacheDir.'/twig');
            $filesystem->remove($finder);
        }
    } else {
        if (is_dir($cacheDir.'/doctrine')) {
            $finder = Finder::create()->in($cacheDir.'/doctrine');
            $filesystem->remove($finder);
        }
        if (is_dir($cacheDir.'/profiler')) {
            $finder = Finder::create()->in($cacheDir.'/profiler');
            $filesystem->remove($finder);
        }
        if (is_dir($cacheDir.'/twig')) {
            $finder = Finder::create()->in($cacheDir.'/twig');
            $filesystem->remove($finder);
        }
        if (is_dir($cacheDir.'/translator')) {
            $finder = Finder::create()->in($cacheDir.'/translator');
            $filesystem->remove($finder);
        }
        // pluginディレクトリを対象に追加ここから
        if (is_dir($cacheDir . '/plugin')) {
            $finder = Finder::create()->in($cacheDir . '/plugin');
            $filesystem->remove($finder);
        }
        // pluginディレクトリを対象に追加ここまで

    }

    if (function_exists('opcache_reset')) {
        opcache_reset();
    }

    if (function_exists('apc_clear_cache')) {
        apc_clear_cache('user');
        apc_clear_cache();
    }

    if (function_exists('wincache_ucache_clear')) {
        wincache_ucache_clear();
    }

    return true;
}

カスタマイズ箇所は「pluginディレクトリを対象に追加ここから」「pluginディレクトリを対象に追加ここまで」とコメントしている間の4行のみです。(コメント含めると6行)

「キャッシュクリアコマンドで全てのキャッシュファイルは削除される」と思い込んでいましたが、デフォルトではPluginは対象外のようです。

ちなみに、--allをつけてphp app/console cache:clear --allで実行するとapp/cache配下全てがクリアされるので、Pluginのキャッシュファイルも削除されますが、これは稼働中のサーバでは実行してはいけません。
デフォルトではapp/cache配下にセッションファイルも格納しているためです。

cacheというディレクト名なので削除可能なファイルが置かれている印象を受けますが、実はセッションのようなファイルが入っている、特にカスタマイズしている場合はセッション以外にも削除不可なファイルが配置されている可能性もありますので、allオプションはよほど自信が無い限りは利用しないほうが良いと思います。

以上、「キャッシュクリアコマンドで全てのキャッシュファイルは削除されると思ったらプラグインは別だった」でした。

【ECCUBE4系】商品価格を税込みで登録したい場合のカスタマイズ

ECCUBEでは、商品の価格は税抜の本体価格を登録する仕様になっています。

しかし元々税込価格で管理していた場合、端数の処理を考慮しつつ税抜価格を計算して登録しなければなりません。

それならはじめから税込価格を登録したい、というケースで実施したカスタマイズ方法がこちらです。

内容としてはシンプルに、商品の税表示区分はすべて「税込」とし、外税額を求めるメソッドで必ず0を返すようにしてしまうというものです。(確認したECCUBEバージョンは4.2です。)

app/Customize/Service/OrderHelperExtension.php を作成し、OrderHelper の getTaxDisplayType を上書き宣言します

<?php

namespace Customize\Service;

use Eccube\Entity\Master\TaxDisplayType;

class OrderHelperExtension extends \Eccube\Service\OrderHelper
{
    /**
     * 税表示区分を取得する.
     * 価格を税込みで登録するため、常に"税込"を返す
     *
     * @param $OrderItemType
     *
     * @return TaxDisplayType
     */
    public function getTaxDisplayType($OrderItemType)
    {
        return $this->entityManager->find(TaxDisplayType::class, TaxDisplayType::INCLUDED);
    }
}

app/Customize/Service/TaxRuleServiceExtension.php を作成し、TaxRuleService の getTax を上書き宣言します

<?php

namespace Customize\Service;

class TaxRuleServiceExtension extends \Eccube\Service\TaxRuleService
{
    public function getTax($price, $product = null, $productClass = null, $pref = null, $country = null)
    {
        // 価格を税込みで登録するため、外税計算は常に0を返す
        return 0;
    }
}

app/Customize/Resource/config/services.yaml でサービスの上書きを設定します。

services:
  Customize\Service\OrderHelperExtension:
    autowire: true
    decorates: Eccube\Service\OrderHelper
  Customize\Service\TaxRuleServiceExtension:
    autowire: true
    decorates: Eccube\Service\TaxRuleService

以上で、商品に登録した価格を税込みとして扱うことができます。

【注意】プラグインや独自カスタマイズで、上記で上書きしたメソッドを使わずに税額・税込価格を計算している場合があります。動作確認を行い、適切な修正を施す必要があります。

 

 

【shopify】初回のみ表示するポップアップ

個人情報同意などに使える、サイト内のどのページからでも初回だけ表示されるポップアップを作りたいと思います。
全ページなのでtheme.liquidに直接書く方法もあると思いますが、簡単に管理できるように新規セクションで作成してみます。

セクションを新規作成

カスタマイズボタンの横にある3点ボタンから、「コードを編集」を開きます。
sections>「新しいセクションを追加する」で空のセクションを作成します。

liquid編集

まず、jquaryを読み込ませます。CDNまたはassetsに必要なファイルを入れて読み込んでください。
次にCSSを追加します。このセクション内だけに適用されればいいので直接書いちゃいます。

{%- style -%}
  .popup {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    z-index: 1001;
    top: 0;
    left: 0;
  }
  .popup-content {
    width: 75vw;
    max-width: 750px;
    height: 40vh;
    background: white;
    border-radius: 4px;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  .close-btn {
    background-color: black;
    border-radius: 2px;
    color: white;
    text-align: center;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 1rem 2rem;
    display: block;
    max-width: 10rem;
    margin: 1rem auto;
    width: 100%;
  }
  .close-btn:hover, 
  .close-btn:focus {
      text-decoration: none;
      cursor: pointer;
      opacity: 0.8;
  }
  @media screen and (max-width: 768px){
    .popup-content{
      width: 80vw;
    }
  }
{%- endstyle -%}

そしてポップアップ本体です。

<div id="popup" class="popup">
  <div class="popup-content">
    <div>{{ section.settings.popup_text }}</div>
    <span class="close-btn">はい</span>
  </div>
</div>

今回は、localStorageでユーザーが訪問済みなのか否か判断させます。さらに「はい」のボタンクリックによって、visitedtrueになるようにしました。

<script>
  const keyName = 'visited';
  const keyValue = true;
  if (!localStorage.getItem(keyName)) {
      $('#popup').css('display', 'block');
      $('.close-btn').click(function(){
          $('#popup').css('display', 'none');
          localStorage.setItem(keyName, keyValue);
      });
  } else {
      $('#popup').css('display', 'none');
  }
</script>

最後にスキーマです。表示されるテキストはカスタマイズ画面から編集できるようにリッチテキストにします。これで改行や太字、リンクもできるので便利です。

{% schema %}
{
  "name": "ポップアップ",
  "class": "pop-section",
  "settings": [
    {
      "type": "richtext",
      "id": "popup_text",
      "label": "テキスト"
    }
  ],
  "presets": [
    {
      "name": "ポップアップ"
    }
  ]
}
{% endschema %}

セクションを設置

あとはカスタマイズ画面でセクションを差し込めば完成です。
特定のページのみであればテンプレートごとに設置しますが、全ページに適用したいので共通のヘッダー内に入れました。

このようなセクションが1つできれば、Cookieにしたり、販促案内やクーポン用にカスタマイズの幅が広がりそうです。

参考:https://into-the-program.com/execution-firsttime-access/

使用テーマ:Dawn 15.1.0

関東ITソフトウェア健康保険組合に加入しました

株式会社ジョーレンは、

2024年9月に「関東ITソフトウェア健康保険組合(ITS)」に加入しました。

 

かねてより会社独自の施策として、

インフルエンザ予防接種費用補助などを実施してきましたが、

ITSへの加入により、より総合的で充実した健康支援制度を提供できるようになりました。

 

メンバーの家族(被扶養者)への施策が手厚くなった点も、うれしいポイントです。

 

今後もメンバーが健康に、より長くジョーレンで働き続けられるよう、

社内制度の充実に努めて参ります。

 

念願の加入に、社長もにっこにこ。

 

【shopify】ヘッダーのハンバーガーメニューの配置を変更したい

テーマのデフォルトでは左側にハンバーガーメニューが配置されているけど、右側に置きたい。。
しかし、カスタマイズ画面ではロゴの配置くらいしか設定できない。。
ということで、今回はshopifyのDawnテーマ(15.1.0)でできるだけ簡単に実装したいと思います。

liquidで物理的に動かしてみる

そもそもヘッダーセクションではソースコードの兄弟要素が「ハンバーガーメニュー・ロゴ・アイコン」という順番で書かれているため、header.liquid内の該当箇所を入れ替えてみました。

ソースコード上は理想の順番になりました。
しかしブラウザを確認しても、あれ、変わりません。。

 

CSSをチェック

ヘッダーセクションの中身が大きく3つに分かれており、flexで並べられています。
base.cssで順番が指定されていました。navigationを一番右に移動させます。

CSSだけでハンバーガーメニューの位置を変更できました!
でも開閉が左のままで不自然なので調整が必要みたいです。

 

Base.css

.menu-drawerに以下を追加

transform: translateX(100%);
left: auto;
right: 0;

 

component-menu-drawer.css

.js details[open].menu-opening>.menu-drawerに以下を追加

transform: translateX(0%);

 

 

配置も挙動も理想の動きになりました。

Liquidファイルを編集しなくても、CSSで簡単にカスタマイズできることがわかりました。

 

参考:

・CSS: カスケーディングスタイルシート[justify-self]

https://developer.mozilla.org/ja/docs/Web/CSS/justify-self

・shopifyコミュニティ「Re: モバイル表示のハンバーガーメニュー位置を右に表示したい。(テーマ:Spotlight)」

https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAq-a/%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E8%A1%A8%E7%A4%BA%E3%81%AE%E3%83%8F%E3%83%B3%E3%83%90%E3%83%BC%E3%82%AC%E3%83%BC%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E4%BD%8D%E7%BD%AE%E3%82%92%E5%8F%B3%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%81%97%E3%81%9F%E3%81%84-%E3%83%86%E3%83%BC%E3%83%9E-spotlight/m-p/2646855

キックオフナイト2024

株式会社ジョーレン管理部のKanaです。

 

3月22日に昨年も利用させていただいた、

Link松戸店さんにて今年度のキックオフを開催致しましたのでご報告します。

ジョーレン社員やパートナーさんなど、総勢40名!!

遥々京都から参加したメンバーも。

 

さてさて、まずは社長・副社長からのお話でスタートです。

普段は社内にて行う全体MTGですが、この日はこちらで和やかに行われました。

普段と場所は違えど、一同真剣な顔つきです。

業績・今年度の予算・MVPの発表などなどがありました。

今期も社員一丸となって精進して参ります。

 

全体MTGも終了したところで

お次は社長の合図でお待ちかねの「乾杯~」です。

ソフトドリンクで乾杯の方も多かったです。

私はもちろんビール片手に乾杯~何杯飲んだかな?笑

皆さんの表情も和みます~

今回は飲み放題・ビュッフェ形式でお願いしました。

手作りのお食事が並びます。

写真を撮り忘れてしまいましたが…

手作りのデザートもありすぐにSold Outしてしまいました~

どれもおいしくいただきました。Link松戸店さんありがとうございました。

食事もそこそこに、いよいよダーツ大会のスタートです!!

10チームに分かれ、4人1チームでのトーナメント制です。

ドリンク片手に誰かが投げるたびに会場が沸いていました~

投げる時はみんな真剣そのものです!!

意外と上手なメンバーもいれば、

日頃の運動不足か「肩があがらなくて投げられない」なんてメンバーも。

私もおそらく20年近くぶり?のダーツでしたので、

ギャラリーの視線で最初は緊張しましたが、終始楽しくプレイ出来ました。

ちゃんと的に当たって良かった( ;∀;)

優勝チームは「チームY」でした~おめでとうございます!

商品は、昨年同様「社長と行く高級焼肉」!

高級焼肉にありつけるのなら、来年に向けて密かに練習しようかな。笑

ダーツ大会が終了した後は、各々好きなことをして時間を過ごしました。

ビリヤードや卓球で盛り上がっているかと思えば、お酒片手に語り合っているメンバーも。

最後に全員で記念撮影をしました!

普段リモートワークのメンバーが多いジョーレンですが、

年に数回こんなイベントで顔を合わせる機会もあります。

2024年もジョーレンワンチームで頑張っていこ!と思った夜でした。

 

ジョーレン社員旅行2023

少しばかり時が過ぎてしまいましたが、2023年11月、沖縄へ社員旅行に行って参りました。

思い返せば
2018熱海と初島へ
2019
千葉県台風被害の復興支援で房総へ(その後コロナ渦)
行っておりますが、今回の社員旅行はなんと飛行機で『沖縄』へ。
会社の成長を感じますね!

もちろん参加の強制は一切なく、行きたい人たちだけですが

今回は17人のメンバーが集まりました!
お仕事に影響の無いよう土日の2日間です。

普段からリモートワークが多めですから、なかなか会えないメンバーもいるので
たっぷり交流するチャンス♩slackで行きたい場所を募り、皆で計画を立てました。

初日の朝、なかなかの寒さの中 羽田空港に集合!
沖縄は暖かい予報ですが、、??

沖縄の有名ファーストフード店 A&Wの本店で昼食です。
不思議な注文機材やアメリカンな店構えにテンションがあがります。
たくさん頼んで良いとのことでしたがハンバーガーひとつでもかなりのボリュームでした♪

みんなが頼んだ名物のルートビア。
サロンパスの味がする飲み物で非常に新鮮&衝撃的なお味でした。

観光組とダイビング組で別れて行動するはずでしたが、この日は風が強く、予定していたダイビングは中止になってしまいまったので、

急遽調べて「おきなワールド」へ。

みんなで鍾乳洞を見たり
ヘビを担いだり

ハブとマングースショーを見て満喫させていただきました。

社長が最前列で、一番楽しんでいたのが印象的でした(笑)

それを撮影する社員たち・・・(^^)

 

そして夜。

国際通りど真ん中のホテルに宿泊です。

カチャーシーなどのステージを見ることのできる居酒屋さんで

豪華なコースをいただきました。

ありがとうございます!!

恒例の 社長音頭のもとみんなで一本締めをして、楽しい1日を終えました・・・

と思いましたが、宴会の後も国際通りはまだまだ営業中で賑わっていたので、お土産を買ったり2次会に行ったり各々楽しみました!

(噂によると瀬長島までサウナに行った面々もいたとか?)

 

– – – – – – – – – – – – – –

 

2日目はグループに分かれての行動でした。

私のいたグループでは 

ちゅら海水族館 〜 古宇利島 〜 なかむらそば(沖縄そば有名店) 〜 ウミカジテラス 

を回りました。

ジンベエザメの大きさには圧倒されて、普段の案件の細々した悩みも吹っ飛びそうです。

そして初めは空を覆っていた雲も、徐々に晴れて青い沖縄の海を拝むことができました。

もう帰ったらお仕事頑張るしかありません。

 

副社長がドローンで空から撮影もしてくれて

素敵な思い出が残せました(^^)

 

最後のウミカジテラスは空港のそばなのでギリギリまで遊べるだろうと言うことで、

みんなで本当のギリギリまでグルメを堪能。

そして素敵な景色に非日常を感じて大いにストレス発散させていただきました。

来年は好調であればまた飛行機で北の方へ・・?と言うお話もあったので、

是非とも実現できるよう頑張っていきたいと思います。