テーブル内文字列フィールド制御

[Atsushi]

キントーンのテーブル制御について、教えていただければ幸いです。

テーブルに4つの文字列フィールドがあり、そのうち3つのフィールドを編集不可としたいです。
ここでいう編集不可とはカスタマイズによる値の自動取得は可能だが手編集ができない状態となっていることとなります。

下記が今回うまく動いていないコードですが、1行目は思い通りの制御ができているのですが、2行目以降追加した行はすべてのフィールドが編集可能となってしまいます。

どこが間違っているかご教示いただければ幸いです。

(function() {
  "use strict";
  kintone.events.on([
      'app.record.create.show', 
      'app.record.edit.show',
      'mobile.app.record.create.show', 
      'mobile.app.record.edit.show'
  ], function(event) {
      // テーブルのフィールドコード
      const tableFieldCode = "作業リスト";

      // 無効化する文字列フィールドコードのリスト（textField1以外）
      const stringFieldCodes = ["textField2", "textField3", "textField4"];

      // テーブルの行を取得
      const table = event.record[tableFieldCode].value;

      // すべての行の textField2, textField3, textField4 を無効化
      table.forEach(row => {
          stringFieldCodes.forEach(fieldCode => {
              row.value[fieldCode].disabled = true; // フィールドを無効化
          });
      });

      return event;
  });
})();

また、可能であれば非活性状態でもグレーアウトしないようにできたりしますでしょうか？

[Maple (もみじ)]

/ja/kintone/docs/js-api/events/create/create-change-event/

changeを含むイベントで、テーブルを指定すると、行追加をトリガーにできます。
これで追加された行にフィールド編集不可を適用すればいいです。

[puppet]

  kintone.events.on([
      'app.record.create.show', 
      'app.record.edit.show',
      'mobile.app.record.create.show', 
      'mobile.app.record.edit.show'
  ], function(event) {
    // ～
  })

使用しているイベントが↑だけなので、「追加画面を開いたとき」か「編集画面を開いたとき」にしか内部の処理が走っていないのではないでしょうか。
レコード編集画面でフィールドの値を変更したときのイベントを参考に、「テーブルの内容が変わったとき」にも発生するよう追加してみるのはどうでしょうか？

[Maple (もみじ)]

:disabled - CSS: カスケーディングスタイルシート | MDN

グレーアウト解除は、このCSSでできますね。

input:disabled で編集不可の文字列（1行）フィールドを選択し
background で背景色を指定します。

効かなかったら !important を付けてください。

[Atsushi]

ありがとうございました。
無事理想通りの挙動を実現できました！

追伸

挙動を確認していたところカスタマイズでの入力も排除される仕様となってしまっておりました。
自分としては”.disabled”が悪さをしていると思っているのですが、手入力だけを禁止する代替案をご教示いただけないでしょうか？

(function() {
  "use strict";

  // フィールドコード
  const tableFieldCode = "作業リスト";
  const stringFieldCodes = ["工番", "車種", "品名", "部品名"];

  // フィールドの無効化処理
  function disableFields(event) {
      const record = event.record;
      const table = record[tableFieldCode].value;

      // すべての行の 工番, 車種, 品名 を無効化
      table.forEach(row => {
          stringFieldCodes.forEach(fieldCode => {
              row.value[fieldCode].disabled = true;
          });
      });

      return event;
  }

  // レコード表示時に無効化
  kintone.events.on([
      'app.record.create.show', 
      'app.record.edit.show',
      'mobile.app.record.create.show', 
      'mobile.app.record.edit.show'
  ], disableFields);

  // テーブル変更時に無効化処理を適用
  kintone.events.on([
      'app.record.create.change.' + tableFieldCode,
      'app.record.edit.change.' + tableFieldCode,
      'mobile.app.record.create.change.' + tableFieldCode,
      'mobile.app.record.edit.change.' + tableFieldCode
  ], function(event) {
      return disableFields(event); // テーブルの変更時にも無効化を適用
  });

})();

生成AIの手助けを借りると

(function() {
    "use strict";

    const tableFieldCode = "作業リスト";
    const stringFieldCodes = ["工番", "車種", "品名", "部品名"];

    function preventManualInput(event) {
        const record = event.record;
        const table = record[tableFieldCode].value;

        setTimeout(() => {
            table.forEach(row => {
                stringFieldCodes.forEach(fieldCode => {
                    let inputElement = document.querySelector(`input[name="${fieldCode}"]`);
                    if (inputElement) {
                        inputElement.setAttribute("readonly", "true"); // 直接入力防止

                        // キーボード入力防止
                        inputElement.addEventListener("keydown", event => event.preventDefault());

                        // コピー＆ペースト防止
                        inputElement.addEventListener("paste", event => event.preventDefault());

                        // ドラッグ＆ドロップ防止
                        inputElement.addEventListener("drop", event => event.preventDefault());

                        // コンテキストメニュー（長押しメニュー）無効化
                        inputElement.addEventListener("contextmenu", event => event.preventDefault());
                    }
                });
            });
        }, 1000); // 1秒後に実行（フィールド描画待ち）

        return event;
    }

    // レコード表示時に適用
    kintone.events.on([
        'app.record.create.show', 
        'app.record.edit.show',
        'mobile.app.record.create.show', 
        'mobile.app.record.edit.show'
    ], preventManualInput);

    // テーブル変更時にも適用
    kintone.events.on([
        'app.record.create.change.' + tableFieldCode,
        'app.record.edit.change.' + tableFieldCode,
        'mobile.app.record.create.change.' + tableFieldCode,
        'mobile.app.record.edit.change.' + tableFieldCode
    ], preventManualInput);

})();

こうなったのですが 、これだと手入力ができてしまいます。

[Atsushi]

わかりやすい解説ありがとうございます！
テーブルの行追加がイベントとして把握できていないことが問題というのがよくわかりました！

[Atsushi]

お恥ずかしながらプログラミング初心者の自分にはこのコードの使い方がいまいち理解できませんでした。現在使い方を色々調べているところではありますが、何か参考にできそうなサイト等これ以外にないでしょうか？
出来れば用例集などあると置き換えて考えられるので理想なのですが・・・

ちなみにグレーアウトを解除したいのは
・通常の文字列フィールド(1列)
・テーブル内文字列フィールド(1列) × 3つ
となります・・・

[Maple (もみじ)]

/* disabled 属性を持つ input 要素のスタイルを上書き */
input:disabled {
  background: white !important; /* 背景色を白に設定 */
}

要はこういうことです。

このCSSを適用すると、下図のようにグレーアウトしてないが
編集不可の文字列（1行）フィールドができます。

[wv-sumichan (住田 知基)]

もしかしたら JavaScript と CSS の違いが分かっていないかもしれないと思ったので、念のため参考サイトを貼っておきますね。

もし十分に理解されていたのであれば、申し訳ないです……。

HTML／CSSを書いてみよう

[Atsushi]

次々と自分のやりたいことが出来ていき非常に感動しております。
完璧に動作しました。

本当にありがとうございました。

[Atsushi]

わかっているとは言い切れませんが、何とか区分けはできているつもりです。
フォローいただきありがとうございます。

[Maple (もみじ)]

追伸については自己解決したのでしょうか？

もっとも、こちらで追伸の上の方のコードと、前トピックのコードを
併用したら row.value[fieldCode].disabled = true; で編集不可にした
フィールドに対して値のコピーができたので、カスタマイズでの入力が
排除されるという現象は再現できませんでしたが。

[Atsushi]

自己解決することが出来ました。
前回の質問に引き続きありがとうございました。