JSのイメージは、
１．scriptタグの記述をStringで書いて、
２．それをjQueryの＄を使ってタグを生成、
３．bodyタグへappendする流れです。

NGソース

$('body').append($('<script>alert("アラート");</script>'));

純粋に書くと上記のような記述になるとおもいます。ところがこれを実行すると、

')); } })();

↑このようなscriptの途中の括弧だけが出てきてしまいます。これの原因は、「/」スラッシュが特殊な状態で認識してしまうみたいです。jQueryで普通に閉じタグを作るときに「/」をつかっても何も起きませんが、どうやらscriptの閉じタグだけ、うまく認識してくれないっぽい？です。調べてないのでたしかなことはわかりませんけどね。。

回避するOKソース

$('body').append($('<script>alert("アラート");<\/script>'));
//スラッシュの手前に、バックスラッシュ（￥でもOK）を置く。

「/script」という文字列がダメなら、「/」スラッシュの手前に、バックシュラッシュ（￥マーク）を置くと、変な挙動は回避され、上記のソースではちゃんとalert();が実行されます。正規表現の時と同じ、特殊文字に特殊な意味を持たせない。ということですね。

僕はこうします。

$('body').append($('<scr'+'ipt>alert("アラート");<\/scr'+'ipt>'));
 //「scr」と「ipt」という文字で連結

こうする必要はないかもしれませんが、scriptタグの記述が変な挙動を呼び起こしてしまうなら、いっそのこと「scr」と「ipt」という文字で連結させてしまおう！っておもいました。そもそもこんなことを書くこと自体マレかもしれませんが参考までに。

<script src="jquery-1.3.2.min.js"></script>
<script>
(function(){
	if(typeof jQuery == 'undefined'){
		return;
	}
	jQuery.noConflict();
	jQuery(function($){
		// ここに処理を記述
		// $==jQueryで利用可能
	});
})();
</script>

このソースコードをペッと貼り付けて、実際に書き始める場所は１０行目からです。この形が定着しているのは、いくつかの理由があります。

1. functionを大きく、(　)　括弧で括っているのは関数や変数をローカル化するため。
2. ５行目のreturnは、jQueryのライブラリが何らかのエラーがあったときに、JavaScriptエラーを出さないようにするため。
3. ８行目のnoConflictはprototype.jsなどの複数ライブラリを使用する際に、「$」を初期化するため。
4. ９行目の引数$にすることによって、10行目以降に$==jQueryとして使うことができる

ここのところFlashよりもJavaScriptを触る機会が増えてきました。iPhone用Safariでメニューが動くページを作ったり、HTML5でいろんなことを表現するのにJavaScriptは必須スキルになってくるとおもいます。日本のサンプルサイトを見ていても、なんかこうスマートさやかっこよさが足りないような気がするんですが、さすが海外のサイトは装飾のアイコンまでもかっこよかったです。

今回は、jQueryでカッコイイコンテンツがいっぱいサンプルとして紹介されている海外サイトjQuery TOOLSを紹介します。そのままコピペでも十分つかえそうです。

Tabs demo 13 samples

タブのデモだけでも１３個あります。

このタブの看板デザインがめっちゃいけてますねー！

ここのサイトのすばらしいところは、CSS Spriteで作られていて、かつ、その画像まで公開しちゃってるところです。ちょー太っ腹！

他のタブのサンプルは、写真のギャラリーに使えそうなモノもあります。細かいドロップシャドウがモダンサイトっぽくていいですね！！

Tooltips demo 7 samples

画像や入力フォームに対して注意を促すツールチップ

特にこの７番目のサンプルはとても好印象を持ちました。下からイージングしながらフェードインしてくる動き、マウスを横に動かしていくだけでも気持ちがいいですねー。

更に驚いたのは、ツールチップがウィンドウの上部に隠れてしまう場合は下へ吹き出しが出てきます。この親切さはたまらないですね！

Overlay demo 8 samples

ウィンドウ内にポップアップして画像を大きく見せる

いわゆるLight Boxってやつですね。その呼び方自体がスタンダードみたいな呼ばれかたをしているのかもしれませんが、Overlayも基本動作はかわりません。

オーバーレイする位置やアニメーションや、クールな出方をするサンプルなどあります。８個もあるんで、好みの動きが見つかるかもしれませんね。

Scrollable demo 11 samples

横にうごく裏にたくさん見せる表現

写真のスライドショーなんかのメニューでよくみる表現です。自動で再生させるボタンがあったり、マウスホイールで切り替えることができるサンプルがあります。操作感が重要なUIなので、１１個のなかからいいのが見つかると思います。ほんと簡単なソースコードで導入できるんですねー。

▼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でのアコーディオン

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でのアコーディオン

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のほうが得意そうな印象を受けましたので、簡単に演出を加えたい方は参考にしてみてはいかがでしょうか。ではまたー