Claude w/ ArtifactでWebアプリを作ってみた

ハッカソンに参加
まずは、Claude の使い方をハンズオンで。

一瞬でアプリが完成したが、ChatGPTでもこの程度なら何とか作りそう。

テーマ：　休日の癒やしを提供してくれるプロダクト

休日は、コーヒーを飲みながらネトフリ、が癒やされるパターン、Webアプリだとなんだろう。
少し、AIと会話してみよう。

以下のプロンプトで聞いてみる。

休日の癒やしを提供してくれるプロダクトをWebアプリで作ります。
どんなアイデアがありますか？
自分は、休日はコーヒーを飲みながら、ネトフリで映画見るとかかな。

５個ぐらいアイデアが出てきた。参考になる。

今回はデザイン思考で進めることにする。
休日の癒やし：　コーヒーを飲みながら、Youtubeをまったり眺める。
課題：　おすすめに上がってくる動画には偏りがあって、いつも同じようなものになっていてつまらない。
解決策：　ランダムにテーマを選択して、それに応じた動画を検索し、再生リストを作成する。

テーマの選択方法：　今日の気分に関する質問を３つ、ユーザーがタップして選んでいく。

Youtube APIを使うので、Google CloudからYouTube Data API v3を有効にする。このあたりはAIに手順を教えてもらう。

しかし、OAuthのクライアントIDの設定をしようとしても、アプリのレジストのところでどうしてもエラーになる。こんなやつ

OAuthの登録でエラー
An error saving your app has occurred
このリクエストは不正行為に分類されているため、続行できませんでした
リクエスト ID: 12167370618296958561

ここでかなり時間が取られた。仕方がないので、APIキーを取ることにした。
この方法だと、他の人に使ってもらうことができない。とりあえず、ハッカソンの間だけキーを有効にしておくことにする。
残念だが、いったんAPIキーを使う方法で完成させて、OAuthは再度チャレンジすることにする。

APIキーはサクッと取れて、Claudeが作ったコードは難なく動いた。

やり取りしていると、プロンプトが長すぎる、となって、2 messages remaining until 3 PM となったので、３時まで待つ。
あと30分で、Protopediaにエントリーする。

しかし、作っていくうちにYoutube再生しなくなるし、なんか思ったのと違うし、キーワード渡してもAIが省略しやがるしで、時間無くなってアウト。

Claudeの利用上限を超えたあと、所定の時間になってからNew Chatでやり直すと、さっき作ってた続きというよりも、ぜんぜん違うものが出来上がってきた。

結局最初に戻して、それを自分で修正した。

結果できあがってきたものは、検索キーと内容が一致してないが、面白い動画が検索されていた。

感想としては、レスポンスが非常に早いし、コードは右側に来てコメントは左側にくるという構造なので分かりやすく使いやすい。
同じやり方で、GPTで同じように回答が来るかは分からないが、使用感としてはそれほど差はないように感じた。

今回はClaudeは無償の範囲で、コードの生成部分のみに利用し、仕様の検討や調査部分はChatGPTというように使い分けた。制限を考えてのことだったが、コード生成を５回ぐらいやった所で制限に引っかかり始めたので、この利用方法は正解だったと思われる。

以上