Hugging Face's logo

Spaces:
MakiAi
/
icon-sheet-splitter
Runtime error

App Files Community
icon-sheet-splitter / README.md
Maki
Update README.md
cb2a495 unverified
preview code
|
raw
history blame contribute delete
7.51 kB
metadata
title: Icon Sheet Splitter
emoji: 🔥
colorFrom: blue
colorTo: purple
sdk: docker
pinned: false
license: mit

🎯 Icon Sheet Splitter

GitHub HTML5 CSS3 JavaScript Docker GitHub issues GitHub pull requests

大きなアイコンシートを個別ファイルに分割するWebアプリケーション
ドラッグ&ドロップで簡単操作、複数フォーマット対応でデザイナーの作業効率を向上✨

🇺🇸 English | 🇯🇵 日本語

📖 概要

Icon Sheet Splitterは、大きなアイコンシートファイルを指定したグリッドに従って個別のアイコンファイルに分割する、ブラウザベースのWebアプリケーションです。ゲーム開発、Webデザイン、モバイルアプリ開発において、スプライトシートやアイコンセットを効率的に管理できます。

🎯 主な特徴

  • シンプルなWeb UI: ブラウザ上で動作、インストール不要
  • ドラッグ&ドロップ対応: 直感的なファイルアップロード
  • リアルタイムプレビュー: 分割結果をその場で確認
  • 複数フォーマット対応: PNG、JPG、WebP形式での出力
  • カスタマイズ可能: グリッドサイズとファイル名を自由に設定

✨ 機能

  • 📁 ファイルアップロード: ドラッグ&ドロップまたはクリックで画像を選択
  • ⚙️ 分割設定: 列数・行数を指定してグリッドをカスタマイズ
  • 👀 リアルタイムプレビュー: 分割線を可視化して結果を事前確認
  • 🖼️ 複数フォーマット出力: PNG/JPG/WebP形式に対応
  • 📝 ファイル名設定: プレフィックスを指定して一括命名
  • ⬇️ 個別/一括ダウンロード: 単体ダウンロードまたは全ファイル一括取得
  • 📱 レスポンシブデザイン: PC・タブレット・スマートフォンに対応

🛠️ 技術スタック

  • HTML5: セマンティックなマークアップとCanvas API
  • CSS3: モダンなレイアウトとアニメーション
  • JavaScript ES6+: 非同期処理とDOM操作
  • Canvas API: 画像処理と分割機能
  • Docker: コンテナ化による簡単デプロイ
  • Nginx: 静的ファイル配信

🚀 使用方法

🌐 ブラウザで直接使用

  1. ファイルをダウンロード
git clone https://github.com/Sunwood-ai-labs/icon-sheet-splitter.git
cd icon-sheet-splitter
  1. ブラウザで開く
open index.html  # macOS
start index.html # Windows

🐳 Dockerで実行

  1. イメージをビルド
docker build -t icon-sheet-splitter .
  1. コンテナを起動
docker run -p 8080:80 icon-sheet-splitter
  1. ブラウザでアクセス
http://localhost:8080

🔧 Docker Composeで実行 

docker-compose up -d

💡 使用例

基本的な使い方

  1. 画像をアップロード - アイコンシートをドラッグ&ドロップ
  2. 分割設定 - 列数・行数を指定（例：4×4グリッド）
  3. プレビュー確認 - 分割線が正しく表示されているか確認
  4. 出力設定 - フォーマット（PNG/JPG/WebP）とファイル名プレフィックスを設定
  5. 分割実行 - 「アイコンを分割」ボタンをクリック
  6. ダウンロード - 個別またはまとめてダウンロード

実用的なケース

  • ゲーム開発: スプライトシートを個別キャラクターファイルに分割
  • Webデザイン: アイコンセットを個別アイコンに分割
  • モバイルアプリ: UI要素を解像度別にバッチ処理
  • 素材管理: 大型アセットの効率的な管理と配布

📁 プロジェクト構成 

icon-sheet-splitter/
├── README.md                 # プロジェクト説明書
├── index.html               # メインアプリケーション
├── assets/                  # 静的リソース
│   └── icon-sheet-splitter-banner.svg
├── Dockerfile              # Docker設定
├── docker-compose.yml      # Docker Compose設定
└── CLAUDE.md              # 開発ガイドライン

🎨 カスタマイズ

CSS変数による見た目の調整

index.htmlの:rootセクションでカラーテーマを変更可能：

:root {
    --primary-color: #2c3e50;
    --accent-color: #e74c3c;
    --gold-color: #f39c12;
    /* 他のカラー変数... */
}

機能の拡張

JavaScriptセクションを編集して以下の機能を追加可能：

  • 新しい出力フォーマットの対応
  • カスタム分割パターン
  • 画像フィルターの適用
  • バッチ処理機能

🧪 対応ブラウザ

  • Chrome 80+
  • Firefox 75+
  • Safari 13+
  • Edge 80+

※ Canvas APIとES6機能を使用するため、モダンブラウザが必要です

🤝 コントリビューション

プロジェクトへの貢献を歓迎します！

貢献方法

  1. Issues報告 - バグ報告や機能要望をGitHub Issuesで投稿
  2. プルリクエスト - 新機能や改善の実装
  3. ドキュメント改善 - READMEや説明の充実
  4. テスト - 異なる環境での動作確認

開発環境のセットアップ 

# リポジトリをフォーク
git fork https://github.com/Sunwood-ai-labs/icon-sheet-splitter.git

# ブランチを作成
git checkout -b feature/your-feature-name

# 変更を実装
# テストを実行
# プルリクエストを作成

📋 今後の予定

  • SVG形式の対応
  • アニメーションGIF分割機能
  • AI-powered自動分割
  • クラウドストレージ連携
  • PWA対応
  • 多言語国際化

📄 ライセンス

このプロジェクトはMITライセンスの下で公開されています。

👥 作者情報

🙏 謝辞

  • Canvas APIを活用した画像処理機能
  • モダンWebテクノロジーの活用
  • オープンソースコミュニティへの感謝

Made with ❤️ using Modern Web Technologies

🏠 ホーム | 📊 Issues | 🔄 Pull Requests