GitHub Copilot App の canvas で GitHub Issues のガントチャートを作ってみたBecause GitHub Projects lacks a full-featured Gantt chart view, this article…
匿名の公開いいねです。記事の保存・お気に入りではなく、Featured、Top 3、重要度、掲載順位には影響しません。仕組みとプライバシーAnonymous public likes are reactions, not saved articles or bookmarks. They do not affect Featured, Top 3, importance, or listing order.How it works and privacy
GitHub ProjectsにはガントチャートUI機能が不足しているため、GitHub Copilot Appのcanvas機能を活用してIssuesデータをもとに独自のガントチャートを生成する方法を紹介している。
Because GitHub Projects lacks a full-featured Gantt chart view, this article demonstrates how to use GitHub Copilot App's canvas to generate a custom Gantt chart from GitHub Issues data.
本ページの本文と要約は AI による自動生成です。日本語版と英語版は言語ごとに独立して生成されるため、表現や詳しさが異なる場合があります。正確性は元記事 (zenn.dev) をご確認ください。The body and summaries are AI-generated independently for each language, so wording and detail may differ. Verify accuracy at the original source (zenn.dev).
要約と収集メタデータに基づく AI 解説。元記事全文の転載・翻訳ではありません。AI explainer based on the summaries and collected metadata, not a copy or translation of the full source article.
GitHub Issuesを基にプロジェクトを管理しつつ、GitHub Copilot Appのcanvasで独自のガントチャートを作る方法が紹介されている。GitHub Projectsの表示では満たしにくい、一覧性や現場向けの細かな操作を補う試みだ。
ガントチャート
GitHub Projectsでは、GitHub Issuesをベースにプロジェクト管理ができ、開発作業と管理をGitHubへまとめられる。一方、ガントチャートの表示には対応しておらず、それに近い表示があっても、Excelでほしい場合や、現場固有の細かな機能には対応しにくいという。そこで、必要な形のガントチャートをcanvasで作成している。
canvasの仕組み
GitHub Copilot Appのcanvasは、任意のUIを右パネルに表示する拡張を作れる仕組みだ。会話だけでは扱いにくい一覧性のある情報を表示できるほか、マウスによる直接操作も持たせられる。タスク管理用の専用ビューだけでなく、Issuesをガントチャート形式で扱う画面も構成できる。
期間の決め方
作成時には、Opus 5をplanモードで利用し、create-canvasスキルに「GitHub Issuesをガントチャートとして表示するキャンバスを作って」と依頼した。すると、バーの期間をどう決めるか、手動調整をどう扱うかといった質問が返された。回答を重ねることで、IssueのcreatedAtを開始日、closedAtを終了日として期間を表示し、オープン中のIssueは今日までのバーにする形になった。
画面上の調整
生成されたガントチャートでは、バー自体をドラッグして期間を動かせる。さらに、バーの両端をリサイズすることで、開始日や終了日に相当する範囲を画面上から手動調整できる。Issuesの日時を初期値として表示しながら、必要に応じて直接操作できる専用ビューが実現されている。
GitHub Projects
GitHub Projects can support project management based on GitHub Issues, keeping development work and task management in GitHub. However, it lacks a full-featured Gantt chart view, including the more specific display and export-oriented needs described in the article.
The author uses GitHub Projects for both project management and personal work tasks. Although it offers a view resembling a Gantt chart, the author found that it did not meet needs such as obtaining the result in Excel or adding detailed functions tailored to a particular workplace.
GitHub Copilot App’s canvas
The proposed solution is to build a custom Gantt chart with the canvas mechanism in the GitHub Copilot App. Canvas allows an extension to display an arbitrary UI in the right-hand panel.
This makes it possible to move information-dense views and direct mouse interactions into a dedicated interface rather than handling everything through conversation. The author had previously created dedicated task-management views with canvas but had not made one in a Gantt chart format.
GitHub Issues data
Using Opus 5, the author selected plan mode and the create-canvas skill, then requested a canvas that would display GitHub Issues as a Gantt chart. The system responded with questions about how each bar’s time period should be determined and how manual adjustments should work.
Based on the answers, the generated canvas uses an Issue’s createdAt value as its start date and closedAt as its end date. For an Issue that remains open, the bar extends through the current day.
Manual adjustment
The resulting interface also supports changing periods directly on the screen. A bar can be dragged to reposition its period, while either end can be resized to adjust the displayed start or end.
According to the author, this process produced a better result than expected from the initial request. The finished canvas combined a Gantt-style overview of GitHub Issues with mouse-based controls for manually refining the displayed time periods.
ポコとTECHガイドPoko & TECH Guide
ポコと当サイトのTECHガイドが、記事の要約と収集した情報から読みどころを語るAI生成の対話です。Poko and TECH Dashboard's own TECH Guide discuss the article's highlights in an AI-generated conversation based on its summary and collected source details.
- ポコPoko「Issuesをガントチャートにして」とAIに頼んだら、本当に操作できる画面まで作れたの？Did the AI really build an interactive screen just from a request to turn Issues into a Gantt chart?
- TECHガイドTECH Guideこの記事では、右パネルに操作可能なUIを置けるcanvasを使ったんじゃ。AIの質問に答えると、Issueの期間を帯で示す画面ができたそうじゃよ。The article uses canvas, which can place an interactive UI in the right panel. After the author answered the AI’s questions, it produced a view showing each Issue as a timeline bar.
- ポコPokoIssueの山をカレンダー上の帯に並べる感じか。GitHubでタスクを管理する人が、全体の流れを見やすくできるんだね？So it’s like arranging a pile of Issues as bars on a calendar. Does that help people managing tasks in GitHub see the overall flow?
- TECHガイドTECH Guideそうじゃ。本文では、一覧で把握できるうえ、バーのドラッグや両端のリサイズで期間も調整できるとしておる。Exactly. The piece says users get an at-a-glance view and can adjust periods by dragging bars or resizing either end.
- ポコPokoつまり、GitHubに集めたIssueを、自分の現場向けのガントチャートに変えられたってことだね。へえ、すごい！So the author turned GitHub Issues into a Gantt chart tailored to their own workflow. Wow, that’s impressive!
- TECHガイドTECH Guideただし作例の初期期間は、開始がcreatedAt、終了がclosedAtで、未完了なら今日までじゃ。必要な期間は画面上で手動調整する形じゃのう。One caveat: in this example, bars initially run from createdAt to closedAt, or through today for open Issues. Any needed schedule changes are made manually on the canvas.
