hIDDEN bLOG » Google App Engine

2011/6/1 水曜日

第2回Google Hackathon for GAE in 福井、参加してきたヨ 〜後編

このエントリをはてなブックマークに追加
Filed under: Google App Engine,IT系 — @ 15:51:04

前回に引き続き、今回はGAEハッカソンで活躍したチーム#hiyの、技術サイドのおはなし。

チーム#hiyはプロジェクト「天下一武道会」を4つのパートに分割し、それぞれを各メンバーで担当することにした。

  • Kinectを使ってかめはめ波を認識するパート
  • Webサイトのデザイン
  • アニメーションを含めたバトルシーンのWebページ
  • GAEを使ったサイト全体のナビゲーション

この4つのうちボクが受け持ったのが、4つ目のGAE部分だ。

Slim3でGAE

相手カード選択→自分カード選択→バトルという3画面の遷移と、Kinectで認識したカード情報アップロードを受け付けるサービス。これがGAE部分の担当範囲だった。

フレームワークにはSlim3を使うこととした。

Slim3はひがやすを氏が開発したGAE向けのフレームワークで、動作も開発リズムも軽いのが気に入っている。
このSlim3の特徴は、モデル・コントローラ・テストクラスなどのスケルトンを、Antを使って自動生成することで、定型的なWebアプリケーション開発をテンポよく進められる点にもあると思っている。

開発にあたって大変にお世話になったのがこちらのサイト。
http://sites.google.com/site/slim3documentja/

環境の構築手順から、開発の最初のステップまで、 懇切丁寧に解説してあるのでマジお勧め。

あとカードのアップロード部分についても

Kinectでのかめはめ波の認識については、@idkqh7が早々に実現してくれたというのは前編でも触れたとおり。
認識処理そのものは、オープンソースで公開されているこのプログラムを使用しさせていただいている。
http://code.google.com/p/kinect-kamehameha/

これを実行できる環境を構築し、ソースを読みといて認識のタイミングとそこで検出されているかめはめ波のパワーを取り出し、さらに撃った瞬間のスクリーンショットを画像に保存するというところまで、彼は驚異のプログラミング力で実現させてくれた。マジスゲェ。

しかし画像を撮るタイミングはかなりシビアでなかなかベストなショットを得るのが難しかったため、10枚ほど撮った中からユーザーに選んでもらう仕様に乗りかえることにした。
そのあたりで残り時間がそろそろ苦しくなってきたので、画像の選択とWebへのアップロードを 別プログラムに抜き出すよう軌道修正、それをボクが即興で作ることとあいなった。使うのは当然VisualStudio+C#。アイラブシーシャープ。

しかるのちに、ド派手なバトルアニメーションと超クールなデザインへの結合も完了し、チーム#hiyによる天下一武道会は完成したのであった!

2011/3/19 土曜日

第2回Google Hackathon for GAE in 福井、参加してきたヨ 〜前編

このエントリをはてなブックマークに追加
Filed under: Google App Engine,IT系 — @ 11:01:54

去年から福井でも開催されだしたハッカソン。
ボクの3回目の参加となる今回は、去年はじめて参加したときと同じGoogle App Engineをテーマとしたものだ。

さて今回、我々はチーム#hiyを結成し、スーパーデザイナー様を筆頭にスーパープログラマー3名が脇を固めるという、まさに勝ちを見据えた体制、最強の布陣でスタートを切る事ができた。

事前準備編

チームの活動はまさに前週のアイデアソン終了直後から始まっており、題材として使用する事が決まったKinectなど、担当を買って出てくれた@idkqh7が即日のうちに確保に成功するなど。まさに神速のスタートダッシュともいえる形で幕を開けた。

そのままの勢いを殺す事なく、サーバサイド担当を承ったボクはブラフを駆使しながらなんとなーく実験コーディングを進めつつ、細かいリポジトリへのコミットやデプロイでライバルを牽制、週の中頃にはスーパーデザイナー様が超COOOOOOLなデザインモックを吐き出し、@tobitobitaはおニューのMacBookAirのセットアップに余念がないなど、4者が完璧な事前準備を怠らなかったのであった。

とうじつ!

万端の準備をもって迎えたハッカソン当日、ここでも我々チーム#hiyは勝ちを狙う為の作戦に抜かりなく、機密開発を完全なものにする為早々に別室に移ることから、この日の作業は始まったのであった。

さて、すでに1週間の準備期間を有効活用し技術的な課題はあらかたクリアしていた我らチーム#hiy。それぞれの成果を結合する作業をメインに開発を進めていった。
スーパーデザイナー様によりコーディングされたHTMLを受け取り、GAEのプロジェクトに組み込むボクと、バトル画面のアニメーションを作り込む@tobitobita。そしてかめはめ波を打ち続ける@idkqh7。いや打ち続けながらもKinectプログラムの認識処理まわりを解読、スクリーンショット画像をファイルに保存するコードを書きなぐっている!パネェ!

そんなこんなで濃密な開発を経て完成したのが!

これだ!

http://hidden-lab.appspot.com/hiy/

まず使用するのはKinectを接続したWindows端末。
ここで専用クライアントアプリを使用し、Kinectの前でかめはめ波を打つ!
するとその瞬間のスナップショットが10枚ばかり一覧表示されるので、ベストショットを自分で選び上記サイトにアップロード、登録するというのが最初のステップだ。
この時点でかめはめ波のフォームなどを解析して、パワーが決定されている。

あとはブラウザでサイトにアクセスし、対戦相手と自分のカードを選んで対戦だ。
あらかじめ決まっていたパワーの上下で勝敗は決する。

アメリカなどで実際に行われているというかめはめ波コンテスト。
これをITの力を借りてワールドワイドに開催することができるのだ!

プレゼン、投票、そして

さて。「ヘタレ」とかいろいろありつつもできる事はすべてやった。勝つための道具は全て揃えた。 あとは全てを吐き出すだけだ。

ということで最終決戦であるプレゼンに臨み、劇的な同率1位、まさかのかめはめ波による同点決勝、だいちゃんの乱入とかめはめマスター渾身のかめはめ波など、まさにドラマティックな展開を経て...

念願の...

優勝しちゃったもんねー!!!

ほんとうにヒヤヒヤしたが、チーム#hiyの究極目標であった優勝、それを手にする事に成功した。
思えばアイデアソン時点からどん欲に勝ちを狙っていた我々である。あえてアイデアソンでの順位を捨てるという姑息な手段を 用いてまで勝利に固執し、緻密な計算のもと、しかし薄氷の上の栄冠を手にする事ができたのだった。

と、アウトラインを書いていたらそれだけで結構なボリュームになってしまったので、技術サイドの記事は後編へ続く!

HTML convert time: 0.770 sec. Powered by WordPress