このプラグインでできること
「タブ表示プラグイン」は、レコードの画面をタブ切替式に整理するプラグインです。
フォームに配置したスペースフィールドの位置にタブが表示されます。
タブを切り替えると、そのタブに割り当てたフィールドだけが表示されます。
項目数が多く縦に長くなったフォームを、コンパクトに整理できます。
主な機能は次のとおりです。
- スペースフィールドの位置に、親タブ（階層1）と子タブ（階層2）の2階層までタブを表示
- タブごとに、表示するフィールド・ラベル・罫線・スペース・グループ・テーブルを個別に選択
- 親タブごとに、子タブを表示するスペースフィールドを指定
- フィールドの値に応じて、特定の項目の表示／非表示を切り替える「フィールドの表示条件」
- タブ名にフィールドの値を埋め込む（レコードの内容に応じてタブ名が変わる）
- 階層ごとの配色・枠線・角の丸みのカスタマイズ（プレビュー付き）
- 設定内容のJSONファイルへの出力と、JSONファイルからの読み込み
動作環境・前提条件
2-1. 動作する画面
このプラグインは、次の画面で動作します。
| 画面 | 動作 |
|---|---|
| レコードの詳細画面 | 動作します |
| レコードの追加画面 | 動作します |
| レコードの編集画面 | 動作します |
| レコードの一覧画面 | 該当なし（タブは表示されません） |
| レコードの印刷画面 | 該当なし |
PC・モバイルのどちらでも、同じ設定で動作します。
💡 モバイルでも設定内容と操作方法は同じです。画面幅に合わせてタブの大きさと余白のみ自動調整されます。
2-2. 事前に必要な準備（スペースフィールドと要素ID）
設定を始める前に、アプリのフォームに「スペース」フィールドを配置し、「要素ID」を設定してください。
要素IDとは、スペースフィールドを識別するための名前です。
要素IDが設定されていないスペースフィールドは、プラグインの設定画面の選択肢に表示されません。
- 「アプリの設定」の「フォーム」を開きます。
- フォームに「スペース」フィールドを配置します。
- 配置した「スペース」フィールドの歯車アイコンをクリックします。
- 「設定」をクリックします。
- 「要素ID」に、半角英数字で任意の名前を入力します（例：
tabSpace）。 - 「保存」をクリックします。
- フォーム画面の「フォームを保存」をクリックします。
- 「アプリの設定」画面の「変更を反映」をクリックします。
スペースフィールドに要素IDを設定する
⚠️ タブの切り替え対象になるのは、このスペースフィールドが配置された行より下に配置された項目です。スペースフィールドと同じ行にある項目は、切り替え対象になりません。
⚠️ グループの中に配置したスペースフィールドは、選択肢には表示されますが、切り替え対象の項目を取得できません。スペースフィールドはグループの外に配置してください。
💡 スペースフィールドは、フォームのレイアウトで横幅をできるだけ広く設定することをおすすめします。横幅が狭いと、タブが折り返して表示されます。
タブで切り替える項目に、ラベル・罫線・スペースを含める場合は、それらにも「要素ID」を設定してください。
⚠️ 要素IDが設定されていないラベル・罫線・スペースは、表示を切り替えられないため、タブの表示項目として選択できません。設定画面では「要素ID未設定のため選択できません」と表示されます。フィールド・グループ・テーブルは、要素IDがなくても選択できます。
2-3. 2階層のタブを使う場合の準備
親タブの中にさらに子タブを表示し、かつ子タブを別の位置に表示したい場合は、スペースフィールドをもう1つ配置します。
- 「アプリの設定」の「フォーム」を開きます。
- 親タブ用のスペースフィールドより下の位置に、もう1つ「スペース」フィールドを配置します。
- 2-2 と同じ手順で、「要素ID」を設定します（例：
childSpace）。 - フォーム画面の「フォームを保存」をクリックします。
子タブ用のスペースフィールドを親タブ用より下に配置する
⚠️ 子タブ用のスペースフィールドは、必ず親タブ用のスペースフィールドより下に配置してください。上に配置した場合、選択肢に表示されません。
💡 子タブを親タブのすぐ下に表示する場合は、この準備は不要です。スペースフィールドは1つで動作します。
設定手順
3-1. 設定画面の全体構成
設定画面は、上部の操作ボタンと、4つのブロックで構成されています。
設定画面の全体
上部の操作ボタンは次のとおりです。
| ボタン | 内容 |
|---|---|
| 「設定保存」 | 設定を保存し、アプリへの反映まで自動で行います |
| 「×」（画面上部の右端） | 設定を保存せずに前の画面に戻ります |
| 「設定出力」（画面右上） | 現在の設定をJSONファイルでダウンロードします |
| 「設定読込」（画面右上） | JSONファイルから設定を読み込みます |
4つのブロックは次のとおりです。
| 番号 | ブロック名 | 内容 |
|---|---|---|
| 1 | 「タブを表示するスペースフィールド」 | 親タブを表示する位置を指定します |
| 2 | 「タブ設定」 | タブの作成と、タブごとに表示する項目を設定します |
| 3 | 「フィールドの表示条件」 | フィールドの値に応じた表示／非表示を設定します |
| 4 | 「タブの配色設定」 | タブの色や枠線を設定します |
💡 「2 タブ設定」と「3 フィールドの表示条件」は、「1 タブを表示するスペースフィールド」でスペースを選択すると表示されます。
3-2. タブを表示するスペースフィールドを選ぶ
- 設定画面の「1 タブを表示するスペースフィールド」を表示します。
- 「親タブ（階層1）を表示するスペース」で、2-2 で要素IDを設定したスペースを選択します。
「親タブ（階層1）を表示するスペース」を選ぶ
選択すると、「2 タブ設定」と「3 フィールドの表示条件」のブロックが表示されます。
⚠️ スペースを選択していない間は、「スペースフィールドを選択してください。」というメッセージが表示されます。要素IDが設定されたスペースフィールドがフォームにない場合、選択肢は表示されません。2-2 の手順で要素IDを設定してください。
⚠️ 設定後にこのスペースを変更すると、タブに割り当て済みの項目が対象外になり、選択が解除される場合があります。変更した場合は、必ず各タブの項目を選び直してください。
3-3. 親タブを作成する
- 設定画面の「2 タブ設定」で、「タブを追加」をクリックします。
「タブを追加」ボタン
タブが1つ追加され、その下にタブの編集エリアが表示されます。
追加したタブには、「タブ1」「タブ2」のように自動で名前が入ります。
- 「タブ名」に、タブに表示したい名前を入力します（例：基本情報）。
「タブ名」を入力する
- 必要な数だけ「タブを追加」をクリックし、手順2を繰り返します。
💡 タブがまだ1つもない場合は、「「タブを追加」からタブを作成してください。」と表示されます。
⚠️ 「タブ名」が空のままでは保存できません。保存時に「タブ名が未入力のタブがあります。」と表示されます。
3-4. 親タブで表示する項目を選ぶ
- 設定画面の「2 タブ設定」で、上部のタブ一覧から設定したいタブをクリックします。
- 「このタブで表示する項目（フィールド・ラベル・罫線など）」の一覧で、そのタブで表示したい項目のチェックボックスをクリックします。
タブで表示する項目にチェックを入れる
- 他のタブでも、手順1・2を繰り返します。
一覧は、フォームの行ごとに区切られて表示されます。
各行の左側の番号は、選択したスペースフィールドの次の行を「1」とした行番号です。
1つの行に複数の項目が並んでいる場合は、項目ごとに個別にチェックできます。
項目の種類は、名前の右側に次のいずれかで表示されます。
| 表示 | 対象 |
|---|---|
| 「フィールド」 | 通常のフィールド（文字列・数値・日付・選択肢・添付ファイルなど） |
| 「ラベル」 | ラベル（要素IDの設定が必要） |
| 「罫線」 | 罫線（要素IDの設定が必要） |
| 「スペース」 | スペース（要素IDの設定が必要） |
| 「グループ」 | グループ |
| 「テーブル」 | テーブル |
| 「その他」 | 上記以外（選択できません） |
💡 どのタブにもチェックを入れなかった項目は、タブを切り替えても常に表示されます。すべてのタブで共通して表示したい項目は、あえてチェックを入れないでください。
💡 同じ項目を複数のタブでチェックできます。その項目は、チェックしたすべてのタブで表示されます。
⚠️ 「スペース以下に対象となる項目がありません。」と表示される場合は、選択したスペースフィールドより下に項目が配置されていません。フォームのレイアウトを確認してください。
⚠️ 「子タブの表示先として使用中」と表示されているスペースは、チェックできません（グレーで表示されます）。3-6 で子タブの表示先に指定したスペースです。
⚠️ 「要素ID未設定のため選択できません」と表示されている項目は、チェックできません。要素IDが設定されていないラベル・罫線・スペースがあると、一覧の下に「要素IDが設定されていないラベル・罫線・スペースが ◯ 件あります。」と表示されます。タブで切り替えたい場合は、アプリの「フォーム」で各項目の設定を開き、「要素ID」を設定してください。
3-5. 子タブ（2階層）を設定する
親タブの中にさらにタブを作る場合の手順です。
- 設定画面の「2 タブ設定」で、子タブを作りたい親タブをクリックします。
- 「このタブの中にさらにタブを設定する（2階層）」にチェックを入れます。
「このタブの中にさらにタブを設定する（2階層）」にチェックを入れる
チェックを入れると、下部に「子タブ」のエリアが表示されます。
このとき、「子タブ1」という子タブが自動で1つ作成されます。
- 「子タブ名」に、子タブに表示したい名前を入力します。
- 子タブを増やす場合は、「子タブを追加」をクリックします。
- 追加した子タブの「子タブ名」を入力します。
子タブを追加して名前を入力する
⚠️ 「このタブの中にさらにタブを設定する（2階層）」のチェックを外すと、そのタブの子タブはすべて削除されます。
⚠️ 子タブ名が空のままでは保存できません。保存時に「「（タブ名）」に名称未入力の子タブがあります。」と表示されます。
3-6. 子タブの表示先スペースを指定する
子タブを表示する位置を指定します。
- 設定画面の「2 タブ設定」で、対象の親タブをクリックします。
- 「このタブの子タブを表示するスペース」で、表示先を選択します。
「このタブの子タブを表示するスペース」を選ぶ
選択肢は次のとおりです。
| 選択肢 | 動作 |
|---|---|
| 「指定なし（このタブの直下に表示）」 | 子タブが親タブのすぐ下に表示されます |
| 要素IDの名前 | 子タブが、そのスペースフィールドの位置に表示されます |
選択すると、「親タブ「（タブ名）」を選択した時、子タブが「（要素ID）」のスペースに表示されます。」と表示されます。
💡 親タブごとに別々のスペースを指定できます。親タブによって子タブの表示位置を変えられます。
⚠️ 「子タブ用のスペース候補がありません。」と表示される場合は、親タブのスペースより下に、要素IDを設定したスペースフィールドが配置されていません。2-3 の手順で配置してください。
表示先スペースを指定すると、項目の表示のされ方が変わります。
| 設定 | 表示のされ方 |
|---|---|
| 「指定なし（このタブの直下に表示）」の場合 | 親タブで選んだ項目のうち、選択中の子タブで選んだ項目だけが表示されます |
| 表示先スペースを指定した場合 | 親タブで選んだ項目のうち、子タブ用スペースより上にあるものは、その親タブを選択している間は常に表示されます。子タブ用スペース以下にあるものは、選択中の子タブに従って切り替わります |
💡 「取引先名」など、その親タブの中で常に見せたい項目は、子タブ用スペースより上に配置してください。子タブを切り替えても表示されたままになります。
3-7. 子タブで表示する項目を選ぶ
- 設定画面の「2 タブ設定」の「子タブ」エリアで、設定したい子タブをクリックします。
- 「この子タブで表示する項目」の一覧で、表示したい項目のチェックボックスをクリックします。
子タブで表示する項目にチェックを入れる
- 他の子タブでも、手順1・2を繰り返します。
「この子タブで表示する項目」に表示される候補は、親タブで選んだ項目のうち、子タブ用スペースより下にあるものだけです。
⚠️ 「まず親タブで表示する項目を選択してください。」と表示される場合は、親タブ側で項目が1つも選ばれていません。先に 3-4 の手順を行ってください。
⚠️ 「親タブで選択した項目のうち、子タブのスペース以下に該当する項目がありません。」と表示される場合は、親タブで選んだ項目がすべて子タブ用スペースより上にあります。子タブ用スペースより下の項目を、親タブ側でもチェックしてください。
⚠️ 親タブ側でチェックを外すと、その項目は子タブ側の選択からも自動的に外れます。
3-8. タブ名にフィールドの値を埋め込む
タブ名には、レコードのフィールドの値を埋め込めます。
- 設定画面の「2 タブ設定」で、対象のタブをクリックします。
- 「タブ名」に、
{{フィールドコード}}の形式で入力します。
タブ名にフィールドコードを埋め込む
例：案件: {{案件名}} と入力すると、レコードの「案件名」フィールドの値が「基幹刷新」であれば、タブ名は「案件: 基幹刷新」と表示されます。
文字と組み合わせて入力できます。
⚠️ 波かっこの中に入力するのは、フィールドの表示名（ラベル）ではなく「フィールドコード」です。フィールドコードは、「アプリの設定」の「フォーム」で、各フィールドの設定から確認できます。
💡 レコードの追加画面・編集画面では、対象フィールドの値を変更すると、タブ名も自動で切り替わります。
⚠️ 該当するフィールドコードが存在しない場合、その部分は空文字として表示されます。
3-9. タブ・子タブの並び替えと削除
並び替え
- 設定画面の「2 タブ設定」で、並び替えたいタブをドラッグします。
- 移動したい位置でドロップします。
タブをドラッグして並び替える
子タブも、「子タブ」エリアで同じ操作で並び替えられます。
ここでの並び順が、レコード画面でのタブの表示順になります。
⚠️ 親タブと子タブは、別々のエリアで並び替えます。親タブのエリアに子タブを移動することはできません。
タブの削除
- 設定画面の「2 タブ設定」で、削除したいタブをクリックします。
- 「このタブを削除」をクリックします。
「このタブを削除」ボタン
- 「削除しますか？」という確認ダイアログで、「削除する」をクリックします。
削除をやめる場合は「キャンセル」をクリックします。
子タブの削除
- 設定画面の「2 タブ設定」の「子タブ」エリアで、削除したい子タブをクリックします。
- 「子タブを削除」をクリックします。
- 「削除しますか？」という確認ダイアログで、「削除する」をクリックします。
3-10. フィールドの表示条件を設定する
フィールドの値に応じて、項目の表示／非表示を切り替える設定です。
タブの設定とは別に、追加で条件を付けるための機能です。
⚠️ タブで非表示になっている項目は、条件を満たしても表示されません。タブの設定が優先されます。
⚠️ 1つの項目に複数の条件（ルール）を設定した場合、すべての条件を満たすときだけ表示されます（AND条件）。
条件を追加する
- 設定画面の「3 フィールドの表示条件」で、「-- 条件を設定する項目を選択 --」のプルダウンから、条件を設定したい項目を選択します。
- 「条件を追加」をクリックします。
条件を設定する項目を選んで「条件を追加」をクリックする
選択した項目の条件カードが追加されます。
💡 条件を設定できる項目は、タブを表示するスペースより下にある、フィールド・グループ・テーブルのみです。ラベル・罫線・スペースには条件を設定できません。
💡 条件がまだ1つもない場合は、「条件はまだ設定されていません。上のプルダウンから項目を選んで追加してください。」と表示されます。
条件の内容を設定する
- 追加された条件カードの「フィールド選択」のプルダウンで、判定に使うフィールドを選択します。
- 右隣のプルダウンで、比較方法を選択します。
- さらに右の欄で、比較する値を指定します。
判定に使うフィールド・比較方法・値を指定する
比較方法は、選択したフィールドの種類によって変わります。
| フィールドの種類 | 選択できる比較方法 |
|---|---|
| 文字列（1行）・文字列（複数行）・リッチエディター・リンク など | 「＝」「≠」「含む」「含まない」「空」「空でない」 |
| 数値・計算 | 「＝」「≠」「＞」「＜」「≧」「≦」「空」「空でない」 |
| 日付・日時・時刻 | 「＝」「≠」「＞」「＜」「≧」「≦」「空」「空でない」 |
| ラジオボタン・ドロップダウン・チェックボックス・複数選択 | 「次のいずれかを含む」「次のいずれも含まない」 |
| ユーザー選択・組織選択・グループ選択 | 「次のいずれかを含む」「次のいずれも含まない」 |
値の指定方法は、フィールドの種類によって変わります。
| フィールドの種類 | 値の指定方法 |
|---|---|
| 選択肢のフィールド（ラジオボタンなど） | 欄をクリックすると選択肢の一覧が開きます。該当する選択肢をクリックしてチェックします |
| ユーザー選択・組織選択・グループ選択 | 欄をクリックすると一覧が開きます。「検索...」の欄に文字を入力して絞り込めます |
| それ以外 | 「値を入力」の欄に、比較する値を直接入力します |
選択肢の一覧から値を選ぶ
💡 比較方法に「空」「空でない」を選んだ場合は、値の指定は不要です。「（値不要）」と表示されます。
⚠️ 「フィールド選択」を変更すると、入力済みの値はクリアされます。フィールドを変更した場合は、値を指定し直してください。
⚠️ テーブル・グループ・添付ファイル・関連レコード一覧は、判定に使うフィールドとして選択できません。
条件（ルール）を追加・削除する
1つの項目に、複数の条件を設定できます。
- 条件カードの「＋ ルールを追加」をクリックします。
- 追加された行で、フィールド・比較方法・値を設定します。
条件を1行だけ削除する場合は、その行の右端の「×」をクリックします。
項目ごと条件を削除する場合は、条件カード右上の「条件を削除」をクリックします。
「＋ ルールを追加」と「条件を削除」
3-11. タブの配色を設定する
- 設定画面の「4 タブの配色設定」を表示します。
- 「階層1（親タブ）」の各項目で、色や表示を設定します。
- 「階層2（子タブ）」でも、同じように設定します。
タブの配色設定
設定できる項目は次のとおりです。
| 項目 | 内容 |
|---|---|
| 「選択時の背景色」 | 選択中のタブの背景色 |
| 「選択時の文字色」 | 選択中のタブの文字色 |
| 「非選択時の背景色」 | 選択していないタブの背景色 |
| 「非選択時の文字色」 | 選択していないタブの文字色 |
| 「タブの枠線」 | 各タブの周囲に枠線を表示するかどうか（「表示する」にチェック） |
| 「タブストリップの下線」 | タブが並ぶ帯全体の下線を表示するかどうか（「表示する」にチェック） |
| 「枠線・下線の色」 | 枠線と下線の色 |
| 「角の丸み」 | タブの角の丸みを0〜8pxで指定 |
色の指定方法は2通りあります。
- 左側の色見本をクリックし、カラーパレットから色を選ぶ
- 右側の入力欄に、カラーコード（例：
#0f9499）を直接入力する
色見本とカラーコードの入力欄
「角の丸み」は、つまみを左右にドラッグして調整します。
現在の値は「角の丸み: 2px」のように表示されます。
設定した内容は、下の「プレビュー」で確認できます。
プレビューには「選択中タブ」「タブ」「タブ」の3つが並び、設定を変えるとその場で見た目が変わります。
配色のプレビュー
初期値は次のとおりです。
| 項目 | 階層1（親タブ） | 階層2（子タブ） |
|---|---|---|
| 「選択時の背景色」 | #0f9499 | #ffffff |
| 「選択時の文字色」 | #ffffff | #0f9499 |
| 「非選択時の背景色」 | #eef3f7 | #f5f9fc |
| 「非選択時の文字色」 | #66737d | #88929c |
| 「枠線・下線の色」 | #0f9499 | #cbd6e0 |
| 「角の丸み」 | 2px | 2px |
| 「タブの枠線」 | 表示する | 表示する |
| 「タブストリップの下線」 | 表示する | 表示する |
💡 「枠線・下線の色」は、「タブの枠線」と「タブストリップの下線」のどちらかにチェックが入っているときだけ表示されます。
💡 「タブストリップの下線」にチェックが入っている場合、タブの角は上側だけが丸くなります。チェックを外すと、四方の角が丸くなります。
3-12. 設定を保存する
- 設定画面上部の「設定保存」をクリックします。
「設定保存」ボタン
保存が完了すると、「プラグイン設定を保存しました」と表示されます。
アプリへの反映（変更を反映）まで自動で行われるため、別途「変更を反映」を押す必要はありません。
💡 キーボードの Ctrl キーを押しながら S キーを押しても保存できます（Macの場合は Command キー）。
保存前にチェックが行われます。次のメッセージが表示された場合は、内容を修正してから保存し直してください。
| メッセージ | 対応 |
|---|---|
| 「タブを表示するスペースフィールドを選択してください。」 | 3-2 の手順でスペースを選択します |
| 「タブを1つ以上設定してください。」 | 3-3 の手順でタブを作成します |
| 「タブ名が未入力のタブがあります。」 | すべてのタブに「タブ名」を入力します |
| 「「（タブ名）」に子タブを1つ以上設定するか、子タブ設定をオフにしてください。」 | 子タブを追加するか、「このタブの中にさらにタブを設定する（2階層）」のチェックを外します |
| 「「（タブ名）」に名称未入力の子タブがあります。」 | すべての子タブに「子タブ名」を入力します |
⚠️ 保存せずに設定画面を閉じると、編集内容は破棄されます。設定画面上部の「×」をクリックすると、保存せずに前の画面へ戻ります。
⚠️ 保存時に、現在のフォームに存在しない項目の選択は自動的に取り除かれます。フォームのレイアウトを変更した後は、設定画面で各タブの項目を確認してください。
3-13. 設定をファイルに出力・読込する
設定内容をJSONファイルとして保存し、他のアプリで読み込めます。
設定を出力する
- 設定画面右上の「設定出力」をクリックします。
設定画面右上の「設定出力」「設定読込」
tab-config-（アプリID）.json というファイル名でダウンロードされます。
設定を読み込む
- 設定画面右上の「設定読込」をクリックします。
- ファイル選択のダイアログで、出力したJSONファイルを選択します。
- 「設定を読み込みますか？」という確認ダイアログで、「読み込む」をクリックします。
「設定を読み込みますか？」の確認ダイアログ
読み込みが完了すると、「設定を読み込みました」と表示されます。
- 画面の内容を確認します。
- 「設定保存」をクリックして確定します。
⚠️ 「設定読込」を実行すると、現在の設定はすべて上書きされます。読み込んだだけでは確定されません。必ず「設定保存」をクリックしてください。
⚠️ 読み込んだファイルの内容のうち、このアプリのフォームに存在しない項目やフィールドは取り込まれません。取り込まれなかった内容がある場合は、完了メッセージの下に表示されます。表示された内容は、設定画面で設定し直してください。
読み込みに失敗した場合は、次のメッセージが表示されます。
| メッセージ | 原因 |
|---|---|
| 「読み込みに失敗しました」／「JSONファイルを解析できませんでした。ファイルの内容を確認してください。」 | ファイルの中身が壊れている、またはJSON形式ではありません |
| 「設定ファイルの形式が正しくありません」／「タブ表示プラグインでダウンロードした設定ファイルを選択してください。」 | このプラグイン以外の設定ファイルを選択しています |
| 「設定の読み込みが完了していません。」 | 設定画面の読み込みが終わっていません。少し待ってから操作してください |
操作手順
4-1. レコード詳細画面でタブを切り替える
- レコードの一覧画面で、レコードを開きます。
- スペースフィールドの位置に表示されたタブから、表示したいタブをクリックします。
クリックしたタブに割り当てた項目だけが表示され、他の項目は非表示になります。
選択中のタブは、設定した「選択時の背景色」「選択時の文字色」で表示されます。
- 子タブが設定されている場合は、表示された子タブから、表示したい子タブをクリックします。
レコード詳細画面に表示されたタブ
💡 画面をスクロールしても、タブは画面の上部に固定されて表示され続けます。長いフォームでも、スクロールせずにタブを切り替えられます。
💡 どのタブにも割り当てられていない項目は、タブを切り替えても常に表示されます。
💡 行の中のすべての項目が非表示になった場合、その行ごと詰めて表示されます。余白は残りません。
4-2. レコードの追加・編集画面で使う
- レコードの追加画面、または編集画面を開きます。
- 表示したいタブをクリックします。
レコード編集画面に表示されたタブ
操作方法は詳細画面と同じです。
追加画面・編集画面では、次の動作が加わります。
- タブ名に
{{フィールドコード}}を設定している場合、対象フィールドに値を入力すると、タブ名がその場で切り替わります。 - 「フィールドの表示条件」を設定している場合、対象フィールドの値を変更すると、その場で表示／非表示が切り替わります。
⚠️ レコードの詳細画面では、「フィールドの表示条件」は画面を開いた時点の値で判定されます。
⚠️ 非表示になっている項目にも、入力済みの値はそのまま保持されます。タブを切り替えて表示すれば、値を確認・編集できます。
4-3. タブの選択状態が保持される
選択していたタブと子タブは、ブラウザのセッション中は保持されます。
- レコードを保存して詳細画面に戻ったとき
- 画面を再読み込みしたとき
いずれの場合も、直前に選択していたタブが選択された状態で表示されます。
💡 保持はアプリごと・スペースごとに行われます。別のアプリのタブの状態には影響しません。
⚠️ ブラウザのタブを閉じると、選択状態はリセットされます。次に開いたときは、いちばん左のタブが選択されます。
4-4. 一覧画面での動作
該当なし。このプラグインは、レコードの一覧画面では動作しません。
4-5. 警告メッセージが表示された場合
レコードを開いたときに、次の警告が表示されることがあります。
「タブの設定とフォームの構成に齟齬があります。プラグイン設定を確認してください。※フィールドやラベル・罫線の要素IDを変更した可能性があります。」
これは、プラグインの設定後に、タブに割り当てたフィールドやスペースをフォームから削除したり、フィールドコード・要素IDを変更したりしたときに表示されます。
次の手順で設定を見直してください。
- 「アプリの設定」からプラグインの設定画面を開きます。
- 「2 タブ設定」で、各タブの「このタブで表示する項目（フィールド・ラベル・罫線など）」を確認します。
- 必要な項目にチェックを入れ直します。
- 「設定保存」をクリックします。
制限事項・注意点
5-1. 動作範囲に関する制限
- レコードの一覧画面・印刷画面では動作しません。詳細画面・追加画面・編集画面のみが対象です。
- タブは1つのスペースフィールドにつき1組です。同じアプリで複数の独立したタブ群を作ることはできません。
- タブの階層は2階層（親タブ・子タブ）までです。
5-2. フォームのレイアウトに関する制限
- タブを表示するスペースフィールドには、必ず「要素ID」を設定してください。設定していないスペースフィールドは選択肢に表示されません。
- 切り替え対象になるのは、スペースフィールドが配置された行より下にある項目です。同じ行にある項目は対象になりません。
- グループの中に配置したスペースフィールドは、選択肢には表示されますが、切り替え対象の項目を取得できません。グループの外に配置してください。
- 子タブを別のスペースに表示する場合、そのスペースフィールドは親タブ用スペースフィールドより下に配置してください。
- 子タブの表示先に指定したスペースは、タブの表示項目としてチェックできません。
- ラベル・罫線・スペースをタブで切り替えるには、それぞれに「要素ID」が必要です。要素IDがないものは選択できません。
- モバイルでは、kintoneの制限により、罫線の表示の切り替えが効かない場合があります。
- スペースフィールドの横幅が狭いと、タブが折り返して複数行で表示されます。横幅は広めに設定してください。
5-3. タブ設定に関する制限
- タブ名・子タブ名は必須です。空欄のままでは保存できません。
- 「このタブの中にさらにタブを設定する（2階層）」にチェックを入れた場合、子タブを1つ以上作成する必要があります。
- 子タブで選択できる項目は、親タブでチェックした項目に限られます。
- 親タブでチェックを外すと、その項目は子タブの選択からも自動的に外れます。
- どのタブにも割り当てていない項目は、常に表示されます。非表示にしたい項目は、いずれかのタブに割り当ててください。
- フォームのレイアウトを変更した後は、設定画面で項目の選択内容を確認してください。存在しなくなった項目の選択は、保存時に自動的に取り除かれます。
5-4. フィールドの表示条件に関する制限
- タブで非表示になっている項目は、条件を満たしても表示されません。タブの設定が優先されます。
- 複数の条件（ルール）を設定した場合は、すべてを満たすときだけ表示されます（AND条件）。「いずれかを満たす」（OR条件）の設定はできません。
- 条件を設定できる項目は、フィールド・グループ・テーブルのみです。ラベル・罫線・スペースには設定できません。
- 判定に使うフィールドとして、テーブル・グループ・添付ファイル・関連レコード一覧は選択できません。
- 詳細画面では、画面を開いた時点の値で判定されます。追加画面・編集画面では、値の変更に追従して再判定されます。
- テーブルの中のフィールドは、判定に使えません。
5-5. タブ名のフィールド値埋め込みに関する制限
- 波かっこの中に入力するのは、フィールドの表示名ではなく「フィールドコード」です。
- 存在しないフィールドコードを指定した場合、その部分は空文字として表示されます。
- テーブルの中のフィールドの値は埋め込めません。
5-6. その他
- 選択中のタブの状態は、ブラウザのセッション中のみ保持されます。ブラウザのタブを閉じるとリセットされます。
- 「設定読込」で読み込んだ内容は、「設定保存」を押すまで確定しません。
- 「設定読込」を実行すると、現在の設定はすべて上書きされます。事前に「設定出力」でバックアップを取ることをおすすめします。
- 「角の丸み」に指定できるのは0〜8pxの範囲です。