11月20日、パソナテックのエンジニアカフェにおいて「Facebookモバイルアプリ on AWSクラウド ～ハンズオン＆ハッカソン～」が開催されました。このセミナーイベントは、Amazon Data Services Japanとgumi、そしてエンジニアカフェの共催によるもので、その日のうちにFacebookモバイルアプリをAWSクラウド上で開発してしまおうという主旨のイベントです。とはいえ、対象を上級者に限定したイベントではなく、午前中は初心者向けのハンズオンも用意され、上級者は午前中からアプリ開発に専念してもいいという、リベラルな雰囲気のセミナーイベントとなりました。

Facebookは、もはや説明する必要がないほど普及が進んでいるSNSです。10月11日にはモバイル向けのプラットフォームである、コードネーム「プロジェクトスパルタン」が公開され話題になりました。今回のセミナーイベントでも、さっそく「プロジェクトスパルタン」を活用しており、さらにAWSクラウド、スマートフォン、HTML5などなど最近のトレンドを一気にキャッチアップできるものとして、初心者から上級者まで30名以上が参加しました。

セミナーイベントは、Amazon Data Services Japan株式会社のエバンジェリスト/技術推進部長である玉川憲氏と、株式会社gumiのCTOである堀内康弘氏の2名が進行役となり、午前中に両氏によるチュートリアル、午後は参加者各自がFacebookモバイルアプリの開発にいそしむハッカソンが行われ、最後に完成したFacebookモバイルアプリのプレゼン発表というスケジュールとなっていました。プレゼン発表されたアプリに対して参加者による投票が行われ、投票結果の発表と表彰があり、その後は懇親会も開催されました。

このセミナーイベントは、最新の技術を使って初心者から上級者まで幅広く活用できるという内容だけでなく、参加者全員に25ドル分のAWSクーポンがプレゼントされるほか、最優秀アプリ作成者には1000ドル分のAWSクーポンが贈呈されるという魅力的なプレゼントも用意されていました。実際に開発を行う内容のため、参加条件としてノートパソコンの持参が可能であることや、HTML5、JavaScript、CSSのいずれかの使用経験が必須であることが明記されていました。ただし、サーバサイドの言語はPHP、Perl、Ruby、Pythonなど一切問わないという条件でした。

チュートリアル

まず、玉川氏と堀内氏による開会の挨拶と自己紹介がありました。玉川氏は、東京大学大学院、米カーネギー・メロン大学を経て、IBM東京基礎研究所でウェアラブルコンピュータの研究開発を行い、超小型腕時計型Linuxコンピュータ「WatchPad」の研究開発をはじめ、ハード、ソフトの開発に従事。その後、IBM Rationalにて開発プロセス＆開発ツールの講師、コンサルティング、技術営業、エバンジェリスト、マネージメントを歴任し、現在はアマゾンでクラウドを推進するエバンジェリスト、技術推進部長を務めています。

堀内氏は、慶應義塾大学大学院を経てブイキューブで多数の企業向けWebシステムの開発を経験後、動画共有サービス「FlipClip」の開発に従事。2009年にgumiへ入社後、複数のソーシャルアプリの開発を担当し、現在は同社取締役として開発責任者を務めています。また、AWS User Group Japan東京支部の副代表も務めており、紹介の際にユーザーグループへの参加を呼びかけていました。

本題ではまず、ソーシャルゲームのトラフィック傾向として、朝、昼、夜、月初、土日などにピークがあるほかイベントなどで突発的なピークがあるなど「変化が激しいこと⁠」⁠、1日に1億PVなど「膨大であること」を挙げました。そこで重視すべきポイントは「スケールアップでなくスケールアウト」で、どこまでもスケールアウトでき、しかも短時間で行える設計が大事であるとしました。さらに、「⁠システムの状況をモニタリングできる仕組み」の必要性も強調しました。

そしてAWSクラウドは、こうしたポイントに対して「必要なときに必要なだけ『すぐに』使える」「⁠トライ＆エラーが手軽にできる」「⁠MySQLやHadoop、memcacheなどオープンなテクノロジーを採用している」「⁠強力なモニタリングツール『CloudWatch』が用意されている」と、多くの面でメリットがあるとのことです。

続いて、玉川氏による「AWSのチュートリアル」が行われました。玉川氏はまず、開発者およびITプロ向けサービスである「AWS（Amazon Web Service⁠）⁠」がアマゾンにとってEコマース、マーケットプレイスと並ぶ大きなビジネスのひとつであるとして、3月3日に東京データセンターをオープンしたことを紹介しました。これにより、国内からミリ秒以内という高速なネットワークを実現し、国内にデータを安全に管理できること、24時間365日の日本語プレミアムサポートが提供されていることを説明しました。

AWSのサービスの1つである「Amazon EC2」では、AWSのデータセンターからWindowsやCentOS、Oracle DBなどをイメージとして容易に構築できるとして、玉川氏は実際にサーバを構築する方法について解説しました。ここでは、玉川氏が独自に作成した資料「はじめてのアマゾンクラウド」などを参考に進行し、アカウントの取得からEC2でのWebサーバー立ち上げ、Webコンテンツの保存、公開までを参加者とともにハンズオンで実施しました。実際に20分ほどでWebサイトの立ち上げまでを行うことができました。

玉川氏のチュートリアルによってAWSでサーバを構築したところで、堀内氏による「Facebookモバイルアプリ」のチュートリアルが行われました。このチュートリアルは、玉川氏のチュートリアルで構築したサーバを使ってFacebookモバイルアプリを一緒に開発していこうというもので、もちろん「プロジェクトスパルタン」を使用します。これはFacebookのデベロッパ向けサイトに用意されており、基本的に誰でも利用することができます。

アプリ開発を始めるには「新しいアプリケーションを作成」ボタンをクリックし、アプリケーション名とネームスペースを入力、ポリシー承認にチェックを入れて新しいアプリケーションを作成していきます。また、モバイルアプリへのチェックと、URLの欄にEC2で作成したサーバの「index.html」のアドレスを入力します。これにより、このページでFacebookのAPIが使えるようになり、さらにHTMLのコードを差し込むことでJavascriptのSDKを組み込むことができます。このように、基本的にコードを貼り付けていくことでFacebookモバイルアプリの開発を行っていきます。

堀内氏は、ログイン状態を判断して表示するログイン、ログアウトボタンや、ユーザー名とプロフィール写真の読み込み、友だち一覧の取得、リクエストを送るダイアログ、情報のシェア、ニュースフィードの読み込み、「⁠いいね！」ボタンの配置などを実際に行い、チュートリアルを終了しました。なお、チュートリアルで使ったもの以外のFacebookのJavaScriptのAPIはFacebookデベロッパサイトのJavaScriptページにまとめられており、日本語訳されたページもあります。ただし、日本語のページは全角文字が混ざっていることがあるので、利用するなら英語ページの方が確実と付け加えました。

こうして玉川氏、堀内氏のチュートリアルが終わり、18時までのハッカソンに入っていきます。

ハッカソン

11時に始まったチュートリアルは昼食を挟んで14時まで行われ、それからは全員がFacebookモバイルアプリの開発に専念するハッカソンとなりました。

ハッカソンは18時までで、それまでFacebookのイベントページでプレゼン発表者を募集。最終的に5名が、それぞれ持ち時間5分間でプレゼンを行うことになりました。ひとり目のプレゼン発表者となった加畑健志さんが開発したFacebookアプリは「WithIntent⁠」⁠。加畑さんはアプリを作るきっかけになった問題点として、PicasaにあげたファイルをFacebookで見せることは意外に面倒で、共有設定をいじったりURLのコピーや貼り付けといった手間がかかり、ミスが発生する可能性もあると指摘しました。

アプリを起動すると、「⁠ログイン」「⁠ログアウト」ボタンのほかに「Upload from Picasa」というボタンが表示されます。このボタンをクリックすると、Web2.0の仕掛けによってアップロード元を選べるようになっています。Picasaを選択するとGoogleのログイン画面が表示され、ログインすると「Select a file」としてPicasaにある画像のサムネイルやフォルダが表示されます。Facebookにアップロードしたい画像を選択して「Select」ボタンをクリックすると、画像のデータがWebUIに渡され、Facebook上に画像アップロードのダイアログが表示されます。あとは「シェア」ボタンのクリックで画像がFacebookにアップロードされるというものでした。

これは、AWSにアプリケーションを置いてFacebookとGoogleにログイン、Picasaを「WebIntent」で呼び出して返ってきたレスポンスから画像のURLを取り出し、FB.uiに渡すという動作になっています。ちなみに「WebIntent」はGoogleのスタッフが作成しているアプリで、画像のマッシュアップに使用されるインターフェースです。

続いて登壇したのは富永道也さん。富永さんは「Facebookは、IFRAMEでFacebookページを表示させたり、既存のWebページに『いいね！』ボタンを付けるくらいはわかるレベル。それなのにここへ来ちゃいました」と言います。普段はCiscoルーターなどをいじっているネットワーク技術者で、OSPFやBGP、IPv6などが本業でWebアプリ開発は初心者なのです。つまり「アイオーエスといえばiOSよりもIOS（CiscoルータのOS）の人です⁠」⁠。アプリは「日本語、ひらがな、シンハラ文字」というもの。

シンハラ文字はスリランカの言葉。Mac OSでは最新の「Lion」で、iOSでは「5」で、そしてWindowsでは「7」で、それぞれやっと対応されるようになりました。それなのに、viエディタは使い慣れていてもTeraTerm越しでシンハラ文字を入力すると文字化けしてしまいます。今回はそれをもっと扱いやすくすることをテーマにして、EC2でFTPサーバを動かせばいいということはわかったのですが、FTPデーモンを動かすまでに2時間半くらいかかったといいます。

ローマ字入力をシンハラ文字に変換するというものは用意しているのですが、それをFacebookのページにどう埋め込むか、単なるインラインフレームだけでなく、誰かがログインすると「こんにちは○○さん」という言葉がシンハラ文字で表示され、同様に「⁠『⁠いいね！』ボタンを押してね」も表示することを目標にして開発したといいます。結果、ローマ字入力をシンハラ文字に変換することは成功しましたが、問題もいくつか出てきました。

そこで今後は、まず独自ドメインを紐付けること。どんな人がシンハラ語の入力を使うのか、「⁠いいね！」ボタンを押した上で使った人の各種情報を取得したい。そして、グローバル・多言語対応の時代なので、マイノリティ・ローカルなことに注目したアプリを作っていきたいとしてプレゼンを締めくくりました。「⁠なぜシンハラ語を知っているのですか？」という質問には、「⁠人と違うところに着目するのが好きで、いろいろな言語を見ていてシンハラ語にとても親しみを感じたためです。また、視点を変えれば競合がいないということも言えます」と答えました。

次に登壇したのは佐藤明彦さん。佐藤さんは「Livecast」という会社で翻訳系のWebアプリを開発しているといいます。また、AIRを使ってAndroid向けの翻訳アプリも制作しています。「⁠今回はノープランで来てしまったのですが、やはり日本語で入力した文章を英訳してウォールに投稿するというアプリケーションを作りました」といいます。そして、あえてEC2を使わずS3を使用しました。S3というとストレージのイメージが強いのですが、Webのホスティングにも有効であるためです。

仕組みとしては、JavaScriptが入った「index.html」を1枚置くというスタイルなので、EC2のインスタンスを使うほどではないと考えたといいます。「⁠そこでデフォルトページを指定して静的なアプリケーションを作りました。こういった場合は、おそらくEC2よりS3の方が経済的でもあると思います」と佐藤さんは言います。また、英語に翻訳するためダイアログの表示にFB.uiでなくAPIを使用しています。

また佐藤さんは最後に、APIを使用する際の注意点として「仕様が変わりやすいこと」「⁠連続投稿に回数制限がかかることがあること」「⁠HTMLはソースが丸見えなのでIDなどの扱いに注意すること」を挙げてプレゼンを終了しました。

続いて横田聡さんが登壇。横田さんは、ブラウザ版のFacebookページに表示される誕生日情報に着目しました。ここには今日、誕生日を迎える人が表示されるのですが、それが当日わかってもあまり意味がない。事前に把握していろいろ準備ができれば便利ということで、自分の友だちの誕生日リストを表示できるアプリを作成しました。

Route 53でドメインを取得し、エラスティックIPとEC2で構築したといいます。実際のデモでは、iPhoneのFacebookでログインし「Friends」というボタンを押すことで、誕生日の一覧が表示されました。苦労した点は、生まれた年については入力されていない人が多いので、取得した文字列を整形して比較、ソートするという動作をJavaScriptによって行うことでした。ただ、ここは自前でライブラリを作成することなどで対応できると思います。

また、誕生日の友だちをタップすると「Happy birthday!」のロゴとともにメッセージを自分のウォールに投稿できるようにしています。「⁠ただ、誰に宛てた『おめでとう』かわからないのが微妙です⁠」⁠。横田さんは、本当は「友だちの友だち」の誕生日を把握して「おめでとうメッセージ」を送るという出会い系っぽいアプリを作りたかったそうですが、それは仕様上できないということで方針を転換、誕生日リストを表示するアプリになったといいます。

「誕生日情報は何件まで取得できるのですか？」という質問に横田さんは、「⁠たぶん全件取得することができますが、100件ごとなどで区切って『次の100件』としていかないと、いきなり全件取得しようとすると固まります」と回答しました。

最後に登壇したのは、チャンスイットのチーフを務める村上雅裕さん。久しぶりにWebアプリの開発をしたといいますが、作成したアプリは誕生日もの。ただし横田さんとは異なり、友だちの年齢を知ることで「あの人とあの人は同い年だったんだ」という驚きを得ようというコンセプトでした。アプリを実行すると、友だちのアイコンと誕生日、氏名が表示されます。ただ、誕生日の取得にはパーミッションの設定が必要だったなどに苦戦したといいます。

全員のプレゼンが終了し、続いて参加者による投票が行われました。そして投票と集計の間、堀内氏が審査対象外として作成したアプリを発表しました。アプリは、自分が押した「いいね！」を一覧表示させるというもの。実際にはページしか取得できず、「⁠結論から言うと失敗だった」といいます。ただ、パラメータの設定でページの分割は可能で、ほぼリアルタイムに「いいね！」した内容を表示することができました。今後は単独の「いいね！」情報を取得できるようにしたいとして「ぜひ第2回もやりたい」と締めくくりました。

続いて、玉川氏が「Route53で独自ドメインを振る」の説明を行い、その間に集計が完了。1位は横田さん、2位は加畑さん、3位は富永さんとなり、横田さんがめでたく1000ドルのクーポンを入手しました。また、急きょ2位の加畑さん、3位の富永さんにも100ドルのクーポンが贈られることになりました。

富永さんは「スキルはまったくないのに3位をいただいて嬉しいです⁠」⁠、加畑さんは「ありがとうございます。ブログにも書きましたので参考にしてもらえたら嬉しいです」と述べ、1位となった横田さんは「FacebookのAPIは予習したのですが、Javascriptに苦労しました。次回も参加して、Apple Storeに載せられるくらいのアプリを作りたいと思います」と述べました。