# 新規追加・訂正変更の保存成功後にクリップボードにコピーし、SweetAlertでお知らせする

**URL:** <https://community.cybozu.dev/t/topic/5689>\
**Category:** kintone 開発相談\
**Created:** [2022 年 2 月 1 日午前 6:37 UTC](https://community.cybozu.dev/t/topic/5689 "2022-02-01T06:37:32Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account2286](https://avatars.discourse-cdn.com/v4/letter/l/d6d6ee/32.png) [@Legacy\_Account2286](https://community.cybozu.dev/u/Legacy_Account2286)\
**Post date:** [2022 年 2 月 1 日午前 6:37 UTC](https://community.cybozu.dev/t/topic/5689/1 "2022-02-01T06:37:32Z")

</div>

**背景・実現したいこと**

&nbsp;PDFにするファイル名を文字連結式フィールドのファイル名から、新規追加・訂正変更の保存成功後にクリップボードにコピーし、SweetAlertでお知らせする（そっちこっちの寄せ集め、[https://js.cybozu.com/sweetalert/v2.1.2/sweetalert.min.jsは読み込み済み）](https://js.cybozu.com/sweetalert/v2.1.2/sweetalert.min.js%E3%81%AF%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF%E6%B8%88%E3%81%BF%EF%BC%89)

**エラー情報** （開発者ツールのコンソール）

Chromeのデバッガではエラー不検出のためどこが間違いなのかご教授お願いいたします。

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

(function() {  
“use strict”;  
var events = [  
"app.record.create.submit.success &nbsp; &nbsp;",  
"app.record.edit.submit.success &nbsp; &nbsp;",  
];

kintone.events.on(events, function(event) {  
var record = event.record;

&nbsp; &nbsp; &nbsp; let copyFrom = document.createElement(“textarea”);  
&nbsp; &nbsp; &nbsp; copyFrom.textContent = event.record[“ファイル名”].value;  
&nbsp; &nbsp; &nbsp; let bodyElm = document.getElementsByTagName(“body”)[0];  
&nbsp; &nbsp; &nbsp; bodyElm.appendChild(copyFrom);  
&nbsp; &nbsp; &nbsp; copyFrom.select();  
&nbsp; &nbsp; &nbsp; document.execCommand(‘copy’);

&nbsp; &nbsp; &nbsp; swal({  
&nbsp; &nbsp; &nbsp; &nbsp;title: record[“ファイル名”].value,  
&nbsp; &nbsp; &nbsp; &nbsp;text: ‘このファイル名をクリップボードにコピーしました！’,  
button: ‘OK’  
&nbsp; &nbsp; &nbsp; });

return event;

});  
})();

---

<div class="post-metadata">

**Author:** ![Legacy\_Account63](https://avatars.discourse-cdn.com/v4/letter/l/6de8d8/32.png) [@Legacy\_Account63](https://community.cybozu.dev/u/Legacy_Account63)\
**Post date:** [2022 年 2 月 1 日午後 11:51 UTC](https://community.cybozu.dev/t/topic/5689/2 "2022-02-01T23:51:29Z")

</div>

イベントハンドラーの中は精査してないのですが, 少なくとも、

> var events = [  
> "app.record.create.submit.success &nbsp; &nbsp;",  
> "app.record.edit.submit.success &nbsp; &nbsp;",  
> ];

この箇所、無駄なスペースが入ってしまっているのが気になります。正確でなければ動作はしないですね。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2286](https://avatars.discourse-cdn.com/v4/letter/l/d6d6ee/32.png) [@Legacy\_Account2286](https://community.cybozu.dev/u/Legacy_Account2286)\
**Post date:** [2022 年 2 月 2 日午前 2:54 UTC](https://community.cybozu.dev/t/topic/5689/3 "2022-02-02T02:54:01Z")

</div>

村濱一樹 さま

お世話になります。早速のご解答ありがとうございます。

おっしゃる通り、空白を見落としておりました。

取り除いて実行すると、、、

１．新規追加保存時

SweetAlertが出て、フォームの真下に謎のボックス（編集可能）

が出現しその中にクリップボードの値が表示され、その瞬間

SweetAlertと謎のボックスが消え、OK押すまでもない挙動。

２．訂正変更保存時

SweetAlertが出て、フォームの真下に謎のボックス（編集可能）

が出現しその中にクリップボードの値が表示され、SweetAlertの

OK押せる状態にはなります（謎のボックスは表示のまま）。

どちらもChromeのデバッガではエラー不検出です。

クリップボードの値はどちらも正常に動作します。

謎のボックスを消す方法が解らないことと、イベント処理が解りません。

ご教授のほど宜しくお願い致します。

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2258](https://avatars.discourse-cdn.com/v4/letter/l/8edcca/32.png) [@Legacy\_Account2258](https://community.cybozu.dev/u/Legacy_Account2258)\
**Post date:** [2022 年 2 月 4 日午前 7:33 UTC](https://community.cybozu.dev/t/topic/5689/4 "2022-02-04T07:33:34Z")

</div>

私もこちら単体で試したところ、スペース削除のみで上記コードで通常通りSweatAlert表示から消える（厳密には表示上消えてる)まで動きましたね。

また別の書き方でもやってみたので下記に記しておきます。(exeCommandが非推奨のようでしたので）

が、肝心のSweatAlertでの問題について再現できなかったのでアドバイスになりませんが、謎のボックスを右クリック→検証しそれ自体が何かを確認してみるのがいいかと思います。恐らく隠れるべきSweetAlertが他の要因で出てるような感じがしますが。

```
(function () {
      "use strict";
      const events = ["app.record.create.submit.success", "app.record.edit.submit.success"];
      kintone.events.on(events, async function (event) {
              const record = event.record;
              const fileName = record["ファイル名"].value
              const alert = {
                      title: fileName,
                      text: 'このファイル名をクリップボードにコピーしました！',
                      button: 'OK'
              };
                await navigator.clipboard.writeText(fileName).then(resp => { swal(alert) });
              return event;
      });
})();

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2286](https://avatars.discourse-cdn.com/v4/letter/l/d6d6ee/32.png) [@Legacy\_Account2286](https://community.cybozu.dev/u/Legacy_Account2286)\
**Post date:** [2022 年 2 月 8 日午後 11:47 UTC](https://community.cybozu.dev/t/topic/5689/5 "2022-02-08T23:47:21Z")

</div>

nabeさま

わざわざご検証してくださいましてありがとうございます。

超初心者故、JSEdit for kintone にご教示のコードを貼り付けると、４行目と１４行目に△！が付きます。

また、await navigator.clipboard.writeText(fileName).then(resp =\> { swal(alert) });

の挙動が解りません。

もっと勉強いたします。

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2258](https://avatars.discourse-cdn.com/v4/letter/l/8edcca/32.png) [@Legacy\_Account2258](https://community.cybozu.dev/u/Legacy_Account2258)\
**Post date:** [2022 年 2 月 10 日午前 1:03 UTC](https://community.cybozu.dev/t/topic/5689/6 "2022-02-10T01:03:33Z")

</div>

JSEdit上でも試してみたのですが、エディタ上、注意が出てしまいますね。。（カーソル合わせるとセミコロン有無等で）。

動作自体はこちらで動きます。が、JSEditで分かったのですが、JSEdit中のSweatAlertでライブラリ挿入すると上記ボックスが出てるようですね。こちらバージョン(v1)古いものがささるようなので、JSカスタマイズ上のsweatAlertのライブラリを下記のものにURL書き換えてみてください。

[https://js.cybozu.com/sweetalert/v2.1.2/sweetalert.min.js](https://js.cybozu.com/sweetalert/v2.1.2/sweetalert.min.js)

[kintone参照記事](https://community.cybozu.dev/hc/ja/articles/204790870-SweetAlert-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6-kintone-%E3%81%A7%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%92%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AA%E3%83%83%E3%82%B7%E3%83%A5%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%82%88%E3%81%86-)

navigatorの挙動はexecCommandを書き換えたようなものになります

[execCommand参照ドキュメント](https://developer.mozilla.org/ja/docs/Web/API/Document/execCommand)

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2286](https://avatars.discourse-cdn.com/v4/letter/l/d6d6ee/32.png) [@Legacy\_Account2286](https://community.cybozu.dev/u/Legacy_Account2286)\
**Post date:** [2022 年 2 月 14 日午前 1:59 UTC](https://community.cybozu.dev/t/topic/5689/7 "2022-02-14T01:59:19Z")

</div>

nabeさま

ご教示ありがとうございます。

JSEditにコピペし、SweatAlertをv2.1.2に直し動作確認したところ

謎のボックスは現れない代わりに、新規追加時は一瞬だけSweatAlertが

出現するもののOKボタン処理待たずに詳細画面に戻ってしまいます。

（編集時は問題なく動作しました）

調べると、レコード追加画面の保存実行前イベントでは

「kintone.Promiseオブジェクトをreturnすると、非同期処理の実行を待つことができます」

とあり、色々試しましたが超初心者故新規追加時ではうまく行きません。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2258](https://avatars.discourse-cdn.com/v4/letter/l/8edcca/32.png) [@Legacy\_Account2258](https://community.cybozu.dev/u/Legacy_Account2258)\
**Post date:** [2022 年 2 月 14 日午前 3:07 UTC](https://community.cybozu.dev/t/topic/5689/8 "2022-02-14T03:07:21Z")

</div>

本当ですね、追加だと待ってくれないですね。。すみません。

下記１行に書き換えてみてください。アラート部分も非同期で待ってくれるようになると思います。

```
await navigator.clipboard.writeText(fileName).then(async resp => { await swal(alert) });

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2286](https://avatars.discourse-cdn.com/v4/letter/l/d6d6ee/32.png) [@Legacy\_Account2286](https://community.cybozu.dev/u/Legacy_Account2286)\
**Post date:** [2022 年 2 月 14 日午前 4:55 UTC](https://community.cybozu.dev/t/topic/5689/9 "2022-02-14T04:55:13Z")

</div>

nabe さま

早速書き換えて（△！出ますが）動作確認しましたところ、正常に動作いたしました。

最後までご教示下さいましてありがとうございます。

また機会がありましたら宜しくお願い致します。

了

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2286](https://avatars.discourse-cdn.com/v4/letter/l/d6d6ee/32.png) [@Legacy\_Account2286](https://community.cybozu.dev/u/Legacy_Account2286)\
**Post date:** [2022 年 2 月 15 日午前 7:32 UTC](https://community.cybozu.dev/t/topic/5689/10 "2022-02-15T07:32:48Z")

</div>

nabe さま

了 としましたが、、、

汎用性があるコードなので、別のアプリのJSEditにコピペし、SweatAlertをv2.1.2読み込み

実行保存すると、追加時も編集時も以下のエラー（赤ペン先生）が出ます。

エラー  
レコードを再読み込みしてください。編集中に、ほかのユーザーがレコードを更新しました。  
(GAIA\_UN03 CkIVbDal0g2kcPI1obuv)

これの回避方法がまったくもってわかりません。

弱りました・・・ご教示いただければ幸いです。

---

<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:** [2024 年 8 月 16 日午前 6:07 UTC](https://community.cybozu.dev/t/topic/5689/11 "2024-08-16T06:07:20Z")

</div>

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