Slackの返事をコピーするたびに、余計なものを消していました
Slackに書く返事をClaudeに考えてもらうと、Claude Codeは返事の文面を>の引用ブロックで出してくれます。これをそのままSlackに貼りたいのですが、ターミナルで選択してコピーすると、行頭に▎が付いてきて、ターミナルの幅で折り返したところに改行が入ります。
Claude Codeには回答をコピーする/copyコマンドもあります。ただ、/copyは回答の全部をコピーするので、引用ブロックの前後の説明まで入りますし、引用の行には> が付いたままです。
私は引用ブロックだけをサクッとコピーしたかったのですが、今まではコピーしてからエディタに貼って、余計なものを消していました。
そこで作ったのがcopy-blocksです。
この記事でわかること
- Claude Codeの回答から、引用ブロックやコードブロックだけをきれいにコピーするmod(copy-blocks)
- modで回答の表示を差し替えて、ブロックの上にコピーボタンを置く方法と、詰まったところ
前提
- Claude Code v2.1.287以降(modが使えるバージョン)
- macOSのターミナルで動作を確認しています
回答の中のブロックの上に、コピー用の行が出ます
Claudeの回答に含まれる引用ブロックとコードブロックの1つずつに、すぐ上に罫線の行が付きます。この行のどこを押しても、そのブロックがコピーされます。
── bash · 2 lines ──────────────── ⧉ copy
- コピーされるのはブロックの中身だけです。行頭の
▎や>は付いてきません - 画面では折り返して表示されていても、コピーした文章には折り返しの改行が入りません。Claudeが書いたとおりの改行だけが残ります
- 太字の
**などのMarkdownの記法は、そのまま残ります。Slack向けの書き方には変換していません - 最初に作ったプロンプトの上の帯にボタンを並べる形も残していて、
/configの「copy-blocks buttons」で、両方・回答の中だけ・帯だけを切り替えられます。冒頭の動画は「両方」の設定で、回答の中の行と、プロンプトの上の帯の両方にボタンが出ています
読むのはClaudeの回答だけで、コマンドの実行もネットワークへの送信もしません。書き込むのは、ボタンを押したときのクリップボードだけです。
最初は、プロンプトの上の帯にボタンを並べていました
作ったのは今回もClaudeです。最初の版(0.1)は、回答が終わるとプロンプトの上の帯にブロックの数だけボタンを並べる形でした。
本当は、チャットのUIによくある、ブロックの右上にコピーボタンが付いている形にしたかったです。ただ、最初にClaudeに「最後の出力からメッセージを抜き出して、コピーボタンを出したい」と頼んだので、Claudeは帯とペインに並べるものとして作っていました。私はできなかったのだと思い込んでいて、記事を書くために聞いてみたら、回答の中に置く案は試していなかったとわかりました。
mod には、Claudeの回答の文章を1ブロックずつ表示し直せる仕組み(AssistantMessage)があります。表示が変わるだけで、Claudeに渡る中身は変わりません。これを使えば回答の中にボタンを置けそうだったので、試してもらいました。
ブロックの横にボタンを置くこと自体はすぐにできました。見た目は、右上のボタンや枠で囲む形を試したあと、/designで案を出してもらい、今のブロックの上の1行に落ち着いています。
見た目を決めるまでの流れ
- ブロックの右にボタンを置いた:ブロックが画面の幅いっぱいに広がっていたので、ボタンが右端まで離れてしまった
- ブロックの幅をいちばん長い行に合わせた:ボタンは右上に来たが、チャットのUIのような枠がないので、どのブロックのボタンかわかりにくい
- 丸角の枠で囲んで、枠の右上にボタンを置いた:広い画面ではボタンが遠い、ブロックの間の空行が多い、Claude Code本来の見た目と変わる、という問題が出た
- Herdrで別のペインにClaudeを起動して、
/designで案を出してもらった:おすすめは「枠を付けずに、ブロックのすぐ上に1行のヘッダーを置く」で、3の問題がまとめて消えた - 押せる範囲が小さかったので、ヘッダーの行全体をボタンにした
- 本文の文字と見分けがつくか気になったので、もう一度
/designで比べてもらい、今の罫線の形にした
ChatGPTやGitHubのコードブロックのように、マウスを乗せたときだけボタンを出す形は、ターミナルではできませんでした。
詰まったところ
- 回答の左端の
●と字下げが消えた- 回答の表示をmodで作り直すと、Claude Codeが付けている
●と字下げも一緒に消えます。そのため、modの側で同じように●と字下げを付けています - Claude Codeの見た目が今後変わると、ここがずれるかもしれません。気になる場合は、帯だけを使う設定にすれば、回答の表示はClaude Codeのままになります
- 回答の表示をmodで作り直すと、Claude Codeが付けている
- 見出しの行だけをmodで足す方法はうまくいかなかった
- 回答を部分ごとに分けて、文章とブロックの表示はClaude Codeに任せ、modは見出しの行だけを足す方法も試しました
- ところが、2つ目以降の部分は字下げがなくなり、部分ごとに空行も入りました。modからは直せなかったので、この方法はやめました
- ボタンの文字に色を付けられなかった
- 色を付けられるのは、マウスを乗せたときだけでした。「⧉ copy」だけを青くする案はあきらめて、罫線を薄くすることで目立たせています
- touch-mapと帯の表示を取り合っていた
- 帯を使う版では、touch-mapを最小化したときに出る帯と、お互いの表示を消し合っていました
- 帯に表示するときは、ほかのmodが表示した内容も受け取れます。どちらのmodもそれを捨てて、自分の行だけを表示していたのが原因でした。ほかのmodの行を残したまま自分の行を足すように、両方を直しました
毎日使っています
Slackの返事に限らず、コマンドやPRの説明文をコピーするときにも使っていて、普通に毎日使っています。便利です。
正直、touch-mapより使っていて、touch-mapのほうは飾りみたいになっています。touch-mapは「Claudeがどこを見たか」を確かめたいときに役立つものですが、copy-blocksはClaudeの回答を受け取るたびに使うので、使う回数がまったく違います。
良かったら試してみてください
Claude Code 2.1.287以降が必要です。シェルから次の2行でインストールできます。
claude plugin marketplace add y-hirakaw/claude-code-mods
claude plugin install copy-blocks@y-hirakaw-mods
インストールしたあとの操作はありません。Claudeの次の回答からボタンが出ます。
modは、ペインのような大きなものより、こういう毎日の小さな手間を消すほうが向いているのかもしれないと思いました。
この記事はZennにも投稿しています。