nje’s jquery-tmpl at master – GitHub
jQueryのテンプレートプラグインは幾つか公開されていますが、
中でもこれはjQueryに馴染んだ記法になるので、使い易いのではないでしょうか。
というわけで、軽くご紹介。

HTML5のlocalStorageを利用したToDoリストの作り方が
Nettus+のビデオチュートリアルで公開されています。
今流行りのHTML5ですよ、奥さん。

gist: 357981 – A better coding convention for lists and object literals in JavaScript- GitHub

JavaScriptでオブジェクトもしくは配列リテラルを記述する際に
「,」の有無でエラーになるのは、Web開発者にとって身近なストレスでしょう。
それをちょっと独特な記法で避けようという試みです。

マイリスペクト「地獄のミサワの「女に惚れさす名言集」」
にインスパイアされて描いてみました。ペンタブほしい。

さて、Web制作者にとってIE6への対応はかなりの足枷。
出来るだけIE6ユーザーにはモダンブラウザに乗り換えてもらいたい所ですね。
そこで、IE6で閲覧すると、アップデートを促すメッセージを表示させる。
そのための手法をいくつかまとめてみました。

XMLでリストを読み込み、画像をロードする…
というのはFlashコンテンツを作る上でかなり頻出する処理ですが、
それを簡易化する「BulkLoader」が広く知られています。

今日はXML読み込みからBulkLoaderによる一括ロードまでを
軽く備忘録しておきます。

bulk-loader – Project Hosting on Google Code

BulkLoaderは、複雑なローディング処理をより簡単に行う為に書かれたAS3ライブラリです。

早速、手順を追って書いてみるとします。

1. ライブラリをインポートするなど

import br.com.stimuli.loading.*;

保存場所に注意。

private var imagelist:XMLList;

URLのリストを格納しておく用の変数を準備しておきます。

2. XMLをロードする

XMLのロードはBulkLoaderを使わずにシンプルに書きます。

var ul:URLLoader = new URLLoader;
ul.addEventListener(Event.COMPLETE, onXmlLoaded);
ul.load( new URLRequest("list.xml") );

読み込むXMLはこんなのにしておきます。
実際はもうちょっと複雑な物になると思われますが…

<?xml version="1.0" charset="utf-8" ?>
<data>
    <items>
        <item id="1">images/a.png</item>
        <item id="2">images/b.png</item>
        <item id="3">images/c.png</item>
    </items>
</data>

3. 読み込んだXMLを処理する

private function onXmlLoaded(e:Event):void {
    var data:XML = new XML(e.target.data);
    imagelist = new XMLList( data.items.item );
    var bloader = new BulkLoader("imageloader");
    var item:*;
    for each( item in imagelist) {
        bloader.add( item.toString() );
    }
    bloader.addEventListener(BulkProgressEvent.COMPLETE, onImagesLoaded);
    bloader.addEventListener(BulkProgressEvent.PROGRESS, onImageProgress);
    bloader.addEventListener(BulkLoader.ERROR, onImageError);
    bloader.start();
}

BulkLoaderのコンストラクタには、ユニークな名前をつけてあげます。
（ここではimageloader）

var bloader = new BulkLoader("imageloader");

itemにはURL文字列が格納されたXMLオブジェクトが入っているので、
toString() でStringに変えてあげましょう。
URLをBulkLoader.addにつっこむと、BulkLoaderの読み込みリストに追加されます。

bloader.add( item.toString() );

イベントは、completeとprogressが登録できます。
APIドキュメントのイベントには記述されていませんが、errorイベントも受け取る事もできます。

BulkLoader.startで読み込み処理が開始されます。
URLLoader.loadみたいなもの。

4. イベントハンドラ

progressイベント

private function onImageProgress(e:Event):void {
    trace( Math.floor((e.target.percentLoaded * 100)) + "%" );
}

BulkLoader.parcentLoaded で全体の読み込み率を取得できます。
BulkLoader.bytesTotal, bytesLoadedもあるのでこちらも活用できますね。

errorイベント

private function onImageError(e:Event):void {
    trace(e.target.getFailedItems());
}

読み込みエラーが発生した時に呼ばれます。
BulkLoader.getFailedItemsでエラーの出たアイテムの情報が取得できます。

5. 完了時の処理

private function onImagesLoaded(e:Event):void {
    var item:*;
    var bmp:DisplayObject;
    var margin:int = 10;
    var point:Point = new Point( margin, margin );
    for each( item in imagelist ) {
        bmp = addChild( e.target.getBitmap(item.toString() ) );
        bmp.x = point.x;
        bmp.y = point.y;
        point.x += bmp.width + margin;
    }
}

10ピクセルの余白ごとにぺたぺたと横に画像を連ねるだけの簡単な処理をしています。
ポイントは、BulkLoader.getBitmap()。

bmp = addChild( e.target.getBitmap(item.toString() ) );

このメソッドに登録時につっこんだURLを入れると、
そのURLの画像をBitmapオブジェクトで引っ張ってきてくれます。なんて便利な。

他の形式で受け取りたい場合は、色々と用意されています。
getMovieClip, getSound, getSprite, getText,
getXML, getBitmapData, getContent, getBinary
などなどなど。
汎用的なgetなんていうメソッドもあります。
読み込んだファイルに応じて最適なものを使えば良いですね。

より詳しくは公式のドキュメントをご覧ください。
Wiki Pages – bulk-loader – Project Hosting on Google Code

本当は自分で似たようなのを書いてたんですが、
あまりにもこっちが便利なので愛用することに。
書く前に検索すればよいのですが、勉強になるので結果オーライです。

人は忘れていく生き物。
必要になる度に細部を忘れていたりしてリファレンス見たりしちゃうので、
この際ログっておきます。AS3でのXMLロード。

この記事の情報は古くなっています。
$.proxyを利用するか、Function.prototype.bind （あるいはそのpolyfill）を利用しましょう。

最近でこそjQueryを利用する機会が増えて来ましたが、
以前はよくPrototype.jsを好んで利用していました。
その最も大きな理由としてbind/bindAsEventListenerの存在があります。
Prototype API documentation | Function class

要するにfunctionのスコープをあるオブジェクトに固定したい場合に使うのですが、
イベントハンドラに登録する時なんかに結構重宝します。
でもコレだけのためにPrototype.jsに限定されちゃうのもアレなので
似たような動作をする拡張を書いてみました。

表題の通りにやってみようとしたところ、IEでうまく動作しなかったので備忘録。

この記事の情報は古くなっています。
Require.js や head.js のコードを参考にしてください。

JavaScriptの動的ロードと言えば、「RequireJS」が公開されています。
cf) 外部jsを読み込む事ができるJavaScriptライブラリ「RequireJS」 | Web活メモ帳

たまたま自分が書いていたのと同じような内容で、オッと思いましたが
せっかく書いてしまったものなのでメモっておきます。

人は忘れる生き物。
今日はscript要素でloadイベントを検知する方法など。