javascript Archive

JSで「undefined++」をすると「NaN」が返ります。undefinedに数字を足したり引いたりするとNaN。でもAS3では、この世のものとは思えないエラーが出ます。
AS2では「undefined++」はエラーですが「undefined+1」はundefinedでした。

どうせ使わないけどどっかで判定するときにJSのノリで++しちゃわないようにメモメモ。っていうかundefined基準で判定を下さないようにしよう。先入観を持つなという話です。

function testFunc(str){
  alert(str)
}

testFunc("こんにちはこんにちは")

関数を用意して、引数をつけて実行する、というのは普通のことです。でもjavascript界ではそういう書き方はレガシーだ、クールじゃない、アホ、氏ね、という扱いになるので、かっちょよく書かないといけません。いけなくないんだけど。

上と同じことを書いているのがこちら。

(function testFunc(){
  alert(str)
})("こんにちはこんにちは")

ポイントは2つくらいあって、まず function(){} を (function(){})と、かっこで包んでいること。これによって関数っぽく見えるtestFuncが関数リテラルという、まぁ、文章か何かになるらしいです。
そして引数は最後の("こんにちはこんにちは")ですが、関数リテラル野郎はここで引数をつけているわけですね。

さらにこれは、明示的に testFunc(); などと書かなくても、そのまま実行されちゃいます。だから関数だけ用意しておいて後で呼び出すぜ！　っていうときは普通に関数を書きます。

よく分かってないけどこれの利点があったら教えてください。今っぽい書き方、っていうだけじゃないよね。

SWFObjectを使ったExternalInterfaceまとめの続きです。

前回はExternalInterface.call でAS→JSの通信が出来たところまででした。今回は逆に、JSからAS関数を呼び出すところです。それにはaddCallback関数を使います。

HTML側↓

<div id="externalFlash">
<script type="text/javascript">
	// <![CDATA[
	var so = new SWFObject('hoge.swf', 'externalName', '400', '300', '8', '#ffffff');
		so.addParam('wmode', 'opaque');
		so.addParam('allowScriptAccess', 'always');
        so.write('externalFlash');
	// ]]>
</script>

そしてFlash側↓

import flash.external.*; //←いちばん最初に書く
//
ExternalInterface.addCallback("flashCallbackFunc",null, sampleFunc)
function sampleFunc(){
	test_txt.text="コールバックしたよ"
}

そしてJS側↓

function removelayer(){
  var doc= document.all? window["externalName"] : document["externalName"];
  doc.flashCallbackFunc();
}

大事なのは、コールバック用JS関数をコールするのはSWFObjectのDIVじゃなくて、EMBEDのIDから、ということです。これで一日ハマりました。やりがちなのが externalFlash.flashCallbackFunc() とか。です。

当たり前のことなんだけどJSの便利な機能を忘れてたのでメモメモ。
SWFObjectで、URLから引数を変数として渡したいときはこうやるといいかも、という話です。
ちょっと時代遅れでごめんなさい。

<script type="text/javascript">
var so = new SWFObject("SAMPLE.swf", "sampleid", "900", "400", "8", "#FFFFFF");
var ls = location.search;//URLの?以降の文字列
var hensuu = ls.substring(0,5); //この行はいらないかもしれない
so.addVariable("hen", hensuu);
so.addParam("wmode", "transparent");
so.write("flashcontent");
</script>

つまりlocation.searchが便利だったよ、ということですね。レベル低くてすいません。最近制作やってません。

今ではFlashを貼り付けるのにSWFObjectが一般的になってますが、「UFO:Unobtrusive Flash Objects 」というのがあるみたいです。はてブとdel.icio.usでは2005年からブクマされてました。名前がいいですよね。実際に使う場面はSWFObjectの方が慣れてるので機会は少ないと思いますが、一応こういうのもあるんだねー、ということでメモメモ。

いずれ失われるとしても、こういうツール的なものはいろんな場面で使えそうなのでアイデアとしてメモです。webをAIRにしたり、FLVを編集したり、クリエイティブをサポートするツールってのはやっぱり重要だと思うのです。

っていう意味では、今後はAIRをもっとカンタンに導入できるツール、ですかね。

<script type="text/javascript" src="ufo.js"></script>
<script type="text/javascript">
var FO = { movie:"test8.swf", width:"300", height:"120", majorversion:"8", build:"0", xi:"true" };
UFO.create(FO, "ufoDemo");
</script>

UFO.createっていう表現がイイですね。

いまさらなんですが、画面上のFlashにシークバーをつけるBookmarkletをメモ。
Flash Bookmarklet

Firefoxの場合はこちら、IEの場合はこちらで動作確認できます。このリンクはサンプルなので実際のコードはJesse Rudermanで確認してみてください。

シークバー考察

時間を表すシークバーなんですが、時計とは違うし、スクロールバーとも違う。横にスライドさせることが過去・現在・未来を表す、というこのUIの独自性がかなり好きです。これを使って、新しいUIを提案できるんじゃないかなぁ、ともやもやしているこのごろです。

FlashとJSの通信をしたいならExternalInterfaceを使うのは常識だとして、実際、どう書いていいのかがよく分からなくなる場合があるのでまとめです。

HTML側↓

<div id="externalFlash">
<script type="text/javascript">
	// <![CDATA[
	var so = new SWFObject('hoge.swf', 'external2', '400', '300', '8', '#ffffff');
		so.addParam('wmode', 'opaque');
		so.addParam('allowScriptAccess', 'always');
        so.write('externalFlash');
	// ]]>
</script>

1. まず、SWFObjectコードをexternal**というDIVで包む
2. SWFObjectの第二引数をexternal**というIDにする
3. allowScriptAccessをalwaysにする

僕が試した感じ、これでIE/FFともにうまくいきました。

Flash側↓

import flash.external.*; //←いちばん最初に書く
//
test_btn.onRelease = function() {
  ExternalInterface.call('hogeFunc', hoge1);
};

Flashは最初にexternalクラスをインポートして、callメソッドでJS関数を呼び出すだけ。簡単。JS関数はcallメソッド('関数名','引数1'...)という形式になります。引数がなければcall('hogeFunc');だけでも可。

最後にJS側↓

function hogeFunc(hoge1){
  window.alert(hoge1)
}

これでJSとの融合もバッチリです。

追記：addCallback関数の説明はこちら。

ハマった…
どうやら、jqueryだけならOKだけど、プラグインとして角丸コーナーのjquery.curvycornerを使うとIEでFlashがアクティブXコントロールに引っかかるみたいです。

背景色だけを角丸にするならjquery.cornerプラグインでいいけど、ボーダー付きで角丸を実装しようとするとjqueryは向いていない…のかな。

しょうがない。。違うのを探そう。

ブログパーツなんて簡単だろう、なんて思ってクロスドメインxmlを置いて、外部swfを呼び出すところまでは作ることができました。でも、ブログパーツ呼び出しタグ（js）内にfunctionを書いてDOM操作してやろうと思っていた部分が動きません。
ローカルでは動く（HTMLとJSは同じファイル）のに、JSを外部ドメインにしたら動かない。
function の部分で「missing ( before formal parameters」ってエラーが出てるけど意味が分かりません。
前かっこがないよ、ってことでしょうか??　でもそこ、functionの始まりだから（ファイルの始まりでもある）かっこなんていらないよ、って思って、動きません。
IEにいたっては動作できません、っていうエラーをアラートして404エラーを吐き出す始末。
要調査継続…

Flashで作ったブログパーツですごいことをやるなら、Flash内で完結してはダメだと思いました。
どうするかというと、javascriptです。当たり前っちゃ当たり前だけど、今までは「Flashからjavascriptを呼び出してほげほげする」という考え方で作っていたのが、ふと「ブラウザをすんごいことにするjavascript関数をたくさん用意しておいて、Flashをトリガーに呼び出す」という考え方にシフトすると、すっごいことができそうな気がしてきました。

JSはデバグは面倒だけど、ブラウザを絞れば開発は楽です。しかも、書いたコードを即実験できます。この柔軟性は、ASに唯一勝るポイントだと思っています。僕はASで育ったのでこれを離れられないのですが、JSを使って華麗にDOM操作する楽しみも知っています。
これらを合わせるとき、どうしても「まずFlashありき」で考えがちになっていました。
それを、「まずJS関数を書く」ことから始めることで、見た目じゃないすごいことを考えられそうな気がします。
ちょうど今月と来月の雑誌WebDesigningでブログパーツを作ろう、みたいな企画があったので、これを読んで閃いたエントリです。

JSで何ができるかは今さらなので書かないんですが、何をするかというと「DOM操作」。これに尽きます。ブログ内の文章を好き勝手に弄ったり、遊んだり。夢が広がりんぐですね。

今まであんまり気にしてなかったけど、htmlから呼び出す外部jsファイルがhtmlとは違うディレクトリにあった場合、その実行パスはどこになるのか、ってのにハマったのでメモっておく。

基本、外部cssはそのcssが基準になるから、背景画像とかを読み込むときはcssからの相対パスを書けばいい。
Flashはそのswfを読み込むhtmlが基準になるからhtmlからの相対パスを書けばいい。objectタグで（swfobjectならaddParam("base","基準ディレクトリ");でもOK）

で、jsはFlashと同じでhtmlを基準に相対パスを書けばいいんだね。
cssだけが自己中で、jsとswfはhtmlに従属してると思ってればOKと。