Trello の API を使って不要なリストを一括アーカイブしてみた
製造ビジネステクノロジー部の小林です。
Trello はアトラシアンが提供するタスク管理ツールです。使いやすいので、私はプライベートのタスク管理に活用しています。

しかし Trello を長期間使っていると、過去の日付リストや完了済みのリストが大量に溜まってしまいます。これを手動で 1 つずつアーカイブするのはなかなか大変です。
そこで、今回は Trello API とブラウザの DevTools コンソールを使って、不要なリストを一括アーカイブする方法を紹介します。
なぜターミナルではなくブラウザのコンソールを使うのか
Trello API はターミナルから curl などで叩くこともできます。全件アーカイブなど単純な操作であればターミナルでも十分です。
ただし今回は「アーカイブしたいリストを選んで実行したい」という要件がありました。ターミナルではチェックボックスのような UI が作れないため、アーカイブするリストの ID を手動でコピペする必要があり不便です。
一方ブラウザのコンソールでは document.createElement を使って UI を動的に生成できます。リストの中から視覚的に選んで実行できるため、今回はブラウザのコンソールを選びました。
CSP に注意:実行するページによって動かない場合がある
ブラウザのコンソールから API を叩く際に注意が必要なのが CSP(Content Security Policy)です。
CSP とは、Web ページがどのオリジン(ドメイン)に対してリクエストを送れるかをサーバー側が制御する仕組みです。各ページは HTTP レスポンスヘッダーで許可するオリジンを指定しており、コンソールからの fetch もこの制限を受けます。
今回実際に試したところ、次のような結果になりました。
| 実行ページ | 結果 | 理由 |
|---|---|---|
| https://trello.com | ❌ 失敗 | Trello の CSP が api.trello.com への直接 fetch をブロック |
| https://claude.ai | ✅ 成功 | CSP が api.trello.com への接続を許可していた |
直感に反しますが、Trello のページから Trello API を叩けないという状況が発生します。エラーメッセージを確認すると、Trello ページの CSP の connect-src に api.trello.com が含まれていないためブロックされています。

理由は公式情報がなく不明した🥺
本記事では Claude.ai のページのコンソールで動作確認しています。CSP の制限はページごとに異なるため、動かない場合は Claude.ai(https://claude.ai)など別のページで試してみてください。
手順
1. API キーとトークンを取得する
まず Trello の API キーを取得します。
下記の Trello Power-Up 管理ページにアクセスします。

Power-Up とは、Trello の機能を拡張するためのプラグインのことです。カレンダー表示や GitHub 連携など、さまざまな Power-Up が提供されています。今回は Power-Up 自体を開発するわけではありませんが、API キーの発行には Power-Up の作成が必要です。
「新規」ボタンから新しい Power-Up を作成します。

Iframe コネクタ URL については、実際にアクセスされることはないので、ダミーで問題ありません。
作成した Power-Up の画面から「API キーを生成」をクリックします。


API キーが発行されました。

次にトークンを取得します。以下の URL の YOUR_API_KEY を自分の API キーに置き換えてブラウザでアクセスします。
https://trello.com/1/authorize?expiration=never&name=MyApp&scope=read,write&response_type=token&key=YOUR_API_KEY
認可画面が表示されるので「許可」をクリックします。

トークンが表示されます。この値を控えておきましょう。

2. ボード ID を確認する
アーカイブしたいボードの URL を確認します。
https://trello.com/b/XXXXXXXX/ボード名
XXXXXXXX の部分がボード ID です。
3. コンソールを開く
任意のページで F12 で DevTools を開き、Console タブを選択します。

初回はコンソールへの貼り付けがブロックされている場合があるので、まず以下を入力して Enter を押します。
allow pasting
4. スクリプトを実行する
以下のコードの YOUR_API_KEY・YOUR_TOKEN・YOUR_BOARD_ID を自分のものに置き換えて、コンソールに貼り付けて実行します。
// ── 設定 ──────────────────────────────────────────
const API_KEY = "YOUR_API_KEY";
const TOKEN = "YOUR_TOKEN";
const BOARD_ID = "YOUR_BOARD_ID";
// ── オープン中のリストを取得 ───────────────────────
const lists = await fetch(
`https://api.trello.com/1/boards/${BOARD_ID}/lists?key=${API_KEY}&token=${TOKEN}&filter=open`
).then((res) => res.json());
// ── 操作パネルをページ右上に表示 ──────────────────
const panel = document.createElement("div");
panel.style.cssText = `
position: fixed; top: 20px; right: 20px;
width: 340px; max-height: 80vh; overflow-y: auto;
background: #fff; border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
padding: 20px; z-index: 99999; font-family: sans-serif;
`;
panel.innerHTML = `
<div style="font-weight:700;font-size:15px;margin-bottom:12px;">リスト一括アーカイブ (${
lists.length
}件)</div>
<div style="display:flex;gap:6px;margin-bottom:12px;">
<button id="selAll" style="flex:1;padding:6px;border-radius:6px;border:1px solid #ddd;cursor:pointer;font-size:12px;">全選択</button>
<button id="clrAll" style="flex:1;padding:6px;border-radius:6px;border:1px solid #ddd;cursor:pointer;font-size:12px;">解除</button>
</div>
<div id="listItems">
${lists
.map(
(list) => `
<label style="display:flex;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px solid #f0f0f0;cursor:pointer;font-size:13px;">
<input type="checkbox" value="${list.id}" style="width:15px;height:15px;">${list.name}
</label>
`
)
.join("")}
</div>
<div style="margin-top:12px;">
<button id="archBtn" style="width:100%;padding:10px;background:#de350b;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;">アーカイブ実行</button>
</div>
<div id="msg" style="margin-top:8px;font-size:12px;color:#666;"></div>
`;
document.body.appendChild(panel);
// ── 全選択・解除ボタン ─────────────────────────────
const msgEl = document.getElementById("msg");
document.getElementById("selAll").onclick = () =>
panel
.querySelectorAll("input")
.forEach((checkbox) => (checkbox.checked = true));
document.getElementById("clrAll").onclick = () =>
panel
.querySelectorAll("input")
.forEach((checkbox) => (checkbox.checked = false));
// ── アーカイブ実行ボタン ───────────────────────────
document.getElementById("archBtn").onclick = async () => {
const checkedBoxes = [...panel.querySelectorAll("input:checked")];
if (!checkedBoxes.length) {
msgEl.textContent = "リストを選択してください";
return;
}
msgEl.textContent = `${checkedBoxes.length}件をアーカイブ中...`;
let successCount = 0;
let failCount = 0;
// 選択したリストを1件ずつアーカイブ
for (const checkbox of checkedBoxes) {
try {
const response = await fetch(
`https://api.trello.com/1/lists/${checkbox.value}/closed?key=${API_KEY}&token=${TOKEN}`,
{
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ value: true }),
}
);
response.ok ? successCount++ : failCount++;
} catch {
failCount++;
}
}
msgEl.textContent = `完了!成功:${successCount}件 / 失敗:${failCount}件`;
};
実行するとページ左上にパネルが表示されます。

アーカイブしたいリストにチェックを入れて「アーカイブ実行」をクリックするだけです。
今回は例として「TODO2」と「TODO3」のリストをアーカイブしてみます。

アーカイブが完了しました。成功件数と失敗件数がパネル下部に表示されます。

Trello のボードを確認すると、「TODO2」と「TODO3」のリストがアーカイブされていることが分かります。

5. パネルを閉じる
アーカイブ完了後、パネルを閉じるには以下を実行します。
document.querySelectorAll("div").forEach((d) => {
if (d.style.zIndex == "99999") d.remove();
});
注意事項
まとめ
Trello の API とブラウザのコンソールを組み合わせることで、大量のリストを手軽に一括アーカイブできました。定期的に Trello を整理したい方はぜひ試してみてください!








