Cursorプロジェクト実践-01-画面指定位置のスクリーンショットをGIFアニメーションに変換

プロジェクト説明

これはCursorを使った実践プロジェクトで、Python言語を使用してスクリーンショットをGIF画像に変換するものです。結果の表示やサンプル作成に利用できます。

結果表示

screentogif_20250706_171615.gif

事前準備

  • Cursor

    • バージョン：1.2.1
    • cursor rules : Cursor Rules
    • agent, claude-4-sonnet-thinking

  • 全体フロー

    • cursorルール設定→要件記述→cursorコーディング→gitバージョン管理→デバッグ出力

プロジェクト手順

  1. 要件を整理し、cursorにプロジェクトディレクトリを生成させる。要件は以下の通り：
## スクリーンショットをGIF画像に変換するPythonプログラムを作成
1. プログラムは画面位置（マウスドラッグで選択）を指定してスクリーンショットを撮り、webp形式で保存できる
2. 画像を圧縮しGIF画像を生成する
3. 画像圧縮率、フレームレート、保存パスを設定するインターフェースがある

## 要件
1. 必要最小限の機能のみで、余計な機能は含まない
2. Macコンピュータを使用しているため、画面のスケーリング比率に注意

  1. プロジェクトディレクトリを決定し、以下の要求を入力：

    Analyze the requirement.md documents and start project writing

    image.png

  2. プロジェクトドキュメントを生成

image.png

  1. 仮想環境と依存関係をインストール

image.png

  1. 基本フレームワークとインターフェース機能を完成

image.png

  1. 領域選択機能が未完成。引き続き完成を推進

image.png

  1. 完成

image.png

  1. 生成された画像が大きすぎるため、引き続き処理を推進

image.png

問題記録

  • 問題1

    • 問題：グラフィック選択がコマンドラインで、画像インターフェースではない
    • 解決策：cursorに直接修正させ、グラフィカルインターフェースが必要であることを指示

  • 問題2

    • 問題：要件記述が不正確で、発散し多くの余計な機能が追加される
    • 解決策：適切な背景を追加し、正確な機能記述を行う

  • 問題3

    • 問題：claude-4-sonnetとclaude-4-sonnet-thinkingの差も大きい。前者は1時間処理しても解決せず、後者は3回のリクエストで5分で解決
    • 解決策：複雑な問題や方案解析にはthinkingを使用するようにする

使用上のポイント

  1. rulesに日付取得を追加し、モデルの日付のみを使用しないようにした
  2. Pythonプログラムでは、rulesに仮想環境作成を追加し、複数プロジェクト間での環境衝突を防止