【概要】
2025年2月に FormBridge の新バージョンがリリースされ、これに伴い JavaScript を使ったカスタマイズ方法にも大きな変更が入りました。本記事では 2025年07月時点で確認できている主な変更点をまとめ、旧バージョンから移行する際のポイントや注意点を解説します。
なお、本記事の内容は今後のアップデートで変更される可能性がありますので、ご利用の際は公式ドキュメントも合わせてご確認ください。
【対象読者】
- FormBridge旧バージョンから新バージョンへ移行を検討している方
- FormBridge旧バージョンと新バージョンの違いをざっと把握したい方
- FormBridge新バージョンのカスタマイズでつまずいている方
【新旧バージョンの比較】
公式の移行ガイドに詳細な比較表が公開されています：
https://formbridge.kintoneapp.com/help/customize/migrate
ここでは特に「動的選択肢の変更」と「フィールド要素の取得・操作」の２点について掘り下げて解説します。
✏1. kViewer を使った選択肢の動的変更
○旧バージョンの実装例
// kintone アプリ A からレコードを取得し、選択肢にセット
fb.events.kviewer.records.fetch('アプリID', {
app: '123',
query: 'status = "公開"',
}).then(records => {
const options = records.map(r => ({
label: r.$field.value,
value: r.$field.value
}));
fb.getField('選択フィールド').setOptions(options);
});
○新バージョンでの状況
-
fb.events.kviewer.records.fetchが 廃止 され、kViewer 経由でのレコード取得 API は提供されていません。 - 現時点では、kintone REST API を直接呼び出す方法や、公式の代替サンプルコードが公式ドキュメントに見当たりません。
有益な情報やサンプルコードをお持ちの方は、ぜひコメントで共有をお願いします。
✏2. フィールドコードによる要素取得・操作
○旧バージョンの実装例
// 単一フィールドを取得
const nameEl = fb.getElementByCode('名前');
// テーブル内フィールドをまとめて取得
const tableEls = fb.getTableElementsByCode('明細', '数量');
○新バージョンでの状況
-
fb.getElementByCode()やfb.getTableElementsByCode()といったフィールドコード指定の DOM 取得関数が 廃止 - 代替として、標準的な DOM API（
document.querySelector／querySelectorAll）を用いる必要があります。
// 単一フィールド
const nameDom = document.querySelector('.fb-custom--field[data-field-code="名前"]');
// テーブル内フィールド（複数）
const qtyDoms = document.querySelectorAll('.fb-custom--row[data-table-code="明細"] .fb-custom--field[data-field-code="数量"]');
注意点
- クラス名や属性セレクタは将来的に変更される可能性があります。
- セレクタが動作しない場合は、ブラウザの開発者ツールで最新の DOM 構造を確認してください。
【おわりに】
- 実装の詳細やユースケースに応じたコードサンプルは、公式ドキュメントを併せてご参照ください。
- もしほかに有効な方法やベストプラクティスを見つけた方がいれば、コメントでフィードバックをいただけると嬉しいです。