@nqounetです。
GitHubでissueを発行してCopilotにアサインするワークフローがとても快適です。今回は、このブログにリンクカードを表示するショートコードを作成してもらった体験を紹介します。
背景・きっかけ
このブログはHugoを使って構築しています。
最近、記事内のリンクが少し寂しく見えると感じていました。単純なテキストリンクではなく、OGP(Open Graph Protocol)情報を取得してカードのように表示できたら、もっと見やすくなるのではないかと思ったのです。
そこで、issueを発行してCopilotにショートコードを作成してもらうことにしました。
後で調べてみると、すでにlinkcardというショートコードを作成してブログに公開している方もいるようです。ただ、使っているテーマによってスタイルシートの当たり具合が変わってしまうので、結局は何かしらの修正が必要になるだろうと思いました。
実際に行ったこと
issueの作成
issueを作成して、Copilotにアサインしました。
Copilotにアサインする際、オプションでプロンプトを追加できます。今回は以下のように入力しました。
得意な分野についてはこだわってしまう癖があります。
ちょっとしたこだわりがどのような感じで反映されるのか楽しみでした。
追加の指示
なかなか良い感じにできたとは思うのですが、カード内の文字が少し小さく見えました。「既存のスタイルシートに影響されているのかな」と思い、追加で指示しました。
また、カード内の文字が少し小さく見えます。他のスタイルシートの影響を受けないようにしてください
この時は何も思っていませんでしたが、よく考えてみれば「文字を50%大きくしてください」のように具体的な指示をするのが正しかったと思います。
ただ、「文字が小さい」と言うだけでも文字を大きくしてくれるなんて。本当に人間味を感じます。
結果と分析
作成されたlinkcardショートコード
Copilotは、以下のような機能を持つショートコードを作成してくれました。
- OGP自動取得: URLを指定するだけで、タイトル・説明・画像を自動取得
- セキュリティ対策: URLプロトコルのバリデーション(http/httpsのみ許可)
- アクセシビリティ: キーボードフォーカスインジケーターの追加
- ダークモード対応: CSS変数によるテーマ対応
- エラーハンドリング: ネットワークエラー時の適切な処理
使い方はとてもシンプルです。
|
|
このように書くだけで、きれいなカード形式のリンクが表示されます。
コードレビューへの対応
PRには16件のレビューコメントがあり、Copilotはそれらすべてに対応してくれました。対応内容には以下のようなものがありました。
- 正規表現パターンの修正(引用符の適切な処理)
htmlUnescapeからplainifyへの変更- faviconのonerrorハンドラー追加
- フォントサイズの増加(タイトル: 1.125rem、説明: 1rem、ドメイン: 0.875rem)
Premium requestsの使用状況
作業中、ふと気づくとPremium requestsが90%に到達していました。
Premium requestsとは
Premium requestsは、GitHub Copilotの高度なAI機能を使用する際に消費されるリクエストです(GitHub Docs)。
Copilot Proでは、通常のコード補完や基本的なチャットは無制限で利用できます。一方、以下のような高度な機能を使用すると、Premium requestsが消費されます。
- Copilot Coding Agent(issueへのアサインやPRの自動作成)
- 高度なAIモデル(Claude Sonnetなど)の使用
- Copilot CLIのプロンプト
- コードレビューの依頼
Copilot Proでは月間300回のPremium requestsが付与されます。上限に達すると高度な機能は一時的に使用できなくなりますが、月初(UTC 00:00)にリセットされます。追加料金が発生することはなく、オプトインしない限り超過分を請求されることはありません(GitHub Docs)。
まあ、あと2日ほどで0に戻りますし、使えるだけ使ってしまおうと思っています。
この体験から学んだこと
- issueベースのワークフローは快適: issueを発行してアサインするだけで、Copilotが自律的に作業を進めてくれる
- プロンプトで個性を付与できる: 「こだわり屋」というキャラクター設定が、詳細なセキュリティ対策やアクセシビリティ対応につながった可能性がある
- 曖昧な指示でも意図を汲み取ってくれる: 「文字が小さい」という指摘だけで、フォントサイズを適切に調整してくれた
- レビューコメントへの対応も自動: 16件のレビューコメントすべてに対応し、品質の高いコードを完成させてくれた
まとめ
GitHub issueにCopilotをアサインして、linkcardショートコードを作成してもらいました。
「得意な分野についてはこだわってしまう癖があります」というプロンプトを追加したことで、セキュリティやアクセシビリティにも配慮した、こだわりのあるショートコードが完成しました。
曖昧な指示でも意図を汲み取って対応してくれる点は、まさに人間のエンジニアと協働しているような感覚でした。Premium requestsの消費は気になりますが、この快適さを考えると十分に価値があると感じています。