Trello の API を使って不要なリストを一括アーカイブしてみた

Trello の API を使って不要なリストを一括アーカイブしてみた

2026.05.09

製造ビジネステクノロジー部の小林です。

Trello はアトラシアンが提供するタスク管理ツールです。使いやすいので、私はプライベートのタスク管理に活用しています。
スクリーンショット 2026-05-08 11.56.24

しかし Trello を長期間使っていると、過去の日付リストや完了済みのリストが大量に溜まってしまいます。これを手動で 1 つずつアーカイブするのはなかなか大変です。

そこで、今回は Trello API とブラウザの DevTools コンソールを使って、不要なリストを一括アーカイブする方法を紹介します。

なぜターミナルではなくブラウザのコンソールを使うのか

Trello API はターミナルから curl などで叩くこともできます。全件アーカイブなど単純な操作であればターミナルでも十分です。
https://support.atlassian.com/ja/trello/docs/getting-started-with-trello-rest-api/

ただし今回は「アーカイブしたいリストを選んで実行したい」という要件がありました。ターミナルではチェックボックスのような 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-srcapi.trello.com が含まれていないためブロックされています。

スクリーンショット 2026-05-09 0.39.17

理由は公式情報がなく不明した🥺

本記事では Claude.ai のページのコンソールで動作確認しています。CSP の制限はページごとに異なるため、動かない場合は Claude.ai(https://claude.ai)など別のページで試してみてください。

手順

1. API キーとトークンを取得する

まず Trello の API キーを取得します。
下記の Trello Power-Up 管理ページにアクセスします。
https://trello.com/power-ups/admin
スクリーンショット 2026-05-08 12.00.54

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

「新規」ボタンから新しい Power-Up を作成します。
スクリーンショット 2026-05-08 7.55.25
Iframe コネクタ URL については、実際にアクセスされることはないので、ダミーで問題ありません。

作成した Power-Up の画面から「API キーを生成」をクリックします。
スクリーンショット 2026-05-08 7.55.46

スクリーンショット 2026-05-08 7.56.22

API キーが発行されました。
スクリーンショット 2026-05-08 12.04.30

次にトークンを取得します。以下の URL の YOUR_API_KEY を自分の API キーに置き換えてブラウザでアクセスします。

https://trello.com/1/authorize?expiration=never&name=MyApp&scope=read,write&response_type=token&key=YOUR_API_KEY

認可画面が表示されるので「許可」をクリックします。
スクリーンショット 2026-05-08 8.04.53

トークンが表示されます。この値を控えておきましょう。
スクリーンショット 2026-05-08 8.05.09

2. ボード ID を確認する

アーカイブしたいボードの URL を確認します。

https://trello.com/b/XXXXXXXX/ボード名

XXXXXXXX の部分がボード ID です。

3. コンソールを開く

任意のページで F12 で DevTools を開き、Console タブを選択します。
スクリーンショット 2026-05-08 12.29.41

初回はコンソールへの貼り付けがブロックされている場合があるので、まず以下を入力して 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}件`;
};

実行するとページ左上にパネルが表示されます。
スクリーンショット 2026-05-08 12.48.24

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

アーカイブが完了しました。成功件数と失敗件数がパネル下部に表示されます。
スクリーンショット 2026-05-08 12.48.33

Trello のボードを確認すると、「TODO2」と「TODO3」のリストがアーカイブされていることが分かります。
スクリーンショット 2026-05-08 12.48.48

5. パネルを閉じる

アーカイブ完了後、パネルを閉じるには以下を実行します。

document.querySelectorAll("div").forEach((d) => {
  if (d.style.zIndex == "99999") d.remove();
});

注意事項

まとめ

Trello の API とブラウザのコンソールを組み合わせることで、大量のリストを手軽に一括アーカイブできました。定期的に Trello を整理したい方はぜひ試してみてください!

この記事をシェアする

関連記事