コイン獲得モーダルをサクッと作る

コイン獲得モーダル

実際の動作はこちらです。　　　↓　↓　↓

クリック回数: 0

1. はじめに

ERPNextには標準で以下の 5つのカスタマイズ手段 があります。

カスタムフィールド
カスタムフォーム
クライアントスクリプト
サーバースクリプト
アプリ

用途に応じて段階的に拡張でき、現場に寄り添った調整が可能です。

本記事では フロント体験を軽量・高速に変えられるクライアントスクリプト に絞り、
エネルギーポイント獲得時に「コイン獲得モーダル」(冒頭イメージ)を表示する方法を解説します。

外部ライブラリを使わず、ERPNext標準のモーダル機能と短いJavaScriptだけで実現します。

またERPNextは 本体とカスタムの分離、および 公式Hook/APIによる拡張設計 により、アップデートに強い「壊れにくいカスタマイズ」を実現できます。
（壊れない仕組みの詳細は別記事壊れないカスタマイズをご覧ください。）

では、まずは最小構成でクライアントスクリプトを体験し、段階的に理解を広げていきましょう。

2. クライアントスクリプトとは？

クライアントスクリプトとは、ERPNextの画面（ブラウザ）上で動作する JavaScriptを埋め込む仕組み です。

イメージとしては、kintoneのJSカスタマイズやSalesforceのUI拡張（LWC/Aura, JSボタン）と同じで、フォームイベントにフックして挙動や見た目を変える ことができます。

内部では jQuery / Bootstrap / frappe.ui API にアクセス可能で、フィールド操作だけでなく DOMの直接操作 も可能です。
カスタムフィールド、カスタムフォームなどによる改造に追加して、軽量なウィジェットや演出を簡単に組み込むことができます。

例えば

入力支援なら;
入力値に応じた候補提示、条件付き必須化、活性/非活性制御、保存前バリデーション
高度なDOM操作なら;
独自HTMLを差し込み、Chart.jsなど外部グラフを埋め込みリアルタイム更新
UI演出なら;
保存完了でモーダルやトースト表示、紙吹雪演出、進捗表示の動的更新
→ 商談完了時に「おめでとう！」花火演出　なんてことも可能です。

3. 実装手順（最小版MVP）

では、実際の、登録手順をお伝えします。

ユーザがエネルギーポイントを取得した際、
冒頭で紹介したような、コイン獲得モーダルを表示されるようにしたいと思います。
（「エネルギーポイント」とは、ERPNextのゲーミフィケーションの標準機能の一部です。）

手順

設定 → カスタマイズ → クライアントスクリプト へ移動
新規作成 → Doctype: Global / Script Type: Client Script を選択
下記コードを貼り付け → 保存 → 画面リロード

frappe.after_ajax(() => {
  frappe.db.get_list('Energy Point Log', {
    fields: ['name', 'points', 'rule'],
    limit: 1, order_by: 'creation desc'
  }).then(list => {
    const log = list[0]; if (!log) return;
    const key = 'last_ep_seen';
    if (localStorage.getItem(key) === log.name) return;
    localStorage.setItem(key, log.name);
    frappe.msgprint({
      title: `🪙 +${log.points} コイン`,
      message: `<div style="font-size:14px;opacity:.85">
        ${frappe.utils.escape_html(log.rule || 'Energy Point')}
      </div>`,
      indicator: 'green'
    });
  });
});

4. コード解説

`frappe.after_ajax`

初期ロード完了後に一度だけ実行し、無駄なポーリングを避けます。

`frappe.db.get_list`

Energy Point Log を作成日時の降順で1件取得。最小負荷で最新ログを確認できます。

`localStorage(key, log.name)`

重複防止のために、最後に表示したログIDを保存し、既出なら return します。

`frappe.msgprint`

ERPNext標準のモーダルで簡潔に表示。テーマ崩れや z-index 問題を回避できます。

`frappe.utils.escape_html`

サニタイズを利用してルール名を無害化、安全に表示します。

これで、エネルギーポイントを受けっと時に、モーダルが表示されるようになります。↓ コイン獲得モーダル

5. まとめ

クライアントスクリプトは “自社仕様の体験” を最短で形にできる道具 です。

kintone / Salesforce のJS拡張と同じ感覚で利用可能
ERPNext本体とは分離された設計で、公式Hook/APIに基づき安全に拡張可能
アップデートに強く壊れにくいカスタマイズ を実現

さらに今の時代は、AIによってこうした小さな追加機能を誰でも簡単に作れるようになりました。
そして、オープンソースのERPNextはそのための最良の“発射台” になります。

自由にカスタマイズでき、必要なアイデアをすぐに形にできる環境が揃っているからです。

最後に、もし現在 kintone / Salesforce / Excel など複数アプリを併用して煩雑になっている なら、ERPNextで一元化がおすすめです。費用だって、断然に安い！

コストを抑えつつ機能を網羅するERPNext、最高におすすめです。そして、その導入・運用をスムーズに進めるために、ぜひ MyHatch をご活用ください。

MyHatch

クライアントスクリプト