creator note » mootools http://creator.cotapon.org こたぽんがWebクリエイターに限らず動画や写真、書道までマルチクリエイターになれるまで終わりなく書き続けます Mon, 30 Jan 2012 06:27:52 +0000 ja hourly 1 http://wordpress.org/?v=3.3.1 jQueryとmootoolsでアコーディオンアニメーションを試す http://creator.cotapon.org/articles/javascript/jquery%e3%81%a8mootools%e3%81%a7%e3%82%a2%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%82%aa%e3%83%b3%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e8%a9%a6%e3%81%99 http://creator.cotapon.org/articles/javascript/jquery%e3%81%a8mootools%e3%81%a7%e3%82%a2%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%82%aa%e3%83%b3%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e8%a9%a6%e3%81%99#comments Thu, 17 Jun 2010 01:30:10 +0000 cotapon http://creator.cotapon.org/?p=1027 続きを読む →]]> JavaScriptのライブラリでよく使われるのはjQueryだと思います。他にもspryフレームワークや、Yahoo UIライブラリなどもありますが、mootoolsというライブラリはあまり多くは知られていないライブラリだと思います。

▼mootools.js
mootools配布元：http://mootools.net/download
mootools本家サイト：http://mootools.net/
日本語ドキュメントサイト：http://takahashifumiki.com/category/web/mootools/

そんなmootoolsですが、いったいjQueryとどっちを使ったらいいの？というのがあり、「jQuery vs MooTools」と題された記事がありましたのでご紹介します。

▼jQuery vs MooTools
和訳：http://takahashifumiki.com/web/programing/642/
本家：http://jqueryvsmootools.com/

とか言われても、、、実際に見てみないとわからないので、アコーディオンアニメーションをするサンプルを、jQueryとmootoolsで再現してみました。

jQueryでのアコーディオン

新しいMacBook


次世代NVIDIAグラフィックス。
新しい高性能なNVIDIAグラフィックスを搭載。MacBookでは、あらゆる作業のスピードと効率が向上します。

10時間駆動するバッテリー。
一体型のバッテリーは、1回の充電で最長10時間駆動します。2これからは、コンセントにつながなくても、MacBookをオンラインでさらに長時間使えます。

ガラス製のマルチタッチトラックパッド。
広々としたトラックパッドで、マルチタッチジェスチャーなどの操作が思いのまま。慣性スクロールを使って、ページを上下にすばやく移動できます。

耐久性のあるユニボディ。
わずか2.74cmの薄さ、2.13k3の軽さのMacBookは、なめらかで耐久性のあるユニボディで登場です。どんなバッグにもすっきりと収まります。

新しいMacBookPro


新しいCore i5 & Core i7プロセッサ。
15インチと17インチのMacBook Proには、最高速のデュアルコアプロセッサが搭載。パフォーマンスが最大50パーセント向上しました。

次世代NVIDIAグラフィックス。
MacBook史上最速のグラフィックスを搭載したMacBook Proは、3Dゲームから写真やビデオまで、どんなことをする時も抜群のパフォーマンスを発揮します。

次世代NVIDIAグラフィックス。
MacBook史上最速のグラフィックスを搭載したMacBook Proは、3Dゲームから写真やビデオまで、どんなことをする時も抜群のパフォーマンスを発揮します。

高精度アルミニウムユニボディ。
一枚のアルミ板から削り出された新しいボディを持つMacBook Proは、薄さ、軽さ、洗練された美しさ、そして抜群の耐久性を兼ね備えています。

Adobe Web Premium CS5


Adobe® Creative Suite® 5 Web Premium は標準ベースの Web サイト、魅力的なデジタル体験、およびリッチなインターネットアプリケーションを作成するためのトータルソリューションです。Adobe Dreamweaver® CS5 を使って、WordPress、Joomla!、Drupal などのコンテンツ管理システムやパワフルな CSS と連携した開発が可能です。Flash Catalyst™ CS5、Flash Professional CS5、Flash Builder™ 4 Standard などの Adobe Flash® ファミリーのツール一式があれば、コンテンツをデザイン、開発して、ほとんどどこへでも配信できます。

jQueryでのアコーディオンのソースコード

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
<!--
$(function(){
    $("#accordion div.element:not(:first)").css("display","none");
    $("#accordion div.toggler").click(function(){
        if($("+div.element",this).css("display")=="none"){
            $("#accordion div.element").slideUp("slow");
            $("+div.element",this).slideDown("slow");
        }
    });
});
//-->
</script>
<div id="accordion">
<div class="toggler">１段目</div>
<div class="element">
<p>テキストテキストテキスト</p>
</div></p>
<p><div class="toggler">２段目</div>
<div class="element">
<p>テキストテキストテキスト</p>
</div></p>
<p><div class="toggler">３段目</div>
<div class="element">
<p>テキストテキストテキスト</p>
</div>
</div>

mootoolsでのアコーディオン

新しいMacBook


次世代NVIDIAグラフィックス。
新しい高性能なNVIDIAグラフィックスを搭載。MacBookでは、あらゆる作業のスピードと効率が向上します。

10時間駆動するバッテリー。
一体型のバッテリーは、1回の充電で最長10時間駆動します。2これからは、コンセントにつながなくても、MacBookをオンラインでさらに長時間使えます。

ガラス製のマルチタッチトラックパッド。
広々としたトラックパッドで、マルチタッチジェスチャーなどの操作が思いのまま。慣性スクロールを使って、ページを上下にすばやく移動できます。

耐久性のあるユニボディ。
わずか2.74cmの薄さ、2.13k3の軽さのMacBookは、なめらかで耐久性のあるユニボディで登場です。どんなバッグにもすっきりと収まります。

新しいMacBookPro


新しいCore i5 & Core i7プロセッサ。
15インチと17インチのMacBook Proには、最高速のデュアルコアプロセッサが搭載。パフォーマンスが最大50パーセント向上しました。

次世代NVIDIAグラフィックス。
MacBook史上最速のグラフィックスを搭載したMacBook Proは、3Dゲームから写真やビデオまで、どんなことをする時も抜群のパフォーマンスを発揮します。

次世代NVIDIAグラフィックス。
MacBook史上最速のグラフィックスを搭載したMacBook Proは、3Dゲームから写真やビデオまで、どんなことをする時も抜群のパフォーマンスを発揮します。

高精度アルミニウムユニボディ。
一枚のアルミ板から削り出された新しいボディを持つMacBook Proは、薄さ、軽さ、洗練された美しさ、そして抜群の耐久性を兼ね備えています。

Adobe Web Premium CS5


Adobe® Creative Suite® 5 Web Premium は標準ベースの Web サイト、魅力的なデジタル体験、およびリッチなインターネットアプリケーションを作成するためのトータルソリューションです。Adobe Dreamweaver® CS5 を使って、WordPress、Joomla!、Drupal などのコンテンツ管理システムやパワフルな CSS と連携した開発が可能です。Flash Catalyst™ CS5、Flash Professional CS5、Flash Builder™ 4 Standard などの Adobe Flash® ファミリーのツール一式があれば、コンテンツをデザイン、開発して、ほとんどどこへでも配信できます。

mootoolsでのアコーディオンのソースコード

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
<!--
window.addEvent('domready', function(){
	var myAccordion = new Accordion($('accordion'), 'div.toggler', 'div.element');
});
//-->
</script>
<div id="accordion">
<div class="toggler">１段目</div>
<div class="element">
<p>テキストテキストテキスト</p>
</div></p>
<p><div class="toggler">２段目</div>
<div class="element">
<p>テキストテキストテキスト</p>
</div></p>
<p><div class="toggler">３段目</div>
<div class="element">
<p>テキストテキストテキスト</p>
</div>
</div>

どうですか？？あまりよくわからないかもしれませんが、他のブラウザ、IE6とかsafariとかでも確認してみてください。僕の雑感は、jQueryは、ややアニメーションがガタガタ動いているように見えるのに対して、mootoolsのほうはスムーズに動いているように見えます。しかも、mootoolsのnew Accordion(引数)は最小限のパラメータのみを記入しているのに、ファーストビューで最初のコンテンツが下へビョーンと動くのがわかります。さらに、透明度ゼロからじわじわ100％濃度にアニメーションもしています。jQueryで同様の演出を加えるには、更にパラメータが必要になりますが、mootoolsではデフォルトの記述で細かい演出が設定されてて、とても簡単に導入できるというのがわかりました。

これだけの結果では一概にどれがいいとは断言できませんが、アニメーションはmootoolsのほうが得意そうな印象を受けましたので、簡単に演出を加えたい方は参考にしてみてはいかがでしょうか。ではまたー

]]> http://creator.cotapon.org/articles/javascript/jquery%e3%81%a8mootools%e3%81%a7%e3%82%a2%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%82%aa%e3%83%b3%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e8%a9%a6%e3%81%99/feed 0