# レコード詳細画面で関連レコードの読み込みを完了したら処理を実行したい

**URL:** <https://community.cybozu.dev/t/topic/67>\
**Category:** kintone 開発相談\
**Created:** [2022 年 9 月 15 日午前 8:19 UTC](https://community.cybozu.dev/t/topic/67 "2022-09-15T08:19:55Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1639](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account1639](https://community.cybozu.dev/u/Legacy_Account1639)\
**Post date:** [2022 年 9 月 15 日午前 8:19 UTC](https://community.cybozu.dev/t/topic/67/1 "2022-09-15T08:19:55Z")

</div>

いつもお世話になっております。

今回、関連レコードを表示する際の動作についてお伺いしたいことがあり、質問させていただきます。

**・実現したいこと**

フォーム内に合計金額の欄と関連レコードの物の名称と金額が表示されるアプリがあります。

レコードの詳細画面を表示した際に関連レコードの金額を合計し、レコードに保存されている合計金額と異なっていたら、計算した結果の金額にレコードを変更する機能を実装したいです。

**・問題**

レコードの詳細画面を表示した際に計算を行うという処理を組めばよいのかと考えたのですが、詳細画面表示時のイベント、app.record.detail.show のタイミングでは関連レコードの読み込みをしていないと記載がありました

[https://developer.cybozu.io/hc/ja/articles/201941974-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E8%A9%B3%E7%B4%B0%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88](https://developer.cybozu.io/hc/ja/articles/201941974-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E8%A9%B3%E7%B4%B0%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88)

&nbsp;

そのため、関連レコードの読み込みが完了したタイミングなどで実行できないかと調べていたのですが、そのタイミングに対応したイベントがあるのか分かりませんでした。

このようなタイミングで動作を行いたい場合、DOM操作でなければできないのでしょうか

もし対応したタイミングがあるのでしたら教えていただきたいです。

DOM操作の場合、どのような記述が必要なのか教えていただきたいです。

&nbsp;

よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2757](https://avatars.discourse-cdn.com/v4/letter/l/65b543/32.png) [@Legacy\_Account2757](https://community.cybozu.dev/u/Legacy_Account2757)\
**Post date:** [2022 年 9 月 15 日午後 11:57 UTC](https://community.cybozu.dev/t/topic/67/2 "2022-09-15T23:57:56Z")

</div>

Sei\_EL様

検証してみましたが，  
関連レコードは確かに「イベント発生時」には取得できないようです．  
関連レコードをAPIでGETすることもできませんでした．  
（GETしたレコード情報に関連レコードが含まれていない）  
詳細画面が表示されてから読み込んでいるのだから当然といえば当然なのですが…．

なので，関連レコードではなく，  
関連レコードと同じ条件で対象アプリのレコードそのものをAPIでGETするのはいかがでしょうか．  
こちらのほうが他のデータの処理もできるので，自由度は高いと思います．  
同じようなことをしている例もありました．  
[kintoneのカスタマイズ。関連レコードのデータを集計・計算する。](https://www.gotop.co.jp/kintonesi20220113/)  
参考になれば幸いです．

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2534](https://avatars.discourse-cdn.com/v4/letter/l/e9a140/32.png) [@Legacy\_Account2534](https://community.cybozu.dev/u/Legacy_Account2534)\
**Post date:** [2022 年 9 月 16 日午前 12:00 UTC](https://community.cybozu.dev/t/topic/67/3 "2022-09-16T00:00:08Z")

</div>

DOM操作はAPIリミット（1アプリ上限10000リクエスト/日）を消費しないメリットはありますが、サポート対象外のため保守面でそれなりの知識が必要です。

正攻法でいくと下記のような処理になります。

1. レコード詳細画面表示時に、関連レコードをAPIで取得し、合計金額と比較
2. 金額が異なっている場合は、当レコードをAPIで更新（\*1）
3. 更新結果を反映させるために画面をリロード（金額が一致する場合は不要）

※レコード画面表示時に毎回APIでリクエストすることになるため、閲覧数が多いとAPIリミットを超えてしまう可能性もあります。

DOM操作する場合は、

1. レコード詳細画面表示時に、関連レコードが表示されるの要素の枠に対して MutationObserver（\*2）を設定し、内容の変化を監視
2. 関連レコードが表示されたタイミングで計算対象となる要素を取得し（50件以上はページングも考慮）、合計金額と比較
3. 金額が異なっている場合は、当レコードをAPIで更新（\*1）
4. 更新結果を反映させるために画面をリロード（金額が一致する場合は不要）

また別の方法として、関連レコード先で保存されたら該当するの関連レコード設定元のレコードを更新する方法もあります。アプリの設計次第ですが、この方法だとAPIリミットは最小限に収めることができます。

参考になりましたでしょうか？ご不明な点がありましたら気兼ねなくご質問ください。

\*1 閲覧できるユーザーは更新権限があることが条件（APIトークンを使って回避する方法もあります）  
\*2 [https://developer.mozilla.org/ja/docs/Web/API/MutationObserver](https://developer.mozilla.org/ja/docs/Web/API/MutationObserver)

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1639](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account1639](https://community.cybozu.dev/u/Legacy_Account1639)\
**Post date:** [2022 年 9 月 16 日午前 1:32 UTC](https://community.cybozu.dev/t/topic/67/4 "2022-09-16T01:32:10Z")

</div>

TO様

川村様

コメントありがとうございます。

いただいた内容を拝見しますと、関連レコードをAPIで取得する方法を用いることでやりたいと思っていた操作が出来そうなことと、

機能を組み込むアプリではAPIの上限や更新権限といった条件は問題ないため、正攻法の

1. レコード詳細画面表示時に、関連レコードをAPIで取得し、合計金額と比較
2. 金額が異なっている場合は、当レコードをAPIで更新
3. 更新結果を反映させるために画面をリロード（金額が一致する場合は不要）

という手順で組んでみようと思います。

実際に処理を組む中で分からない点が出ましたら、質問させていただきますが、今回はありがとうございました。

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 6 月 10 日午前 1:37 UTC](https://community.cybozu.dev/t/topic/67/5 "2024-06-10T01:37:41Z")

</div>

クローズされました: 2024 年 6 月 10 日午前 1:37 UTC

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。
