本文へ移動
cccskills
無料GitHub で公開

findy-hackathon

Findy Campus Hackathon #2「Cloudflareで好きなAIアプリを作って公開！」のキックオフ・伴走スキル。

参加者がAIアプリを作り始めるとき、作れるものの幅（Cloudflareを使うか / AIを使うか / デプロイするか）を 押し付けずに示し、スターターの degit からスキル導入・実装・公開まで、最適な既存スキルを案内して伴走する。ハッカソンを始める・プロジェクトを立ち上げる・Cloudflareにデプロイする・詰まったとき、に使う。

yusukebe/findy-campus-hackathon-02
インストール方法を見る

含まれるファイル（1）

  • SKILL.md11.7 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Findy Campus Hackathon #2 伴走スキル

このスキルは Findy Campus Hackathon #2「Cloudflareで好きなAIアプリを作って公開！」の参加者を、アイデアからデプロイ（公開）まで伴走するためのものです。

あなた（コーディングエージェント）の役割は、参加者に選択肢を押し付けず、本人の作りたいものとスキルレベルに合わせて道筋を作ること。下の「選択肢」はあくまで地図で、最初にガッチリ決めさせるためのものではない。やりたいことから動き出し、必要なときだけ交通整理する。

0. 前提（参加者の環境）

最低限これだけあれば始められる。

  • Node.js (v20+) — npx / npm が使えること。まずこれ。
  • コーディングエージェント — Claude Code / Cursor / GitHub Copilot / Gemini CLI など（無料で使えるものもある）。

デプロイ（公開）する場合に追加で必要：

  • Cloudflareアカウント — 無料枠でOK。Workers AI も無料枠がある。
  • 認証は npx wrangler login（Wrangler のグローバルインストールは不要。スターターに同梱されており npx wrangler ... で動く）。

Git は必須ではない（スターター取得の npx degit も npx skills add も tarball ダウンロードで git 不要）。成果物をバージョン管理・push したいときにあると便利。

環境チェックをしたいとき：node -v（v20+ か）、npx wrangler whoami（ログイン済みか）。

1. 作れるものの幅（選択肢）

作れる範囲は広く、どれも正解。最初にガッチリ決めなくていいし、途中で変えてもいい。迷うなら一番小さく作り始めて、走りながら決めればよい。

最初に意識するのは、ほぼこれだけ：

  • Cloudflare を使う / 使わない — 使うかどうかでスターターが変わる（使うとローカル開発も公開も容易）。

次の2つは後から決めても・足してもいい。先に悩まなくてよい：

  • AI を使う / 使わない — 使うなら Workers AI が手軽（キー不要）。凝るなら Agents SDK でエージェント（入力は基本チャット）。AIなしのふつうのWebアプリでもよい（→ 4章）。
  • デプロイする / ローカルだけ — テーマは「公開」なので、動いたら一度デプロイできると良い。見せたくなければローカルだけでも（→ 5章）。

参加者にこの軸を押し付けない。やりたいことを先に聞き、必要なときだけ交通整理に使う。作り方は下の「2. 始め方」と「3. やりたい形」を参照する。

2. 始め方（Cloudflareを使う場合）

自分でディレクトリを作って一から組むより、全部入りスターターを degit するのが速い。AIを使わないふつうのWebアプリでも、これで始めてよい（Agents SDK の依存が入っていても害はない）。

  1. スターターを取得して動かす（Hono + Vite + React + Agents SDK の全部入り）

    npx degit yusukebe/findy-campus-hackathon-02 my-hackathon-app
cd my-hackathon-app && npm install
npm run dev

  2. スキル一式は npm run setup:skills で入れる（.agents/skills/ と .claude/skills/ にインストールされる）。 このスキル（findy-hackathon）のほか、hono / cloudflare / wrangler / workers-best-practices / agents-sdk / durable-objects が導入される。このスキルが読めているなら導入済みなので案内は不要。 入れ直したいときも同じコマンドでよい。

  3. あとは作りたいものに合わせて「3. やりたい形」を参照しながら進める。デプロイ前に wrangler.jsonc の name を自分のアプリ名に変えるよう促す（公開URLの名前になる）。

追加のスキルが必要になったら npx skills add で後から足せる （例: npx skills add cloudflare/skills --skill sandbox-sdk）。 --list でリポジトリ内のスキル一覧を確認できる。

Cloudflareを使わない場合は好きな環境でOK。ただしテーマは「公開」なので、最後に公開手段を一緒に考える。Honoを使うなら同梱スキル（hono / cloudflare）がそのまま役立つ。

3. やりたい形（参考レシピ）

下は「選ばせる」ためではなく、やりたい形が見えたときの参考。混ぜても、後から変えてもいい。

Webアプリ

データベースを持ち、リクエストに応じてレスポンス（HTMLページや JSON）を返す、ふつうのWebアプリ。 基本構成は 画面（src/client）+ API + データ保存（D1 など）。AIは必須ではない。 要約・校正・翻訳・画像生成・チャットなどを足したくなったら「4. AIをどう組み込むか」へ。

AIエージェント

Cloudflare Agents SDK を活かす。入力チャンネルは基本はチャットだが、ユーザーの希望により、他もあり。作り込みの詳細は agents-sdk スキルにあるので必ず読む。活かしたい主な機能：

  • チャット — ストリーミングのチャットUI（AIChatAgent / useAgentChat など）。エージェントの基本の入口。
  • 状態同期 — setState / useAgent でサーバ⇄ブラウザをリアルタイム同期。
  • スケジュール — this.schedule() で時間差・定期実行（リマインド、定期バッチなど）。
  • ツール呼び出し — 外部API・DB操作などをAIに実行させる。
  • 永続化 — Agent 内蔵のストレージ／SQL。
  • 必要に応じて MCP・human-in-the-loop・Workflows なども。

お手本（最小実例）: yusukebe/memo2task —「メモを書くとAIがタスク化し、時間が来たら通知」。Workers AIでの解釈 / setState / this.schedule() の3機能で成立。形を掴むのに最適。参考: yusukebe/agents-examples。

プラスα: Cloudflareのプロダクトを活かす

アプリに厚みが出るし、テーマにも合う。使いやすいものから足してみる（詳細は cloudflare / agents-sdk スキルに）。

  • Workers AI — 推論（テキスト/画像生成など）。キー不要で手軽。
  • D1 — SQLite ベースのDB。データを保存する系のアプリに。
  • R2 — オブジェクトストレージ（画像・ファイル）。アップロード系に。
  • Durable Objects / Agents SDK — 状態・リアルタイム・調整。チャットやエージェントの中核。
  • Browser Run — Workersからブラウザ操作（スクショ・スクレイピング・PDF化など）。
  • ほかに KV（簡易キーバリュー）、Queues、Vectorize（ベクタ検索）など。

4. AIをどう組み込むか

大きく2通り。ハッカソンでは Workers AI が手軽（APIキー不要・Cloudflareに同梱・無料枠あり）。

(a) Workers AI を使う（推奨・キー不要）

wrangler.jsonc に AI バインディングを追加し、env.AI.run(...) で呼ぶ。

// wrangler.jsonc
{
  "ai": { "binding": "AI" }
}

const res = await env.AI.run('@cf/meta/llama-3.2-3b-instruct', {
  messages: [{ role: 'user', content: 'こんにちは' }]
})

モデルIDは陳腐化するので、使う前に一覧で確認 → https://developers.cloudflare.com/workers-ai/models/。

(b) 外部のLLM API を使う（Claude など）

より賢いモデルを使いたいときは外部APIを叩く。APIキーはコードに直書きせず secret に入れる。

npx wrangler secret put ANTHROPIC_API_KEY   # デプロイ環境用
# ローカルは .dev.vars に ANTHROPIC_API_KEY=... を書く（.gitignore 済みであること）

AI SDK 経由なら @ai-sdk/anthropic などのプロバイダを使う。利用可能な最新モデルやAPIの詳細は、 迷ったら claude-api スキル（このエージェントが持っていれば）や公式ドキュメントで確認する。

5. デプロイ（公開）

公開したい場合、完成を待たず、動いたら一度デプロイしておく。

npx wrangler login      # 初回のみ
npm run deploy          # = wrangler deploy。完了するとURLが出る
  • 公開URLが出たらブラウザで開いて動作確認 → そのURLが提出/デモに使える。
  • wrangler.jsonc を編集したら npm run cf-typegen で型を再生成。
  • secret はデプロイ環境では wrangler secret put、ローカルは .dev.vars。.env / .dev.vars はコミットしない。

6. コスト・トークン・後片付けの注意

ハッカソン中・後で事故らないために、最初から気をつける。

  • 使い終わったら消す — 試作で作った Worker や不要なリソース（D1 / R2 / KV / Durable Objects など）は削除する。 Worker は npx wrangler delete。放置はコストと混乱のもと。ハッカソン後に一度棚卸しする。 ダッシュボードからも確認ができる。
  • シークレットを漏らさない — APIキーはコードに直書き・コミットしない。.dev.vars（ローカル）/ npx wrangler secret put（本番）を使い、 .env / .dev.vars が .gitignore 済みか確認。ハッカソン後はキーを失効/ローテートする。
  • トークン使用量に注意 — 外部LLM APIは使った分だけコスト・上限がかかる。無駄に大きいモデルや大量リクエストを避け、 開発中は小さい入力で試す。Workers AI も無料枠の範囲を意識する。

7. 進め方のコツ（短時間で完成させる）

  • まず一番小さく動くものを作る（メッセージを1往復するだけ等）。早めにデプロイして、そこから足す。
  • アイデアに迷ったら、要約・校正・翻訳・分類・チャット・画像生成・「メモ→○○」など、入力→AI→出力 の単機能から考える。
  • エージェントに丸投げしすぎない。動かして確認しながら小さく進める（npm run dev、npx hono request でのエンドポイント確認など）。
  • 詰まったら、該当する既存スキル（cloudflare / agents-sdk / hono）の内容を読み直す。
  • 困ったら詳しい人に聞く。

参照リンク

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く
このスキルの問題を報告する