Cursor実践プロジェクト-14-Cursorでソーシャルメディア画像ツールを迅速開発：構想から公開までの全手順ガイド(二)-基本画像処理、クリップボード画像の便利な処理

プロジェクト説明

cursorプロジェクト実践-14-Cursorでソーシャルメディア画像ツールを迅速開発：構想から公開までの全手順ガイド(二)-基本画像処理機能、クリップボード画像の便利な処理

所要時間：約8時間

Cursor使用回数：30回程度

🔥 衝撃の登場！ これは普通の画像ツールチュートリアルではありません。これは画期的な開発体験です！画像処理の利便性を極限まで追求します。皆様からの要望を随時受け付けています（後日コメント機能を実装予定）。

💥 想像してみてください： 締め切りに追われている時、スクリーンショットを処理する必要が生じました。従来の方法？保存→アップロード→待機→編集、なんと2分も無駄に！私たちの解決策？Ctrl+Vで一発！ クリップボードから直接画像を貼り付け、即座に編集モードに入れます。効率が1000%向上！

🚀 これは究極にシンプルな魔法のツールです： 他の人が画像処理に頭を悩ませている間に、あなたは数秒でプロ級の画像編集を完了しています。Photoshopも複雑なソフトも不要、ブラウザだけで完結！

WebTools は純粋なフロントエンドのミニマルな画像処理ツールとして、世界中のユーザーに迅速で直感的、無料のオンライン画像処理サービスを提供します。

成果展示

- **ミニマリズム**: インターフェースはシンプルで清潔、機能は直感的で使いやすい
- **即時利用**: 登録やログイン不要、開いてすぐ使える
- **グローバル化**: アーキテクチャ設計段階から多言語対応を考慮
- **プライバシー保護**: 純粋なフロントエンド処理、画像はサーバーにアップロードされない

网站展示

pixtoolkits.com

pixtoolkits.com

pixtoolkits.com

pixtoolkits.com

  • 実装済み機能：

    1. 基本的な画像処理機能（切り抜き、拡大縮小、フィルターなど）
    2. 3段レイアウトのコアインタラクション画面を構築
    3. 複数の画像入力方法をサポート（アップロード、ドラッグ＆ドロップ、貼り付け）
    4. 高度な画像処理機能を拡張（モザイク、落書き、テキスト、ステッカー）
    5. クリップボード画像貼り付けをサポート、ユーザー体験を大幅向上
    6. 画像のエクスポート、保存、共有機能を実装
    7. 多言語国際化をサポート、中国語、英語、日本語、韓国語、スペイン語などの主要言語をカバー

  • ウェブサイト展示

    • 3段レイアウト：左側素材パネル、中央キャンバス、右側ツールパネル 基本機能展示
    • 多言語対応：中国語、英語、日本語、韓国語、スペイン語など複数言語をサポート 基本機能展示
    • 基本機能展示 基本機能展示
    基本機能展示

事前準備

  • Cursor

  • Gemini CLI

    • バージョン：0.1.16
    • インストール：npm install -g @gemini-cli/gemini
    • 使用方法：gemini --help

  • 全体の流れ

    • cursorルール設定→プロジェクトルール(project-rules)設定→LLMと要件を協議→cursorコーディング→デバッグ出力

問題記録

  1. 問題1：ウェブサイトのスタイルをどう説明すれば良いか？以下のステップ1を参照
    • 参考になるウェブサイトを見つけ、モデルに分析させプロジェクトルールを作成。スクリーンショットをモデルに渡し、解析してcursor rulesドキュメントを作成するよう指示。

使用上のポイント

  1. ウェブサイトスタイルの説明に困ったら、参考サイトを見つけ、モデルに分析させプロジェクトルールを作成。スクリーンショットをモデルに分析させるだけでOK。
  2. 機能のコーディングでは、cursorに最小限の必要性とアジャイル開発の原則に従うよう必ず促す。
  3. バイブプログラミングは、従来のプログラミング方法とは異なる。 基本ルールを決めたら、できるだけ早く最初のバージョンをリリースし、その後微調整する。
  4. 多言語対応のウェブサイトを作りたい場合、最初から要件やルールに組み込む。

プロジェクト詳細手順

  1. ウェブサイト統一ルール作成：気に入ったウェブサイトをスクリーンショットし、モデルにスタイル分析とプロジェクトルール作成を依頼

    プロジェクトドキュメントインデックス生成 プロジェクトドキュメントインデックス生成

  2. 要件作成、ポイント提供：要件ドキュメントを作成し、国際化、最小限の必要性、アジャイル開発の要求を明確に提示。

プロジェクトルールに基づき、@requirement.mdに対して設計と最初のステップの実装を行います。
設計と最初の実装

  1. プロジェクトドキュメントとインデックス生成：cursorがプロジェクトドキュメントインデックスを生成。最初のステップの内容のコーディングを開始

    プロジェクトドキュメントインデックス生成
    • この過程でuserinputが複数回発生。いくつかの誤りを修正。回数を節約。

  2. 基本フレームワーク完成：4回のcursorリクエストで基本フレームワーク完成、3段レイアウト、画像アップロード可能、クリップボード画像コピー。同時に画像のダウンロード保存もサポート

    基本フレームワーク完成、3段レイアウト
    • まだ多くの問題あり：多言語サポートの不具合、右側機能未実装、不要なボタンあり。
    • しかし全体のフレームワークは完成、表示効果はほぼ満足。最初のバージョンの機能を基にさらに改善

  3. テストと改善：基本機能のテスト検証、問題収集、今後の機能整理、リスト作成、一括修正。

1. 多言語サポートに不具合、多くの箇所が翻訳されておらず、サポート言語も少ない。修正してください
2. 右側ツールバーの改造。編集ツール上に、キャンバス設定を追加。キャンバスのアスペクト比（6種類の常用サイズを表示）を選択可能に
3. キャンバス上のエクスポートボタン横に、「素材に変換」ボタンを追加。クリックするとキャンバスの内容を素材として記録。
step-5 
1. キャンバス設定を編集ツールから独立。アスペクト比はドロップダウンではなく、下のツールボタン同様に直接クリック選択、ボタン上部に幅と高さの入力欄（同一行）を表示、アスペクト比ボタンクリックで上の入力欄も連動して変更。
2. マウス左ボタン長押しでキャンバスをドラッグ可能に。
3. 基本ツールを幾何学図形（矩形と円形、色選択可能）、絵文字（emojiアイコン）、矢印、ブラシ、モザイク、切り抜き、テキスト、フィルターに変更。
step-5
  1. 問題修正、機能改善：cursorで問題修正、機能改善。キャンバス設定、素材変換、マウスドラッグなどの機能を追加
  • 現在、全体機能はほぼ完成、今後さらに多くの機能を追加可能。
  • 右側ツールバーの編集ツール上に、キャンバス設定を追加。キャンバスのアスペクト比（6種類の常用サイズ）を選択可能に。
  • キャンバス上のエクスポートボタン横に「素材に変換」ボタンを追加。クリックするとキャンバスの内容を素材として記録。
step-5
  1. 段階的保存、gitコミット：現在のコードをローカルgitにコミットし、段階的成果を保存。
WebTools画像エディターコア機能完成
- ✅ ミニマルでモダンなツールスタイル設計を実現
- ✅ 3カラムレイアウト完成：素材パネル+キャンバス+ツールパネル
- ✅ 画像読み込み、ドラッグ、拡大縮小、エクスポート機能を実装
- ✅ 幾何学図形、絵文字、矢印、ブラシなどの描画ツールを追加
- ✅ オブジェクト選択、移動、拡大縮小、削除機能を実装
- ✅ 多言語国際化をサポート（中日英韓西）
- ✅ キャンバスドラッグ、座標計算、パフォーマンス最適化などのキー問題を修正
- ✅ 21:9超ワイド比率をサポート、画像は元の比率を保持
- ✅ レンダリングパフォーマンスを最適化、無限リフレッシュ問題を回避
step-5
  1. 第1段階完了

シリーズ