N:N（複数対複数）の関連レコード一覧を自作する

（Author : Fuji Business International Mamoru Fujinoki）

Index

• はじめに
• デモ環境
• kintone アプリの作成
• サンプルコード
• 動作確認
• まとめ

はじめに

関連レコード一覧フィールドは関連性が1:Nであれば標準機能で設定できるのですが、テーブルの内容を条件とするような、関連性がN:Nの場合は標準機能で設定することができません。

こちらのQ&Aの回答のように詳細データのアプリを別個作成して対応するなどの方法もありますが、今回は、JavaScript APIを利用して関連レコード一覧のテーブルを作成、表示するカスタマイズ方法を説明したいと思います。

デモ環境

こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/295/

デモ環境の利用は、事前に cybozu developer network のメンバー登録が必要です。画面右上の「サインイン」ボタンよりご登録ください。
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。

kintoneアプリの作成

サンプルのアプリとして、学習塾クラスの管理アプリを作成します。

生徒管理アプリとクラス管理アプリを作成して、生徒管理アプリから複数のクラスをルックアップ選択し、クラス管理アプリでは、そのクラスに登録した生徒を一覧表示するように設定します。1人の生徒が複数のクラスを選択でき、一つのクラスには複数の生徒が登録されるので、N:Nの関連性となります。

1.クラス管理アプリの作成

次の画像とテーブルを参考にクラス管理アプリを作成します。

フィールドの種類	フィールド名	フィールドコード	備考
レコード番号	クラス番号	class_no	ー
文字列（１行）	クラスコード	class_code	ー
文字列（１行）	クラス名	class_name	ー
スペース	ー	student_list	テーブル表示スペース

2.生徒管理アプリの作成

次の画像とテーブルを参考に生徒管理アプリを作成します。

フィールドの種類	フィールド名	フィールドコード	備考
レコード番号	生徒番号	student_no	ー
文字列（１行）	生徒コード	student_code	ー
文字列（１行）	氏名	student_name	ー
ルックアップ	クラスコード	class_code	テーブル
文字列（１行）	クラス名	class_name	テーブル

サンプルコード

作成した「クラス管理アプリ」に下記のソースコードを参考にした JavaScript ファイルを作成し、適用します。
テーブルのHTMLのクラス名は、kintoneのスタイルに調和するよう、こちらのプラグイン用スタイルシートを参考にしています。こちらのGitHub上のスタイルシートをダウンロードし、アプリに反映してください。

解説

レコード詳細表示およびレコード編集イベントのブロックに生徒一覧テーブル生成処理を記述します。

REST APIを使って、生徒管理アプリからクラス登録した生徒の情報を取得します。尚、queryのパラメータには、クラスコードが一致するレコードのみを取得するように指定します。取得するフィールドは、レコード番号、「生徒コード」、「生徒氏名」となります。

レコードの取得が成功した場合に生徒一覧のテーブルを生成します。

生徒コードをクリックすると該当の生徒レコードを表示するようにリンクを設定します。

取得した生徒レコードから、「氏名」を表示します。

尚、クロスサイトスクリプティングの対策として、特殊文字をエスケープ処理しています。

動作確認

「生徒管理アプリ」、「クラス管理アプリ」それぞれにいくつかデータを入力します。生徒管理アプリから、いくつかクラスをルックアップで登録し、「クラスアプリ管理」上に生徒一覧のテーブルが表示されていることを確認します。

まとめ

こちらのQ&Aの回答にあるように詳細アプリを作成して、標準機能で対応も可能ですが、JavaScript APIでカスタマイズすれば、わざわざ詳細データ設定用のアプリを作成しなくて済みます。コード自体も意外とシンプルですので、是非試してみてください。

このTipsは、2022年7月版 kintoneで確認したものになります。

※デモ環境についての説明はこちら