GitHub Copilot Skills & Agentsで記事作成を完全自動化｜VS Code環境の構築手順を徹底解説

---

はじめに

こんにちは！横浜情報機器株式会社の蜂須賀です。このガイドでは、GitHub Copilot の Skills & Agents 機能を使って、記事にしたい情報の URL を貼り付けるだけで WordPress 投稿用の日本語 HTML 記事を全自動生成するシステムを 3 日間でゼロから構築する手順を徹底解説します。

「記事を書きたいけど時間がない」「英語の情報を日本語に整形する作業が毎回しんどい」——このガイドを読み終わる頃には、それらの作業が全て自動化されています。Node.js もサーバー知識も不要。VS Code の Copilot Chat に URL を投げるだけで、日本語記事が output/ フォルダに完成します。

このガイドを読み終えると、こんなことができます

上の 2 枚がこのシステムの全てです。以降のステップでその仕組みを一緒に構築していきましょう。

前提条件

必要なもの	バージョン / 備考
GitHub アカウント	無料プランで可
Git for Windows	2.x 以上
VS Code	最新版推奨
GitHub Copilot 拡張	VS Code に導入済み
WordPress サイト	投稿用（自社サイト）

# 事前にバージョン確認
git --version     # git 2.x 以上
code --version    # VS Code

# VS Code 内で GitHub Copilot 拡張を確認
# Ctrl+Shift+X → "GitHub Copilot" を検索

---

1. Day 1：GitHub 環境構築 & SSH パスワードレス設定

ゴール： SSH でパスワードなしに GitHub に接続し、リポジトリをローカルにクローンできる状態にする。

1-1. SSH キーの生成

ターミナル（コマンドプロンプト or PowerShell）を開き、以下のコマンドを実行します。

ssh-keygen -t ed25519 -C "your-email@example.com"

対話式プロンプトが表示されます。パスフレーズは空のまま Enter を 2 回押すことで「パスワードレス」になります。

Enter file in which to save the key: [Enter でデフォルト（~/.ssh/id_ed25519）]
Enter passphrase:                    [Enter を押す ← パスワードレスのポイント]
Enter same passphrase again:         [Enter]

生成が完了すると ~/.ssh/ フォルダに id_ed25519（秘密鍵）と id_ed25519.pub（公開鍵）が作成されます。

1-2. 公開鍵を GitHub に登録

公開鍵の内容を表示してコピーします。

cat ~/.ssh/id_ed25519.pub
# PowerShell の場合
Get-Content $env:USERPROFILE\.ssh\id_ed25519.pub

表示された ssh-ed25519 AAAA... から始まる 1 行を全てコピーし、GitHub に登録します。

1. GitHub にログイン → 右上アバター → Settings



2. 左メニュー → SSH and GPG keys



3. New SSH key をクリック



4. Title に分かりやすい名前（例: demo）を入力



5. Key タイプ: Authentication Key を選択



6. Key 欄にコピーした公開鍵をペースト



7. Add SSH key をクリック

1-3. SSH 接続テスト

登録後、以下のコマンドで接続確認します。

ssh -T git@github.com

以下のメッセージが表示されれば成功です。

Hi <your-username>! You've successfully authenticated, but GitHub does not provide shell access.

よくあるトラブル：「successfully authenticated」が表示されない場合

原因： ローカル PC の鍵と、GitHub に登録されている鍵が一致していない可能性があります。キーを作り直した際などに発生しやすいので、まず「鍵が合っているか」を確認してみてください。

1. 鍵が一致しているか確認する
   PowerShell で以下を実行し、表示された鍵（ssh-ed25519 ...）を確認します。

   cat ~/.ssh/id_ed25519.pub

2. GitHub の登録内容と見比べる
   GitHub の「Settings」→「SSH and GPG keys」を開き、手順 1 で表示された鍵と一致しているか確認します。
   ※ 違っている場合は、古い鍵を削除して手順 1 の最新の鍵を貼り直して保存してください。

3. 再度接続テストを行う

   ssh -T git@github.com

   ※「Are you sure you want to continue connecting…?」と聞かれたら yes と入力して Enter を押せば完了です。

1-4. GitHub リポジトリの作成

GitHub の右上「+」→「New repository」をクリックし、以下の設定で作成します。

項目	設定値
Repository name	security-news-automation-demo
Description	セキュリティニュース自動化学習キット
Visibility	Private（社内利用のため必ず非公開に）
Initialize with README	チェックなし（後で追加）

1-5. Git for Windows のインストール

インストーラーを実行したら、基本的にはすべての画面で「Next」を押し進め、最後に「Install」をクリックすれば完了です。（特殊なカスタマイズが必要ない場合は、デフォルト設定のままで問題ありません。）

インストール完了後、PowerShell を再起動してバージョンを確認します。

git --version
# git version 2.x.x が表示されれば成功

1-6. リポジトリをローカルにクローン

■ リポジトリのクローン（git clone）とは？
GitHub 上にある「セキュリティニュース自動化用のプログラム環境」を、自分のローカル PC にダウンロード（複製）する操作です。SSH URL でクローンすることで、以降の操作がすべてパスワードなしで完結します。

PowerShell で以下のコマンドを順番に実行します。

# 1. GitHub からローカル PC へプログラム群を複製（クローン）
git clone git@github.com:<your-username>/security-news-automation.git

# 2. クローンしたフォルダへ移動
cd security-news-automation

# 3. 該当フォルダを VS Code で直接開く
code .

※ code . を実行すると、ダウンロードした環境を開いた状態で自動的に VS Code が起動します。
※ HTTPS URL（https://github.com/...）ではなく、必ず SSH URL（git@github.com:...）を使ってください。

1-7. Git の初期設定 & VS Code エラー対処

初回のみ Git にユーザー情報を設定します。

git config --global user.name "Your Name"
git config --global user.email "your-email@example.com"
git config --list  # 設定確認

クローン直後に VS Code でエラーが表示された場合、コマンドプロンプトを完全に閉じて VS Code を再起動するだけで解決するケースがほとんどです。

Day 1 チェックリスト

• ssh -T git@github.com でパスワードなしに認証できた
• GitHub にリポジトリが作成された（Private）
• SSH URL でクローンできた
• VS Code でフォルダが開けた
• git config --list でユーザー名・メールが設定されている

---

2. Day 2：VS Code セットアップ & Skills/Agents 作成

ゴール： Copilot Chat から #news-article-generator を呼び出すだけでセキュリティニュース記事が自動生成される状態を作る。

2-1. GitHub Copilot の動作確認

Ctrl+Shift+I で Copilot Chat を開き、「こんにちは」と入力して応答があることを確認します。

※ フォルダを開いた際に以下のダイアログが表示された場合は、それぞれ次のように進めてください。

• 「作成者を信頼しますか？」→「はい」または「信頼」を選択して進めてください。
• 「親フォルダー Windows 内のすべての作成者を信頼します」→ チェックを入れて進めてください。

README（リードミー）とは？

リポジトリ内の説明ファイルのことです。プロジェクトの概要・構成・必要環境・セットアップ手順・使い方を記載するのがベストプラクティスとされています。

.md（マークダウン）とは？

マークダウンファイルといい、エンジニアがメモ帳代わりに使うファイル形式です。AI が読みやすいファイル形式としても知られています。

2 つのドキュメントの主な違いは以下の通りです。

ドキュメント	主なターゲット	書かれていることの核	例えるなら
README	初めて触る人、使う人	概要、動かし方、インストール方法	家電の「かんたんスタートガイド」
仕様書	開発メンバー、クライアント	実装する機能一覧、画面遷移、データ構造	建物を建てるための「設計図」

Copilot Chat に指示してみよう

以下のプロンプトをコピーして Copilot Chat に貼り付けてみてください：

以下のプロジェクト概要を元に、GitHubに載せる用の `README.md` を作成してください。
読者がワンクリックでコピーできるよう、全体を1つの大きなMarkdownコードブロック（```markdown ... ```）で囲んで出力してください。

【プロジェクト概要】
・概要：セキュリティニュースの URL を入力すると、自動的に日本語の HTML 記事を生成するツール。GitHub Copilot Skills を使ってインタラクティブに URL を受け取る。
・含める項目：
  1. プロジェクトの概要
  2. 必要環境
  3. セットアップ手順
  4. 使い方
  5. ファイル構成

初心者にも分かりやすいように、見出しや箇条書きを整えて作成をお願いします。

Copilot が README を生成したら、以下の手順でファイルを確定させます。

1. チャットに表示された「Created README.md」を Ctrl キーを押しながらクリックします。
2. 「Create File」をクリックします。

※ トラブルシューティング：エラーが表示された場合

1. 以下のプロンプトをコピーし、エラー画面の画像とあわせて Copilot Chat に貼り付けます。

   作成されていないので確認してください。

2. 「Allow」をクリックします。
3. Copilot Chat の回答に従って対処します。エラーが出るたびに Copilot Chat に貼り付けて質問してください。PowerShell のエラー結果がある場合は、そのままコピーして Chat に送ると回答が得られます。

3. README が作成されたら、画面上部の「Keep」をクリックして確定させます。
4. Ctrl+Shift+V を押すと Markdown のプレビューが表示されます。

生成された内容をリポジトリルートに README.md として保存します。

💡 Copilot へのコツ：「含める項目」を箇条書きで渡すと、抜け漏れなく構成されたドキュメントが一発で得られます。物足りない場合は「3. セットアップ手順をもっと詳しく」と追加指示するだけで補完してくれます。

💡 効率化のポイント：社内で決められている既存の作成手順や流れ（例: 自社専用の要件定義書など）がある場合は、その内容をチャットに貼り付けて「これをベースに README を整理して」と指示すると、プロジェクト固有の仕様を反映した正確な文書が生成されます。

※ トラブルシューティング：中央に README が表示されない場合

ルートディレクトリが開かれている状態だと、README の表示が埋もれてしまうことがあります。

1. 左上の「File」→「Open Folder」をクリックします。
2. セクション 1-4 で作成した security-news-automation フォルダを選択します。フォルダが見つからない場合は、設定したリポジトリ名が異なっていた可能性があります。
3. 正しいリポジトリ名でセクション 1-4・1-6 をやり直してから、この手順に戻ってください。
4. セクション 2-1 に戻り、再度プロンプトを送信します。
   ※「コマンドを実行しますか？」と表示された場合は「自動承認を有効にする」などで許可してください。

2-2. 機能定義書（仕様書）の作成

Copilot Chat に以下のプロンプトを入力して機能定義書を生成し、docs/functional-spec.md として保存します。

このセキュリティニュース自動化システムの機能定義書を作ってください。

## システム概要

- ユーザーがセキュリティニュースのURLを入力する
- Copilot Skill が URL のコンテンツを解析する
- 日本語で要約した HTML 記事を自動生成する

以下の形式でまとめてください：

1. システム概要
2. 機能一覧（テーブル形式）
3. 入力・出力の定義
4. 技術スタック
5. 制約事項

2-3. Skills & Agents のファイル構造

完成後のフォルダ構造は以下の通りです。

.github/
├── skills/
│   └── news-article-generator/
│       └── SKILL.md          ← 指揮者（# で呼び出す）
└── agents/
    ├── security-researcher.agent.md   ← URL 調査
    ├── security-writer.agent.md       ← 記事執筆
    └── security-reviewer.agent.md     ← 品質レビュー

2-4. Skill（指揮者）の作成

Copilot Chat で /create-skill コマンドを使います。

1. Copilot Chat を開く（Ctrl+Shift+I）
2. /create-skill と入力して Enter
3. 以下のプロンプトを貼り付けて送信

セキュリティニュースのURLを受け取り、
Researcher → Writer → Reviewer の順にエージェントを呼び出して
日本語HTML記事を自動生成するスキルを作って。
ユーザーに聞くのはURLと対象読者（standard/technical/executive）の2つだけ。
Gitコミットはしないことを DO NOT に書いて。
.github/skills/news-article-generator/SKILL.md に保存。

※ トラブルシューティング：作成された SKILL が英語表記だった場合
Copilot Chat に該当部分をコピペのうえ「日本語にして」と指示すると日本語に変換されます。

2-5. Agent（ワーカー）の作成：3 つ

同じ Copilot Chat で /create-agent を使って 3 つのエージェントを順番に作成します。

① Researcher エージェント

セキュリティニュースのURLを調査して、タイトル・要約・CVE・CVSS・
緊急度・推奨アクションを構造化して返すエージェントを作って。
tools は web, search, read のみ。
.github/agents/security-researcher.agent.md に保存。

② Writer エージェント

Researcherの調査結果を受け取り、standard/technical/executive の
対象読者に合わせた日本語セキュリティ記事を執筆するエージェントを作って。
tools は read, edit のみ。
.github/agents/security-writer.agent.md に保存。

③ Reviewer エージェント

セキュリティ記事の正確性・アクションの具体性・読者適合性をレビューして
✅公開可 / ⚠️軽微な修正推奨 / ❌要修正 の3段階で判定するエージェントを作って。
tools は read, search のみ。
.github/agents/security-reviewer.agent.md に保存。

2-6. 会社スタイルの適用（YJK スタイル）

生成される HTML 記事に自社ブランドのスタイルを適用します。Copilot Chat に以下を入力します。

以下の要件で記事テンプレートのスタイルを更新してください：
- 会社名: YJK（yjk365security.jp）
- CTA ボタン（相談リンク）を記事末尾に追加
- X（旧Twitter）シェアボタンを追加
- 目次（.yjk-toc）を自動生成
.github/skills/news-article-generator/SKILL.md を更新。

2-7. セキュリティニュース記事の自動生成テスト

1. Copilot Chat を開く（Ctrl+Shift+I）
2. #news-article-generator と入力して Enter
3. セキュリティニュースの URL を貼り付ける（例: https://www.ipa.go.jp/security/vuln/index.html）
4. 対象読者を選択：standard（一般向け）/ technical（技術者向け）/ executive（経営層向け）
5. Skill が Researcher → Writer → Reviewer を順番に自動実行する
6. 完了後、output/ フォルダに HTML ファイルが生成される

生成記事のプレビューは Ctrl+Shift+P → Simple Browser: Show → output/*.html のパスを入力で確認できます。

Day 2 チェックリスト

• .github/skills/news-article-generator/SKILL.md が生成された
• 3 つの .agent.md が .github/agents/ に生成された
• #news-article-generator でスキルを呼び出せた
• URL を入力して HTML 記事が output/ に保存された
• ブラウザで生成記事が表示された

---

3. Day 3：Git ワークフロー & WordPress 投稿

ゴール： 生成した記事を GitHub にプッシュし、WordPress に投稿して公開する。

3-1. Git の 3 つのエリアを理解する

[作業フォルダ]
    ↓ git add
[ステージングエリア]
    ↓ git commit
[ローカルリポジトリ]
    ↓ git push
[GitHub（リモート）]

エリア	説明
作業フォルダ	実際にファイルを編集する場所
ステージングエリア	コミットする変更を「仮置き」する場所
ローカルリポジトリ	コミット履歴が保存される場所（PC 内）
GitHub（リモート）	チームで共有するリポジトリ

3-2. .gitignore の作成

機密情報（API キー、.env ファイル）をコミットしないよう、.gitignore を作成します。

@"
# Node.js
node_modules/

# 生成された記事（テスト用）
output/*.html

# 環境変数・秘密情報
.env
.env.local
*.key
*.pem

# OS・エディタ
.DS_Store
Thumbs.db
.vscode/settings.json
"@ | Set-Content .gitignore

⚠️ .env ファイルには API キーなどの機密情報が入ります。.gitignore に必ず含めてから初回コミットを行ってください。

3-3. git add / commit / push の手順

# 1. 変更されたファイルを確認
git status

# 2. 全変更をステージに追加
git add .

# 3. コミット
git commit -m "feat: セキュリティニュース記事生成システムを追加"

# 4. GitHub にプッシュ
git push origin main
# 初回プッシュの場合
git push -u origin main

良いコミットメッセージの書き方

種別	用途	例
feat:	新機能の追加	feat: URL入力から HTML記事を自動生成する機能を追加
fix:	バグ修正	fix: 日本語URLが文字化けするバグを修正
docs:	ドキュメントの変更	docs: README にセットアップ手順を追記
chore:	設定ファイルの変更	chore: .gitignore を追加

💡 VS Code の Source Control パネル（Ctrl+Shift+G）でコミットメッセージ欄の「✨」アイコンをクリックすると、Copilot がコミットメッセージを自動生成してくれます。

3-4. GitHub でプッシュを確認する

1. ブラウザで GitHub のリポジトリページを開く
2. Commits タブをクリック
3. 先ほどのコミットメッセージが表示されていれば成功

3-5. WordPress への記事投稿

1. WordPress 管理画面 → 投稿 → 新規追加
2. 投稿タイトルを入力
3. 編集エリア右上の「コードエディター」に切り替え（または Ctrl+Shift+Alt+M）
4. output/*.html の内容を全てコピー&ペースト
5. アイキャッチ画像を設定（右サイドバー）
6. カテゴリ・タグを設定
7. プレビューで確認後、公開をクリック

3-6. プルリクエストの作成（チームワークフロー）

チームでレビューしてから公開する場合は、プルリクエストを使います。

git checkout -b feature/add-security-news-article
git add .
git commit -m "feat: Toshiba 脆弱性記事を追加"
git push origin feature/add-security-news-article

GitHub の Web UI で Compare & pull request をクリックしてプルリクエストを作成し、レビュー完了後に main ブランチにマージします。

Day 3 チェックリスト

• .gitignore を作成した（.env が含まれていること）
• git add . → git commit → git push が成功した
• GitHub のブラウザでコミットを確認した
• WordPress に記事をペーストして公開できた

---

4. 発展編：別環境への展開 & テーマカスタマイズ

4-1. 別環境での環境構築

同僚の PC など別環境でも同じシステムを使えるようにします。

git clone git@github.com:<your-username>/security-news-automation.git
cd security-news-automation
cp .env.example .env

.env ファイルに必要な API キーを設定します。

# .env（このファイルは .gitignore に含まれており、共有されない）
GEMINI_API_KEY=your_gemini_api_key_here
WORDPRESS_URL=https://your-site.com
WORDPRESS_USER=your_username
WORDPRESS_APP_PASSWORD=your_app_password

4-2. 記事の再生成手順

生成した記事の品質が不十分な場合、パラメーターを変えて再生成できます。

#news-article-generator
URL: https://...（再生成したい記事の URL）
対象読者: technical
追加指示: CVE 番号と CVSS スコアを必ず含めること

4-3. 記事のレビュー判定基準

評価	意味	対応
✅ 公開可	問題なし	そのまま WordPress に投稿
⚠️ 軽微な修正推奨	小さな改善点あり	確認後に判断して投稿
❌ 要修正	致命的な問題あり	修正して再生成

4-4. ダーク/ライトカラーテーマの実装

WordPress 管理画面 → 外観 → カスタマイズ → 追加CSS に以下を追加することで、ユーザーのシステム設定に応じたテーマ切り替えが実現します。

/* ライトテーマ（デフォルト） */
.yjk-article {
  background: #ffffff;
  color: #333333;
}

/* ダークテーマ（システム設定に追従） */
@media (prefers-color-scheme: dark) {
  .yjk-article {
    background: #1e1e1e;
    color: #d4d4d4;
  }
  .yjk-article h2, .yjk-article h3 {
    color: #4fc3f7;
  }
  .yjk-article a {
    color: #82b1ff;
  }
  .yjk-article code {
    background: #2d2d2d;
    color: #f8f8f2;
  }
}

4-5. よく使う Git コマンド早見表

コマンド	用途
git status	変更ファイルの確認
git log --oneline	コミット履歴（短縮）
git diff	変更差分を表示
git restore <file>	作業フォルダの変更を取り消す
git restore --staged <file>	ステージから取り除く
git pull origin main	GitHub から最新を取得
git checkout -b feature/new	新しいブランチを作成して切り替え
git checkout main	main ブランチに戻る

---

5. まとめ

本ガイドでは、GitHub Copilot の Skills & Agents 機能を活用したセキュリティニュース自動投稿システムのセットアップ手順を 3 日間のステップで解説しました。

Day	内容	所要時間
Day 1	GitHub・SSH 環境構築、リポジトリ作成・クローン	約 1 時間
Day 2	Skills/Agents 作成、記事自動生成テスト	約 1.5 時間
Day 3	Git ワークフロー、WordPress 投稿	約 1 時間

一度セットアップが完了すれば、セキュリティニュースの URL を貼り付けるだけで英語記事の日本語要約・重要ポイント整理・WordPress 投稿用 HTML 出力・GitHub バージョン管理が全自動で実行されます。情シス担当者や技術ブログ担当者の日常業務を大幅に効率化できます。

セットアップで詰まった箇所は、VS Code の Copilot Chat に「このエラーを直して」と日本語で相談するだけで解決策を提示してくれます。ぜひ活用してください。

トラブルシューティングまとめ

現象	推定原因	解決策
Unable to write… エラー	作業場所の権限不足	ユーザーフォルダ（マイドキュメント等）へ移動して作業する。
git コマンドが認識されない	環境パスの未設定	Git for Windows を再インストールし、ターミナルを再起動する。
エージェントが動かない	ファイルパスの不一致	.github/agents/ フォルダに正しくファイルがあるか確認する。
日本語が文字化けする	エンコーディングの不一致	ファイルの保存形式を UTF-8 に統一する（VS Code 右下で確認）。

1-6. git clone 時のエラー（Windows 特有）

【現象】 Windows 環境（PowerShell 等）で git clone を実行した際、以下のエラーが表示される。

「git は内部コマンドまたは外部コマンド、操作可能なプログラム...として認識されていません」

【原因】 PC に Git がインストールされていない、または環境変数（パス）が通っていない。

【解決策】

1. ブラウザで「Git for Windows」を検索し、公式ページからインストーラーをダウンロードします。
2. 基本的にデフォルト設定のままインストールを完了させます。
3. インストール完了後、一度 PowerShell（ターミナル）を完全に終了して再起動してから、再度 git clone を実行してください。

1-6. git clone 時のエラー（ディレクトリ関連）

【現象】 git clone 成功後に cd security-news-outmation-demo を実行しても、以下のエラーが表示される。

「指定されたパスが見つかりません」

【原因】 クローン時に作成されたローカルのフォルダ名と、cd コマンドで指定したディレクトリ名が一致していない（タイポなど）。

【解決策】 GitHub 側で作成した実際のリポジトリ名を正確に確認し、cd コマンドの後ろに正しいフォルダ名を入力して実行してください。
※ コマンドライン上で cd s まで入力して Tab キーを押すと自動補完されるので確実です。

1-7. Git 初期設定について

ユーザー名（user.name）やメールアドレス（user.email）の Git 初期設定は、リポジトリを作成・クローンするたびに毎回行う必要はありません。PC 環境ごとに初回のみ（1 回だけ）行えば、以降のプロジェクトでも共通で適用されます。

2-2. README 自動生成時の Unable to open エラー

【現象】 Copilot Chat で「Create」ボタンを押した際に以下のエラーが出て、ファイルが自動作成されない。

「Unable to open 'README.md'」

【原因】 リポジトリの直下が正しく VS Code で開かれていないか、環境の権限に問題がある可能性があります。

【解決策（代替手順）】

1. VS Code のファイルエクスプローラーから、手動で README.md という名前の空ファイルを新規作成します。
2. Copilot Chat がチャット欄に生成したテキスト内容をコピーします。
3. 作成した空の README.md ファイルを開き、コピーした内容をペーストして保存します。

出典

• security-news-outmation-demo — GitHub