はじめに
「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 = ``;
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/vsce2. ファイル配置
my-macros/
├── src/
│ ├── extension.ts
│ └── macros/
│ └── insertImageFromClipboard.ts
├── package.json
└── tsconfig.json3. 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 + 42. Markdownファイルを開く
code article.md3. 挿入位置にカーソルを置く
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コーディングアシスタントの全貌
はじめに「AIにコードを書かせたいけど、ブラウザとエディタを行き来するのが面倒…」そんな悩みを解決するのがClaude Codeです。2026年2月時点で、Anthropicが提供する最新のデスクトップアプリケーションとして、開発者の間で急...
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 #生産性向上 #クリップボード
コメント