はじめに
お疲れ様です。矢儀 @yuki_ink です。
こちらのAWS公式ハンズオン「Cline with Amazon Bedrock ワークショップ」を体験する機会があったので、布教させていただきます。
ハンズオンで構築する環境の構成イメージはこちら。
Cline は、AI を活用してコーディングを支援する OSS のエージェントです。
まだAIコーディングエージェントを利用されたことのない方に、その可能性を体験いただけるようなハンズオンでした。
このハンズオンは2025 年 4 月 8 日に AWS Startup Loft Tokyo で開催された「Coding Agent at Loft #1 ~ Cline with Amazon Bedrock 爆速開発体験ハンズオン ~」の内容とほぼイコールかと思います。
このイベントで投影された資料などがこちらで公開されているので、是非ご覧ください。
【開催報告&資料公開】Coding Agent at Loft #1 ~ Cline with Amazon Bedrock で 爆速開発体験ハンズオン ~
セットアップ
まず、Claude 3.7 Sonnetへのアクセスを許可。
続いて、IAMユーザーを作成し、Clineで利用するアクセスキーを取得します。
ClineをVSCodeに入れて、Bedrockの認証情報を設定していきます。
ちゃんと指摘してるw
カスタマイズ設定として .clinerules についても触れられています。
そもそも .clinerules とは。
- 役割: 絶対に守ってほしい大原則 を書く。
- 置き場所: プロジェクト直下 or
~/.clinerules/- ポイント:
- Git でバージョン管理できる → ルールも PR レビュー対象に。
- ファイルが 1KB なら読み込みも爆速。
- 逆に長文化すると応答遅延の元凶⚠️
✏️ Tips: 複数ファイルに分けたいときは .clinerules/ ディレクトリを作って 01_base.md, 02_security.md…みたいにアルファベット順に並べると良き。
より実践的な記事はこちら。
せっかくなので ~/.clinerules/workshop.md というファイルで作ってみました。
タスク1: ToDo アプリケーションの作成
Clineにこちらのプロンプトを与えます。
html と javascript を利用して ToDo を管理する Web アプリケーションを作成してください。
javascript フレームワークは利用しません。
PlanモードとActモードの違いはこちらを参照。
今回はActモードで進めます。
ひと言で言うと、Cline との作業を 「計画」 と 「実行」 の 2 つのステップに分けるためのモードです。
- Planモード: Cline と一緒にじっくり 計画 を立てるモード
- Actモード: 立てた計画に基づいて Cline に 実行 してもらうモード
アプリができました！！
タスク2: テトリス アプリケーションの作成
続いてはこちらのプロンプト。
HTML、CSS、JavaScriptを用いてテトリスを作成してください
できた！
丁寧にゲームオーバーの画面まで、、、
タスク3: REST API の作成
続いてはこちらのプロンプト。
Pythonを使ったREST APIを実装したWebアプリケーションを作成してください。APIには、以下の要件を満たす必要があります。
- 商品(ID, 名前、説明、価格)が登録できること
- IDによる商品の編集ができること
- 商品の一覧が取得できること
- IDによる特定の商品が取得できること
- IDによる商品の削除ができること
是非実際に試してみてください！
終わりに
以上、AWS公式のClineのハンズオンをやってきました。
人間はAIのアクションを承認するだけ…😅
ちょっと複雑な気持ちにもなりました笑
Clineというワードを聞いたことはあるけど、それが何者で、何ができるのかわからない…という状態だった私にはめちゃくちゃ刺さる体験でした。
同じような状況の方、是非このハンズオンを使ってClineに入門いただければと思います。