ホーム » ビジネスブログ » オープンソース »

JavaScriptからFlashの関数を呼ぶ - Flash Java Script Integration Kit

2006年2月17日

JavaScriptからFlashの関数を呼ぶ - Flash Java Script Integration Kit

投稿者 竹村

SEの竹村です。お久しぶりです(^^ゞ

最近、Ajaxを開発案件で扱うことが増えてきました。

HTMLのリンクをクリックすると非同期通信を行って、取得したデータをHTMLのある領域に出力する。
通常のAjaxコールではこのような流れになると思います。

今回は、非同期通信を行うためのイベントをFlash側に持たせて、取得したデータをHTMLに出力する場合の話をします。

追記 by 竹村 (on 2008/05/13) -----
JavaScriptからFlashの関数を呼ぶ:getURLでなくExternalInterfaceを使用する利点
https://www.ark-web.jp/blog/archives/2008/05/javascriptflash_externalinterface.html
上記記事を公開しました。こちらもJavaScriptとFlashの相互通信のライブラリについて紹介しているので合わせてご覧いただければと思います。
----- 追記ここまで

最近、JavaScriptでもフェードインやスライドなどのエフェクトができるようになってきましたが、
やはりFlashの方が表現力、ブラウザ互換性が上だと思います。そのFlashを使ってAjaxを起動するためのインターフェイスを制作し、FlashからJavaScriptの関数を呼ぶというのが今回のポイントです。

FlashからJavaScriptの関数を呼ぶためのライブラリはこちらで提供されています。

osflash: Flash JavaScript Integration Kit
http://osflash.org/flashjs

ライブラリをダウンロードしてきたら、source\flash\actionscript に置いてあるcomフォルダを
Flashの置いてあるディレクトリにコピーしてから、Flash側に下記のコードを書くだけです。

import com.macromedia.javascript.JavaScriptProxy;
var proxy:JavaScriptProxy = new JavaScriptProxy();
proxy.call("javaScriptMethodName", "arg1", new Object());

javaScriptMethodNameがJavaScript側の関数名、arg1が引数になります。
例えば、JavaScriptとして↓このように記述した場合は「arg1」がalertされるでしょう。

<script type="text/javascript">
<!--
function javaScriptMethodName(arg) {
    alert(arg);
}
//-->
</script>

このJavaScriptの関数側でFlashから渡ってきた引数をもとに非同期通信を行って
結果をHTMLに出力すればよいわけですね。


さて、このライブラリではJavaScriptからFlashの関数を呼ぶことも可能です。
この方法については、こちらの方の解説が分かりやすかったです。

yoshiweb.NET-blog: Flash / JavaScript Integration Kit
http://yoshiweb.net/blog/index.php?itemid=106&catid=2

それで、コメント欄に

> 日本語は送れないのかな?変な数字になった...。

とありました。これは私の方でも確認できました。


JavaScriptFlashGateway.jsを追ってみたところ、JavaScriptFlashGateway.swfを出力する時に
flashvarsでJavaScriptからの引数を渡しているのですが、こいつのエンコードにFlashのデコードが
対応していないために起きている不具合でした。

JavaScriptから渡した引数が「ほげほげ」だった時、flashvarsにはencode()が適応され、%u307B%u3052%u307B%u3052 がセットされますが、UNICODEのエスケープはFlash側でデコードできないために、307B3052307B3052 という値をFlashは受け取っていたわけです。

対応方法としては、JavaScriptFlashGateway.jsの下記の部分を変更します。

もともとのコード


qs += 't'+(i)+'=undf';
break;
case 'string':
qs += 't'+(i)+'=str&d'+(i)+'='+escape(args[i]);
break;
case 'number':
qs += 't'+(i)+'=num&d'+(i)+'='+escape(args[i]);

修正後のコード

qs += 't'+(i)+'=undf';
break;
case 'string':
qs += 't'+(i)+'=str&d'+(i)+'='+encodeURI(args[i]);
break;
case 'number':
qs += 't'+(i)+'=num&d'+(i)+'='+escape(args[i]);


この対応方法は、osflashのバグトラックにも載っていました。

I18N problem: multi-bytes characters are broken;
JavaScriptFlashGateway.js should NOT use the escape() function

http://mirror1.cvsdude.com/trac/osflash/flashjavascript/ticket/41


FlashとJavaScriptとAjax、それぞれの長所を生かしてうまくコラボレーションさせると
リッチ・ユーザーインタフェースとしての表現が大幅に広がるかもしれないですね。

投稿者 竹村 : 2006年2月17日 14:20

カテゴリー: XP・アジャイル(システム開発) , オープンソース

タグ:


Movable Type用高機能メールフォーム生成プラグイン A-Formの詳細へ
Movable Type用会員限定サイトプラグイン A-Memberの詳細へ
Movable Type用予約サイト構築プラグイン A-Reserveの詳細へ
ARK-Web×CSR(企業の社会的責任)

アークウェブの本

Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用

Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用

内容充実のZen Cart公式本(v1.3対応)がついに発表です。アークウェブのスタッフをはじめZen-Cart.JPの中心メンバーが共著で執筆しました。続きを読む

Movable Type プロフェッショナル・スタイル

Movable Type プロフェッショナル・スタイル

ビジネスサイト構築におけるCMSとしてのMTの活用方法について、豪華執筆陣による実践的MT本です。八木が共著で執筆しました。続きを読む

Web屋の本

Web屋の本

Web 2.0時代の企業サイトの構築・運用などの戦略を考える「Web屋の本」 (技術評論社)を、中野・安藤が執筆しました。続きを読む

新着はてブ

Loading

アーカイブ

応援しています

  • キッズ・セーバー
  • ソロモン・リリーフ ─ソロモン諸島を応援する有志による、震災復興支援プロジェクト─

    (終了しました)

RSS配信

 

サービスおよびソリューション一覧


最新情報・投稿をチェック


このページのトップに戻る

Photo by A is for Angie

Powered by Movable Type Pro 6.3.8