Facebookモバイルアプリの超簡単サンプル（webintentもあるよ）

2011/11/20 にパソナさんで行われたハッカソンに参加してきました。
教えていただいた@KenTamagawa さん、 @horiuchiさん、そのた開催を開催をしていただいている
スタッフの方、ありがとうございました。


超参考になるリンク集
---
AWSチュートリアルの資料
①AWSのアカウントを開設する
http://www.slideshare.net/kentamagawa/3aws

②EC2を立ち上げる
http://www.slideshare.net/kentamagawa/3amazon-ec2

Facebook api関係リンクです。
http://facebook-docs.oklahome.net/archives/51972629.html
http://developers.facebook.com/docs/reference/api/
http://developers.facebook.com/docs/reference/javascript/FB.api/
https://developers.facebook.com/docs/reference/javascript/
http://www.facebook.com/notes/%E4%BD%90%E3%80%85%E6%9C%A8-%E9%99%BD/facebook-mobile%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9%E7%BF%BB%E8%A8%B3/391242249979
---

お礼（？）にそこで作ったアプリ（とソース）をさらしておきます。

できること：FacebookにPicasaの画像をアップする。
特徴（？）：Facebookモバイルアプリなこと。(webIntenを使っていること。

ソースは↓。YOUR_APP_IDは自分のに変更してください＆足りないファイルはhttp://webintents.org/から
さらってきてください。

index.html

＜html>
    ＜head>
        ＜title>WithIntent＜/title>
        ＜meta name="viewport"
              content="initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
        ＜script src="./webintents.min.js">＜/script>
        ＜script src="./events.js">＜/script>

＜!--
web intentの設定
//-->
    ＜intent
        action="http://webintents.org/pick"
        type="image/*"
        href="/fa/pick_google.html"
        title="Picasaから画像を選ぶ" />
    ＜intent
        action="http://webintents.org/pick"
        type="image/*"
        href="/fa/pick_google.html"
        title="Picasaから画像を選ぶ" />

＜!--
facebook用の設定
//-->

    ＜script>
        window.fbAsyncInit = function() {
            FB.init({ appId: 'YOUR_APP_ID',
                status: true,
                cookie: true,
                xfbml: true,
                oauth: true});

            FB.Event.subscribe('auth.statusChange', handleStatusChange);
        };
    ＜/script>
    ＜script>
        function handleStatusChange(response) {
            document.body.className = response.authResponse ? 'connected' : 'not_connected';
            if (response.authResponse) {
                console.log(response);

                updateUserInfo(response);
            }
        }
    ＜/script>

＜!--
ボタンが押されたときのハンドラとintentの設定
//-->
    ＜script>
        attachEventListener(window, "load", function() {
            var pickImage = document.getElementById("pickImage");
            attachEventListener(pickImage, "click", function() {
                var intent = new Intent(
                "http://webintents.org/pick",
                "image/*");

                window.navigator.startActivity(intent, intentResponse);

                return false;
            });

            var intentResponse = function (data) {
                var output = document.getElementById("output");
                output.src = data;
                focus();
                data = data + "#";
                var obj = {
                    method: 'feed',
                    source: data,
                    link : data,
                    name: 'WithIntent',
                    caption: 'Image',
                    description: 'This image is posted from another web service via webIntents.'
                };

                function callback(response) {
                }
// 戻ってきたデータを組み立ててFBに送る（とダイアログが出ます）
                FB.ui(obj, callback);
            };
        }, false);
    ＜/script>

    ＜style>
        body.connected #login { display: none; }
        body.connected #logout { display: block; }
        body.not_connected #login { display: block; }
        body.not_connected #logout { display: none; }
    ＜/style>
＜/head>
＜body>
    ＜h2>Upload from Picasa image to Facebook＜/h2>
    ＜div id="fb-root">＜/div>
    ＜script>
        (function() {
            var e = document.createElement('script'); e.async = true;
            e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
            document.getElementById('fb-root').appendChild(e);
        }());
    ＜/script>
    ＜div id="login">
        ＜p>＜button onClick="loginUser();">Login＜/button>＜/p>
    ＜/div>

    ＜script>
        function loginUser() {  
            FB.login(function(response) { }, {scope:'email'});
        }
    ＜/script>

    ＜script>
        function updateUserInfo(response) {
            FB.api('/me', function(response) {
                document.getElementById('user-info').innerHTML = '＜img src="https://graph.facebook.com/' + response.id + '/picture">' + response.name;
            });
        }
    ＜/script>

    ＜div id="logout">
＜!--
ログインしないと出ない
//-->
        ＜p>＜button  onClick="FB.logout();">Logout＜/button>＜/p>
        ＜div id="user-info">＜/div>
        ＜fb:like>＜/fb:like>
        ＜button id="pickImage">＜img src="picasa.jpg"/>＜/button>
        ＜img id="output" />
        ＜!--
        ＜a href="#" onclick="getUserFriends();">Get friends＜/a>＜br>
        ＜div id="user-friends">＜/div>
        ＜a href="#" onclick="sendRequest();">Send request＜/a>＜br>
        //-->
    ＜/div>

＜/body>
＜/html>