kintone レコード一覧画面で１行を2段表示できるプラグイン「2段表示プラグイン」


## Abstract
* kintone のレコード一覧画面で、2段表示できるプラグインを作ったよ！

https://github.com/Mistizz/2tierDisplay

* こんな感じで1つのレコードを2段表示できるよ！
![two-tier-display.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559502/cc1c1a11-0ce5-40a5-b139-f62fd1368da1.png)


## 発端

ある日、 **「Excelの進捗管理表をkintoneに移植したいんだよね」** というご要望を頂きました。
そのExcelの表（下の画像）を見てみると、どうやら各工程の完了日を記録していくタイプの管理表のようですが…

![スクリーンショット 2025-03-03 140959.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559502/aab94b46-5ccf-49af-b858-cf6ab438f309.png)

 **メモ書きが多い…**

本来、日付データだけを入力する想定のセルに、メモ書きがたくさん入力されていました。

このような表をkintoneに移植する場合、「日付とメモ書きをそれぞれ別のフィールドとしてそのまま分けて設定しする」が第一選択になろうかと思います。しかしそうすると、フィールド数がやたら多くなったり、一覧に表示しきれなくなったりします。使い勝手を大きく損いますし、Excel表での運用を大きく変えなきゃいけなくなったりもするので、ためらわれました。

**Excelでの使い勝手（運用）を大きく変えずにkintoneへ持ってくるにはどうするか…**
このプラグインは、そんな課題へアプローチする中で生まれました。

## 機能概要

「2段表示プラグイン」は、特定のフィールド同士の対応付けを設定することで、kintoneアプリの一覧画面において、**１つのレコードを2段で表示する機能**を提供します。

![two-tier-display.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559502/54e36e19-d19e-44fe-b503-38b2f47c0041.png)

設定画面で下記のように設定すると…
（設定は一覧ごとに保存できます）

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559502/df67fdc9-7b7d-487a-9133-f2353c29f525.png" width=80%>


下図のように、レコード一覧画面で２段表示されます。

![スクリーンショット 2025-03-07 085611.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559502/1d4fcbd3-a824-42e7-ab75-8066f4d13557.png)

省略表示された長文は、オンマウスで全文ポップアップされる標準機能も引き継いでいます。
もちろんレコード一覧画面からそのまま編集できます。

![スクリーンショット 2025-03-07 113530.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559502/ddfaf81f-38a2-49ca-8453-e635aa18bc7c.png)

## 使い方

### 1. インストール方法

1.  [GitHubリポジトリ](https://github.com/Mistizz/2tierDisplay) から最新のプラグインファイル（`2tierDisplay.zip`）をダウンロードします
2. kintoneシステム管理画面から「プラグイン」を選択します
3. 「読み込む」から、ダウンロードしたZIPファイルをアップロードします
4. アップロードしたプラグインを「アプリの設定」＞「設定」タブ＞「プラグイン」から有効化します

### 2. カテゴリとサブカテゴリの設定

1. プラグインを適用したいアプリの設定画面を開きます
2. 「プラグイン」タブから「2段表示プラグイン」の設定アイコンをクリックします
3. 以下の設定を行います：
    * 対象の一覧ビュー: アプリで作成されているすべての一覧から、2段表示を適用する一覧ビューを選択します
    * フィールドマッピング: 上段と下段のフィールドの組み合わせを設定します
       * 「上段フィールド」: 通常表示するフィールドを選択
       * 「下段フィールド」: 上段フィールドの下に表示するメモ欄などのフィールドを選択
    * 「マッピングを追加」ボタンで複数の組み合わせを設定できます
4. 設定が完了したら「この一覧の設定を保存」ボタンをクリックします
    * 別の一覧に切り替える前に必ず保存してください
    * 保存せずに一覧を切り替えると、最新の設定内容が失われます
5. すべての一覧の設定が完了したら「すべて保存」ボタンをクリックします

### 3. 設定可能なフィールドタイプ
以下のフィールドタイプが上段および下段フィールドとして設定可能です：

* テキスト（1行）
* テキスト（複数行）
* リンク
* 数値
* 計算
* ラジオボタン
* チェックボックス
* ドロップダウン
* 複数選択
* 日付
* 日時
* 時刻
* ユーザー選択
* グループ選択
* 組織選択
* レコード番号
* 作成日時
* 作成者
* 更新日時
* 更新者

### 4. 設定できないフィールドタイプ
以下のフィールドタイプは上段および下段フィールドとして設定できません：

* ステータス
* カテゴリー
* 作業者
* ラベル
* スペース
* 関連レコード一覧
* グループ
* テーブル

### 5. 注意事項
#### フィールドの表示設定

2段表示を設定するフィールドは、**対象の一覧ビューに表示されている必要があります**。
一覧ビューに表示されていないフィールドはドロップダウンリストに表示されず、選択できません。

#### 一覧ビューの設定
同じ名前の一覧ビューが複数存在する場合、プラグインが正常に機能しない場合があります。
**一覧ビューの名前は一意になるように設定してください**。

#### フィールド名の重複
同一の一覧において、下段フィールドに設定したフィールド同士でフィールド名が重複した場合、正常に動作しない場合があります。
これはレコード一覧のDOM中にフィールドコードが含まれておらず、フィールド名とフィールドIDの対応しか読み取れないためです。
**同じフィールド名のフィールドを下段フィールドとして設定しないようにしてください**。

#### 列幅の設定
2段表示を適用した状態で列幅を変更しようとすると、下段フィールドの値が範囲外になるため正常に動作しません
**2段表示を適用する前に、一覧ビューの列幅設定を完了させてください**。

#### 他のプラグインとの互換性
このプラグインの他プラグインとの競合調査は行っていません。
一覧画面のDOM操作を行う他のプラグインと競合し、正常に機能しなくなる恐れがあります。

## おわりに
２段表示プラグインは、「Excelから運用を変えずにkintoneへ移植する」を理念に据えてに制作しました。
Excelからkintoneへの移行に際して、１つの選択肢を提示できてたらいいなと思います。

あと、上にも書きましたが、レコード一覧画面のDOMを全力で操作してるので、おなじくレコード一覧画面のDOMを操作するプラグインやカスタマイズとはめちゃくちゃ相性悪いと思います…。この辺は今後の課題とさせてください。