FLASHをブログパーツにして配布する場合にはJavaScriptに収めてしまってJSスクリプトを配布する方法がある。しかし自分が今までやっていた方法だとJS経由でFLASHに変数を渡す場合に問題が起こる可能性があることがわかったのでその解決方法について。まず今までの問題のある書き方の場合、例えばJSファイルを以下のように記述していた。
//"http://example.com/showme.js" function showMe(userid){ //swfを表示するのに必要な<object>タグ全体。実際は改行無し var obj = '<objcet> ...略... <param name="FlashVars" value="userid='+userid+'" /> ...略... <embed ...略...FlashVars="userid='+userid+'"></embed></object>'; document.write(obj); }
配布用ソースをは以下のような書式。
//配布用html貼付けソース <script type="text/javascript" src="http://example.com/showme.js"></script> <script type="text/javascript">showMe("borealkiss");</script>
この場合、(万が一)ユーザーがすでにshowMeという関数を他で定義していると関数名がコンフリクトを起こす(以下の例ではユーザーの期待に反しブログパーツが二個表示される)。
<html> <head> <!--ユーザー定義のshowMe関数--> <script type="text/javascript"> function showMe(name){ alert("Welcome, " + name + "!"); } </script> </head> <body> <!--ブログパーツのshowMe関数--> <script type="text/javascript" src="http://example.com/showme.js"></script> <script type="text/javascript">showMe("borealkiss");</script> <!--ユーザー定義のshowMe関数を実行させるつもりだったのに！--> <script type="text/javascript">showMe("borealkiss");</script> </body> </html>
このコンフリクトはこちらが定義した関数を匿名関数(無名関数)でラップしてしまい、その場で匿名関数を実行させることで回避できる(special thx: YungSang)。
//"http://example.com/showme.js" 修正版 (function(){ function showMe(userid){ var obj = '<objcet> ...略... <param name="FlashVars" value="userid='+userid+'" /> ...略... <embed ...略...FlashVars="userid='+userid+'"></embed></object>'; document.write(obj); } showMe(window._com_example_showMe_userid); })();
配布ソースは以下のように修正。
//配布用html貼付けソース修正版 <script type="text/javascript">var _com_example_showMe_userid = "borealkiss"</script> <script type="text/javascript" src="http://example.com/showme.js"></script>
ポイントは匿名関数でラップしてしまうことでブログパーツ表示用関数をローカルスコープにすること;
function(){ function showMe(...){ ... } showMe(***); }
それと匿名関数をその場で実行させることだ;
(function(){...})();
これでwindow上で定義した変数”_com_example_showMe_userid”がコンフリクトしなければユーザーに迷惑をかけることはないはず。そのためにできるだけユニークな変数名にするとよい(例えば自ドメイン名に由来するものetc.)。
[関連リンク]
JavaScript++かも日記: 【JavaScript】匿名関数で匿名スコープ&インスタンス
