Cursor実践プロジェクト-03-画像変換GIF機能の強化

プロジェクト説明

cursorプロジェクト実践-03

所要時間：約2時間

Cursor使用回数：20回（コア機能の構築に3回、多言語サポートに15回を浪費）

本プロジェクトは、映像編集ソフトのような画像からGIFを作成するツールを提供します。インターフェース上で画像を一列に表示し、ドラッグで並べ替えが可能です。各画像ごとに表示時間（秒）を個別設定でき、画像下部には字幕入力エリアを配置。ユーザーは字幕内容を自由にカスタマイズでき、フォント、色、サイズ、位置を設定可能です。設定された字幕は自動的に対応する画像に追加され、カスタマイズされたGIFアニメーションが生成されます。

チュートリアル用画像の作成に便利で、将来的にはWebサービスとして提供することも検討可能です。

結果の表示

• 操作画面

• 生成GIF効果

• 6枚の画像、26秒、360k、良好な効果

事前準備

• Cursor

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

• 全体の流れ

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

問題記録

1. 問題1：途中で多言語サポートを追加しようとしたため、多くの問題が発生し、10回以上のやり取りを浪費

   • 解決策：多言語サポートが必要な場合、アーキテクチャ設計段階で考慮する必要あり。後からの変更は非常に複雑

2. 問題2：字幕の漢字サポート問題

   • スクリーンショットを撮り、cursorに問題を説明して提出すれば解決可能

使用上のポイント

1. Python使用時、rulesで仮想環境の設定を必須とする。仮想環境内で操作し、環境衝突を防止
2. 多言語サポートが必要な場合、初期アーキテクチャ段階で明確に設計する必要あり。後からの変更は非常に複雑

プロジェクト詳細手順

1. 要件を整理し、新規要件をpj-requirement.mdに追加

2. 要件に基づき、cursorに処理を開始させる。日付生成、プロジェクトディレクトリ構築、プロジェクト環境設定

3. 初期実装機能に対して問題を提起し、cursorに修正させる

    1.GIF画像解像度設定の追加
    2.現在の画像圧縮アルゴリズムに問題あり？画像品質が大幅に低下
    3.字幕設定が反映されず、フォントが非常に小さい
    4.まず字幕を処理し、ウォーターマーク方式で画像に追加してからGIFを生成する

4. gitを使用したバージョン管理

5. 結果に対して検証テストを実施

6. 6枚の画像、26秒、360k、良好な効果