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

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

JSのイメージは、
1.scriptタグの記述をStringで書いて、
2.それをjQueryの$を使ってタグを生成、
3.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」という文字で連結させてしまおう!っておもいました。そもそもこんなことを書くこと自体マレかもしれませんが参考までに。

正規表現で文字列があるかないかの判定をするJavaScriptサンプル

文字列のなかに、ある文字列が含まれている場合に、あとで実行する内容を分岐させたいときに便利だと思います。たとえば、iPhoneで見てるか、Androidで見ているかのUser Agent判定をするScriptを書くときなんか便利だと思います。

var ua = navigator.userAgent;
if(ua.match(/iPhone|iPod/) ){ //←iPod⇒iPod touchのUA
	//iOSのSafariから見ている判定。
} else {
	//それ以外。
}

matchで( )括弧の中の文字列があるか調べます。含まれていると戻り値が1以上ならtrueで、含まれてなければfalseなのでelse以降に移ります。

JavaScriptのFrameworkパスを1クリックでコピーできるサイト

jQuery google api and other google hosted javascript libraries. - ScriptSrc.net

Google にホスティングされたFrameworkのパスを1クリックでコピーできるサイトです。このサイトの面白いところは、クリックされた数がカウントされていきます。クリップボードにコピーってどうやってやるんですかね。。。

ホスティングされているFramework一覧。
jQuery
jQuery UI
chrome frame
swfobject
 >>具体的な使い方はこちら。
mootools
Ext JS
YUI(Yahoo UI)
Prototype
script.aculo.us
DOJO

>>http://scriptsrc.net

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

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

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

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

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

jQuery TOOLS

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

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

Tabs demo 13 samples

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

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

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

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

Tooltips demo 7 samples

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

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

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

Overlay demo 8 samples

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

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

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

Scrollable demo 11 samples

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

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

HTML5、JavaScript、CSSが共有できるjsdo.it

jsdo.it

ActionScriptを共有するwonderflのHTML5、JavaScript、CSS版ってところですね。サイト上で公開されているソースコードを編集して、そのまま公開することができます。

>>jsdo.it

にぎやかしにはなりますが、wonderflもjsdo.itも、実際に流用できて使えるコードってあるのでしょうか。。。とはいえ、刺激になり触発されるので、すばらしいサイトだと思います。シェアする方も、ホントの手の内は明かさないんでしょうけどねー。

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

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">1段目</div>
<div class="element">
<p>テキストテキストテキスト</p>
</div></p>
<p><div class="toggler">2段目</div>
<div class="element">
<p>テキストテキストテキスト</p>
</div></p>
<p><div class="toggler">3段目</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">1段目</div>
<div class="element">
<p>テキストテキストテキスト</p>
</div></p>
<p><div class="toggler">2段目</div>
<div class="element">
<p>テキストテキストテキスト</p>
</div></p>
<p><div class="toggler">3段目</div>
<div class="element">
<p>テキストテキストテキスト</p>
</div>
</div>

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

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

swfobject2.xの使い方

FlashをHTMLに貼り付ける方法の中でswfobjectsというJavaScriptでswfを表示させる方法が便利です。今更な感じもしますが、ボクが使ってて気になったところ、例えば表示した時、一瞬Flashの場所が抜けて、あとから表示することによってガクガク表示したり、swfのキャッシュをクリアにするなど、個人的に問題と思ったところを補う形で紹介したいと思います。

まずはさっそくソースコードのコピペ場所を!

//swfobject.jsを呼び出す
<script type="text/javascript" src="swfobject.js"></script>
//表示させるswfコンテンツの設定
<script type="text/javascript"><!--
var flashvars = {hensu: value};
var params = {allowscriptaccess: "always"};
var attributes = {id: "myFlashContent",name: "myFlashContent"};
swfobject.embedSWF("content.swf?u=20091210", "flashContent", "400", "200", "9.0.0", "expressInstall.swf", flashvars, params,attributes);
//--></script>
//FirefoxでFlashコンテンツに触ったときに出る、
//点線(フォーカスのアウトライン)を消す。
<style type="text/css"><!--
object {outline: none;}
--></style>
//実際に表示させる場所に書くHTMLと代替コンテンツ
<div style="height:200">
	<div id="flashContent">
	<h1>代替コンテンツ</h1>
	</div>
</div>

swfobject.jsを呼び出す記述

swfobject.jsはgoogle codeからダウンロードできます。
配布元:swfobject – Project Hosting on Google Code
http://code.google.com/p/swfobject/

ページ右側に「Featured downloads」というところから、swfobjectのzipファイルをダウンロードします。zipを解凍すると「swfobject.js」がありますので、それを任意の場所にアップしてソースコード2行目の記述を、必要であればパスを換えてHTMLに書きます。

//swfobject.jsを呼び出す
<script type="text/javascript" src="swfobject.js"></script>

flashvarsの使い方

swfobject.embedSWFが実際にFlashを表示させる関数です。その関数の引数にいろいろパラメータを渡すことによっていろんなことができます。flashvarsは変数の値をswfに送るための記述です。もちろん、変数を渡す必要がなければ省略できます。

var flashvars = {hensu1: value1, hensu1: "変数2"};

この「flashvars」のなかに入れる値は、変数をActionScriptへ渡すために記述です。phpやJavaScriptなどのプログラムからFlashへ何か値を渡したいときに、

var value1 = "値だよ";
var flashvars = {hensu1: value1, hensu2: "変数2"};

このように書けば「hensu1」というグローバル変数のなかに「”値だよ”」という文字列StringがFlashにわたることになります。ActionScript内の記述では、この「hensu1」と「hensu2」に対して「var hensu1 = new Sting();」や「var hensu1 = “”;」などを書く必要はありません。というのも、変数「hensu1」に格納された値「”値だよ”」がswfにわたってからFlashが再生されるので、せっかく渡った値がリセットされてしまうことになります。Flash内で動作確認する際は「flashvars」が渡す値を仮でActionScript内の変数として書いてデバッグをし、実際にHTMLをブラウザでFlashの動作確認する際にはコメントアウトをしておきましょう。

paramsの設定方法

objectタグの中に設定するparamsが必要であれば追加して書くことが可能ですが省略もできます。FlashPlayerを投下させる意味のある「wmode」の設定が、たとえばJavaScriptで作られたドロップダウン式のメニューとFlashがかぶっている場合に、この「wmode」が良く使われると思います。しかし、wmodeをtransparentにすると日本語入力などのコンテンツに使用すると、文字が入力できないというバグがあるみたいなので使う時には注意してください。
参考サイト:wmode を transparent に設定した際の注意点
http://www.adobe.com/jp/support/kb/ts/228/ts_228635_ja-jp.html

▼pramsのソースコードサンプル

var params = {
	play: "true",
	loop: "false",
	menu: "false",
	quality: "best",
	wmode: "transparent",
	allowscriptaccess: "always"
};

attributesの使い方

objectタグにidとnameを設定する時にこのattributesを使います。いろいろ調べても情報がなく、どういった使い方をするのかよくわかりませんが、、、おそらくIE4やN3などの古いブラウザで表示するのに必要そうな雰囲気がします^-^;

var attributes = {id: "myFlashContent",name: "myFlashContent"};

swfobjectができること

1.Internet Explorer(IE)においてのActiveX コントロールのアクティブ化
 いわゆる、IEでみたときにFlashを一回クリックしないと動作しないし触れないのを回避できます。
 ActiveX コントロールのアクティブ化(Microsoft)
 http://msdn.microsoft.com/ja-jp/library/ms537508(VS.85).aspx
 アクティブコンテンツのFAQ(Adobe)

2.FlashPlayer未インストールのユーザーに対しての代替コンテンツの表示

3.再生に必要なFlashPlayerのバージョンが満たされてなかった時に、代替コンテンツを表示させるか、Express Installを用いて最新版のFlashPlayerをインストールしてもらうのを促す。
参考サイト:Express Install 適用ガイド(Adobe)
http://www.adobe.com/jp/devnet/flashplayer/articles/expressinstall.html

4.Flashコンテンツが重要なコンテンツの場合、h1タグを用いて見出しを設置できるSEO対策。

5.パラメータを変数としてswfに渡すことができる。

swfobjectの注意点

・違うドメインへページ遷移するとき
getURLするときは、paramsにallowscriptaccess: “always”を追加する必要がある。
・wmodeの注意点
文字を入力するコンテンツの場合、FlashPlayerの透過を設定するwmode: “transparent”にすると文字が入力できない。
・swfobject.embedSWFの引数に入れる順番は決まっています。
例えば、flashvarsは使わないがparamsを使いたい時には、flashvarsの場所をnullにする必要があります。
▼引数なしの場合のサンプル

var flashvars = null;
var params = {allowscriptaccess: "always"};
swfobject.embedSWF("content.swf?u=20091210", "flashContent", "400", "200", "9.0.0", "expressInstall.swf", flashvars, params);

▼同じようにexpressInstallを使わない場合

swfobject.embedSWF("content.swf?u=20091210", "flashContent", "400", "200", "9.0.0", "", flashvars, params);

おまけ設定

・outline:noneのCSSでFlashの回りに点線を消してしまう。
CSSでobjectのoutlineをnoneにしています。これはFirefoxでFlashを表示させた時、そのコンテンツに対してクリックすると周りに出る点線を消す設定です。キーボードのTabを押すと、ページ内でクリックできる箇所にフォーカスをあてているこの点線を、swfobjectが表示させるobjectタグに対して設定しています。

・Flashに指し換わるdivの上に高さを設定したdivを挟む。
フルFlashコンテンツであれば問題ありませんが、パーツで使用するFlashがswfobjectで展開される前の状態では、一瞬、上下にガクガク表示する現象があります。これはネットの環境やパソコンの性能に左右されるかもしれませんが、ここで予め高さを設定し、backgroundで色や背景画像を設定しておけば見た目に変なことが起きることがありません。