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

**URL:** <https://community.cybozu.dev/t/topic/10261>\
**Category:** kintone 開発相談\
**Created:** [2025 年 3 月 25 日午前 12:33 UTC](https://community.cybozu.dev/t/topic/10261 "2025-03-25T00:33:35Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Atsushi](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@Atsushi](https://community.cybozu.dev/u/Atsushi)\
**Post date:** [2025 年 3 月 25 日午前 12:33 UTC](https://community.cybozu.dev/t/topic/10261/1 "2025-03-25T00:33:35Z")

</div>

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

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

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

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

```javascript
(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;
  });
})();

```

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

---

<div class="post-metadata">

**Author:** ![puppet](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/puppet/32/2126_2.png) [@puppet](https://community.cybozu.dev/u/puppet)\
**Post date:** [2025 年 3 月 25 日午前 12:55 UTC](https://community.cybozu.dev/t/topic/10261/3 "2025-03-25T00:55:54Z")

</div>

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

```

使用しているイベントが↑だけなので、「追加画面を開いたとき」か「編集画面を開いたとき」にしか内部の処理が走っていないのではないでしょうか。  
[レコード編集画面でフィールドの値を変更したときのイベント](https://cybozu.dev/ja/kintone/docs/js-api/events/edit/edit-change-event/)を参考に、「テーブルの内容が変わったとき」にも発生するよう追加してみるのはどうでしょうか？

---

<div class="post-metadata">

**Author:** ![Atsushi](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@Atsushi](https://community.cybozu.dev/u/Atsushi)\
**Post date:** [2025 年 3 月 25 日午前 2:31 UTC](https://community.cybozu.dev/t/topic/10261/5 "2025-03-25T02:31:57Z")

</div>

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

追伸

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

```javascript
(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の手助けを借りると

```javascript
(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);

})();

```

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

---

<div class="post-metadata">

**Author:** ![Atsushi](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@Atsushi](https://community.cybozu.dev/u/Atsushi)\
**Post date:** [2025 年 3 月 25 日午前 2:33 UTC](https://community.cybozu.dev/t/topic/10261/6 "2025-03-25T02:33:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Atsushi](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@Atsushi](https://community.cybozu.dev/u/Atsushi)\
**Post date:** [2025 年 3 月 25 日午前 2:36 UTC](https://community.cybozu.dev/t/topic/10261/7 "2025-03-25T02:36:49Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![wv-sumichan](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/wv-sumichan/32/1665_2.png) [@wv-sumichan](https://community.cybozu.dev/u/wv-sumichan)\
**Post date:** [2025 年 3 月 25 日午前 3:16 UTC](https://community.cybozu.dev/t/topic/10261/9 "2025-03-25T03:16:40Z")

</div>

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

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

> **[HTML／CSSを書いてみよう](https://cybozu.dev/ja/tutorials/hello-js/html-css/)**
>
> HTMLやCSSについて学びましょう。

---

<div class="post-metadata">

**Author:** ![Atsushi](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@Atsushi](https://community.cybozu.dev/u/Atsushi)\
**Post date:** [2025 年 3 月 26 日午前 1:23 UTC](https://community.cybozu.dev/t/topic/10261/10 "2025-03-26T01:23:28Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![Atsushi](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@Atsushi](https://community.cybozu.dev/u/Atsushi)\
**Post date:** [2025 年 3 月 26 日午前 1:24 UTC](https://community.cybozu.dev/t/topic/10261/11 "2025-03-26T01:24:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Atsushi](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@Atsushi](https://community.cybozu.dev/u/Atsushi)\
**Post date:** [2025 年 3 月 26 日午前 2:51 UTC](https://community.cybozu.dev/t/topic/10261/13 "2025-03-26T02:51:29Z")

</div>

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

---

<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:** [2025 年 3 月 29 日午前 2:52 UTC](https://community.cybozu.dev/t/topic/10261/14 "2025-03-29T02:52:24Z")

</div>

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