はじめに

「Markdownで記事を書くとき、画像挿入がいちいち面倒…」

ブログ執筆やドキュメント作成で、こんな経験をしたことがある人は多いはずです。

従来の作業フロー：

1. スクリーンショットを撮る
2. 画像編集ソフトで開く
3. ファイル名をつけて保存
4. imagesフォルダに移動
5. Markdownに![]形式で記述
→ 約5ステップ・30秒

このマクロを使えば、ショートカットキー一発で全て自動化できます！

本記事では、実際にClaude Codeを使って開発したマクロの詳細と、効果的な使い方を紹介します。

この記事で分かること

• クリップボード画像挿入マクロの機能
• コードの詳細解説
• インストール方法
• 実践的な使い方
• トラブルシューティング
• Claude Codeでの開発体験

こんな人におすすめ

• Markdownでブログやドキュメントを書く人
• 画像挿入作業を効率化したい人
• VSCodeでマクロを作りたい人
• TypeScriptで拡張機能開発を学びたい人

機能概要

できること

ショートカットキー一発で：

1. クリップボードの画像を取得
2. 画像名とファイル名を入力（ダイアログ）
3. ![]形式でカーソル位置に挿入
4. imagesフォルダに画像を保存
→ わずか10秒！

具体例

操作：

1. スクリーンショットを撮る（Win+Shift+S）
2. Ctrl+Shift+I を押す
3. 画像名入力: "サンプル画面"
4. ファイル名入力: "sample-screen"

結果：

✅ imagesフォルダが自動作成
✅ sample-screen.jpgが保存される
✅ Markdownテキストが挿入される

コード詳細解説

全体構造

// src/macros/insertImageFromClipboard.ts
import * as vscode from 'vscode';
import * as fs from 'fs';
import * as path from 'path';
import { exec } from 'child_process';
import { promisify } from 'util';

const execAsync = promisify(exec);

export async function insertImageFromClipboard() {
    // 機能実装
}

1. アクティブエディタの取得

const editor = vscode.window.activeTextEditor;
if (!editor) {
    vscode.window.showWarningMessage('アクティブなエディタがありません');
    return;
}

ポイント：

• VSCodeのアクティブなエディタを取得
• エディタがない場合は警告を表示

2. ユーザー入力の取得

// 画像名（altテキスト）
const imageName = await vscode.window.showInputBox({
    prompt: '画像名（altテキスト）を入力してください',
    placeHolder: '例: サンプル画像'
});

if (!imageName) return;

// ファイル名
const fileName = await vscode.window.showInputBox({
    prompt: 'ファイル名（拡張子なし）を入力してください',
    placeHolder: '例: sample-image'
});

if (!fileName) return;

ポイント：

• showInputBoxでユーザー入力を受け付け
• promptで説明文、placeHolderで例を表示
• キャンセルされたら処理中断

3. パス解決とフォルダ作成

// 現在のファイルがあるディレクトリ
const currentDir = path.dirname(editor.document.uri.fsPath);
const imagesDir = path.join(currentDir, 'images');

// imagesフォルダ作成（なければ）
if (!fs.existsSync(imagesDir)) {
    fs.mkdirSync(imagesDir, { recursive: true });
}

// 出力パス
const outputPath = path.join(imagesDir, `${fileName}.jpg`);

ポイント：

• path.dirnameで現在のディレクトリを取得
• fs.mkdirSyncでフォルダ作成
• recursive: trueで親フォルダも自動作成

4. PowerShellで画像取得

const psScript = `
    Add-Type -AssemblyName System.Windows.Forms;
    Add-Type -AssemblyName System.Drawing;
    $img = [System.Windows.Forms.Clipboard]::GetImage();
    if ($img) {
        $img.Save('${outputPath.replace(/\\/g, '\\\\')}', [System.Drawing.Imaging.ImageFormat]::Jpeg);
        exit 0;
    } else {
        exit 1;
    }
`;

try {
    await execAsync(`powershell -Command "${psScript}"`);
} catch (error) {
    vscode.window.showErrorMessage(`画像の取得に失敗しました`);
    return;
}

ポイント：

• Windows.Formsでクリップボードにアクセス
• JPEG形式で保存
• バックスラッシュをエスケープ

5. Markdownテキスト挿入

const markdownText = `![${imageName}](images/${fileName}.jpg)`;

editor.edit(editBuilder => {
    editBuilder.insert(editor.selection.active, markdownText);
});

vscode.window.showInformationMessage(
    `画像を挿入しました: ${fileName}.jpg`
);

ポイント：

• editor.editでテキスト編集
• カーソル位置に挿入
• 完了メッセージ表示

インストール方法

1. 拡張機能プロジェクトの準備

# プロジェクト作成
mkdir my-macros
cd my-macros

# 初期化
npm init -y

# VSCode拡張機能用パッケージ
npm install --save-dev @types/vscode @types/node typescript
npm install --save-dev @vscode/vsce

2. ファイル配置

my-macros/
├── src/
│   ├── extension.ts
│   └── macros/
│       └── insertImageFromClipboard.ts
├── package.json
└── tsconfig.json

3. extension.tsにコマンド登録

// src/extension.ts
import * as vscode from 'vscode';
import { insertImageFromClipboard } from './macros/insertImageFromClipboard';

export function activate(context: vscode.ExtensionContext) {
    const command = vscode.commands.registerCommand(
        'myMacros.insertImageFromClipboard',
        insertImageFromClipboard
    );
    
    context.subscriptions.push(command);
}

4. package.json設定

{
  "name": "my-macros",
  "contributes": {
    "commands": [
      {
        "command": "myMacros.insertImageFromClipboard",
        "title": "Insert Image from Clipboard"
      }
    ],
    "keybindings": [
      {
        "command": "myMacros.insertImageFromClipboard",
        "key": "ctrl+shift+i",
        "when": "editorTextFocus"
      }
    ]
  }
}

5. ビルドとインストール

# コンパイル
npm run compile

# VSIXパッケージ作成
vsce package

# VSCodeにインストール
code --install-extension my-macros-0.0.1.vsix

実践的な使い方

基本的な使い方

1. スクリーンショットを撮る

Windows: Win + Shift + S
macOS: Cmd + Shift + 4

2. Markdownファイルを開く

code article.md

3. 挿入位置にカーソルを置く

4. Ctrl+Shift+I を押す

5. 情報を入力

画像名: サンプル画面
ファイル名: sample-screen

ブログ執筆での活用

記事構造：

article/
├── post.md
└── images/
    ├── intro.jpg
    ├── step1.jpg
    ├── step2.jpg
    └── result.jpg

執筆フロー：

# 記事タイトル

## はじめに


↑ Ctrl+Shift+Iで一発挿入！

## 手順

### ステップ1


↑ スクリーンショット後すぐ挿入！

### ステップ2

ドキュメント作成での活用

設計書：

# システム設計書

## 画面遷移図



## データベース設計



## UIモックアップ

議事録での活用

# 2026/02/12 打ち合わせ議事録

## ホワイトボード



## 資料スクリーンショット

トラブルシューティング

エラー: クリップボードに画像がない

エラーメッセージ：

画像の取得に失敗しました

原因：

• クリップボードに画像がコピーされていない
• テキストデータやファイルがコピーされている

解決策：

1. スクリーンショットを再度撮る
2. 画像編集ソフトからコピー
3. ブラウザの画像を右クリック→画像をコピー

エラー: imagesフォルダ作成に失敗

エラーメッセージ：

EACCES: permission denied

原因：

• 書き込み権限がない

解決策：

1. ファイルの保存場所を変更
2. ユーザーディレクトリで作業
3. VSCodeを管理者権限で起動

エラー: ショートカットキーが動かない

原因：

• 他の拡張機能とキーバインドが競合

確認方法：

1. Ctrl+Shift+P
2. "Preferences: Open Keyboard Shortcuts"
3. "ctrl+shift+i" で検索

解決策：

// keybindings.json
{
    "key": "ctrl+alt+i",  // 別のキーに変更
    "command": "myMacros.insertImageFromClipboard",
    "when": "editorTextFocus"
}

Claude Codeでの開発体験

このマクロは、実際にClaude Codeを使って開発しました。

開発時間の比較

Claude Codeを使った場合と使わなかった場合で、開発効率に大きな違いがありました。

詳しくはこちらの記事で解説しています：

Claude Code vs Web版・Desktop版 開発効率徹底比較｜実際のマクロ開発で検証

はじめに「Claude Codeって本当に効率的なの？」そんな疑問を持つ開発者は多いはずです。実際、Web版やDesktop版と比べて、どれくらいのメリットがあるのかイメージしにくいかもしれません。本記事では、実際に「VSCodeでクリップ...

caymezon.com

2026.02.14

主なポイント：

• Claude Code: 8分
• Web版: 17分
• 効率: 53%向上

Claude Codeのメリット

✅ プロジェクト理解

• 既存マクロのパターンを自動認識
• 一貫性のあるコード生成

✅ 直接ファイル操作

• コピペ不要
• エディタ切替不要

✅ 高速な修正

• エラーを即座に修正
• 全体の整合性保持

メリット・デメリット

メリット

✅ 圧倒的な時短効果

従来: 30秒 × 10画像 = 5分
マクロ: 10秒 × 10画像 = 1.5分
→ 3.5分の短縮！70%減）

✅ ファイル管理が楽

• 自動でimagesフォルダ作成
• ファイル名の統一管理

✅ ミスが減る

• ファイル名のタイプミス防止
• パス間違い防止

デメリット

⚠️ Windows専用

• PowerShell依存
• macOS/Linuxでは修正必要

⚠️ 初期設定が必要

• 拡張機能のインストール
• ショートカットキー設定

まとめ

VSCodeでクリップボード画像をMarkdown化するマクロを紹介しました。

主な機能：

✅ ショートカットキー一発で画像挿入
✅ ダイアログで画像名とファイル名を入力
✅ ![]形式で自動挿入
✅ imagesフォルダに画像保存

効果：

🚀 70%の時短
🚀 ミスの削減
🚀 ワークフローの改善

活用シーン：

📝 ブログ執筆
📝 技術ドキュメント
📝 議事録作成
📝 README作成

開発体験：

Claude Codeを使って、8分で実装できました。詳しくは関連記事をご覧ください。

関連記事：

• Claude Code完全ガイド

Claude Code完全ガイド｜ターミナルで動くAIコーディングアシスタントの全貌【2026年6月版】

はじめに「AIにコードを書かせたいけど、ブラウザとエディタを行き来するのが面倒…」そんな悩みを解決するのがClaude Codeです。2026年6月時点で、Anthropicが提供するターミナル型AIエージェントとして、開発者の間で急速に注...

caymezon.com

2026.02.14

• Claude Code環境構築ガイド

Claude Code環境構築完全ガイド｜初心者でも30分でセットアップできる詳細手順

はじめに「Claude Codeを使ってみたいけど、環境構築が難しそう…」そんな不安を持つ方も多いはずです。実際、ターミナルベースのツールは初心者にとってハードルが高く感じられます。しかし、この記事の手順通りに進めれば、初心者でも30分でC...

caymezon.com

2026.02.14

• Claude Code vs Web版・Desktop版 比較

Claude Code vs Web版・Desktop版 開発効率徹底比較｜実際のマクロ開発で検証

はじめに「Claude Codeって本当に効率的なの？」そんな疑問を持つ開発者は多いはずです。実際、Web版やDesktop版と比べて、どれくらいのメリットがあるのかイメージしにくいかもしれません。本記事では、実際に「VSCodeでクリップ...

caymezon.com

2026.02.14

タグ: #VSCode #TypeScript #マクロ #Markdown #生産性向上 #クリップボード

The post VSCodeで画像挿入が一瞬！クリップボード画像をMarkdown化するTypeScriptマクロ first appeared on CayTech Lab.

はじめに：執筆環境の重要性

ブログを続けるために最も重要なことは何でしょうか？

• 文章力？
• ネタ探し？
• SEO対策？

もちろん、これらも重要です。しかし、私が最も重要だと考えるのは、執筆環境の快適さです。

書きやすい環境があれば、自然と記事を書きたくなります。逆に、環境が悪いと、書くこと自体がストレスになります。

この記事では、私がWordPressブログの執筆環境を劇的に改善した方法をご紹介します。

Before：WordPress標準の執筆フロー

従来の方法

私が以前使っていた方法：

1. WordPress管理画面を開く
   → ログイン
   
2. Gutenbergエディタで執筆
   → ブラウザ上で直接編集
   
3. 画像をドラッグ&ドロップ
   → Media Libraryにアップロード
   
4. プレビュー確認
   → 別タブで開く
   
5. 公開
   → 「公開」ボタンをクリック

問題点

1. ブラウザに依存

• ブラウザがクラッシュしたら、書いた内容が消える
• 自動保存はあるが、常に不安

2. バージョン管理ができない

• いつ何を変更したか分からない
• 過去のバージョンに戻せない

3. 画像管理が煩雑

• 同じ画像を何度もアップロード
• Media Libraryが肥大化
• どれが最新の画像か分からない

4. オフライン作業ができない

• ネット環境が必須
• 移動中に書けない

5. 執筆に集中できない

• Gutenbergの操作に気を取られる
• Markdown記法が使えない

After：理想の執筆環境

新しい方法

現在の方法：

1. VSCodeで記事作成
   → Markdown記法で執筆
   → Ctrl+Shift+V でプレビュー
   
2. 画像を配置
   → ローカルフォルダに保存
   
3. スクリプト実行
   → npm run publish
   
4. WordPress管理画面で確認
   → 公開

改善されたこと

1. 慣れ親しんだエディタ

• VSCodeで執筆
• ショートカットキーが使える
• 拡張機能が使える

2. バージョン管理

git commit -m "記事追加：○○について"
git push

• いつ何を変更したか記録
• 過去のバージョンに戻せる
• チーム開発も可能

3. 画像管理の自動化

• 画像を上書き保存すればOK
• 自動で変更を検知
• Media Libraryがクリーン

4. オフライン作業

• ネット環境不要
• 移動中でも書ける
• 書き溜めておいて、まとめて投稿

5. 執筆に集中

• Markdownでシンプルに書ける
• プレビューも高速
• 余計な操作が不要

実際の運用フロー

日常的な記事投稿

Step 1：記事作成

VSCodeで記事を書く：

code posts/new-article/post.md

Front Matter（記事のメタ情報）：

---
title: "記事タイトル"
slug: new-article
category: Development
tags: [WordPress, Markdown, 自動化]
featured_image: featured.jpg
mode: html
status: draft
date: 2026-01-11
---

本文（Markdown記法）：

## はじめに

この記事では、○○について解説します。

### 対象読者

- ○○に興味がある方
- ○○を始めたい方

## 本文

詳しい説明...

npm install example

![スクリーンショット](images/01-screenshot.png)

## まとめ

この記事では、以下について解説しました...

プレビュー確認：

Ctrl+Shift+V

VSCode内でリアルタイムプレビュー！

Step 2：画像配置

フォルダ構成：

posts/new-article/
├── post.md
├── featured.jpg  ← アイキャッチ画像
└── images/
    ├── 01-screenshot.png
    └── 02-diagram.png

Markdown内の参照：

![スクリーンショット](images/01-screenshot.png)
![図解](images/02-diagram.png)

シンプル！

Step 3：スクリプト実行

npm run publish-single new-article

出力：

📝 処理開始: new-article
📄 タイトル: 記事タイトル
🎯 モード: HTML変換
🏷️  カテゴリー: Development
🔖 タグ: WordPress, Markdown, 自動化

📸 画像アップロード中...
  ✅ 01-screenshot.png → new-article-01-screenshot-a3f2b1.png
  ✅ 02-diagram.png → new-article-02-diagram-7c4d8e.png

🖼️  アイキャッチ画像アップロード中...
  ✅ featured.jpg → new-article-featured-9e8f7d.jpg

🔧 最初のH1見出しを削除（タイトル重複回避）
✨ Markdown → HTML 変換完了

✨ 新規記事を作成します
   📌 Status: draft (新規)

📤 WordPress投稿中...
✅ 投稿成功！
🔗 URL: http://example.com/new-article/
📊 ステータス: draft

数秒で完了！

Step 4：WordPress管理画面で確認

1. WordPress管理画面を開く
2. 投稿 → 投稿一覧 → 下書き
3. 記事を開く
4. 最終確認
5. 「公開」ボタンをクリック

完璧に投稿されている！

既存記事の更新

さらに便利なのが、既存記事の更新です。

Step 1：VSCodeで編集

code posts/existing-article/post.md

内容を編集：

## 追加セクション

新しい情報を追加...

Step 2：画像も更新（オプション）

スクリーンショットを撮り直して、同じファイル名で上書き保存：

posts/existing-article/images/01-screenshot.png

ファイル名は変えない！

Step 3：スクリプト実行

npm run test-local

出力：

📝 処理開始: existing-article

📸 画像アップロード中...
  🗑️  古い画像を削除: existing-article-01-screenshot-a3f2b1.png
  ✅ 01-screenshot.png → existing-article-01-screenshot-3f8d2a.png
  ♻️  02-diagram.png (変更なし)

📝 既存記事を更新します（ID: 123）
   📌 Status: publish (既存維持)

✅ 更新成功！

自動的に：

• 既存記事を検索
• 画像の変更を検知
• 古い画像を削除
• 新しい画像をアップロード
• 変更がない画像は再利用
• 記事を更新

完璧！

複数記事の一括投稿

過去記事の移行など：

npm run publish

すべての記事を自動投稿！

🚀 3 件の記事を処理します

📝 処理開始: article-1
✅ 投稿成功！

📝 処理開始: article-2
✅ 投稿成功！

📝 処理開始: article-3
✅ 投稿成功！

✅ すべての処理が完了しました

GitHub Actions連携

さらなる自動化

次のステップ：git push で自動投稿

設定ファイル

.github/workflows/publish.yml

name: Publish to WordPress

on:
  push:
    branches: [main]
    paths: ['posts/**']

jobs:
  publish:
    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      
      - name: Install dependencies
        run: npm install
      
      - name: Publish to WordPress
        env:
          WP_URL: ${{ secrets.WP_URL }}
          WP_USER: ${{ secrets.WP_USER }}
          WP_APP_PASSWORD: ${{ secrets.WP_APP_PASSWORD }}
        run: npm run publish

GitHub Secrets設定

GitHub → Settings → Secrets and variables → Actions
→ New repository secret

WP_URL: https://example.com
WP_USER: username
WP_APP_PASSWORD: xxxx xxxx xxxx xxxx

運用フロー

1. VSCodeで記事作成
   posts/new-article/post.md
   
2. Git commit
   git add .
   git commit -m "記事追加：新しい記事"
   
3. Git push
   git push origin main
   
4. GitHub Actions自動実行
   → WordPressに自動投稿
   
5. メール通知
   → 投稿完了のお知らせ

完全自動化！🎉

効果測定

定量的な改善

執筆時間の短縮：

従来の方法:
  記事作成: 2時間
  画像管理: 30分
  投稿作業: 10分
  ──────────
  合計: 2時間40分

新しい方法:
  記事作成: 2時間
  画像管理: 0分（自動）
  投稿作業: 30秒
  ──────────
  合計: 2時間30秒

短縮: 約40分

更新作業の効率化：

従来の方法:
  WordPress管理画面を開く
  → 記事を探す
  → 編集
  → 画像を差し替え
  → 保存
  合計: 約10分

新しい方法:
  VSCodeで編集
  → npm run publish
  合計: 約30秒

短縮: 約9分30秒

年間の効果：

週1回の記事投稿 × 52週 = 52記事/年

短縮時間:
  投稿: 40分 × 52回 = 2,080分 (約35時間)
  更新: 9.5分 × 52回 = 494分 (約8時間)
  ──────────────────
  合計: 約43時間/年

浮いた時間で約21記事追加可能！

定性的な改善

1. ストレスの軽減

• ブラウザクラッシュの不安がない
• 画像管理の煩わしさがない
• 執筆に集中できる

2. モチベーションの向上

• 書きやすいから、書きたくなる
• ワンコマンドで投稿できる満足感
• Git管理による安心感

3. 記事の品質向上

• プレビューで確認しやすい
• 過去のバージョンと比較できる
• 落ち着いて推敲できる

4. 継続しやすい

• オフラインでも書ける
• スキマ時間を活用
• 無理なく続けられる

Tips & Best Practices

1. フォルダ構成の工夫

推奨構成：

posts/
├── 2025/
│   ├── 01-january/
│   │   ├── article-1/
│   │   └── article-2/
│   └── 02-february/
│       └── article-3/
└── 2026/
    └── 01-january/
        └── article-4/

メリット：

• 記事が探しやすい
• 管理しやすい
• アーカイブしやすい

2. テンプレートの活用

記事テンプレート：

cp templates/post-template.md posts/new-article/post.md

テンプレート内容：

---
title: "【カテゴリ名】記事タイトル"
slug: article-name
category: Development
tags: [タグ1, タグ2]
featured_image: featured.jpg
mode: html
status: draft
date: 2026-01-11
---

## はじめに

この記事では...

### 対象読者

- ○○な方
- ○○を始めたい方

## 本文

詳しい説明...

## まとめ

この記事では...

効率アップ！

3. 画像の命名規則

推奨：

01-descriptive-name.png
02-another-image.png
03-final-screenshot.png

メリット：

• 順番が分かる
• 内容が分かる
• 管理しやすい

4. プレビューの活用

VSCodeの拡張機能：

• Markdown All in One

  • 便利なショートカット
  • Table of Contents自動生成

• Markdown Preview Enhanced

  • リッチなプレビュー
  • PDF出力

Ctrl+Shift+V で即座にプレビュー！

5. スニペットの活用

VSCodeスニペット：

{
  "Code Block": {
    "prefix": "code",
    "body": [
      "```${1:bash}",
      "$0",
      "```"
    ]
  },
  "Image": {
    "prefix": "img",
    "body": [
      "![${1:説明}](images/${2:filename}.png)"
    ]
  }
}

使い方：

code → Tab → コードブロック完成
img → Tab → 画像リンク完成

トラブルシューティング

よくある問題と解決策

問題1：画像が表示されない

原因：

• 画像パスが間違っている

確認：

post.md: ![説明](images/screenshot.png)
実際のファイル: posts/article/images/screenshot.png

解決：

• パスを修正
• ファイル名を確認

問題2：既存記事が見つからない

原因：

• スラッグが違っている

確認：

post.md: slug: article-name
WordPress: 既存記事のスラッグ？

解決：

• スラッグを一致させる
• WordPress管理画面で確認

問題3：認証エラー

原因：

• Application Passwordが間違っている

解決：

1. WordPress管理画面
   → ユーザー → プロフィール
   → アプリケーションパスワード
   
2. 新しいパスワードを生成

3. .env.local を更新
   WP_APP_PASSWORD=xxxx xxxx xxxx xxxx

まとめ

改善のポイント

1. 執筆環境を整える

• 慣れ親しんだエディタ
• Markdown記法
• リアルタイムプレビュー

2. 自動化する

• 画像アップロード
• パス置換
• 既存記事の更新

3. バージョン管理

• Git管理
• 履歴が残る
• 安心感

4. 継続的な改善

• GitHub Actions連携
• さらなる自動化
• 効率化

Before → After

Before（従来の方法）：

WordPress Gutenbergで執筆
  ↓ ブラウザに依存
  ↓ バージョン管理なし
  ↓ 画像管理が煩雑
  ↓ ストレス

After（新しい方法）：

VSCodeで執筆
  ↓ Markdown記法
  ↓ Git管理
  ↓ 画像自動管理
  ↓ npm run publish
  ↓ 快適！

得られたもの

時間：

• 年間約43時間の短縮
• 浮いた時間で約21記事追加可能

快適さ：

• ストレスフリーな執筆環境
• 執筆に集中できる
• 書くことが楽しくなる

継続性：

• モチベーション維持
• 無理なく続けられる
• ブログが続く

品質：

• 落ち着いて推敲できる
• バージョン管理で安心
• 記事の品質が向上

おわりに

ブログを続けるために最も重要なのは、書きやすい環境です。

環境が整えば、自然と記事を書きたくなります。

私の場合、執筆環境を改善したことで：

• 記事を書くことが楽しくなった
• 更新頻度が上がった
• 記事の品質が向上した

そして何より、執筆そのものに集中できるようになりました。

もしあなたがWordPressでブログを書いているなら、ぜひこの方法を試してみてください。

きっと、ブログを書くことがもっと楽しくなるはずです。

Happy Blogging! 🚀

参考リンク

• VSCode
• Markdown Guide
• GitHub Actions
• WordPress REST API

関連記事

• VSCodeからWordPressへ！Markdown記事を自動投稿するシステムを作った話

  • システムの全体像と開発の経緯

• 【試行錯誤の記録】WordPress画像管理を最適化！ハッシュベースの賢い仕組み

  • 画像管理の技術的な詳細

最終更新： 2026-01-11

The post WordPressブログの執筆環境を劇的改善した話【VSCode × Markdown × 自動化】 first appeared on CayTech Lab.

はじめに：なぜこのシステムを作ったのか

ブログを書くとき、皆さんはどんなエディタを使っていますか？

WordPress標準のGutenbergエディタも便利ですが、長文を書いているとこんな不満が出てきませんか？

• ブラウザがクラッシュしたら書いた内容が消える不安
• 画像管理が煩雑で、同じ画像が重複してアップロードされる
• Markdown記法で書けないもどかしさ
• バージョン管理ができない

私もまさにこの悩みを抱えていました。そこで、VSCodeでMarkdownを書いて、ワンコマンドでWordPressに投稿できるシステムを作ることにしました。

この記事では、その開発の経緯と、遭遇した問題、そして最終的に完成したシステムについてご紹介します。

理想の執筆環境とは

まず、私が目指した理想の執筆環境はこんな感じです：

求めていた機能

1. VSCodeでMarkdownを書きたい

• 慣れ親しんだエディタで執筆
• リアルタイムプレビュー（Ctrl+Shift+V）
• Gitでバージョン管理

2. 画像管理を自動化したい

• ローカルの画像を自動アップロード
• 画像パスを自動で置換
• 同じ画像の重複を避ける

3. ワンコマンドで投稿したい

npm run publish

これだけで完了！

4. 既存記事の更新も自動化したい

• スラッグで既存記事を検索
• 見つかったら自動更新
• 見つからなければ新規投稿

開発の流れ：試行錯誤の連続

Phase 1：まずは基本機能

最初は、シンプルに「MarkdownをWordPressに投稿する」ことを目指しました。

使用した技術：

• Node.js
• WordPress REST API
• marked（Markdown → HTML変換）
• gray-matter（Front Matter解析）

基本的な処理フロー：

1. post.md を読み込み
2. Front Matter解析（タイトル、スラッグなど）
3. Markdown → HTML変換
4. WordPress REST APIで投稿

最初のコード（簡略版）：

const marked = require('marked');
const matter = require('gray-matter');
const axios = require('axios');

// Markdownファイル読み込み
const fileContent = fs.readFileSync('post.md', 'utf-8');
const { data: frontMatter, content: markdown } = matter(fileContent);

// HTML変換
const htmlContent = marked(markdown);

// WordPress投稿
await axios.post(
  `${WP_URL}/wp-json/wp/v2/posts`,
  {
    title: frontMatter.title,
    content: htmlContent,
    slug: frontMatter.slug,
    status: 'draft'
  },
  { auth: { username: WP_USER, password: WP_APP_PASSWORD } }
);

この時点では、「動く！」という感動がありました。VSCodeで書いた記事が本当にWordPressに投稿されたのです。

Phase 2：画像アップロードの実装

次に、画像の自動アップロードに取り組みました。

課題：

• Markdown内の相対パス（images/screenshot.png）を、WordPressのURLに置換する必要がある

解決策：

1. images/ フォルダ内の画像を全てアップロード
2. アップロード後のURLを取得
3. Markdown内のパスを置換

実装：

// 画像アップロード
const imageMap = {};

for (const imageFile of imageFiles) {
  const imagePath = path.join(imagesDir, imageFile);
  
  const form = new FormData();
  form.append('file', fs.createReadStream(imagePath));
  
  const response = await axios.post(
    `${WP_URL}/wp-json/wp/v2/media`,
    form,
    { auth: { username: WP_USER, password: WP_APP_PASSWORD } }
  );
  
  // ローカルパス → WordPressのURL
  imageMap[`images/${imageFile}`] = response.data.source_url;
}

// Markdown内のパスを置換
let updatedMarkdown = markdown;
for (const [localPath, wpUrl] of Object.entries(imageMap)) {
  updatedMarkdown = updatedMarkdown.replace(
    new RegExp(`\\(${localPath}\\)`, 'g'),
    `(${wpUrl})`
  );
}

これで、画像が自動でアップロードされ、記事内のリンクも正しく置換されるようになりました！

Phase 3：WP Githuber MDプラグインとの出会い

ここで、WP Githuber MDという素晴らしいプラグインを発見しました。

このプラグインを使うと、WordPress側でもMarkdown記法で編集できます。つまり：

VSCodeでMarkdown編集
  ↓
WordPressに投稿（Markdownのまま）
  ↓
WordPress側でもMarkdown編集可能！

試してみた結果：

最初は「Markdown → HTML変換」していましたが、WP Githuber MDを使えばMarkdownをそのまま投稿できるはず...

しかし、ここで大きな問題が発生しました。

遭遇した問題たち

問題1：Markdownがそのまま表示される

症状：

## 見出し

本文...

このMarkdownをそのまま送信すると、WordPress側で：

# タイトル
## 見出し
本文...

Markdownの記号がそのまま表示されてしまいました。

原因：

• WordPress REST APIは、デフォルトでMarkdownを認識しない
• WP Githuber MDのメタフィールドを設定する必要がある

解決策：

// メタフィールドを追加
const postData = {
  title: frontMatter.title,
  content: markdown,  // HTMLではなくMarkdown
  meta: {
    _is_githuber_markdown: '1',
    _is_githuber_markdown_enabled: 'yes'
  }
};

これで、Markdownがそのまま送信され、WordPress側で正しく表示されるようになりました！

問題2：既存記事がHTMLの場合

次の問題：

既存記事（すでにHTMLで保存されている）を、Markdownで更新しようとすると...

症状：

既存記事（HTML形式）
  ↓
Markdownを送信
  ↓
WordPress: 「これはテキストだ」
  ↓
## 見出し
 で保存される

つまり、一度HTMLとして保存された記事は、Markdownとして認識されない！

試行錯誤：

1. WordPress管理画面で手動変換 → 面倒
2. 記事を削除して再投稿 → 一時的に記事が消える
3. モード切替可能にする → これだ！

問題3：画像が増え続ける

最大の問題：

記事を更新するたびに、画像が新規アップロードされる：

1回目: featured.jpg
2回目: featured-2.jpg  ← 新規
3回目: featured-3.jpg  ← どんどん増える

WordPress Media Libraryが肥大化！

この問題の解決が、今回の開発で最も時間をかけた部分でした。

最大の挑戦：画像管理の最適化

解決策の検討

方法1：画像を再利用

• ファイル名で検索 → 見つかったら再利用
• 問題： 内容が変わっても検出できない

方法2：削除して再アップロード

• 毎回削除 → 再アップロード
• 問題： 遅い、無駄

方法3：ハッシュベース（採用！）

• 画像の内容からハッシュを計算
• ハッシュが一致 → 再利用
• ハッシュが異なる → 削除して再アップロード

ハッシュベースの実装

1. ハッシュ計算：

const crypto = require('crypto');

function calculateFileHash(filePath) {
  const fileBuffer = fs.readFileSync(filePath);
  const hashSum = crypto.createHash('md5');
  hashSum.update(fileBuffer);
  const hex = hashSum.digest('hex');
  return hex.substring(0, 6);  // 最初の6桁
}

2. ファイル名にハッシュを含める：

元のファイル名: featured.jpg
  ↓
ハッシュ計算: a3f2b1
  ↓
新しいファイル名: article-slug-featured-a3f2b1.jpg

3. 既存画像を検索：

async function findExistingImageByPattern(slug, originalFileName) {
  const searchPattern = `${slug}-${originalFileName}`;
  
  const response = await axios.get(
    `${WP_URL}/wp-json/wp/v2/media`,
    {
      auth: { username: WP_USER, password: WP_APP_PASSWORD },
      params: { search: searchPattern }
    }
  );
  
  // パターンに一致する画像を探す
  for (const media of response.data) {
    const fileName = path.basename(media.source_url);
    if (fileName.startsWith(searchPattern)) {
      return media;
    }
  }
  
  return null;
}

4. 統合処理：

async function uploadOrReuseImage(imagePath, fileName, slug) {
  // ハッシュ計算
  const hash = calculateFileHash(imagePath);
  const newFileName = `${slug}-${fileName}-${hash}.jpg`;
  
  // 既存画像を検索
  const existingImage = await findExistingImageByPattern(slug, fileName);
  
  if (existingImage) {
    const existingFileName = path.basename(existingImage.source_url);
    
    if (existingFileName.includes(`-${hash}`)) {
      // ハッシュ一致 → 再利用
      console.log(`♻️  ${fileName} (変更なし)`);
      return { id: existingImage.id, url: existingImage.source_url };
    } else {
      // ハッシュ不一致 → 削除
      console.log(`🗑️  古い画像を削除`);
      await deleteImage(existingImage.id);
    }
  }
  
  // 新規アップロード
  console.log(`✅ ${fileName} → ${newFileName}`);
  return await uploadImage(imagePath, newFileName);
}

結果：

1回目実行:
  ✅ featured.jpg → article-featured-a3f2b1.jpg

2回目実行（画像変更なし）:
  ♻️  featured.jpg (変更なし)  ← 再利用！

3回目実行（画像を更新）:
  🗑️  古い画像を削除: article-featured-a3f2b1.jpg
  ✅ featured.jpg → article-featured-9e8f7d.jpg  ← 新しいハッシュ

完璧に動作しました！🎉

完成したシステム

最終的なアーキテクチャ

VSCode
  ↓ Markdown記法で執筆
posts/
├── article-name/
│   ├── post.md
│   ├── featured.jpg
│   └── images/
│       └── screenshot.png
  ↓ npm run publish
Node.jsスクリプト
  ├─ Front Matter解析
  ├─ H1削除
  ├─ 画像アップロード（ハッシュ管理）
  ├─ パス置換
  ├─ HTML変換（HTMLモード）
  └─ 既存記事検索・更新
  ↓ WordPress REST API
WordPress
  ↓ 表示
ブログ記事

主要機能

1. 2つのモード

# HTMLモード（推奨）
mode: html
→ スクリプト側でHTML変換
→ Gutenbergエディタ

# Markdownモード
mode: markdown
→ Markdownをそのまま送信
→ WP Githuber MDエディタ

2. 既存記事の自動更新

// 既存記事を検索
const existingPost = await findExistingPost(frontMatter.slug);

if (existingPost) {
  // 更新
  await axios.post(`/wp-json/wp/v2/posts/${existingPost.id}`, data);
} else {
  // 新規投稿
  await axios.post(`/wp-json/wp/v2/posts`, data);
}

3. ハッシュベースの画像管理

画像変更なし → 再利用 ♻️
画像変更あり → 削除 🗑️ → 再アップロード ✅

4. タイトル重複の自動回避

// 最初のH1を自動削除
updatedMarkdown = removeFirstH1(updatedMarkdown);

実際の運用フロー

日常的な記事投稿

# 1. 記事作成
code posts/new-article/post.md

# 2. 画像配置
posts/new-article/
├── post.md
├── featured.jpg
└── images/
    └── screenshot.png

# 3. プレビュー確認
Ctrl+Shift+V

# 4. 投稿
npm run publish-single new-article

# 5. WordPress管理画面で確認
→ 公開

所要時間：わずか数秒！

既存記事の更新

# 1. VSCodeで編集
code posts/existing-article/post.md

# 2. 画像も更新（上書き保存）
posts/existing-article/images/screenshot.png

# 3. 投稿
npm run test-local

# 4. 出力確認
📸 画像アップロード中...
  🗑️  古い画像を削除: article-screenshot-a3f2b1.png
  ✅ screenshot.png → article-screenshot-9e8f7d.png
📝 既存記事を更新します（ID: 123）
✅ 更新成功！

画像の更新も自動検出！

得られたメリット

1. 執筆効率の向上

Before：

WordPress Gutenbergで執筆
  ↓ 画像をドラッグ&ドロップ
  ↓ ブラウザがクラッシュしないか不安
  ↓ バージョン管理なし

After：

VSCodeで執筆
  ↓ Ctrl+Shift+V でプレビュー
  ↓ Gitでバージョン管理
  ↓ npm run publish
  ↓ 完了！

2. 画像管理の最適化

Before：

同じ画像が何度もアップロードされる
→ Media Libraryが肥大化
→ 管理が大変

After：

画像の内容が変わっていなければ再利用
→ Media Libraryがクリーン
→ 無駄なアップロードなし

3. 既存記事の更新が楽

Before：

WordPress管理画面を開く
→ 記事を探す
→ 編集
→ 保存

After：

VSCodeで編集
→ npm run publish
→ 完了！

4. バージョン管理

Gitで管理：

git commit -m "記事追加：○○について"
git push

履歴が残る：

• いつ何を変更したか
• 過去のバージョンに戻せる
• チーム開発も可能

今後の展望

GitHub Actions連携

次のステップは、GitHub Actionsでの自動投稿です：

name: Publish to WordPress

on:
  push:
    branches: [main]
    paths: ['posts/**']

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm install
      - env:
          WP_URL: ${{ secrets.WP_URL }}
          WP_USER: ${{ secrets.WP_USER }}
          WP_APP_PASSWORD: ${{ secrets.WP_APP_PASSWORD }}
        run: npm run publish

運用フロー：

VSCodeで記事作成
  ↓
git push
  ↓
GitHub Actions自動実行
  ↓
WordPressに自動投稿

完全自動化！

複数サイト対応

複数のWordPressサイトへの投稿も検討中：

npm run publish-site1
npm run publish-site2

バルク投稿

過去記事の一括移行：

npm run publish  # 全記事を投稿

まとめ

開発を通じて学んだこと

1. 試行錯誤の重要性

最初から完璧なシステムは作れません。問題に遭遇するたびに、解決策を考え、実装し、改善する。この繰り返しが重要でした。

2. ユーザー体験の大切さ

技術的に可能でも、運用が面倒では意味がありません。「ファイル名を変える」という一手間を省くために、ハッシュベースの仕組みを実装しました。

3. ドキュメントの価値

試行錯誤の過程を記録しておくことで、後から見返したときに「なぜこうしたのか」が分かります。

このシステムを作って良かったこと

• 執筆が楽しくなった
• バージョン管理ができるようになった
• 画像管理のストレスがなくなった
• 記事の更新が簡単になった

そして何より、このシステム自体がブログ記事になりました！

技術スタック

最後に、使用した技術をまとめておきます：

言語・ランタイム：

• Node.js

ライブラリ：

• axios - HTTP通信
• marked - Markdown → HTML変換
• gray-matter - Front Matter解析
• form-data - ファイルアップロード
• dotenv - 環境変数管理
• crypto - ハッシュ計算

WordPress側：

• WordPress REST API
• WP Githuber MD（オプション）

エディタ：

• VSCode

バージョン管理：

• Git / GitHub

おわりに

VSCodeでブログを書きたい、画像管理を自動化したい、という単純な動機から始まったこのプロジェクト。

試行錯誤を繰り返しながら、最終的には想像以上に完成度の高いシステムになりました。

もし同じような悩みを抱えている方がいたら、この記事が参考になれば嬉しいです。

そして、「自分でツールを作る」という選択肢を持つことで、日々の作業がもっと楽しくなるかもしれません。

Happy Blogging! 🚀

参考リンク

• WordPress REST API ハンドブック
• WP Githuber MD
• Marked.js
• Node.js Crypto

最終更新： 2026-01-11

The post VSCodeからWordPressへ！Markdown記事を自動投稿するシステムを作った話 first appeared on CayTech Lab.