実験メモ：Claude Hackathon 2025 in Tokyo Day2 AM編
というわけで、前回の続き。比較的ライブにメモしてゆく。
場所を、新宿御苑のコワーキングスペースに移して、緑の中でvibe codingといこう。台風一過で快晴！しかしここまで来るのに暑くてバテバテ。。。
すでに昨日の１時間半弱で$14ドルつかったということは、この調子でガンガンやっていくと、クレジットを食い尽くすのは残り３時間半ぐらいか。
さて、昨日のつづき。$14.87を消費したところからスタート。まずはタスク何が残ってるか聞いてみる。
２段階、３段階は今はいらないな。まずは第１段階をちゃんとクリアして、その上で、微調整を行い。「言語シミュレータ」とつなげるとかそっちをやって、ユースケースを動かすことを優先しよう。
それでは、「 第1段階 (すぐ実装可能)」をやってもらおう。。「Toast通知」って何だろう。。。
というわけでしばらく20分ぐらいで、できた。 ここまで$21.27
なんだって、GeminiのAPIを呼ぶだって、おまえClaudeだろうという気もするが。。画面を見ると。。
ダメじゃん、なんか朝は調子が出ないのか。。
動かなくなったり、動いても、ボタンを押すと落ちたり、あるいは押しても何の反応もない。何度か文句をいう、といってもエラーコードもないので、claude codeがソースを見て推定しながらやっている。。。
なんやて無限ループが解決した？？ふいーん、ここまでで$23.18、そろそろもらったクレジットの半分に達してしまった。
さて、AI機能をためすよ。
どうも、JSON Schemaブロックを設定しないとだめのようだ、といっても変数をうまく返すにはどういうJSON Schemaを書けばよいのか？？この辺調整が必要。
なんか、API呼び出しで、fetchエラーになって、これってCORS制限のせいだと言っている。
なんだって、本物でないmockサーバーを立てたんだと。。そして指示通りmockサーバーに所定のjson schemeを入れれば、そりゃ値はかえるわな。そして帰ってきたjsonのkeyが全て変数一覧に反映される。。だめだ。
もう全然だめだ、、、ここからは、いつものチャットでまとめて指示する方式に変更。
①もっとも簡単に本物のAPIを使いたい、②変数定義でoutputにチェックがあるものは、json schemaに値が返ってくるようにこ れを反映したい、いまはサンプルを入れるのがあるが、outputを入れる③任意のjsonのkeyを変数に反映するようになっている が、"variables"というキーの下に変数名と値の組合せのjsonを入れたものを入れるように制限したい。②のJSO schemaもこの"variables"をキーとするスキーマにして整合性とること
そして、修正完了、ここまで、$28.12
ここで、根本的な仕様が通じてないことが発覚。どうもjsonschemeをそのままプロンプトに投げて値が変えてくるということらしい。いや、編集中のMarkdownの内容をコンテキストとして使うとうことなんだけど。。
①ここでプロントは、今編集中のmarkdownの内容を全部含めてほしい、つまりプロンプトの一部、contextとして編集中のmarkdown
を使うということ②、veiw promptは動いたが画面が大きくて、ブラウザ内で縮小しないと下方にあるボタンを押せない。どうにからなんか。
そや、それが欲しかったんや。でも欲しかったプロンプトはそれじゃない。。たとえば、こんな感じや。。
---------- SYSTEM INSTRUCTION ----------
You are a helpful assistant that generates structured content.
Your response MUST be a single, valid JSON object that strictly adheres to the structure provided below.
Do NOT include any extra text, explanations, or markdown formatting like ```json. Only the JSON object is allowed.
JSON Structure:
{
"variables": [
{
"key": "description",
"value": "a short, engaging description for the product"
}
]
}
---------- USER PROMPT ----------
# Structured Markdown Editor
This is a description for Awesome Product. The price is $1000. The AI will generate a {{description}}.どうにか修正、ここまで$29.16
やっぱり、CORS制限で引っかかる、どうもバックエンドサーバーというか、中継サーバーがひつようなのか。。でもAPI Keyを設定する画面はあるんだから？どうするつもりだったんだ？？このあたりはartifactを作っているときとは違うんだな、、Claudeアプリ実行環境内ではAPIコールができる。
とりあえず、できるか聞いてみよう、出来なければ、頭を冷やす。
バックエンドサーバを作ってCORSエラーを回避してほしい
ほうできたと、ここまで、$30.12
おお、動いたぞ、
ここで、午前は終わり、ごはんに出よう。。
