[kintone] 親タスクレコードにある子タスクサブテーブルから今日のタスクを抽出する

はじめに

1案件＝1レコード（案件概要, 案件リーダー, 案件開始/終了予定）
1タスク＝1サブテーブル行（作業概要, 作業担当者, 作業開始/終了予定）
こんな感じで、案件(親タスク)とそれに紐づく子タスクを管理されているパターンって結構あるんじゃないでしょうか。
更にこの構成で某ガントチャートプラグイン等を使用するとかなり便利になります。

某ガントチャートプラグインでは、下記のようなガントチャートビューを表示できます。

• レコード一覧画面・・・レコード(案件)単位でのガントチャート（＝マスタースケジュール）
• レコード詳細画面・・・案件に紐づくタスクのガントチャート

欲が出てくる

非常に便利ですが、欲が出てきてこんなことを確認したくなります。
（前提・・・リーダー、作業者ともに複数の案件を並行して進めていることが多い）

【リーダー】差し込みタスクが発生！今日誰が何やってるっけ
　→案件横断しつつ案件レベルではなく作業レベルでのチームメンバーのスケジュールを確認したい

【作業者】いろんな案件を並行中。明日の作業予定は？
　→自身の明日の作業レベルでのスケジュールを確認したい

以上のように、作業レベルでのスケジュールの確認をパッとできるようにしたくなります。
（今のままでは、レコード一覧であの見にくいテーブルを展開するか、レコード詳細画面に入って確認するしかありません）

カスタマイズしてみる

というわけで、カスタマイズでなんとかしてみたいと思います。
流れ的にガントチャートビューかと思われそうですが、諸事情でただただテーブル形式で表示します。
テーブルの描画にはDatatablesを使用します。（使ってみたかった）
とりあえずカスタマイズビューに表示してみたいと思います。

やりたいことを整理すると、
一覧ビューで表示されているレコードの中から、条件を満たすサブテーブル行を抽出し、表示する
となります。ついでなので以下の機能も入れておきます。

・自分のタスクは黄色く強調表示する
・行をクリックすると案件レコードに遷移する

完成イメージ

（サンプルデータを作るのが面倒だったのでほぼモザイクになってしまいました、すみません）

DataTablesの機能で生成される右上の検索窓に担当者の名前を入れたりすれば、担当者で絞り込みができます。お手軽ですね。

コード

（フィールド名は適宜置き換えてください）

renderTask.js

(function($) {
  'use strict';

  //予めカスタマイズビューを作っておき、viewIdを確認して入れます。
  const viewId = 0000000

  kintone.events.on('app.record.index.show', function(event) {
    //対象の一覧んビューでなければスキップします
    if(event.viewId !== viewId){
      return event;
    }
    
    //各レコードから当日分のサブテーブルを抜き出す
    let filteredRows = []

    //なんとなくluxonを使ってみたかっただけです
    const today = luxon.DateTime.now().toFormat("yyyy-MM-dd")

    //自分のタスクを強調表示するために使います
    const loginusercode = kintone.getLoginUser().code;

    //表示している案件レコードを回していきます
    event.records.forEach(record=>{
      const rows = record.タスクテーブル?.value;
      rows.forEach(row => {

        //テーブル内の開始日/予定日の範囲内に当日が含まれている行を抽出します。
        if(row.value.タスク開始予定日?.value <= today && row.value.タスク終了予定日?.value >= today){
          const body = {
            //担当者欄はユーザー選択フィールドの想定で、複数設定されている場合は/区切りで表示します
            担当者: row.value.作業担当者?.value.map(x=>x.name).join(" / "),

            //サブテーブルから値をとってきます
            開始日: row.value.タスク開始予定日?.value,
            終了日: row.value.タスク終了予定日?.value,
            タスク項目: row.value.タスク項目?.value,
            作業名: row.value.作業名?.value,
            タスク概要: row.value.タスク概要?.value,
            
            //親タスクとなるレコードから値をとってきます
            企業名: record.企業名?.value,
            案件名: record.案件名?.value,

            //行をクリックした時に案件レコードに遷移できるよう仕込みます
            url:`https://${document.domain}/k/${kintone.app.getId()}/show#record=${record.$id.value}&`,

            //自身のタスクを強調表示する為にフラグを仕込みます
            own: row.value.task_resource.value.find(user=>user.code == loginusercode) ? true : false
          };
          filteredRows.push(body);
        }
      });
    });
    
    //カスタマイズビューで以下のidを持つdiv等を用意しておきます。
    let $div = $("#taskList");

    //Datatablesのスタイル調整用のクラスを指定しておきます。
    $div.attr("class", "compact hover row-border cell-border");
    
    //というわけでDatatablesを使ってテーブルを描画します。
    $div.DataTable({
      data: filteredRows,
      columns: [
        { data: '担当者', title: '担当者' },
        { data: '開始日', title: '開始日' },
        { data: '終了日', title: '終了日' },
        { data: '企業名', title: '企業名' },
        { data: '案件名', title: '案件名' },
        { data: 'タスク項目', title: 'タスク項目' },
        { data: '作業名', title: '作業名' },
        { data: 'タスク概要', title: 'タスク概要' },
      ],
      displayLength: 100,
      'createdRow': function( row, data, dataIndex ) {

        //自分のタスクは黄色くします
        if(data.own){
          $(row).css({"backgroundColor":"#ffeaa5"});
        }
        
        //行をクリックした時に案件レコードを遷移させます
        $(row)
          // カーソールオーバー時の見た目を変化
          .css("cursor", "pointer")
          .click(function(e) {
            window.open(data.url)
        });
      },
    });
    return event;
  });
  
})(jQuery);

最後に

とりあえず本日分だけ見れるようにぱぱっと作りましたが、
datepickerとか置いて範期間指定できるようにするのもいいですね。
エラー処理などは入れておりません、ご容赦ください。