ClipboardItem + Blobでリッチテキストをコピーする実装と、HTTP環境の罠

• URL: https://dev.classmethod.jp/articles/clipboard-blob-rich-text-http-fallback
• 日付: 2026-06-22
• Tier: Tier 2
• 要旨: React/Next.js で Markdown を Outlook に書式付きでコピーする実装。ClipboardItem + Blob で text/html と text/plain を同時に clipboard に書込。Markdown → HTML（react-markdown）→ innerText でクリーンテキスト抽出。navigator.clipboard API は Secure Context（https/localhost/127.0.0.1）のみ。HTTP（http://10.x.x.x/）では undefined になりサイレント失敗。対処：window.isSecureContext で分岐・HTTP 環境では document.execCommand(“copy”) フォールバック（プレーンテキストのみ）。localhost で動いても本番 HTTP IP で動かない陥穽を実装で回避。

詳細

React 19/Next.js 15 で LLM 生成 Markdown を Outlook に書式付き・メモ帳にプレーンテキストでコピーする実装。navigator.clipboard.writeText() はプレーンテキスト専用・複数 MIME type 対応に ClipboardItem + Blob が必須。クリップボードは MIME type キー付きバイナリデータの集合：text/plain（書式なし）・text/html（HTML タグ付きリッチテキスト）。貼り付け先で対応 MIME type を選択（Outlook は text/html 優先・メモ帳は text/plain）。実装フロー 3 step：Step 1 Markdown → HTML（react-markdown + renderToStaticMarkup）、Step 2 HTML からクリーンテキスト抽出（tempDiv.innerText でレイアウトベースで抽出・Markdown 記号自動除去）、Step 3 ClipboardItem で write（text/plain + text/html Blob）。開発時の陥穽：localhost は HTTP でも Secure Context 特例・http://localhost:3000 では navigator.clipboard 正常動作。本番 HTTP IP（http://10.x.x.x/）では navigator.clipboard undefined でサイレント失敗・エラー内容不表示・ボタン反応なし。原因：navigator.clipboard API は Secure Context（https / localhost / 127.0.0.1）のみ利用可・HTTP IP アクセスは非 Secure Context で undefined。window.isSecureContext boolean で分岐対応：(1) true（HTTPS/localhost）→ ClipboardItem + Blob（text/html + text/plain）→ ClipboardItem 未対応ブラウザ時は writeText fallback、(2) false（HTTP IP）→ document.execCommand(“copy”) fallback（プレーンテキストのみ・text/html コピー不可）。execCommand(“copy”)は非推奨だが全主要ブラウザ対応・非 Secure Context での唯一の手段。textarea を使（input では改行選択失敗）・position:fixed;opacity:0 で非表示（display:none だと select() 失敗）・focus() → select() → execCommand(“copy”) 順実行・コピー後即 DOM 削除。フォールバック判定フロー：HTTPS/localhost（ClipboardItem+Blob+HTML 書式対応）→ HTTPS かつ ClipboardItem 未対応（writeText fallback・プレーンテキスト）→ HTTP IP（execCommand fallback・プレーンテキスト）。HTTP 環境は text/html コピー不可・書式付き必須ならHTTPS 化必須。開発時は LAN IP（http://192.168.x.x:3000）でアクセスして非 Secure Context 検証推奨。