今回の目的
フォームブリッジのテーブルに、kintoneの参加者リストを“ワンクリックで自動反映”させる！
・kintone
・Form Bridge
・k viewer
背景と目指す形
ご相談元は、全国規模のビジネス交流会を主催するマッチング専門企業。
オンライン交流会も開催されていて、そのイベント時に活用するフォームの修正をご依頼。
元々フォームは存在しているものの、今回はフォームブリッジの仕様がv2になったことで、以前動いていたjavascriptが一部機能しなくなったため、v2仕様にリライトする必要が生じたのだ。
フォームの役割は「この人と打ち合わせしたいよ！」という意志をフォームを通して主催者に依頼するもの。
必要な要件はシンプルで、
| ・フォーム上で該当のイベントを選択したら参加者一覧テーブルに参加者リストを一撃で反映すること ・回答はkintoneの所定のアプリのテーブルに格納すること |
これだけ。
しかし、これが長い戦いの始まりなんです。。。
新バージョンv2での課題
v2では旧バージョンでできていたことが一部できなくなっている。今回大きな障壁となったのはJavaScriptではフォーム上で
「テーブルに行を追加・削除できない」
ということ。つまり、参加者が50人いた場合、テーブルに50行追加してリストを反映することができないということ。
この“行の追加・削除ができない”という仕様が、今回最大の壁になりました。
✅解決策（※2025年6月現在）
◾️テーブルに行追加と削除ができない件
仕様書を睨みながら色々と検証していると「追加と削除はできないが、既存の行が存在していれば上書きできる」という事実が浮き彫りになってきた。
ということはつまり、テーブルにリストを反映する前に、必要な行数を用意しておかなければいけない、ということ。
しかしその行、誰が用意するの？って話です。イベント当日に参加者へのガイダンスで
「今日の参加者は50名ですので、まずテーブルに50行追加してくださいね。ポチポチッとね。」
なんてやれるわけがない。
というわけで、これはひとまず下記で解決しました。
フォームブリッジ側のテーブル設定で、最小値を指定する↓
基本的に参加者リストはkintoneで管理しているので、参加者がリスト自体に手を加えることを禁止するため、今回は最大値も指定。最小値と同じ数値です。
これで何が起きるかというと、フォームを開いたときに、テーブルの初期行が指定した行数分あらかじめセットされます。
さらに、最小も最大も決まっているので、手動では追加も削除もできません。これで参加者リストはシステムで反映するしかない状況を作れました。
あとは何かしらのトリガー（今回はチェンジイベント）を設定し、k viewerでセットした公開APIで参加者リストを取得、パースしてテーブルに入れ込んであげるだけです。
◾️準備した行数に参加人数が満たない場合の不要行について
初期行を50件に指定したら、当然ユーザーさんには空の50件が表示されている状態です。
参加者リストを反映した後も、50件用意された行に対し、参加者が30人だった場合、20件分は空になります。
そうすると何が問題かというと
| ・単純に無駄な行があるのでカッコ悪いし邪魔 ・回答ボタン（または確認ボタン）が必要以上に下に表示されてしまう。「俺のテーブルを超えていけ、、」状態 |
じゃあどうしましょうか？となるのですが
---検討案---
・テーブル反映のついでにjavascriptで不要な行を削除→そもそも行の追加削除はできない仕様。加えて最低行数指定があるので鉄壁の50行。 |
そう、やっぱりガードが固かったんですね。
というわけで、仕方ないので
---最終案---
・CSSで不要行を非表示これでひとまず入力画面の不要行には撤退（というか潜伏）してもらいます。テーブル内の指定フィールドの value 属性が空の行を非表示（display: none）にしちゃいましょう。 |
◾️kintone格納までの問題点
不要行の皆さんにはひとまずCSSで隠れていただいただけですので、実はkintoneへの格納時点では存在しており、回答ボタンを押した瞬間にわらわらと出てきます。結果、格納先のkintoneアプリには不要行たちもちゃっかり格納されてしまうわけです。
不要行まで一緒に格納されてしまうと、データベースとしてよろしくない。というわけで、不要行たちには格納前に撤退していただくことにします。
とはいえ、公式の仕様書にはテーブル行削除なんていうコンテキストは存在しない。さあ、どうやって撤退いただこうか？ということで、結論から。
「form.confirmイベントでレコードの中身を直接書き換えることで、非公式ながら不要なテーブル行の削除ができる」
です。もう少し噛み砕くと
- form.confirm（確認ボタン） イベント内で
context.getRecord()を使って現在の回答内容を取得 - テーブルデータ（
SUBTABLE）のうち、消したい行を条件指定して.filter()で除外 record[tableFieldCode].valueに加工後の配列を代入し、そのままcontextを返却
つまり、ちょっと回答内容を拝借して加工し、それをフォームブリッジ側に返してあげただけ。
すると確認画面上でも不要行は駆除され、回答ボタンを押してもそのデータを保持してくれている。
つまり、kintoneの格納時にも不要行は尾行してこず、理想の状態で格納されるんです。
公式には明示されていないが有効だった！
おそらく、form.confirm イベント後、内部的に context.getRecord() の内容がそのまま登録対象のデータとして使用されているためと考えられます。
したがって、このタイミングでレコード内容を加工することで、テーブルに反映される行を操作できたわけです。
重要なのはタイミングで、入力画面では加工できなかったものが確認画面以降は加工できると言うこと。
確認画面以降はフォームブリッジがご親切にデータをまとめてくれてるので、ちょっとお借りすることができるという点。
ただし、今後のアップデートで挙動が変わる可能性もあるため、実装時は十分にテストしながら活用することをおすすめします。