月別アーカイブ: 2012年4月

[JS] 外部ファイルの遅延読み込みを容易にする「PreloadJS」

Webコンテンツ制作において、JavaScriptで外部ファイルの読み込みを実現する機会は多々あり、そして中でも外部画像の遅延読み込みとその状況に応じたハンドリングについては、時代の流れもあって最近では特に需要が高まっていると感じます。が、実際、ブラウザ間の差異などの問題もあって、そのあたりをうまく実現しようとすると、結構面倒な処理が必要だったりします。

先日、Webにおけるインタラクティブコンテンツの制作を強力にサポートする「CreateJS」の公式サイトが公開されました。「CreateJS」はグラフィックス、アニメーション、サウンドなどの用途に特化した各種JavaScriptライブラリやツールによって構成されていますが、その中でも個人的にまず興味を持った(今すぐ使えそうだと思った)のが、外部ファイルの読み込みを容易に実現するためのライブラリである、表題の「PreloadJS」です。

「PreloadJS」はCSS、画像、JS、JSONなどなど様々なファイルの読み込みに対応しており、複数キューの管理とその一時停止/レジュームなどの便利な機能が色々と用意されいています。また、画像の読み込みに関しては、XMLHttpRequest level2(XHR2)によるローディングと、古くからあるタグを使ったローディングを環境によって内部的に切り替えるため、XHR2対応環境では(タグによるローディングでは実現できない)読み込みのより詳細な進捗状況を取得することができます。もしかしたら他に同等の性能を持つライブラリがあるのかも知れませんが、僕はこれが初見でしたので、この仕様に特に強く惹かれました。

機能自体は外部ファイルを読み込むというシンプルなものですから、使用方法も簡単。JSの基礎知識とドキュメントさえあれば迷うことは無さそうです。
以下は外部画像を読み込む場合のシンプルな例。

// 読み込む画像のリスト
var manifest = [
	{src: 'images/image0.jpg', id: 'img0'},
	{src: 'images/image1.jpg', id: 'img1'},
	{src: 'images/image2.jpg', id: 'img2'},
	{src: 'images/image3.jpg', id: 'img3'}
];

// 全体の読み込み進捗状況
var overallProgresssHandler = function( e ) {
	console.log( 'loading: ' + Math.floor( e.loaded ) * 100 + '%' );
};

// 全体の読み込み完了
var completeHandler = function( e ) {
	console.log( 'complete.' );
};

// ファイルごとの読み込み進捗状況
var fileProgressHandler = function( e ) {
	console.log( e.id + ' loading: ' + Math.floor( e.progress ) * 100 + '%' );
};

// ファイルごとの読み込み完了
var fileLoadHandler = function( e ) {
	console.log( e.id + ' is Loaded.' );
};

var preload = new PreloadJS();
preload.onProgress = overallProgresssHandler;
preload.onComplete = completeHandler;
preload.onFileProgress = fileProgressHandler;
preload.onFileLoad = fileLoadHandler;
preload.loadManifest( manifest );

↑PreloadJSインスタンスを作ってハンドラをセットし、loadManifest()に読み込みたい画像の配列を渡して呼び出す。画像ファイルごとにid(String)やdata(Object)といったメンバを持たせたObjectを格納すれば、各ハンドラに渡されるイベントオブジェクトからそれらの値を取得できます。

var manifest = [
	'images/image0.jpg',
	'images/image1.jpg',
	'images/image2.jpg',
	'images/image3.jpg'
];
~

↑特にデータを関連付ける必要がない場合は、単純にパスの文字列を格納した配列でもいいですし、

~
preload.loadFile( 'images/image0.jpg' );

↑ファイルがひとつだけならloadFile()にURLを文字列で渡せばOKみたいです。

自分自身まだ「ちょっと使ってみた」程度で、その他の細かいところなどについてはこれから把握していくところなのですが、遅延読み込みの諸問題を吸収しつつ多機能で扱いやすいAPIを提供してくれる「PrelaodJS」は自分が求めていたものに非常に近く、スピードとクオリティを求められる実務においてもとても重宝しそうだと個人的に思ったので、ありがたく使わせて頂こうと思っています。なんか偉そうですね。すいません。

とりあえず、今まで使っていた自作のなんか変なクラスみたいなやつは、もっとJSに対する深い知識が付いた頃に改めて作り直そうかな…。(‘A';)



[JS/CSS] 背面にある要素のマウスイベントを発火する

ある要素の前面に何か別の要素をかぶせるように配置した時、背面にある要素のマウスイベントは基本的には反応しません。(前面の要素のみ)
当然といえば当然の話なのですが、デザインや仕様によっては、実際に構築するまでこの問題に気付きにくい場合があります。ありました。

下記のサンプルは、透過PNGでできた星画像をリンクボタンにかぶるように position:absolute で配置した例です。見た目の上ではかぶっていませんが、それは星PNGの背景が透過されているからで要素同士はしっかりかぶっているため、背面のリンクボタンにマウスを置いてもカーソルの形は変わりませんし、クリックしても無反応です。(ギリギリかぶっていないリンクボタンの上端と右端は反応する)

サンプル.01

これをどうにか前面の星PNGに邪魔されずにリンクボタンをマウスに反応させるようにする、というのがこの記事の本題。
一番簡単なのは、CSSで

.star { pointer-events: none; }

と書いてその名の通り前面になる要素をマウスに反応させなくする方法なんですが、ブラウザの対応状況から考えてとてもクライアントワークでは使えません。そもそもこのプロパティ自体、独自実装なのかな?

で、どうしたもんかと悩んでいたところで、以下のような記事を見つけました。

– 参考ページ: Forwarding Mouse Events Through Layers

前面要素のハンドラで、自身を一瞬消して(display:none)その間に document.elementFromPoint(x,y) から背面要素を取得する、という流れのようです。多分。
なるほど!という事で、早速泥くさい感じで試してみたのが以下のサンプル。

サンプル.02

とりあえず各主要ブラウザのほか、IE6やiPhoneでも動いているようです。(IE6は透過されませんが)
ただ、上記のサンプルが意図した通り動いているのはたまたまで、 document.elementFromPoint は実装によって挙動が異なるので、実際はもっとちゃんと書かないと破綻してしまう可能性大。iPhoneも拡大したりすると動かない。

– 参考ページ: 要素が画面上に見えているかどうかを調べる – by edvakf in hatena

記事タイトルが示す結果とは違うけど、とりあえず解決のメドがついたのでよしとしたいと思います。もっと根本的な解決方法をご存知の方がいましたら教えて下さいませ。

Flashなら target.mouseEnabled=false で済むから簡単なんだけどなあ…。