Trelloでクリップボードを賢く使って、ワークフローを加速させる

2024-04-15

Trelloがユーザーのクリップボードにアクセスする方法

navigator.clipboard API

概要:

2018年に導入された比較的新しいAPIです。
ユーザーの同意なしにクリップボードにアクセスすることはできません。
ユーザーがアクセスを許可した場合、Trelloはクリップボードの内容を読み取り、書き込むことができます。

利点:

セキュリティが高いです。
多くのブラウザでサポートされています。

比較的新しいAPIなので、すべてのブラウザでサポートされているわけではありません。
ユーザーの同意が必要なので、使い勝手が若干劣ります。

コード例:

navigator.clipboard.readText().then(function(text) {
  // クリップボードの内容を処理
  console.log(text);
});

navigator.clipboard.writeText("Hello, world!").then(function() {
  // クリップボードへの書き込みが成功しました
  console.log("Wrote to clipboard");
});

第三者ライブラリ

navigator.clipboard APIがサポートされていないブラウザで使用できます。

セキュリティが低い場合があります。
多くのライブラリはメンテナンスされていない場合があります。

// 第三者ライブラリの読み込み
const ClipboardJS = require("clipboard-js");

// クリップボードの内容の読み取り
const text = ClipboardJS.readText();
console.log(text);

// クリップボードへの書き込み
ClipboardJS.writeText("Hello, world!");

Trelloでは、これらのAPIを使用して、カードの作成や編集時にクリップボードの内容を自動的に挿入する機能を提供しています。

例:

ユーザーがURLをコピーして、Trelloカードに貼り付けると、Trelloは自動的にカードにリンクを作成します。

注意事項

ユーザーのクリップボードにアクセスする際には、必ずユーザーの同意を得るようにしてください。
第三者ライブラリを使用する場合は、セキュリティ上のリスクに注意してください。

navigator.clipboard API

navigator.clipboard.readText().then(function(text) {
  // クリップボードの内容を処理
  console.log(text);
});

クリップボードに書き込む

navigator.clipboard.writeText("Hello, world!").then(function() {
  // クリップボードへの書き込みが成功しました
  console.log("Wrote to clipboard");
});

ユーザーの同意を得る

navigator.clipboard.readText().then(function(text) {
  // クリップボードの内容を処理
  console.log(text);
}).catch(function(error) {
  if (error.name === "SecurityError") {
    alert("ユーザーの許可が必要です。");
  }
});

エラー処理

navigator.clipboard.readText().then(function(text) {
  // クリップボードの内容を処理
  console.log(text);
}).catch(function(error) {
  console.error(error);
});

第三者ライブラリ

ClipboardJSを使ってクリップボードの内容を読み取る

// ClipboardJSの読み込み
const ClipboardJS = require("clipboard-js");

// クリップボードの内容の読み取り
const text = ClipboardJS.readText();
console.log(text);

// ClipboardJSの読み込み
const ClipboardJS = require("clipboard-js");

// クリップボードへの書き込み
ClipboardJS.writeText("Hello, world!");
console.log("Wrote to clipboard");

// ClipboardJSの読み込み
const ClipboardJS = require("clipboard-js");

ClipboardJS.readText().then(function(text) {
  // クリップボードの内容を処理
  console.log(text);
}).catch(function(error) {
  if (error.name === "PermissionDeniedError") {
    alert("ユーザーの許可が必要です。");
  }
});

// ClipboardJSの読み込み
const ClipboardJS = require("clipboard-js");

ClipboardJS.readText().then(function(text) {
  // クリップボードの内容を処理
  console.log(text);
}).catch(function(error) {
  console.error(error);
});