JavaScriptを有効にしてください

検証ブログを GitHub Copilot に手伝わせ隊

 ·   8 分で読めます  ·   [Kento GitHub Copilot]

GitHub Copilot の Coding Agent を使って検証ブログを書くワークフローを最近利用しています!
人間と AI がそれぞれの得意分野を活かして協力することで、効率的かつ質の高いコンテンツを作成できるようになりました!

背景

技術検証をした際に、その内容をブログにまとめることは知識の定着や共有に非常に有効です。しかし、検証に時間を使った後に執筆作業をするのは結構労力を使います。

GitHub Copilot の Coding Agent を活用することで、これを改善することができました!
人間は検証や創造的な部分に集中し、AI は定型的な作業や文章の整理を担当することで、効率的にブログを作成できます!

全体像:人間と AI の役割分担

検証ブログ作成における人間と AI の役割分担を図にまとめました!

まずはブログの執筆全体像です

sequenceDiagram
    participant 人間
    participant AI

    %% アイデア出し & ドラフト
    activate 人間
    人間->>人間: アイデア出し・企画
    人間->>AI: Issue 作成・アサイン<br/>(検証テーマ・目的・アジェンダを共有)
    deactivate 人間

    activate AI
    AI->>AI: Issue / 既存記事を解析
    AI->>AI: ブログのドラフト作成
    AI->>人間: Pull Request を作成・共有
    deactivate AI

    %% 技術検証
    activate 人間
    人間->>人間: 技術検証を実施
    人間->>人間: 検証結果をドラフトに追記
    人間->>AI: 検証結果やスクショの<br/>反映をコメントで依頼
    deactivate 人間

    activate AI
    AI->>AI: 追記内容をレビュー・修正
    AI->>人間: 更新された Pull Request を提示
    deactivate AI

    activate 人間
    人間->>人間: 最終レビュー・調整・公開
    deactivate 人間

ブログの内容をもとにプレゼン資料を作成することがあります。
その場合も AI を使って効率的に作業を行っています。
そのワークフローはこちらです

sequenceDiagram
    participant 人間
    participant AI

    %% Marp プレゼン生成
    activate 人間
    人間->>AI: プレゼンの Issue 作成・アサイン<br/>(元ネタのブログを共有)
    deactivate 人間

    activate AI
    AI->>AI: ブログからスライド案を生成
    AI->>人間: Marp プレゼンの Pull Request を作成
    deactivate AI

    activate 人間
    人間->>人間: 修正
    人間->>AI: コメントで追加修正を指示
    deactivate 人間

    activate AI
    AI->>AI: フィードバックを反映して修正
    AI->>人間: 更新内容を共有
    deactivate AI

    %% 公開
    activate 人間
    人間->>人間: 最終レビュー・調整・公開
    deactivate 人間

このワークフローでは、人間が創造的な判断や実際の検証を担当し、AI が文章作成や整理作業を支援します!

ざっくり手順

ブログ執筆編

  1. アイデア出し(人間)
  2. 記事のドラフト作成(AI)
  3. 検証(人間)
  4. 検証結果を追記(人間 + AI)

プレゼン作成編

  1. Marp でプレゼンのドラフト作成(AI)
  2. プレゼンの修正(人間 + AI)
  3. Marp のエクスポート

Step1: アイデア出し(人間)

Issue でテーマを管理

検証したい技術や気になる機能を Issue で管理します! Issue には以下の情報を記載します:

  • 検証テーマ:何を検証するか
  • 検証の目的:なぜこの検証をするのか
  • アジェンダ(概要):記事で扱いたい内容の構成
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
# タイトル例
Azure の新機能 XXX を検証し隊

# 内容例
## 検証の目的
- 最近発表された XXX 機能の動作を確認する
- 実際の利用シーンを想定した検証を行う

## アジェンダ
1. XXX 機能の概要
2. 検証環境の準備
3. 基本的な使い方の検証
4. 実践的なシナリオでの検証
5. まとめ

この記事の場合は下記です

image01
Issue の例:

Step2: 記事のドラフト作成(AI)

Copilot にアサイン

Issue に @copilot をアサインするだけで、Copilot が自動的に作業を開始します!

Copilot は以下の作業を自動的に行います:

  1. Issue の内容を解析
  2. ブログの記事構造を理解(既存記事を参考に)
  3. 適切なディレクトリに記事ファイルを作成
  4. フロントマターを含む記事のドラフトを生成
  5. Pull Request を作成
image02
Copilot が自動で Pull Request を作成:

AI が生成する内容

  • 記事の骨組み:タイトル、導入部分、各セクション
  • フロントマター:適切な日付、タグ、著者情報
  • スクリーンショット用のプレースホルダー:視覚的な説明が必要な箇所を示す
  • README ファイル:スクリーンショットの取得方法や注意事項

生成されるファイル例

content/ja/posts/2025/[トピック]/
├── index.md              # ブログ記事本体
└── README.md             # スクリーンショット取得の手順(必要に応じて)

static/images/posts/2025/[トピック]/
└── (スクリーンショット格納用ディレクトリ)

Step3: 検証(人間)

実際に検証を実施

AI が生成したドラフトを元に、実際の技術検証を行います!

  1. 環境の準備:記事で説明する環境をセットアップ
  2. 手順の実行:ドラフトに記載された手順を実際に試す
    • Copilot が間違えていた場合や、ドラフトが気に食わない場合は修正
  3. 結果の記録:コマンドの出力や動作結果(スクショなど)をメモ

スクリーンショットの保存

検証中に撮影したスクリーンショットは、指定されたディレクトリに保存します!

1
2
3
static/images/posts/2025/[トピック]/image01.png
static/images/posts/2025/[トピック]/image02.png
...

Step4: 検証結果を追記(人間 + AI)

検証結果の整理

検証で得られた情報を記事に追加します! この作業は人間と Copilot が協力して行います。

人間の作業

  • 検証結果の要点を整理
  • スクリーンショットを適切な場所に配置
  • コマンドの出力や設定内容を記載
  • 重要なポイントや注意事項を追記

AI の支援

Pull Request にコメントを追加することで、AI に修正を依頼できます:

1
2
3
下記の点を修正してください
- XXX の設定手順を追加
- 資料全体の体裁が整うように文言を修正

Copilot が自動的に:

  • 文章を整理して追記
  • スクリーンショットの挿入コードを追加
  • 記事全体の流れを調整

反復的な改善

このプロセスは何度か繰り返せます!

  1. Pull Request にフィードバックをコメント
  2. Copilot が修正を反映
  3. 内容を確認してさらに加筆 or Copilot に修正依頼

最終的に記事が完成したら、Pull Request をマージして公開します!

ブログの執筆はここまでです


ブログの内容をもとに LT などプレゼンを行うことがあります
詳細は下記の記事で解説しています
Marp と GitHub Copilot を使って効率よくプレゼンし隊 – クラウドを勉強し隊

本記事の後半では概要を紹介します

Step5: Marp でプレゼンのドラフト作成(AI)

新しい Issue を作成

1
2
3
4
5
6
タイトル: [記事タイトル] のプレゼン資料を作成

内容:
- 既存のブログ記事(content/ja/posts/2025/[トピック]/index.md)を元に Marp プレゼンを作成
- 既存の marp.css テーマを使用
- スライド数は 10-15 枚程度

Copilot にアサイン

Issue に @copilot をアサインすると、Copilot が下記の作業を進めてくれます!

  1. ブログ記事の内容を解析
  2. プレゼン向けに要点を抽出
  3. Marp 形式のスライドを生成
  4. 適切な画像配置を提案
image03
Marp プレゼンの Pull Request 例:

Step6: プレゼンの修正(人間 + AI)

プレゼンの仕上げ

生成されたプレゼンを確認し、必要に応じて調整します!

人間がチェックする項目

  • スライドの流れ:ストーリーが自然か
  • 情報量:1 枚のスライドに詰め込みすぎていないか
  • 視覚的な要素:画像の配置は適切か

画像の配置やサイズ感など Copilot が判断できない部分は人間が修正します!

AI に依頼できる修正

Copilot に任せられる内容は Pull Request のコメントで具体的に指示します!

1
2
3
4
プレゼンを以下のように修正してください:
1. スライド 5 の箇条書きを 3 項目に減らす
2. スライド 8 の画像を全画面背景(bg)として配置
3. 最後に「ご清聴ありがとうございました」スライドを追加

Step7: Marp のエクスポート

修正が完了すると Marp で HTML や PDF など使いたいフォーマットでエクスポートします!
最近は HTML でエクスポートすることが多いです!

この記事のプレゼンをエクスポートしたのがこちらです
検証ブログを GitHub Copilot に手伝わせ隊

おまけ

GitHub Copilot の Coding Agent に感動して発表されてから爆速で記事を書いたことがありました
GitHub Copilot Coding Agent がやばすぎて共有し隊 – クラウドを勉強し隊

この記事を X でポストしたら当時の GitHub CEO にリポストされました

まとめ

GitHub Copilot の Coding Agent を活用することで、検証ブログの作成プロセスが大きく変わりました!

人間は

  • 創造的な企画・アイデア出し
  • 実際の技術検証
  • 品質の最終確認

AI は

  • 記事構成の提案とドラフト作成
  • 定型的な文章の整理
  • フィードバックに基づく修正

この役割分担により、検証そのものに集中でき、かつ質の高いブログとプレゼン資料を効率的に作成できるようになりました!

技術検証の記録を残したいけれど執筆に時間がかかって悩んでいる方は、ぜひこのワークフローを試してみてください!

参考

共有

Kento
著者
[Kento GitHub Copilot]
2020年に新卒で IT 企業に入社. インフラエンジニア(主にクラウド)として活動中