<h3>あまりにも酷すぎる IE FlashPlayer の仕様</h3>
<p>標準の HTTP の API ではサーバからのレスポンスヘッダが 201 だと IOError が出て回避不能でどうしようもない。これはひどい…。Firefox なんかだと問題ない。RESTFULL なアプリケーション全滅じゃん。自分で Socket クラスで http client 作るしかないのかな…。</p>

あまりにも酷すぎる IE FlashPlayer の仕様標準の HTTP の API ではサーバからのレスポンスヘッダが 201 だと IOError が出て回避不能でどうしようもない。これはひどい…。Firefox なんかだと問題ない。RESTFULL なアプリケーション全滅じゃん。自分で Socket クラスで http client 作るしかないのかな…。

あまりにも酷すぎる IE FlashPlayer の仕様

<ul>
<li><a href="http://d.hatena.ne.jp/hatenadiary/20071210/1197251812">キーワードを弓で打って遊ぶ、「PATAPON(パタポン)」オリジナルミニゲームの提供開始について【12/16(日)まで】 - はてなダイアリー日記</a></li>
</ul>
<p>12月10日(月)から12月16日(日)までキーワードページで PSP用ゲームソフトパタポンのミニゲームを遊ぶことが出来ます。まだ遊んだことが無い方は、是非遊んでみてください:D。<br>
自分はこのミニゲームで、キーワードの位置情報を利用したミニゲームシステムの考案からゲーム内容、レイアウト等のデザインからサーバサイドの実装まで、ほぼ最初から最後までかなり自由に作らせて貰いました。<br>
以前から<a href="http://d.hatena.ne.jp/secondlife/20070913/1189691401">はて☆すた OP</a>なんかでやっていた Flash を背景透過にして、ブラウザ内部に全画面表示させ、レンダリングされてる HTML コンテンツ(位置や文字情報)などをサーバサイドを通さず、直接 Flash からアクセスしてなんか作ってみたいなー、と思っていたのでそれが実現出来た感じです。結構今後 Flash 側から ExternalInterface (JS) を通してブラウザの DOM にアクセスしてあれこれ、というのが流行ってくるんじゃないかなぁ、と漠然と思ったりしてます。<br>
今までは Blog パーツなどはあくまでサイドバー内に収まっているだけで、そこから飛び出であれこれ、というのははそんな無かったなのですが、HTML からの様々な情報を利用することで、もっと面白い試みが増えてきそうな感じです。</p>
<h4>技術的なこと</h4>
<h5>背景透過</h5>
<p>Flash で背景透過にするには wmode を transparent にすれば良いのですが、wmode=transparent にはいろいろな罠があります。特に全画面で背景透過は全ブラウザで挙動が違うのでそこらへんの Flash/JS を追っかける気力がないとかなり辛いです…。</p>
<ul>
<li>Flash 上へのテキスト入力が変になる・入力できない
<ul>
<li>どうにもならないので ExternalInterface で JS を呼び出し、HTML の要素の zIndex を高く設定した要素を SWF 上に重ねて表示したりする必要が…</li>
</ul>
</li>
<li>マウスホイール・キーイベントを受け取るブラウザと受け取らないブラウザがある
<ul>
<li>Flash にフォーカスが当たっていても、カーソルキーやホイールがブラウザのスクロールだったり、はたまた Flash へイベントが渡ったり、両方にイベントが渡ったりとなんとも素敵な感じなります</li>
</ul>
</li>
<li>OSX でアニメーションさせたときの FPS ががくっと落ちる。
<ul>
<li>wmode=transparent にしないときに比べ三倍ぐらい重くなります。どうしようもないので最適化でカバー。</li>
</ul>
</li>
<li>Opera 9.21 以降で ExternalInterface#call が使えなくなる
<ul>
<li><a href="http://my.opera.com/japanese/forums/topic.dml?id=190765">9.21でFlashPlayerの不具合？</a></li>
<li>JS と連携してると致命的です。ExternalInterface#addCallback の方は使えるので、JS 側から Flash 内部の関数は呼べます。それを利用して Opera の場合は ExternalInterace#call をラップして Flash 側に JS の実行キューを溜めて、定期的に JS からキューの内容を取得して、キューが貯まってたら eval とかしてます…。</li>
</ul>
</li>
</ul>
<p>その他いろいろあったような…。</p>
<h5>Ten.EventDispatcher</h5>
<p>はてな製の JS ライブラリには DOM イベントライク(最初は DOM Level3 Events をほぼ実装してましたが、Ten は出来るだけ軽量に、必要な所のみを実装するというポリシーのため、現在の形になりました)な Ten.EventDispatcher というのがあります。<br>
かなりこれが便利で、必要なときには dispatchEvent() でイベントを送り、待ち受けてるハンドラがそれを実行します。<br>
JS 側では onEnterFrame のような一定間隔でイベントを dispatchEvent('ENTER_FRAME') を送り、フレーム毎処理を実行したり、Flash 側の初期化が終わったら ExternalInterface で dispatchEvent('SWF_LOADED') を送ったり、position fixed に対応してないブラウザでは addEventListener('FIXED', function(points) { ... } ); とか登録しておいたりと、イベントをどんどん登録・送信できて便利です。<br>
Ten.EventDispatcher では</p>
<pre><code>var ed = Ten.EventDispatcher();
ed.addEventListener('test', function() {
    alert('test');
});
ed.dispatchEvent('test'); // イベント送信
</code></pre>
<p>もしくは Ten.EventDispatcher#implementEventDispatcher を使い、特定オブジェクトにイベントディスパッチャを実装します。</p>
<pre><code>var o = {};
o.foo = 'foo';
Ten.EventDispatcher.implementEventDispatcher(o);
o.addEventListener('ALERT_FOO', function() {
    alert(this.foo);
});
o.dispatchEvent('ALERT_FOO');
</code></pre>
<p>な感じで使えると思います。JS での DOM 要素以外でも使えるイベントディスパッチャの実装はかなり便利だと思うのですが、メジャーな JS ライブラリではどれも実装してない気がします。</p>
<h5>サーバサイド</h5>
<p>Rails + RubyAMF で。実際の所、別に AMF の必然性は感じなかったのですが使えるなら使ってみようという感じで。Rails + WebORB という組み合わせもあったのですが、WebORB では設定ファイル周りが面倒なのでさくっと使える RubyAMF で。AS3 からそのまんま Rails のコントローラとメソッド、引数を指定してリモート呼び出しが行えるのはかなり楽でした。</p>

キーワードを弓で打って遊ぶ、「PATAPON(パタポン)」オリジナルミニゲームの提供開始について【12/16(日)まで】 - はてなダイアリー日記12月10日(月)から12月16日(日)までキーワードページで PSP用ゲームソフトパタポンのミニゲームを遊ぶことが出来ます。まだ遊んだことが無い方は、是非遊んでみてください:D。自分はこのミニゲームで、キーワードの位置情報を利用したミニゲームシステムの考案からゲーム内容、レイアウト等のデザインからサーバサイドの実装まで、ほぼ最初から最後までかなり自由に作らせて貰いました。以前からはて☆すた OPなんかでやっていた Flash を背景透過にして、ブラウザ内部に全画面表示させ、レンダリングされてる HTML コンテンツ(位置や文字情報)などをサーバサイドを通さず、直接 Flash からアクセスしてなんか作ってみたいなー、と思っていたのでそれが実現出

キーワードを弓で打って遊ぶ、「PATAPON(パタポン)」オリジナルミニゲームの提供開始について【12/16(日)まで】 - はてなダイアリー日記12月10日(月)から12月16日(日)までキーワードページで PSP用ゲームソフトパタポンのミニゲームを遊ぶことが出来ます。まだ遊んだことが無い方は、是非遊んでみてください:D。自分はこのミニゲームで、キーワードの位置情報を利用したミニゲームシステムの考案からゲーム内容、レイアウト等のデザインからサーバサイドの実装まで、ほぼ最初から最後までかなり自由に作らせて貰いました。以前からはて☆すた OPなんかでやっていた Flash を背景透過にして、ブラウザ内部に全画面表示させ、レンダリングされてる HTML コンテンツ(位置や文字情報)などをサーバサイドを通さず、直接 Flash からアクセスしてなんか作ってみたいなー、と思っていたのでそれが実現出来た感じです。結構今後 Flash 側から ExternalInterface (JS) を通してブラウザの DOM にアクセスしてあれこれ、というのが流行ってくるんじゃないかなぁ、と漠然と思ったりしてます。今までは Blog パーツなどはあくまでサイドバー内に収まっているだけで、そこから飛び出であれこれ、というのははそんな無かったなのですが、HTML からの様々な情報を利用することで、もっと面白い試みが増えてきそうな感じです。技術的なこと背景透過Flash で背景透過にするには wmode を transparent にすれば良いのですが、wmode=transparent にはいろいろな罠があります。特に全画面で背景透過は全ブラウザで挙動が違うのでそこらへんの Flash/JS を追っかける気力がないとかなり辛いです…。Flash 上へのテキスト入力が変になる・入力できないどうにもならないので ExternalInterface で JS を呼び出し、HTML の要素の zIndex を高く設定した要素を SWF 上に重ねて表示したりする必要が…マウスホイール・キーイベントを受け取るブラウザと受け取らないブラウザがあるFlash にフォーカスが当たっていても、カーソルキーやホイールがブラウザのスクロールだったり、はたまた Flash へイベントが渡ったり、両方にイベントが渡ったりとなんとも素敵な感じなりますOSX でアニメーションさせたときの FPS ががくっと落ちる。wmode=transparent にしないときに比べ三倍ぐらい重くなります。どうしようもないので最適化でカバー。Opera 9.21 以降で ExternalInterface#call が使えなくなる9.21でFlashPlayerの不具合？JS と連携してると致命的です。ExternalInterface#addCallback の方は使えるので、JS 側から Flash 内部の関数は呼べます。それを利用して Opera の場合は ExternalInterace#call をラップして Flash 側に JS の実行キューを溜めて、定期的に JS からキューの内容を取得して、キューが貯まってたら eval とかしてます…。その他いろいろあったような…。Ten.EventDispatcherはてな製の JS ライブラリには DOM イベントライク(最初は DOM Level3 Events をほぼ実装してましたが、Ten は出来るだけ軽量に、必要な所のみを実装するというポリシーのため、現在の形になりました)な Ten.EventDispatcher というのがあります。かなりこれが便利で、必要なときには dispatchEvent() でイベントを送り、待ち受けてるハンドラがそれを実行します。JS 側では onEnterFrame のような一定間隔でイベントを dispatchEvent('ENTER_FRAME') を送り、フレーム毎処理を実行したり、Flash 側の初期化が終わったら ExternalInterface で dispatchEvent('SWF_LOADED') を送ったり、position fixed に対応してないブラウザでは addEventListener('FIXED', function(points) { ... } ); とか登録しておいたりと、イベントをどんどん登録・送信できて便利です。Ten.EventDispatcher ではvar ed = Ten.EventDispatcher();
ed.addEventListener('test', function() {
    alert('test');
});
ed.dispatchEvent('test'); // イベント送信もしくは Ten.EventDispatcher#implementEventDispatcher を使い、特定オブジェクトにイベントディスパッチャを実装します。var o = {};
o.foo = 'foo';
Ten.EventDispatcher.implementEventDispatcher(o);
o.addEventListener('ALERT_FOO', function() {
    alert(this.foo);
});
o.dispatchEvent('ALERT_FOO');な感じで使えると思います。JS での DOM 要素以外でも使えるイベントディスパッチャの実装はかなり便利だと思うのですが、メジャーな JS ライブラリではどれも実装してない気がします。サーバサイドRails + RubyAMF で。実際の所、別に AMF の必然性は感じなかったのですが使えるなら使ってみようという感じで。Rails + WebORB という組み合わせもあったのですが、WebORB では設定ファイル周りが面倒なのでさくっと使える RubyAMF で。AS3 からそのまんま Rails のコントローラとメソッド、引数を指定してリモート呼び出しが行えるのはかなり楽でした。

PATAPON(パタポン) はてなダイアリーキーワードミニゲーム

<ul>
<li><a href="http://github.com/hotchpotch/as3rails2u/tree/master/src/com/rails2u/bridge/JSProxy.as">http://github.com/hotchpotch/as3rails2u/tree/master/src/com/rails2u/bridge/JSProxy.as</a></li>
</ul>
<p>AS3 から HTML の特定要素の内容を取得したり JS のメソッドを引数つけて呼び出したり、値をセットしたりがめんどくさくなってきたので作ってみました。<br>
JSProxy.proxy もしくは new JSProxy() で JSProxy のインスタンスを作り、適当にプロパティを呼び出していって(この時点ではスタックにどういう処理を行うかを書いてるだけ)、最後JSを本当に叩いて値を取得やメソッド呼び出しを行いたいときは、プロパティの頭に $ をつけます。</p>
<pre><code>// アラート関数を実行
JSProxy.proxy.$alert('foo'); 
// body の本文を取得
var body:String = JSProxy.proxy.document.body.$innerHTML; 
// body の style を変更
JSProxy.proxy.document.body.style.$backgroundColor = '#FF0000';
</code></pre>
<p>proxy チェインの途中のインスタンスから呼び出すことも出来ます。</p>
<pre><code>var location:JSProxy = JSProxy.proxy.location;
// location の情報を取得できる
var browserUrl:String = location.$href;
var hostname:String = location.$hostname;
// 代入も出来る。以下の例では別のURLに移動する。
location.$href = 'http://www.hatena.ne.jp/';
</code></pre>
<p>DOM の要素を取得して配列に値を代入、などの操作もそれっぽく書けます。</p>
<pre><code>// 全体から P タグを取得
var pElements:JSProxy = JSProxy.proxy.document.getElementsByTagName('p');
// 一個目の innerHTML に代入して変更
pElements[0].innerHTML = '1st p';
// 一個目の innerHTML に代入して変更
pElements[1].innerHTML = '2nd p';
</code></pre>
<p>フォームに適当に値を入力して submit なども可能です。</p>
<pre><code>&#x3C;form action="/" id="testform">
  &#x3C;input type="input" value="yuichi" name="username">
  &#x3C;input type="input" value="foo@example.com" name="email">
  &#x3C;input type="submit">
&#x3C;/form>
</code></pre>
<p>なフォームなら</p>
<pre><code>var form:JSProxy = JSProxy.proxy.document.getElementById('testform');
var inputs:JSProxy = form.getElementsByTagName('input');
inputs[0].value = 'oreore';
inputs[1].value = 'oreore@example.com';
form.forceAsync = true; // 後述
form.$submit();
</code></pre>
<p>な感じでできます。</p>
<h4>ExternalInterface の呼び出しタイミング</h4>
<p>location.href に代入や form.submit() の呼び出しなど、一部のブラウザ組み込みのオブジェクトやプロパティに ExternalInterface から関数呼び出しをしたり、値のセットを行うと、タイミングによって Flash の IOError が発生し、Flash 側からでは回避できません。そのため値を setTimeout をしこんで、セッターのコードは</p>
<pre><code>(function(_0) {setTimeout(function(){try{location.href = _0}catch(e){};}, 0);})
</code></pre>
<p>のように呼び出しています。セッターは戻り値を取得する必要が無いためこんな回避方法で問題無いのですが、関数呼び出しはそうも行きません。しかし戻り値が別にあっても無くても問題ない関数もあるため(form.submit() などそうですね)、forceAsync を true に設定すると setTimeout(function() {}, 0) を使った関数呼び出しへと強制的に変更できます。</p>
<p>その他 ExternalInterface の呼び出し周りの BK が JSProxy.as に結構つまってるので、ExternalInterface に興味のある方は参考になるかもしれません。</p>

http://github.com/hotchpotch/as3rails2u/tree/master/src/com/rails2u/bridge/JSProxy.asAS3 から HTML の特定要素の内容を取得したり JS のメソッドを引数つけて呼び出したり、値をセットしたりがめんどくさくなってきたので作ってみました。JSProxy.proxy もしくは new JSProxy() で JSProxy のインスタンスを作り、適当にプロパティを呼び出していって(この時点ではスタックにどういう処理を行うかを書いてるだけ)、最後JSを本当に叩いて値を取得やメソッド呼び出しを行いたいときは、プロパティの頭に $ をつけます。// アラート関数を実行
JSProxy.proxy.$alert('foo'); 
// body の本文を取得
var body:String = JSProxy.p

http://github.com/hotchpotch/as3rails2u/tree/master/src/com/rails2u/bridge/JSProxy.asAS3 から HTML の特定要素の内容を取得したり JS のメソッドを引数つけて呼び出したり、値をセットしたりがめんどくさくなってきたので作ってみました。JSProxy.proxy もしくは new JSProxy() で JSProxy のインスタンスを作り、適当にプロパティを呼び出していって(この時点ではスタックにどういう処理を行うかを書いてるだけ)、最後JSを本当に叩いて値を取得やメソッド呼び出しを行いたいときは、プロパティの頭に $ をつけます。// アラート関数を実行
JSProxy.proxy.$alert('foo'); 
// body の本文を取得
var body:String = JSProxy.proxy.document.body.$innerHTML; 
// body の style を変更
JSProxy.proxy.document.body.style.$backgroundColor = '#FF0000';proxy チェインの途中のインスタンスから呼び出すことも出来ます。var location:JSProxy = JSProxy.proxy.location;
// location の情報を取得できる
var browserUrl:String = location.$href;
var hostname:String = location.$hostname;
// 代入も出来る。以下の例では別のURLに移動する。
location.$href = 'http://www.hatena.ne.jp/';DOM の要素を取得して配列に値を代入、などの操作もそれっぽく書けます。// 全体から P タグを取得
var pElements:JSProxy = JSProxy.proxy.document.getElementsByTagName('p');
// 一個目の innerHTML に代入して変更
pElements[0].innerHTML = '1st p';
// 一個目の innerHTML に代入して変更
pElements[1].innerHTML = '2nd p';フォームに適当に値を入力して submit なども可能です。
  
  
  
なフォームならvar form:JSProxy = JSProxy.proxy.document.getElementById('testform');
var inputs:JSProxy = form.getElementsByTagName('input');
inputs[0].value = 'oreore';
inputs[1].value = 'oreore@example.com';
form.forceAsync = true; // 後述
form.$submit();な感じでできます。ExternalInterface の呼び出しタイミングlocation.href に代入や form.submit() の呼び出しなど、一部のブラウザ組み込みのオブジェクトやプロパティに ExternalInterface から関数呼び出しをしたり、値のセットを行うと、タイミングによって Flash の IOError が発生し、Flash 側からでは回避できません。そのため値を setTimeout をしこんで、セッターのコードは(function(_0) {setTimeout(function(){try{location.href = _0}catch(e){};}, 0);})のように呼び出しています。セッターは戻り値を取得する必要が無いためこんな回避方法で問題無いのですが、関数呼び出しはそうも行きません。しかし戻り値が別にあっても無くても問題ない関数もあるため(form.submit() などそうですね)、forceAsync を true に設定すると setTimeout(function() {}, 0) を使った関数呼び出しへと強制的に変更できます。その他 ExternalInterface の呼び出し周りの BK が JSProxy.as に結構つまってるので、ExternalInterface に興味のある方は参考になるかもしれません。

A Day in the Life

あまりにも酷すぎる IE FlashPlayer の仕様

あまりにも酷すぎる IE FlashPlayer の仕様

書いている人

おたよりを送る