🦎

Claude:Artifacts のシェアサービス作りました

2024/06/30に公開

概要

Share Artifact という Claude の Artifacts を URL 共有できるようにするサイト作りました。
Artifacts は2024/06/30 現在、ログインユーザーしかプレビューできませんが
このサイトにコードを貼り付けることで同じ動作をする公開ページを作ることができます。
React も環境設定無しで動きます。

使い方

  1. Claude に Artifacts で動作するコード作らせる
  2. できた Artifacts のコードをコピー
  3. サイト左の入力欄に貼り付け(①)。コードが解析できるとプレビューが始まり、共有 URLが発行される(②)
  4. SNS などで URL をシェアしよう

制限

1. 対応形式

2024/06/30 現在、 React、SVG、HTML のみに対応。
Mermaid はまた時間があれば対応します。

2. 再現度

React のプレビューは本家を見よう見まねで再現しております。
テーマなど見た目が違ったり、未対応のライブラリがあって動かない可能性があります。
見受けられたらご連絡いただければ助かります。

作ったもの

影の囁き:とりあえず逃げまくればOKなホラーゲーム

雑記(読み飛ばしてOK)

今回は紹介まで。
React、tailwind-css、Shadcn/UI のビルドにかなり苦労しましたが、技術的な点はまた機会があれば。

https://zenn.dev/utsubodev/articles/d2eb7832cd6931
前回の記事では CodeSandbox を使って共有する方法を書きましたが、手作業が少々面倒でした。
今回はペーストだけなので、かなり楽になった気がします。
自分もこれでゲームどんどん作って公開しようかと画策中。

https://x.com/masahirochaen/status/1806885601888899205
いや、わかってたんですよいつか公式が出してくるって…
ビルド環境握ってる本人たちが作ったほうが圧倒的に早いから作らないわけがないって…
でも初っ端から出してこなかったってことは公式も乗り気じゃないのかなって安易な考えで
我慢できず作り始めてしまいました…
Anthropic さん、先に言ってよ😭

Discussion