chatGPTの出力をクリップボードにコピーするときの形式について

✨ はじめに

現在開発しているアプリでは、出力されたレスポンスをクリップボードにコピーする際、**Markdown形式（text/markdown）**のみが使用されていました。

Markdownは開発者にとって便利な記法ですが、貼り付け先のアプリや環境によってはうまく表示されず、見た目が崩れたり、読みづらくなってしまうことがあります。

そこで今回は、ChatGPTと同じように、クリップボードに複数形式でコピーする仕組みを取り入れるために行った検討と対応についてまとめます。

---

❗ Markdownコピーの課題

Markdownをそのままコピーすると、以下のような問題が起こります：

• **太字** → 太字にならず、記号がそのまま残ってしまう
• ## 見出し → 普通の文字列として扱われ、強調されない
• テーブル（|や---） → 表の形が崩れて読みにくくなる

特に、Markdownをサポートしていないアプリ（Wordなど）では、
リストやコード、表などの構造が崩れ、内容の理解が難しくなります。

---

💡 解決の方向性

こうした問題を解決するため、Markdownを見やすいテキスト形式に変換してコピーする方法を検討しました。

以下は、Markdownとその変換後の理想的な形の一例です：

要素	Markdown記法	理想的なテキスト形式
太文字	**太字**	太文字で表示
コードブロック	```	インデントと構造を保持したコード表示
リスト	- item や 1. item	• item や 1. item の形式

※ この形式は表示重視のため、Markdownとしての編集性はなくなります。
あくまで「貼り付け先での見やすさ」を目的としたものです。

---

🔍 クリップボードの仕組みを調査してみた

ChatGPTのコピー挙動を調べたところ、クリップボードには複数の形式（MIMEタイプ）で同時に保存されていることがわかりました。

• text/markdown … Markdown記法そのまま
• text/plain … プレーンテキスト形式（整形されていることもある）
• text/html … HTML形式（スタイル付き）

これにより、貼り付け先のアプリが自動的に最適な形式を選んで表示するようになっています。

📌 貼り付け先ごとの動作例

貼り付け先	使用される形式	結果
Word / Google Docs	text/html	スタイル付きで綺麗に表示される
VSCode / メモ帳	text/markdown や text/plain	Markdown記法がそのまま表示される

---

✅ 実装対応と結果

ChatGPTのように、「コピーするだけで貼り付け先に応じた最適な形式で表示される」 体験を実現するために、以下の対応を実装しました：

• text/plain には、Markdownを整形済みのプレーンテキスト形式に変換したものを設定
  　→ メモ帳やVSCodeでも、表やリスト、コードが読みやすく表示されるようになりました。

• text/html には、スタイル付きのHTMLを指定
  　→ WordやGoogle Docsに貼り付けたとき、見た目を保ったまま表示されるようになりました。

• text/markdown も引き続きサポート
  　→ Markdownを扱うエディタでは、編集しやすい状態で貼り付けられます。

これにより、貼り付け先のアプリが対応している形式を自動的に選択し、最適な表示で貼り付けられるようになりました。

ユーザーは貼り付け先を意識することなく、「読みやすく・崩れないコピー体験」が得られるようになっています。

📝 まとめ

• Markdownは便利だが、貼り付け先によっては表示が崩れて読みにくくなる

• ChatGPTのように、複数形式（Markdown・テキスト・HTML）を同時にコピーすることで、どんな環境でも最適な表示が可能になる

• 表示重視の整形済みテキストや、出力形式を選べる仕組みを取り入れることで、ユーザー体験が大きく向上する