agkan boardコマンド完全ガイド：CLIタスクをカンバンボードで可視化する方法

2026年3月13日

agkanでタスクをCLIで管理しているけれど、タスクの全体像が見えにくいと感じたことはないでしょうか。

agkan v2.5.0で追加された board コマンドを使うと、ローカルにWebベースのカンバンボードを起動でき、7つのステータスカラムにタスクカードが自動で振り分けられます。ドラッグ&ドロップでステータスを変更でき、タスクの詳細編集もブラウザ上で完結します。

この記事では、Docker Sandbox環境でagkan boardを実際に起動し、全機能を検証した結果をもとに、セットアップから実践的な活用方法まで解説します。

agkan boardのカンバンボード画面

前提条件

このガイドを進める前に、以下の環境・知識が必要です。

  • 環境: macOS / Linux / Windows（WSL2推奨）

  • 必要なツール: Node.js 18以上、npm

  • 前提知識: ターミナルの基本操作、agkanの基本コマンド（task add, task listなど）

# Node.jsバージョン確認
node --version
# 期待する出力: v18.0.0 以上（検証環境: v22.22.0）

agkan未導入の場合: 先に npm install -g agkan でインストールしてください。agkanの基本的な使い方は関連記事を参照してください。

全体の流れ

このガイドは以下の5ステップで構成されています。

agkan board機能の全体フロー図

ステップ1: agkan boardの起動

agkan boardは、ローカルにHTTPサーバーを立ち上げてブラウザでカンバンボードを表示する機能です。データは既存のagkanのSQLiteデータベースをそのまま使うため、CLIで登録済みのタスクがそのまま表示されます。

boardコマンドのオプション

agkan board --help
# 出力:
# Usage: agkan board [options]
#
# Start a local Kanban board viewer at localhost
#
# Options:
#   -p, --port   Port to listen on (default: "8080")
#   -t, --title    Board title to display in the header
#   -h, --help           display help for command

boardコマンドには2つのオプションがあります。

| オプション | 説明 | デフォルト値 | |
|—|—|—|
| -p, --port | 待ち受けポート番号 | 8080 | | -t, --title | ボードヘッダーに表示するタイトル | なし | |

テスト用タスクの準備と起動

まず、ボードに表示するタスクを作成します。

# タスクを複数作成
agkan task add 'プロジェクト設計' '全体的なアーキテクチャを検討する'
agkan task add 'フロントエンド実装' 'Reactでフロントエンドを構築'
agkan task add 'バックエンドAPI開発' 'REST APIのエンドポイントを実装'
agkan task add 'テスト作成' 'ユニットテストと結合テストを作成'
agkan task add 'ドキュメント整備' 'README.mdとAPI仕様書を作成'

# ステータスを分散させる
agkan task update 1 status in_progress
agkan task update 2 status ready
agkan task update 3 status in_progress
agkan task update 5 status icebox

タスクの準備ができたら、boardを起動します。

agkan board --title 'プロジェクト管理ボード'
# 出力:
# Board running at http://localhost:8080

ブラウザで http://localhost:8080 にアクセスすると、カンバンボードが表示されます。

ポート変更: 8080が使用中の場合は agkan board -p 3000 のように変更できます。

バックグラウンド起動: 開発中にボードを常時表示しておきたい場合は agkan board & でバックグラウンド実行すると便利です。

ステップ2: ボードUIの構造を理解する

agkan boardのUIは大きく3つのエリアで構成されています。

ヘッダー

画面上部のダークグレーのバーです。--title オプションで指定したタイトルが表示されます。指定しなかった場合は「agkan board」と表示されます。

カラム（ステータス列）

agkanの7つのステータスが左から右へ順番に並んでいます。

カラム 意味 典型的な使い方
icebox 凍結・保留 いつかやるかもしれないタスク
backlog 未着手 やることは決まっているが着手前
ready 着手可能 依存が解消され、すぐ始められる
in_progress 進行中 現在作業中のタスク
review レビュー中 作業完了後のレビュー待ち
done 完了 レビューも通った完了タスク
closed クローズ 完全に終了・不要になったタスク
各カラムのヘッダーにはステータス名とタスク数のバッジが表示されます。さらに「+」ボタンがあり、そのステータスに直接タスクを追加できます。

タスクカード

各タスクはカード形式で表示されます。カードには以下の情報が含まれます。

  • タスクID: #1, #2 のような番号

  • タイトル: タスク名

  • 優先度バッジ: priority メタデータが設定されている場合に表示（critical/high/medium/low）

  • タグ: 付与されているタグがピル形式で表示

agkan boardのカラム構造

ステップ3: タスクカードの操作

ボード上でのタスク操作は大きく3つ: 作成、移動、削除です。

カードの新規作成

各カラムヘッダーの「+」ボタンをクリックすると、モーダルダイアログが開きます。タイトルと説明を入力して保存すると、そのカラムのステータスでタスクが作成されます。

ボードUIから作成したタスクはCLIの agkan task list にも即座に反映されます。データベースが共通であるため、どちらから操作しても整合性が保たれます。

ドラッグ&ドロップによるステータス変更

カンバンボードの最大の特徴は、ドラッグ&ドロップでタスクのステータスを変更できることです。カードをつかんで別のカラムにドロップすると、ステータスが自動的に更新されます。

内部的にはPATCHリクエストが送信されます。

# ドラッグ&ドロップが実行するリクエスト
curl -s -X PATCH -H 'Content-Type: application/json' \
  -d '{"status":"review"}' \
  http://localhost:8080/api/tasks/1

# レスポンス:
# {
#   "id": 1,
#   "title": "プロジェクト設計",
#   "status": "review",
#   "updated_at": "2026-03-13T01:04:10.403Z",
#   ...
# }

ドラッグ中はカードが半透明になり、ドロップ先のカラムがハイライトされるので、視覚的に操作がわかりやすい設計になっています。

右クリックメニュー（コンテキストメニュー）

タスクカードを右クリックすると、コンテキストメニューが表示されます。ここからタスクの削除が可能です。削除はDELETEリクエストとして送信されます。

# 削除のAPIリクエスト
curl -s -X DELETE http://localhost:8080/api/tasks/8

よくあるミス: ドラッグ&ドロップが効かない場合、ブラウザのドラッグ&ドロップ設定やアドオンが干渉している可能性があります。Chromeのシークレットモードで試してみてください。

ステップ4: タグ・優先度・詳細パネルの活用

agkan boardの真価は、タグや優先度を視覚的に管理できる点にあります。

タグの設定

タグはCLIから事前に作成しておき、タスクにアタッチします。

# タグの作成
agkan tag add 'frontend'
# 出力:
# ✓ Tag created successfully
# ID: 1
# Name: frontend

agkan tag add 'backend'
agkan tag add 'urgent'

# タスクにタグを付与
agkan tag attach 1 frontend
# 出力:
# ✓ Tag attached successfully
# Task: [1] プロジェクト設計
# Tag: [1] frontend

agkan tag attach 3 backend

タグが付与されたタスクは、ボード上のカードにピル形式（水色の小さなバッジ）で表示されます。これにより、カードを見るだけでそのタスクがどのカテゴリに属するかが一目でわかります。

優先度の設定

優先度はメタデータとして設定します。

agkan task meta set 1 priority high
# 出力:
# ✓ Metadata set successfully
# Key: priority
# Value: high

agkan task meta set 3 priority critical

優先度はボード上のカードに色分けされたバッジとして表示されます。

優先度 バッジの色
critical 赤（濃）
high 赤
medium 黄
low 緑
### 詳細パネル

タスクカードをクリックすると、画面右側にスライドインする詳細パネルが開きます。詳細パネルでは以下の情報を確認・編集できます。

  • タスクID・タイトル: パネルヘッダーに表示

  • ステータス: ドロップダウンで変更可能

  • 説明: テキストエリアで編集可能

  • タグ: タグセレクターで追加・削除

  • メタデータ: キー・バリューの一覧表示

  • 作成日時・更新日時: 読み取り専用

詳細パネルの幅はリサイズハンドルをドラッグすることで変更でき、280pxから800pxの範囲で調整可能です。

タスクの詳細を取得するAPIは以下の通りです。

curl -s http://localhost:8080/api/tasks/1 | python3 -m json.tool
# 出力:
# {
#     "task": {
#         "id": 1,
#         "title": "プロジェクト設計",
#         "body": "全体的なアーキテクチャを検討する",
#         "status": "review",
#         "priority": "high",
#         ...
#     },
#     "tags": [
#         {
#             "id": 1,
#             "name": "frontend",
#             ...
#         }
#     ],
#     "metadata": []
# }

agkan boardの詳細パネル

応用編

基本操作を習得したら、以下の応用的な使い方でさらに効率を上げましょう。

親子タスクの扱い

agkanはタスクの親子関係をサポートしており、ボード上では親タスクも子タスクもそれぞれ独立したカードとして表示されます。

# 親タスクの下に子タスクを作成
agkan task add '子タスク: DB設計' 'スキーマ設計とマイグレーション' --parent 3
agkan task add '子タスク: エンドポイント実装' 'CRUD APIの実装' --parent 3

# ツリー表示で確認
agkan task list --tree
# 出力:
# Found 6 task(s) in tree view:
# ────────────────────────────────────────────
# ├── [4] テスト作成 (backlog)
# ├── [3] バックエンドAPI開発 (in_progress)
# │   ├── [6] 子タスク: DB設計 (backlog)
# │   └── [7] 子タスク: エンドポイント実装 (backlog)
# ├── [2] フロントエンド実装 (ready)
# └── [1] プロジェクト設計 (in_progress)

ボード上では子タスクもそれぞれのステータスカラムに配置されるため、子タスクの進捗も視覚的に把握できます。親タスクをin_progressにしたまま子タスクを個別にdoneにしていく、といった運用が可能です。

トラブルシュート

このガイドを進める中でよくある問題と解決策をまとめました。

症状 原因 解決策
Board running at... と表示されるがブラウザで開けない ファイアウォールまたはWSL2のネットワーク設定 localhost の代わりに 127.0.0.1 を試す。WSL2の場合はポートフォワード設定を確認
ドラッグ&ドロップが反応しない ブラウザの拡張機能が干渉 シークレットモードで試す、またはChromeを使用
CLIで追加したタスクがボードに反映されない ポーリング間隔の遅延 ブラウザをリロード。通常は数秒以内に反映される
Error: listen EADDRINUSE ポート8080が使用中 agkan board -p 3000 のようにポートを変更
タグがボードに表示されない CLIでタグをattachしていない agkan tag attach でタグを付与
—

まとめ

agkan boardは agkan board の1コマンドでローカルにカンバンボードを起動できるツールです。追加のインフラやクラウドサービスは不要で、既存のSQLiteデータベースをそのまま使います。

実際に検証して特に有用だと感じたのは以下の3点です。

  • CLIとブラウザの双方向同期: CLIで agkan task update を実行するとボードが自動更新され、ボード上でドラッグ&ドロップするとCLIの agkan task list にも即反映される。ポーリング機構による実装で、WebSocketのような追加設定は不要

  • タグ・優先度の視覚化: CLIでは agkan task list の文字列出力でしか確認できないタグや優先度が、ボード上では色分けされたバッジで一目瞭然になる

AI Agentとの協働開発では、AI AgentがCLI経由でタスクを操作し、開発者がボードで全体を俯瞰するという分業が実現します。agkan boardはその橋渡し役として機能するツールです。

関連記事

未分類

Posted by GENDOSU