jQueryで動的にscriptタグを生成して実行させる方法

投稿日:2011年9月27日作成者: cotapon

何かの判断をJSで行った後に、scriptタグで外部JSを読み込んだりする事がありました。jQueryをつかって、scriptタグを生成したときに変な挙動があったので回避するメモを残します。

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」という文字で連結させてしまおう！っておもいました。そもそもこんなことを書くこと自体マレかもしれませんが参考までに。

jQueryを使うときの最初のおまじない

投稿日:2010年12月20日作成者: cotapon

返信

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

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

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

ハイクオリティすぎるサンプルサイトjQuery TOOLS

投稿日:2010年11月8日作成者: cotapon

返信

ここのところ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なので、１１個のなかからいいのが見つかると思います。ほんと簡単なソースコードで導入できるんですねー。

jQueryとmootoolsでアコーディオンアニメーションを試す

投稿日:2010年6月17日作成者: cotapon

返信

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

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

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

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

新しいMacBookPro

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

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

Adobe Web Premium CS5

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