kintoneの関連レコードを直接編集！kintoneをJavaScriptでカスタマイズしてみた

kintoneには、「関連レコード」という「別アプリの情報を表示できる機能」が備わっています。
関連する情報をkintone内から集約できる機能は非常に便利ですが、kintoneを使っている方の中には「表示されている関連レコードを直接編集できればいいのに」と思っている方も多いのではないでしょうか。

関連レコードの表示はkintoneに欠かせない機能ですが、編集するためには「詳細画面に移動→編集→元の画面に戻る」必要があります。
さらに、標準機能の関連レコードではテーブルデータの表示に対応していないのも不便な点です。

そこで今回は、テーブル形式のデータも含めて関連レコードを直接編集できるよう、JavaScriptでカスタマイズしたコムデックの開発事例を紹介します。
本記事の内容はこちらの動画でもご紹介しておりますので、あわせてご覧ください。

関連レコード一覧に表示されたデータを直接編集したい！

そもそも関連レコード一覧とは、kintone(キントーン)のレコード詳細画面で、条件に一致したレコードを一覧表示できる機能のことです。

例えば、顧客管理アプリでA社の顧客情報を開いた際、案件管理アプリにあるA社の案件情報も確認したいというときに役立ちます。
また、プロジェクト管理アプリであれば、1つのプロジェクトに関連する議事録や日報、見積情報などを紐づけておくことも可能です。

標準機能では、関連レコードを詳しく見たい場合や編集したい場合には、関連レコード一覧をクリックして参照先のレコードにジャンプする仕組みになっています。
関連レコードを表示している側では、編集はもちろん、新規レコードを追加することはできません。

以上が標準機能としての関連レコード一覧の仕様ですが、この仕様には1つ弱点があります。
それは、関連レコード一覧を見て「情報を追加･編集したい」と思ったときに、わざわざ別の画面で参照元アプリを開いて編集しなければならないということです。

そこでコムデックでは、いま見ている画面上で関連レコードを直接編集できるようにしたいと考えました。
これを実現できるプラグインやツールは現状ないため、JavaScriptでカスタマイズすることにしました。

kintoneのJavaScriptカスタマイズで役立つのが「kintone UI Component」

kintoneをJavaScriptでカスタマイズする際に役立つのが「kintone UI Component(キントーン ユーアイ コンポーネント)」です。

ここで言う「UI」とは画面上の見やすさや使いやすさ、「Component」は部品や構成要素を意味します。
つまり「kintone UI Component」は、kintoneの見やすさや使いやすさをカスタマイズするために必要なパーツが集約されたライブラリです。

ライブラリは無料で公開されているため、コードを1から書かなくても効率よくカスタマイズできるのがメリットです。
デスクトップ版のkintoneだけでなく、モバイル版にも対応しています。

さらに、ライブラリにあるパーツはkintoneらしいデザインと操作性になっていることも嬉しい点です。
ボタンやテーブル、チェックボックス、タブなどがkintoneと似ているため、ユーザーが違和感なく使えます。

今回のJavaScriptカスタマイズでも、このkintone UI Componentを利用していきます。

kintone UI Componentについては、こちらの記事でも詳しくご紹介しております！

▼kintoneの日報アプリをカスタマイズして入力コスト削減｜kintone UI Componentを使ったJavaScript開発事例

「編集ボタン」の追加で直接編集・新規登録が可能に

コムデックがもともと使っている「顧客管理アプリ」では、その顧客に紐づく案件情報や売上履歴を関連レコード一覧で表示されるようにしていました。

これらの関連レコード項目を、以下の手順で直接編集できるよう設定していきます。

1. 編集ボタンの設置
2. 編集フィールドの設置
3. テーブル編集の実装

はじめに、関連レコード一覧が表示される場所の右側にスペースを設置し、ボタンを表示します。
スペースの設定画面にある要素IDで「button‐space-(参照するアプリのフィールドコード)」と設定しました。

次に、関連レコード一覧が表示される場所の上側にもスペースを設置し、関連レコードを直接編集できるフィールドを設定します。
スペースの設定画面にある要素IDでは「custom‐table-space-(参照するアプリのフィールドコード)」と設定しました。
これにより、「編集」ボタンを押すことで関連レコードを直接編集できるようになっています。

加えて、編集フィールドの右側には「＋ボタン」を設置しており、こちらをクリックするとするとまるでテーブルを追加するような操作でレコードの新規登録もできるようになっています。

今回実装したのはこれだけではありません。
関連レコードとして表示している情報にサブテーブルの内容を含む場合には、サブテーブルの中身も編集できるようにしています。

例えば、以下の関連レコード元のアプリでは、サブテーブルに入力した金額の合計を自動計算しそれを関連レコードとして表示しています。

編集ボタンを押せば、商品名･数量･単価といった「その合計額を集計するために必要なテーブルの明細」も表示され、直接編集やサブテーブルの行追加もできるようになっています。

開発のポイントはJavaScriptによるひと工夫

今回のJavaScriptを使った開発では、既存レコードの編集だけでなく、新規登録もできるようにしたことがポイントです。
また、標準機能の関連レコード一覧機能ではサブテーブルを表示できませんでしたが、カスタマイズによって表示と編集まで可能になりました。

また、なるべくkintoneに近いデザインや操作性を実現するために、kintone UI Conponentを利用したこともポイントです。
サンプルコードをコピー＆ペーストして利用できるため、コードを全て自分で書くのに比べて、効率的に開発が進めることができました。
ただし、ルックアップフィールドの直接編集については、kintone UI Conponentで対応できなかったため自作しています。

別の画面で参照元のアプリを開かなくてもいま開いているアプリから直接データを編集できる環境を実現できたことで、気付いたときにサッとデータ更新･登録ができるようになり、kintoneで管理する情報の質が高まったこともメリットです。

kintoneはカスタマイズでもっと便利に！

今回の開発を通して、kintoneは少しカスタマイズするだけで、使い勝手が格段に良くなることを改めて実感しました。
1回の作業で削減できる時間は数秒かもしませんが、それが1日に何度も、従業員の数だけ積み重なると、組織全体では大きな差になります。

実務でkintoneを使う方なら、他にも「これができたらいいのに」「ここがちょっと面倒だな」と感じる場面があるかと思います。
kintoneはプラグインや連携ツールが豊富で、自由にカスタマイズできるのが魅力のツールなので、カスタマイズに挑戦してみてはいかがでしょうか。

ただ、企業さまからはよく「社内にITに詳しい人がいない」「既存業務が忙しすぎて、アプリ開発まで手が回らない」という声も聞かれます。
そんなときは、ぜひコムデックの「対面開発」をご利用ください。

対面開発では、kintoneを熟知したスタッフがお客さまのお悩みをお聞きして、その場でアプリを構築いたします。
完成したアプリをお渡しするだけではなく、対面で構築することで次のようなメリットがあります。

• その場で「あれもしたい」「これもしたい」とリクエストできる
• 実務に合わせて微調整ができる
• 構築のノウハウも覚えられる

必要に応じて、業務プロセスの見直しや担当者の育成までトータルでサポートさせていただきますので、お気軽にお問い合わせください。

「kintone対面開発」サービスページはこちら