Tonttuが

| コメント(0) | トラックバック(0) |
CSSSpriteツールのTonttuですが、
MOONGIFT様がご紹介くださいました(→ご紹介頂いた記事)

おかげさまでたくさんの方がダウンロードしてくださいました。ありがとうございます。


いよいよきちんとしないと、使って下さる方にご迷惑をかけてしまいそうなので
今後ちゃんと整備をしていきたいと思います。
まだまだ課題の多いツールですが、どうぞよろしくお願いいたします。
CSS HappyLifeさん記事内でリンクくださったおかげで、
アクセスが見た事ない数字になってびびったのであわててエントリー。


ニッチなニーズがあるはずと思って作ったツールですが、
ガッツリ使おうとするとまだまだ不便な部分が多いので、今後直していきたいなって箇所をちょっとピックアップしてみます

・png24でしか書き出せないので、書き出せるデータの種類増やす(png8,gif とか
・プロジェクトの保存周りがわかりづらいので再検討してみる。
psdとかレイヤー付きpngで書き出せたら便利そうですね(そしたらそもそもプラグインにすればいいんじゃないかと言う気も
・プラグインではなくても、airが若干敷居高い気がするのでwebツールっていう形でも使えるようにしたら良さそう。
・合ってるかわかんない英語メニューじゃなくて、とりあえず日本語にしよう
・バグが多いので減らそう


直近ではこんな感じですかね。
しばらくお休みが取れるので、その間にでもいじいじしようかと思います。

使って頂いた方で何かご意見・ご要望あれば、教えて頂けたら幸いです。
AIRで、CSSスプライトツールたるもの作ったので紹介します。

CSS Sprites tool Tonttu

TonttuはWebDeveloperのための、CSS Sprites作成ツールです。
簡単に画像を配置、移動でき、最終的にCSS Sprites(png画像)とhtml・cssファイルを書き出すことが出来ます。 また、配置した画像の状態はプロジェクトファイル(.ttd)として保存することが出来るので、 それを読み込むことで、次回の起動時も前と同じ状態から始めることが可能です。


ということで、CSSスプライトを作ってコーディングをされる機会が多い方にとっては、少しは役に立つツールになってるかと思うので、是非一度お試し頂けたら幸いです。
使った上で何か気になる点がございましたら、こちらまでご意見をお寄せ下さいませ。
AIRの練習のため、
ただただ2秒間ごとにレンダリングするだけのAIRアプリを作ってみました。

コーディングを楽にさせる目的で、リアルタイムでブラウザレンダリングするAirアプリでも作ってみようかと思ってFlexイジイジしてた今日この頃ですが、firefoxのアドオンでこんなもの見つけました。

ReloadEvery
https://addons.mozilla.org/ja/firefox/addon/115

コンテキストメニューから何秒で更新するか選択すれば、最短5秒置きでfirefoxが更新されます。
ちょ、これでいいじゃん。。。



なんだか悔しいので、とりあえずAirででも作ってみよう。レンダリングSafariだし。

[Docs] CSSスプライト 2

| コメント(0) | トラックバック(0) |
前々回のエントリー[ CSS ] CSSスプライト で書いたスプライトについてですが、
やり方的なところを今回紹介します。


CSSスプライトのやり方

スプライトですが、
自分はphotoshopを使って、画像をくっつける作業を手作業でやっています。

http://spritegen.website-performance.org/
↑のサイトのツールなんかでは、自動が画像をスプライトして、かつcssを吐き出してくれるという便利なことやってくれたりするのですが、

あくまで自動なので、元のページcssを考慮した画像を吐き出してくれないことが多く、
結局のところ修正をしないといけなくなったりするので、逆に時間がかかってしまうことが多いためです。
また、PSDなどのスプライトのデータを残すことが出来ないため、後々運用する人が泣いてしまうこともあります。


ということで、結局自分でちまちま画像を配置するのですが、
イメージ的には↓のようにガイドを引きながら画像を配置していきます。




スプライトする上での注意

上記のようにスプライトをしていくわけですが、配置する上で気をつけるべきところがいくつかあります。

・配置する順番
作る人にもよりけりですが、自分の場合はなるべく後で運用がしやすいように、
ページの上から順に使う画像を配置していきます。
画像の種類(アイコン、背景)で分ける方法も一つありますが、背景画像なんかを寄せ集められた日にはどれがどれだか本気でわからなくなるので、あまり綺麗なスプライト画像にはならないですが、この方法がいいんじゃないかと自分は思っています。


・表示の時に他の画像が見えないようにする
width,height指定で、ガチっとコーディングする場合はいいですが、
そうでない場合は文字を拡大したときなどに他の画像が出てこないように注意してください。

怪しい場合は画像と画像の間に十分な余白を入れて画像を配置する必要があります。


・特殊な配置をする画像の場所を確保する
特殊な配置というのは、例えばrepeatをする背景画像や、positionをbottom指定で置くような画像のことです。
例えばrepeat-xで使っている画像などは、端から端までその画像で埋める必要がありますし、
bottom指定で使っている画像は、スプライトの一番下に設置しないといけません。
xにもyにもリピートするような画像は、もうスプライトとは別で考える必要もあります。


・特殊な配置の画像が多い場合の対処法
規模の大きいサイトであれば、repeat指定や、bottom指定の画像はたくさん出てくると思います。
その場合はもう無理に1枚にスプライトする必要はないので、

repeat-x用のスプライト
positionがbottom用のスプライト

という風に指定の仕方ごとでスプライト画像を分けたりするといいかもしれません。
そうすると無駄に画像が大きくなることもさけられますし、結果的に1枚のスプライトよりもパフォーマンスがあがることがあります。

ようはページによって臨機応変にスプライトを使い分けていく必要があるということですね。




画像をCSSにセットする

次に画像をCSSにセットしていくわけですが、
スプライト画像を書き出したらまずCSSでこんな記述をして、まず画像を使っている箇所に一括で画像をセットします。





記述をしたら、あとは要素毎でbackground-positionを使い画像の位置を調整していきます。
このときphotoshopのmapツールと情報タブで確認をしながらやるとスムーズに出来ます。





自分の紹介したいやり方は大体こんな感じでございます。
他にも手法は色々あると思うので、他のやり方あれば是非聞いてみたいです。




効果測定

最後に実際自分のサイトで試してみて、yslowで実装の前後の速度を比較してみたのでご紹介します。


・実装前



・実装後


今回8枚の画像をスプライトをすることで2枚にしたので、6リクエストの削減が出きました。
表を見るとわかるようにRESPONCE TIMEもある程度早くなってることがわかります。

正直これくらいの変化だと、体感的に感じるほどの効果が得られないところが実情ですが、
これが、画像が増えれば増えるほど、びっくりするほど大きい変化が見て取れるようになってくるので、「画像が多いせいかなんか表示遅いな」と感じるときには是非試して見てほしいところです。



はやりに乗ろうと思って、買うだけ買ってみたデジタル名刺のポーケンですが。


使う機会がなく引き出しの中に封印してるのも勿体なかったので、


今日ムックにしてやりました。

[Docs] CSSスプライト

| コメント(0) | トラックバック(0) |
巷で話題のcssスプライトでございますが、このページでも実装してみたのでドキュメント風にエントり。


CSSスプライトって?


cssスプライトというのは、
css上のbackgroundで読み込んでいる画像達を、数枚のバラけた画像を1枚の画像にまとめちゃいましょう。というテクのことをいいます。画像の配置は↓の画像のようにその1枚のスプライト画像をbackground-positionを使って配置します。


・スプライト画像

sprite



これによって、cssからのサーバーに対するリクエストが数回から1回に減るためパフォーマンスアップに繋がるというわけです。


CSSスプライトのメリット・デメリット



ただ、
パフォーマンスが良くなるからと、ほいそれ実装しろっていうことになりそうなのですが、
これにもメリット・デメリットというものがあるので、状況によりけりで使いわけて欲しいところです。


メリット


・パフォーマンス改善になる。
画像の数が多ければ多いほど、そこから改善した時の効果は大きい。
逆に言うと、画像数がもともと1桁台くらい少ないと、そこまで大きな改善効果は無い。


・画像がいっぺんに表示される
読み込み中、パラパラと画像が表示されて、なんだか作りが甘い? 感が消せる。
これもクオリティですね


・整理した感が気持ちいい
自己満の世界


デメリット


・工数がかかる
画像の数にも寄りけりだけど、普段のコーディング工数の3割増しくらいになる。
きちんと工数は計算に入れて時間を確保すべき


・運用が大変になる
ページの運用が始まった段階で、画像の修正などが入った場合修正が普段より面倒になる。
運用する側とあらかじめ相談する必要はあるかも。


・カオスになる
チームで開発を行っている場合、人の作った画像スプライトを見てもよくわからなくて困る。
特に背景画像のスプライトなんかだとまと、似たり寄ったりでどれがどれだかよくわかんないよ!みたいなんになる。
そう考えるとやっぱり運用時のためのドキュメント準備は必須、何がどこの画像だとか。
そこも工数がかかりますね


ということで総合的にみて、

はたして期待したパフォーマンスアップ効果が出るかどうか(画像の数次第で)、
それに見合った工数かどうか(CSSスプライト自体の工数+ドキュメント制作の工数+運用の工数)、

っていうをあらかじめ考えて、やるかやらないかを決めた方がよさそうです。特に大規模なサイトでは。


サイトの質にも関わってくるところだと思うので、もちろん出来るならやった方がいいですね。。




次はスプライトのやり方とか、このサイトに試してみた効果について書きます。




色々あってまたリニューアルしました。
以前のリニューアルからなんとも気が早い。


やっぱりブログはHTMLがいいですね、これで大分運用もしやすくなります。 
運用しやすい環境が整えば、きっとブログも書き始め、ネタを作るためにFlashの勉強に没頭できるんじゃないかと、淡い期待を抱いています。

いやでもやっぱ環境は大事っすよ。

旅立ち 的な

| コメント(0) | トラックバック(0) |
怒涛の年度末を過ぎ、仕事的には少しづつ落ち着いてきた今日この頃ですが。
まだ新しい環境への変化に気持ちがついていかず、モヤモヤとした日々が続いています。
最近はもう「そもそも」的な所から改めて色んなことを考えるようになりました。まぁ前からっちゃ前からですが。

About

  • Name : collamo
  • Work : WebDevelop, WebDesign, FlashDevelop, Illustration(趣味)
  • Place : Tokyo
  •  
  • Mail : info@collamo.jp