小さなストレスをなくしてコピペ作業を0.5秒短縮！JavaScriptとCSSで「コピーボタン」をつくる

こんにちは、ジョイゾーでkintoneプラグインのサポート窓口をしている伊藤です。

皆さんはkintoneに入っているデータを、メールや他のシステムに貼り付ける時、どうやっていますか？
私は、マウスで文字の上をビーッとドラッグして「Ctrl + C」か
編集画面にいる時は該当フィールドを「Ctrl + A」で全選択して「Ctrl + C」です。

でもこの作業、地味にストレスだなぁと思っていました。

「あ、最後の1文字だけ選択し忘れた！」
「余計な空白までコピーしちゃった…」
「長いIDだと、マウスを動かす距離が長くて疲れる」

ということがしばしば、、、
今回は、そんな「地味なストレス」を解消する、JavaScriptカスタマイズをご紹介します。

弊社では初回開発無料の定額39万円でkintoneアプリを開発する定額型開発サービス「システム３９」を提供しております。kintoneの導入やアプリ開発でお困りの方は、お気軽にご相談ください。
＊Webでの打ち合わせも可能です。

　　　kintoneのアプリ開発はこちら＜相談無料＞　　　

「ボタンをポチッ」と押してコピー

このカスタマイズでできることはただひとつ。

ボタンを押すとフィールドの内容がコピーできる！！

それでは先に、kintoneの画面を見てみましょう。
今回は経理関係のアプリをイメージして作ってみました。

kintoneの画面では、
・口座番号をコピー
・名義（カナ）をコピー
・インボイスNoをコピー
と３つのボタンが並んでいます。
ボタンはkintoneのスペースフィールドにボタンを表示させる仕組みになっているので好きなところに設置することが可能です。

このボタンを押すと、、、

このようにボタンの色が緑色に変わり、「コピーしました」と表示が変わります。
また、フィールドに何も入っていない場合、、、

ボタンの色が赤色に変わり、「コピーできません」となります。

このワンクリックでコピーすることができるので、
「空白が入ってた、、、」
「全部選択できていなかった。」
のようなことがなく簡単に正しくコピーすることができます！

実装紹介！

それでは実際のコードを紹介します。

今回使用するのは、app.record.detail.show というイベントです。
これはレコードの詳細画面が表示された直後に発火するイベントで、画面が開いた瞬間に指定した場所にボタンを描画するために使用します。

kintoneにはカスタマイズに便利なkintone REST APIやkintone JavaScript APIなどが用意されているため、cybozu developer networkを参考にしてみてください。

(function() {
  "use strict";

  const config = [
    { spaceId: 'copy_space_account_num', fieldCode: 'AccountNum',  label: '口座番号をコピー' },
    { spaceId: 'copy_space_account_name',fieldCode: 'AccountName', label: '名義(カナ)をコピー' },
    { spaceId: 'copy_space_invoice',     fieldCode: 'InvoiceNo',   label: 'インボイスNoをコピー' }
  ];

  // フィードバック表示（クラスの付け外しで色を変える）
  const showFeedback = (btn, text, statusClass, originalText) => {
    // ボタンの幅が変わらないように固定幅を一瞬適用（ガタつき防止）
    btn.style.width = btn.offsetWidth + 'px';
    
    btn.innerHTML = text;
    btn.classList.add(statusClass); // CSSの .success や .error を付与

    setTimeout(() => {
      btn.innerHTML = originalText;
      btn.classList.remove(statusClass); // クラスを外して元に戻す
      btn.style.width = ''; // 幅固定を解除
    }, 1500);
  };

  kintone.events.on('app.record.detail.show', function(event) {
    const record = event.record;

    config.forEach((conf) => {
      const spaceEl = kintone.app.record.getSpaceElement(conf.spaceId);
      if (!spaceEl || spaceEl.childNodes.length > 0) return;

      const btn = document.createElement('button');
      btn.innerHTML = `<span style="margin-right:5px;">📋</span>${conf.label}`;
      
      // ★ここでCSSクラスを適用します（これだけでデザインが当たる）
      btn.classList.add('joyzo-copy-btn');

      const originalText = `<span style="margin-right:5px;">📋</span>${conf.label}`;

      btn.onclick = function() {
        const val = record[conf.fieldCode].value;
        if (val) {
          navigator.clipboard.writeText(val).then(() => {
            // 成功クラス(.success)をつける
            showFeedback(btn, 'コピーしました', 'success', originalText);
          }).catch(() => {
            showFeedback(btn, 'エラー発生', 'error', originalText);
          });
        } else {
          // 失敗クラス(.error)をつける
          showFeedback(btn, 'コピーできません', 'error', originalText);
        }
      };

      spaceEl.appendChild(btn);
    });
    return event;
  });
})();

具体的な処理の流れとしては、あらかじめフォーム設定で配置しておいた「スペースフィールド」の要素をJavaScriptで取得し、その中にボタン要素を設置しています。

コピー機能の実装には、ブラウザで標準的にサポートされている navigator.clipboard APIを使用し、ボタンクリック時にフィールドの値をクリップボードへ書き込む仕組みです。

ここまでがJavaScriptコードのお話しです。次はCSSのコードを紹介！

/* style.css */

/* コピーボタンの基本スタイル */
.joyzo-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin-top: 24px;
  padding: 0 16px;
  min-width: 140px;
  background-color: #f7f9fa;
  border: 1px solid #e3e7e8;
  color: #3498db;
  font-weight: bold;
  cursor: pointer;
  border-radius: 4px;
  outline: none;
  transition: all 0.2s;
  font-size: 14px;
  vertical-align: bottom;
  box-sizing: border-box;
}

/* マウスを乗せた時（ホバー） */
.joyzo-copy-btn:hover {
  background-color: #e2f2fe;
  border-color: #3498db;
}

/* 成功時（緑色）のデザイン */
.joyzo-copy-btn.success {
  background-color: #4caf50;
  border-color: #4caf50;
  color: #fff;
  pointer-events: none; /* 連打防止 */
}

/* 失敗時（赤色）のデザイン */
.joyzo-copy-btn.error {
  background-color: #e74c3c;
  border-color: #e74c3c;
  color: #fff;
  pointer-events: none;
}

kintoneを見やすく、使いやすくするために追加したCSSです。
このデザインはなくてもコピーの動作はできますが、せっかくなら綺麗に整えていたほうが気分が上がると思っています。

kintoneの画面に機能を追加するようなJavaScriptカスタマイズをしたときは、ぜひ見た目の方にも目を向けてみて下さい！

まとめ

今回は毎日サポート対応をしていながら不便だなと思っていたことをカスタマイズしてみました。

コピー＆ペーストするシーンは業務のなかで何度もあります。
お客様の名前やメールアドレスを間違えないようにコピーしたり、zoomやサイトのリンクをコピーしたりと間違えてはいけない場面が多数。

ちょっとのストレスもこうして便利に変えると業務が捗ります。
このような必要な場面が多いカスタマイズはプラグイン化をすると簡単に複数のアプリにも適用できとても便利です！

プラグイン化やカスタマイズをしてkintoneを楽しみましょう！

　　　kintoneのアプリ開発はこちら＜相談無料＞　　　

小さなストレスをなくしてコピペ作業を0.5秒短縮！JavaScriptとCSSで「コピーボタン」をつくる

「ボタンをポチッ」と押してコピー

実装紹介！

まとめ

同じカテゴリーの記事

スマートフォン用Javascriptが機能強化されました

kintoneをもっと使いやすく！ちょっと便利なカスタマイズ3選

kintone REST APIの同時接続数に関するパラメータの利用を考える