Claude.aiの「Artifacts」、皆さん使ってますか？ HTMLの生成をお願いすると、上手にHTMLを生成してくれます。 さらに、HTMLのプレビューまで切り替えられます。 これは一体どういうテクノロジーでできているのでしょうか？？ 開発者ツールで確認 ブラウザの開発者ツールを使って、プレビュー部分がどうやってできているか見てみます。 すると、iFrameが見つかりました。 iFrameの「srcdoc」属性にHTMLがセットされていることがわかりました。 iFrameの仕様を確認 MDNドキュメントで、iFrameの仕様を確認します。 srcdoc属性の説明は以下のとおりです。 埋め込むインライン HTML で、 src 属性を上書きします。ブラウザーが srcdoc 属性に対応していない場合は、 src 属性の URL で代替されます。 srcdocにHTMLを埋め込むことが

ターミナルにトークン付きのURLが表示されますので、ブラウザでアクセスします。 起動しました。 チャットインターフェイス 左パネルにチャットのボタンが追加されています。 Welcomeメッセージが表示されます。 language modelとembedding modelを選択します。 これで準備完了です。 チャットができます。 おお！ ノートブックについて質問できる ただチャットができるだけではありません。ノートブックのセルに対して範囲選択をすると、チャットエリアの下部にInclude selectionとReplace selectionが表示されます。 Include selectionだと選択したコードを含んだ形で質問ができます。 すっげー！ (DefaultActor pid=473) (DefaultActor pid=473) (DefaultActor pid=473) >