1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ClaudeCodeにクリップボードの画像を読み込ませる仕組みを作らせた

Last updated at Posted at 2025-07-19

ClaudeCodeはコンソール画面でクリップボード画像を読み込む機能がないので、

ClaudeCodeさん自身にそういう機能のコマンドを作ってもらって、クリップボード内の画像データを読み込ませてみました。

プロンプトを動作させて、Claude Code Opsu4にツール作らせたやり取りの内容です。

プロンプト

npm i -g clipimage の形式でインストールできるnodeのアプリケーションをこのフォルダに作りたいです。


:

● 完成しました!npm i -g clipimageでインストールできるNode.jsアプリケーションを作成しました。

主な機能:

  • クリップボードから画像を取得して保存
  • Windows、macOS、Linux対応
  • PNG、JPG、BMPフォーマットサポート
  • カスタムファイル名指定可能

使い方:
clipimage # デフォルト名で保存
clipimage -o myimage.png # カスタム名で保存
clipimage -o myimage -f jpg # JPG形式で保存


あれ?WindowsのWSL上のubuntuで動かしてみたのですが、Windowsのクリップボードにコピーされた画像がファイルにならないです。
エラーメッセージは次のようなものです。

$ clipimage
(node:4890) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.
(Use node --trace-deprecation ... to show where the warning was created)
No image found in clipboard


● WSL環境でWindowsのクリップボードにアクセスするには特別な対応が必要です。WSLからWindowsのクリップボードの画像を取得するように修正
します。

:

● WSL環境での問題を修正しました。主な変更点:

  1. WSL環境を検出する機能を追加
  2. WSL環境ではpowershell.exeを使ってWindowsのクリップボードにアクセス
  3. punycodeの警告を解消するため、不要なclipboardyパッケージを削除

もう一度clipimageコマンドを試してみてください。Windowsでコピーした画像がWSL内でファイルとして保存できるはずです。


clipimage で保存すると、そのコマンドを呼び出したカレントディレクトリに、image_YYYY-MM-DD_HH-nn-ss.png の形式で保存してほしいです


● 完了しました!これでclipimageコマンドを引数なしで実行すると、image_YYYY-MM-DD_HH-mm-ss.pngの形式で現在のディレクトリに保存される
ようになりました。

例:

  • clipimage → image_2025-01-19_14-30-45.png
  • clipimage -f jpg → image_2025-01-19_14-30-45.jpg
  • clipimage -o myfile.png → myfile.png(カスタム名も引き続き使用可能)

もういちど、インストールしてみてください。


● インストール完了しました!clipimageコマンドが使用可能です。

使い方:

  • clipimage - デフォルトでimage_YYYY-MM-DD_HH-mm-ss.pngとして保存
  • clipimage -f jpg - JPEG形式で保存
  • clipimage -o custom-name.png - カスタム名で保存

次のようなエラーがでます。

$ clipimage
(node:7765) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.
(Use node --trace-deprecation ... to show where the warning was created)
Error: ENOENT: no such file or directory, open '/tmp/clipboard-1752931208143.png'


● エラーを見ると、PowerShellコマンドが正しく実行されていないようです。WSL環境でのパスの問題を修正します。

:

● 修正しました。主な変更点:

  1. WSL環境ではWindowsのTempディレクトリ(/mnt/c/Windows/Temp)を使用
  2. PowerShellコマンドに渡すパスをWindows形式(C:\Windows\Temp...)に変換
  3. ファイルの存在確認を追加

もう一度、Windowsでクリップボードに画像をコピーしてからclipimageコマンドを実行してみてください。


うまくいきました!!!


● 素晴らしい!正常に動作して良かったです。

clipimageコマンドが期待通りに動作していますね:

  • 画像がimage_YYYY-MM-DD_HH-mm-ss.png形式で保存される
  • WSL環境からWindowsのクリップボードにアクセスできる

これでnpm i -g clipimageでグローバルインストールして使えるようになりました。便利にお使いください!


そうすると、、、ClaudeCodeさんにクリップボード内の画像を読み取ってもらうと簡単ですね。


● はい、その通りです!ClipImageToFileを使えば、クリップボードの画像を簡単に共有できますね。

使い方の例:

  1. 画像をクリップボードにコピー
  2. clipimageを実行
  3. 生成されたファイル名(例:image_2025-01-19_15-30-45.png)を私に伝える
  4. 私がそのファイルを読み取って内容を確認

実際に試してみますか?クリップボードに画像をコピーしてclipimageを実行してみてください。ファイル名を教えていただければ、その画像を
確認できます。


では、いま、入っているクリップボード内のイメージを読み取ってください。その内容を教えてくください


:

● クリップボードの画像を確認しました。これはVisual Studio
Codeのスクリーンショットで、先ほど作成したClipImageToFileプロジェクトのindex.jsファイルを開いている画面です。

画面の内容:

  • 左側:VSCodeのファイルエクスプローラーで、clipimageプロジェクトの構造が表示
  • 中央:index.jsファイルのgetClipboardImage関数のコード
  • 右側:Copilotのサイドパネルが開いていて、エージェントモードでファイル編集に関する日本語の説明が表示

コードは、クリップボードから画像を取得してファイルに保存する機能を実装している部分で、WSL環境での動作も考慮したコードになっていま
すね。


では、いまクリップボードにコピーされている画像を読み取ってください。


● クリップボードの画像はGoogle ニュースのスクリーンショットです。

内容の詳細:

  • 日付:7月19日土曜日
  • 天気:地元の天気情報 28°C(夜)
  • トップニュースセクション:
    • 期日前投票に関する記事(2145万人超が投票)
    • 参院選関連のニュース(北海道新聞デジタル、沖縄タイムス社)
    • 投票日や投票率に関する情報
  • ローカルニュースセクション:
    • 飲食関連:「2皿ランチがお得!味もコスパも最高のフレンチ、東京・根津で見つけた!」
    • 観光:「超ハイボール祭」東京・上野公園での開催情報
    • エンタメ:シブヤ経済新聞の記事

画面右側には「あなたへのおすすめ」セクションもあり、シネマトゥデイの映画関連記事などが表示されています。

できた

コードも載せようかと思ったけど、、、、、いらないか、、、な?

Copilot とか Cursor で Claude Sonnet 4 使っている人はそもそも、クリップボード画像をAIAgentにすぐに渡せる仕組みが存在するので不要ですよね。

でも、ClaudeCodeにはなくて不便だったので作ってみました。

ClaudeCodeユーザーでしたら、みなさんも作らせてみてください。ちょっと便利かもしれません。

ショートカットキーで貼り付ける、みたいなことはできずなので、わざわざプロンプトでで「クリップボードの画像を読み取って」と命令するのは面倒かもしれませんが、なかなかおもしろいことができるものだなと思って、ご紹介しました。

リポジトリ、こちらに公開しておきます。

standard-software/ClipImageToFile
https://github.com/standard-software/ClipImageToFile

応用

なんか応用したら、

「ClaudeCodeさんがみたいときに、デスクトップ全体のスクリーンショットをとれるコマンドを作って」
「ClaudeCodeさんが操作したいときに、ウィンドウの任意の位置をクリックできるコマンドを作って」

みたいなコマンドを作らせておくと、全ての操作をClaudeCodeさんに任せることもできるかもしれないですね。

そのうち、「会社のSlackになんかつぶやきを投稿するような操作をして」みたいなことも、、、、

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?