Ship 26 NYC - ワークショップ - initからデプロイまで30分で実施
VVercel
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00皆さん、こんにちは。ようこそ。私は Stripe のエンジニアリングマネージャー、ゴードン・ディグスです。
00:00:08同じく Stripe でエンジニアをしているコリン・レンです。
00:00:11素晴らしい。さて、今回のハッカソンでは、ゼロからデプロイ可能なアプリケーションを構築していきます。
00:00:17様々なサービスプロバイダーを使い、わずか30〜40分ほどで仕上げる予定です。ですが、その前に
00:00:24参加される皆さんが作業に必要な最低限の環境を整えているか確認させてください。まずノートPCが必要です。
00:00:29Claude Code や Codex、あるいは Cursor のような
00:00:35AIエージェント開発環境が必要です。スマホやタブレットでは厳しいので、もしノートPCを
00:00:43お持ちでない場合は、気楽に見学してください。それも大歓迎です。さて、最初の10分ほどは
00:00:51Stripe Projects について説明し、アイデアの提案や CLI のセットアップを行います。
00:00:56その後の30分間で、エージェントを使ってゼロからデプロイまでアプリを構築し、
00:01:02Stripe Projects でサービスをプロビジョニングします。最後にデプロイしたアプリを
00:01:09リーダーボードに提出し、気に入ったアプリにお互い投票します。勝者も決まるかもしれません。
00:01:16ではまず、Stripe Projects の概要から始めましょう。
00:01:22これは Stripe の新製品で、開発者やエージェントが迅速かつ安全に
00:01:28インフラをプロビジョニングできるようにするものです。Stripe CLI のプラグインであり、
00:01:36ホスティング、データベース、ドメイン名などのサービスを手軽に作成できます。
00:01:44ほとんどのサービスには無料枠があるので、今回のハッカソンでお金を払う必要は必ずしもありません。
00:01:51ですが有料サービスを使う場合でも、Projects が Stripe を通じて支払いを一括化するため、
00:01:59すべてのクラウドサービスを単一の支払い方法で管理できます。プロバイダーと接続すると、
00:02:09Projects は関連する環境変数をローカル環境とクラウドの両方に保存します。
00:02:15そのため、他のマシンからプルして利用することも可能です。ワークショップでは無料枠だけで十分対応できます。
00:02:21現在提供中のプロバイダーカテゴリはこちらです。コリン、少しQRコードにかぶっているかも。
00:02:28このようなカテゴリを用意しています。全プロバイダーの一覧を確認するには、
00:02:35CLI で 「stripe projects catalog」 を実行するか、このQRコードのページをご覧ください。
00:02:40いいですね。すでに作りたいプロジェクトのアイデアがある方もいるかもしれません。
00:02:47素晴らしいことです。まだ決まっていない方のために、Projects で構築された
00:02:52アプリの例をいくつかご紹介します。約30分で現実的に何が構築・デプロイできるかの
00:02:58目安になるため、制限時間に対して計画を詰め込みすぎるのを防げます。
00:03:04これらは Stripe の社内メンバーが Projects の初期テストで作成したサンプルアプリです。
00:03:10すべて実際にデプロイされており、多くがデータベースや認証プロバイダー、ホスティングを利用しています。
00:03:17まず GitHub 分析ダッシュボード。GitHub API からデータを取得するカスタムダッシュボードです。
00:03:22ホスティング、データベース、認証を使用しています。次は 「Happiness Jar」。
00:03:27一日を通して自分へメモを残し、ビンを幸福感で満たしていく素敵なアプリです。
00:03:33認証、データベース、ホスティングを使っています。続いて 「My Garden」。
00:03:40植物を記録し水やりの時期を通知してくれるガーデニング用アプリで、ホスティングと DB を使っています。
00:03:45最後に 「Tiny Tails」。エージェントが幼児に合った絵本をテーマ別に推薦してくれるアプリです。
00:03:52こちらは LLM の API とホスティングを使用しています。このように、時間内に完成できる
00:03:57規模感をイメージしてみてください。プロジェクトのアイデアが決まったら、
00:04:02残りの時間でエージェントを使って構築を進めていきます。エージェントを動かす際は
00:04:08適切なプロンプトから始めることが重要です。特にどのようなサービスを使いたいかを明記しましょう。
00:04:13「デプロイしたい」「データベースを使いたい」などと指示します。使いたい具体的なサービス名を
00:04:17指定することもできます。「ホスティングに Vercel を使いたい」と伝えるか、あるいは
00:04:21エージェントに Stripe Projects のカタログから選ばせることも可能です。
00:04:26「DB が欲しい」と頼めば、Stripe Projects が選択して初期化してくれます。
00:04:32そしてワークショップの最後に、ゴードンが言ったように 「projects.dev」 のリーダーボードへ
00:04:38作品を提出し、お互いのアプリに投票します。プロジェクトを共有するだけで
00:04:45Stripe クレジットが進呈されます。では、ゴードンから Stripe Projects の始め方を案内します。
00:04:50それでは始めていきましょう。このワークショップを完了するには3つの要素が必要です。
00:04:58PCも含めれば4つですが、AIエージェント環境、Stripe アカウント、
00:05:05そして Stripe CLI です。参加者ガイドを用意していますので、ぜひスキャンしてください。
00:05:11今後のスライドに含まれるすべての情報が手元で確認できるようになります。
00:05:15このQRコードのスキャンをお勧めします。少し時間を取りますね。
00:05:21登壇中に一斉にスマホを向けられると圧倒されますが、
00:05:23自分でお願いしたことなので問題ありません。Stripe アカウントをまだお持ちでない方は、
00:05:30無料で作成できますのでこちらを。[dashboard.stripe.com/register](https://www.google.com/search?q=https%3A%2F%2Fdashboard.stripe.com%2Fregister) に移動します。
00:05:38必要な方はスキャンしてください。少し待ちます。
00:05:47次に必要なのは、Stripe Projects プラグイン付きの Stripe CLI です。
00:05:52画面にある便利な npx コマンドを実行してください。追加するスキルを聞かれた際は、
00:05:58「Stripe best practices」 と 「Stripe projects」 を選択したことを確認してください。
00:06:05そして、エージェント環境で Stripe CLI をインストールするためのプロンプト例がこちらです。
00:06:13Mac に直接インストールする場合は 「brew install」 を、Windows なら 「scoop」 を利用できます。
00:06:23私は Windows で開発しないため scoop は使ったことがありませんが、
00:06:27Homebrew は素晴らしいツールです。自信を持ってお勧めできます。
00:06:33コマンドが完了すれば、Stripe Projects プラグインの導入は完了です。
00:06:40正しくインストールされたか確認するには、画面のように
00:06:44「stripe projects --help」 を実行してください。セットアップで困っている方はいますか？
00:06:51CLI の準備にもう少し時間が必要な方は手を挙げてください。あと1、2分待ってから
00:06:57次に進みましょう。「stripe projects --help」 を実行して
00:07:02ヘルプメッセージが表示されれば準備完了です。
00:07:08手苦戦している方がいれば、後ほど巡回してサポートしますので焦らなくて大丈夫です。
00:07:13ご安心ください。
00:07:14無事に完了したでしょうか。うまくいかない場合も、後で手を振っていただければ喜んでお手伝いします。
00:07:26インストール後、プロジェクトを作成したいディレクトリで 「stripe projects init」 を
00:07:35実行します。任意でプロジェクト名を指定できますが、省略した場合はディレクトリ名が
00:07:40使用されます。この init コマンドを実行すると、いくつかの重要なファイルが作成されます。
00:07:45「state.json」 と 「state.local.json」 を含む 「.projects」 フォルダが生成されます。これらは
00:07:53使用しているアカウント、プロバイダー、リソース情報の真実のソース（Source of Truth）となります。
00:07:59また、Stripe Projects CLI のスキルファイルも生成されます。これはエージェントに対して
00:08:08Stripe Projects CLI の使い方を教えるための指示ファイルです。プロジェクトにサービスを追加すると、
00:08:14それらのシークレットキーが取得され 「.env」 ファイルへ追加されます。さらに
00:08:24「.agent/skills」 ディレクトリに各サービスのスキルがダウンロードされ、エージェントがサービスを
00:08:31最大限に活用できるよう学習します。これで開発を始める準備は万全です。ゴードン、どうぞ。
00:08:37ありがとうございます。では皆さんの番です。開発を始めてください。プロジェクトの構築時間は
00:08:45約30分間です。Stripe Projects について質問があれば気軽にお声がけください。
00:08:50手を挙げていただければ、環境構築のフォローに向かいます。
00:08:57画面にコマンド一覧を表示しておきます。これらは Stripe Projects で利用可能です。
00:09:03「init」 や、プロバイダーを確認する 「catalog」 については説明しましたね。「add」 で追加し、
00:09:10「open」 でプロバイダーのダッシュボードを開きます。環境変数の同期機能もあります。
00:09:19使用費用を確認するコマンドも備わっています。そして終盤、
00:09:24作品を共有する準備ができたら 「stripe project share」 を実行します。
00:09:29選択したプロバイダーの構成（スタック）を共有できるコマンドです。
00:09:34アカウント ID が必要な場合もここから確認できます。ご参加ありがとうございます。
00:09:40残り時間は約30分です。作り、デプロイし、質問があれば手を挙げ、
00:09:46完成品を提出してください。スライドを参加ガイドのページに戻しておきます。
00:09:55スライド資料の全情報が載っています。開発中のアプリのアイデアを
00:10:01共有してくれる方はいますか？作業の手を10秒ほど止めて
00:10:08教えていただけると嬉しいです。
00:10:12はい、私が作ろうと考えているのは、以前個人で挑戦したことがあるのですが、
00:10:22今回のツールで再挑戦したいテーマです。柔術のような武道の
00:10:31練習相手（スパーリングパートナー）を探すアプリです。世の中にまだないサービスだと感じていました。
00:10:36例えば普段の道場が休みだったり、週末や旅行先で稽古がしたいのに
00:10:40どこも閉まっているような状況です。周辺に稽古したい人がいても知る術がありませんが、
00:10:43このアプリがあれば、同じく練習相手を探している人とマッチングして
00:10:48一緒に練習できるようになります。これが私のアイデアです。挑戦してみます。
00:10:52素晴らしいですね！応援しています。最高の例ですね。
00:10:56Webホスティング、データベース、認証、
00:11:00そしてドメイン名も必要になりますから。実に素晴らしい構成です。
00:11:04最高です。Stripe Projects や Stripe 全般について質問があれば、
00:11:08すぐ外のブースにいますのでお越しください。コリンもそこにいるはずです。
00:11:12ノベルティグッズなども用意していますので、気軽にお話ししましょう。お越しいただき
00:11:17ありがとうございました。Stripe Projects を楽しんでいただければ幸いです。皆さん、ありがとうございました。