Facebookモバイルアプリ on AWS ハッカソンで優勝しました

Facebookモバイルアプリ on AWSクラウド

先日開催されたFacebookモバイルアプリ on AWSクラウドで優勝しました〜。パチパチ。仕事中には見せた事のないマジメな顔つきで高い集中力を発揮しましたw。ということで、今回はどんなものを作ったかご紹介したいと思います。

開催概要

• 日時：2011年11月20日（日）11時～19時
• 場所：パソナグループ本部9階研修室A
• サイト：http://atnd.org/events/21968

Amazon EC2を使う

その場でサクッとサーバーを使うのにAmazon EC2は最適です。microインスタンスを立ててWebサーバーを立てれば直ぐに使えます。今回は、Route 53とEIPを使って、独自ドメインと固定IPアドレスにしました。

FacebookモバイルSDKを使う

Facebookのアプリにはいくつかの種類があります。今回は、モバイルWebサイト向けにアプリを作りました。

• Webサイト向け
• モバイルWebサイト向け
• Facebookサイト向け
• モバイルアプリ向け（iPhone/Android）

jQueryを使う

サーバーとのAjax通信やHTMLの動的挿入など面倒な処理をjQueryにお願いしました。

jQuery Mobileを使う

HTMLやCSSを使う事に慣れていない人がそれらしいデザインのUIを実現するためにjQuery Mobileはもってこいです。

DreamweaverとFireworksを使う

DreamweaverはHTMLとJavaScriptのコーディングに、Fireworksはアイコン作成に使いました。

Cyberduckを使う

EC2にファイルをアップロードするために用いました。SSHを使ってFTP接続をするSFTPクライアントとして利用しました。

iOSシミュレータを使う

iOS上での動作確認をするためにシミュレータを使いました。iOS内のSafariブラウザを使ってlocalhostのApacheサーバーを閲覧する事ができますのでいい感じです。iOSシミュレータが用意できないときはデスクトップのSafariブラウザを開発モードにしてユーザエージェントをiPhoneにしても同じような見た目になります。

Happy Birthdayアプリを使ってみよう

FacebookモバイルWebアプリで何を実現しようかハッカソンが始まってから考え始めたワケですが、、、思いつかない。。。じゃぁとりあえずFacebookSDKで呼べる情報を見てみようということで誕生日情報を取得してソート表示することとなりました。Facebookの誕生日情報は、年月日と月日の情報が混在していて画面側で文字列操作をしてソートする必要がありました。非常にめんどくさい処理です。ここらへんはサーバーサイドでやっても良かったかもしれません。

とりあえず出来上がったアプリをご覧ください。１日クオリティです。(ソースのクオリティ低っっ汗)

Happy Birthday!!

作った順番

どのような手順で作ったかご紹介します。

• EC2でmicroインスタンスを立てる。EIPで固定IPをとる
• Route 53で独自ドメインと固定IPを関連づける
• EC2でApacheをインストールして動作確認
• Facebook SDKのサンプルを眺める
• いきなりEC2にアップせずにFacebookアプリのホスト名をlocalhostにして自前PCにApacheを立てる
• Facebook SDKのアプリ承認周りで悩む人が多いかと思います。予習してて悩みました。
• 限られた時間内でどこをゴールにするか考えながら実現可能性を探る
• 友達の友達のリストが取れたらマッチングアプリとして楽しいかもと思ってSDKを調べたらNG orz
• とりあえず友達の誕生日予定を一覧にしようということでゴールを設定完了
• Facebook SDKの友達一覧メソッドを呼び出してイベントハンドラ部分でHTMLを動的生成させる記述をお試し
• JavaScriptの記述が増えてきていますので、ブラウザのデバッガでコンソール出力しまくり
• サーバー側とのAjax通信にjQueryを使ってみる。結局Facebook SDKで事足りた
• Facebook SDKが用意してくれる画面(ログイン、アプリ承認)はそのまま流用
• ひととおり出来上がったらEC2にアップ
• 見た目が悪いのでjQuery Mobileを使ってみようと思いつく
• ググってjQuery Mobileのサンプルをダウンロードして動作確認
• listViewに対して動的にdivタグを挿入すればそれらしいUIになることが分かる
• 全体のロジックを崩さずにHTMLをjQuery Mobile用に差し替える
• 動的にHTMLを挿入してもUIが更新されなくて困ったが、ググって解決。listView.refresh()でUI更新だった。
• リストをクリックするとウォールに書き込めるように調整
• Fireworksでアイコン画像を作成。iPhoneでブックマークしたときのアイコンになるように
• Cyberduckで全てのファイルをアップロード
• アプリのホスト名をEC2のホスト名にして動作確認
• ハッカソンのプレゼンを考える
• ギリギリまでチューニング。
• タイムアップ！

まとめ

この緊張感は、情報処理技術者試験に似ていますね。個人の力を最大限発揮する場をみんなで共有できたことはとても新鮮で達成感がありました。ハッカソン最高！自社でもやってみたいですね。イベントを企画して下さった、gumiさん、AWSさんありがとうございました。会場をご提供頂いたパソナテック エンジニアカフェの皆さんありがとうございました。