PR
PCSP_300x250

VSCode + Gemini Code Assistant + PicGo でつくる最強のブログ執筆環境

技術系
スポンサーリンク

VSCode と Gemini Code Assistant、そして PicGo を組み合わせることで
Markdownでのブログ執筆と画像管理が圧倒的に快適になります。
この記事では、セットアップ手順から実際の執筆フローまでをまとめます。

非エンジニアの方は「VSCode」と聞くと「プログラマーが使う難しいソフト」というイメージがあるかもしれませんが、
これは**「AIが文章の添削やアイデア出しを手伝ってくれる、超高機能なメモ帳」**だと考えてください。

スマホにアプリを入れて便利にするのと同じように、拡張機能（プラグイン）を追加して自分好みにカスタマイズできるのが特徴です。 これを機にまずは高機能なメモ帳として試してみてはいかがでしょうか。

スポンサーリンク
PCSP_300x250

なぜこの構成が便利なのか

  • VSCode
    動作が軽く、文章を書くための便利な機能がたくさん追加できます。
  • Gemini Code Assistant
    GoogleのAIです。下書きの作成、文章の書き直し、構成案の提案が一瞬で完了します。「もっと分かりやすく書き直して」といった相談も可能です。
  • PicGo
    画像をドラッグ＆ドロップするだけで、ネット上の保存場所に自動でアップロードし、ブログに貼り付けられる形式にしてくれます。
  • Markdown 中心のワークフロー
    「Markdown（マークダウン）」という書き方を使うことで、はてなブログ、Qiita、Zenn、noteなど、様々なブログサービスにそのままコピー＆ペーストで投稿できます。

以前の課題、実現したかったこと

以前、はてなブログをWebエディタのMarkdownモードで執筆していた際には、以下の課題がありました。

  • Copilotに都度テキストを貼り付けて添削を依頼する必要があった
  • 指摘された箇所を手作業で修正していた
  • 画像を1枚ずつはてなブログのWebエディタにアップロードする手間がかかった
  • 画像のURLがはてなブログに依存するため、noteなど他のプラットフォームに記事を転載すると画像が表示されなかった

これらの問題を解決するため、執筆環境をパソコン上のVSCodeに移行し、AI（Gemini）を導入しました。 画像は「GitHub（ギットハブ）」というサービス上の**公開リポジトリ（ネット上の保存箱）**にアップロードする方式に変更し、その作業を自動化する「PicGo」というツールを利用しています。

私の執筆工程を説明

  1. VSCodeで文章を書く
  2. Gemini（AI）に「この文章を分かりやすくして」と頼んで、推敲する
  3. 画像を挿入する際は、Macの場合、時刻などが表示されるバーにあるアイコンに向けて画像ファイルをドラッグ＆ドロップします。
  4. 自動でGitHubにアップロードされ、数秒待つとMarkdown用のリンクがクリップボードにコピーされるので、VSCodeに貼り付ける（Ctrl+V または Cmd+V）
  5. 原稿が完成したら、全文をコピーする
  6. ブログサービスのMarkdown編集モードに貼り付ける（※HTMLとして貼り付けたい場合は、拡張機能「Markdown All in One」を使ってHTML形式でコピーし、HTML編集モードに貼り付けます）

必要なツール一覧

  • VSCode
  • Gemini Code Assistant（VSCode の追加機能）
  • Markdown All in One（VSCode の追加機能）
  • PicGo（アプリ版）

Markdownとは？

Markdown（マークダウン）は、見出しやリスト、太字などの装飾を、簡単な記号（#や-など）を使って記述する軽量なマークアップ言語です。 HTMLのような複雑なタグを書く必要がなく、プレーンテキストとして読み書きしやすいため、エンジニアのドキュメント作成やブログ執筆に広く利用されています。

記述例:

# 見出し1
## 見出し2
- リスト項目
- リスト項目

**太字**

セットアップ手順

1. VSCode をインストール

まずは、執筆の土台となるソフト「VSCode」をインストールします。 公式サイト (code.visualstudio.com) から、お使いのOS（Windows, macOS, Linux）に合わせたインストーラーをダウンロードし、インストールしてください。

2. 便利な拡張機能を追加 (Gemini, Markdown All in One)

執筆を快適にするための「拡張機能（追加機能）」を2つ入れます。

  1. VSCode を開き、画面左端にある「四角いブロックが4つあるアイコン」（拡張機能）をクリックします。
  2. Gemini Code Assistant
    • 検索バーに Gemini Code Assistant と入力し、Google 製のものをインストールします。
    • インストール後、Googleアカウントでのログインを求められるので認証します。
  3. Markdown All in One
    • 検索バーに Markdown All in One と入力し、インストールします。
    • これを入れると、目次の作成やHTMLへの変換、ショートカットキーなどが使えるようになります。

3. PicGo をインストール

画像のアップロードを自動化してくれる便利ツールです。 公式サイト (https://molunerfinn.com/PicGo/) からアプリをダウンロードし、起動するだけで準備完了です。

4. GitHub の準備（画像の保存場所を作る）

画像をネット上に保存するために「GitHub（ギットハブ）」というサービスを使います。 ここでは「画像を保存する箱（リポジトリ）」と「その箱を開けるための鍵（トークン）」を用意します。

a. GitHub アカウントの作成 (未所持の場合) もしGitHubアカウントをお持ちでない場合は、公式サイト (github.com) から作成してください。 メールアドレスで登録するほか、Googleアカウントと連携して簡単に始めることもできます。

b. リポジトリ（画像の保存箱）の作成 GitHub にログインし、新しいリポジトリ（New repository）を作成します。名前は blog-images など分かりやすいものにします。 重要: 公開設定は Public（誰でも見れる状態）にしてください。これにしないと、ブログ上で画像が表示されません。

c. アクセストークン（接続用の鍵）の取得

  1. GitHub の右上のアイコンから Settings（設定） > 左サイドバー最下部の Developer settings を開きます。
  2. Personal access tokens > Tokens (classic) を選択します。
  3. Generate new token (classic) をクリックします。
  4. Note にわかりやすい名前（例: picgo）を入力し、Select scopes（権限の範囲）という項目で repo にチェックを入れます（これで画像の読み書きが許可されます）。
  5. 画面下の Generate token を押し、表示された**トークン（ghp_から始まる文字列）**をコピーしてメモ帳などに控えておきます。※この画面を閉じると二度と表示されないので注意！

5. PicGo アプリの設定

インストールした PicGo アプリを起動し、GitHub と連携させます。

  1. PicGo アプリを開き、左側のメニューから 「PicBed Settings」 > 「GitHub」 を選択します。
  2. 各項目に以下の情報を入力します。
    • Repo: ユーザー名/リポジトリ名 （例: tanukidevelop/blog-images）
    • Branch: main （リポジトリのメインの枝。通常は main です）
    • Token: 先ほどコピーしたトークン（鍵）
    • Path: img/ （保存するフォルダ名。そのままでOK）
    • Custom Domain: 画像のURLをどう表示するかという設定です。以下のように入力します。 https://raw.githubusercontent.com/ユーザー名/リポジトリ名/ブランチ名
      • 例: https://raw.githubusercontent.com/tanukidevelop/blog-images/main
      • 注意: 末尾に / は不要です。これを設定しないと画像が正しく表示されません。
  3. 「Confirm」 をクリックして保存します。
  4. 「Set as Default」 をクリックして、GitHub をデフォルトのアップロード先に設定します。

設定は以上です。これで PicGo アプリに画像をドラッグ＆ドロップすると自動的にアップロードされ、Markdown形式のリンクがクリップボードにコピーされます。あとは VSCode で貼り付けるだけです。

覚えておくと便利な操作

ショートカットで画像アップロード (Cmd+Shift+U)

ドラッグ＆ドロップの手間を省き、ショートカットキーで瞬時にアップロードする方法です。

  1. PicGo アプリの 「PicGo Settings」 > 「Edit ShortCut」 を開きます。
  2. 「Upload from Clipboard」 の欄をクリックし、キーボードで Cmd + Shift + U (Windowsなら Ctrl + Shift + U) を入力して設定を変更します。
  3. 「Confirm」 をクリックして保存します。

使い方: 画像をコピーした状態で Cmd + Shift + U を押すだけでアップロードされ、Markdown用リンクがクリップボードに格納されます。

プレビューの表示

Markdownを書いている最中に、右上の「本と虫眼鏡のアイコン」をクリックすると、プレビュー画面が右側に開きます。

Gemini への相談

左のアクティビティバーにある「Geminiのアイコン（星のようなマーク）」をクリックするとチャット画面が開きます。「この文章を要約して」「もっとキャッチーなタイトルにして」など、自由に相談できます。

HTMLとしてコピーする (ブログ貼り付け用)

Cmd + Shift + P (Windowsは Ctrl + Shift + P) を押し、Markdown All in One: Copy as HTML と入力して選択すると、HTML形式でクリップボードにコピーされます。

コメント

タイトルとURLをコピーしました