岩家.net

はじめに

画像をスライスして一枚ずつ読み込むよりも、このように一枚の画像にすると、スライスの手間が省けるのと、読み込みの再に、リクエストが一回で済むので、場合によってはこちらの方が早く読み込まれることになりそうです。

このテクニックをCSS Spriteって言うそうです。。（この手法自体は知ってましたが、CSS Spriteって呼ばれているのは知りませんでした…）
CSS Spriteを活用しよう - DesignWalker

DesignWalker さんのこのエントリを読んで以来，似たような素材については CSS Sprite な手法を心がけています （実際にはそれ以前もナビゲーションの素材くらいには使ってましたが，最近はもうちょっと積極的に，という意味で）．

ここ数日，CSS + JavaScript で何か小ネタがないかなぁ．．．と少しだけ悩んでいたわけですが，そんな中で出てきたのが CSS Sprite を使ったアニメーションという短絡的なものでした．

では以下，何番煎じとかは気にしない方向で．

デモ

次のページにデモを上げていますので，よろしければ．各種ソースコードも載せてあります．

CSS Sprite + setInterval で簡易アニメーション - issm’s…

手抜きな解説

画像

アニメーションの全フレームを連結した 1つの画像を準備します．

CSS

準備した画像を背景に設定します．overflow: hidden しておくといいでしょう．

アニメーションの各フレームに対応したクラスを

.frame-1 { background-position: ...px ...px; }

のような感じで定義していきます．

JavaScript

setInterval 関数を使って定期的にフレームを変更します．フレームの変更は，先で定義したクラス名を設定することで行います．

target.className = 'frame-1';  // ホントは replace とか使うべき

おわりに

フレーム数（コマ数）が莫大にならなければそれなりに使えるのかな，なんて個人的に思ってみました．APNG や MNG が普及するまで （といっても現状知りませんが ＞＜） は，代替手段として利用してみるとします．

利用幅を広げるために，JavaScript の IE への対応が最初の課題ですね．そして透過PNG対応も （この辺は PNG Fix とかで）．

あとは，フレーム定義の CSS （background-position 設定ね）なんかを画像から判断して自動で吐き出すようなしくみなんかができるとかなりハッピーですね．

参考

デモページの画像は，以下の動画から使わせていただきました．

• たわしねこ2　荒ぶるたわしのポーズ‐ニコニコ動画(夏)
• もやしもんでｳｯｰｳｯｰｳﾏｳﾏ(ﾟ∀ﾟ)‐ニコニコ動画(夏)

はじめに

去る 7月 5日（土），DeLla.JS 「JavaScript 第5版」 読書会 の 4回目 を，VISH株式会社様内セミナールームにて行いました．

会場を快く提供してくださっただけでなく，凝った案内板まで準備していただいたVISH株式会社様，そしてその手配を行っていただいた aodagさん に感謝です．

また，夜に行われる Firefox3 リリース記念パーティ に合わせて東京からみえたもじら組組長の smellmanさん（a.k.a. btmさん），darc0113 さんにも参加いただきました．

では以下．

読書会．．．の前に

会場へ行く前に，Francfranc 名古屋アネックス店 に寄り，以前から気になっていたアレを買ってみました．（アレは以下のどこかを参照．）

読書会

初っぱな，自分だけネットワークがつながらなくてアタフタ．．．vmware とのインタフェースのIPアドレスと会場のゲートウェイのIPアドレスとが同じでした．修正したらつながりました ＞＜

今回の主なテーマは，クロージャとコンストラクタですかね．

以前 Kanasan.JS の読書会に参加したときにも一度クロージャの部分を読みましたが，当時は Function オブジェクト自体 ？ だったため，クロージャなんてもう．．．な存在でした．それに比べればだいぶ理解を進められたかな，と思います．

クロージャなコード自体は以前から書いていたのかもしれませんが，それをクロージャとわかっているいないでは違いは大きいですよね，やっぱり．これからはクロージャをクロージャと（少しは）わかって書いていきますよ．

コンストラクタについては，その関数の中で 本来記述しない return を記述したらキモイね，というような話題が挙がったりしました．

一度 new 演算子がどのように実装されているか，その部分のソースコードを読んでみることにします．

その他，また Lingr に上がってます．

DeLLa.JS (at Lingr) > Archives > July 05, 2008

懇親会

Firefox3 リリース記念パーティ におジャマする形で行いました．全体で20名ほどになりました．

フォクすけテーマやどちらかというと JavaScript 以外の言語の話，terurouさん のお仕事っぷり （焼肉的な意味で） など，多彩な話題で盛り上がりました．（一部盛り上がりすぎた部分もあったりなかったり．．．）

終盤には，1個のフォクすけぬいぐるみ争奪戦という名のジャンケンが．勝者は読書会にも参加いただいた co_jitさん．ウラヤマシス．量産に期待したいですね．

その後

名駅方面まで徒歩で移動，スペースコロニー SIDE-3 へ．

ガンダムの知識は 9割 5分持ち合わせていませんが，グループで行ったのでその辺りはナントカ．まぁそんな私ですが，ガンダムネタだらけのメニュー （といってもわかりそうなものからまったくワカランものまで）は楽しめました，艦長 （店長のことです） のテンションも相まって．

ただ，個人的にヤバかったのはデスソース（の唐揚げだったか？）．口に触れただけで終わりました （けと食べました）．しかもお冷やも切れていたのでもう．．．

お店を出る頃には ToDo リストに 「ガンダム （無印） を勉強する」 が加えられましたとさ．

そして．．．朝までカラオケしてから解散しました．

おわりに

今回は，最初以外はネットワークのトラブルも特になく，読書会自体に時間を充てることができたかな，と思います．とはいえ，ちょっとした話題の脱線がなかなか戻らなかったり，というところもあったので，その辺りは反省せねば，です．

（開催前に 2時間横になっただけにも関わらず，読書会中ウトウトすることすらなかったのは，個人的にほぼ奇跡でした．その代わり，翌日は昼まで寝てました．）

内容もだんだんと難しく，ひとりでは理解するのに苦労する部分が増えてきました．こうして皆さんの理解力を拝借できるのはホント助かります．あとはサンプルコードとか．そう書きますか，というのが出たりするのでかなり楽しめたりします （理解できれば，の場合もありますが ＞＜）．

次回は 8月 2日（土）に行います．興味のある方はぜひ．

おまけ

懇親会でもちょっと話しに挙がっていたこともあったので，ちょっとドメインをとってみました．

http://js.del.la/

今後は，Googleグループ と並行して充実させていきますかね．

はじめに

もう半月以上前のお話になってしまってますが．．．超今さら感なので，写真だけでも載せておきます．

読書会

読書会の流れはこちらを参照下さい． ＞＜

DeLLa.JS (at Lingr) > Archives > June 07, 2008

とりあえず，特に印象的だったコード 2つほど．

[ 'a', 'b', 'c', 'd', 'e' ][ 0.99999999999999999 ]; // 'b'

[ 'a', 'b', 'c', 'd', 'e' ].sort( function() { return .5 - Math.random(); } ); // ランダムにソート

懇親会

読書会会場近くの 「猿カフェ」 で行いました．とてもオシャレな感じのところで，他のお客さんほとんど女性だったり．

おわりに

その後は数名で名駅方面へ．．．

はじめに

またまた急になってしまいますが．．．

DeLLa.JS JavaScript 第5版 読書会の第 3回を，前回とほぼ同様な流れで行います．

前回告知のコピペな感じですが，以下．

日時

読書会

2008年 6月 7日（土） 13:00～19:00

懇親会（予定）

同日 19:00～

会場

あいちベンチャーハウス．またまた tagawa++！
※ 「またまた tagawa++！」 は会場名ではありません．

会場の諸事情で利用できなくなってしまいました．．．orz
急いで代わりをさがさねば！

人数

20名ほど．

内容

105ページ，第7章「 オブジェクトと配列」，から読み進めます．

参加方法

出欠システムがどうのこうの言ってましたが，まだできておりません．．．＞＜

DeLLa.JS の Googleグループ にメンバー登録していただき，次に示すページ内の 「参加人数」「参加者一覧」 の項目を直接編集していただくことになります．（編集機能は Opera には対応していません．経験談．）

DeLLa.JS JavaScript第5版読書会#3 - DeLLa.JS | Google グループ

その他

• ネットワークに問題がなければ Lingr を使いながら進行していきます．ので，事前にアカウントをとっておくといいかもです．
• 読書会後，懇親会も行う予定です．が，お店は未定です．

詳しくは．．．

以下を参照してみてください．

DeLLa.JS JavaScript第5版読書会#3 - DeLLa.JS | Google グループ

おわりに

開催が近い中での告知でアレですが，興味をお持ちの方は，ぜひ一緒に勉強しましょう．

ご不明な点などありましたら，Googleグループや本エントリへ，コメントなどいただければと思います．

おまけ

先着 1名様にサイ本をお貸しできます．でもできるだけ買っておいてね．

はじめに

昨日，相方 （お仕事的な意味で） に聞かれながらもすぐに答えられなかったので，復習の意味もこめてメモ．

問題

<div id="target">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

id="target" な div 要素内のそれぞれの div 要素に対してクリックイベントを登録したい．．．そんなとき，ついつい次のように書いてしまいます．（自分と相方（お仕事的な意味で）が．）

<script type="text/javascript">
var divs = document.getElementById( ‘target’ )
                   .getElementsByTagName( ‘div’ )
;
for( var i = 0; i < divs.length; i++ ) {
  divs[i].addEventListener( ‘click’, function() {
    alert( i );    
  } );
}
</script>

このコードを実行すると，イベント登録したどの要素 （A，B，C とそれぞれ表示されるはず） をクリックしても，

3

なアラートしか表示されません．

一解決策

こんな風にしてみました．

<script type="text/javascript">
var divs = document.getElementById( ‘target’ )
                   .getElementsByTagName( ‘div’ )
;
for( var i = 0; i < divs.length; i++ ) {
  ( function() {
      var j = i;
      divs[i].addEventListener( ‘click’, function() {
      alert( j );
    } );
  } )();
}
</script>

それぞれの要素をクリックすると，

0

1

2

のようにアラートが表示されるかと．

解説

サイ本 は 4.3.1 項，最初の 2文がすべてを物語っていましたね．

C や C++、Java と異なり、JavaScript にはブロックレベルのスコープがありません。ある関数で宣言された変数は、どのブロックで宣言されたのかにかかわらず「関数全体」で有効です。

David Flanagan，村上 列 訳 『JavaScript 第5版』 オライリー・ジャパン，p.52

おわりに

ここしばらく jQuery （そういえば，1.2.6 が出てますね） を使ってばかりで意識すらしていない状況だったので，改めて勉強し直せました．

クロスブラウザ問題とか 1つのイベントリスナーを使い回すとかは，この際おいときましょう．