アバターの仕組み

アバターって、自分のキャラクターに容姿を自由に変更できるあれね。

Yahooのアバターってどうなってるんだろうと、興味本位からちょっとみてみると

透過画像を重ねて、部分的に入れ替えれるようにしてる。

GDとか使って、まるまる画像生成ってしてるのかとおもったら

意外と単純。（よく考えたらアニメーションGIFとか、そのまま合成できないからあたりまえか。。。）

<style>
div{
width :100px;
height: 100px;
position:absolute;
window.  }
#img1 {background: url(img1.gif) transparent no-repeat; z-index:10;}
#img1 {background: url(img2.gif) transparent no-repeat; z-index:20;}
#img1 {background: url(img3.gif) transparent no-repeat; z-index:30;}
#img1 {background: url(img4.gif) transparent no-repeat; z-index:40;}
#img1 {background: url(img5.gif) transparent no-repeat; z-index:50;}
</style>

<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
<div id="img4"></div>
<div id="img5"></div>

こんな感じのHTMLに img1.gif ～ img5.gif の同じサイズの透過GIFでも用意したら

できあがり。

要は、その画像の組み合わせが大変だってことやね。

コンテンツ生成に高額な費用がかかるのがネック！

JQuery でごりごりJavascriptのプログラムを書いていたときに、

急にFireFoxの挙動がおかしくなり困ったことに。

画面の更新を何回かすると、アプリごと落ちる現象です。（更新回数とかは不規則）

Exception Interface Code:0xc00000005 Flags:0x00000000 Record: 0x0000000000000000 。。。。

詳細を見ると上記のようなエラーコードとか、モジュールの情報とかいろいろ詳でてくるんだけど

細かくちまちま調べる気になれず、何が起こったかを調べるより

Javascriptを順番にコメントアウトしてどの記述が影響しているのかを調べるほうに注力しました。

結論から言うと以下のコードは、落ちる可能性がある。（原因は不明）

リスト１

$(function($){

(function($){
コード１。。。
})($);

(function($){
コード２。。。
})($);

(function($){
　　コード３。。。
　})($);

});

以下のように書き直すと、問題解決しました。

リスト２

$(function($){
コード１。。。
});

$(function($){
コード２。。。
});

$(function($){
　  コード３。。。
});

どちらも、HTML読み込み完了後にJavascriptが実行されるような記述です。（JQuery参照）

リスト１のように、とりあえず内容別に名前空間を分けて書きたいなぁと、

深い意味も考えず書き始めました。

最初のコード１までは特に問題なく、コード２を書き足したあたりから、

不穏な動きが始まりコード３を書き足したときにようやく何かがおかしいなぁと思い始めた次第です。

（特にコードの量が増えると、落ちる頻度があがるような気がしました。）

もともと、FireFoxにFireBug、YSlow、Greasemonkeyなどのアドオンを

複数インストールしていた関係もあって、

FireFoxの挙動がおかしく強制終了するようなことはしょっちゅうありました。

プログラムを書いているときも、そういう別原因の要素が働いているのかとも思い、

納期もあるしあんまり原因追求へ脱線している時間もないと放置していたわけです。

（たまにIEで確認したりするときも問題はなかったので、余計放置していました。）

しかし、他のPCのFireFoxでも落ちる現象を確認したときは

さすがに自分のコードが原因だと確信しました。

Javascriptを書いているときって環境依存の部分の検出ってほんとに

めんどくさいし、手間のかかることだから蓋をしておきたくなりますよね。

でも、見つけた時は、あきらめてとりかかるしかない。。。

（もちろん、見つかっていない部分も探さないといけないですけどね。）

結局、現象はおさまりましたが、JQuery（Javascript）の勉強不足で

原因というのは分かっていません。

ただ、いろいろ調べてみて自分自身、原因特定の糸口もつかめず苦労したので

同じような現象になったかたがおられたら、とりあえずでもいいので

上記のように書き直してみて、現象がおさまれば幸いと思った次第です。

（書き直しによる解決は、あくまで自己責任でお願いします）

原因の調査はできるときにしたいと思いますが、誰か教えてくれる

親切な人がいましたら、是非ともトラックバックやコメントでお願いします。