# 吹き出しで「文字列（複数行）」の入力が出来る機能が欲しいのですが。。。

**URL:** <https://community.cybozu.dev/t/topic/7614>\
**Category:** kintone 開発相談\
**Created:** [2022 年 8 月 5 日午前 1:44 UTC](https://community.cybozu.dev/t/topic/7614 "2022-08-05T01:44:24Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account2091](https://avatars.discourse-cdn.com/v4/letter/l/fbc32d/32.png) [@Legacy\_Account2091](https://community.cybozu.dev/u/Legacy_Account2091)\
**Post date:** [2022 年 8 月 5 日午前 1:44 UTC](https://community.cybozu.dev/t/topic/7614/1 "2022-08-05T01:44:24Z")

</div>

いつも大変お世話になっております。本日はこのような機能そのものがあるのかどうか、もしくはこのようなプラグインをご存知の方がいらっしゃらないかどうか、教えて頂きたく投稿致しました。

この機能そのものは、kintoneとは違うソフトのものなのですが、そのソフトからkintoneに移行するにあたり、同じような表現が出来ればと思っております。。。。

普段は、グレーの無地のボタン（ラベル？）なのですが、シングルクリックをすると、文字列（複数行）の入力が可能で、保存すると元のグレーのボタン（ラベル？）に戻ります。。。説明が拙いので画像も添付致します。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2613](https://avatars.discourse-cdn.com/v4/letter/l/41988e/32.png) [@Legacy\_Account2613](https://community.cybozu.dev/u/Legacy_Account2613)\
**Post date:** [2022 年 8 月 6 日午前 1:29 UTC](https://community.cybozu.dev/t/topic/7614/2 "2022-08-06T01:29:40Z")

</div>

答えではないですが、以下の感じでしょうか。

[https://codesandbox.io/s/bold-forest-h67c3b?file=/src/index.js](https://codesandbox.io/s/bold-forest-h67c3b?file=/src/index.js)

社内では[React](https://reactjs.org/)を利用しているので、パッケージが豊富ですが、他の方がどうしているか、知りたいです。

当投稿フォローさせて頂きます。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2091](https://avatars.discourse-cdn.com/v4/letter/l/fbc32d/32.png) [@Legacy\_Account2091](https://community.cybozu.dev/u/Legacy_Account2091)\
**Post date:** [2022 年 8 月 8 日午前 1:13 UTC](https://community.cybozu.dev/t/topic/7614/3 "2022-08-08T01:13:58Z")

</div>

Lorenz Rasさん

いつもお世話になっております。

何という事！驚きすぎて言葉も出ませんが、まさに見せて頂いた通りです。

なんですが、、、このレベルのプログラミングは、我々には到底不可能でして、、、

まさにこの通りの機能をプラグインで使いたいのですが、どこかで提供しているところがありませんでしょうか。。。

---

<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 年 8 月 9 日午前 4:54 UTC](https://community.cybozu.dev/t/topic/7614/4 "2022-08-09T04:54:18Z")

</div>

SweetAlert2を使えば比較的簡単に近いことを実装できるかと思います。

詳細が不明なので [以前の投稿](https://developer.cybozu.io/hc/ja/community/posts/8437633106329-%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%A8%E3%81%97%E3%81%A6%E6%A9%9F%E8%83%BD%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%AE%E5%A4%A7%E3%81%8D%E3%81%95%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%97%E3%81%9F%E3%81%84%E3%81%AE%E3%81%A7%E3%81%99%E3%81%8C?page=1)&nbsp; にあった内容を元に作ってあります。ひとまず最低限度の機能のみなので、必要に応じて肉付けが必要です。

あらかじめ [SweetAlert2](https://community.cybozu.dev/hc/ja/articles/202960194#sweetalert2) を読み込んで、4～6行目を適宜設定して使用して下さい（6行目はChromeであればレコードの新規登録画面等でフィールド上で右クリック→検証を選択すれば「field-xxxxxxx」と記載されています）。

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

let subTable = ''; // サブテーブルのフィールドコード
let fieldCode = ''; // 「ツイート」のフィールドコード
let fieldElement = 'field-'; // 「ツイート」に割り振られている番号

  kintone.events.on([
    'app.record.create.show', 'app.record.edit.show',
    'app.record.create.change.' + subTable, 'app.record.edit.change.' + subTable
  ], (event) => {
    let record = event.record;

    [...document.getElementsByClassName(fieldElement)].forEach((field, index) => {
      let button = document.createElement('button');
      let buttonId = 'swal-' + index;

      if (document.getElementById(buttonId)) return;

      button.id = buttonId;
      button.style.padding = '12px';
      button.onclick = () => {
        let recordData = kintone.app.record.get(), rec = recordData.record;
        let inputValue = rec[subTable].value[index].value[fieldCode].value;

        Swal.fire({
          input: 'textarea',
          inputValue: inputValue ? inputValue: '',
          showCancelButton: true,
          toast: true,
          animation: false
        }).then((result) => {
          if (!result.value) return;

          rec[subTable].value[index].value[fieldCode].value = result.value;
          kintone.app.record.set(recordData);
        });
      };

      field.style.display = 'none';
      field.parentNode.appendChild(button);
    });

    return event;
  });
})();

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2091](https://avatars.discourse-cdn.com/v4/letter/l/fbc32d/32.png) [@Legacy\_Account2091](https://community.cybozu.dev/u/Legacy_Account2091)\
**Post date:** [2022 年 8 月 12 日午前 5:04 UTC](https://community.cybozu.dev/t/topic/7614/5 "2022-08-12T05:04:23Z")

</div>

mls-hashimoto様

お世話になっております。また、お忙しい中ありがとうございます。

早速ながらに試させて頂きました、が、わたくしの理解が乏しく、下記スクショの動きで正解でしょうか。。

プログラムを見ると何やらもっと、イベントがありそうな気がするのですが。。。

もしかして、私の読み込んだライブラリなどに不足があるのでしょうか。

&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 年 8 月 12 日午前 5:15 UTC](https://community.cybozu.dev/t/topic/7614/6 "2022-08-12T05:15:59Z")

</div>

豊和会 本部 さま  
TWEET.jsがプログラムでしょうか？SweetAlert2のライブラリを先に読み込むように順番を変えてみて下さい。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2091](https://avatars.discourse-cdn.com/v4/letter/l/fbc32d/32.png) [@Legacy\_Account2091](https://community.cybozu.dev/u/Legacy_Account2091)\
**Post date:** [2022 年 8 月 12 日午前 6:22 UTC](https://community.cybozu.dev/t/topic/7614/7 "2022-08-12T06:22:47Z")

</div>

mls-hashimoto様

お忙しい中早速のご回答ありがとうございます。

はい、TWEET.jsがプログラムです。ご教示いただいた通り、順番を変えて、アプリの更新も行いましたが、変化はありませんでした。

何か設定系で忘れていることがあるのでしょうか。。。本当に本当に恐縮ですが、一度ごかくにん いただけますでしょうか？

&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 年 8 月 12 日午後 11:46 UTC](https://community.cybozu.dev/t/topic/7614/8 "2022-08-12T23:46:07Z")

</div>

豊和会 本部 さま

SweetAlert2のバージョンを新しくして下さい。Promiseが受け取れるSwal.fire({…})が使えるのは8.0.0以降のようです。

[こちらのページ](https://community.cybozu.dev/hc/ja/articles/202960194#sweetalert2)&nbsp;から新しいバージョンを適用して下さい。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2091](https://avatars.discourse-cdn.com/v4/letter/l/fbc32d/32.png) [@Legacy\_Account2091](https://community.cybozu.dev/u/Legacy_Account2091)\
**Post date:** [2022 年 8 月 15 日午前 12:37 UTC](https://community.cybozu.dev/t/topic/7614/9 "2022-08-15T00:37:22Z")

</div>

mls-hashimoto様

いつも大変お世話になっております、またお忙しい中時間を割いて頂き、誠にありがとうございます。

ご教示いただいた通り取り込み直しましたら、画像の通り無事動作しました！

まさにこういう感じで、登録出来るようにしたいと思っておりました。

こんな事が出来るなんて、とても驚いております。

この機能を持ったプラグインは、この世の中には無さそうで、、、我々ではここから進化させることも出来ず、悲しいですが、可能性を示唆していただいて本当に本当にありがとうございます！

---

<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 年 9 月 4 日午前 5:45 UTC](https://community.cybozu.dev/t/topic/7614/10 "2024-09-04T05:45:14Z")

</div>

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