【東急】FormBridge×kViewer連携のつまずきを標準機能だけで解消！画面遷移・階層選択の設定Tips

トヨクモNight〜地味だけど超助かった、設定の裏技・工夫大集合編〜LT登壇の様子をレポート！

この記事は2026年9月に開催したトヨクモNight〜地味だけど超助かった、設定の裏技・工夫大集合編〜での東急株式会社 デジタルプラットフォーム ITソリューショングループ 北島さんのLT登壇の様子をお届けするレポート記事です。

今回は「FormBridge・kViewer活用Tipsのご紹介」というテーマで、連携時に利用者がつまずく「地味な不便」は、JavaScriptによる開発をしなくても標準機能の設定の工夫だけで解消でき、便利な機能をあきらめる必要はない、という気づきについてご登壇いただきました！

北島さん（東急株式会社 デジタルプラットフォーム ITソリューショングループ）

デジタル活用による業務改善と、市民開発の推進を担当

こんにちは、東急株式会社の北島です。本日はFormBridge・kViewer活用のTipsを紹介します。

私はデジタル／IT部門に所属し、東急グループ各社におけるデジタルを活用した業務改善を支援しています。

7人の市民開発事務局で、累計100プロジェクト以上を支援

私が所属する市民開発事務局は、社員自らがデジタルを活用して業務を改善する「市民開発」を支援する組織として、2025年2月に立ち上がりました。東急グループ連結各社の社員を対象に、伴走支援・教育・情報発信の3つを軸に活動しており、これまでに累計100プロジェクト以上を支援しています。同じチームには、Cybozu Days 2025やトヨクモkintoneフェス 2026に登壇した千野と、kintone hive Tokyo 2026に登壇した蕪木も所属しています。

千野さんのトヨクモkintoneフェス 2026登壇レポート記事はこちら
■【東急が実践】「任せる」と「守る」を両立する、kintone市民開発のガバナンス設計
https://toyokumo-blog.kintoneapp.com/fes2026-tokyu-c/

蕪木さんのkintone hive Tokyo 2026登壇アーカイブ動画はこちら
■【kintone hive Tokyo 2026】東急株式会社

2026年9月時点で、稼働アプリ数は300以上、累計アプリ数は2,000以上となっています。FormBridgeのフォーム、kViewerのビューについても、それぞれ100以上作成しています。

今回は2つの事例をご紹介します。どちらも、FormBridgeとkViewerを連携させたときに出てきたつまずきポイントを、標準機能の設定の工夫だけで解消しました。

事例1：FormBridgeの入力後に一覧画面へ戻れない問題を、2つのリンク追加で解消

kViewerのビューからFormBridgeの編集用フォームに移動し、レコードを編集した後、ビューの一覧画面に戻れず困ったことはありませんか。

背景と課題：FormBridge・kViewer間の導線が分かりづらい

FormBridgeとkViewerは、とても使いやすいサービスです。しかし、いざ業務で両方を連携して利用し始めると、画面の行き来で迷ってしまう利用者が出てきました。

具体的には、次の3点が課題でした。

1. フォーム回答後にビューの一覧へ戻る導線の不足
2. ビューの一覧から新規入力用のフォームへ進む導線の不足
3. 利用者が迷いやすい画面遷移

これまでは、フォームでの回答完了後に、完了画面から元々見ていたビューの画面に戻る導線がありませんでした。また、ビューの画面から新規入力用のフォームへ進む導線も設けていなかったため、利用者が迷ってしまうという課題がありました。

解決策：不足していた2つの導線を追加

そこで、不足していた2つの導線を追加しました。

1. kViewerの一覧画面から新規入力フォームへ進む導線
2. FormBridgeの完了画面からビューの一覧画面へ戻る導線

この2つの導線を追加したことで、一覧画面から入力画面へ、入力完了後は再び一覧画面へと、スムーズに移動できるようになりました。なお、JavaScriptなどの開発は一切不要で、標準機能だけで実現しています。

ここからは、実際にどのように設定しているかを紹介します。

設定手順①kViewer｜サイドコンテンツにリンクを配置する

まずkViewer側です。リンクを置ける場所は複数あると思いますが、今回はサイドコンテンツを使用しました。入力フォームへのリンクや、あわせてkintoneアプリへのリンクを貼り、すぐにアクセスできるようにしています。

これで、一覧画面から入力フォームとkintoneアプリへスムーズに移動できるようになりました。

設定手順②FormBridge｜回答完了画面にリンクボタンを配置する

2つ目はFormBridge側です。回答完了画面にリンクボタンを配置しました。

このボタンの設定には、「AIで回答完了画面を作成」機能を使っています。HTMLを直接書いて設定することも可能ですが、AIに「画面の下に以下のURLのリンクボタンを配置して」と打ち込むだけで、デフォルトで表示されるチェックマークのアイコンと同じ緑色に合わせるところまで自動で調整してくれます。目的とリンク先URLを入力するだけでリンクボタンの配置が完了しますので、HTMLを書ける方でも、こちらの方法で入力したほうが簡単かもしれません。

効果：FormBridgeとkViewerを、ひとつのサービスのように利用できる

これまではフォーム回答後の戻り先が不明確で、新規入力用フォームの場所も分かりにくい状態でした。一覧画面と回答完了画面にリンクを設けたことで、フォームとビューをワンクリックで行き来できるようになりました。

事例2：kViewer経由で編集すると、階層選択フィールドに既存の値が引き継がれない問題を、条件分岐設定で解消

2つ目は、kViewerとFormBridgeを連携してkintoneのデータを編集する際に、フォーム上の階層選択フィールドへ既存の値が引き継がれず、困ったという事例です。
こちらも、標準機能を使うことで便利な機能をあきらめずに済んだ事例になります。

背景と課題：便利な階層選択フィールドなのに、編集運用でつまずいた

前提として、FormBridgeの階層選択フィールドは非常に便利な機能です。当社では、路線を選び、さらにその中から駅を選ぶという使い方をしています。数十駅もある中からいきなり駅名を選ぶのは大変ですが、路線から選ぶことで選択肢を絞って選択できます。これが階層選択フィールドのよいところです。
しかし、データが入るkintone側には「階層選択」というフィールド自体がないため、別のフィールドに値が入る仕様です。そのため、kViewerから登録済みのレコードの編集フォームを開くと、登録済みの値が階層選択フィールドに引き継がれず、空の状態で表示されます。そのまま保存すると、既存の値が空で上書きされる課題に直面しました。
階層選択フィールドについて詳しくはこちらをご覧ください。
■階層選択 https://guide.kintoneapp.com/formbridge/hierarchy_selection/

具体的な困りごとは次の3点です。

1. FormBridgeでデータ編集をしようとするたびに階層選択フィールドを選び直す必要がある
2. 選び直しを忘れると、空のまま保存されてしまう
3. 便利な階層選択フィールドか、kViewerでの編集か、どちらかをあきらめがちになる

原因：階層選択フィールドはFormBridgeにしかないフィールド

原因は、階層選択フィールドがFormBridgeにしかないフィールドであることです。kintoneやkViewerには同じ形で値を持てないため、データ編集時にフォーム上で空の値として扱われてしまいます。

新規登録時にフォーム上の階層選択フィールドに入力した値は、kintoneには路線フィールドと駅フィールドに分割して登録されます。すると、kintone・kViewer側には階層選択フィールドに対応するフィールドが存在しないため、編集のために再度フォームを開くと階層選択フィールドに既存の値が引き継がれない状態でした。

解決策：編集時だけ階層選択フィールドを表示しないようにする

そこで、編集時だけ階層選択フィールドを表示しないようにすることで解決しました。

使ったのは条件分岐です。編集フラグ（チェックボックスフィールド）と条件分岐を組み合わせて、新規登録時と編集時でそれぞれのフォームでの表示を切り替えています。

新規登録時は、編集フラグのチェックボックスの初期値をオンにして、階層選択フィールドが最初から表示されるようにしました。
一方で、kViewerとFormBridgeを連携して該当のレコードを編集する際は、編集フラグのチェックボックスの初期値はオフになっているため、階層選択は初期表示されません。変更したいときだけチェックを入れれば、階層選択フィールドが表示され、値を選び直せます。

このように、編集時の初期状態では階層選択フィールドを表示しないため、意図せず空の値で上書きすることを防げます。

設定のポイントは「編集時は必要なときだけ表示（変更）できる状態」を作ること

実際の設定は、次の3点がポイントです。

1. 階層選択フィールドの表示・非表示を制御するため、編集フラグ用のフィールド（チェックボックスフィールド）を用意する
2. 新規登録時は階層選択フィールドを表示させるため、条件分岐と組み合わせてFormBridge側の編集フラグの初期値をオンにする
3. 編集時は階層選択フィールドの初期表示を非表示にするため、FormBridge上の編集フラグはkintoneアプリに連携せず、新規登録後のレコードでは編集フラグがオフになるようにする

こうすることで、「新規登録時はオン、編集時はデフォルトでオフ」という状態を実現できます。

効果：階層選択もkViewerでの編集も、どちらもあきらめなくてよい

これまでは、編集画面では階層選択フィールドに既存の値が引き継がれず、選び直さずに保存すると空の値で上書きされる可能性があったため、階層選択フィールドかkViewerと組み合わせた編集機能かのどちらかをあきらめていました。

しかし、この設定にしたことで、編集時に既存の値が空で上書きされることを防げるようになりました。変更が必要な場合のみ編集フラグをオンにすることで、階層選択フィールドを表示し、値を選び直せます。

標準機能の設定の工夫だけで、便利な機能を使い続けられる

今後FormBridgeとkViewerを連携して利用し、同じような課題に直面された場合は、本日の内容を思い出していただければうれしいです。
以上になります。ありがとうございました。

ご登壇ありがとうございました！

「明日からまねできそう！」と思えたご活用Tipsは見つかりましたか？

FormBridgeとkViewerの組み合わせは、すでに幅広く活用されています。今回は、現場の使い方や要望に合わせた工夫を伺うことができました。北島さんは利用者の声を拾い、仕様上難しいことでも、サイドコンテンツ・回答完了画面・条件分岐という標準機能の組み合わせで解決していました。カスタマイズに頼らず工夫で解決できる範囲は、思っているよりも広いのだと気づかされる登壇でした。

今回のお話の中でご紹介いただいたFormBridge・kViewerは、30日間の無料お試しを何度でもご利用いただけます。

そのほか、kintone連携サービスでどんな業務改善ができるかについては以下ページよりご確認ください。

利用用途から見つける kintoneと連携した業務改善！

また、過去のユーザー会の登壇レポートまとめはこちらからご覧いただけます。