はじめに
最近、「ユーザーテスト用のモックアップを実装してほしい」
という要望を受けて、実装してみたものの勉強用メモです。
要望を受けたときに考えたのは、
「マンダラート的な画面があるアプリ(UI)でクルクル回るといいなー。」
とイメージして実装に着手してます。
利用するライブラリ
KUTE.js
軽量なアニメーションJavaScriptであり、MITライセンスなので、
無料でサクサク使えます！触ってみてとても便利！となりました。
機能性
３ｘ３の四角に任意のテキストが書かれていて、
それぞれ、四角をクリックするとテキストの内容が変わる。
ポイントは、テキストが変わるときに”くるくる”としたアニメーションがあること。
画面
実装コード
GitHub nekotarolu/Mock-Up-Pages/MandalArtLikeMockUp.html
[Demo Page]
実装メモ
- 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を参考に実装しました。
上から、背景色を黒にして、各四角の縦横の大きさ・位置・フォント・書き出し位置などを定義。
.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個だけ送り返してあげるケースが多々あるので。。。
まぁ、「すぐに動くデザインモック作れない？」と言われるくらいなら、
「こういうシステム設計を頼みたい」と言われて
サービスインできるものをフルで設計・実装したり、モジュール提供する方が、
エンジニアとしては嬉しいし楽しいですよね。