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、それぞれの長所を生かしてうまくコラボレーションさせると
リッチ・ユーザーインタフェースとしての表現が大幅に広がるかもしれないですね。
カテゴリー: XP・アジャイル(システム開発) , オープンソース
タグ:
« 前の記事:Webサイトのアクセシビリティで裁判─商用サイトに求められる姿勢
» 次の記事:2006年 最もイケそうなWeb 2.0サービス("The Most Promising Web 2.0 Software of 2006") 前編
アークウェブの本
Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用
内容充実のZen Cart公式本(v1.3対応)がついに発表です。アークウェブのスタッフをはじめZen-Cart.JPの中心メンバーが共著で執筆しました。続きを読む
新着はてブ
カテゴリー
- Shopify(ショピファイ)オンラインショップ構築
- NGO・NPO向け情報
- スマートフォン
- だれもが使えるウェブコンクール
- mixiアプリ
- OpenSocial (システム開発)
- アークウェブのCSR
- A-Form, A-Member, A-Reserve(MTプラグイン)
- Ruby on Rails(システム開発)
- necoったー
- Miqqle
- WebSig24/7
- ecoったー
- ビッグイシュー(The Big Issue)
- CSR(企業の社会的責任)
- マッシュアップ
- RIA (システム開発)
- セキュリティ(システム開発)
- 唐松(アクセス解析)
- Ajax (システム開発)
- テスト(システム開発)
- データベース
- PukiWiki
- Web 2.0
- SEO・サーチエンジン最適化
- XP・アジャイル(システム開発)
- Web・ITニュースクリップ
- Webアクセシビリティ
- Webデザイン
- SEM・サーチエンジン広告
- Webユーザビリティ
- CMS・MovableType
- Zen Cart(オンラインショップ構築)
- Snippy(SNS・ソーシャルブックマーク)
- アークウェブ
- オープンソース
- CMS(コンテンツマネジメント・システム)
- Webマーケティング
- AMP
- SNS