タブ表示プラグイン

タブ表示プラグインのアイコン
FREEUI/UX改善初心者向けモバイル詳細編集追加

「項目が多く、目的の情報までスクロールするのが大変」「基本情報と履歴を分けて見たい」。タブ表示プラグインは、kintoneのフォームに配置した [タブ名] のラベルを目印に、項目をタブごとに切り替えて表示します。レコードの追加・編集・詳細画面で、見たい情報に合わせてフォームを整理できます。

こんな場面で活用できます

顧客管理や案件管理など、1つのレコードに複数の種類の情報をまとめているアプリにおすすめです。

アプリ タブの分け方の例 使い方
担当者管理 担当者情報/同一企業担当者 担当者の連絡先と、同じ企業の担当者一覧を切り替える
案件管理 基本情報/商談内容/対応履歴 確認する内容に応じて、必要な項目だけを表示する
申請管理 申請内容/明細/確認事項 入力や確認の順番に合わせて、項目を整理する

担当者管理アプリでの配置例

  1. 顧客名・顧客No.などの共通項目を、フォームの先頭に配置します。
  2. [担当者情報] のラベルを置き、その後に氏名・部署・電話番号などを並べます。
  3. [同一企業担当者] のラベルを置き、その後に関連する担当者の情報を配置します。

最初のタブラベルより前に置いた共通項目は、どのタブを選んでも上部に表示されます。

タブ表示プラグインの特長

🏷️

ラベルで簡単に区切る

フォームに半角の角括弧で囲んだ [タブ名] を置くだけ。タブごとにフィールドコードを指定する必要はありません。

📌

共通項目を上部に表示

最初のタブより前の項目は常に表示。顧客名や案件名を確認しながら、タブ内の情報を閲覧できます。

📝

追加・編集・詳細画面に対応

入力するときも、保存したレコードを確認するときも、同じタブの区切りを利用できます。

📱

モバイルへの適用を選べる

PCに加え、モバイルの追加・編集・詳細画面にも対応。「モバイル版でもタブを使用する」で適用を選択できます。有効時は、画面幅に応じてタブを横スクロールして表示します。

利用画面

担当者管理アプリの例です。「担当者情報」「同一企業担当者」のタブで表示する項目を切り替えます。タブより上の顧客名・顧客No.は共通項目として表示されます。

担当者管理アプリで、顧客情報の下に担当者情報と同一企業担当者のタブを表示した例
赤枠内がタブの切り替え部分です。画像をクリックすると拡大できます。

プラグイン仕様

プラグイン名 タブ表示プラグイン(TabDisplay)
バージョン 2.0.7
対応画面 レコード追加・編集・詳細画面(PC・モバイル)。モバイルへの適用は設定で選択できます。
モバイル設定 「モバイル版でもタブを使用する」をオンにするとタブを表示。オフの場合はタブ分けせず、タブ用ラベルを非表示にして項目を表示します。未設定の場合はオフです。
タブの指定方法 フォームのラベル本文に [タブ名] を設定
タブの範囲 指定ラベルの次から、次のタブラベルの直前まで。最後のタブはフォームの末尾まで
初期表示 最初のタブを表示
共通項目 最初のタブラベルより前に配置した項目は常に表示
料金 無料

タブの切り替えは表示の整理を行う機能です。フィールドの閲覧権限・編集権限や、保存済みデータは変更しません。

設定方法

  1. 1

    プラグインを追加する

    ダウンロードしたZIPをkintoneに読み込み、利用するアプリに「タブ表示プラグイン」を追加します。

  2. 2

    フォームにタブ用のラベルを配置する

    アプリのフォーム設定で、タブを開始したい位置にラベルを置きます。本文は [基本情報]、[対応履歴] のように、半角の角括弧でタブ名を囲んでください。ラベル本文には [タブ名] だけを入力します。

  3. 3

    タブに入れる項目を並べる

    ラベルの後に、そのタブで表示したい項目を配置します。次のタブの開始位置に別のラベルを置きます。共通で表示したい項目は、最初のタブラベルより前に配置してください。

    タブはフォームの行を単位に区切ります。タブ用ラベルは専用の行に配置し、同じ行に入力項目を並べないでください。

  4. 4

    モバイルへの適用を選択して保存する

    モバイルでもタブを使う場合は、「モバイル版でもタブを使用する」にチェックを入れ、「保存」をクリックします。モバイルでタブ分けをしない場合はチェックを外してください。PCのタブ表示には影響しません。

    設定が未保存の場合や、旧バージョンからの更新でこの項目が未設定の場合は、モバイルへの適用はオフです。モバイルで使い続ける場合も、設定画面でチェックして保存してください。

  5. 5

    アプリを更新して表示を確認する

    アプリを更新し、レコードの追加・編集・詳細画面で各タブを切り替えてください。モバイルでは、設定したオン・オフの動作と、タブを横スクロールして切り替えられることを実際の利用画面で確認してください。

モバイル版でもタブを使用する設定が追加されたタブ表示プラグインVer.2.0.6の設定画面
設定画面でラベルの配置方法を確認し、モバイル版にも適用するかどうかを選択できます。画像をクリックすると拡大できます。

よくある質問

タブが表示されない場合は?

ラベル本文が [基本情報] のように半角の [ ] で囲まれているか、タブ名が空になっていないかを確認してください。全角の [ ] や、括弧の外に説明文を加えたラベルはタブ用の指定として認識されません。プラグインの設定保存とアプリの更新も確認してください。

モバイル版でタブが表示されない場合は?

プラグイン設定の「モバイル版でもタブを使用する」にチェックを入れて保存し、アプリを更新してください。未設定の場合はオフです。有効にした場合、画面に収まらないタブは横スクロールして選択できます。

モバイル版だけタブを使わない設定にできますか?

はい。「モバイル版でもタブを使用する」のチェックを外して保存してください。モバイルではタブ分けせずに項目を表示し、タブ用ラベルは非表示になります。PCでは引き続きタブを利用できます。

タブ用のラベルは利用画面にも表示されますか?

区切りに使ったラベル自体は非表示になり、括弧の中の文字がタブ名として表示されます。

共通の項目をすべてのタブで見せられますか?

はい。最初の [タブ名] ラベルより前に配置してください。どのタブを選んでいる場合も上部に表示されます。

非表示のタブにある必須項目はどうなりますか?

kintoneの必須設定はそのままです。必要なタブに切り替えて入力してください。このプラグインは値の自動入力や入力チェックの解除を行いません。

タブで項目を隠すと、アクセス権も制限されますか?

いいえ。タブは画面の表示を切り替える機能です。情報の閲覧・編集を制限する場合は、kintoneのアクセス権を設定してください。

ほかの表示変更プラグインと併用できますか?

フォームの表示・非表示や配置を変更する機能と併用する場合は、テスト用アプリで各画面の表示と操作を確認してから導入してください。

無料利用時の案内バナーについて

無料でご利用の場合、Kintacoの有償プランをご案内する広告バナーが表示されることがあります。

  • 表示画面:PC・モバイルの一覧画面
  • 出現確率:30%(毎回必ず表示されるものではありません)
  • 契約済みドメイン:案内バナーは表示されません。
  • 閉じた後:同じブラウザー・同じkintoneドメインでは、全Kintacoプラグイン共通で24時間非表示になります。

広告を非表示にして利用したい場合は、有償プランの内容・お申し込み方法をご確認ください。

無料利用時に一覧画面へ表示されるKintaco有償プランの案内バナー
無料利用時の案内バナー表示例。右上の閉じるボタンで閉じられます。

無料ダウンロード

プラグイン本体は無料です。最新のZIPをダウンロードし、kintoneのプラグイン管理から取り込んで対象アプリに追加してください。導入後は利用者のアカウントで動作を確認してください。

タブ表示プラグインをダウンロード

関連記事・アップデート情報

自社に合わせたカスタマイズや開発のご相談

「プラグインの設定を自社環境に合わせてサポートしてほしい」「標準機能や市販プラグインでは実現できない独自の機能を追加したい」など、kintoneの導入・開発に関するご相談や伴走サポートを行っております。

お問い合わせ・ご相談

相談ボタンから進むと、フォームにプラグイン名が自動入力されます。お問い合わせ内容には、実現したい運用・対象画面をご記入ください。設定支援や個別カスタマイズの相談を承ります。継続的な設定・運用支援は有料サポートプランでご案内しています。