2011年7月31日日曜日

Facebookアプリのアクセス許可ダイアログの表示方法

最初から言い訳しますが、Facebookアプリと言ってますが正しい用語が分からないです。
Facebookページに追加するアプリのことです。
Canvas Pageとも呼ぶんですかね。
親切な人、教えてくださいな。

Facebookアプリを使うときに、そのアプリに対してアクセス許可をしていなければダイアログが出ますが、
1.新しいウインドウが開いて、そこに承認画面が表示されるタイプ
2.ページ内にダイアログのレイヤー(lightbox的なカンジ)が表示されて、そこに承認画面が表示されるタイプ
の2種類あります。

言葉で説明するのは難しいので、実際に見てください。
1は、画面左にあるメニューの「承認方法テスト(別ウインドウに表示版)」から、
2は、「承認方法テスト(ページ内に表示版)」から試してください。
このブログのFacebookページ

1はポップアップブロックに引っ掛かってしまうという大弱点がありますし、
Facebook公式アプリの認証が2なので、できれば2にしたいと思い、
調べたけどなかなか分からないので試行錯誤を重ねまして、その成功したコードを紹介します。
(Javascript SDKを使いました。)

1のコード:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js"></script>
<script type="text/javascript">
  FB.init({
    appId  : 'アプリのApp ID',
    status : true,
    cookie : true,
    xfbml  : true
  });
  FB.getLoginStatus(function(response) {
    if (response.session) {
      // 許可済みの時の挙動
    } else {
      FB.ui({
        method: 'permissions.request', // 
        display: 'popup'
      },
      function (response) {
        if(response.session){
          // 許可されたときの挙動
        }else{
          // 許可されなかったときの挙動
        }
      });
    }
  });
</script>
2のコード:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js"></script>
<script type="text/javascript">
  FB.init({
    appId  : 'アプリのApp ID',
    status : true,
    cookie : true,
    xfbml  : true
  });
  FB.getLoginStatus(function(response) {
    if (response.session) {
      // 許可済みの時の挙動
    } else {
      FB.ui({
        method: 'auth.login',
        display: 'iframe' // pageでもOK。違いはよく分からんw
      },
      function (response) {
        if(response.session){
          // 許可されたときの挙動
        }else{
          // 許可されなかったときの挙動
        }
      });
    }
  });
</script>

違うのは赤字の部分です。
<script></script>の部分は、<head>内に入れてもOKですが、
離れてるのもイヤなんで<body>に置いてます。
</body>の直前に入れるのが描画上良いんでしたっけね。
まあ細かいことは置いておきます。

で、普通考えればdisplayだけ変えればいいような気がしますが、違ったんです。
auth.loginは使われなくなって、permissions.requestを代わりに使えという話もあるんですが、
permissions.requestはバグのせいか何かでdisplayがpopupしか使えないみたいです。
なので、auth.loginを使っています。(いずれpermissons.requestが使えるんでしょうかね。)

リファレンスが公式にも少なくて手探り過ぎて笑えます。
これ、仕事でやってる人は大変そう。
このエントリーをはてなブックマークに追加

2011年7月4日月曜日

freelancer.comの使い方(発注先決定・支払編)

freelancer.comの使い方の後半です。
前回の「freelancer.comの使い方(発注先選定編)」はこちらから

案件の公開、発注先の選定に比べると用語が独特で分かりにくかったです。

では発注先の決定から支払の手順です。

1.
入札者の精査をして、発注しようという人を見つけたら、
「AWARD PROJECT」ボタン(画像の赤丸部分)を押します。
ちなみに、複数人に発注できるようです。
当然その分費用は掛かりますが。


2.
すると、入札者リストの上部に下の画像のような表示が出てきます。
ここで、まず「Create Milestone」(画像の赤丸①)をクリックします。
すると、その下に画像の赤丸②のような表示が出てきます。
ここに、フリーランサーが指定している「Milestone」の金額(※)を入力して、
その横にある「CREATE MILESTONE」ボタンを押します。
※「Milestone」は入札額の下に表示されています。
 下の画像の場合では「Fully paid」となっていますが、
 これは「Milestone」を支払済であることを示しています。

なお、「Milestone」とは前払金を意味する用語で、
発注者が成果物だけ受け取って逃げる事故と、
フリーランサーがお金だけ受け取って逃げる事故を避ける仕組みです。
一旦、「Milestone」を発注者からfreelancer.comが預かり、
案件終了後に発注者からの指示でフリーランサーに渡される、という流れです。
「Milestone」の金額は人によってまちまちで、
フリーランサーごとに入札額の下(画像の赤丸③)に表示されています。
表示されていない場合は「Milestone」は不要、という意味です。
一般的なmilestoneとは意味が違うのでご注意を。

「Milestone」の支払がないと案件に着手してくれないので、
発注したら早々に支払ったほうが良いと思います。


3.
案件がスタートしたら、後は直接案件の進捗や成果物についてやり取りをします。
今回はロゴの作成を依頼したのですが、
コンセプトの伝達から微修正含めて10往復くらいやり取りしました。

で、成果物に納得ができれば費用の支払をします。
「Transfer Funds」(画像の赤丸①)をクリックします。
すると、その下に画像の赤丸②のような表示が出てきます。
ここに入札金額と同じ金額を入力して、その横にある「TRANSFER FUNDS」ボタンを押します。

「Milestone」で全部充当できればそのまま支払は完了します。
足りない場合は別途Paypal等で入金した上で支払います。


4.
支払が完了すると案件終了となり、案件公開時に支払った5ドルが返金されます。

これがfreelancer.comのおおまかな使い方です。
もし使うことがあれば、その時は参考にしてもらえれば幸いです。
このエントリーをはてなブックマークに追加

2011年7月3日日曜日

google+を使い始めると良いこと(その1)

Picasaの制限容量は1GBですが、google+を使い始めると長辺が2048ピクセルの写真と15分以内の動画が、
その制限から除外されるみたい。

確かにgoogle外に逃がすわけないし、Streamに画像やら動画流しているうちにPicasaの制限にすぐひっかかるわな。

というわけで、Picasaの空き容量が格段に増えましたとさ。
このエントリーをはてなブックマークに追加