株式会社ライブキャストロゴ 株式会社ライブキャスト

Facebookモバイルアプリ on AWSクラウド ～ハンズオン＆ハッカソン～ に参加しました

2011年11月21日 Amazon Web Service, Facebook, javascript
シェア

昨日（2011年11月20日）、株式会社パソナテックさん主催のFacebookモバイルアプリ on AWSクラウド ～ハンズオン＆ハッカソン～に参加してきました。

講師には、アマゾン データ サービス ジャパン株式会社のエバンジェリスト @KenTamagawaさん、株式会社gumiのCTO @horiuchiさんを迎え、そして、参加者には、クラスメソッド株式会社の@sato_shiさんや、Androidアプリ toneconnectで有名な@kabayanさんがいたりして、蒼々たるメンバーの中開催されました。

今回のハッカソンはFacebookモバイルアプリということで、スマートフォン向けのNativeアプリでも作るのか？AWSを絡めて何をやるんだろう？という好奇心から、前日に思い立って参加登録しました。

実際は、Amazon EC2インスタンスを用いたモバイルWebアプリ開発が中心の内容でした。もちろん、Nativeアプリを作っても問題ないのでしょうけど、ちょっと盛りだくさん過ぎますよね（運営側も、参加者側も）。

ということで、ノープランで参加したわけなのですが、AWSとFacebookのJavaScript SDK – Facebook開発者での開発。これだけでも十分盛りだくさんで、全くの未経験だったとしたら、AWSのサインアップぐらいで終わってたかもしれません…

午前中は、チュートリアル（参加は自由）中心でしたので、昼食挟んで18:00までの数時間しかありません。できることも限られ、何を作るか非常に悩みました。
※ まあ、ハッカソンとはそういうものですが…

※ チュートリアルの資料はこちら。
AWS：はじめてのアマゾンクラウド①[Amazon Web Services(AWS)のアカウントを開設する]
Facebook：Facebook Mobileアプリの作り方(翻訳)

短い時間なので、なんとか動くものを作り上げ、一応プレゼンもすることを最終目標にしました。なので、使ったことのあるAPIを織り交ぜた何かにしようと。参加した以上は、発表して存在感を示したいですからね（と心がけるようにしています）。
※ プレゼンはグダグダでしたが…

ということで、いつものように翻訳系です…

Facebook on AWS ハッカソン

入力した日本語を英訳して自分のウォールに投稿するという、スマートフォン向けWebアプリです（PCでも使えます）。

チュートリアルのサンプルと大差ないのですが、ウォールに投稿する部分を以下のようにしています。

    function publishStory(message) {
        FB.api('/me/feed', 'post', {'message': message}, function(response) {
            if (!response || response.error) {
                alert('ウォールの投稿に失敗しました');
            } else {
                alert('ウォールに投稿されました。');
            }
        });

        return false;
    }

サンプルのように、

        FB.ui({
            method: 'feed',
            name: 'I'm building a social mobile web app!',
            caption: 'This web app is going to be awesome.',
            description: 'Check out Facebook's developer site to start building.',
            message: 'test',
            link: 'http://developers.facebook.com/mobile',
            picture: 'http://www.facebookmobileweb.com/getting-started/img/facebook_icon_large.png'
        }, 
        function(response) {
            console.log('publishStory response: ', response);
        });

にすると、ウォールに投稿する以下のような画面が出てきます。



今回は、これは使わず、直接ウォールに投稿するようにしています。

というのも、これだと翻訳するタイミングがないのと、このダイアログの「何か書く…」のところにデフォルト表示する文字を指定できなくなってしまったからです。
※ Facebook APIの仕様が「コロコロ変わる」と言ってしまいましたが、「チョイチョイ変わる」と言った方が適切かもしれません。

参考：Feed Dialogのmessageプロパティが無効になっていた

だた、これだけではウォールに投稿することはできないので、loginのAPIを使う際にPermissionを追加する必要があります。

    function loginUser() {    
        FB.login(function(response) { }, {scope:'email,publish_stream'});     
    }

サンプルでは、scopeがemailだけなので、publish_streamを追加します。

あと、AWSについて、1つだけ工夫したポイントがあります。

もともと、ハンズオンも兼ねているものでしたので、チュートリアルでAmazon EC2のインスタンスを立ち上げ、その延長線上で開発を進めていたのですが、最終的に出来上がったものはHTMLとJavaScriptだけの静的コンテンツでした。なので、Amazon EC2のインスタンス上でホスティングする必要も無いのです。

プレゼン直前に、S3ホスティングに変更しました。なので、コーディングはConsole立ち上げて、emacsでインスタンス上でやってました。emacsは、常日頃使っているわけではないので、多少苦労したかな…

S3ホスティングにしたメリットがいくつかあります。

  1. バケット名がホスト名の一部になるのでURLが変わらない。
  2. ファイルのアップロードが簡単。
  3. Amazon EC2のインスタンスは時間課金なのに対して、S3はデータ転送量に対する課金になる。
  4. etc…

Amazon EC2のインスタンスは、再起動するとIPが変わるので、IPが含まれているホスト名も変わり、結果URLも変わってしまうので、何かのタイミングで公開したURLが無効になってしまうかもしれません。

それと、やっぱり、一番重要なのは3点目の課金体系の違いだと思います。特に、小規模で非常にアクセスの少ないコンテンツを、常に、Amazon EC2のインスタンスで運用するのも何かもったいないですよね。

ということで、S3ホスティングに鞍替えさせてもらいました。

実は、本当に伝えたいことは、これだけではなくて…
（ちょっと話が飛躍しちゃうかもしれませんが）人材にも適材適所があるように、テクノロジーにも適材適所があるのだということを知ってもらいたかったのです。
※ ということをプレゼンで伝えられないのが情けない…

ハッカソンでは、プレゼンされたアプリの中から優秀賞を選出するのが通例で、今回も投票式で行われました。

優秀賞は、@sato_shiさんの友達の誕生日一覧を取得するアプリでした。jQueryモバイルも使ったアプリで、圧巻の完成度。プレゼンも歯切れがよくて、場慣れしてますね。さすがです。

ということで、結果は残念でしたが、非常に勉強になりましたし、日頃できない経験をさせていただきました。最後には懇親会もあり、皆さんと交流を持て非常に有意義な時間を過ごすことができました。



最後に、運営の方々に、この場をかりてお礼を言いたいと思います。
ありがとうございました。

次回があるようでしたら、また、参加したいと思います！

関連記事

»
«