Claude CodeとStripeを使って 1時間 でつくる ECサイト。

Transcript

1. C L A U D E C O D E / L I V E B U I L D 2 0 2 6 . 0 5 . 0 7 0 1 / 6 0 M I N U T E S · O N E T E R M I N A L · O N E S I T E ࿨՛ࢠ EC Claude CodeͰɺ 1࣌ؒ Ͱͭ͘ Δ ECαΠτɻ SUBJECT ࿝ฮɾ࿨՛ࢠళ STACK Claude Code · Pencil · Stripe · GCP DURATION 60 min, end-to-end
2. ࣗ ݾ ঺ հ 0 2 / 1 7 0 2 S P E A K E R ຊ೔ͷ࿩͠खɻ ୅ ද औ క ໾ / C E O ୔Լ ୎໵ S A W A S H I T A T A K U Y A גࣜձࣾ FAR B U S I N E S S γεςϜ։ൃɾΞϓϦ։ൃ R E C E N T Claude Code Agent TeamsΛ׆༻ͨ͠ ࣄۀ্ཱͪ͛ͷษڧձɾ൐૸ ࢧԉ H O B B Y όΠΫπʔϦϯά / ϐβɾύϯ࡞Γ P R O D U C T S Έ·΋Γϊʔτ έΞࣄۀऀͱՈ଒Λͭͳ͙ հޢΈ·΋ΓΞϓ Ϧ PronouncePro ӳޠͷϦϯΩϯάɾ ൃԻνΣοΫಛԽΞϓϦ
3. ຊ ೔ ͷ ΰʔϧ 0 3 / 1 7 0 3 O B J E C T I V E اը͔Βܾࡁɾެ։ ·Ͱɺ ͢΂ͯ Claude Codeܦ༝Ͱ ɻ ίʔυΛॻ࣌ؒ͘Ͱ͸ͳ͘ɺ ҙࢥܾఆ͢Δ࣌ؒ ʹ ूத͢Δɻ λʔϛφϧҰຕ͔Βɺ঎඼ઃܭɾσβΠ ϯɾܾࡁɾσϓϩΠ·ͰΛҰؾ௨؏Ͱ࣮ԋ͠·͢ɻ B Y T H E N U M B E R S 60 min اը͔Βຊ൪σϓϩΠ·Ͱ 4 steps Agents → Design → Pay → Deploy 1 terminal ͢΂ͯClaude Codeܦ༝Ͱૢ࡞
4. શ ମ ϑ ϩ ʔ 0 4 / 1 7 0 4 O V E R V I E W اը → σβΠϯ → ܾࡁ → ެ։ɺ4εςοϓɻ ֤εςοϓ͸ಠཱͨ͠πʔϧʗMCPαʔόʔʹରԠɻClaude Code͕ϋϒͱͯ͠શମΛͭͳ͗·͢ɻ STEP 01 · 15min اըཱҊ Agent TeamsͰࢢ৔Ϧαʔνɺ঎඼Ωϟ ονίϐʔɺαΠτߏ੒ҊΛฒྻੜ੒ɻ → Claude Agents SDK STEP 02 · 20min σβΠϯੜ੒ Claude Code͔ΒPencil΁ࢦࣔ͠σβΠ ϯΛੜ੒ɻ࠶ͼClaude CodeͰ࣮૷ʹམ ͱ͠ࠐΉɻ → pencil.dev / Claude Code STEP 03 · 15min ܾࡁߏங Stripe MCPαʔόʔܦ༝Ͱϓϥϯɾ ྉۚΛੜ੒͠ɺαΠτʹ௚઀࣮૷ɻ → Stripe MCP STEP 04 · 10min ຊ൪σϓϩΠ ϩʔΧϧಈ࡞Λ֬ೝ͠ɺGCP ʢCloud Runʣʹຊ൪؀ڥΛߏஙɻ → Google Cloud
5. [ photo ] ࿝ฮ࿨՛ࢠళ ళߏ͑ʗ঎඼ࡱӨ 0 5 C A S E S T U D Y ࿝ฮɾ࿨՛ࢠ ళ S H I N I S E · W A G A S H I · E C C AT E G O RY ࿨՛ࢠɾΪϑτɾقઅ঎඼ TA R G E T 30ʙ60୅ɺଃ౴धཁ͕த৺ G O A L ళ಄٬ΛΦϯϥΠϯఆظศʹస׵ B R A N D "ஸೡʗقઅײʗख࢓ࣄ" ͷࡾޠ
6. S T E P 0 1 0 6 / 1 7 S T E P 0 1 / 0 4 Agent TeamsͰ اըΛཱͯΔɻ 3ମͷΤʔδΣϯτ͕ฒྻͰಈ͖ɺࢢ৔ɾίϐʔɾߏ੒ΛҰؾʹग़͢ɻਓؒ͸ϨϏϡ ʔʹઐ೦ɻ Ⅰ
7. S T E P 0 1 · ࢢ ৔ Ϧ α ʔ ν 0 7 / 1 7 0 7 M A R K E T R E S E A R C H 3ମͷΤʔδΣϯτ͕ɺฒྻͰಈ͘ɻ A G E N T _ 0 1 · R E S E A R C H E R ࢢ৔Ϧαʔν୲౰ ࿨՛ࢠECࢢ৔ͷن໛ɾओཁϓϨΠϠʔɾՁ֨ଳɾقઅ धཁΛௐࠪɻ → market_report.md A G E N T _ 0 2 · C O P Y W R I T E R ίϐʔ୲౰ ϒϥϯυτʔϯఆٛɺώʔϩʔίϐʔɺ঎඼3఺ͷΩϟ ονίϐʔΛੜ੒ɻ → copy.json A G E N T _ 0 3 · A R C H I T E C T αΠτߏ੒୲౰ ৘ใઃܭɺϖʔδߏ੒ɺߪೖಋઢɺඞཁίϯϙʔω ϯτͷҰཡԽɻ → sitemap.yaml $ claude agents run --team wagashi-launch --parallel ▸ researcherdone (2m 14s) → market_report.md ▸ copywriterdone (1m 48s) → copy.json ▸ architectdone (2m 03s) → sitemap.yaml team finished in2m 14s· 3 artifacts ready for review
8. S T E P 0 1 · ग़ ྗ ෺ 0 8 / 1 7 0 8 O U T P U T ΩϟονίϐʔͱɺαΠτߏ੒ͷࠎࢠɻ H E R O C O P Y قઅΛɺ ͻͱޱʹด͡ࠐΊͯɻ S U B C O P Y ඦ೥ଓ͘ख࢓ࣄΛɺ ͋ͳͨͷ৯୎΁ɻ SITEMAP.YAML pages: - home# قઅͷओ՛ࢠɾ෺ޠ - products# ҰཡʗΧςΰϦ - product/[id] # ৄࡉɾଃ ౴ઃఆ - subscription# قઅͷఆظศ - about # ళओͷݴ༿ - cart / checkout components: - SeasonHero, ProductCard, GiftPicker, StoryBlock, SubscriptionPlan
9. S T E P 0 2 0 9 / 1 7 S T E P 0 2 / 0 4 Pencil.devͰ σβΠϯʹམͱ͢ɻ Claude Code͔ΒPencilʹࢦࣔͯ͠σβΠϯΛੜ੒ɻͦͷσβΠϯΛ࠶ͼClaude Codeʹ ౉͠ɺECαΠτͱ࣮ͯ͠૷͢Δɻ Ⅱ
10. S T E P 0 2 · P E N C I L . D E V 1 0 / 1 7 1 0 D E S I G N → C O D E PencilͰ࡞ΓɺClaude CodeͰ࣮૷͢Δɻ 01 Claude Code͔ΒPencil΁ࢦࣔ ߏ੒ҊɾϒϥϯυτʔϯΛͦͷ··౉͠ɺσβΠϯΛੜ੒ͤ͞Δɻ 02 PencilͰσβΠϯ࡞੒ HomeʗProductsʗDetailʗCheckoutΛը໘୯ҐͰग़ྗɻ 03 σβΠϯΛClaude Codeʹ໭͢ ׬੒ͨ͠PencilσβΠϯΛࢀর͠ͳ͕Βίʔυ΁མͱ͠ࠐΈɻ 04 ECαΠτͱ࣮ͯ͠૷ React + TailwindͰ࣮૷ɺ঎඼ɾΧʔτɾνΣοΫΞ΢τಋઢΛ઀ଓɻ pencil.dev "Dream on canvas. Land in code." → Claude Code࿈ܞ
11. S T E P 0 3 11 / 1 7 S T E P 0 3 / 0 4 Stripe MCPͰ ܾࡁΛ૊Ήɻ APIΩʔΛ౉͚ͩ͢ͰɺϓϥϯɾྉۚɾWebhook·ͰࣗಈߏஙɻαΠτʹ͸ࠩ͠ࠐ Ή͚ͩɻ Ⅲ
12. S T E P 0 3 · ϓ ϥ ϯ ઃ ܭ 1 2 / 1 7 1 2 P L A N S & P R I C I N G ϓϥϯͱྉۚΛɺClaude Codeʹ࡞ΒͤΔɻ Stripe MCPαʔόʔܦ༝Ͱɺ঎඼ɾϓϥϯɾྉۚɾ੫ઃఆΛ·ͱΊͯੜ੒ɻख࡞ۀͷμογϡϘʔυૢ࡞͸ θϩɻ S I N G L E ୯඼ߪೖ ¥1,800ʙ / 1ശ ओ՛ࢠɾׯ՛ࢠͷ୯඼ ͷ͠ʗแ૷Φϓγϣϯ ήετߪೖରԠ F E AT U R E D قઅͷఆظศ ¥4,800 / ݄ ຖ݄ɺ०ͷ࿨՛ࢠΛݫબ ళओ͔ΒͷҰචಉ෧ ͍ͭͰ΋ٳࢭɾղ໿Մ G I F T ଃ౴ηοτ ¥6,800ʙ / ηοτ ԽহശೖΓΪϑτ ϝοηʔδΧʔυରԠ ࢦఆ೔഑ૹ products.create prices.create tax_rates.create webhooks.attach
13. S T E P 0 3 · ࣮ ૷ 1 3 / 1 7 1 3 I M P L E M E N TAT I O N ࡞ͬͨϓϥϯΛɺαΠτʹࠩ͠ࠐΉɻ 01 MCPͰprice_idΛऔಘ ੜ੒ࡁΈϓϥϯͷIDΛͦͷ··ࢀরɻ 02 SubscriptionPlan΁ྲྀ͠ࠐΈ PencilͷίϯϙʔωϯτʹIDΛඥ෇͚ɻ 03 Checkout SessionΛൃߦ Server ActionͰܾࡁURLΛੜ੒ɻ 04 WebhookͰ஫จ֬ఆ checkout.session.completedΛDB൓өɻ $ claude > stripe MCPܦ༝ͰʮఆظศʯϓϥϯΛ࡞ͬͯɺ طଘͷSubscriptionPlanʹඥ෇ ͚ͯɻ ▸ tools.stripe.products.create name: "قઅͷఆظศ" ✓ ▸ tools.stripe.prices.create unit_amount: 4800, interval: month →price_1Q8f...kT ✓ ▸ edit src/lib/plans.ts + SUBSCRIPTION_PRICE_ID = price_1Q8f...kT ▸ edit components/SubscriptionPlan.tsx + onClick → createCheckoutSession() done · 4 files changed
14. S T E P 0 4 1 4 / 1 7 S T E P 0 4 / 0 4 GCPʹɺ ຊ൪σϓϩΠɻ ϩʔΧϧͰಈ࡞֬ೝ → Cloud Run΁ɻVercelʗFirebase΋બ΂Δ͕ɺຊ೔͸GCPྫ Ͱɻ Ⅳ
15. S T E P 0 4 · σ ϓ ϩ Π ߏ ੒ 1 5 / 1 7 1 5 D E P L O Y M E N T ϩʔΧϧ → Cloud Runɺ3ϊʔυͰ׬݁ɻ Claude Code͕ gcloud CLIΛ௚઀ୟ͖ɺίϯςφϏϧυ͔ΒσϓϩΠ·Ͱ࣮ߦɻ L O C A L ։ൃ؀ڥ npm run dev localhost:3000 → B U I L D Artifact Registry Docker image push → S E RV E Cloud Run auto-scale · HTTPS custom domain OTHER OPTIONS · Vercel Firebase Hosting ຊ೔͸GCPྫͰ࣮ԋ
16. λ ΠϜϥ Π ϯ 1 6 / 1 7 1 6 T I M E L I N E 60෼ͷɺ಺༁ɻ T I M E S T E P W H AT TO O L 00 :00 S T E P 0 1 Agent Teamsىಈ / ࢢ৔ɾίϐʔɾߏ੒ claude agents run 15 :00 S T E P 0 2 Claude Code → PencilͰσβΠϯੜ੒ → ࣮૷ pencil.dev / Claude Code 35 :00 S T E P 0 3 Stripe MCPͰϓϥϯߏங / αΠτ࣮૷ stripe MCP 50 :00 S T E P 0 4 ϩʔΧϧಈ࡞֬ೝ / Cloud RunσϓϩΠ gcloud run deploy 60 :00 D O N E ຊ൪URLެ։ · ஫จड෇։࢝ → shop.example.com
17. · ͱ Ί 1 7 / 1 7 1 7 S U M M A R Y λʔϛφϧҰຕͰɺ ళ͕Ͱ͖Δ࣌ ୅ɻ Claude CodeΛ࣠ʹɺAgentsɾPencilɾStripe MCPɾGCPΛͭͳ͙ɻ اը͔Βܾࡁɾެ։·ͰΛɺ60 ෼ͷͻͱͭͷ࡞ۀͱͯ͠ѻ͑Δɻ S T E P 0 1 Agent TeamsͰ اըΛཱͯΔ S T E P 0 2 PencilͰ σβΠϯʹམͱ͢ S T E P 0 3 Stripe MCPͰ ܾࡁΛ૊Ή S T E P 0 4 GCPʹ ຊ൪σϓϩΠ