実験メモ：Claude Hackathon 2025 in Tokyo Day1
Claude Hackathon 2025 参加の作業メモである。徹夜をするつもりはないのでDay1は新たに使えるようになった、Opusの能力とかagentsとかを試して様子を見てみる。最近Claude 4 Sonnetのartifactが、バグをさっぱり修正できなくて、ちょっと不安。
事前ワークショップ
いちおう、キックオフ前のワークショップにも参加。５０人くらいかな、nodeやvscodeのインストールから初めてclaude codeが動くまで。すごいな各自PCで歩調を合わせるのはずいぶん大変なはずだ。
案の定クレジットがもらえてない人がポロポロ。個人的には、/loginでくProユーザーからクレジット課金を切り替えることが可能なこと、/modelで計画用のOpusに切り替えるとか、それにagentsの使い方が役に立った。参加してよかった。
仕様を合成させてから実装するパターを試す。
いくつかの基本アイデアの実験があり、これらを結合して１つのアプリにするというそういうことを、こころみる。全体の仕様は非常にざっくりと書く。
# 概念仕様： MarkFlow Editor
## 構造化Markdownエディタ機能
で、Heading、Table, List、paragraph, code などのMarkdown要素ごとにブロック化した構造化エディタを考えている。ブロックは名前を持ち、「Markdownファイル管理機能」ではこのブロック名が、ファイル名の一段下に展開される
この構造化エディタはブロックを追加、削除、順番の入れ替えができる機能をもつ。内部的にはjsonでデータを持ち、保存読み込みはjsonで行う。
## 変数管理機能
さらに、変数管理機能があって、変数とその値を管理して、変数の値はMarkdownで "{{VARNAME}}"のように参照すれば値が埋め込まれるような機能を持っている。変数管理情報はjsonに反映される
## Markdownファイル管理機能
さらに、このエディタは複数のマークダウンファイルを管理できる管理機能をもっている。新規、リネーム、削除ができる。
マークダウン一覧が左ペインに並ぶが、そのマークダウンに含まれるブロック名が、マークダウン名の一段下に展開される
## ファイル間変数リンク機能
各ファイルに含まれる変数の値は、他のファイルの変数の値を参照できる。
## Markdownブロックのリンク機能
Markdownブロックには名称がついており、この名称をキーにして他のファイルからブロック単位でリンクを張ることができる。すなわち仮想的に他のファイルのブロックがリンクとして取り込まれる。OLEのような様な機能。ファイル管理機で展開されたブロックをクリックしてリンクを取り込める。リンクで挿入されたブロックは、インライン展開する機能によりリンクを解除してコピーにすることができる。
## プロンプト生成およびAPI呼び出し機能
編集中の構造化Markdownから、プロンプトを生成して、AI機能のAPIを呼び出し、responseを編集中のMarkdownに反映する。
このためにMarkdownブロックに、出力指示用に、Json Output Schemeブロック、Markdownテーブル出力、を用意する
あとは、何度か vibe codingでためたノウハウを、テキストに落としたものを用意して、以下のように配置
instructions.mdには以下のような指示を書く
Markdownを対象としたMarkdownエディタを兼ねたMarkdown管理アプリの詳細仕様を作ってほしい。以下の機能を持つとする。
【重要】詳細仕様は、基本仕様に従い、それぞれの部分機能は参考資料にある仕様書メモを統合して一つの詳細仕様にすること
基本仕様は以下である。
./spec/基本仕様.md
参考資料には、それぞれ、参考となる仕様の断片がある。
./spec/参考資料/参考spec1_markdownEditorAI.md 構造化Markdownエディタ機能、変数管理機能の参考資料
./spec/参考資料/参考spec2_structuredMarkdownEditor.md 構造化Markdownエディタ機能の参考資料
./spec/参考資料/参考spec3_structuredMarkdownManager.md Markdownファイル管理機能、Markdownブロックのリンク機能の参考に
ハッカソン用に期間限定クレジット$50がもらえたので、Claude Codeでいったん/loginするとアカウントが選べるので、サブスクではない方を選択。これでOpus4.1が使える。
Day1しかも、徹夜する気はないので、以下の新しい２つを試してみた。
仕様書を作成するところは、Opus4.1で行う
ワークショップで教えたもらったagentを試してみる、今回は、Markdown編集機能と、AI呼び出し機能を分割してそれぞれSonnetのagentを割り当ててみた。
詳細仕様ができた
データ構造まで作ってくれた。
実装開始
詳細仕様書ができたので、実装開始！なんかエラーが沢山でる。
$3.00費やして、フェーズ１が終了。出た画面はこちらで、初手にしてはなかなか良い。チャットでつくるArtifactも初手はいいんだよな、そこからがいつもボロボロ。。
そして、フェーズ１ができたという表示。なんかいままで表示されてきたToDoリストっぽい表示が出ないのはなぜ？
次のフェーズに移行
フェーズ２完成？？、ここまで $4.67（不正確、少ない見積もり）
ううう、Markdownブロックを１つ入れると追加することができない。変数も定義できない。
こりゃフェーズごとに確かめないとあかんのかも。
エラーを指摘すると、修正開始。。。1セッションですでに$5超えたと警告がでる。。
確かにブロック追加機能は動いた。しかしブロックが上下順番をかえられない。どうも未実装のようである、実装を開始した。
同やらできた$8になった。
残りの実装計画を教えて。
いや、まだ５ステップもあるのか。これは$50なんてあっという間かも。。。とりあえずTableを実装して、寝よう。
なんか勝利宣言、ここまで、 $9.52
確かに、テーブルは挿入できるけども、プレビューされない。。
ひどいな。さすがに直してもらう。そして勝利宣言。ここまで $10.13
さすがに動いた。
いやん、勝手に実装を始めちゃったよ。。
さいごまでいっちゃったのね、ここまで$14.39
ここまで1時間20分、$14.87。明日はデバッグに徹しよう。おやすみなさい。。
/cost
⎿ Total cost: $14.87
Total duration (API): 40m 3.0s
Total duration (wall): 1h 19m 30.8s
Total code changes: 3854 lines added, 349 lines removed
Usage by model:
claude-3-5-haiku: 11.5k input, 772 output, 0 cache read, 0 cache write
claude-sonnet: 196 input, 115.0k output, 16.5m cache read, 664.9k cache write
claude-opus-4-1: 6 input, 3.8k output, 0 cache read, 287.7k cache write
