VSCode・AIアシスタント・GitHubと連携したZenn記事投稿の流れ
この記事はVSCodeのCopilotが執筆支援しています。
動機
具体的には以前からGitHubをZennと連携させていましたが、そのため逆に、Zenn記事の冒頭に記載するtopicsなどのフォーマット（YAML Front Matter）は毎回書き方を忘れたり、記述ミスや適切なtopics選びが面倒で記事UP作業から遠のいていました。AI支援とGitHub連携があれば、細かい書式やルールを覚えなくても、QA方式でスムーズに記事作成できると考えたのがきっかけです。
Copilotの使い分け：Agentモード推奨
CopilotにはAgentモードとAskモードがあります。
- Agentモード：コマンドの実行をAIに依頼できるため、手作業を減らせて便利です。特にZenn記事の作成やGit操作など、繰り返しの作業が多い場合はAgentモードを推奨します。
- Askモード：AIがコマンドを提案しますが、自分でターミナルにコピペして実行する必要があります。
用途や好みに応じて使い分けると効率的ですが、この記事のようなワークフローではAgentモードが特に便利です。
VSCode・AIアシスタント・GitHubと連携したZenn記事投稿の流れ
この記事では、VSCode上でAIアシスタントと対話しながら、GitHubと連携したZenn記事を作成し、GitHub経由でZennに投稿・公開するまでの全体像をまとめます。
事前準備：Zenn記事の内容確認や指示方法
Zenn記事の内容をAIに理解させたい場合は、最初に「このURLを読んで内容を確認して」ではなく、
「このURL https://zenn.dev/ken_okabe/articles/vscode-ai-zenn-test の記事本文を取得して、内容を確認して」
のように、記事本文の取得や内容確認を明確に指示することで、AIが確実にWebページの内容を取得し、理解した上でQAをスムーズに進めることができます。
この記事のURLをAIに読ませておけば、手順や注意点を正確に把握した上で、スムーズにQA方式でやりとりできることが担保されます。要約や抜粋ではなく、全体像を理解した上で適切にサポートできるようになります。
0. Zennと連携するGitHubリポジトリの準備
-
GitHubで新しいリポジトリを作成
Zennの公式テンプレート（zenn-docs）を使うと便利です。 -
ZennのWeb UIでリポジトリを連携
Zennの「設定」→「GitHub連携」から、作成したリポジトリをZennに登録します。
詳細はZenn公式：GitHub連携手順を参照してください。
1. ローカルへのクローンと作業開始
-
ローカルにリポジトリをクローン
ターミナルで以下のコマンドを実行します。git clone https://github.com/ユーザー名/リポジトリ名.git cd リポジトリ名 -
VSCodeでリポジトリを開く
VSCodeでクローンしたディレクトリを開きます。 -
AIアシスタントに状況を伝える
「このリポジトリはZennと連携しています。QA方式で記事をUPしたい」とAIアシスタントに伝え、作業を開始します。
2. 記事タイトルの決定
AIアシスタントに記事タイトルを伝えます。
例：「VSCode-AI-Zenn記事投稿テスト」
3. 記事内容の相談
AIアシスタントに記事の内容や構成、テンプレート作成を依頼できます。
必要に応じて見出しや本文の例も提案してもらえます。
この記事自体もユーザと相談の上Copilot（VSCode）が執筆しています。
4. Markdownファイルの作成
AIアシスタントの指示に従い、articles/ ディレクトリに新しいMarkdownファイルを作成します。
5. 画像の追加
画像を記事に追加したい場合、AIアシスタントとのQAの流れで以下のように進みます。
- AIがプロジェクト直下に
imagesディレクトリを作成します。 - ユーザが指定した画像ファイル（例: スクリーンショット）を、AIの指示や自動操作で
images/ディレクトリにコピーします。 - AIが記事内に
/images/ファイル名という絶対パスで画像を参照するMarkdown記法を挿入します。
例：※相対パス（例:../images/ファイル名）やGitHubのURLではなく、必ず/images/から始まる絶対パスを指定します。 - 画像ファイルも記事と一緒にAIがGitでコミット＆Pushします。
6. Gitでコミット＆Push
記事ファイルや画像ファイルの追加・修正も、AIアシスタントがQAの流れに沿ってGitでコミットし、リモートリポジトリにPushします。ユーザは「Pushして」などと指示するだけでOKです。
7. Zenn CLIでプレビュー・公開
必要に応じてZenn CLIでローカルプレビューや公開作業を行います。
8. 公開ステップ：下書きから公開へ
AIが記事を作成した際、初期状態では published: false となっている場合があります。Web上で記事が下書きのままになっていることを確認したら、
AIに「下書きを公開してください」と指示します。
すると、AIが published: true に修正し、再度コミット＆Pushして公開モードにしてくれます。
この最終ステップで、記事がZenn上で一般公開されます。
このように、VSCodeとAIアシスタントを活用することで、効率的にZenn記事の作成・投稿が可能です。
Discussion