Claude 3.5 sonnetにArtifactsという機能が追加されました
QiitaAPIからタグの情報を取得して、フォロワー数や記事数を表示するwebアプリケーションを作成したいです
こんな感じのプロンプト一文で、
即時webアプリケーションを作成できます。
このようにAIと対話しながらwebアプリケーションを作成することができます。
この写真ではQiitaのタグを検索して情報をとることができるwebアプリケーションを作成しています。
外部の情報は取得できない
ですが、このwebアプリケーションを使ってみても、うまく動作しません
そうか、web上で別途動かさなければいけないのか、と納得された方はOKです。
どうすれば良いのか困った方向けに簡単なやり方を紹介します。
ArtifactsはReactで出力される傾向がある
動きのあるwebアプリケーションを要求すると、ArtifactsはReactというライブラリを利用するための形式で出力されます。
ですので、CodePenのようなwebエディターにそのまま貼り付けても動きません。
Reactで動かせるよ！という方はそれでも良いのですが、さらにShadcn/UIという外部のツールも使っているので、なかなか難しいのが実情です。
VanillaのJavaScriptにしてみる
ですので、動かすために特にライブラリなどを使っていないJavaScript（Vanillaと言います、アイスクリームのバニラ味のようにプレーンなイメージのようです）に変換しましょう！
最初のプロンプト
全く同じUIでVanillaJSで書き直してください
だいぶ見た目が変わってしまいましたね
流行りのパワハラプロンプトを使ってみましょう
パワハラプロンプト
先ほどの回答は60点程度ですので、100点の回答を出してください
写真のようなUIにするためにCSSを調整してください
先ほどのUIの画像も添付してあげましょう
だいぶ良い感じになりましたね！
ローカルで動かしてみる
このまま右下のDownloadを押すと、ローカルで動くHTMLファイルが出力されます
ダウンロードされたHTMLファイルをダブルクリックして実行してみましょう
動きましたね！
おめでとうございます！
CodePenで動かしてみる
web上でも動かしてみましょう。
まず、コードをコピーしてCodePenのHTMLのところに貼り付けます
ここでコピーできます
HTMLのところに貼り付けます
Bodyの部分だけを貼り付けろと怒られてしまいます
ですが、とりあえず動作しますのでとりあえずよしとしましょう
修正してみる
怒られっぱなしは気持ち悪いので、修正してみましょう
冒頭の
<!DOCTYPE html>
<html lang="ja">
この部分を消します
次に末尾の
</html>
この部分を消します
警告が消えて無事動けば成功です！
おめでとうございます！