【#kintone100日チャレンジ】Day 8: 詳細画面のテーブルを見やすくする「テーブル・プラス」を作ってみた

面倒解決エンジニアの森田ユウゴです。
台湾からお届けする「#kintone100日チャレンジ」の記念すべき 8 日目。
昨日までの2回は実用性に欠ける開発だったので、現実的に使えそうなkintoneの悩みを解決してみました。

👉 #kintone100日チャレンジの概要はこちら

本日は、kintoneとRDBで最も違う点と言える「テーブル」をより便利に閲覧するための「Subtable Plus（テーブル・プラス）」を開発しました！

「Subtable Plus（テーブル・プラス）」について

🎯 なぜ開発したか？（現場の課題とベネフィット）

• 現場の「不」: kintoneのテーブルは、行数や列数が増えると画面を大きく圧迫し、スクロール地獄に陥りがちです。特定の列だけ見たい、特定の行だけ非表示にしたい、テキストエリアの長文が邪魔、サクッとCSVで取り出したい…といった「閲覧時」の細かな不便が積み重なり、テーブルを避けることも多いです。
  一方、ルックアップなどせずに手軽にデータ入力をしたい！という場面では必須のため、基本機能では悩みながら使うことも多いです。
• 導入後の世界（ベネフィット）: 特定行数列など画面がスッキリ！検索機能で目的の行に一瞬でアクセスでき、見たい列だけを絞り込んで確認できます。ワンクリックでのCSVコピー機能により、別ツールへのデータ転記の手間とミスを撲滅します。

✨ これで出来ること（機能概要）

まずはこちらをご覧ください。

• スッキリ見やすい表示制御: アコーディオン（もっと見る）やページング機能で長すぎるテーブルをスッキリ収納。セル内の長文も「続きを読む」で折りたたみ可能です。
• 高度なデータ探索・操作: Cybozu CDNが用意してくれているライブラリ「DataTables」を用いたソート、検索＆キーワードハイライト機能。さらに、列ごとの表示/非表示切り替えや、不要な行の一時非表示にも対応しています。
• 実務に寄り添う便利機能: 行番号の自動付与、ワンクリックでクリップボードへ送れる「CSVコピー機能」、そして印刷時には隠れた行を自動で全展開する機能など、かゆいところに手が届く仕様です。

課題

現時点では下記のような課題が残っています。

• UI/UXと設定画面の最適化
    「出来ることを確認する」ことが第一の目的だったため、一つ一つの機能を精査しきれておらず、最適な見た目とは言えない部分があります。また、設定画面も項目を羅列しただけで直感的に設定しづらいため、上部にプレビューなどを配置する余地があります。テーブルを見る中での「不便」はある程度洗い出せたので、もう少しブラッシュアップすれば劇的に便利になりそうです。
• 入力画面への非対応
    あくまで「レコード詳細画面（閲覧時）」のみを対象としているため、編集画面での入力のしやすさ向上にはまだ貢献できていません。
• あくまでDOM操作
    AIに対してはgetFieldElement(id)で取得した値をもとに雑に実装をしてもらったのですが、かなり飲み込みが早かったです。
  しかし、DOM操作なのでkintoneのアップデートには追従が必要です。

さいごに

明日もお楽しみに！

下記のブログもご覧ください！
👉 【#kintone100日連続チャレンジ】AIにkintoneカスタマイズを100%任せたらどこまでいけるか？現役フリーランスの「100 Days of kintone Hacks」始動！
👉 ココナラで「kintone有資格者が導入や運用の相談にのります」サービスを開始します！

2026/4/15追記…下記の通り、ソースコードとプロンプトについては公開を停止します。

#kintone100日チャレンジ 方針変更

Githubの公開を停止します。

免責に書いてきた「ほぼ100%AI生成」のリスクが伝わらず、いつの間にか本番適用される危うさを察知しました。
また、私が100％AIで納品する人材だと思われるのも本意ではないので…

詳細は記事にて！👇https://t.co/5etpecPA8A

— 森田ユウゴ@マジナライフ (@majinalife_blog) April 15, 2026