Google Hackathon for OpenSocial in Kyoto に参加

先日、近所の京都リサーチパークHackathonがあるということで参加してきた。

2/20(事前ミーティング/Ideathon), 2/21(Hackathon)という2日間。結果から言うと、前日のIdeathonでは見事優勝させて頂いたものの、本番では意外な所で躓き思ったように作業が進まず惨敗であった。

今回作ろうと考えたのは、MySpaceをターゲットにした、音を使ったFlashアプリケーションで、タイトルもまんま「Social Sounds」。簡単に説明すると、まず、ユーザの属性値をパラメータとしてユーザー毎に固有の「音」が生成されるようにする。誰かと友達になるとその友達の音を自分の音コレクションに追加出来るようになる。で、集めた音を使い、簡単なシーケンサーもどきでトラックを作って聴いて遊べる、というもの。

アプリケーションのコアな部分は全てFlashで実装し、jsでの実装部分はOpenSocialコンテナとFlashアプリ間のブリッジに徹するのが良さそうだ、ということで、基本的にFlashとjsに分担して作業することにした。二人チームで、相方となった方がCS使いということだったので、Flash制作は彼にお願いし、js/Flash間のインターフェースを取り決め、自分はFlexを使用してテスト用のアプリケーションを作成。Flex <-> js <-> コンテナがやりとりするコードを書いていった。

しかし自分がCSを使った事が無く、FlexとCSで如何にコラボレートしていくべきかのノウハウが全く無かったのが痛かった。結局、テスト用Flexアプリに対しては問題無く動作していたjsとのインターフェースが、CSで作成したFlashとは上手く動作しない部分があり、ハマりまくっているうちに時間切れ、と非常に中途半端な状態で終了。

まあ、元々そんなに作業が進むとは期待していなかったものの、流石にこのままでは悔しいし勿体ないので、今後も開発を継続していくことにした。ついでにFlash CS4 Professionalの試用版をダウンロードし、CSの使い方を探りはじめてみたり。

で、現状は、元々MySpaceのみを対象にしていたのを、Orkutの方が開発し易いかも?ということでOrkut上で色々試しはじめているのだけど、Flashの埋め込み方法に違いがあってハマったので以下にメモしておく。

MySpaceの場合

MySpaceの場合、普通にタグを書いて問題ない。

<Content type="html">
<![CDATA[
<object
  id="flashobject"
  classid="clsid:1111111-2222-333-4444-xxxxxxxxxx"
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"
  width="550" height="400" align="middle">
<param name="movie" value="path_to_swf_file/foo.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowScriptAccess" value="always" />
<param name="allowNetworking" value="all" />
<param name="allowFullScreen" value="false" />
<embed
  name="flashobject"
  src="path_to_swf_file/foo.swf"
  width="550" height="400" align="middle"
  quality="high" bgcolor="#ffffff"
  allowScriptAccess="always" allowNetworking="all" allowFullScreen="false"
  type="application/x-shockwave-flash"
  pluginspage="http://www.adobe.com/go/getflashplayer_jp" />
</object>
]]>
</Content>

Orkutの場合

まず、MySpaceと同じようにタグを書いてもロード出来ない。また、OpenSocialのドキュメントによれば(gadgets.flash - OpenSocial - Google Code)、gadgets.flash.embedFlashを使えば問題ないはずだが、下記の様に記述してもきちんと動作しない。もう少し正確に言うと、Flashは読み込まれるがallowScriptAccess等のパラメータが渡らないらしく、Flash内からjsへアクセス出来ない為、事実上使い物にならない。これはgadgets.flash.embedFlashのバグだと思われるが、詳しい事は不明(この辺に情報あり)。

<div id="flashcontainer"></div>

<script type="text/javascript">
gadgets.flash.embedFlash(
  "path_to_swf_file/foo.swf",
  "flashcontainer", {
  swf_version: 10,
  id: "flashobject",
  allowScriptAccess: "always",
  allowNetworking: "all",
  wmode: "transparent"});
</script>

ではどうするか?答はSWFObjectを使用すること。Download SWFObject 1.5を適当に配置し下記の様に記述すると、問題無く動作した。まだ試していないが、多分Orkut以外もこの方法で大丈夫なのではと思われる。

<div id="flashcontainer"></div>

<script type="text/javascript" src="path_to_swfobject/swfobject.js"></script>
<script type="text/javascript">
var so = new SWFObject(
  "path_to_swf_file/foo.swf",
  "flashobject", "550", "400", "10", "#ffffff");
so.addParam("allowScriptAccess","always");
so.addParam("allowNetworking","all");
so.addParam("wmode","transparent");
so.addParam("menu", "false");
so.write("flashcontainer");
</script>

という訳で、

Hackathonはとても楽しいイベントだった。Hackathonというと、コードばりばり書けるハッカーばかりが集まりそうな感じがして敷居が高そう(だし、実際ハッカー度の高いHackathonも多そう)だけど、Google Hackathonは色んなレベルの人が参加し易い良いイベントだと思う。このようなイベントを開催してくれたGoogleの方や京都のスタッフの方には感謝したい。懇親会で他の開発者の方々やGooglerの皆さんに色々と興味深い話が聞けるのも楽しいし、ハッカーが集まってコード書きまくるなんてなんか怖い、とか思ってる人がいるとしたら、それは誤解だと言っておきたい。

尚、今回参加の目的として、他の人の開発手法やどんな感じでコード書いてるのか等のテクニックを盗みたい、というのもあったが、とてもそんなことやってる場合じゃない、という位、自分の事で精一杯だったのは残念。