🎄コラボスタイル Advent Calendar 2025の15日目の記事です🎄
こんにちは。この時期になると大掃除に向けてケルヒャーが欲しくなる小西です。
今年もこの季節がやってきましたね！
今回のテーマは「コラボ」ということで、今コラボするなら。。
AIでしょ！
ということで、今回はコラボフローのJSカスタマイズをバイブコーディングしたいと思います！
開発環境
今回利用したエディタとモデルは以下になります。
- エディタ：Cursor
- モデル：Auto
AIにコラボフローのJavaScript APIの仕様を把握してもらう
コラボフローのJavaScript APIの仕様を把握してもらうため、
サポートサイトのURLを参照してもらうように指示します。
プロンプト
コラボフローのJavaScript APIを利用したカスタマイズコードを書いてください。
仕様や記述方法は以下を参照してください。
https://collaboflow.zendesk.com/hc/ja/articles/360000262936
https://collaboflow.zendesk.com/hc/ja/articles/360000266835
https://collaboflow.zendesk.com/hc/ja/articles/360000262916
参照先のURLは以下ページになります。
申請入力画面表示時に値をセットする
まずは簡単に申請入力画面を表示した際にパーツへ値をセットするコードを書いてもらうよう指示してみます。
プロンプト
申請入力画面を表示した際にパーツID「fidTest」に「テスト」という文字をセットするようにしてください。
よさげですね。
// コラボフロー カスタマイズコード
// 申請書入力画面を表示した際にパーツID「fidTest」に「テスト」という文字をセット
collaboflow.events.on('request.input.show', function (data) {
// パーツID「fidTest」に「テスト」という文字をセット
data.parts.fidTest.value = 'テスト';
});
パーツの表示・非表示を切り替える
次はパーツの表示・非表示を切り替えるコードを書いてもらいます。
プロンプト
以下内容でカスタマイズコードを実装してください。
申請書を表示した際はパーツ「fidOthers」を非表示にしてください。
fidTypeの値が「その他」の場合はfidOthersが表示してください。
問題なくできてそうです！
// コラボフロー カスタマイズコード
// 申請書表示時にパーツ「fidOthers」を非表示にし、
// パーツ「fidType」の値が「その他」の場合にfidOthersを表示する
// fidOthersの表示/非表示を制御する関数
function updateFidOthersDisplay(data) {
const parts = data.parts;
// パーツID「fidType」の現在の値を取得
const fidTypeValue = parts.fidType.value;
// パーツID「fidType」の値が「その他」の場合、パーツID「fidOthers」を表示する
if (fidTypeValue === "その他") {
parts.fidOthers.display = true;
} else {
// それ以外の場合、パーツID「fidOthers」を非表示にする
parts.fidOthers.display = false;
}
}
// 申請書入力画面表示時のイベント
collaboflow.events.on("request.input.show", function (data) {
// 初期表示時にfidOthersを非表示にする
updateFidOthersDisplay(data);
});
// パーツ値変更イベント：fidTypeの値が変更されたとき
collaboflow.events.on("request.input.fidType.change", function (data) {
// fidOthersの表示/非表示を更新
updateFidOthersDisplay(data);
});
明細パーツの計算
次は少し複雑にして、明細パーツを計算するコードを書いてもらいます。
パーツIDだと指示しづらいので、今回は事前にパーツ名とパーツIDを定義し、指示してみました。
プロンプト
以下内容でカスタマイズコードを実装してください。
テーブルパーツのIDは「tbl_1」としてください。
以下パーツはテーブル内のパーツです。
・数量（fidQuantity）
・単価（fidUnitPrice）
・税率（fidTax）
・合計（fidTotal）
行ごとの合計は「数量*単価*税率」として、結果を合計にセットしてください。
また各行の合計を全て足し算し、テーブルの総合計として総合計（fidGrandTotal）にセットしてください。
できました！
細かい指示はしていませんが、明細のどのパーツを変更しても計算が実行されるようになっていますね。
ただ各行の変更イベントがjavascriptの変更イベントになっていますね。。😇
// コラボフロー カスタマイズコード
// テーブルパーツ（数量、単価、税率、合計）の各行で数量*単価*税率を計算し合計にセット
// 全行の合計を全て足し算し、テーブルの総合計として総合計（fidGrandTotal）にセット
// テーブルパーツの計算を行う関数
function calculateTableTotals(data) {
let tableTotal = 0;
// テーブルパーツのデータを取得
const tableData = data.parts.tbl_1.value;
// テーブルパーツの行数を取得
const rowCount = tableData.length;
// 各行を処理
for (let i = 0; i < rowCount; i++) {
// 各行のデータを取得
const row = tableData[i];
// 各行の数量、単価、税率の値を取得
const quantity = parseFloat(row.fidQuantity.value) || 0;
const unitPrice = parseFloat(row.fidUnitPrice.value) || 0;
const tax = parseFloat(row.fidTax.value) || 0;
// 行ごとの合計を計算（数量 * 単価 * 税率）
const rowTotal = quantity * unitPrice * tax;
// 計算結果を合計（fidTotal）にセット
row.fidTotal.value = rowTotal;
// 総合計に加算
tableTotal += rowTotal;
}
// 全体の総合計をfidGrandTotalにセット
data.parts.fidGrandTotal.value = tableTotal;
}
collaboflow.events.on("request.input.show", function (data) {
// 初期表示時にテーブルの計算を実行
calculateTableTotals(data);
// テーブルパーツ内の各行の数量、単価、税率の値が変更されたときに再計算
const rowCount = data.parts.fidQuantity.rows.length;
for (var i = 0; i < rowCount; i++) {
// 各行の数量の値が変更されたとき
data.parts.fidQuantity.rows[i].on("change", function () {
calculateTableTotals(data);
});
// 各行の単価の値が変更されたとき
data.parts.fidUnitPrice.rows[i].on("change", function () {
calculateTableTotals(data);
});
// 各行の税率の値が変更されたとき
data.parts.fidTax.rows[i].on("change", function () {
calculateTableTotals(data);
});
}
});
JavaScript APIのパーツ値変更イベントを利用するよう修正してもらいます🛠️
プロンプト
onchangeではなく、パーツ値変更イベントを利用してください。
JavaScript APIを利用するように修正してくれました！
// コラボフロー カスタマイズコード
// テーブルパーツ（数量、単価、税率、合計）の各行で数量*単価*税率を計算し合計にセット
// 全行の合計を全て足し算し、テーブルの総合計として総合計（fidGrandTotal）にセット
// テーブルパーツの計算を行う関数
function calculateTableTotals(data) {
let tableTotal = 0;
// テーブルパーツのデータを取得
const tableData = data.parts.tbl_1.value;
// テーブルパーツの行数を取得
const rowCount = tableData.length;
// 各行を処理
for (let i = 0; i < rowCount; i++) {
// 各行のデータを取得
const row = tableData[i];
// 各行の数量、単価、税率の値を取得
const quantity = parseFloat(row.fidQuantity.value) || 0;
const unitPrice = parseFloat(row.fidUnitPrice.value) || 0;
const tax = parseFloat(row.fidTax.value) || 0;
// 行ごとの合計を計算（数量 * 単価 * 税率）
const rowTotal = quantity * unitPrice * tax;
// 計算結果を合計（fidTotal）にセット
row.fidTotal.value = rowTotal;
// 総合計に加算
tableTotal += rowTotal;
}
// 全体の総合計をfidGrandTotalにセット
data.parts.fidGrandTotal.value = tableTotal;
}
// 申請書入力画面表示時のイベント
collaboflow.events.on("request.input.show", function (data) {
// 初期表示時にテーブルの計算を実行
calculateTableTotals(data);
});
// パーツ値変更イベント：テーブル内の数量の値が変更されたとき
collaboflow.events.on(
"request.input.fidQuantity.change",
function (data) {
calculateTableTotals(data);
}
);
// パーツ値変更イベント：テーブル内の単価の値が変更されたとき
collaboflow.events.on(
"request.input.fidUnitPrice.change",
function (data) {
calculateTableTotals(data);
}
);
// パーツ値変更イベント：テーブル内の税率の値が変更されたとき
collaboflow.events.on("request.input.fidTax.change", function (data) {
calculateTableTotals(data);
});
上記コードを実際にフォームへ設定してみたのがこちらです！
意図した通り動作しました🎉
まとめ
いかがでしたでしょうか？
今回私は1文字も書くことなく、AIに全て指示してカスタマイズコードを書いてもらいました🤖
(ただ最後の明細パーツの計算はやりとりが少し長くなり、一部割愛しています💦)
やってみて感じたことは、最初にパーツIDとパーツ名の定義をしておくとより自然な感じで指示できるのでよさそうです！
これであればJavaScriptの知識があまりなくともJSカスタマイズが書けちゃいますね。
JSカスタマイズはしたいけど、JavaScriptとかわからないし。。
という方は是非AIを活用してチャレンジしてみてください🙋♂️
「ワークスタイルの未来を切り拓く」を理念に掲げ、リアルとデジタルの2つの働く場に向けた事業展開に留まらず、自社が率先して新しいワークスタイルに挑戦し、発信を行うことでワークスタイルの未来を切り拓いていきます。
Discussion