ほとんどの場合、スプライトを使用した私の仕事は次のように要約されました。
それでは、最初から始めましょう。
簡単な歴史
過去
昔々、私はサイトを作りました。 当局はページの読み込みを高速化することを要求したため、画像をスプライトに結合し始めました。
Photoshopでは、レイアウトをいくつかに分割し、PHPスクリプトを使用してそれらをマージしました。 正直なところ、Photoshopでは選択した領域を1つのファイルにまとめることができないことに驚いたが、いずれにしても、画像エディターがスタイルを自動的に生成することは既に失敗している。 開発者
多くのサイトがあり、スクリプトは私の仕事を大幅に加速しました。 さらに、1つのサイトに対して一度書いたグループ化ルール。 レイアウトが変更され、領域が同じ場所に残っていた場合、スクリプトに新しい画像をスリップするだけで、すべてが再び生成されました。
このアプローチには欠点が1つありました。 控えめに言っても、PHPが生成する画像の品質は「それほどではありません」。 そのため、ファイル拡張子のスタイルがjpg、png、gifであり、画像がBMP形式で生成されるようにスクリプトを設定しました。 そして、Photoshopを使用して手動で目的の形式に変換しました。
プレゼント
何年も経った後、私は再びスプライトを使用してレイアウトを作成しなければなりませんでした。 そして、それは私にとって興味深いものになりました。 プロセスを簡素化するために、この間に何が現れましたか？
Photoshopは再び私を喜ばせませんでした。 しかし、スプライトジェネレーターはFireworks CS6に登場しました。 しかし、いくつかのビデオや記事を見て、私は自分の要件をすべて満たしていないため、私には向いていないことに気付きました。
多くの別個のジェネレーターも登場しました。 小規模なレビューがすでにハブで行われており、ジェネレーターへのリンクもあります。 しかし、スプライトジェネレーターに提出したすべてのタスクを、ジェネレーターの1つが実行したわけではありません。
スプライトジェネレーターを表示する方法
要するに、スプライトジェネレータは次のことを行う必要があります。
- 元の写真を部分にカットできる
- スプライト内のカットパーツを接続できる
- 同時にスタイルを生成する
- 主なことは、便利なグラフィカルインターフェースを使用することです
以前は、写真を接続し、PHPスクリプトのスタイルを生成しましたが、このルールを規定しました。 しかし、今では十分ではないように思えました。 少なくとも、テキストエディターのルール設定は既に古くなっています。 これで、すべてをボタンで制御し、グラフィカルインターフェイスを使用して構成する必要があります。
ただし、グラフィカルインターフェイスがあるため、Photoshopは特に必要ありません。 領域の選択と画像の切り取りは、javascriptとHTML5にとって簡単な作業です。
これらの4つのポイントはすべて、明らかに1つのエディターにマージすることを望んでいます。
エディターにとっては、後で何かを修正する必要がある場合に備えてプロジェクトを保持することが非常に重要です。
ご覧のとおり、すべてのソース画像と、ステーキング、画像の結合、およびスタイルの生成に関するすべてのルールをプロジェクトファイルに保存する必要があります。
それでは、グラフィカルインターフェイスについて説明します。 次のものが必要です。
- 画像、ルール、またはプロジェクト全体を開くためのボタン。
- 結果とプロジェクトを保存するためのボタン。
- 画像を領域に分割するためのルールを設定します。 つまり、ユーザーはエリアを選択し、エリアのリストを表示して、それらを編集できます。
- エリアをスプライトにグループ化するためのルールを設定します。 スプライトを絵にする場所を示す機会があるはずです
- スタイル生成ルールを設定します。 スプライト内の各画像について、スタイルの生成方法を構成する必要があります：幅、高さ、repeate-x、repeate-y、no-repeate、クラス名を生成するかどうか
主なことは、プロジェクトに画像を追加するときに、不必要な構成手順からユーザーを救うために、特定の標準ルールを生成する必要があることです。 たとえば、「firefox.png」アイコンを追加しました。 プログラムは、「firefox」領域（幅と高さ全体）とスタイルを自動的に作成する必要があります。
.firefox{ width:16px; height:16px; background: url('data:image/png;base64,.....==') 0px 0px no-repeat; }
そして、領域を別のスプライトに移動したり、スタイルの生成を編集したりできます。
ソリューションの概要
ここで簡単に、なぜ既存のソリューションが私に合わなかったのか。
コンパス-Rubyで書かれています。 特別な構文を持つスタイルが作成され、プログラムはスプライトを持つ通常のスタイルを生成します。
レモネード-本質は同じで、サイトは同じコンパスに組み込まれたと言っています。
Glue-スプライトを生成するためのコマンドライン。
これらのツールを、5年以上前にphpスクリプトでルールを書き留めてスプライトを生成したときのツールと比較しました。 しかし、今はビジュアルエディターが欲しかったのです。
SpriteMe-リンクをブックマークレットにドラッグすると、表示しているサイトのスプライトを編集できます。 ただし、既存のサイトでスプライトを編集する必要はありません。 サイトがまだレイアウトにある段階で、エディターが必要です。
スプライトパッド-画像をスプライトにドラッグアンドドロップすると、すべてのスタイルが右側に表示されます。 すでに私が望んでいたものに近い。 しかし、なぜドラッグアンドドロップだけですか？ サイトにはブラウザの新しい機能のみが表示されていますか？ ドラッグアンドドロップは必ずしも便利ではありません。通常の[開く]ボタンを使用して写真を追加します。 画像はPNGでのみ保存されますか？ 一度に複数のスプライトを作成することはできませんか？ それでも、このジェネレーターは非常にシンプルです。
スプライトカウは面白いものです。 既製のスプライトが既にある場合、Sprite Cowは個々のエリアを強調表示し、それらのCSSルールを生成するのに役立ちます。 ただし、cssは1つの選択された領域に対してのみ生成されます。 つまり、アイコンがたくさんある場合は、各CSSを選択してスタイルエディターにコピーする必要があります。 一般に、このアイデアは優れています。スプライトの座標とサイズを決定する時間を短縮できますが、焦点が非常に狭く、問題を解決できません。
その他のオンラインサービス：
- css-sprit.es、
- csssprites.com、
- spritegen.website-performance.org、
- css.spritegen.com
それらのプロセスは次のとおりです。
- 写真をアップロードする
- 設定パラメータ
- 世代
しかし、それでも、彼らは私には快適でなく、実用的でもないように見えました。 一般に、上記の各アプリケーションでは、目的のオプションが見つからなかったり、不快なインターフェースがあったりするため、不快感を覚えました。
私はこの状況に我慢して、発電機を積み上げたくありませんでした。
紹介してうれしい
SimprealによるCSSスプライトジェネレーター
このプログラムは、上記のすべての要件の実施形態です。 そして、多くのアイデアがまだ進行中です。
プロジェクトを保存することが可能であり、次回すべてを再構成する必要がないことに注意することが重要です。
「例」セクションのメインページには、いくつかのサンプルプロジェクトがあります。 プログラムの機能を理解するのに役立つことを願っています。
スプライトジェネレーターはオンラインで動作します。 Bootstrap、KnockoutjsおよびJquery自体からアセンブルされます。
主なことは、プロジェクトの開発中に、特にKnockoutjsで多くの経験を積んだことです。 この経験により、Habrに関する2つの記事が作成されました。
JavascriptでのキャンバスからGIFへ
テンプレートを動的に追加および削除するときのKnockoutjsの最適化
スプライトジェネレーターでできることの実装に関する質問がまだある場合は、喜んでお答えします。
Windows用のオフラインバージョンもあります。 これは、Webファイルが単純に挿入されるAwesomiumシェルです。 しかし実際には、すべての機能がこのシェルで機能することを保証するために作業しなければなりませんでした。 だから私はこの経験を共有することができます。
次は何ですか
開発プロセスはsmartprogressで監視できます
結果の保存をより便利にするために、エディターとサーバーの統合に取り組んでいます。 理想的には、ボタンをクリックするだけで、すべてのスプライトとスタイルが編集可能なサイトで更新されます。
残念なことに、半年間、誰もプログラムを使用し始めませんでした。 したがって、私はこの製品の有用性についてのあなたの意見を見つけるためにhabro-communityにプログラムを示します。
原則としてスプライトを使用する人はほとんどいないと思います。 たとえば、過去5年間で私が知っているサイトは1つだけです。 現在、実際の顧客はこれに注意を払っていません。
したがって、次に何が起こるかを言うのは困難です。 人々がプログラムのアイデアを好めば、それは発展します。 そうでない場合は、そのままであるか、別の何かに変わります。
いずれにせよ、経験は貴重です！
また、スプライトを使用してサイトを作成する必要がある場合は、このための便利なツールが既に用意されています。