こんにちは！AnotherBallでテックリード兼Avvy事業部技術責任者をやっている @fortkle です。

今回は、スクラムでのタスク管理をより良くするためにChrome拡張を自作した話を書こうと思います。

自由度の高かった物理ホワイトボードのカンバン

現在、Avvyの開発チームでは開発手法としてスクラムを採用しており、日々の透明性と検査・適応を促すためにカンバンボードを活用しています。

カンバンを語るとき、今も頭に浮かぶのが以前の職場で使っていた物理のホワイトボードとポストイットです。

やっていたことはシンプルで、

• ホワイトボードにマーカーでレーンを引く（Todo / In Progress / In Review / Done）
• 上から優先順位順にカードを並べる
• 左端にIssue（親）、その右にSub-issue（子）を横展開

これだけで「今スプリントで何をどの順番でやるか」がひと目でわかりました。

まずはシンプルなルールで始めましたが、スクラムを進めていくうちにカンバンの形も少しずつ変わっていきました。

例えば、メンバーのSlackアイコンを印刷してマグネットに貼り、担当しているタスクの上に貼ってアサインを可視化したり、「このレーンは最大1枚まで」とマーカーで書いてWIP制限したり。

カンバンガイドにも「どのようにフローの透明性を確保するかは、カンバンシステムメンバーの想像力以外に制限を受けない」と書かれていますが、物理のホワイトボードはまさにそれが実現できるツールでした。

ちなみに、このあたりの物理カンバンの活用アイデアはアジャイルコーチの道具箱 – 見える化実例集が非常に参考になるのでおすすめです。

Linearに移行して「あの感じ」を再現したくなった

今のAvvy開発チームは地方や海外からリモートワークで働くメンバーもいるため、物理のホワイトボードとあまり相性がよくありません。そのためカンバンは物理カンバンではなくLinearというデジタルツールを使っています。

LinearにはBoard Viewがあり、カード管理はできるのですが、使ってみるとホワイトボード時代の感覚とは違う部分がいくつかありました。

担当者ごとにグルーピングして表示する例（表示されているデータは全て架空のものです）

• IssueとSub-issueの親子構造をBoard上で理想の形に配置できない（grouping/sub-groupingなどを駆使すればできなくはないがベストではない）
• デフォルトのUIだと1画面に表示できる内容に限界があり、スプリント全体を把握しづらい
• 停滞しているカードが一目でわかりづらい
• WIPを視覚的に制限できない

「できなくはないけど、あの感じが出ない」という状態が続いていました。

Chrome拡張でカスタムビューを乗せた

そこで試したのが、「Chrome拡張でLinearにカスタムViewをオーバーレイする」という方法です。

Linear APIでIssueとSub-issueの情報、ステータスの変更履歴などが取得できるので、それをもとにホワイトボード時代のレイアウトをブラウザ上で再現しました。

物理カンバンを再現したカスタムView（表示されているデータは全て架空のものです）

特徴としては以下の通りです。

IssueとSub-issueの親子構造を展開
IssueカードからSub-issueがBoard上で展開されるので、全体像が把握しやすくなりました。スプリント全体を1画面で見渡せるのも大きなポイントです。

優先順位順の縦並び
スプリント内のタスクが優先順位順に上から並びます。スプリントが進むにつれてカードは ／ を描くように右上へ移動していくので、優先順位の低いカードが先に動いているときにすぐ気づけます。

差し込みタスクへの対応
優先順位が可視化されているので、急な追加タスクが入ったときに「優先順位の低いこれを諦めて追加タスクを入れよう」という判断がしやすくなりました。

AIに頼むことでやりたいことが5分で実現できる

技術的には以前から可能でしたが、ここにAIコーディングの進化が加わるとさらに自由度が増します。どういうことかと言うと、AIコーディングを使えば「ちょっとこう変えたい」がすぐ実現できるということです。具体例をあげていくつか工夫した点をご紹介します。

停滞インジケーター

「In Progressで止まっているメンバーがいても、ボードを見ただけではなかなか気づけない」という問題がありました。例えば、物理カンバン時代ならポストイットに正の字で経過日数を表現したりして簡単に可視化できていた部分です。

これもAIに「レーンでの経過時間を可視化したい。担当者アイコンにインジケーターのように5分割したゲージを出し、1日経過するごとにそのゲージを埋めて最大5日まで停滞状況がわかるようにして」と伝え、以下のようなUIを作ってもらいました。ここまでものの数分です。

各カードの右上にある担当者アバターに5分割のリングインジケーターが付いて、In Progressに移動してから1日ごとにゲージが1つ埋まります。「このカード、もう5日止まってるな」とボードをひと目見れば全員が気づけるようになりました。

Linear APIがステータス変更の日時情報を持っているので、サーバーサイドに何も追加することなくクライアントサイドだけで実現できたのも良かったです。

絞り込み・カードへのフォーカス

毎朝のデイリースクラムで「今日やること」を1人ずつメンバーがチームに対して共有するとき、カンバン上のどこにその人のカードがあるか一目でわからない問題がありました。物理カンバン時代なら直接該当するカードを指差しすれば終わっていた部分です。

これもAIに「担当者でカードを絞り込んだ場合にその人の対象カードがどこにあるのか見失うときがある。絞り込んだときだけ、添付画像の位置に←→のようなボタンを置いてその人のカードに1つずつフォーカスする挙動にしたい。ブラウザのページ内検索（Ctrl+F）のようなイメージ。」と添付画像とともに伝えて以下のような機能ができました。

UIなど少しの微調整は行いましたが、あっという間にイメージ通りのものが実装できました。
また、絞り込みというと一般的に「選択したもの以外が表示されなくなる」という挙動が多いですが、今回は意図的に消すのではなく選択されたものをハイライトで目立たせる実装にしています。そのため、絞り込み中も他のタスクとの関係性を確認できる点も使いやすいポイントです。

使い始めて起きたチームの変化

このボードを使い始めてからチームで起きた変化をいくつか列挙すると以下の通りです。

• 「いま着手しているタスクより、こちらのタスクの方が優先順位が高そうです！」という会話が増えた
  • 優先順位順に並んでいると、ズレに気づきやすくなります。
• 停滞に早めに気づけるようになった
  • In Reviewで数日止まっているカードにも気づきやすくなり、「詰まってるなら手伝えるよ」という申し出が早めに出せるようになりました。
• スプリントの取捨選択がしやすくなった
  • 急な追加タスクが入ったときの「これは今スプリントで諦めよう」という合意がしやすくなりました。

一方、デメリットとしてはChrome拡張であるため、スマホや専用デスクトップアプリからは使えない点は注意が必要です。また、社内限定であってもChromeウェブストアで配布する場合は審査に2〜3日かかるため、チームへの展開が遅くなる点も気になりました。

まだまだ使い始めたばかりですが、AIを活用することで理想的なカンバンを作成できる可能性を強く感じました。

チーム内でのChrome拡張の配布について

Chrome拡張はChromeウェブストアで配信しつつ、公開範囲を社内に限定することもできます。具体的な手順はこちらの記事が参考になりました。

Google グループのメンバーに配布する - Google

また、Chrome拡張の審査の提出はGitHub Actionsで自動化できるため、PRをマージすれば自動的に審査中になるようにChrome拡張のリポジトリを整備しています。

まとめ

「物理カンバンの自由度はデジタルツールでは再現できない」と半ば諦めていましたが、AIコーディングで状況が変わった実感があります。

「こう可視化したい」を自然言語で伝えたら数分で動くUIになる。ツールの制約に縛られず、チームが本当に必要な可視化を自分たちで作れるようになってきました。

今後もチームのおかれた状況とニーズに合わせてカンバンをカスタマイズし、育てていこうと思います。

We’re Hiring

AnotherBallでは、今回紹介したようにチームの課題を自分たちで発見し、解決していく文化を大切にしています。そんな環境でプロダクト開発に携わりたいエンジニアを募集しています。

AnotherBall Careers