Zenn
🚀

🚀 AI駆動で爆速アプリ開発！3分でできる画像キャプション生成アプリ【Cursor + Cline + OpenRouter】

に公開
AI
Node.js
Playwright
Cursor
Cline
tech

はじめに

⚡ 所要時間はたったの3分！

AIの力を使えば、従来何時間もかかっていたアプリ開発が驚くほど短時間で完了します。まずは、その衝撃的な開発スピードをご覧ください。

AIによる爆速アプリ開発の様子
https://www.youtube.com/watch?v=NfiANCh-dfE

本記事では、上記の動画で実演している「画像をアップロードするとプレビューを表示し、AIが自動でキャプションを生成するアプリ」の作成方法を詳しく解説します。最終的にはE2Eテストまで含めた完成形を目指します。

完成したアプリの動作確認
https://www.youtube.com/watch?v=id3OaKEfIr8

従来のアプリ開発では、フロントエンド・バックエンド・テストコードを書くのに何時間もかかっていましたが、AIの力を借りることで実用的なアプリケーションを驚くほど短時間で構築できるようになりました。

記事の目的

この記事を読むと、以下のツール・サービスを活用して、アプリ開発からE2Eテストまで一通りの工程をAIで爆速に進められるようになります：

  • Cursor: AI統合開発環境
  • Cline: VSCode拡張のAIアシスタント
  • OpenRouter: 複数のAIモデルを統一API経由で利用できるサービス
  • Playwright: E2Eテストフレームワーク
  • Google AI Studio: Gemini APIキーの取得に使用

それぞれの詳細な説明は省きますが、Cursorは従来のエディタにAI機能を統合した開発環境、ClineはAIがコードを自動生成・修正してくれる拡張機能、OpenRouterは複数のAIプロバイダーのモデルを一括で使えるプラットフォームです。

これらを使い、実際にAI駆動でサンプルアプリを構築していきます。AIと開発の感覚をつかむことが本記事の目的です。

事前準備

以下の準備を済ませておいてください。

AIプロバイダーのキーを取得

例：Anthropic / OpenAI / Google Gemini / AWS Bedrock

私は OpenRouter を使用し、AIモデルは Gemini 2.5 Pro プレビュー を選びました。
OpenRouterは、Google・Anthropic・OpenAI など複数のプロバイダーのモデルを 一括で使える 上に、無料枠も充実しているため、非常におすすめです。

Cursorのインストール

公式サイトからダウンロードしてインストールしてください。

Clineのインストール

公式ドキュメントに従ってCursor拡張機能としてインストールします。

Google AI StudioでGemini APIキーを取得

APIキー取得ページでAPIキーを取得してください。サンプルコードで使用します。

アプリ作成

今回作成するアプリ

画像をアップロードするとプレビューを表示し、AIが自動でキャプションを生成してくれるアプリです。
さらに、PlaywrightでE2Eテストを実行し、テスト結果のスクリーンショットも取得します。

1. プロジェクトディレクトリの作成

プロジェクト用のディレクトリを作成し、Cursorで開きます。
私の場合は ai-caption-app という名前にしました。

mkdir ai-caption-app
cd ai-caption-app
mkdir tests

E2Eテスト用の画像 tests/sample.jpg も配置しておきます。
この画像はPlaywrightのテストで使用されます。

2. Clineを開く

Cmd/Ctrl + Shift + P を押してコマンドパレットを開き、Cline: Open In New Tab と入力して、エディタ内にClineをタブで開きます。

Clineを開く手順

3. Clineの設定

3-1. AIモデルの設定

私の設定では、OpenRouterをAIプロバイダーとして選び、Gemini 2.5 Pro プレビューを使用しました。
OpenRouterはGoogle、Anthropic、OpenAIなど複数のプロバイダーのモデルをまとめて使え、無料枠もあるのでおすすめです。

AIモデルの設定画面

3-2. モードについて

Clineには Planモード と Actモード があります。
今回はシンプルなアプリなので、初めからActモードで実装を進めます。
通常はPlan → Actの流れが一般的ですが、お好みで調整してください。

モード設定画面

詳しくはこちら：PlanとActについて

  • Actモード：指示に対し即座にコードを実装／修正します
  • Planモード：まず計画を立ててから実装を行います

3-3. Auto-approveの設定

Auto-approveは、AIの提案を自動的に承認して進行させる機能です。以下の2つだけを有効にします：

  • Read project files: 現在のワークスペース内のファイル読み取りを許可
  • Edit project files: ワークスペース内のファイル編集を許可

※ワークスペース外のファイルにはアクセスさせません。

Auto-approve設定画面

設定可能なオプションはこちら：Auto-approveオプション

4. ./.clinerules を作成

このプロジェクトのガイドラインを ./.clinerules に記載します。
これにより、Clineに対してプロジェクトの技術スタックや設計方針を明確に伝えることができます。

# プロジェクト概要

## 技術スタック
- フロントエンド: Vanilla JavaScript, HTML, CSS（外部ライブラリなし）
- バックエンド: Node.js, Express
- 画像アップロード: multer
- AI連携: @google/generative-ai
- モデル: gemini-2.5-flash（画像入力対応）
- 環境変数: dotenv
- E2Eテスト: Playwright

## プロジェクト構造
- /public: フロントエンド静的ファイル
- /: server.jsなどのバックエンド
- /tests: Playwrightのテストファイル

## コーディングガイドライン

### 一般
- コードはクリーンで読みやすく
- fetch APIでフロントとバックエンドを通信
- async/await＋適切なエラーハンドリング
- APIキーは `.env` に格納（ハードコーディングしない）

### 命名規則
- 変数・関数: camelCase
- 定数: UPPER_SNAKE_CASE
- ファイル名: 意味のある命名（例：imageHandler.js）

## 編集禁止ファイル
- "!.env"
- "!node_modules/"

5. いよいよAIに開発を依頼！

Clineのチャット欄に以下のように入力してください：

画像をアップロードするとプレビューを表示し、AIが自動でキャプションを生成するアプリを作成してください。

指示を送信すると、AIが即座に以下のような流れで開発を進めます：

  1. プロジェクト構造の提案: ファイル構成やディレクトリ構造の計画
  2. package.jsonの作成: 必要な依存関係の定義
  3. バックエンドの実装: Express.jsサーバーとAPI作成
  4. フロントエンドの実装: HTML、CSS、JavaScriptファイルの生成
  5. 環境変数の設定: .envファイルの作成とAPIキー設定
  6. 動作確認: サーバー起動

AIは./.clinerulesで指定した技術スタックに従い、コードの品質や設計方針を守りながら開発を進めます。
各ステップでファイルを自動生成し、必要に応じて説明や確認を求めてきます。

実際の開発プロセスを収録した動画

以下の動画では、上記の指示を入力してからアプリが完成するまでの一連の流れをリアルタイムで確認できます。
AIがどのような判断を下し、どのようにコードを生成していくかをご覧ください。（※記事冒頭でもご紹介した動画と同じ内容です）

https://www.youtube.com/watch?v=NfiANCh-dfE

6. アプリ完成！

あっという間に、アプリが完成しました。

AIが自動的に以下のファイルを生成してくれます：

  • package.json: 依存関係の定義
  • server.js: Express.jsを使ったバックエンドサーバー
  • public/index.html: フロントエンドのHTML
  • public/style.css: スタイルシート
  • public/script.js: フロントエンドのJavaScript
  • .env: 環境変数ファイル（Gemini APIキーを格納）

完成したアプリのデモ動画

以下の動画で、作成されたアプリの実際の動作をご確認いただけます。（※記事冒頭でもご紹介した動画と同じ内容です）

https://www.youtube.com/watch?v=id3OaKEfIr8

7. PlaywrightでE2Eテスト実施

まず、Clineのチャット欄に以下の指示を入れてください。

PlaywrightでE2Eテストを作成し、tests/sample.jpgをアップロードしてキャプション生成を確認してください。結果のスクリーンショットは、内容がわかるファイル名で保存してください。

テスト実行の様子はこちらの動画でご確認いただけます
https://www.youtube.com/watch?v=PtknyFIgSes

テスト実行後は、以下のような結果が得られます：

ターミナル出力例

Running 1 test using 1 worker

  ✓  1 tests\e2e.spec.js:4:1 › E2E test for AI caption generation (9.1s)

  1 passed (10.5s)

スクリーンショット

Playwrightが自動的にスクリーンショット tests/caption-result.png を生成します。
このスクリーンショットにより、画像アップロードからキャプション生成までの一連の流れが正常に動作していることを視覚的に確認できます。

E2Eテスト実行結果のスクリーンショット

E2Eテスト結果

上記のスクリーンショットでは、以下の動作が確認できます：

  • 画像ファイルのアップロード成功
  • プレビュー画像の正常表示
  • AIによるキャプション生成の完了
  • アプリケーション全体の正常動作

感想

実際にAI駆動開発を体験してみて、以下のような気づきがありました：

AIが生成したコードをキャッチアップしていない状態で使うと、後から修正する際の認知コストが激増し、逆に疲労感が増しました。
単純にAIに丸投げするだけでは、結果的に効率が悪くなってしまいます。

エンジニアがプロンプトで開発する場合、あらかじめ「処理の流れ」や「設計」を頭の中で描いておき、それをAIに正確に指示することが重要だと感じました。
技術選択の理由、アーキテクチャの方針、コーディング規約などを明確にしておくことで、AIがより適切なコードを生成してくれます。

そうすることで、出力されるコードの品質が高まり、レビューやキャッチアップもスムーズになります。
結果として、「自分でも書ける」状態であることが、良いプロンプトを書くための前提条件だと実感しました。

AI駆動開発は確かに高速ですが、エンジニアの知識と経験があってこそ真価を発揮するツールだと言えるでしょう。
適切に活用すれば、開発効率を大幅に向上させることができる強力な手法です。

まとめ

この記事では、Cursor、Cline、OpenRouter、Playwrightを組み合わせて、AI駆動で画像キャプション生成アプリを爆速開発する方法を紹介しました。

AI駆動開発のポイント：

  1. 適切なツールの組み合わせ: 各ツールの特性を理解して組み合わせる
  2. 明確な指示: AIに対して具体的で構造化された指示を与える
  3. エンジニアの知識: AIを活用するためには基礎知識が不可欠
  4. 段階的な検証: 各段階でテストを実行して品質を担保する

AI技術の進歩により、アプリケーション開発のハードルは大幅に下がりました。
しかし、それと同時にエンジニアには「AIを適切に活用する能力」が求められるようになったと言えるでしょう。

皆さんもぜひこの手法を試して、AI駆動開発の可能性を体験してみてください！

GitHubで編集を提案

Discussion