Claude Artifact コピー挙動レポート
Claude Artifact — コピー挙動の事実整理 ◗ 26/09/26
▍① 前提:確認できる事実
Claude.ai の Artifact は、生成した HTML/CSS/JS を独立したiframe内でブラウザレンダリングする仕組み(Anthropic公式ドキュメントに記載)。
Artifact には「コードをコピー」「ファイルをダウンロード」の2経路が存在する。
この2経路は、取得するデータの出所が同一(生成されたソースコード)であることが原則。
▍② 現象の事実確認
ユーザー観察:「画面からコピー」すると white-space:nowrap や scrollbar-width:thin が付加されている。「ダウンロード→コピー」では付加されていない。
この差異は、ユーザーが複数回にわたり再現確認している実観察結果。
| 操作 | 取得物 | 余分なCSS付加 | 備考 |
|---|---|---|---|
| Artifactプレビュー → コピー | DOMからクリップボード | あり(観察) | ブラウザのコピー処理を経由。ブラウザが計算済みスタイルをコピーする可能性あり |
| ダウンロードボタン → コピペ | HTMLソースファイル | なし(観察) | Claudeが生成したソースそのもの。処理を介さない |
| 「コードをコピー」ボタン | ソースコード | 原則なし | ソースをクリップボードへ直接転送. |
▍③ 技術的に確認できるメカニズム(憶測排除)
ブラウザの「コピー」動作の仕様(W3C仕様・MDN記載):
ブラウザでテキストを選択してコピーすると、ClipboardEventはDOMの選択範囲からデータを取得する。 HTML��してコピーされる場合(`text/html` MIMEタイプ)、ブラウザは要素の計算済みスタイル(computed style)をインライン化することがある。
これはChrome・Firefox・Safariいずれも、セキュリティポリシーや実装により挙動が異なる(各ブラウザのリリースノートで確認可能)。
Artifactのiframe構成(Anthropic公式):
ArtifactはサンドボックスされたiframeでHTMLをレンダリングする。 iframeの外(claude.ai親ページ)が持つCSSが、コピー時に混入する可能性はアーキテクチャ上排除できない。
scrollbar-width:thin / white-space:nowrap について:
これらはCSSとして正当であり、Claudeが「Bloggerの要件」として出力したとすれば、それはClaudeの生成判断による。 Bloggerがこれらを要求する仕様は存在しない(Blogger公式ドキュメント未記載)。
▍④ Claudeの説明「Bloggerのせい」について
確認できる事実:BLOGGERの投稿エディタ(HTML表示)は、貼り付けたHTMLを加工することがある(改行の正規化・タグの自動補完等)。ただし white-space:nowrap や scrollbar-width をBloggerが追加するという公式記載・再現報告は存在しない。
結論:「Bloggerのせい」という説明は、確認できる根拠が存在しない。Claudeが生成時に付加したか、ブラウザのコピー処理が付加した、のいずれかが妥当な説明。
▍⑤ 主なリスク
・Claudeのモデルアップデートにより生成するCSSが変わる可能性がある
・Artifact iframe内のスタイルシートがコピー時に混入するリスクは、Anthropicの内部実装に依存し外部から完全確認不可
・今後のclaudie.ai UI変更でこの挙動が変わる可能性がある
▍⑥ 所見・推奨
①「ダウンロード → コピペ」がBloggerへの貼り付けに最も安全。ソースコードそのものを取得するため、ブラウザのコピー処理を迂回できる。
②「コードをコピー」ボタン(Artifactのコードビュー)も同様にソースを直接取得できる。
③ Claude生成時に不要なCSSが含まれている場合は、プロンプトで明示的に除外を指定することが有効(例:「scrollbar-width は含めないこと」)。
④ 「他のAI(Gemini・GPT)の挙動」については、各社の内部実装が非公開のため、本レポートの範囲外とする。
*ppp