소개

1안건=1레코드(안건개요, 안건리더, 안건개시/종료예정)
1 태스크=1 서브테이블 행(작업 개요, 작업 담당자, 작업 개시/종료 예정)
이런 식으로, 안건(부모 태스크)과 거기에 묶는 아이 태스크를 관리되고 있는 패턴은 상당히 있는 것이 아닐까요.
또한 이 구성으로 모건트 차트 플러그인 등을 사용하면 상당히 편리하게 됩니다.

모 Gantt 차트 플러그인을 사용하면 아래와 같은 Gantt 차트 뷰를 볼 수 있습니다.
- 레코드 일람 화면···레코드(안건) 단위로의 Gantt 차트(=마스터 스케줄)
- 레코드 상세 화면···안건에 묶는 태스크의 간트 차트

욕심이 나온다

매우 편리하지만 욕심이 나오고 이런 것을 확인하고 싶습니다.
(전제···리더, 작업자 모두 복수의 안건을 병행해 진행하고 있는 것이 많다)

【리더】병합 태스크가 발생! 오늘 누가 뭐하고 있어
　→안건 횡단하면서 안건 레벨이 아니라 작업 레벨에서의 팀 멤버의 스케줄을 확인하고 싶다

【작업자】여러가지 안건을 병행중. 내일의 작업 예정은?
→ 자신의 내일의 작업 레벨에서의 스케줄을 확인하고 싶다

위와 같이 작업 수준에서 일정을 확인할 수 있도록 하고 싶습니다.
(지금 그대로는, 레코드 일람에서 그 보기 어려운 테이블을 전개하거나, 레코드 상세 화면에 들어가 확인할 수밖에 없습니다)

맞춤설정해보기

그렇다고 해서, 커스터마이즈로 어떻게든 해보고 싶습니다.
흐름적으로 Gantt 차트 뷰라고 생각되는 것 같습니다만, 여러 사정으로 단지 테이블 형식으로 표시합니다.
테이블을 그리려면 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라든지 두어 범기간 지정할 수 있도록 하는 것도 좋네요.
에러 처리 등은 넣고 있지 않습니다, 용서해 주십시오.