collamo

Tonttuが

2009-08-24T17:09:21Z

CSSSpriteツールのTonttuですが、
MOONGIFT様がご紹介くださいました（→ご紹介頂いた記事）。

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

いよいよきちんとしないと、使って下さる方にご迷惑をかけてしまいそうなので
今後ちゃんと整備をしていきたいと思います。
まだまだ課題の多いツールですが、どうぞよろしくお願いいたします。

Tonttuアップデート計画

2009-08-19T15:54:02Z

CSS HappyLifeさんが記事内でリンクくださったおかげで、
アクセスが見た事ない数字になってびびったのであわててエントリー。

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

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

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

使って頂いた方で何かご意見・ご要望あれば、教えて頂けたら幸いです。

[AIR]CSS Sprites ツール Tonttu

2009-06-18T15:44:12Z

AIRで、CSSスプライトツールたるもの作ったので紹介します。

CSS Sprites tool Tonttu

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

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

[AIR] 毎二秒間レンダリングブラウザ

2009-05-06T08:03:32Z

AIRの練習のため、
ただただ2秒間ごとにレンダリングするだけのAIRアプリを作ってみました。

]]>

Airはwebkitレンダリングエンジンを使っているそうなので、振る舞いはSafariです

HTMLのコーディング中に、エディタとブラウザの更新ボタンをマウスで行き来するのがめんどくさい人にとっては少しは役に立つかも。

●ダウンロード

使い方
・ステータスバーらへんに、ブラウザチェックしたいファイルをドラッグ
・RemoteLoder - startボタンをクリック

そうするとうざったいほどレンダリングしてくれます。

開発メモ
なぜかに対しては

DragManager.acceptDragDrop(html);が発行出来ないらしく、フィールドにファイルをドラッグっていうのが実装出来なかった。

入れ子にしての親要素で同じことをしてもなぜかダメ。
今度調べてみよ

次はきっともっと意味のあるものを作ります。

[HTML] Firefox addons ReloadEvery

2009-05-06T06:09:25Z

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

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

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

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

[Docs] CSSスプライト 2

2009-05-03T16:36:22Z

前々回のエントリー[ 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もある程度早くなってることがわかります。

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

[カスタム Poken] ポーケン(Voodoo)をムックにしてみた。

2009-05-03T13:21:10Z

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

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

今日ムックにしてやりました。
]]>
でん

ででん

でん

元はVoodooだったんですが、毛にまみれてもう見る影もありません。
でもこれで少しは可愛いキャラになったかな。

キャラが気持ち悪いって巷では有名なポーケンだけど、こんなやってみんなオリジナルにしていけば楽しく流行るんじゃないかなーとか思ってみたりしました。

そのうち誰かが作ったガチャピンとハイタッチ出来るとうれしいですね。

ちなみにムックの作り方

・ユザワヤで真っ赤なフェルトと目玉を買ってくる。

・手芸用ボンドを使って、小一時間かけて植毛する

・目玉をつける

・毛をカットする

意外に植毛楽しいですよ。

[Docs] CSSスプライト

2009-05-02T18:56:10Z

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

CSSスプライトって？

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

・スプライト画像

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

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

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

メリット

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

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

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

デメリット

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

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

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

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

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

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

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

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

ホムペリニューアル

2009-04-30T17:51:03Z

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

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

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

旅立ち　的な

2009-04-13T15:48:53Z

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

そんな友人に名刺を作って欲しいと頼まれて、無い腕によりをかけて名刺を作ってみたものがあるので、それをチラッと出させてください。

誰かのために何かを作る楽しさとか喜びとか、なんだか忘れてたものを思い出させてくれるような案件でございやした。

お日記

2009-03-20T15:41:39Z

先週末

のことをチラリと。

先週末大学の友達と5年ぶりのスノボーに行ってきました。舞妓です。
いやー最近引きこもってパソコンと向き合いっぱなしだったから、久しぶりのアウトドアってこともあって楽しかったーです。
５年ぶりのスノボーはちょっとしんどかったけどね。

]]> 舞妓に行くときは「たかとし」。
オススメです。

タイミングよく雪祭りがあったらしく雪景色の中花火っていうオツなものがあったので写真とってみました。

[FMS] ShareObjectのやり取りについて

2009-03-05T16:34:09Z

このページでは、キャラの動きをfmsで同期させて動かすってことをやってるわけですが、
キャラが綺麗に同期せずにカクカクしてるっていう問題があります。
なんといってもキャラそれぞれのenterframeの処理をそのまま同期させてるのがやっぱ無茶って話ですよね。

ここではenterframeの処理でキャラを移動させる度に、サーバーにコールして他のキャラをシンクさせるっていうやり方をしているので、当たり前な話だけどサーバーとの通信速度の兼ね合いで動きが飛び飛びになってしまいます。

対処法としてはサーバーにコールするタイミングは極力減らして、その間の他のキャラの移動は仮想的に再現するっていうやり方がいいんだろうなぁ。考えなきゃ。

fmsを使うときはenterframe内でコールするのはやめましょう。

[Flash] Macでマウスホイールイベント

2009-03-04T16:45:33Z

Macでマウスホイールイベントが取れないっていう症状があったので色々調べて直してみました。

知らないこと多いなー。

pixelbreakerさんのとこのスクリプトが有名らしいということで拝借しました。

]]> 実装の流れ

・↑のサイトからAS3ライブラリをダウンロード、自分のライブラリにぶっこみます

・次にソース内で下記のように記述します

-----------------------------------------------------

//ライブラリをインポート

import com.pixelbreaker.ui.MouseWheel;

//どこかで↓を宣言

MacMouseWheel.setup( stage );

-----------------------------------------------------

・最後に、jsでの制御も必要らしいのでその準備をします。

まず使うためにはswfobject2.0を使ってembedすることが必要になってくるので、それを使ってhtmlにswfを埋め込むようにします。（swfobjectについては調べればたくさん出てきます）

先ほどダウンロードした一式の中のjsフォルダ内に、swfmacmousewheel2.jsというファイルがあるので、これを読み込み、embedの記述の後に下記のようなスクリプトを記述します。

------------------------------------------------------

//参考までにウチのembed

swfobject.embedSWF("collamo.swf","collamo","1280","600","9.0.0");

//引数はembed箇所につけるid名です。

swfmacmousewheel.registerObject("collamo");

------------------------------------------------------



これでマウスホイールをする準備はおkなので、
後は自分の好きなようにマウスホイールイベントを使えばmacでも対応してくれるようになるはずです。

[FlashMediaServer] ShareObjectをぶっこむ

2009-03-01T18:54:58Z

前に勉強したFlashMediaServerを使って、同時接続５人までですがページに来てる人が見れるようになりました。
他に誰か来てたらフィールドに現れるキャラクターが増えるようになってます。もちろん動いたらちゃんと動くようにもしてます（全然滑らかではないんですが。。）

コレの次はfms使って簡単なチャットが出来るようにっていうのをやりたいですね。

[AS3] タイムベースでレンダリング

2009-02-24T15:49:45Z

このページのFlashですが、キャラクターをちょこまか動かすということをしているので、
今回普通のレンダリングではなくタイムベースでのレンダリングというものを試してみました。

本「ActionScript3アニメーション」で紹介されていたテクニックですが、こういうコンテンツの場合はかなり有効的ですね。flashの世界では常識的なのかな。。自分はかなり目から鱗でした。

タイムベースがどんなものかというと、

]]> なので「１秒間にこのくらい移動させたい」というような目的の場合にはちょっと不安です。

タイムベースは、enterframe１処理の前後でかかった時間を求めて、それに基づいた移動距離などを計算に加えるため、fpsの値に左右されずにモーションを作ることが出来ます。
もし処理が重たくなってしまってもモーションの移動間隔がその分大きくなって飛び飛びになるだけで、移動にかかる時間は変わりません。逆に処理が軽ければ滑らかな動きになります。

そんなこんなでやり方ですが、
entarframe内で↓のような処理を書きます。
-----------------------------------------------------------
private var time;
private function onEnterFrameHandler(e){
var elapsed:Number = getTimer() - time;
time = getTimer();
}
-----------------------------------------------------------
これでフレーム間でかかった時間が割り出せるので、あとは移動の処理に
このelapse/1000（1000で割ると1秒間の移動距離として計算できます）を値に乗算すればOKです。
このやり方でやる場合、初期fps値はとりあえず100fpsぐらいの設定にしておきます。

と、こんな感じでこのflashでも試してみました。
よかったらprofilerを入れているので、右クリック Show Profilerでfps値を見ながらキャラクターを動かしていじってみてください。
fps値次第でキャラクターが飛び飛びだったり、滑らかだったりしますお。