feeds2013/05/28カテゴリー:JavaScript新しくなったPreloadJSのLoadQueueクラスで外部ファイルを読み込もうTweetPreloadJSは、画像・音声・XML・JS・CSSなどの外部ファイルの読み込みをサポートしてくれるJavaScriptライブラリです。CreateJSのサイトからダウンロードできます。0.3.xでは仕様が大幅に変更になりました。そこで新しくなったPreloadJSの変更点や基本的な使い方をレポートしたいと思います。0.3.xの最も大きな変更点は、メインとなるクラス名がPreloadJSからLoadQueueへ変わった点です。0.2以前と似ているため、それほど違和感なく移行することができると思います。下記のサンプルでは、LoadQueueインスタンスを生成し、loadFile()で画像ファイルを読み込んでいます。loadFile()の引数はオブジェクト形式で、srcはファイルのパスになります。idを指定しておくことでファイルの判別や取得に利用できます。サンプルでは、読み込んだファイルをLoadQueueインスタンスのgetResult()で取得しています。getResult()の引数にloadFile()で指定したidまたはsrcを指定することで読み込んだファイルを取得できます。以前のバージョンでは、getResult()の戻り値のresultプロパティから読み込んだファイルを取得していましたが、getResult()の戻り値が読み込んだファイルとなるように仕様が変更されたようです。0.6.xと同様にイベントリスナーが導入されました。イベントリスナーの使い方については、「新しくなったCreateJSのイベントリスナーを理解しよう」で解説していますので、よろしければ合わせてご覧下さい。複数のファイルを読み込む場合は、loadManifest()が便利です。loadManifest()の第1引数に読み込むファイルの情報を保持したオブジェクトを配列に入れて渡すことで、複数のファイルを同時に指定することができます。loadFile()とloadManifest()は第2引数のオプションを持っています。第2引数にfalseを指定すると読み込み開始が自動では行われなくなり、LoadQueueインスタンスのload()メソッドで読み込みが開始されるようになります。第2引数は省略可能でデフォルト値はtrueです。PreloadJSの旧バージョンではファイルのパスにクエリーを付加した場合、typeでファイル形式を指定する必要がありましたが、新バージョンではクエリーを付加した場合も拡張子でファイル形式を判別できるように改良されたようです。下記のサンプルでは、loadManifest()を使って複数の画像をロードし、"fileload"イベントのリスナー関数で受け取ったイベントオブジェクトのresultプロパティから読み込んだファイルを取得しています。PreloadJSの旧バージョンでは、"fileload"のイベントオブジェクト.idで読み込んだファイルを判別していましたが、新バージョンではイベントオブジェクト.item.idで判別するように変更されたようです。loader.load();}SampleLoadQueueクラスのイベントLoadQueueクラスのイベントを見てみましょう。どのイベントでもリスナー関数に渡されるイベントオブジェクトから情報を得ることができます。共通の項目として、typeでイベントの種類、targetでイベントを送出したLoadQueueインスタンスの参照が得られます。loadStart読み込み開始時に送出されます。filestart個々のファイルの読み込み開始時に送出されます。イベントオブジェクトのitemプロパティから読み込みの始まったファイルの情報が得られます。errorエラーが発生した際に送出されます。イベントオブジェクトのitemプロパティからエラーとなったファイルの情報が得られます。progress読み込み中に継続的に送出されます。loadedプロパティから全体の読み込み状況を0〜1の比率で取得できます。fileprogress個々のファイルの進行状況が変化したときに送出されます。loadedプロパティから個々のファイルの読み込み状況を0〜1の比率で取得できます。fileload個々のファイルの読み込み完了時に送出されます。イベントオブジェクトのitemプロパティから読み込んだファイルのidやsrcが取得できる他、resultプロパティではHTMLタグやパース済みのデータ、rawResultプロパティで生データを取得できます。completeすべてのファイルの読み込み完了時に送出されます。PreloadJSを使ったローディングのサンプルPreloadJSのLoadQueueクラスを使って、簡単なローディングのサンプルを作ってみました。外部ファイルの読み込み中にローディングのパーセンテージを表示し、読み込みが終わるとスライドショーが始まります。スワイプでスライドを切り替えられます。SampleLoadQueueインスタンスの生成とXMLの読み込みサンプルの処理の流れをステップ毎に見てみましょう。LoadQueueインスタンスを生成し、loadFile()でXMLファイルを読み込みます。XMLには、コンテンツで使用するjsonファイル、jsファイル、画像ファイルのパスを記述しています。LoadQueueインスタンスの"fileload"イベントにXMLの読み込みが終わった時に実行するリスナー関数を登録しておきます。id:&quot;xml&quot;});その他ファイルの読み込みとロード状況の取得XMLの読み込みが終わったら、読み込んだXMLをパースしてloadManifest()の引数に渡す配列を作成します。その他のファイルの読み込みを始める前に、より正確な読み込みのパーセンテージを取得するため、LoadQueueインスタンスのremoveAll()メソッドで先程ロードしたXMLファイルを削除しておきます。読み込み状況は、"progress"イベントのリスナー関数progressHandler()で取得しています。イベントオブジェクトのprogressプロパティから読み込みの進行状況を取得し、ロードのパーセンテージを表示するProgressArcインスタンスのupdate()メソッドに渡します。_loader.loadManifest(manifest);}読み込みのパーセンテージを表示する下記は、読み込みのパーセンテージを表示するProgressArcクラスのupdate()メソッドです。プログレスバーとして、Graphicsクラスのarc()メソッドでロード状況を表示するサークルを描画します。Textクラスで読み込みのパーセンテージを表示しています。