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の空き容量が格段に増えましたとさ。

2011年6月30日木曜日

freelancer.comの使い方(発注先選定編)

先日、ひょんなことから「freelancer.com」を使うことがあり、
freelancer.com用語がよく分からずしょーもないことで時間を食ったので備忘録。
freelancer.comの日本語での使い方解説記事が見当たらなかったので、
「発注先選定編」「発注先決定・支払編」の2部構成でまとめます。
(ですが、ユーザー登録や入金等、別に困らなさそうなところは端折ります。)

まずはfreelancer.comの使い方前半の発注先選定から。
(後半の「freelancer.comの使い方(発注先決定・支払編)」はこちらから。)

0.
freelancer.comは簡単に言うと、案件を公開して世界中のフリーランスに入札してもらい、
誰に発注するかをプロジェクトの完了と費用の決済まで面倒を見てくれるサービスです。

1.
まずログイン。facebookのアカウントでログインできます。


2.
次に案件の登録。
「Post Project」をクリックします。見にくいですが下の画像の赤丸の場所です。


3.
案件の概要を英語で入力します。
詳しく書くに越したことはありませんが、
「この画像をレタッチして」とか「このサービスの営業して」みたいに、
かなり適当に書いてるものが多くあるので、
それほど詳細に書かなくても大丈夫っぽいです。
他には
・案件対応に必要なスキル
 Category(画像の赤丸①)を選ぶと、必要なスキル(画像の赤丸②)が自動的に選択されます。
 プロジェクトの内容に応じてスキルを追加したり削除したりできます。
・予算
 最低30ドルからで範囲指定もできるし、ピンポイントで指定もできます。
・入札期間
 デフォルトが5日です。
・その他オプション
 目立たせたり、誰が入札してるのかを他の人から見えなくしたりできます。
 追加費用が掛かるし、試してませんので詳細不明。


4.
入力内容を確認します。
この内容で良ければ「POST PROJECT NOW」を押します。
ただ、プロジェクトを公開するにはデポジットとして5ドル必要です。
これはプロジェクトが完了したタイミングで戻ってきます。
画面右上の「Balance」に表示されている金額が5ドルに満たなければ入金画面に遷移します。
(入金にはPaypalが使えるので、説明は省略します。)


5.
あとは入札(bid)を待つのみです。
入札の一覧は「Dashboad」→「My project」で開く画面に表示される、
プロジェクト名のリンク(画像の赤丸部分)をクリックすれば確認できます。
(画像では「Past Project」タブにプロジェクトが表示されていますが、
 公開中のプロジェクトは「Open for Bidding」に表示されます。)


6.
プロジェクトに対する入札一覧は下の画像のような画面に表示されます。
各入札の内容を見たり、入札をしてきた人にメッセージを出したりできます。
また、気に入らなければ「Hide Bid」を押すと消えます。(厳密には「Hidden Bids」タブに移動します。)


7.
プロジェクトの公開時に設定した期限まで入札内容を吟味します。
(気に入った人が見つかれば期限前に決定することも可能です。)
なお、設定した期限までに発注先を決めないと、
デポジットの5ドルは没収されますのでご注意を。

発注先選定はこれまです。
発注先決定・支払編に続きます。

2011年6月29日水曜日

freelancer.comを使って思ったこと。

クラウドソーシングサービス(というよく分からないジャンル)の「freelancer.com」を使ってみた。

「ロゴを作って欲しいのだが」という人がいたので、
俄に話題になっていたこのサービスを使うことにした。

たった30$でロゴが1つできあがる。
個別にロゴ作成を依頼すると1万円位掛かったりするのが、たった30$。
しかも早くてクオリティが高い。
もちろん日本語はほぼNGやけど、サイトのロゴはだいたい英語やし。

入札してきた人が約60名いるけど、インドが33%、パキスタンが20%、
その他ボリビアとかモロッコとか諸々。

これらの国にとっては物価から考えるに、30$っていうのは大金のはず。
なので、こちらの納得のいく成果物になるまで必死でやってくれる。
文化の違いとか感性の違いか「こんな感じで」というのがなかなか伝わらないけど、
何度でも修正に応じてくれるので問題なし。

ロゴ作成の話やと、例えば6,000円でロゴ作るよと営業して、
30$でやってもらえば3,500円近く抜ける。
こういう類の作業、例えば似顔絵描きとかでもやれば、
軽いお小遣い稼ぎにはなるよね。
どうやって認知させるかに苦労しそうやから多分しないけど。

freelancer.comのトップページにあるカテゴリーリストを見ると、
やってもらえることがかなり多岐に渡るので、
日本人でないとできない作業・業務でなければ、試しに利用してみたら良いと思う。

すごいね、グローバル化。

2011年5月8日日曜日

Apache が悪いのか、何が悪いか分からんが。

Wordpress をインストールして、固定ページにアクセスすると、
コンテンツが画像と判定されてダウンロードが始まる。

Content-type を見ると、text/html じゃなくて、image/ になってた。

Chrome では100%発生するし、
Firefox とかIE でもたまに発生するので、
Apache のせいかもしれない。

で、Apache の設定をいじってるので、ひとつひとつ潰すと、
disk_cache を有効にしているとダメっぽかったので、
とりあえずコメントアウト。

これで解決。

2011年5月6日金曜日

OGP対応したものの・・・

個別記事の管理用ページとインサイトへのリンクが表示されない。

要解決。

<追記>
og:type を article から blog に変えたら表示された。
しかし、Facebookのヘルプを見ると、 blog にしていいのはトップページだけで、
それ以外は article にしろとのこと。
Do not use って書いてるくらいなので、ダメなんでしょう。

というわけで、表示されないままでいきます。

OGP対応まとめメモ

設定のたびに、
http://blog.livedoor.jp/gx_socialmedia_lab/archives/2624886.html
を参照しているが、
しばらくするとこのページの存在を忘れそうなので、
備忘録代わりに設定メモ。

1.アプリ登録
http://developers.facebook.com/setup/
App IDをメモっておく。

2.Likeボタンのコード取得
http://developers.facebook.com/docs/reference/plugins/like/
「STEP1」の部分。

3.OGP用コードの取得
http://developers.facebook.com/docs/reference/plugins/like/
2と同じページの「STEP2」の部分。

4.OGP用コードの修正
metaタグの fb:admins を fb:app_id に変えて、1で取得したApp IDをその値とする。

5.descriptionの設定
<meta property="og:description" content="">
を設定。
contentに任意の文字列を設定。

6.htmlタグに属性2つ追加
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml"

7.チェック
http://developers.facebook.com/tools/lint

Bloggerだと、
■ブログのタイトル下に表示する場合

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:blog.homepageUrl + "&send=true&layout=standard&width=100%&show_faces=true&action=like&colorscheme=light&font&height=65"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100%; height:65px;'/>


■ブログの各記事のタイトル下に表示する場合

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=true&layout=standard&width=100%&show_faces=false&action=like&colorscheme=light&font&height=80"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100%; height:80px;'/>

2011年4月19日火曜日

「ねちゃったー」のアラーム音を変えたい方へ

「ねちゃったー」のコメントを見てると、「アラーム音にバリエーションがほしい」というコメントがありました。

「ねちゃったー」ではアラーム音はひとつも用意していません。
アラーム音の設定画面に出てくる音は、全てAndroid自体が持っている音です。
ガラケーのように用意されている中から妥協して選ぶより、自分が好きな音楽を設定できる方が格段に良いでしょう。

そこで、自分の好きな音楽をアラーム音に使いたい場合は、「Tone Picker」っていうアプリを使ってください。
これひとつで電話やメールの着信音も好きな音楽に変えられるので。

2011年3月6日日曜日

「ねちゃったー」がandroiderに掲載されました。

拙作アプリ「ねちゃったー」がandroiderに掲載されました。
先日のベクターに続く、有名サイトへの掲載です。

記事については右のURLからご覧ください。 → http://bit.ly/hZzmxr

しっかりと使い方の注意まで書いていただいており、
とても良い紹介記事になっております。
ありがとうございます。

もしお使いいただけるようでしたら、
下記QRコードからお願いいたします。(マーケットにリンクします。)