[KUTE.js] 3x3の四角の中のテキストがくるくる回りながら変わるJavaScript

## はじめに
最近、「ユーザーテスト用のモックアップを実装してほしい」
という要望を受けて、実装してみたものの勉強用メモです。

要望を受けたときに考えたのは、
「マンダラート的な画面があるアプリ(UI)でクルクル回るといいなー。」
とイメージして実装に着手してます。

## 利用するライブラリ
### [KUTE.js](http://thednp.github.io/kute.js/index.html)
軽量なアニメーションJavaScriptであり、MITライセンスなので、
無料でサクサク使えます！触ってみてとても便利！となりました。

## 機能性
３ｘ３の四角に任意のテキストが書かれていて、
それぞれ、四角をクリックするとテキストの内容が変わる。
ポイントは、テキストが変わるときに”くるくる”としたアニメーションがあること。

### 画面
![screencapture-nekotarolu-github-io-Mock-Up-Pages-MandalArtLikeMockUp-html.png](https://qiita-image-store.s3.amazonaws.com/0/258294/42bca108-388e-0c91-a04a-fd1745782d44.png)


## 実装コード
[GitHub nekotarolu/Mock-Up-Pages/MandalArtLikeMockUp.html](https://github.com/nekotarolu/Mock-Up-Pages/blob/master/MandalArtLikeMockUp.html)
[[Demo Page]](https://nekotarolu.github.io/Mock-Up-Pages/MandalArtLikeMockUp.html)

## 実装メモ

* CSS

```
<style type="text/css">
body {
	background-color: #222
}

.box {
	width: 150px;
	height: 150px;
	position: absolute;
	top: 40px;
	color: #fff;
	font-size: 50px;
	line-height: 150px;
	text-align: center;
	font-family: sans-serif;
	font-weight: bold;
	border-radius: 10px;
}

.box1 {left: 50px;  background-color: #9C27B0;}
.box2 {left: 250px; background-color: #673AB7;}
.box3 {left: 450px; background-color: #E91E63;}
・・・
</style>
```
スタイルシートは、[KUTE.jsのExample](http://thednp.github.io/kute.js/examples.html)を参考に実装しました。
上から、背景色を黒にして、各四角の縦横の大きさ・位置・フォント・書き出し位置などを定義。
`.box1`,`.box2`,`.box3`...で各四角の置かれる位置と色を設定。

* html

```
	<div id="container">
		<div id="b1" class="box box1" onClick="ClickFunction();">Txt1</div>
		<div id="b2" class="box box2" onClick="ClickFunction();">Txt2</div>
		<div id="b3" class="box box3" onClick="ClickFunction();">Txt3</div>
		<div id="b4" class="box box4" onClick="ClickFunction();">Txt4</div>
		<div id="b5" class="box box5" onClick="ClickFunction();">Txt5</div>
		<div id="b6" class="box box6" onClick="ClickFunction();">Txt6</div>
		<div id="b7" class="box box7" onClick="ClickFunction();">Txt7</div>
		<div id="b8" class="box box8" onClick="ClickFunction();">Txt8</div>
		<div id="b9" class="box box9" onClick="ClickFunction();">Txt9</div>
	</div>
```
bodyには、これだけ。
`<div></div>`タグの各要素は、
-- `id="b1"` で、javascriptから各四角を指定しやすくしておきます。
-- `class="box box1"` で、前述のスタイルシートで宣言した`.box`, '.box1' で定義したスタイルで表示させれます。
-- `onClick="ClickFunction();` で、四角をクリックしたときに呼び出すjavascript APIを指定します。
タグ内の値は、初期値を入れておきます。

* javascript

```
	<!-- JS Declaration. -->
	<script type="text/javascript"
		src='https://cdn.jsdelivr.net/kute.js/1.5.0/kute.min.js'></script>
	<script type="text/javascript">
		//click回数制御用の変数.
		var clickRadio = 0;
		
		var el1 = document.querySelector('.box1');
		var el2 = document.querySelector('.box2');
		var el3 = document.querySelector('.box3');
		var el4 = document.querySelector('.box4');
		var el5 = document.querySelector('.box5');
		var el6 = document.querySelector('.box6');
		var el7 = document.querySelector('.box7');
		var el8 = document.querySelector('.box8');
		var el9 = document.querySelector('.box9');
		
		function TweenStart() {
			console.log("TweenStart in");
			var tween1 = KUTE.fromTo(el1, {rotateX : 0}, {rotateX : 360}, {duration : 1500});
			var tween2 = KUTE.fromTo(el2, {rotateY:0},{rotateY:360}, {perspective:400, duration: 1500});
			var tween3 = KUTE.fromTo(el3, {rotateX : 0}, {rotateX : 360}, {duration : 1500});
			var tween4 = KUTE.fromTo(el4, {rotateX : 0}, {rotateX : 360}, {duration : 1500});
			
			if(clickRadio % 2 == 0) {
				var tween5 = KUTE.fromTo(el5, {rotateZ:0},{rotateZ:360},{duration: 1500});
			} else {
				var tween5 = KUTE.fromTo(el5, {rotateZ:0},{rotateZ:-360},{duration: 1500});
			}
			
			var tween6 = KUTE.fromTo(el6, {rotateX : 0}, {rotateX : 360}, {duration : 1500});
			var tween7 = KUTE.fromTo(el7, {rotateX : 0}, {rotateX : 360}, {duration : 1500});
			var tween8 = KUTE.fromTo(el8, {rotateY:0},{rotateY:360}, {perspective:400, duration: 1500});
			var tween9 = KUTE.fromTo(el9, {rotateX : 0}, {rotateX : 360}, {duration : 1500});
			
			tween1.start();
			tween2.start();
			tween3.start();
			tween4.start();
			tween5.start();
			tween6.start();
			tween7.start();
			tween8.start();
			tween9.start();
			console.log("TweenStart out");
		};

		function DivValueChange() {
			console.log("DivValueChange in");
			if(clickRadio % 2 == 0) {
				document.getElementById("b1").innerHTML = "Txt1";
				document.getElementById("b2").innerHTML = "Txt2";
				document.getElementById("b3").innerHTML = "Txt3";
				document.getElementById("b4").innerHTML = "Txt4";
				document.getElementById("b5").innerHTML = "Txt5";
				document.getElementById("b6").innerHTML = "Txt6";
				document.getElementById("b7").innerHTML = "Txt7";
				document.getElementById("b8").innerHTML = "Txt8";
				document.getElementById("b9").innerHTML = "Txt9";
			} else {
				document.getElementById("b1").innerHTML = "TxtA";
				document.getElementById("b2").innerHTML = "TxtB";
				document.getElementById("b3").innerHTML = "TxtC";
				document.getElementById("b4").innerHTML = "TxtD";
				document.getElementById("b5").innerHTML = "TxtE";
				document.getElementById("b6").innerHTML = "TxtF";
				document.getElementById("b7").innerHTML = "TxtG";
				document.getElementById("b8").innerHTML = "TxtH";
				document.getElementById("b9").innerHTML = "TxtI";
			}
			
			console.log("DivValueChange out");
		};
		
		function ClickFunction() {
			console.log("ClickFunction in :" + clickRadio);
			clickRadio++;
			TweenStart();
			DivValueChange();
			console.log("ClickFunction out");
		};
	</script>
```

### ごちゃごちゃ書いてますが、
`.box1`のスタイルで指定されたオブジェクトを動かすには、以下だけでOKです。

```
var el1 = document.querySelector('.box1');
var tween1 = KUTE.fromTo(el1, {rotateX : 0}, {rotateX : 360}, {duration : 1500});
tween1.start();
```
上から解説すると、
html内の`.box1`という文字列を含むエレメントを取得し、`el1`に格納する。
`KUTE.js`の機能により、`el1`を後ろで定義した引数情報で回転する`tween1`というインスタンスを作る。
`tween1.start()`を実行することで`KUTE.js`を使って回転させます。

他のjavascriptは、以下のような処理フローになります。
-- `<div>` のオブジェクト（四角）をクリックされる
--  `ClickFunction()`がコールバック
--  `TweenStart()`にて`.box`（四角）達を回転させる
--  `DivValueChange()`にて`<div>` のオブジェクト（四角）のテキストを変更する
という作りになっています。

* tweenについて補充メモ

```
var tween1 = KUTE.fromTo(el1, {rotateX : 0}, {rotateX : 360}, {duration : 1500});
```
x軸を中心に回転させる（縦回転）ための記述。

```
var tween2 = KUTE.fromTo(el2, {rotateY:0},{rotateY:360}, {perspective:400, duration: 1500});
```
y軸を中心に回転させる（横回転）ための記述。

```
var tween5 = KUTE.fromTo(el5, {rotateZ:0},{rotateZ:360},{duration: 1500});
var tween5 = KUTE.fromTo(el5, {rotateZ:0},{rotateZ:-360},{duration: 1500});
```
z軸（中心）から回転させるための記述で、
`rotateZ`は、+値は向かって左回転、-値は向かって右回転になる。

## あとがき
### タイトルについて
誰か同じタスク・デザインに悩む人に力になればと思い、
実装要望を受けて、モックアップ実装を着手した際に、Google様に入力した内容を
そのままタイトルにしました。笑

### エンジニアあるある？
今回、モックアップなので、js/cssファイルは分割せずhtmlに直書きしました。
今の仕事でも結構、「すぐに動くデザインモック作れない？」という無茶ぶりがきて、
再利用性度外視でhtmlファイル1個だけ送り返してあげるケースが多々あるので。。。

まぁ、「すぐに動くデザインモック作れない？」と言われるくらいなら、
「こういうシステム設計を頼みたい」と言われて
サービスインできるものをフルで設計・実装したり、モジュール提供する方が、
エンジニアとしては嬉しいし楽しいですよね。