ccl-cross

ccl-cross は、お気に入りの画像からクロスステッチ図案を簡単に作成できるWebアプリケーションです。DMCとCOSMO、二種類の人気刺繍糸ブランドに対応しており、あなたの創造性を形にするお手伝いをします。

✨ 主な機能

• 画像からの図案生成: お手持ちの画像ファイルをアップロードするだけで、自動的にクロスステッチの図案に変換します。
• 選べる刺繍糸ブランド: DMCとCOSMOのカラーパレットから、お好みのブランドを選択して図案を生成できます。
• カスタマイズ可能な分割数: 図案の細かさを「横のマス数」「縦のマス数」で自由に調整できます。
• 使用色数の調整: デザインに合わせて、図案に使用する色数を制限することができます。
• 買い物リストの自動生成: 図案の作成と同時に、必要な刺繍糸の色番号、色名、本数をリストアップした買い物リストが自動で作成されます。
• ダウンロード機能: 生成された図案と買い物リストは、一つの画像としてダウンロードできます。また、図案データはJSON形式で保存することも可能です。

🛠️ 使用技術

• フレームワーク: SvelteKit
• ビルドツール: Vite
• 言語: TypeScript, JavaScript, Svelte
• 主なライブラリ:
  • html2canvas: 図案と買い物リストを画像として保存するために使用しています。

🚀 使い方

1. 画像のアップロード: "画像をアップロードして始めましょう" セクションで、図案にしたい画像ファイルを選択またはドラッグ＆ドロップします。
2. 設定の調整:
   • グリッドサイズ: 図案のマス数を横・縦それぞれ設定します。
   • 使用ブランド: "DMC" または "COSMO" から使用したい刺繍糸のブランドを選択します。
   • 使用色数: 図案に使用したい色の数を指定します。
3. 図案の生成: "図案を生成" ボタンをクリックすると、設定に基づいて図案と買い物リストが作成されます。
4. 結果の確認と保存:
   • 画面に表示された図案と買い物リストを確認します。
   • "画像としてダウンロード" ボタンで、表示されている内容をPNG画像として保存できます。
   • "図案データをJSONでダウンロード" ボタンで、図案の構造データを保存できます。

📦 セットアップ (開発者向け)

1. リポジトリをクローンします。

   git clone https://github.com/reiji1020/ccl-cross.git
   cd ccl-cross

2. 依存関係をインストールします。

   pnpm install

3. 開発サーバーを起動します。

   pnpm run dev

4. ブラウザで http://localhost:5173 を開きます。

その他のコマンド

• build: pnpm run build
• 本番プレビュー: pnpm run preview
• prettierによるコードフォーマッタ調整(上書きされます): pnpm run format
• lintチェック: pnpm run lint