Claude 3.5 sonnet の Artifactsで作成したwebアプリケーションを外部でも使ってみたい

Claude 3.5 sonnetにArtifactsという機能が追加されました

```text
QiitaAPIからタグの情報を取得して、フォロワー数や記事数を表示するwebアプリケーションを作成したいです
```

こんな感じのプロンプト一文で、

![スクリーンショット 2024-06-29 8.13.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/6a4d730a-ed44-1d1a-d49f-4cc4163a3b0b.png)

即時webアプリケーションを作成できます。

このようにAIと対話しながらwebアプリケーションを作成することができます。
この写真ではQiitaのタグを検索して情報をとることができるwebアプリケーションを作成しています。

## 外部の情報は取得できない

ですが、このwebアプリケーションを使ってみても、うまく動作しません

![スクリーンショット 2024-06-29 8.17.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/fb8b4f22-8745-3895-c4fa-e98c6cb840a4.png)

そうか、web上で別途動かさなければいけないのか、と納得された方はOKです。
どうすれば良いのか困った方向けに簡単なやり方を紹介します。

## ArtifactsはReactで出力される傾向がある

動きのあるwebアプリケーションを要求すると、ArtifactsはReactというライブラリを利用するための形式で出力されます。
ですので、CodePenのようなwebエディターにそのまま貼り付けても動きません。

https://codepen.io/

Reactで動かせるよ！という方はそれでも良いのですが、さらにShadcn/UIという外部のツールも使っているので、なかなか難しいのが実情です。

## VanillaのJavaScriptにしてみる

ですので、動かすために特にライブラリなどを使っていないJavaScript（Vanillaと言います、アイスクリームのバニラ味のようにプレーンなイメージのようです）に変換しましょう！

### 最初のプロンプト

```text
全く同じUIでVanillaJSで書き直してください
```

![スクリーンショット 2024-06-29 8.26.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/92226f95-e055-7965-bdba-25dd9e3c0fa4.png)

だいぶ見た目が変わってしまいましたね

流行りのパワハラプロンプトを使ってみましょう

### パワハラプロンプト

```text
先ほどの回答は60点程度ですので、100点の回答を出してください
写真のようなUIにするためにCSSを調整してください
```

先ほどのUIの画像も添付してあげましょう

![スクリーンショット 2024-06-29 8.28.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/e54e5a63-59b0-4da0-b87d-5643d531fbdc.png)

だいぶ良い感じになりましたね！

## ローカルで動かしてみる

このまま右下のDownloadを押すと、ローカルで動くHTMLファイルが出力されます

![スクリーンショット 2024-06-29 8.29.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/67c72048-9862-8fce-937f-57d430f919d7.png)

ダウンロードされたHTMLファイルをダブルクリックして実行してみましょう

![スクリーンショット 2024-06-29 8.30.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/cb94539c-4c72-f976-3eef-02dbb0c4177e.png)

動きましたね！
おめでとうございます！

## CodePenで動かしてみる

web上でも動かしてみましょう。
まず、コードをコピーしてCodePenのHTMLのところに貼り付けます

![スクリーンショット 2024-06-29 8.32.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/9b4e241b-f60c-4967-be67-d93e66898920.png)

ここでコピーできます

![スクリーンショット 2024-06-29 8.33.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/f6238c9c-f043-b231-69cb-c2648809c48f.png)

HTMLのところに貼り付けます

![スクリーンショット 2024-06-29 8.33.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/ebb32a16-6272-d859-ae0b-ce610399e009.png)

Bodyの部分だけを貼り付けろと怒られてしまいます

![スクリーンショット 2024-06-29 8.34.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/c36d3ee2-3a4c-670b-4380-4c0e48b55870.png)

ですが、とりあえず動作しますのでとりあえずよしとしましょう

## 修正してみる

怒られっぱなしは気持ち悪いので、修正してみましょう

![スクリーンショット 2024-06-29 8.38.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/1e119817-3589-3dea-6429-e82d2856fea6.png)

冒頭の

```html
<!DOCTYPE html>
<html lang="ja">
```

この部分を消します

![スクリーンショット 2024-06-29 8.38.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/43fbed53-86a5-c06d-a1c4-f7ee3e8893bc.png)

次に末尾の

```html
</html>
```

この部分を消します

![スクリーンショット 2024-06-29 8.41.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/3f844ff5-cb87-9740-43ff-5e64090e8068.png)

警告が消えて無事動けば成功です！
おめでとうございます！