# フォームブリッジにおける「回答」ボタンを非表示にしたい

**URL:** <https://community.cybozu.dev/t/topic/10076>\
**Category:** kintone 開発相談\
**Created:** [2025 年 2 月 13 日午前 6:03 UTC](https://community.cybozu.dev/t/topic/10076 "2025-02-13T06:03:35Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![i4087](https://avatars.discourse-cdn.com/v4/letter/i/f04885/32.png) [@i4087](https://community.cybozu.dev/u/i4087)\
**Post date:** [2025 年 2 月 13 日午前 6:03 UTC](https://community.cybozu.dev/t/topic/10076/1 "2025-02-13T06:03:35Z")

</div>

お世話になっております。  
フォームブリッジで「回答」ボタンを無条件で非表示にしたいと思っています。

[過去の投稿](https://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjPuJmX97-LAxU-ZvUHHbLGJUoQFnoECBcQAQ&url=https%3A%2F%2Fcommunity.cybozu.dev%2Ft%2Ftopic%2F5751&usg=AOvVaw2kiURNCMvmotv1ErObe6Ry&opi=89978449)を参照し、  
[最新のページ](https://formbridge.kintoneapp.com/help/customize/v2)も見ながら下記の通りコードを作成してみたのですが、  
うまく反映されず・・・。  
cssでも構わないのですが、お知恵を頂けましたら幸いです。  
宜しくお願いします。

### 実行したコードをコピー＆ペーストしましょう

```javascript
// フォームのDOMが作成された後
formBridge.events.form.show = [function(state) {

// 非活性
document.getElementsByClassName('fb-custom--button--submit')[0].style.pointerEvents = 'none';

}];

```

---

<div class="post-metadata">

**Author:** ![i4087](https://avatars.discourse-cdn.com/v4/letter/i/f04885/32.png) [@i4087](https://community.cybozu.dev/u/i4087)\
**Post date:** [2025 年 2 月 13 日午前 6:05 UTC](https://community.cybozu.dev/t/topic/10076/2 "2025-02-13T06:05:01Z")

</div>

なお過去投稿では非活性とあったので、ボタン自体は出現してしまうのかな？と初心者ながらに思ったのですが、  
出現自体も消せる状態を実現したく・・・。

わがままな要望であることは重々承知の上でのお願いで大変恐縮なのですが、  
どうぞ宜しくお願いします。

---

<div class="post-metadata">

**Author:** ![aaa](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/aaa/32/277_2.png) [@aaa](https://community.cybozu.dev/u/aaa)\
**Post date:** [2025 年 2 月 13 日午前 7:48 UTC](https://community.cybozu.dev/t/topic/10076/3 "2025-02-13T07:48:08Z")

</div>

1)試しにコンソール画面で以下を入力したらボタンは消えました。

```javascript
document.getElementsByClassName('fb-custom--button--submit')[0].style.display = 'none';

```

2)回答ボタンを消すと何か良いことがあるのですか？消したいという背景がわかるとありがたいです。

3)配列を経由しない([0]とかが出てこない)

```javascript
document.querySelector('.fb-custom--button--submit').style.display = 'none';

```

などもあるかなと思いました。

4)devtoolで消したい要素を選択して、コピーしてChatGPTの画面に貼り付けて、JavaScriptで消したいと伝えるとコンソール画面で試せるようなコードが出てきました。

---

<div class="post-metadata">

**Author:** ![i4087](https://avatars.discourse-cdn.com/v4/letter/i/f04885/32.png) [@i4087](https://community.cybozu.dev/u/i4087)\
**Post date:** [2025 年 2 月 13 日午前 8:48 UTC](https://community.cybozu.dev/t/topic/10076/4 "2025-02-13T08:48:53Z")

</div>

ご返信ありがとうございます。  
1),3) こちらで試してみたのですが、残念ながら適用されませんでした…。  
4) copilotは利用しているので、色々試してみます。  
2) 正直formbridgeじゃなくとも、kViewerでも実現できるのであればツールは問わないのですが、条件分岐を利用したく、formbridgeの回答ボタンさえ非表示にできたら…と思っています。

---

<div class="post-metadata">

**Author:** ![aaa](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/aaa/32/277_2.png) [@aaa](https://community.cybozu.dev/u/aaa)\
**Post date:** [2025 年 2 月 13 日午前 9:12 UTC](https://community.cybozu.dev/t/topic/10076/5 "2025-02-13T09:12:51Z")

</div>

フォームを表示した画面でコンソール画面に貼り付けて実行

 ![image](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/2X/b/b909c9dc071ada0e5893c5c496e488ad3667fc1c.png)  
結果です  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/2X/2/22a96d9cc35ba64c7b250cb42307616b9c994c26.png)  
質問者との環境などが何か違うのかもしれません。

---

<div class="post-metadata">

**Author:** ![i4087](https://avatars.discourse-cdn.com/v4/letter/i/f04885/32.png) [@i4087](https://community.cybozu.dev/u/i4087)\
**Post date:** [2025 年 2 月 13 日午前 9:16 UTC](https://community.cybozu.dev/t/topic/10076/6 "2025-02-13T09:16:01Z")

</div>

あ、すいません書き足らずでした汗  
コンソール環境で試したところ、できました！  
ありがとうございます。

ただ肝心のjsファイル適用を試みると添付の通りエラーになり、  
非表示ができていないのです・・・。

 ![キャプチャ](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/2X/2/278ef021b83348bcd89bb1bb90c467597f6d92b1.png)

---

<div class="post-metadata">

**Author:** ![i4087](https://avatars.discourse-cdn.com/v4/letter/i/f04885/32.png) [@i4087](https://community.cybozu.dev/u/i4087)\
**Post date:** [2025 年 2 月 13 日午前 9:49 UTC](https://community.cybozu.dev/t/topic/10076/7 "2025-02-13T09:49:28Z")

</div>

案の定、コードの前半部分がミスっていました。  
下記コードにて非表示できました。ありがとうございました！

```javascript
formBridge.events.on('form.show', function (context){
document.querySelector('.fb-custom--button--submit').style.display = 'none';
});

```

---

<div class="post-metadata">

**Author:** ![aaa](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/aaa/32/277_2.png) [@aaa](https://community.cybozu.dev/u/aaa)\
**Post date:** [2025 年 2 月 14 日午前 4:26 UTC](https://community.cybozu.dev/t/topic/10076/8 "2025-02-14T04:26:45Z")

</div>

すべての場合にあてはまるわけではないですが

表示関連のカスタマイズは、

対象の要素を特定して、カスタマイズを作用させる  
・開発者ツールのコンソール画面から特定の要素がつかめているかを確認する  
・特定の要素に対して、変化を加えられるかを確認  
・console.log()で変数などの中身を表示したり、debuggerをつかってブレイクポイントをつけて、その時点での変数などの状態を確認します。

```javascript
const element = document.getElementsByClassName('fb-custom--button--submit');
debugger; // ここで実行が一時停止し、変数やDOMの状態を確認できます
if (element) {
    console.log(element)
    debugger; // ここで実行が一時停止し、変数やDOMの状態を確認できます
    element[0].innerText = '変更されたテキスト';
}

```

chromeのスニペット機能などを使うこともあります。

ここまでやれば、イベントを追加してファイルを読み込んで調整します。ここで動かない場合、イベント側で失敗している可能性が高いので原因追及がしやすいです。

もし、いきなりイベントと表示カスタマイズを反映させようとして、デバッグになれていないとどこまで処理が進んでいるのかわからないので、何が失敗しているのか、怪しいのかがわかりにくいと思います。

参考

kintone JavaScriptカスタマイズデバッグまとめ - cybozu developer network

> **[kintone JavaScriptカスタマイズデバッグまとめ](https://cybozu.dev/ja/kintone/tips/development/development-productivity/debug/kintone-js-customization-debugging/)**
>
> JavaScriptカスタマイズをよりしやすくするためのデバッグの方法を紹介します。

---

<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 年 2 月 17 日午前 4:27 UTC](https://community.cybozu.dev/t/topic/10076/9 "2025-02-17T04:27:29Z")

</div>

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