キーノートセッション [改 ]株式会社ジャスミンソフト
Wagby Spec リード贄

10/25/23

良則

Wagby Developer Day 20231https://www.itreview.jp/categories/low-code-development

ノーコード、ローコードツール
百花繚乱の時代
2023年10月現在、ITreviewで44製品。

10/25/23

Wagby Developer Day 2023

2

ノーコードは対象が広い（広すぎる）

10/25/23

CMSEC

Web

業務DB

アプリ
Wagby Developer Day 2023

3

ローコード

ローコードへの不安 – 3つの疑問

10/25/23

長期運用性カスタマイズ性エンジニア育成
Wagby Developer Day 2023

4

ノーコードで大量のアプリを作ることが正解か？

オススメ

ノーコードツール10選！特徴・機能・料金について2023年最新比較

無料のおすすめノーコードツール12選

ノーコードツール比較15選！タイプ別に紹介
ノーコードのアプリが無料で作成できるおすすめツール7選…

10/25/23

Wagby Developer Day 20235例

10/25/23

資産管理台帳アプリ

PC台帳管理社用車 台帳管理

社宅 台帳管理

保有物件 台帳管理

郵便切手管理備品管理

Wagby Developer Day 2023

6

Excelと何が違う？

PC台帳管理社用車 台帳管理

社宅 台帳管理

保有物件 台帳管理

郵便切手管理備品管理

Thanx https://icons8.com
10/25/23

Wagby Developer Day 2023

7

どうすればよかった？
汎用資産管理台帳を設計する

10/25/23

それでも溢れる個別要求に対しては• データ構造を工夫し、さまざまな属性を一元管理できるようにする。

• 共通データ基盤と、個別データ管理アプリの二層に分離する。

• 単純なノーコードツールでは対応できない。

• 共通データ基盤とはREST APIなどで疎結合連携する。

Wagby Developer Day 2023

8

データとアプリケーションの関係
プロセス中心設計

データ中心設計
データ

アプリ

データ

アプリ

データ

10/25/23

データ

データ
Wagby Developer Day 2023

9

Wagbyのアプローチ

10/25/23

Wagby Developer Day 2023

10

ノーコード /ローコードツールのカスタマイズ性
プロが納得

誰でも簡単にノーコード (Wagby)

定型パターンから選ぶだけ

ローコード (Wagby EE)

UI拡張
JavaScript/CSS

関数の提供

REST API

より自由度の高い
コード追加

拡張ポイントへのコード追加
2023/11/22

11業務系で求められるカスタマイズテーマ [1]入力チェック

入力制御

トランザクション

必須

最大入力文字同一DB内項目の値を用いた計算

隠し項目

関連する（他DB）項目の同時更
新

文字数範囲
許容文字（正規表現）
他項目比較
条件付きチェック
他 DB項目とのチェック

2023/11/22

読み込み専用項目
他項目値による入力可、不可制御

登録、更新、削除タイミングで他 DB操作。任意の条件判断を含む、自由なコード記述。 SQL発行を含む。

コピー

ストアドプロシージャ呼び出し。

条件付きルックアップ

いずれも DBのトランザクションとして完結すること。失敗時のロールバック保証。

ルックアップ

他 DB項目と関連した入力
制御

12業務系で求められるカスタマイズテーマ [2]
入力支援 (UI)

明細入力 (UI)

その他 (UI)

リストボックス、ラジオボタ
ン、チェックボックス、サブウィンドウ検索

明細行の追加、削除、挿入

郵便番号と住所の連動

一行段組レイアウト

カナ自動入力最大行の指定電話番号ハイフン自動補完

行内の項目、行外の項目を組み合わせた入力可、不可
制御

ルビ

入力時はリストボックスだが検索時はチェックボックスにする、など。
サブウィンドウによる複数値の選択
コード直接入力
サジェスト入力
条件付き警告ダイアログ
2023/11/22

条件付きの行追加、削除、挿入制御

グラフ、バーゲージ
バーコード入力、出力
ヘルプ
ポータル画面
独自ボタンによる、オリジナル画面操作
13業務系で求められるカスタマイズテーマ [3]
外部連携

非機能要件

その他

PDF 出力

複数サーバ化（クラスタリング、オートスケール）

既存テーブルとの連携（複合キーテーブルあり）

複数データベース対応

複数データベースの同時利用

国際化

シングルサインオン

CSV/Excel ダウンロード
CSV/Excel アップロード更新ダウンロード、アップロー
ド時の値の加工処理
非同期処理

2023/11/22

マルチセッション（ブラウザの複数タブ対応）
マルチテナント（ SaaSアプリケーション提供として）Open ID Connect
ログオン、ログオフ時の追加処
理
上流工程との連携

REST API サーバ化

設計書の出力外部 REST API呼び出し

セキュリティ脆弱性対応

14

事例

SaaS型販売管理アプリケーション

2023/11/22

15

販売・仕入管理

2023/11/22

見積

受注

売上

請求

入金

得意先

仕入先

商品

セット商品

得意先別
売価

発注

仕入支払

在庫

倉庫

16

カスタマイズ方法• ⾃動⽣成されたファイルを直接、変更しない。
• customizeフォルダに「追加」のファイルを配置する。
mycommon.js

2023/11/22

common.js を強化する。

<モデルID>/My.js

そのモデルに関わるすべての画⾯に適⽤<モデルID>/My<画⾯>.js

そのモデルのその画⾯に適⽤<モデルID>/My<画⾯>.css

そのモデルのその画⾯に適⽤

17サーバ側（ DB操作含む）例/*** 在庫情報を更新します (削除レコード用 )。
*/function updateZaikoDeleteTransaction(headerData, detailsData) {// 倉庫の指定なしは想定外。
if (detailsData.getSokocdAsInteger() == null) {return;}var zaikoProcessor = null;var juchuSokoZaikoProcessor = nullvar subGenzaizaikosu = function(mstZaiko) {// 現在在庫数
mstZaiko.setGenzaizaikosu(VALUE(ADD(mstZaiko.getGenzaizaikosu(0), detailsData.getSuryo(0))));};
2023/11/22

18

var subJuchuzansu = function(mstZaiko) {/** 受注残数 **///出荷指図＝ 0 、 =1、 =2 の場合のみ
if ((Constants.SHUKKASASHIZU_ZAIKO_H.intValue() == detailsData.getShukkasashizu(-1)|| Constants.SHUKKASASHIZU_H_TSUJYO.intValue() == detailsData.getShukkasashizu(-1)|| Constants.SHUKKASASHIZU_H_CHOKUSO.intValue() == detailsData.getShukkasashizu(-1))) {mstZaiko.setJuchuzansu(VALUE(ADD(mstZaiko.getJuchuzansu(0), detailsData.getSuryo(0))));}};

var key = new Packages.jp.jasminesoft.wagby.model.mst_zaiko.MstZaiko.Key();
key.setKanyushabango(detailsData.kanyushabango);
key.setShohincd(detailsData.getShohincd());
if (zaikoProcessor != null) {key.setSokocd(detailsData.getSokocd());
updateZaikoByKeyDeleteTransaction(key, detailsData, zaikoProcessor)}}

2023/11/22

19

フロントエンド（ UI限定・ DB操作なし）• すべての「部品」は Dojotoolkit を⽤いている。
• その他のライブラリ…例：jQuery…を混ぜることは不可能ではないが、推奨していない。
• Dojotoolkitの作法を学ぶことが、Wagby UI カス
タマイズのベストソリューション。

2023/11/22

20

フロントエンド JavaScript 例 1// 在庫数照会ダイアログに表示する HTML を返す
function getZaikoHTML(rowNum) {return `<table class="display_table"><tbody><tr><th >A 在庫数 </th><td>${genzaizaikosu}</td></tr><tr><th>B 内在庫引当分 </th><td>${hikiatezaikosu}</td></tr><tr><th>C 出荷可能数 (A-B)</th><td>${sukkakanousu}</td></tr></tbody></table><div style="display: flex; justify-content: center; margin-top: 15px;"><button id="btnOpenHacchuzanMeisaiDialog" style="margin: 0 15px;">発注残明細 </button><button id="btnOpenTaSokoZaikoDialog" style="margin: 0 15px;"> 他倉庫の在庫 </button></div>`;}

2023/11/2221フロントエンド JavaScript 例 2// 与信チェックのダイアログに表示するメッセージを取得する
function getYoshinCheckMessage(yoshingendogaku, urikakezandaka) {return `取引限度額以上の金額が入力されています。 <br>このまま登録してもよろしいですか？ <br><table style="margin: 8px 0 10px 15px;"><tbody><tr><td>与信限度額 </td><td>:</td><td>${getFormattedNumber(yoshingendogaku)}</td>
</tr>
<tr>
<td>売掛残高 </td><td>:</td><td>${getFormattedNumber(urikakezandaka)}</td></tr></tbody></table>`;}2023/11/22

22

フロントエンド JavaScript 例 3// 発注残明細ダイアログの生成
function createHacchuzanMeisaiDialog(rowNum) {createConfirmDialog({"title": "発注明細照会 ","type": "HacchuzanMeisai","icon": "none","cancelButtonLabel": "閉じる ","style": "width: 700px","message": getHacchuzanMeisaiHTML(rowNum),}, function(dialog) {setDialogStyle(dialog);
dialog.show();
wbHacchuzanMeisaiDialog = dialog;});}2023/11/22

23

フロントエンド JavaScript 例 4function createBtnHacchuzanMeisai(rowNum) {// 「発注残明細」ボタンを配置する
var btnHacchuzanMeisai = registry.byId("btnOpenHacchuzanMeisaiDialog");if (btnHacchuzanMeisai) {btnHacchuzanMeisai.destroy();}btnHacchuzanMeisai = new Button({}, dom.byId("btnOpenHacchuzanMeisaiDialog"));btnHacchuzanMeisai.on("click", function() {if (!wbHacchuzanMeisaiDialog) {// 発注残明細ダイアログが未生成の場合は新規作成する
createHacchuzanMeisaiDialog(rowNum);} else {// 発注残明細ダイアログが生成済の場合は出力内容を更新する
wbHacchuzanMeisaiDialog.updateMessage(getHacchuzanMeisaiHTML(rowNum));
wbHacchuzanMeisaiDialog.show();}});
2023/11/22}

24

フロントエンド CSS 例.sempotantoshamei_label,.chokusotantoshamei_label,.biko_label {width: 180px;}.sempotantoshamei_field,.chokusotantoshamei_field,.biko_field {width: unset;}/* 金額項目を右寄せにするため width:unset; は利用不可 */.arariekiritsu_field,.ararieki_field {width:calc(100% - 205px);}
2023/11/22

25

カスタマイズで、できること• 複雑な入力チェック• 複雑な入力制御• 複雑なデータベース検索、更新処理

これまで蓄積されてきた Javaクラスライブラリ、データベーステーブルの再利用も。

• データベースビュー、トリガーとの組み合わせ• データベースストアドプロシージャ呼び出し• 自動生成された処理の改変（基本動作の個別修正）• UI 操作：ボタン配置、ダイアログ配置、レイアウト修正

2023/11/22

26

カスタマイズでも、できないこと• 認証、認可• Wagbyが利用している Spring Security を前提としたカスタマイズは可能だが、Spring Securityを変えることはできない。

• Wagbyが対応していないデータベースの利用• JDBC 4 規格が必要。

• UIの大幅な変更• Wagbyが採用しているCSS/JavaScriptとは異なるアーキテクチャは利用できない。

2023/11/22

27

回避策 REST API サーバ
独自フロントエンドから、WagbyのREST APIを呼び出す。

スマートフォン
Native App

React AppRESTA
PI.NET App

2023/11/2228

データ中心設計を支えるためのローコード開発

見積

受注

売上請求

入金

得意先

仕入先

商品

セット商品

得意先別
売価

発注

仕入支払

在庫倉庫

例

10/25/23

販売・仕入管理

Wagby Developer Day 202329

基幹データを有効活用するノーコード開発
REST API
パブリッククラウド

得意先からの問い合わせ履歴を管理したい。

得意先、売上、商品からサポート満了日前に案内メールを送りたい。

ゼロトラストネットワーク

Wagby EE で開発する基幹業務アプリケーション

10/25/23

見積提出前にワークフローによる決裁を行いたい。
Wagby で開発する
ノーコードアプリケーション

Wagby Developer Day 202330

10/25/23

Wagby Developer Day 202331

10/25/23

Wagby Developer Day 2023

32

最後までお楽しみください！

10/25/23

Wagby Developer Day 2023

33