# JS設置ボタンで「レコード追加」を行いたい

**URL:** <https://community.cybozu.dev/t/topic/5967>\
**Category:** kintone 開発相談\
**Created:** [2022 年 5 月 10 日午前 9:21 UTC](https://community.cybozu.dev/t/topic/5967 "2022-05-10T09:21:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1856](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account1856](https://community.cybozu.dev/u/Legacy_Account1856)\
**Post date:** [2022 年 5 月 10 日午前 9:21 UTC](https://community.cybozu.dev/t/topic/5967/1 "2022-05-10T09:21:15Z")

</div>

（１）java scriptで設置したボタンを押すと、「＋」印を押した時と同じ挙動をしたい（「レコード追加」画面に切り替えたい）です。  
（２）「質問する」ボタンを左端にもっていきたいです。  
（３）「レコード追加」画面の「保存」ボタンの名称を「投稿」等に変更したいです。  
（４）「キャンセル」と「保存」ボタンを下に持っていきたいです。

質問が多くて申し訳ないのですが、やり方をご教示頂けると幸いです。  
実現できるのか、実現できても大変なレベルなのか、わかっておりません。。。  
（１）だけでも教えて頂けると助かります。

用途は社内向けにIT関連の質問コーナー用です。  
内容的には標準アプリの「社内システム相談受付」で問題ないのですが、直感的な操作を実現できるようにカスタマイズしたいと思っています（とっつきにくいと利用されなくなるので）。

宜しくお願いします。

&nbsp;

**利用したソースコード**

### 【java script】

(function() {  
&nbsp; &nbsp; kintone.events.on(‘app.record.index.show’, function(event) {  
&nbsp; &nbsp; &nbsp; &nbsp; // 増殖バグを防ぐ  
&nbsp; &nbsp; &nbsp; &nbsp; if (document.getElementById(‘my\_index\_button’) !== null) {  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return;  
&nbsp; &nbsp; &nbsp; &nbsp; }  
&nbsp;  
&nbsp; &nbsp; &nbsp; &nbsp; //ボタンに付与するCSSクラス名  
&nbsp; &nbsp; &nbsp; &nbsp; var btnClassName = ‘sample-class’;  
&nbsp;  
&nbsp; &nbsp; &nbsp; &nbsp; //ボタン  
&nbsp; &nbsp; &nbsp; &nbsp; var myIndexButton = document.createElement(‘button’);  
&nbsp; &nbsp; &nbsp; &nbsp; myIndexButton.id = ‘my\_index\_button’;  
&nbsp; &nbsp; &nbsp; &nbsp; myIndexButton.className = btnClassName; // CSSクラスを指定  
&nbsp; &nbsp; &nbsp; &nbsp; myIndexButton.innerHTML = ‘質問する’;  
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; // ボタンを配置するスペース  
&nbsp; &nbsp; &nbsp; &nbsp; var el = kintone.app.getHeaderMenuSpaceElement();  
&nbsp;  
&nbsp; &nbsp; &nbsp; &nbsp; // スペースに作成したボタンを追加  
&nbsp; &nbsp; &nbsp; &nbsp; el.appendChild(myIndexButton);  
&nbsp; &nbsp; });  
})();

&nbsp;

### 【CSS】

.gaia-argoui-app-menu-add.gaia-argoui-app-menu {  
&nbsp;display: none;  
}  
\*/

@charset “UTF-8”;  
/\* 「質問する」文字設定 \*/  
.sample-class {  
&nbsp; &nbsp; display: inline-block;  
&nbsp; &nbsp; background-color: blue;  
&nbsp; &nbsp; width: 300px;  
&nbsp; &nbsp; height: 80px;  
&nbsp; &nbsp; border: solid 1px #e3e7e8;  
&nbsp; &nbsp; border-radius:10px;  
&nbsp; &nbsp; color: white;  
&nbsp; &nbsp; font-size: 50px;  
&nbsp; &nbsp; font-weight: bold;

}

/\* マウスオーバー時 \*/  
.sample-class:hover {  
&nbsp; &nbsp; background-color: #d3d3d3;  
&nbsp; &nbsp; color: blue;  
}

&nbsp;

&nbsp;

&nbsp;

アプリのトップ画面

&nbsp;

**「レコード追加」画面**

&nbsp;

&nbsp;

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1177](https://avatars.discourse-cdn.com/v4/letter/l/77aa72/32.png) [@Legacy\_Account1177](https://community.cybozu.dev/u/Legacy_Account1177)\
**Post date:** [2022 年 5 月 11 日午前 1:30 UTC](https://community.cybozu.dev/t/topic/5967/2 "2022-05-11T01:30:05Z")

</div>

（1）～（3）は以下で可能です。  
ただし、いずれも非推奨のDOM操作であり、kintoneのアップデート等で動かなくなる可能性がありますので注意して下さい。

```
(function() {
  'use strict';

  kintone.events.on([
    'app.record.create.show', 'app.record.edit.show'
  ], (event) => {
    setTimeout(() => {
      try {
        // (3)
        let submitButton = document.getElementsByClassName('gaia-ui-actionmenu-save')[0];

        submitButton.innerHTML = '投稿';
      } catch(error) {
        console.error(error);
      }
    }, 0);

    return event;
  });

  kintone.events.on('app.record.index.show', (event) => {
  if (document.getElementById('my_index_button')) return event;
  setTimeout(() => {
    try {
      let myIndexButton = document.createElement('button');

      myIndexButton.id = 'my_index_button';
      myIndexButton.className = 'sample-class';
      myIndexButton.innerHTML = '質問する';

      myIndexButton.onclick = () => {
        // (1)
        location.href = location.protocol + '//' + location.host + location.pathname + 'edit';
      };

      // (2)
      myIndexButton.style.float = 'left';
      document.getElementsByClassName('gaia-argoui-app-toolbar')[0].prepend(myIndexButton);

    } catch(error) {
      console.error(error);
    }
  }, 0);

return event;
  });
})();

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1856](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account1856](https://community.cybozu.dev/u/Legacy_Account1856)\
**Post date:** [2022 年 5 月 13 日午前 7:22 UTC](https://community.cybozu.dev/t/topic/5967/3 "2022-05-13T07:22:42Z")

</div>

ありがとうございます！

できました！！

&nbsp;

ただ、コピペで出来ただけなので、もっとちゃんと勉強します！！！

---

<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 年 4 月 25 日午前 6:03 UTC](https://community.cybozu.dev/t/topic/5967/4 "2025-04-25T06:03:29Z")

</div>

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