kintoneでコピーボタンを設置する

kintoneでは標準機能に加えて、JavaScriptやプラグインを使えば自由にカスタマイズできるようです。
今回はコールセンターでの作業効率化のため、電話番号のコピーボタンを実装しました。

前提

• kintoneでデータの管理をしている方。
• kintoneのカスタマイズをしたい方。
• kintoneにコピーボタンを実装したい方。

上記のような内容を実装したい方は、ぜひ参考にしてみてください。

完成系

kintone_customize.js

(() => {

  'use strict';

  // 詳細画面でイベントを宣言
  kintone.events.on('app.record.detail.show', event => {

    // ボタンを設置
    let CopyButton = document.createElement('button');
    CopyButton.innerHTML = 'copy';
    CopyButton.id = '電話番号';
    CopyButton.style.borderRadius = '10px';
    CopyButton.style.marginLeft = '20px';
    CopyButton.style.marginTop = '10px';
    CopyButton.style.marginBottom = '10px';

    // クリップボードにコピー
    let phoneNumber = kintone.app.record.getFieldElement("電話番号");
    CopyButton.addEventListener('click', function() {
      const phoneNumberText = phoneNumber.firstElementChild.textContent;
      copytoClipboarad(phoneNumberText);
    });

    // コピーを実行
    phoneNumber.appendChild(CopyButton);
　
    // コピー後の挙動
    async function copytoClipboarad(target) {
      await navigator.clipboard.writeText(target)
      CopyButton.style.color = 'green'
      CopyButton.style.borderColor = 'green';
      CopyButton.innerHTML = 'copied';
    };

  });
})()

解説

イベントを宣言

kintone_customize.js

  kintone.events.on('app.record.detail.show', event => {

これはkintoneの記法で、ここでは詳細画面を選択。
他にも一覧画面や作成画面なども指定できるようです。

• 一覧画面
  kintone.events.on('app.record.index.show', event => {
• 作成画面
  kintone.events.on('app.record.create.show', event => {

ボタンを設置

kintone_customize.js

    // ボタンを置きますよと宣言
    let CopyButton = document.createElement('button');
    // ボタンのHTML
    CopyButton.innerHTML = 'copy';
    // フィールドコードを取得
    CopyButton.id = '電話番号';
    // CSSを定義
    CopyButton.style.borderRadius = '10px';
    CopyButton.style.marginLeft = '20px';
    CopyButton.style.marginTop = '10px';
    CopyButton.style.marginBottom = '10px';

CopyButton.idの部分で配置する箇所を決めています。
kintoneではフィールドコードというもの（JavaScriptでいう「id」）を指定することができて、これはkintone側で設定できます。

クリップボードにコピー

kintone_customize.js

    // フィールドコードの内容をphoneNumberに格納
    let phoneNumber = kintone.app.record.getFieldElement("電話番号");
    // ボタンをクリックした時の挙動
    CopyButton.addEventListener('click', function() {
　    // コピーしたい内容をphoneNumberTextに格納
      const phoneNumberText = phoneNumber.firstElementChild.textContent;
      // phoneNumberTextをクリップボードにコピー
      copytoClipboarad(phoneNumberText);
    });

const phoneNumberText = phoneNumber.firstElementChild.textContent;はユーザー画面の検証ツールでHTMLを確認し、それに合わせて変えるイメージ。

コピー後の挙動

kintone_customize.js

    async function copytoClipboarad(target) {
      await navigator.clipboard.writeText(target)
      // CSSを定義
      CopyButton.style.color = 'green'
      CopyButton.style.borderColor = 'green';
      CopyButton.innerHTML = 'copied';
    };

コピーできたかを目視でわかるよう、ボタンの色と文字を変更。

最後に

たった一つのボタンですが、こちらを実装したことで作業のストレスは格段と減り、効率はぐんっと伸びました。
他にもCSSでデザインを一変させてみたり、プラグインで機能を追加できたりなど、アイデア次第でさまざまなカスタマイズができるみたいです。
実際に働いている方の要望に応えられるよう、技術力も高めていきたいですね。