tilamic.jsの使い方その５・'.filter()'メソッド

tilamicjs Javascript

前回の記事に続きtilamic.jsのメソッドについての解説です。

この記事ではtilamic.jsの鍵となる機能の一つである'.filter()'メソッドについて解説します。
この記事の内容はtilamic.js Method-filterとほぼ同じです。

tilamic.jsのアピールポイントの一つがどのタイルをどのタイミングで回転させるかをカスタマイズできることなのですが、この機能の実現に重要な役割を果たすのが'.filter()'メソッドです。
tilamic.jsの各タイルは'isActive'という状態を表す属性をもっており、この属性値がtrueであれば.flip()メソッドや.seqFlip()メソッドの影響を受けるがfalseだとその影響を受けなくなります。
.filter()メソッドはこの'isActive'の状態を変更するメソッドです。

書式

.filter(function)

このメソッドは1つだけ引数を取りその型は関数型です。
.filter()メソッドを理解するにはjQueryの.filter()メソッドを想像していただくとよいと思います。jQueryの.filter()メソッドは引数に関数を与えると、その関数がtrueを返すような条件のDOMエレメントだけを残した新たなjQueryオブジェクトを作成します。
tilamic.jsの.filter()メソッドはこのDOMエレメントがタイルに置き換わったものと考えることができます。(厳密にはタイルの状態を変更するのであって要素を取り除くのではありませんが。)

.filter()メソッドの引数として与えられた関数にはタイルの通し番号を表すindex、列を表すcol、行を表す、rowという引数がこの順で与えられます。

tilamic.filter(function(index, col, row){
	return col == 0;
})

例えば上記の内容ですとcolが0のタイル(一番左の列のタイル)以外のタイルの'isActive'をfalseにします。その結果次に来る.flip()などのメソッドが一番左の列のタイルにしか影響しなくなります。

動作デモ
(動作の様子はこちらでご覧いただけます。)

<div id="tiles" style="width: 60%;" class="preview">
	<img src="../img/photo1.jpg" alt="photo1" />
	<img src="../img/photo2.jpg" alt="photo2" />
	<img src="../img/photo3.jpg" alt="photo3" />
	<img src="../img/photo4.jpg" alt="photo4" />
</div>
<script>
	$(function(){
		var tilamic = new Tilamic('#tiles', {
			'aspectRatio': 853/ 1280
		});
		
		var imgID = 1;
		setInterval(function(){
			tilamic.filter(function(index, col, row){
				return col == 0;
			}).seqFlip(imgID % 4);
			imgID++;
		}, 2000);
	});
</script>

'.filter()'メソッドはタイルの'isActive'の状態を変更した「新たなTilamicオブジェクト」を作成しているのであり、呼び出し元のオブジェクトを変更しているのではありません。
そのため次のような記述が可能です。

(動作の様子はこちらでご覧いただけます。)

<div id="tiles2" style="width: 60%;" class="preview">
	<img src="../img/photo1.jpg" alt="photo1" />
	<img src="../img/photo2.jpg" alt="photo2" />
	<img src="../img/photo3.jpg" alt="photo3" />
	<img src="../img/photo4.jpg" alt="photo4" />
</div>
<script>
	$(function(){
		var tilamic = new Tilamic('#tiles2', {
			'aspectRatio': 853/ 1280
		});
		var checkerA = tilamic.filter(function(index, col, row){
			return (col + row) % 2 == 0;
		});
		var checkerB = tilamic.filter(function(index, col, row){
			return (col + row) % 2 == 1;
		});
		
		var imgID = 0;
		setInterval(function(){
			imgID++;
			checkerA.flip(imgID % 4);
			setTimeout(function(){
				checkerB.flip(imgID % 4);
			}, 500);
		}, 2000);
	});
</script>

この例ではチェスのボードのように市松模様ににタイルを選択した'checkerA'が参照するTilamicオブジェクトと、'isActive'の状態を入れ替えた'checkerB'というTilamicオブジェクトを作成して時間差でタイルを回転させています。

次回は'.filter()'と並んでtilamic.jsの重要機能の一つである'.setOrigin()'メソッドを解説したいと思います。