ChatGPTコピペ支援Chrome拡張
TL;DR
ChatGPTとの会話のコピペが手間なので、いい感じにコピーできるツールを作ったよ！
動機
ChatGPTとの会話を普通にカーソルで選択してコピーすると、下記のようなテキストになります。
名前が自分のしかなかったり、どこからがChatGPTの発言なのか判別しづらかったりで、そのままでは使いづらいです。
Nariaki Iwatani
ChatGPTとの会話をTwitterやZennなどにコピペしようとした際に、カーソルで選択してコピーする方法だと読みにくいテキストになってしまうんだけど、何か解決方法はないかな？
そうですね、ブラウザによってはカーソルで選択したテキストのフォントが変わることがあり、読みにくいテキストになってしまうことがありますね。
解決方法としては、以下のいずれかを試してみることができます。
キーボードショートカットを使う
テキストを選択した状態で、Windowsの場合は「Ctrl + C」、Macの場合は「Command + C」を押すことで、読みやすいフォントでコピーすることができます。
テキストエディタにペーストしてからコピーする
まず、テキストを選択して「Ctrl + C」や「Command + C」でコピーし、テキストエディタ（メモ帳など）にペーストします。そこで選択したテキストのフォントが自分が使っているフォントになりますので、そのテキストを再度選択して「Ctrl + C」や「Command + C」でコピーすれば、読みやすいフォントでコピーすることができます。
テキストをエクスポートする
ChatGPTとの会話をエクスポートすることで、読みやすい形式で保存することができます。Twitterの場合は、ツイートを選択して、右上にある「···」をクリックして「ツイートの埋め込み」を選択し、表示されたコードをコピーして、ブログなどに貼り付けることができます。また、Zennの場合は、記事を投稿した際に表示される「Markdown」や「HTML」のコードをコピーすることができます。
以上の方法を試して、読みやすいテキストでコピーすることができるようにしてください。
Nariaki Iwatani
3番目の方法は良さそうなんだけど、ChatGPTのサイトにはエクスポート機能がないよね。僕はGoogle Chromeを使っているので、Chrome拡張機能でいい感じにコピーできるツールを作ろうと思うんだけどどう思う？
確かに、ChatGPTのサイトにはエクスポート機能は備わっていませんので、3番目の方法は使用できませんでしたね。Chrome拡張機能を利用して、簡単に読みやすいテキストでコピーできるツールを作成するのは素晴らしいアイデアだと思います。
具体的には、Chrome拡張機能を作成するためのWeb開発技術が必要になりますが、その際にはJavaScriptを使用することが一般的です。また、Chrome拡張機能は、HTML、CSS、JavaScriptの3つのファイルで構成されていますので、それらの言語に熟練している必要があります。
具体的な実装方法については、以下のようなアプローチが考えられます。
ChatGPTのページをロードした際に、Chrome拡張機能が自動的に読みやすいフォントに変換するJavaScriptコードを実行する。
ユーザーがテキストを選択した際に、選択範囲を自動的にクリップボードにコピーするJavaScriptコードを実行する。
コピーされたテキストをペーストすると、読みやすいフォントで表示されるようにする。
以上のようなアプローチを取ることで、簡単に読みやすいテキストでコピーすることができるツールを作成することができます。ただし、Chrome拡張機能の作成には、ある程度のプログラミングスキルが必要になるため、慣れていない場合は時間がかかるかもしれません。
会話をTwitterやZennにコピペしたいと思うことが多いのですが、毎回手動で修正するのが辛くなってきたので、もういっそコピー時にいい感じにしてくれるツールが欲しくて作りました。
使い方
こちらのリンク先からChromeに拡張機能を追加してください。
拡張機能を有効にしてChatGPTのサイトを開くと、テキストフィールドの右側にコピーボタンが表示されます。
これを押すといい感じのテキストがクリップボードにコピーされるので、お好きな場所にペーストしてください。
フォーマット
デフォルトのフォーマットは以下の通りです。
${me}と${ai}がそれぞれあなたとChatGPTの発言内容で置き換えられ、会話の数だけ繰り返されてコピーされます。
# me
${me}
# ai
${ai}
編集機能
拡張機能のアイコンをクリックするとフォーマットの編集ウィンドウが開きます。
出力例
例えばフォーマットがこれだと、結果は以下のようになります。
### わたし
${me}
### ChatGPT
${ai}
わたし
ChatGPTとの会話をTwitterやZennなどにコピペしようとした際に、カーソルで選択してコピーする方法だと読みにくいテキストになってしまうんだけど、何か解決方法はないかな？
ChatGPT
そうですね、ブラウザによってはカーソルで選択したテキストのフォントが変わることがあり、読みにくいテキストになってしまうことがありますね。解決方法としては、以下のいずれかを試してみることができます。キーボードショートカットを使う
テキストを選択した状態で、Windowsの場合は「Ctrl + C」、Macの場合は「Command + C」を押すことで、読みやすいフォントでコピーすることができます。テキストエディタにペーストしてからコピーする
まず、テキストを選択して「Ctrl + C」や「Command + C」でコピーし、テキストエディタ（メモ帳など）にペーストします。そこで選択したテキストのフォントが自分が使っているフォントになりますので、そのテキストを再度選択して「Ctrl + C」や「Command + C」でコピーすれば、読みやすいフォントでコピーすることができます。テキストをエクスポートする
ChatGPTとの会話をエクスポートすることで、読みやすい形式で保存することができます。Twitterの場合は、ツイートを選択して、右上にある「···」をクリックして「ツイートの埋め込み」を選択し、表示されたコードをコピーして、ブログなどに貼り付けることができます。また、Zennの場合は、記事を投稿した際に表示される「Markdown」や「HTML」のコードをコピーすることができます。以上の方法を試して、読みやすいテキストでコピーすることができるようにしてください。
わたし
3番目の方法は良さそうなんだけど、ChatGPTのサイトにはエクスポート機能がないよね。僕はGoogle Chromeを使っているので、Chrome拡張機能でいい感じにコピーできるツールを作ろうと思うんだけどどう思う？
ChatGPT
確かに、ChatGPTのサイトにはエクスポート機能は備わっていませんので、3番目の方法は使用できませんでしたね。Chrome拡張機能を利用して、簡単に読みやすいテキストでコピーできるツールを作成するのは素晴らしいアイデアだと思います。具体的には、Chrome拡張機能を作成するためのWeb開発技術が必要になりますが、その際にはJavaScriptを使用することが一般的です。また、Chrome拡張機能は、HTML、CSS、JavaScriptの3つのファイルで構成されていますので、それらの言語に熟練している必要があります。具体的な実装方法については、以下のようなアプローチが考えられます。ChatGPTのページをロードした際に、Chrome拡張機能が自動的に読みやすいフォントに変換するJavaScriptコードを実行する。ユーザーがテキストを選択した際に、選択範囲を自動的にクリップボードにコピーするJavaScriptコードを実行する。コピーされたテキストをペーストすると、読みやすいフォントで表示されるようにする。以上のようなアプローチを取ることで、簡単に読みやすいテキストでコピーすることができるツールを作成することができます。ただし、Chrome拡張機能の作成には、ある程度のプログラミングスキルが必要になるため、慣れていない場合は時間がかかるかもしれません。
さいごに
実はこれがはじめての拡張機能制作とリリースでした。
有料機能を作るにあたってStripeの決済情報との連携部分を作ったんですが、どうせなら今回専用ではなくてある程度汎用的に使えるものを作ろうと思ってそこにも時間がかかったりとか、原因不明のリジェクトくらったりとか、審査に通った直後にちょっとしたミスに気づいてまた審査待ちになってしまったりとか、いろいろありましたが無事リリースできました。
使ってみていただけると嬉しいです！
もし要望や感想があればコメントください💬🙏
Discussion