2008年10月9日
javascriptライブラリ「MooTools」を使ってみました。
はじめまして。
８月にアシアルに入社した橋本です。
今回はjavascripライブラリの一つである「MooTools」を使ってみました。
MooToolsは、軽量かつ高機能を謳っているライブラリで、オブジェクト指向に基づいて設計されています。知名度的には いま一つかもしれませんが、優秀なjavascriptライブラリのようです。
現在、以下のサイトでMooToolsを30日でマスターするチュートリアルが連載されています。
30 Days of Mootools 1.2 Tutorials
今回はそのチュートリアルを参考に、MooToolsを使って遊んでみました。
チュートリアルは残念ながら（？）英語で書かれているのですが、JavaScript初心者でも理解できるように書かれているため、内容自体は大変わかりやすいものとなっています。
では、以下サンプルファイルです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SmoothScroll Using MooTools 1.2 Example</title>
<script type="text/javascript" src="js/mootools-1.2-core.js"></script>
<script type="text/javascript" src="js/mootools-1.2-more.js"></script>
<script type="text/javascript" src="js/mooSamples.js"></script>
<style type="text/css">
#tween_element{
height: 50px;
width: 10px;
background-color: #3399CC;
}
#morph_element2{
width: 0px;
height: 0px;
background-color: #ffffff;
}
</style>
</head>
<body>
<h3 class="title">Fx.Tweenの使用例</h3>
<div class="contents">
<div class="contetns_wrap">
<div id="tween_element"></div>
<button id="tween_reset">リセット</button>
<button id="tween_long">伸びる</button>
<button id="tween_short">縮む</button>
<button id="tween_fade_out">フェードアウト</button>
<button id="tween_fade_in">フェードイン</button>
</div>
</div>
<h3 class="title">Fx.Morphの使用例</h3>
<div class="contents">
<div class="contetns_wrap">
<div id="morph_element"></div>
<button id="morph_set">セット</button>
<button id="morph_big">大きく</button>
<button id="morph_small">小さく</button>
<button id="morph_reset">リセット</button>
</div>
</div>
<h3 class="title">組み合わせ例</h3>
<div class="contents">
<div class="contetns_wrap">
<div id="morph_element2">
<div id="text" style="color: #ffffff">
optionで「link」を指定することで、
このようなアニメーション効果を生み出すことも出来ます。
</div>
</div>
<button id="start">スタート</button>
<button id="reset">リセット</button>
</div>
</div>
</body>
</html>
javascriptファイル
//tween効果使用例
var tweenerLong = function() {
$('tween_element').tween('width', '200px');
}
var tweenerShort = function() {
$('tween_element').tween('width', '50px');
}
var tweenerReset = function() {
$('tween_element').tween('width', '10px');
}
var tweenFadeOut = function() {
$('tween_element').fade('out');
}
var tweenFadeIn = function() {
$('tween_element').fade('in');
}
//Morph効果使用例
var morphSet = function(){
this.set({
'width': 0,
'height': 0,
'background-color': '#ffffff'
}).start({
'width': 20,
'height': 20,
'background-color': '#000000'
});
}
var morphBig = function(){
this.start({
'width': 50,
'height': 50,
'background-color': '#d3715c'
});
}
var morphSmall = function(){
this.start({
'width': 30,
'height': 30,
'background-color': '#006544'
});
}
var morphReset = function(){
this.set({
'width': 0,
'height': 0,
'background-color': '#ffffff'
});
}
var morphReset = function(){
this.set({
'width': 0,
'height': 0,
'background-color': '#ffffff'
});
}
//組み合わせ例
var morphChange = function(){
this.set({
'width': 0,
'height': 0,
'background-color': '#ffffff'
}).start({
'width': 10,
'height': 10,
'background-color': '#dddddd'
}).start({
'width': 300,
'height': 10,
'background-color': '#888888'
}).start({
'width': 400,
'height': 120,
'background-color': '#333333'
});
}
var morphReset2 = function(){
this.set({
'width': 0,
'height': 0,
'background-color': '#ffffff'
});
}
window.addEvent('domready', function() {
//変数の定義
//Fx.Morph
var morphElement = $('morph_element');
//組み合わせ例
var morphElement2 = $('morph_element2');
//Accordion
var title = $$('.title');
var contents = $$('.contents');
var accordObj = new Accordion(title,contents, {
fixedHeight: 150,
onComplete: function(){
$$('.contetns_wrap').fade('in');
}
});
//Morph
var morphObject = new Fx.Morph(morphElement, {
link: 'chain',
transition: 'back:out',
});
var morphObject2 = new Fx.Morph(morphElement2, {
link: 'chain',
transition: 'back:out',
onComplete: function(){
$('text').fade('in');
}
});
//Tween使用例
$('tween_reset').addEvent('click', tweenerReset);
$('tween_long').addEvent('click', tweenerLong);
$('tween_short').addEvent('click', tweenerShort);
$('tween_fade_out').addEvent('click', tweenFadeOut);
$('tween_fade_in').addEvent('click', tweenFadeIn);
//Morph使用例
$('morph_set').addEvent('click', morphSet.bind(morphObject));
$('morph_big').addEvent('click', morphBig.bind(morphObject));
$('morph_small').addEvent('click', morphSmall.bind(morphObject));
$('morph_reset').addEvent('click', morphReset.bind(morphObject));
//組み合わせ例
$('start').addEvent('click', morphChange.bind(morphObject2));
$('reset').addEvent('click', morphReset2.bind(morphObject2));
});
HTMLファイルの中身ですが、各タイトルをクリックすると隠された内容が表示されるようになっています。
これはMooToolssの拡張モジュールの一つであるアコーディオンモジュールを使用したものです。
アコーディオンモジュールはMooToolsの公式サイトから「MooTools 1.2 More Builder」をダウンロードすることで使用することができます。
使用方法は簡単で、タイトルとして表示したい要素と、クリックした際に表示したい内容を引数として、
Accordionクラスのオブジェクトを作成するだけです。
window.addEvent('domready', function() {
//Accordion
//引数として表示したい要素を渡す
var title = $$('.title');
var contents = $$('.contents');
//Accordionクラスのオブジェクトを作成
var accordObj = new Accordion(title,contents);
});
１つめのサンプルでは、Tween効果の使用例を表示しています。
//tween効果使用例
var tweenerLong = function() {
$('tween_element').tween('width', '200px');
}
var tweenerShort = function() {
$('tween_element').tween('width', '50px');
}
var tweenerReset = function() {
$('tween_element').tween('width', '10px');
}
var tweenFadeOut = function() {
$('tween_element').fade('out');
}
var tweenFadeIn = function() {
$('tween_element').fade('in');
}
window.addEvent('domready', function() {
//ボタンを押すと実行
$('tween_reset').addEvent('click', tweenerReset);
$('tween_long').addEvent('click', tweenerLong);
$('tween_short').addEvent('click', tweenerShort);
$('tween_fade_out').addEvent('click', tweenFadeOut);
$('tween_fade_in').addEvent('click', tweenFadeIn);
});
今回は標準要素に対して、あらかじめ用意されたメソッド（tween,fade）を利用していますが、
取得した要素からFx.Tweenクラスのオブジェクトを作成して、Tween効果を独自に設定することも可能です。
２つ目のサンプルでは、Fx.Morphクラスのオブジェクトを作成し、取得した要素を拡大、縮小したり、
色を変えたりしています。
//Fx.Morph使用例
var morphSet = function(){
this.set({
'width': 0,
'height': 0,
'background-color': '#ffffff'
}).start({
'width': 20,
'height': 20,
'background-color': '#000000'
});
}
var morphBig = function(){
this.start({
'width': 50,
'height': 50,
'background-color': '#d3715c'
});
}
var morphSmall = function(){
this.start({
'width': 30,
'height': 30,
'background-color': '#006544'
});
}
var morphReset = function(){
this.set({
'width': 0,
'height': 0,
'background-color': '#ffffff'
});
}
window.addEvent('domready', function() {
//Fx.Morphクラスのオブジェクトを作成
var morphElement = $('morph_element');
var morphObject = new Fx.Morph(morphElement, {
link: 'chain',
transition: 'back:out',
});
//ボタンを押すと実行
$('morph_set').addEvent('click', morphSet.bind(morphObject));
$('morph_big').addEvent('click', morphBig.bind(morphObject));
$('morph_small').addEvent('click', morphSmall.bind(morphObject));
$('morph_reset').addEvent('click', morphReset.bind(morphObject));
});
オブジェクトを作成する際にオプションを指定することで、アニメーションの動きに変化をつけることもできます。
詳しくは先ほど紹介したチュートリアルの11日目の記事の中程あたりを参照してください。
30 Days of Mootools 1.2 Tutorials - Day 11 - Using Fx.Morph, Fx Options and Fx Events
３つ目のサンプルでは。二つ目のサンプルで使用したFx.Morphモジュールの表示効果を組み合わせたアニメーション効果を表示しています。
//組み合わせ例
var morphChange = function(){
this.set({
'width': 0,
'height': 0,
'background-color': '#ffffff'
}).start({
'width': 10,
'height': 10,
'background-color': '#dddddd'
}).start({
'width': 300,
'height': 10,
'background-color': '#888888'
}).start({
'width': 400,
'height': 120,
'background-color': '#333333'
});
}
var morphReset2 = function(){
this.set({
'width': 0,
'height': 0,
'background-color': '#ffffff'
});
}
window.addEvent('domready', function() {
var morphObject2 = new Fx.Morph(morphElement2, {
link: 'chain',
transition: 'back:out',
onComplete: function(){
$('text').fade('in');
}
});
//ボタンを押すと実行
$('start').addEvent('click', morphChange.bind(morphObject2));
$('reset').addEvent('click', morphReset2.bind(morphObject2));
});
２つ目の例でも使用していたのですが、オブジェクトを生成する際のオプションとして、
「link: 'chain'」を指定することで、連続した動作を表現することが出来ます。
今回はいくつかの簡単な例を紹介しましたが、そのほかにも様々なモジュールがあります。
公式ページにもサンプルがいくつか載っているので参考にしてみてください。
MooTools - a compact javascript framework
また、冒頭に紹介したチュートリアルは現在２１日目まで進んでおり、今月末までには３０日目まで公開されるようです。こちらも参考にしてみてください。
30 Days of Mootools 1.2 Tutorials
今回は短い時間触っただけですが、javascript初心者かつAjax初心者の僕でもこんなに簡単にアニメーション効果を実現出来てしまいました。
素晴らしいですね。
そんなMooTools、皆さんも試してみてはいかがでしょう か。
