サイトトップ

Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

PreloadJSで外部ファイルを読込む

ID: FN1306001 Technique: HTML5 and JavaScript Library: PreloadJS 0.3.1

*【0.3.1】PreloadJS 0.3.1で新たに加わった項目。
LoadQueue()コンストラクタ
文法 LoadQueue(useXHR, basePath)
概要 データのプリロードのためのLoadQueueインスタンスをつくる。
引数

useXHR − LoadQueueインスタンスがロードするとき、XMLHttpRequestを用いるか、それともHTMLタグによるのかを示すブール(論理)値。デフォルト値はtruefalseが与えられると、LoadQueueオブジェクトはタグを用いてロードし、必要があればXMLHttpRequestにフォールバックする。

basePath【0.3.1】− キューに入れられた項目をロードするとき、それらのソースの前に加えられるパスの文字列。ただし、LoadQueue.loadFile()やLoadQueue.loadManifest()メソッドで別のパスが与えられると、コンストラクタではなくその定めが用いられる。

LoadQueue.loadFile()メソッド
文法 LoadQueueオブジェクト.loadFile(file, loadNow, basePath)
概要 ひとつのファイルを読込む。ファイルの読込みは、キューに加えられる。したがって、LoadQueue.loadFile()メソッドを複数のファイルについて呼出せば、それらのファイルは順にロードされる。複数のファイルの読込みを一度で定めるには、LoadQueue.loadManifest()メソッドを用いる。キューを空にするには、LoadQueue.close()メソッドを呼びだす。
引数

file − 読込むファイルを定めるパスの文字列、またはつぎのプロパティが含まれたObjectインスタンス。オブジェクトには、少なくともsrcプロパティが定められていなければならない。

  • src: 読込むファイルのパスを示す文字列(推奨)。あるいは、HTMLタグも用いることができる。
  • type: 読込むファイルの種類を示すLoadQueueクラスに定数として備えられた文字列(表001)。PreloadJSは、読込むファイルの拡張子で形式を判別する。けれど、PHPスクリプトなど標準的でない形式のときには、typeプロパティで定めるのがよい。
  • 表001■読込むファイルのtypeプロパティを定めるLoadQueueクラスの定数
    LoadQueueクラスの定数 ファイル形式 おもな拡張子 文字列
    BINARY バイナリ - binary
    CSS CSS .css css
    IMAGE 画像 .png/.gif/.jpg image
    JAVASCRIPT JavaScript .js javascript
    JSON JSON .json json
    JSONP【0.3.1】 JSONP .jsonp jsonp
    SOUND サウンド .mp3/.ogg/.wav sound
    SVG SVG .svg svg
    TEXT テキスト .txt text
    XML XML .xml xml
  • id: 読込まれたオブジェクトを参照するための識別子とする文字列。
  • callback【0.3.1】: JSONPのリクエストで、ロードし終えたときに呼出すメソッドを定める。
  • data: 読込まれたオブジェクトに任意に加えるObjectインスタンス。
  • method【0.3.1】: サーバーにデータを送るとき、リクエストにGETとPOSTのどちらを使うのか定める。デフォルトはGET。
  • values【0.3.1】: サーバーに送る名前と値の組をもつオブジェクト。

loadNow − すぐに読込むかどうかを定めるブール値。falseを渡すと、LoadQueue.load()メソッドの呼出しを待つ。デフォルト値はtrueで、直ちにロードする。LoadQueue.setPaused()メソッドでキューを一時停止していても、この引数にtrueを渡すと読込みが再開される。

basePath【0.3.1】− ファイルをロードするとき、それらのソースの前に加えられるパスの文字列。ロードする項目には変更は加わらない。

戻り値 なし。
LoadQueue.loadManifest()メソッド
文法 LoadQueueオブジェクト.loadManifest(manifest, loadNow, basePath)
概要 複数のファイルを読込む。それらのファイルの読込みは、キューに加えられる。したがって、LoadQueue.loadManifest()メソッドをさらに複数回呼出すこともできる。キューに加えられたファイルは順にロードされる。ひとつのファイルを読込むときは、LoadQueue.loadFile()メソッドを用いてもよい。キューを空にするには、LoadQueue.close()メソッドを呼びだす。
引数

manifest − ロードするファイルをエレメントに納めた配列。エレメントのファイルは、読込むファイルを示すパスの文字列、またはつぎのプロパティが含まれたObjectインスタンスのいずれかで定める。オブジェクトには、少なくともsrcプロパティが定められていなければならない。

  • src: 読込むファイルのパスを示す文字列(推奨)。あるいは、HTMLタグも用いることができる。
  • type: 読込むファイルの種類を示すLoadQueueクラスに定数として備えられた文字列(前掲表001)。PreloadJSは、読込むファイルの拡張子で形式を判別する。けれど、PHPスクリプトなど標準的でない形式のときには、typeプロパティで定めるのがよい。
  • id: 読込まれたオブジェクトを参照するための識別子とする文字列。
  • callback【0.3.1】: JSONPのリクエストで、ロードし終えたときに呼出すメソッドを定める。
  • data: 読込まれたオブジェクトに任意に加えるObjectインスタンス。
  • method【0.3.1】: サーバーにデータを送るとき、リクエストにGETとPOSTのどちらを使うのか定める。デフォルトはGET。
  • values【0.3.1】: サーバーに送る名前と値の組をもつオブジェクト。

loadNow − すぐに読込むかどうかを定めるブール値。falseを渡すと、LoadQueue.load()メソッドの呼出しを待つ。デフォルト値はtrueで、直ちにロードする。LoadQueue.setPaused()メソッドでキューを一時停止していても、この引数にtrueを渡すと読込みが再開される。

basePath【0.3.1】− ファイルをロードするとき、それらのソースの前に加えられるパスの文字列。ロードする項目には変更は加わらない。

戻り値 なし。
LoadQueue.close()メソッド
文法 LoadQueueオブジェクト.close()
概要 実行中のキューを閉じて、空にする。ダウンロードが始まっていないデータのロードは止める。ただし、現行バージョンでは、実行中のロードは閉じず、イベントも呼出される。
引数 なし。
戻り値 なし。

説明

PreloadJSで外部ファイルを読込むときには、おもにLoadQueueクラスを用いて、大きく3つの手順で進めます。

  1. LoadQueueインスタンスをつくる。
  2. 読込み時の処理をイベントリスナーで定める。
  3. インスタンスに外部ファイルを読込む。

第1に、外部ファイルの読込みはおもにLoadQueueオブジェクトで扱いますので、そのインスタンスをつくります。引数は、読込みに「XMLHttpRequest」(XHR)を使うかどうかのブール(論理)値です。デフォルト値はtrueですので、HTMLタグを用いる場合には必ずfalseを与えてください。

第2に、LoadQueueオブジェクトでファイルを読込むとき、ロードできなかった場合も含めて、いくつかの段階を踏みます。それらの経過は、イベントとして捉えられます(表002)。イベントに応じて行いたい処理は、EventDispatcher.addEventListener()メソッドでリスナーに加えます。このうち、ファイルが読込み終わったことを示すLoadQueue.fileloadLoadQueue.completeがよく用いられるイベントでしょう。

表002■LoadQueueクラスに定められたイベント
LoadQueueイベント いつ起こるか
complete すべてのファイルのデータを読込み終わったとき。
error 読込みにエラーが生じたとき。
fileload ひとつのファイルのデータを読込み終わったとき。
fileprogress ファイルから読込んでいるデータに変化が生じたとき。
filestart【0.3.1】 ひとつのファイルの読込みが始まったとき。
loadstart データのロードが始まったとき。
progress 読込みの状況に変化が生じたとき。

第3に、LoadQueueオブジェクトにファイルを読込みます。ファイルをひとつずつ加えるときはLoadQueue.loadFile()、配列でまとめて渡すにはLoadQueue.loadManifest()メソッドを呼出します。ファイルは、パスの文字列か、プロパティsrcにパスを定めたオブジェクトで与えます。ファイルをオブジェクトで定めるときは、パスのsrcのほかにもプロパティが加えられます(前掲シンタックス参照)[*1]

両メソッドにはPreloadJS 0.3.1から新たに第3引数(basePath)で、パスの起点が渡せるようになりました。このパスは、LoadQueue()コンストラクタの第2引数でも与えられます。ふたつのメソッドあるいはコンストラクタでパスの起点を引数で渡すとき、守らなければならないことがふたつあります[*2]

  1. パスの起点(basePath)は、"/"で始めなければならない。ドメインやダブルドット(..)は使えない。
  2. パスの起点を与えたとき、ソースパス(src)はファイル名だけでなく少なくともひとつのディレクトリを前に加える。

[*1] PreloadJS 0.3.1のドキュメントでは、LoadQueue.loadManifest()メソッドの第1引数に渡すオブジェクトについて、callbackやmethodおよびvaluesのプロパティが記されていません。けれど、このオブジェクトはLoadQueue.loadFile()メソッドの第1引数と共通ですので、0.3.0からの改訂が漏れたものと思われます。

[*2] CreateJS Support「The basePath option of LoadQueue class does not work」の議論(英語)をご参照ください。


PreloadJSのLoadQueueクラスで外部画像(PNG)ファイルをひとつ読込み、Canvasの真ん中に置いてみます(図001)。JavaScriptコードは、後にコード001としてまとめて掲げました。その中から前項「説明」の「3つの手順」を抜書きしたのがつぎのステートメントです。

  1. var file = "images/Pen.png";
  1. var myBitmap = new createjs.Bitmap(file);
  2. var loader = new createjs.LoadQueue(false);
  3. loader.addEventListener("fileload", draw);
  4. loader.loadFile({src:file, data:myBitmap});

図001■PreloadJSで読込まれた画像がCanvasの真ん中に置かれる
図001

PNG画像ファイル(Pen.png)は、HTMLドキュメントと同じ場所のフォルダ(images)に納められているものとします(第2行目)。LoadQueueインスタンスは、XMLHttpRequestを使わずにつくりました(第6行目)。ファイルひとつの読込みは、LoadQueue.fileloadイベント(前掲表002)で待ちます(第7行目)。そして、ひとつのファイルを読込むのは、LoadQueue.loadFile()メソッドです(第8行目)。引数のファイルはオブジェクトで与え、プロパティsrcとdataを加えました。

LoadQueue.fileloadイベントのリスナー関数(draw())は、画像イメージが読込まれたBitmapインスタンスの位置決めをして、Canvasに描きます。関数の定めは、つぎに抜書きしたとおりです。

  1. function draw(eventObject) {
  2.   var instance = eventObject.item.data;
  3.   var myImage = eventObject.result;
  4.   instance.regX = myImage.width / 2;
  5.   instance.regY = myImage.height / 2;
  6.   stage.update();
  7. }

Bitmapインスタンスの参照は、LoadQueue.loadFile()メソッドに渡すオブジェクトのdataプロパティに与えました(第8行目)。すると、LoadQueue.fileloadイベントのリスナー関数(draw())からは、イベントオブジェクトのitemプロパティから同じdataというプロパティで取出せます(第13行目)。インスタンスを真ん中に置くには、画像イメージの幅と高さを知らなければなりません。これも、イベントオブジェクトからresultというプロパティで、image要素の参照が得られます(第14行目)。必要な参照がとれましたので、インスタンスの位置合わせと描画を行えば(第15〜17行目)、リスナー関数の役割は済みます。

JavaScriptコード全体は、つぎのコード001のとおりです。実際の動きが確かめられるように、jsdo.itにもコードを掲げました。

コード001■PreloadJSで読込んだ画像をCanvasの真ん中に描く
  1. var stage;
  2. var file = "images/Pen.png";
  3. var canvasElement = document.getElementById("myCanvas");
  4. stage = new createjs.Stage(canvasElement);
  5. var myBitmap = new createjs.Bitmap(file);
  6. var loader = new createjs.LoadQueue(false);
  7. loader.addEventListener("fileload", draw);
  8. loader.loadFile({src:file, data:myBitmap});
  9. myBitmap.x = canvasElement.width / 2;
  10. myBitmap.y = canvasElement.height / 2;
  11. stage.addChild(myBitmap);
  12. function draw(eventObject) {
  13.   var instance = eventObject.item.data;
  14.   var myImage = eventObject.result;
  15.   instance.regX = myImage.width / 2;
  16.   instance.regY = myImage.height / 2;
  17.   stage.update();
  18. }



作成者: 野中文雄
更新日: 2013年6月20日「説明」にパスの起点(basePath)について補足。
作成日: 2013年6月10日


Copyright © 2001-2013 Fumio Nonaka.  All rights reserved.