GitHub Issue から動画ネタを育てる Copilot Canvas の話 - case: vkatsu-canvas -

2026-09-05 Dev Days Tokyo - GitHub Copilot appに入門！ のLTで発表した内容です。
GitHub Copilot app Canvas Extensionの割とベーシックな（？）作りのCanvas作例として、GitHub IssueをデータソースとしたAI Chatとのインタフェースのアプリを紹介しました。

Transcript

1. vkatsu-canvas — for GitHub Copilot App Canvas 📁 vkatsu-canvas › talk › 00-title.md // vkatsu-canvas GitHub Issue から動画ネタを育てる Copilot Canvas の話 Research → Concept → Demo → Script を1つのCanvasで 1
2. vkatsu-canvas — for GitHub Copilot App Canvas 📁 vkatsu-canvas › talk › 01-github.md // GitHub Issue、お使いですか？ バグ報告・改善提案の場、というのが一般的な使い方 人生の大きめイベントをマイルストーンで管理する家庭もある モバイルからもWebからも書ける、共有できるオンラインのメモ帳 2
3. vkatsu-canvas — for GitHub Copilot App Canvas 📁 vkatsu-canvas › talk › 02-decision-notebook.md // 「意思決定を手伝ってくれる」 メモ帳 Issue を見て、何かを決められる。 それがGitHubの強み。 3
4. vkatsu-canvas — for GitHub Copilot App Canvas 📁 vkatsu-canvas › talk › 03-canvas.md // それを"さらにうまく"使う方法が 最近現れた GitHub Copilot App の Canvas Issue / リポジトリの情報を見ながら、Copilot とチャットできる さっきまでの発表者の方々も、いろんな Canvas を見せてくれました GitHub をベースに使う場面ではかなり強力 4
5. vkatsu-canvas — for GitHub Copilot App Canvas 📁 vkatsu-canvas › talk › 04-my-problem.md // 6月から VTuber活動をはじめた きっかけ 配信のための「ネタ」を常に考えている iPhoneのメモ帳に書いていたけど… とにかく見づらい・管理できない → GitHub Issue に書くようにした タイトルがある / ラベルがつけられる / Markdownでレンダリングされる 5
6. vkatsu-canvas — for GitHub Copilot App Canvas 📁 vkatsu-canvas › talk › 05-still-tedious.md // でも、まだ足りないことがあった ネタは思いつくけど、同じ作業の繰り返し 誰に刺さるか？ そもそも面白いか？ 一次情報まで潜って裏付けを取る（深掘りは好きな作業） ネタの数が増えると、全部を毎回自分で調べるのはしんどい → この「調べる・構造化する」部分を AIに任せたい 6
7. vkatsu-canvas — for GitHub Copilot App Canvas 📁 vkatsu-canvas › talk › 06-pipeline.md // だから作った: vkatsu-canvas Issue → 1. Research → 2. Concept → 3. Demo → 4. Script Research: 面白いか？誰向けか？一次情報まで潜って判定 Concept: 「誰が・どんな疑問で・何を理解して終わるか」を1つに絞る Demo: 主張を証明するデモ環境を生成 Script: 証拠をどう見せるかの台本まで一気通貫して作る 7
8. vkatsu-canvas — for GitHub Copilot App Canvas 📁 vkatsu-canvas › talk › 07-how-it-works.md // どう作ったか Canvas は Hono のローカルWebアプリとして表示 HTML / REST API / SSE を拡張プロセス内で serve 生成処理は 今開いている Copilot セッションに投げる チャットと Canvas が同じ文脈で動く データの置き場所は GitHub Issue ネタ・メモ・生成結果・ステータスを Issue / コメント / ラベルに集約 8
9. vkatsu-canvas — for GitHub Copilot App Canvas 📁 vkatsu-canvas › talk › 08-demo-list.md DEMO 1 ▶ ネタ一覧を見てみる 自分のトークテーマ用リポジトリの Issue を一覧表示 判定バッジ（GO / MAYBE / SKIP）とステータスが並ぶ どのネタから手をつけるべきかが一目でわかる 9
10. vkatsu-canvas — for GitHub Copilot App Canvas 📁 vkatsu-canvas › talk › 09-demo-sync.md DEMO 2 ▶ ボタンを押すと、チャットと Canvasが同期する Canvasのボタン → 裏では今開いている Copilotセッションにチャット 生成結果はチャット欄にも、Canvasにも 同時に流れてくる GitHub Issue のコメントにもそのまま書き戻される 10
11. vkatsu-canvas — for GitHub Copilot App Canvas 📁 vkatsu-canvas › talk › 10-demo-verdict.md DEMO 3 ▶ 「これ、本当に面白い？」を聞いて みる 既に動画化済みのネタ（GitHub Student Developer Pack回）を再投入 AIに 面白いかどうかの判定 をリクエスト 結果はいかに…！？ 11
12. vkatsu-canvas — for GitHub Copilot App Canvas 📁 vkatsu-canvas › talk › 11-source-of-truth.md // 状態は持たない。Issueが正。 Canvasの状態は基本的にメモリ上だけ → 閉じると消える でも大丈夫、Issueを選ぶたびにコメントから読み戻す 別マシンで開いても、途中まで進めた企画をそのまま再開できる 12
13. vkatsu-canvas — for GitHub Copilot App Canvas 📁 vkatsu-canvas › talk › 12-mobile-memo.md // 移動中に書いたメモも、次に効く 電車の中で Issue に一言コメントするだけ 「デモは Before/After じゃなくて CPU プロファイルを見せたい」 次に台本を作り直すと、そのメモが反映される 人間のコメントだけを拾う（Canvas自身が書いたコメントは除外） 13
14. vkatsu-canvas — for GitHub Copilot App Canvas 📁 vkatsu-canvas › talk › 13-how-built.md // これ、どうやって作ったの？ のようなスキルを使えば足がかりが作れる Copilot SDK は ソースコードが公開されている sdk の Canvas 定義をコーディングエージェントに読ませる → 同じような Canvas を組み立ててくれる 心配なら Node.js SDK と Canvas の定義を自分で読んで実装してもよい /create-canvas 14
15. vkatsu-canvas — for GitHub Copilot App Canvas 📁 vkatsu-canvas › talk › 14-conclusion.md このCanvasは、他人向けの プロダクトじゃない。 自分の困りごとに向けて 作っただけのCanvasです。 皆さんの「困りごと」も、たぶんCanvasになります 15
16. vkatsu-canvas — for GitHub Copilot App Canvas 📁 vkatsu-canvas › talk › 15-thanks.md // ありがとうございました みんなの作例、楽しみにしています。懇親会でお話しましょう VTuberの 合瀬奏(あわせそう) もよろしくお願いします https://www.youtube.com/@awasesou PR 16