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

tilamicjs Javascript

今回も引き続きtilamic.jsの解説記事です。

この記事では前回解説した'.filter()'メソッドと並んでtilamic.jsの鍵である'.setOrigin()'メソッドについて解説します。
この記事の内容はtilamic.js Method-setoriginとほぼ同じです。

'.setOrigin()'メソッドはアクティブなタイルの'transform-origin'プロパティをまとめて設定するメソッドです。
前回解説した'.filter()'メソッドが「どのタイルを回転させるか決定するメソッドだったのに対し、'.setOrigin()'メソッドは「どこを中心に回転させるか」を決定します。
'.flip()'メソッドや'.seqFlip()'メソッドのオプションに'isAxisX'というものがありこれは回転の軸を決定するオプションであると説明しましたが、今回説明する「回転の中心」はそれとは異なる概念です。
'isAxisX'は単に回転の軸が縦か横かを指定するものであるのに対し、'.setOrigin()'は「その回転軸がエリア上のどこにあるか」を指定するものであると考えることができます。
数学的に説明すると'.setOrigin()'メソッドによって指定される点を「原点」としてX軸とY軸を描いたものが'isAxisX'で指定できる回転軸となります。

書式

.setOrigin(keyword)

このメソッドは引数を一つだけ取りその方は文字列型です。
引数としてとれる文字列は次の4種類に限られます。

'each': タイルの回転の中心をそのタイルの中心に設定する
'centerOfAll': タイルの回転の中心をエリアの中心に設定する
'centerOfRow': タイルの回転の中心をそのタイルが属している行の中心に設定する
'middleOfCol': タイルの回転の中心をそのタイルが属している列の中心に設定する

Tilamicオブジェクトが作成された直後は'each'の状態になっています。

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

<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;
		var isAxisX = false;
		var originType = ['each', 'centerOfAll', 'centerOfRow', 'middleOfCol'];
		setInterval(function(){
			tilamic.setOrigin(originType[imgID % 4]).flip(imgID % 4, {
				'isAxisX': isAxisX
			});
			isAxisX = !isAxisX;
			imgID++;
		}, 2000);
	});
</script>

'.setOrigin()'メソッドはタイルの回転の中心を変更した「新たなTilamnicオブジェクト」を作成しているのであり、呼び出し元のオブジェクトを変更しているのではありません。

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()'メソッドを解説したいと思います。

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

tilamicjs Javascript

前回のtilamic.jsの使い方その３・'.flip()'メソッドに続きtilamic.jsのメソッドについての解説です。

この記事ではタイルを順に回転させるメソッドである.seqFlip()について解説します。
この記事の内容はtilamic.js Method-seqflipとほぼ同じです。

書式

.seqFlip(imgID[,options] )

第一引数の'imgID'はタイルの回転後の画像を指定するIDです。これについては前回解説した.flip()メソッドの'imgID'と全く同じなのでそちらをご覧ください。

第二引数の'options'はオブジェクトの形でオプションを指定します。指定できるオプションは4つあり、'delay'、'isZtoA'、'isAxisX'、'isReverse'です。

'delay'はあるタイルが回転してから次のタイルが回転するまでの時間です。単位は'ms'です。デフォルトは100です。

'isZtoA'はタイルが回転する順序で、trueを指定するとタイルが回転する順序が逆になります。右下のタイルから左上へ向かって順に回転するということです。デフォルトはfalseです。

'isAxisX'はタイルの回転軸の指定です。このオプションは前回解説した.flip()メソッドの同名オプションと同じです。

'isReverse'はタイルの回転方向です。これも前回解説した.flip()メソッドの同名オプションと同じです。

.seqFlip()メソッドを実行するとアクティブなタイルが順番に回転します。タイルが「アクティブ」であるか否かは.filter()メソッドによって決まるのですが、これについては.filter()メソッドの解説の際に詳しく説明したいと思います。タイルは基本的には左上から右下へ向かって順に回転します。オプションで'isZtoA'がtrueであれば逆順に回転します。

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

<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 isZtoA = false;
		var imgID = 1;
		setInterval(function(){
			tilamic.seqFlip(imgID % 4, {
				'isZtoA': isZtoA
			});
			imgID++;
			isZtoA = !isZtoA;
		}, 3000);
	});
</script>

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

tilamicjs Javascript

昨日のtilamic.jsの使い方その２・コンストラクタのオプションに続くtilamic.jsの使い方解説です。

この記事では実際にタイルを回転させるメソッドである.flip()について紹介します。
この記事の内容はtilamic.js Method-flipとほぼ同じです。

書式

.flip(imgID[,options])

第一引数の'imgID'はタイルの回転後に表示する画像を指定するIDです。これはHTMLにコーディングされている画像の並び順と'img'タグの'alt'属性によって決定されます。

<div id="tiles">
  <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>

例えばHTMLが上記のようであった場合、最初の画像は

tilamic.flip(0);

または

tilamic.flip('photo1');

という二通りの方法で指定できます。

第二引数'options'はオブジェクトの形でオプションを指定します。指定できるオプションは2つあり、'isAxisX'と'isReverse'です。
'isAxisX'はタイルが回転する軸の指定です。trueであれば回転軸がX軸となり、falseであればY軸となります。デフォルトはfalseです。
'isReverse'は回転の向きです。trueであれば回転方向が逆になります。デフォルトはfalseです。

.flip()メソッドを実行するとアクティブなタイルが一斉に回転します。タイルが「アクティブ」であるか否かは.filter()メソッドによって決まるのですが、これについては.filter()メソッドの解説の際に詳しく説明したいと思います。
初期状態ではすべてのタイルがアクティブであるため.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 isAxisX = true;
		var imgID = 1;
		setInterval(function(){
			tilamic.flip(imgID % 4, {
				'isAxisX': isAxisX
			});
			imgID++;
			isAxisX = !isAxisX;
		}, 3000);
	});
</script>

以上が.flip()メソッドの解説です。
次回はタイルを順に回転させる.seqFlip()メソッドについて解説したいと思います。

tilamic.jsの使い方その２・コンストラクタのオプション

tilamicjs Javascript

先日のtilamic.jsの使い方その１・オブジェクトの作成と基本の回転に続き、tilamic.jsの使い方解説です。

この記事ではインスタンス作成時のコンストラクタのオプションについて紹介します。
この記事の内容はtilamic.js Constructor Optionsとほぼ同じです。

rows

'rows'はタイルを縦方向に何行設置するかを指定するオプションです。

デフォルト: 3
型: 整数
cols

'cols'はタイルを横方向に何列設置するかを指定するオプションです。

デフォルト: 3
型: 整数

つまりタイルの合計が何枚になるかは'rows'と'cols'の積で決まります。(デフォルトならば3*3=9枚)
タイルの枚数は処理の負荷に直結しますので多くしすぎないようにしてください。

attrPrefix

'attrPrefix'はtilamic.jsが使用するHTMLのクラス属性に付与するプリフィクスを指定します。tilami.jsが使用するクラス名は通常でも'tilamic'の文字列を含むので名前が衝突することはないと思いますが、コーディングルール等でプリフィクスを指定する必要がある場合に使います。

デフォルト:'' (空文字列)
型: 文字列
aspectRatio

'aspectRatio'はコンテンツの横幅に対する縦の長さの比率です。縦横両方をCSSで指定することもできますが、ウィンドウサイズが変化した際に自動で縦横比を維持したままコンテンツの大きさを変えるタイプのレスポンシブデザインを採用する場合にはCSSで縦の長さを指定するのではなくこのオプションを使用します。

デフォルト: null
型: 小数点型
isCSS3Supported

'isCSS3Supported'はブラウザのCSS3サポート状況に応じた動作を強制指定するオプションです。この値がtrueであればCSS3を用いたタイルの回転の動作が行われ、falseであればCSS3未対応ブラウザ向けの代替動作を行います。通常このオプションは自動でブラウザに応じた適切な値に設定されますので手動で設定する必要はありません。
コンテンツの開発中などCSS3対応のブラウザで未対応ブラウザの動作を確認したい場合にfalseに設定してシミュレートするといった使い方ができます。

デフォルト: CSS3の必要な機能をサポートするブラウザであればtrue、そうでなければfalse
型: ブーリアン

以上がコンストラクタで指定できるオプションです。'attrPrefix'と'isCSS3Supported'以外のオプションを指定した様子はtilamic.jsのトップのデモで確認いただけます。
次回の記事ではメソッドをご紹介したいと思います。

tilamic.jsの使い方その１・オブジェクトの作成と基本の回転

tilamicjs Javascript

昨日公開したtilamic.jsですが、やはり作ったからには使ってもらいたいという思いがありそのためにデモとドキュメントは英語で作成しました。
tilamic.jsのデモとドキュメント

そこでこのブログでは日本語で基本的な使い方を何回かに分けて書きたいと思います。
この内容はtilamic.jsで解説している内容とほぼ同じです。

1.ファイルの読み込み

tilamic.jsの動作にはjQueryが必要です。またjQueryのバージョンは1.8.0以降である必要があります。これは1.8.0以降に搭載されたCSS3のベンダープレフィックスを自動的に付与する機能に依存しているためです。次のようにファイルを読み込んでください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/tilamic.js"></script>
2.HTMLの書き方

HTMLは'div'要素内にタイル化したい画像ファイルを'img'タグで配置します。この'div'タグにCSSで横幅を設定するとその設定はタイル化後も有効です。逆に'div'タグ内の'img'要素に関してはtilamicオブジェクト作成と同時に完全に置き換えられるためいかなるCSS設定も意味がありませんのでご注意ください。

<div id="tiles">
  <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>
3.tilamicオブジェクト(インスタンス)の作成

tilamicオブジェクトの作成はDOMの構築が終了してから行う必要があります。コンストラクタの引数は第一引数がタイル化を行うエリアを指すjQueryセレクタです。第二引数はオプションです。'rows'は縦に何行タイルを設置するかで'cols'は横に何列設置するかです。'aspectRatio'はエリアの横幅に対する縦の長さです。これを指定せずエリアにCSSでheightを指定することもできますが、レスポンシブデザインを採用し、縦横比を維持したまま自動リサイズができるようにするにはheight指定ではなく'aspectRatio'を指定する必要があります。オプションについてはtilamic.js Constructor Optionsで解説しています。また別の記事で日本語の解説記事も書く予定です。

$(document).ready(function(){
  var tilamic = new Tilamic('#tiles', {
    'rows': 3,
    'cols': 5,
    'aspectRatio': 853/1280
});
3-1.自動リサイズを設定する

ブラウザのウィンドウサイズが変更された際に自動でエリアの大きさを調整するように設定することができます。その場合は下のようにwindowのresizeイベント発火時にtilamicオブジェクトの.resize()メソッドを呼び出すようにしてください。なおこの機能を用いるには上で書いたようにエリアの横幅をパーセンテージで指定したうえで、'aspectRatio'を設定しておく必要があります。

$(window).on('resize', function(e){
  tilamic.resize();
});
4.タイルを回転させる

タイルを回転させるメソッドは2つあり、.flip()メソッドと.seqFlip()メソッドです。違いは前者がすべてのタイルが一斉に回転するのに対し、後者は順に回転する点です。
(正確には「すべてのタイル」ではなく「アクティブなタイル」なのですが初期状態ではすべてのタイルがアクティブです。これについては.filter()メソッドを紹介する際に説明します。)
両メソッドとも第一引数は回転後に表示したい画像の通し番号です。この順番は1.で書いたHTML内の'img'タグの順番どおりです。また'img'タグの'alt'属性の名前で呼び出すこともできます。
両メソッドとも第二引数で回転の軸や向きなどいくつかのオプションを受け取ることができますがそれはメソッド紹介の際に説明したいと思います。

tilamic.flip(1); // すべてのタイルが一斉に回転

tilamic.seqFlip('photo4'); // すべてのタイルが順に回転

以上がtilamic.jsの基本的な流れです。
次回はコンストラクタのオプションについてご紹介したいと思います。

ぜひ一度デモをご覧いただき使ってみてください('ω')ノ

ソースコードはGiHubでご覧いただけます。

tilamic.jsというモジュールを作成&公開しました

tilamicjs Javascript

tilamic.jsというJavascriptモジュールを作成し公開しました。

tilamic.js


tilamic.jsは画像をタイル状に分割しタイルを個別にCSS3を用いて3次元回転させるモジュールです。
こちらのデモをご覧いただくとどういったものかがわかると思います。

またソースもGitHub上で公開しています。(MITライセンス)
GitHub - artgear/tilamicjs: tilamicjs ver. 1.0.0

特徴としては

  • 画像を縦横それぞれ何枚設置するかを自由に設定可能
  • IE7,8,9などCSS3未対応ブラウザで自動的に代替の動作を行う機能
  • 画像が回転する順序、向きなどをカスタマイズ可能
  • レスポンシブ

などがあります。

現状手持ちの機材の関係でWindows版のIE7,8,9,11とChrome,FireFox,Operaの各最新版でしか動作確認していないのですがその他のブラウザでも動作するはずです。
ただ、スマホですとリソースの不足で不安定な動きになるかもしれません・・・。

次回以降の記事でtilamic.jsの使い方の紹介や作成の過程で気が付いたCSS3の注意が必要な点などを書こうと思います。

ぜひ一度ダウンロードして使ってみてください。