初めてのハッカソン参加で、WebアプリをClaude w/Artifactで作ってみた
僕は現在、プロトアウトスタジオというスクールで、10期生として学んでいる学生です。
また、AIプラットフォーム研究所というサイトを運営しています。
今日は初めてのハッカソンへの参加、とは言っても自宅のデスクでの作業になるので、いつもと同じホームグラウンド、会場へ出かけるというアウェー感は無い。
最初に事務局からの説明や、Claudeの利用方法に関してレクチャーを受けた後、お題は、
休日の癒やしを提供してくれるプロダクト
うーん、難しい。こういう感覚的なのが難しい。
自分の休日の癒やしは何かな、と考えてみると、大体コーヒーを飲みながら動画を眺めるとかなので、全くありきたりな内容。
AIに聞いてみた。
休日の癒やしを提供してくれるプロダクトをWebアプリで作ります。
どんなアイデアがありますか？
自分は、休日はコーヒーを飲みながら、ネトフリで映画見るとかかな。
回答はめちゃくちゃ長いので割愛するが、５個ぐらいアイデアが出てきた。ある程度参考になるが、そこから自分でイメージを膨らませる。
今回は、デザイン思考で進めることにする。
自分の休日の癒やし
コーヒーを飲みながら、Youtubeをまったり眺める。課題
おすすめに上がってくる動画には偏りがあって、いつも同じようなものになっていてつまらない。解決策
ランダムにテーマを選択して、それに応じた動画を検索し、再生リストを作成する。テーマの選択方法
今日の気分に関する質問を３つ、ユーザーがタップして選んでいく。
完成したもの
と、こんなものが出来上がりました。いくつかの選択肢を選ぶと、それをキーワードにYoutubeから検索し、再生リストが出来上がってきて、それを再生するというものです。
実際に操作した動画は、こんなやつです。
制作過程
Youtube APIを使うので、Google CloudからYouTube Data API v3を有効にする。このあたりはAIに手順を教えてもらう。
しかし、OAuthのクライアントIDの設定をしようとしても、アプリのレジストのところでどうしてもエラーになる。こんなやつ
色々と興味もあったので、ついつい色々と試してしまって、ここで1時間以上時間が取られてしまった。
仕方がないので、APIキーを取ることにした。
この方法だと、APIキーを他の人が参照できて、自由に使うことができてしまう。とりあえず、ハッカソンの間だけキーを有効にしておくことにする。
残念だが、いったんAPIキーを使う方法で完成させて、OAuthは再度チャレンジすることにする。
APIキーはサクッと取れて、Claudeが作ったコードは難なく動いた。
Claudeとやり取りを繰り返していくと、あるところでプロンプトが長すぎる、というエラーが出て、2 messages remaining until 3 PM となったので、3時まで待ってみた。しかし、プロンプトが長すぎるというのは変わらないので、新規にスレッドを立て直してみると、進むようになった。
タイムリミットが午後3時半なので、焦り始めた。Protopediaへのエントリーをしなければ。
しかし、新しくやり取りを始めたClaudeは、以前とは全く違うコードを吐くし、Youtube再生しなくなるし、なんか思ったのと違うし、キーワード渡してもAIが省略しやがるしで、時間無くなってきた。
結局最初に作ったものに戻してしまった。
そして、選択肢を5つにして、選ぶ項目を増やしてみたところでタイムアップ。
制作が終わって
後の時間は、各自のプレゼンと最後に投票。
自分は最後の方だったので、皆さんのプレゼンを、こういう発想かあ、と感心しながら拝見した。
中でも、技術的に面白かったのが、この作品
世界地図を表示して、クリックした位置の情報からWikipediaの情報を検索し、その内容を表示するというもの。
自分の作ったものと通じるものがあるが、地図情報からさらにその詳細をWikipediaから取ってくるというのが応用が利く発想だと思った。
ハッカソンが終わって
APIキーを公開したままというのは非常に気になるので、ハッカソンが終わってからすぐに、Google Cloudにアクセスして削除してしまった。
感想と反省
Claudeを使った感想としては、レスポンスが非常に早いし、コードは右側に来てコメントは左側にくるという構造なので分かりやすく使いやすい。
同じやり方で、GPTで同じように回答が来るかは分からないが、使用感としてはそれほど差はないように感じた。
今回はClaudeは無償の範囲で、コードの生成部分のみに利用し、仕様の検討や調査部分はChatGPTというように使い分けた。
制限を考えてのことだったが、コード生成を５回ぐらいやった所で制限に引っかかり始めたので、この利用方法は正解だったと思われる。
あと、ハッカソンの結果として、皆で投票をして優勝者を決めたのだが、優勝者は、この方。僕と同じくハッカソンには初参加。
アプローチが分析的なのに、感性も豊かで、出来上がったものが非常にユニーク。自分にはマネができない。ちょっと勝ち目無いな。
note 記事がこちら
私と同じように、今回初めてハッカソンにチャレンジした人はみな、心構えを含め事前に何らかの準備をしていた様子で、そこが自分とは大きく違っていると反省。
次回のハッカソンの際に何を準備しておくべきか、これから情報収集して整理しておきたい。
次は勝つ。
以上