adlib's Blog

有限会社アドリブのBlogです。 サービスや覚書などを掲載していきます。

2011年11月20日日曜日

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>

2011年11月4日金曜日

Web Intent の使い方メモ

EXP-Hackathonに参加してきました。

そこで@a2cさんたちのチームでGitkitとWebIntentを使ったサービスを作成したのですが
私はweb intent側を担当しました。
前から触ってみたかったのですが、どうしても?なところがあったので、いいチャンスだと
思い、Googlerの方にいろいろ聞いてなんとか理解できた(気がする)のでメモしておきます。

*Web Intentとは?
http://webintents.org/ を見てください。
.....これでわかる人はこれ以上読まなくてOKですw
あるいは
Web Intent: GoogleによるWebアプリ連携メカニズムも参考になります。

上記を読んだのですが、androidにおけるintentみたいなものだと思っていたのでどうしても
わからない点がありました。それは、あるintentを発行した際にどのサービスがその処理を
行うことができるかの関連づけを、どこのだれがやるかということです。

androidの場合であれば、アプリのマニフェストファイルにインテントフィルタを記述すると
OSにそのフィルタが登録され、ほかのアプリケーションのintentによってそのアプリが一覧から出てきます。
例えばAというアプリのマニフェストファイルに
<action android:name="android.intent.action.SEND" />
とあれば、他のアプリ(例えばB)からは
 Intent intent = new Intent();
 intent.setAction(Intent.ACTION_SEND);
 startActivity(intent);
のようにするとA(と同じフィルタを持つアプリ)が表示されます。
ここで重要なのは、Aがどんな種類のインテントに反応するかを「自ら」OSに登録し、
BはAの存在を知らない(暗黙的なので)という点です。

さてWeb Intentですが、前記の記事を読むとわかると思いますが、A,Bそれぞれに関する記述はあります。
しかし肝心のBがある処理を選ぶ際にリストされる要素のバインディング(?)がどのように
行われるかが具体的に記述されていないのです(読解力ないです)。
いいかえると
「どうやってBはAの存在を知ってるわけ?」
ということです。

いろいろいろいろ考えたのですが結局わかりませんでした。で、今回のEXP-Hackthonで謎が解けたと。

答えは簡単で
「Bの中にAやA’の情報が記述されていた」
です。なんだってーーー!?

はじめはwebintents.orgにAの情報を登録するのかなと思いました。なぜなら
http://webintents.org/#api
を見ると、
Intent Registration
があるので、てっきりどこか「別の」所に登録するのかと思ったわけですよ。

実はどこかに登録するわけではなく、Bのソース内にA(やA’)の情報を記述する必要があり
webintents.orgに「これこれを処理できますよ」情報があつまってるわけでも何でもないと
いうわけです。

なのでBはAの存在を知らないと作れないというわけでした。ちゃんちゃん。

備考1)
http://examples.webintents.org/intents/pick/index.html
のソースをよーく読むとわかります。不親切ですみません。

備考2)
BはAの存在を知らないと作れないと書きましたが、どこかの誰かがサービスディレクトリのようなものを
作って、必要なIntentリストを返すようにし、動的にインクルードできるようにすれば、androidの
暗黙的intentのように使えると思います。
それとgitkitを組み合わせるようにすれば、認証あり/なしで使えるものリストを変更できるように
すれば課金とかのビジネス化もできるかもです。

2010年6月16日水曜日

【無料オンラインサービス(つぶやきミハル)】Twitterに含まれるURLが安全かチェックします。

有限会社アドリブ (東京都渋谷区) は、サイトミハル (ガンブラー・改ざん
をチェックするサービス) のシリーズとして、Twitter のタイムラインに掲
載されている URL に危険性がないかをチェックする無料サービス『つぶや
きミハル』を、本日2010年6月16日(水)より開始します。

『つぶやきミハル』は、Twitterのタイムラインに掲載されているURLに
Gumblar、8080、Gumblar.xの誘導コードや外部srcのJS、iframe、object
など危険と考えられるものがないかをチェックする無料オンラインサービス
です。

使用方法は簡単、『つぶやきミハル』のウェブサイトで現在使用している
Twitterのアカウント名を登録します。登録されたあなたのアカウントを
『つぶやきミハル』がフォローしますので、『つぶやきミハル』をフォロー
してください。以上で簡単にサービスをご利用頂けるようになります。

あなたのタイムラインに含まれるURL先に危険性がある場合、『つぶやきミハ
ル』があなたに以下のようなメンション付きでツイートします。

(ツイート例)
@username @checkedusrのhttp://example.jp/は危険の可能性があります



『つぶやきミハル』は以下のサイトから無料でご利用いただけます。
http://www.adlibjapan.jp/



【本件に関するお問い合せ先】
 有限会社アドリブ(adlib Ltd,.)
 渋谷オフィス:東京都渋谷区渋谷2-22-7 渋谷新生ビル301
 お問い合せ方法: info@adlibjapan.jp
 TEL: 050-7522-5390   FAX: 03-3486-8332

2010年4月29日木曜日

android勉強会開催のお知らせ

「androidを1からやってみる勉強会<第11回>@東京・半蔵門」のお知らせをいたします。

日  時: 5月11日(火) 18時30分~21時00分
場  所: 株式会社クリーク・アンド・リバー社 2階 (東京都千代田区麹町2-10-9)
      地下鉄半蔵門駅3番出口 徒歩2分、有楽町線麹町駅3番出口 徒歩4分
参加費: 3150円 (リピーターの方は2625円)

詳細及び参加予約申込は下記URLをご参照ください。
http://atnd.org/events/4307

よろしくお願いいたします。

2010年4月26日月曜日

断続的なサービス一時停止に関するお詫び

日頃よりサイトミハルをご利用いただき、誠にありがとうございます。

さて平成22年4月25日の17時頃から26日未明にかけて断続的に
サービスが一時停止する障害が発生しておりました。
ご利用者様にはご不便、ご迷惑をお掛け致しました事をお詫び申し上げます。

現在は普及しております。
この影響で前回の調査結果との差分に若干の変化が出る場合が
ありますが次回の調査で正常に戻ります。

今後とも、サービスの向上に努めてまいりますので
弊社サービスをよろしくお願い申し上げます。

2010年3月30日火曜日

twitter上のURLを検査する「つぶやきミハル」を開設しました

つぶやきミハルは、twitter の public timeline に掲載されている URL に Gumblar, 8080, Gumblar.x の誘導コードや外部 src の JS, iframe, object など危険と考えられるものがないかを定期的に検査し、結果を公開するブログサイトです。

検査結果は「Gumblar系の可能性○ヶ所、外部SRC ○ヶ所」と一目で分かるようになっています。また、各ブログエントリーの「more」をクリックしていただくと詳細な検査結果が表示されます。

更に、この検査結果の簡易版を twitter にも掲載していますので、お手軽にご覧頂けます。

2010年2月9日火曜日

(締め切りました)サイトミハル有料版トライアルユーザー募集!

おかげさまでトライアルユーザーの申し込みが定員になりましたので
一旦締め切らさせていただきます。

ありがとうございました!

---------------
サイトミハル有料版のトライアルユーザーを募集します。
先着50サイトに限り、2月末まで有料版と同じサービスを無料で提供します。

ご希望の方は sitemiharu@adlibjapan.jp まで下記のメールをお送り下さい。
・件名を「サイトミハル有料版トライアルユーザー希望」
・本文に
法人名(今回は法人の方に限定させていただきます)
担当者のお名前
URL

*ご注意*
・URLのドメイン名といただいたメールアドレスのドメイン名が異なる場合は原則申し込みになれません。
もしデザイン会社様などでクライアント先のサイトをチェックしたい場合は、その旨メールにお書きください。
こちらで判断の上、ご連絡差し上げます。
・有料版はまだテスト中のため不具合やサービスが停止することがあることをご了承の上、お申込みください。

ご質問等も sitemiharu@adlibjapan.jp