FormBridgeのJavaScriptカスタマイズって、0からやろうと思うと地味に腰が重い。
- 「要件を整理して…」
- 「イベントどれだっけ…」
- 「イベントの書き方これで合ってる？」
みたいな“初動の手間”で時間が溶けがちです。
そこで今回は、Copilotを使って 最短5分 で "スタート地点 "を作るところまでをまとめました。
完成品を5分で作る話ではなく、納品に向けたたたき台を5分で作ってその後に要件を詰めていく。
この流れを再現できる形にするのが狙いです。
確認事項
- どんな要件の依頼が来たか
- それに対して自分がどうプロンプト化して
- Copilotがどの精度でコードを返したか
その「5分の流れ」を見せます。
Formbridgeのカスタマイズだけでなく、"生成AIの使い方" についても参考になればと思います。
前提として、FormBridgeの新バージョン（v2）を想定しています。
旧バージョンからカスタマイズの書き方に変更点があるため、古い記法を混ぜない点だけ注意してください。
こんな方におすすめ
- FormBridgeのJavaScriptカスタマイズ、毎回「初動」が重い人
- 生成AIを実務に入れたいが、まず小さく試したい人
- “動くたたき台”を素早く作ってから、要件を詰めて納品したい人
前提
- FormBridge新バージョン（v2想定）
- JSは「詳しい設定 → JavaScript/CSSでカスタマイズ」からJSファイルを登録、更新で反映
- 旧バージョンから変更点があるため、古い記法を混ぜない
実録：5分の動き
- 0 ~ 1分：依頼文とテンプレをプロンプトに貼る（深く考えすぎない）
- 1 ~ 2分：出力JSを“最低限チェック”（フィールドコード / イベント / エラーAPI）
- 2 ~ 3分：FormBridgeにJSファイルを登録、更新
- 3 ~ 4分：動作確認（まず動けばOK）
- 4 ~ 5分：5分の結果をメモ（どこまでできたか／次に詰める点）
今回の依頼内容
- 提出日｛提出日｝（文字1行）フィールドにYYYYMMDDの形式でいれるよう制御
※ フィールド名｛フィールドコード｝（種別）で記載 - トリガーは提出日の値が変わったとき
- 正しい入力でないときはアラートをそのフィールドに出す
Copilotに貼ったプロンプト
FormbridgeをJavaScriptカスタマイズします。
以下の内容に沿ってJavaScriptの生成をお願いします。
■ルール
即時関数＋IIFE＋厳格モード＋アロー関数を使って、
可能な限りシンプルな構造で機能を満たせるよう生成をお願いします。
■フィールド情報
フィールド名｛フィールドコード｝（種別）で記載しています。
■相談
JavaScript生成にあたり、名称の考案をお願いします。
綴り間違いやフィールドコードなどがあいまいまたはわからないときは相談してください。
■内容
提出日｛提出日｝（文字1行）フィールドにYYYYMMDDの形式でいれるよう制御。
トリガーは提出日の値が変わったとき。
正しい入力でないときはアラートをそのフィールドに出してください
※参考（Formbridge v2）
https://formbridge.kintoneapp.com/help/customize/v2
Copilotにいれるとこんな感じ。
相談の部分にはあらかじめ決めておきたい名前の案を入れています。
意外と名前を決めるのって気を使うので、いくつか案を出してもらった方が楽ですね。
要件を渡されるときに綴りが違ったりフィールドコードが間違っていたりする場合があります。
相談の部分にはあいまいな場合に相談するよう伝えることでやり取りの回数を削減できます。
Formbridgeの仕様を読み込ませることも重要です。（Wordに文書化して登録しています。）
あらかじめ仕様を読み込めば前提ありきで正しいイベントで生成してもらえます。
仕様のページはJavaScriptカスタマイズのページから飛べます。
Copilotの返答：この精度で返ってきた（そのまま）
Copilotからは画像のように返答がありました。
生成されたスクリプトはこちら👇
(()=>{
'use strict';
// === 設定（必要に応じて書き換え）=========================
const FIELD_CODE = '提出日'; // ← 提案フィールドコード。実コードに合わせて変更可
const ERR_MSG = 'YYYYMMDD形式の正しい日付を入力してください（例：20260327）。';
// ===========================================================
// YYYYMMDD かつ実在日付かを判定
const isValidYYYYMMDD = (s)=>{
if(!/^\d{8}$/.test(s)) return false;
const y = +s.slice(0,4), m = +s.slice(4,6), d = +s.slice(6,8);
const dt = new Date(y, m-1, d);
return dt.getFullYear()===y && (dt.getMonth()+1)===m && dt.getDate()===d;
};
// 値変更時にバリデーション（不正なら当該フィールドにエラー表示）
formBridge.events.on(`form.field.change.${FIELD_CODE}`, (ctx)=>{
const v = String(ctx.value ?? '').trim();
if(v === ''){
// 空はここでは不正扱いにしない（必須制御はフォーム設定に委ねる）
ctx.setFieldValueError(FIELD_CODE, null);
return;
}
ctx.setFieldValueError(FIELD_CODE, isValidYYYYMMDD(v) ? null : ERR_MSG);
});
})();
1 ~ 2分でやった“最低限チェック”（これだけ）
- フィールドコード：提出日 が本当にフィールドコードか（違うと動かない）
- 新バージョンのイベントか：formBridge.events.on('form.field.change.{フィールドコード}') の形
- エラー表示：setFieldValueError() を使っているか
3 ~ 4分 テスト
FormbridgeにJSを登録、更新し、実際に値を入れてテストを実施します。
-
20260228 → 正しい日付＝エラーなし
-
20260229 → 存在しない日付
-
あ → 数字以外のもの
5分の結果：どこまでできた？
要件と照らし合わせると、伝えたことは最低限満たせていると感じました。
- YYYYMMDDの部分も正規表現で8桁の数字になるような関数
isValidYYYYMMDDをつくり制御をかけられています。 -
formBridge.events.on(form.field.change.${FIELD_CODE}, (ctx)=>{…｝ではFormbridgeのバージョンに合ったイベントが生成されていますね。 - トリガー設定である"対象フィールドの値が変わったとき"というのも間違っていません。
- 要件にあったエラーをフィールドに出現させる部分である
ctx.setFieldValueError(FIELD_CODE, isValidYYYYMMDD(v) ? null : ERR_MSG);も、問題なく出力されています。
ここから詳細を詰めていく"たたき台"はできていると言えます。
つまづきがちな点
要確認
- JSをフォーム用に登録してない
- 有効化してない
- 更新してない
- フィールドコードが違う
- 新バージョンと旧式の書き方を混ぜた
などが考えられるため、反映できていない場合はよく確認しましょう。
まとめ
Copilotを使って、FormBridgeのJavaScriptカスタマイズを最短5分でスタートさせる方法をお伝えしました。
「仕上げ」よりも「初動の加速」に効かせるためにはまず、たたき台を5分で作って動かす。
そこから例外・文言・運用ルールを詰めて納品品質に近づける順序が、実務では一番ストレスが少ないと感じています。
5分でやるチェックは、フィールドコード、新バージョンのイベント記法、エラー表示など "最低限" に絞るのがコツです。
この記事で伝えたのはあくまでも完成品を5分で作る話ではなく、納品に向けた初動を高速化する話です。
生成したコードは納品できる形で精査し、問題がないことを確認してから成果品としましょう。
Formbridgeを使える環境にある方は5分でできるので実際に手を動かしてみてはいかがでしょうか？
- こんな使い方もできるよ！
- ここはこうしたほうがいいのでは？
- 実際にやってみたらうまくいった！
などのご意見があればコメントいただけると嬉しいです！