📸

画像ペーストが快適に！VS Code拡張『ClipShot』を作った

に公開
AI
VS Code
Markdown
screenshot
extension
idea

画像ペーストが快適に！VS Code拡張『ClipShot』を作った

スクショを貼るたびに「保存して、名前つけて、フォルダに置いて、パス貼って…」ってやるの、地味に集中力削られません？
ClipShot はそこを、ショートカット1発で終わらせる VS Code 拡張です。

貼って、書き続けよう。（ドキュメント作業、止めないやつ）

👉 VS Code Marketplace
👉 GitHub（OSS / MIT）

これはなに？

以前『Image Paste for Claude Code』という拡張を作ったんですが、改良したいポイントがどんどん出てきて、ゼロから作り直しました。

ClipShot は、クリップボードの画像を

  • ワークスペース内に自動保存して
  • カーソル位置に 相対パスを挿入（必要なら Markdown/HTML 形式にも）

までをまとめてやってくれます。

キー操作はこれだけ：

  • Windows / Linux: Ctrl+Shift+V
  • macOS: Cmd+Shift+V

こんな人におすすめ

  • Markdown にスクショをよく貼る（設計メモ・議事録・仕様・障害調査ログなど）
  • Issue / PR の説明に画像を添えがち
  • AIチャット（ChatGPT / Claude など）にスクショを投げて説明することが多い
  • 「画像貼る作業」で思考が途切れるのがイヤ

どうなるの？

スクショをコピーして、Ctrl+Shift+V を押すと…

demo

.clipshot/ みたいなフォルダに自動保存されて、カーソル位置に参照が挿入されます。

例（パス挿入）：

./.clipshot/image_20260130_123456_001.png

いい感じポイント：デフォルトは「auto」判定

ClipShot の clipshot.insert.format は デフォルトが auto で、開いているファイルの種類を見て挿入形式を変えます。

  • Markdown → ![filename](relative/path.png)
  • HTML → <img src="relative/path.png" alt="filename" />
  • それ以外 → relative/path.png

つまり、普段は何も考えず貼ってOK。必要なら設定で固定もできます（後述）。

前作との違い（ざっくり）

項目 Image Paste for Claude Code ClipShot
プラットフォーム Windows のみ Windows / macOS / Linux
出力形式 PNG 固定 PNG / JPEG / WebP
設定項目 少ない 保存先、ファイル名、品質など多数
ソースコード 非公開 GitHub で公開（MIT）

「ちゃんと作り直したい」と思って、クロスプラットフォーム対応とセキュリティ面をしっかり固めました。

特徴（推しポイント）

1) クロスプラットフォーム対応

Windows / macOS / Linux（X11/Wayland）で動きます。
Linux の場合は環境に応じてツールが必要です：

  • X11: xclip
  • Wayland: wl-clipboard

2) 複数フォーマット対応（PNG/JPEG/WebP）

PNG に加えて JPEG/WebP を選べます。
JPEG/WebP は品質（1〜100）も設定できます。

3) 柔軟な設定（保存先・命名・挿入形式）

たとえば「.clipshot に保存して、挿入は auto」のままならこんな感じ（ほぼデフォルト）：

{
  "clipshot.saveDirectory": ".clipshot",
  "clipshot.output.format": "png",
  "clipshot.insert.format": "auto"
}

「常に Markdown 形式で挿入したい」みたいに固定もできます：

{
  "clipshot.insert.format": "markdown"
}

挿入形式は auto/path/markdown/html から選べます。

4) セキュリティを意識した設計

  • コマンドインジェクション対策
  • パストラバーサル対策（realpath 検証など）
  • ワークスペース配下に保存先を限定

詳細は SECURITY.md にまとめています。

インストール

Marketplace から

  1. VS Code で Extensions を開く（Ctrl+Shift+X）
  2. 「ClipShot」で検索
  3. Install をクリック

👉 VS Code Marketplace

VSIX から

  1. Releases から .vsix をダウンロード
  2. VS Code で Extensions: Install from VSIX...

使い方（最短）

  1. 画像をクリップボードにコピー（スクショなど）
  2. Ctrl+Shift+V（macOS は Cmd+Shift+V）
  3. 終わり！

コマンドパレットから ClipShot: Paste Image でも実行できます。

主な設定項目

設定 デフォルト 説明
clipshot.saveDirectory .clipshot 保存先ディレクトリ
clipshot.output.format png 出力形式（png/jpeg/webp）
clipshot.output.jpegQuality 80 JPEG 品質（1-100）
clipshot.output.webpQuality 80 WebP 品質（1-100）
clipshot.insert.format auto 挿入形式（auto/path/markdown/html）

詳細は README を参照してください：
👉 GitHub（README）

技術的なこと（軽く）

  • 画像処理：Sharp（フォーマット変換・品質調整）
  • ビルド：TypeScript + esbuild
  • セキュリティ：注入・パス検証などをガード（詳細は SECURITY.md）

「実装どうなってるの？」って人は GitHub を覗いてもらえると嬉しいです。

サポート / メンテ方針（大事）

ClipShot は 趣味の個人開発として、空いた時間にメンテしています。
Issue / PR はできる限り見ますが、返信やリリースはベストエフォートになります（ゆっくりめのときもあるかも）。その点だけ、ふわっとご了承ください 🙏

とはいえ、使ってくれる人が増えるほど改善のモチベも上がるので、

  • バグ報告（再現手順があると助かる）
  • 「こういう設定ほしい」みたいな要望
  • 小さめPR（めっちゃ嬉しい）

ぜんぶ歓迎です！

おわりに

自分用に作ったのが始まりなんですが、同じように「スクショを貼りたい民」には刺さると思って OSS として公開しました。

「ドキュメントにサクッと画像を貼りたい」
「AIチャットでスクショ共有を雑に速くやりたい」
って人はぜひ試してみてください！

👉 VS Code Marketplace
👉 GitHub（OSS）

Discussion