[JavaScript] ライブラリ「SWFファイルに自動でwmodeを設定する」

2015年12月12日

Javascript テクノロジー プログラミング

今や廃れた技術となりつつあるFLASHですが、PCブラウザではまだまだ健在のようですね。 もちろんスマホではAndroidにも見捨てられ、残念な技術となっている様子もありますが、 ゲーム業界にはまだまだ必要な技術かもしれません。

swfファイルのzindex

FLASHにwmodeという属性がセットされていない場合、CSSのz-indexをセットしてもSWFのエレメントよりも手前にオブジェクトが表示できなくなる。 これはもうFLASHの仕様としか言いようがなく、HTMLのルールを無視していることは間違いないです。 でも、解決法は簡単でwmode="transparent"という属性をセットするだけなんですね。 でも、いちいちHTMLソースコードを書き直すのが面倒くさいという場合の為にjavascriptで強制的にwmodeをセットするライブラリを作ってみました。

ソースコード

swf.js

var $lib = { //swf-hack(wmode=transparent); swf:{ set:function(wmode){ //IE; if(navigator.userAgent.indexOf("MSIE")!=-1){ this.proc.ie(wmode); } else if(navigator.userAgent.indexOf("Opera")!=-1){ this.proc.op(wmode); } else if(navigator.userAgent.indexOf("Firefox")!=-1||navigator.userAgent.indexOf("Safari")!=-1||navigator.userAgent.indexOf("Chrome")!=-1){ this.proc.ff(wmode); } }, //除外判定; exclude:{ jogai:[], chk:function(jogaiId){ for(var i=0;i<this .jogai.length;i++){ if(jogaiId == this.jogai[i]){return true;} } return false; } }, proc:{ ie:function(wmode){ var object=document.getElementsByTagName("object"); for(var obj in object){ if(typeof(object[obj])!='object'){continue} // if(!object[obj].src){continue} // if(!object[obj].getElementsByTagName("param").length){continue} var ch = object[obj].childNodes; var flg=0; for(var i=0;i<ch.length;i++){ if(ch[i].tagName=='PARAM'){ flg++; break; } } if(!flg){continue} var html = object[obj].outerHTML; if(!html){continue;} if(wmode){ var wmode2 = "<PARAM NAME='WMODE' VALUE='OPAQUE'>"; } else{ var wmode2 = "<param NAME='WMODE' VALUE='TRANSPARENT'/>"; } if(html.match(/<object (.*?)>(.*?)$/im)){ html = "<object "+RegExp.$1+">"+wmode2+RegExp.$2; } var div = document.createElement("div"); div.style.display="inline"; div.innerHTML = html; object[obj].parentNode.replaceChild(div,object[obj]); } var embed=document.getElementsByTagName("embed"); for(var emb in embed){ if(typeof(embed[emb])!='object'){continue;} var html2 = embed[emb].outerHTML; if(!html2){continue;} if(wmode){ var wmode2 = " WMODE='OPAQUE' "; } else{ var wmode2 = " WMODE='TRANSPARENT' "; } if(html2.match(/<embed (.*?)/>$/im)){ html2 = "<embed "+RegExp.$1+wmode2+"/>"; } var div2 = document.createElement("div"); div2.style.display="inline"; div2.innerHTML = html2; embed[emb].parentNode.replaceChild(div2,embed[emb]); } }, ff:function(wmode){ var object=document.getElementsByTagName("object"); for(var obj in object){ if(typeof(object[obj])!='function' || object[obj].innerHTML == undefined){continue;} pa = document.createElement('param'); pa.name='wmode'; if(wmode){ pa.value='opaque'; } else{ pa.value='transparent'; } object[obj].appendChild(pa); } var embed=document.getElementsByTagName("embed"); if(embed.length){ for(var i=0;i<embed .length;i++){ if(typeof(embed[i])!='function'){continue;} //object-embed記述; if(embed[i].parentNode.tagName == 'OBJECT'){ var html = embed[i].parentNode.innerHTML; if(html.match(/(.*?)<EMBED(.*?)/>/im)){ if(wmode){ html = RegExp.$1+"<embed wmode='opaque'"+RegExp.$2+"/>"; } else{ html = RegExp.$1+"<embed wmode='transparent'"+RegExp.$2+"/>"; } } embed[i].parentNode.innerHTML = html; } //embedのみ記述; else{ var str="<embed "; for(var e in embed[i]){ if(typeof(embed[i][e])!='string'){continue} str+= e + "='"+embed[i][e]+"' "; } if(wmode){ str+="wmode='opaque'/>"; } else{ str+="wmode='transparent'>"; } var div = document.createElement("div"); div.style.display="inline"; div.innerHTML = str; embed[i].parentNode.replaceChild(div,embed[i]); } } } }, op:function(wmode){ var embed=document.getElementsByTagName("embed"); if(embed.length){ for(var i=0;i<embed .length;i++){ if(typeof(embed[i])!='object'){continue;} //object-embed記述; if(embed[i].parentNode.tagName == 'OBJECT'){ var html = embed[i].parentNode.innerHTML; if(html.match(/(.*?)<EMBED(.*?)/>/im)){ if(wmode){ html = RegExp.$1+"<embed wmode='opaque'"+RegExp.$2+"/>"; } else{ html = RegExp.$1+"<embed wmode='transparent'"+RegExp.$2+"/>"; } } embed[i].parentNode.innerHTML = html; } //embedのみ記述; else{ var str="<embed "; for(var e in embed[i]){ if(typeof(embed[i][e])!='string'){continue} str+= e + "='"+embed[i][e]+"' "; } if(wmode){ str+="wmode='opaque'/>"; } else{ str+="wmode='transparent'>"; } var div = document.createElement("div"); div.style.display="inline"; div.innerHTML = str; embed[i].parentNode.replaceChild(div,embed[i]); } } } } } }: };

実行

swf.jsを事前に読み込んでおいて、FLASH記述の後ろに下記scriptタグを挿入するだけでOK。 <script type="text/javascript" src="swf.js"></script> <script type="text/javascript">$lib.swf.set();</script>

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。