JavaScript

jQueryのプラグインでCookieを扱う方法。

2010.02.11 / Notes

jQueryのプラグインを使うと、ブラウザのクッキーを簡単に扱えます。
実装するにはjQueryのコアと、「jquery.cookie.js」プラグインを読み込ませてから、「$.cookie」メソッドでクッキーの読み込み、書き込みの操作ができるようになります。
次のコードでは読み込み、書き込みごとに関数にして、「cookie-test」というクッキー名の値を操作しています。
クッキーの有効期限は「expires」の引数で、日にちを指定できます。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>

<script type="text/javascript">

//クッキーの読み込み
function getCookie() {
	return $.cookie("cookie-test");
}

//クッキーの書き込み
function setCookie(str) {
	$.cookie("cookie-test", str, {expires:3}); //有効期限を3日
}
</script>

//クッキーの読み込み

function getCookie() {

return $.cookie("cookie-test");

}

//クッキーの書き込み

function setCookie(str) {

$.cookie("cookie-test", str, {expires:3}); //有効期限を3日

}

</script>

jquery.cookie.jsプラグインページ

SWFを表示しているURLの取得方法。

2010.02.06 / Notes

ActionScriptでSWFの置かれているパスではなく、実際に表示されているページのパスを取得するにはJavaScript、またはPHPとの連携で可能になります。

Javascriptの場合

ActionScriptからJavascriptの関数を実行する「ExternalInterface」で行えます。
HTML内に、パスの値を返すJavaScriptの関数を加えます。

<script type="text/javascript">
function getPath() {
    return location.href;
}
</script>

function getPath() {

return location.href;

}

</script>

ActionScriptではJavaScriptの関数を実行して、戻り値を変数に格納します。

var path:String = ExternalInterface.call("getPath");

1	var path:String = ExternalInterface.call("getPath");

PHP（＆FlashVars）の場合

PHPでActionScriptに値を渡すには、FlashVarsを利用する方法が簡単です。
PHP内のFLASH埋め込みのコード内に、PHPで動的に取得したパス情報を、FlashVars経由でSWFに渡します。

<param name="FlashVars" value="path=<?php echo "http://".$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"]; ?>" />

1	<param name="FlashVars" value="path=<?php echo "http://".$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"]; ?>" />

ActionScriptではFlashVarsの値を「loaderInfo.parameters」で取り出します。

var param:Object = loaderInfo.parameters;
var path:String = param["path"];

1 2	var param:Object = loaderInfo.parameters; var path:String = param["path"];

ブラウザ上でActionSctiptの簡易デバッグ。

2010.01.07 / Labs

ブラウザでFLASHを再生中、デバッグのためにパラメータなどを出力する方法です。
ActionScriptを制作中によく利用するtraceですが、ブラウザで再生中には実行することができません。そこでJavaScriptとの連携を利用して同様のことを実現します。
はじめにHTML内にJavaScriptで、引数を受け取りダイアログで表示するスクリプトを記述します。関数名は「flashTrace」としておきます。

<script type="text/javascript">
function flashTrace($str) {
alert($str);
}
</script>

function flashTrace($str) {

alert($str);

}

</script>

次にActionScriptでは、JavaScriptの関数を実行するたスクリプトを記述します。引数の一つ目がJavaScriptの関数名で、二つ目が出力したいパラメータです。

ExternalInterface.call("flashTrace", "デバッグのテスト");

1	ExternalInterface.call("flashTrace", "デバッグのテスト");

これでブラウザで再生中に、ダイアログでActionScript内のパラメータを出力することができます。
ですが、このままだとFLASHで制作中のときには、traceも併記する必要が出てしまいます。その場合、下記のようにブラウザで再生かどうかを判定して、どちらか実行する関数にしておくと便利です。

ft("デバッグのテスト");

function ft(str:String):void {
	
	//サーバへのアクセスを判定してJavascript、またはtraceを実行
	if (loaderInfo.url.indexOf("http") == 0) {
		ExternalInterface.call("flashTrace", str);
	} else {
		trace(str);
	}
}

ft("デバッグのテスト");

function ft(str:String):void {

//サーバへのアクセスを判定してJavascript、またはtraceを実行

if (loaderInfo.url.indexOf("http") == 0) {

ExternalInterface.call("flashTrace", str);

} else {

trace(str);

}

ちなみにサーバへのアクセス（http://）ではなく、ブラウザで直接HTMLファイルを開いた場合（file://）には、FLASHのセキュリティでJavaScriptが実行されません。外部サーバではなくローカルで実行するには、Webサーバをローカル環境に構築する必要があります。

jQueryのプラグインでFLASHの埋め込み。

2010.01.05 / Notes

jQueryのプラグインを利用して、HTMLにFLASHを簡単に埋め込む方法です。短いコードで記述できるので、ソースコードがすっきりとして見やすくなります。

<!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>jQuery FLASH</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.flash.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400'});
});

</script>
</head>
<body>

<div id="flash">
<p>このページのコンテンツには、Adobe Flash Playerの最新バージョンが必要です。</p>
</div><!-- flash -->

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jQuery FLASH</title>

$(document).ready(function() {

$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400'});

});

</script>

</head>

<body>

<p>このページのコンテンツには、Adobe Flash Playerの最新バージョンが必要です。</p>

</div>

</body>

</html>

<head>タグ内にjQuery本体とjquery.flash.jsを読み込んで、div#flashに対して埋め込みの記述をします。
最低限必要なのはSWFファイルのパスのみで、width、heightは省略できます。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.flash.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400'});
});

</script>

$(document).ready(function() {

$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400'});

});

</script>

FLASHにパラメータを渡す場合は、次のようにflashvarsをオブジェクトで追加します。

$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400', 'flashvars':{'init':'init.xml', 'image':'image.jpg'}});

1	$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400', 'flashvars':{'init':'init.xml', 'image':'image.jpg'}});

jquery.flash.jsプラグインページ